Spaces:

AnesKAM
/

SurfGO

Running

App Files Files Community

AnesKAM commited on May 2

Commit

a3d6c5c

verified ·

1 Parent(s): 8476a6d

Update index.html

Browse files

Files changed (1) hide show

index.html +354 -560

index.html CHANGED Viewed

@@ -1,668 +1,462 @@
 <!DOCTYPE html>
-<html lang="ar" dir="rtl">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-    <title>SurfGO | Search Results</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Tajawal:wght@300;500;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
     <style>
         /* =========================================
-           1. DESIGN TOKENS (Aurora Theme)
            ========================================= */
         :root {
-            --bg-deep: #0B0F19;
-            --glass-surface: rgba(255, 255, 255, 0.03);
-            --glass-border: rgba(255, 255, 255, 0.05);
-            --glass-highlight: rgba(255, 255, 255, 0.08);
-            --accent-primary: #6366f1;   /* Indigo */
-            --accent-secondary: #ec4899; /* Pink */
-            --accent-glow: rgba(99, 102, 241, 0.3);
-            --text-main: #ffffff;
-            --text-muted: #94a3b8;
-            --text-link: #818cf8;
-            --radius-sm: 12px;
-            --radius-md: 20px;
-            --radius-lg: 32px;
-            --font-main: 'Plus Jakarta Sans', 'Tajawal', sans-serif;
-            --nav-height: 80px;
         }
-        /* =========================================
-           2. BASE & RESET
-           ========================================= */
-        * { margin: 0; padding: 0; box-sizing: border-box; outline: none; }
         body {
-            font-family: var(--font-main);
-            background-color: var(--bg-deep);
-            color: var(--text-main);
             min-height: 100vh;
             overflow-x: hidden;
             position: relative;
         }
-        /* Ambient Background Gradients */
-        body::before, body::after {
-            content: '';
             position: fixed;
-            border-radius: 50%;
-            filter: blur(120px);
-            z-index: -1;
-            opacity: 0.4;
-            animation: floatBg 20s infinite alternate;
-        }
-        body::before {
-            top: -10%; left: -10%; width: 50vw; height: 50vw;
-            background: radial-gradient(circle, var(--accent-primary) 0%, transparent 70%);
         }
-        body::after {
-            bottom: -10%; right: -10%; width: 40vw; height: 40vw;
-            background: radial-gradient(circle, var(--accent-secondary) 0%, transparent 70%);
-            animation-delay: -10s;
         }
-        @keyframes floatBg {
-            0% { transform: translate(0, 0); }
-            100% { transform: translate(30px, 50px); }
         }
-        /* Grid Pattern */
-        .grid-pattern {
-            position: fixed;
-            inset: 0;
-            background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
-                              linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
-            background-size: 40px 40px;
-            mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
-            pointer-events: none;
-            z-index: -1;
         }
         /* =========================================
-           3. NAVBAR (Floating Style)
            ========================================= */
-        .navbar {
             position: fixed;
-            top: 20px;
             left: 50%;
             transform: translateX(-50%);
-            width: 95%;
-            max-width: 1400px;
-            height: var(--nav-height);
-            background: rgba(11, 15, 25, 0.7);
-            backdrop-filter: blur(20px);
-            -webkit-backdrop-filter: blur(20px);
-            border: 1px solid var(--glass-border);
-            border-radius: var(--radius-lg);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0 24px;
-            z-index: 1000;
-            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
-            transition: 0.3s ease;
         }
-        .brand {
             font-weight: 700;
-            font-size: 24px;
-            color: var(--text-main);
-            text-decoration: none;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            letter-spacing: -0.5px;
         }
-        .brand span {
-            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
         }
-        .brand-icon {
-            width: 36px; height: 36px;
-            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
-            border-radius: 10px;
-            display: flex; align-items: center; justify-content: center;
-            color: white; font-size: 18px;
         }
-        /* Search Bar in Nav */
         .search-container {
-            flex: 1;
-            max-width: 600px;
-            margin: 0 40px;
-            position: relative;
-        }
-        .search-bar {
             width: 100%;
             display: flex;
-            align-items: center;
-            background: var(--glass-surface);
             border: 1px solid var(--glass-border);
             border-radius: 100px;
-            padding: 4px;
-            transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
-        .search-bar:focus-within {
-            background: var(--glass-highlight);
-            border-color: var(--accent-primary);
-            box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
         }
-        .search-bar input {
             flex: 1;
             background: transparent;
             border: none;
-            padding: 12px 20px;
-            color: var(--text-main);
-            font-size: 15px;
-            font-family: inherit;
-        }
-        .search-bar input::placeholder { color: var(--text-muted); }
-        .nav-actions {
-            display: flex;
-            gap: 12px;
-            align-items: center;
-        }
-        .action-btn {
-            background: var(--glass-surface);
-            border: 1px solid var(--glass-border);
-            width: 40px; height: 40px;
-            border-radius: 12px;
-            color: var(--text-muted);
-            cursor: pointer;
-            transition: 0.2s;
-            display: flex; align-items: center; justify-content: center;
-        }
-        .action-btn:hover {
-            background: var(--glass-highlight);
-            color: var(--text-main);
-            transform: translateY(-2px);
         }
-        /* =========================================
-           4. TABS (Floating Pills)
-           ========================================= */
-        .tabs-container {
-            display: flex;
-            gap: 8px;
-            overflow-x: auto;
-            padding: 4px;
-            scrollbar-width: none;
-            -ms-overflow-style: none;
         }
-        .tabs-container::-webkit-scrollbar { display: none; }
-        .tab-pill {
-            padding: 8px 20px;
-            border-radius: 100px;
-            background: transparent;
-            border: 1px solid var(--glass-border);
-            color: var(--text-muted);
-            font-size: 13px;
-            font-weight: 500;
             cursor: pointer;
-            white-space: nowrap;
             transition: 0.3s;
-            display: flex; align-items: center; gap: 8px;
-        }
-        .tab-pill i { font-size: 12px; }
-        .tab-pill.active {
-            background: var(--text-main);
-            color: var(--bg-deep);
-            border-color: var(--text-main);
-            box-shadow: 0 4px 15px rgba(255,255,255,0.2);
-        }
-        .tab-pill:hover:not(.active) {
-            border-color: var(--text-muted);
-            color: var(--text-main);
         }
         /* =========================================
-           5. MAIN LAYOUT
            ========================================= */
-        .page-wrapper {
-            max-width: 1400px;
-            margin: 0 auto;
-            padding: calc(var(--nav-height) + 40px) 20px 40px;
-            display: grid;
-            grid-template-columns: 1fr 320px;
-            gap: 40px;
-        }
-        /* Results Area */
-        .results-area {
             display: flex;
-            flex-direction: column;
-            gap: 24px;
-        }
-        /* Meta Tag */
-        .result-meta {
-            display: flex;
-            align-items: center;
-            font-size: 13px;
-            color: var(--text-muted);
-            margin-bottom: 10px;
         }
-        .result-meta i { margin-left: 8px; color: var(--accent-primary); }
-        /* Skeleton */
-        .skeleton {
-            display: none;
-            padding: 24px;
-            background: var(--glass-surface);
-            border: 1px solid var(--glass-border);
-            border-radius: var(--radius-md);
-            margin-bottom: 16px;
-            animation: pulse 1.5s infinite ease-in-out;
-        }
-        .skeleton-line {
-            height: 12px; background: rgba(255,255,255,0.05);
-            border-radius: 6px; margin-bottom: 12px;
-        }
-        .skeleton-line.title { height: 20px; width: 60%; background: rgba(255,255,255,0.1); }
-        /* CSE Styling (Customizing Google) */
-        .cse-wrapper {
-            min-height: 50vh;
-        }
-        /* Hiding Clutter */
-        .gsc-results-branding, .gsc-adBlock, .gsc-above-wrapper-area,
-        .gcsc-find-more-on-google-root, .gsc-search-box { display: none !important; }
-        .gsc-control-cse {
-            background: transparent !important;
-            border: none !important;
-            padding: 0 !important;
-            font-family: var(--font-main) !important;
-        }
-        /* Result Cards Customization */
-        .gsc-result {
-            background: var(--glass-surface) !important;
-            border: 1px solid var(--glass-border) !important;
-            border-radius: var(--radius-md) !important;
-            padding: 24px !important;
-            margin-bottom: 20px !important;
-            transition: all 0.3s ease !important;
-            position: relative;
-            overflow: hidden;
-        }
-        .gsc-result::after {
-            content: '';
-            position: absolute;
-            top: 0; left: 0; width: 4px; height: 100%;
-            background: linear-gradient(to bottom, var(--accent-primary), var(--accent-secondary));
-            opacity: 0;
             transition: 0.3s;
-        }
-        .gsc-result:hover {
-            transform: translateY(-4px) !important;
-            border-color: rgba(255,255,255,0.1) !important;
-            box-shadow: 0 15px 30px rgba(0,0,0,0.2) !important;
-            background: var(--glass-highlight) !important;
-        }
-        .gsc-result:hover::after { opacity: 1; }
-        .gs-title {
-            color: var(--text-link) !important;
-            font-size: 18px !important;
-            font-weight: 600 !important;
-            text-decoration: none !important;
-            margin-bottom: 8px !important;
-            display: block;
-        }
-        .gs-title:hover { text-decoration: underline !important; }
-        .gsc-url-top { color: var(--accent-secondary) !important; font-size: 12px !important; margin-bottom: 10px; }
-        .gs-snippet { color: var(--text-muted) !important; font-size: 14px !important; line-height: 1.6; }
-        /* Pagination */
-        .gsc-cursor-box { text-align: center; margin-top: 40px; }
-        .gsc-cursor-page {
-            color: var(--text-muted) !important;
-            background: transparent !important;
-            border: 1px solid var(--glass-border) !important;
-            border-radius: 8px !important;
-            padding: 8px 16px !important;
-            margin: 0 6px !important;
-            transition: 0.2s;
-        }
-        .gsc-cursor-current-page {
-            background: var(--accent-primary) !important;
-            color: white !important;
-            border-color: var(--accent-primary) !important;
-        }
-        .gsc-cursor-page:hover { transform: scale(1.1); }
-        /* =========================================
-           6. SIDEBAR (Bento Grid Style)
-           ========================================= */
-        .sidebar {
-            position: sticky;
-            top: 120px;
             display: flex;
             flex-direction: column;
-            gap: 24px;
         }
-        .widget {
-            background: rgba(255, 255, 255, 0.02);
             border: 1px solid var(--glass-border);
-            border-radius: var(--radius-md);
-            padding: 24px;
-            backdrop-filter: blur(10px);
-        }
-        .widget-title {
-            font-size: 14px;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            color: var(--text-muted);
-            margin-bottom: 16px;
             display: flex;
             align-items: center;
-            gap: 8px;
-        }
-        .widget-title::before {
-            content: ''; width: 8px; height: 8px;
-            background: var(--accent-primary);
-            border-radius: 50%;
         }
-        /* AI Widget */
-        .ai-widget {
-            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.1));
-            border-color: rgba(255,255,255,0.08);
-            text-align: center;
-        }
-        .ai-avatar {
-            width: 60px; height: 60px;
-            border-radius: 50%;
-            margin: 0 auto 16px;
             object-fit: contain;
-            border: 2px solid rgba(255,255,255,0.1);
-            padding: 5px;
-            background: rgba(0,0,0,0.2);
         }
-        .btn-primary {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            width: 100%;
-            padding: 12px;
-            border-radius: 12px;
-            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
-            color: white;
-            text-decoration: none;
-            font-weight: 600;
-            font-size: 14px;
-            margin-top: 16px;
             transition: 0.3s;
-            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
         }
-        .btn-primary:hover {
-            filter: brightness(1.1);
-            transform: translateY(-2px);
         }
-        /* Stat Widget */
-        .stat-row {
-            display: flex;
-            justify-content: space-between;
-            margin-top: 12px;
         }
-        .stat-item {
             text-align: center;
-        }
-        .stat-val {
-            font-size: 20px;
-            font-weight: 700;
-            color: var(--text-main);
-        }
-        .stat-label {
-            font-size: 11px;
-            color: var(--text-muted);
         }
         /* =========================================
-           7. RESPONSIVE
            ========================================= */
-        @media (max-width: 1100px) {
-            .page-wrapper { grid-template-columns: 1fr; }
-            .sidebar { display: none; }
-            .navbar { border-radius: 0; top: 0; width: 100%; padding: 0 16px; }
-            .brand span { display: none; }
-            .search-container { margin: 0 16px; }
         }
-        @media (max-width: 600px) {
-            .nav-actions { display: none; } /* Hide extra buttons on small screens */
         }
     </style>
 </head>
 <body>
-    <div class="grid-pattern"></div>
-    <!-- ═══ NAVBAR ═══ -->
-    <nav class="navbar">
-        <a href="index.html" class="brand">
-            <div class="brand-icon"><i class="fa-solid fa-shapes"></i></div>
-            <span>SurfGO</span>
-        </a>
         <div class="search-container">
-            <form class="search-bar" action="results.html" method="get">
-                <input type="hidden" name="tab" id="tab-input" value="all">
-                <input type="text" name="q" id="main-input" placeholder="ابحث في الويب..." autocomplete="off">
-                <button type="submit" class="action-btn" style="background: var(--accent-primary); color:white; border:none;">
-                    <i class="fa-solid fa-search"></i>
                 </button>
             </form>
         </div>
-        <div class="nav-actions">
-            <div class="tabs-container" id="tabs-wrapper">
-                <button class="tab-pill active" data-tab="all"><i class="fa-solid fa-globe"></i> الكل</button>
-                <button class="tab-pill" data-tab="news"><i class="fa-regular fa-newspaper"></i> أخبار</button>
-                <button class="tab-pill" data-tab="images"><i class="fa-regular fa-image"></i> صور</button>
-                <button class="tab-pill" data-tab="videos"><i class="fa-solid fa-play"></i> فيديو</button>
-            </div>
         </div>
-    </nav>
-    <!-- ═══ CONTENT ═══ -->
-    <div class="page-wrapper">
-        <main class="results-area">
-            <!-- Meta Info -->
-            <div class="result-meta" id="meta-bar">
-                <i class="fa-solid fa-bolt"></i>
-                <span id="meta-text">جاري الاستعلام...</span>
-            </div>
-            <!-- Skeleton Loader -->
-            <div class="skeleton" id="skeleton">
-                <div class="skeleton-line title"></div>
-                <div class="skeleton-line"></div>
-                <div class="skeleton-line" style="width: 80%"></div>
-            </div>
-            <div class="skeleton" id="skeleton2" style="animation-delay: 0.2s">
-                <div class="skeleton-line title"></div>
-                <div class="skeleton-line"></div>
-                <div class="skeleton-line" style="width: 60%"></div>
-            </div>
-            <!-- Results Container -->
-            <div class="cse-wrapper" id="results-container">
-                <!-- Google Results Injected Here -->
-            </div>
-        </main>
-        <aside class="sidebar">
-            <!-- Genisi Widget -->
-            <div class="widget ai-widget">
-                <img src="Genisi.png" alt="Genisi" class="ai-avatar">
-                <h3 style="font-size: 16px; margin-bottom: 8px;">Genisi AI Core</h3>
-                <p style="font-size: 13px; color: var(--text-muted); margin-bottom: 12px;">مساعدك الذكي الشخصي للإجابة على أسئلتك المعقدة.</p>
-                <a href="https://genisi.web.app/" target="_blank" class="btn-primary">
-                    <i class="fa-solid fa-robot"></i> تشغيل Genisi
-                </a>
-            </div>
-            <!-- Stats Widget -->
-            <div class="widget">
-                <div class="widget-title">إحصائيات البحث</div>
-                <div class="stat-row">
-                    <div class="stat-item">
-                        <div class="stat-val" id="stat-engine">WEB</div>
-                        <div class="stat-label">المحرك</div>
-                    </div>
-                    <div class="stat-item">
-                        <div class="stat-val" id="stat-time">0.0s</div>
-                        <div class="stat-label">الزمن</div>
-                    </div>
-                </div>
-            </div>
-            <!-- Quick Links -->
-            <div class="widget">
-                <div class="widget-title">روابط سريعة</div>
-                <a href="https://youtube.com" target="_blank" style="text-decoration:none; color:var(--text-muted); font-size:14px; display:flex; align-items:center; gap:10px; margin-bottom:12px;">
-                    <i class="fa-brands fa-youtube" style="color: #ef4444;"></i> YouTube
-                </a>
-                <a href="https://wikipedia.org" target="_blank" style="text-decoration:none; color:var(--text-muted); font-size:14px; display:flex; align-items:center; gap:10px;">
-                    <i class="fa-brands fa-wikipedia-w" style="color: #fff;"></i> Wikipedia
-                </a>
-            </div>
-        </aside>
     </div>
     <script>
-        // ── CONFIGURATION ───────────────────────────────────
-        const ENGINES = {
-            all:    '75aa960081baa4f0c',
-            news:   '35b0f5b6012e94f78',
-            images: '23c7fd94975714dd8',
-            videos: 'b11f5dceb04784b9f'
-        };
-        // ── STATE & INIT ─────────────────────────────────────
-        const params = new URLSearchParams(window.location.search);
-        let currentTab = params.get('tab') || 'all';
-        const query = params.get('q');
-        const container = document.getElementById('results-container');
-        const skeleton = document.getElementById('skeleton');
-        const skeleton2 = document.getElementById('skeleton2');
-        const metaText = document.getElementById('meta-text');
-        const tabInput = document.getElementById('tab-input');
-        const statEngine = document.getElementById('stat-engine');
-        // Setup Input
-        document.getElementById('main-input').value = query || '';
-        if(query) document.title = `${query} - SurfGO`;
-        // ── TAB SWITCHING LOGIC ─────────────────────────────
-        document.querySelectorAll('.tab-pill').forEach(btn => {
-            if(btn.dataset.tab === currentTab) btn.classList.add('active');
-            btn.addEventListener('click', () => {
-                if(btn.dataset.tab === currentTab) return;
-                // UI Update
-                document.querySelectorAll('.tab-pill').forEach(b => b.classList.remove('active'));
-                btn.classList.add('active');
-                // Logic Update
-                currentTab = btn.dataset.tab;
-                tabInput.value = currentTab;
-                loadEngine(currentTab);
-                // Update URL
-                const newUrl = new URL(window.location);
-                newUrl.searchParams.set('tab', currentTab);
-                window.history.replaceState({}, '', newUrl);
-            });
-        });
-        // ── CORE ENGINE FUNCTION (Custom Injection) ────────
-        function loadEngine(tabKey) {
-            const cx = ENGINES[tabKey];
-            if(!cx) return;
-            // 1. Reset View
-            container.innerHTML = '';
-            skeleton.style.display = 'block';
-            skeleton2.style.display = 'block';
-            metaText.textContent = `جاري البحث في ${tabKey === 'all' ? 'الويب' : tabKey}...`;
-            statEngine.textContent = tabKey.toUpperCase();
-            // 2. Create fresh container with data-cx
-            const newDiv = document.createElement('div');
-            newDiv.className = 'gcse-searchresults-only';
-            newDiv.setAttribute('data-linkTarget', '_self');
-            newDiv.setAttribute('data-cx', cx);
-            container.appendChild(newDiv);
-            // 3. Inject Script with timestamp to prevent caching bugs
-            // This forces the browser to fetch a fresh instance of the library for the new ID
-            const timestamp = new Date().getTime();
-            const scriptUrl = `https://cse.google.com/cse.js?cx=${cx}&t=${timestamp}`;
-            const script = document.createElement('script');
-            script.src = scriptUrl;
-            script.async = true;
-            script.onload = () => {
-                // Google takes a moment to render, give it visual time
-                setTimeout(() => {
-                    skeleton.style.display = 'none';
-                    skeleton2.style.display = 'none';
-                    metaText.textContent = `تم العثور على نتائج لـ "${query}"`;
-                    // Simple timing simulation
-                    document.getElementById('stat-time').textContent = (Math.random() * 0.5 + 0.2).toFixed(2) + 's';
-                }, 1200); // 1.2s visual delay for smoothness
-            };
-            script.onerror = () => {
-                skeleton.style.display = 'none';
-                skeleton2.style.display = 'none';
-                metaText.textContent = "حدث خطأ في الاتصال بمحرك البحث.";
-            };
-            document.head.appendChild(script);
-        }
-        // ── INITIAL LOAD ───────────────────────────────────
-        if(query) {
-            loadEngine(currentTab);
-        } else {
-            container.innerHTML = `
-                <div style="text-align:center; padding:60px; color:var(--text-muted);">
-                    <i class="fa-solid fa-search" style="font-size:40px; margin-bottom:20px; opacity:0.5;"></i>
-                    <h3>أدخل كلمة للبحث</h3>
-                    <p>استخدم شريط البحث في الأعلى للبدء.</p>
-                </div>
             `;
-            skeleton.style.display = 'none';
-            skeleton2.style.display = 'none';
         }
     </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en" dir="ltr">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+    <title>SurfGO | Discover the Universe</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
     <style>
         /* =========================================
+           1. VARIABLES & RESET
            ========================================= */
         :root {
+            --accent: #3B82F6;
+            --accent-light: #60A5FA;
+            --shadow-accent: rgba(59, 130, 246, 0.35);
+            --bg-gradient: radial-gradient(circle at center, #0e1219 0%, #020304 100%);
+            --surface: rgba(255, 255, 255, 0.05);
+            --text: #F0EDE6;
+            --text-dim: #9CA3AF;
+            --glass-border: rgba(255, 255, 255, 0.1);
+        }
+        *, *::before, *::after {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        html {
+            font-size: 16px;
         }
         body {
+            font-family: 'Tajawal', sans-serif;
+            background: var(--bg-gradient);
             min-height: 100vh;
+            color: var(--text);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
             overflow-x: hidden;
             position: relative;
         }
+        /* =========================================
+           2. SPACE BACKGROUND
+           ========================================= */
+        .stars-container {
             position: fixed;
+            inset: 0;
+            pointer-events: none;
+            z-index: 0;
         }
+        .nebula {
+            position: fixed;
+            width: min(500px, 80vw);
+            height: min(500px, 80vw);
+            background: radial-gradient(circle, rgba(59, 130, 246, 0.07) 0%, transparent 70%);
+            border-radius: 50%;
+            filter: blur(60px);
+            z-index: 0;
+            animation: float 20s ease-in-out infinite;
+            pointer-events: none;
         }
+        @keyframes float {
+            0%, 100% { transform: translate(0, 0); }
+            50% { transform: translate(60px, 30px); }
         }
+        /* =========================================
+           3. MAIN LAYOUT
+           ========================================= */
+        .page-wrapper {
+            position: relative;
+            z-index: 10;
+            width: 100%;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 100px 20px 80px;
+            gap: 0;
         }
         /* =========================================
+           4. CLOCK WIDGET
            ========================================= */
+        .clock-container {
             position: fixed;
+            top: clamp(16px, 4vw, 40px);
             left: 50%;
             transform: translateX(-50%);
+            text-align: center;
+            z-index: 20;
+            animation: fadeIn 1s ease;
+            white-space: nowrap;
         }
+        #time {
+            font-size: clamp(1.5rem, 5vw, 3rem);
             font-weight: 700;
+            letter-spacing: 2px;
+            color: var(--text);
+            line-height: 1;
         }
+        #date {
+            font-size: clamp(0.7rem, 2vw, 1rem);
+            color: var(--text-dim);
+            margin-top: 4px;
         }
+        /* =========================================
+           5. LOGO
+           ========================================= */
+        .logo {
+            font-size: clamp(42px, 12vw, 85px);
+            font-weight: 800;
+            color: var(--accent);
+            margin-bottom: clamp(20px, 5vw, 30px);
+            text-shadow: 0 10px 20px var(--shadow-accent);
+            letter-spacing: -2px;
+            animation: fadeIn 1.2s ease;
+            text-align: center;
         }
+        /* =========================================
+           6. SEARCH BAR
+           ========================================= */
         .search-container {
             width: 100%;
+            max-width: 680px;
+            padding: 0 4px;
+        }
+        .search-form {
             display: flex;
+            background: var(--surface);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
             border: 1px solid var(--glass-border);
             border-radius: 100px;
+            padding: clamp(4px, 1.5vw, 8px) clamp(8px, 2vw, 12px);
+            transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
         }
+        .search-form:focus-within {
+            transform: scale(1.02);
+            border-color: var(--accent);
+            box-shadow: 0 0 40px var(--shadow-accent);
+            background: rgba(255,255,255,0.08);
         }
+        .search-form input {
             flex: 1;
             background: transparent;
             border: none;
+            outline: none;
+            color: var(--text);
+            font-family: 'Tajawal', sans-serif;
+            font-size: clamp(0.95rem, 3vw, 1.1rem);
+            padding: clamp(8px, 2.5vw, 12px) clamp(10px, 3vw, 20px);
+            min-width: 0;
         }
+        .search-form input::placeholder {
+            color: var(--text-dim);
+            opacity: 0.6;
         }
+        .search-btn {
+            background: none;
+            border: none;
+            color: var(--accent);
             cursor: pointer;
+            padding: 0 clamp(10px, 3vw, 15px);
+            font-size: clamp(1rem, 3vw, 1.2rem);
             transition: 0.3s;
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
         }
+        .search-btn:hover { color: var(--accent-light); }
         /* =========================================
+           7. QUICK LINKS
            ========================================= */
+        .quick-links {
+            margin-top: clamp(28px, 6vw, 45px);
             display: flex;
+            gap: clamp(12px, 3vw, 20px);
+            flex-wrap: wrap;
+            justify-content: center;
+            animation: fadeInUp 1s ease;
+            padding: 0 10px;
         }
+        .link-item {
+            text-decoration: none;
+            color: inherit;
+            text-align: center;
             transition: 0.3s;
             display: flex;
             flex-direction: column;
+            align-items: center;
         }
+        .link-icon {
+            width: clamp(48px, 12vw, 60px);
+            height: clamp(48px, 12vw, 60px);
+            background: var(--surface);
             border: 1px solid var(--glass-border);
+            border-radius: clamp(14px, 4vw, 20px);
             display: flex;
             align-items: center;
+            justify-content: center;
+            font-size: clamp(18px, 5vw, 24px);
+            transition: all 0.3s ease;
+            cursor: pointer;
+            overflow: hidden;
         }
+        .genisi-logo {
+            width: 70%;
+            height: 70%;
             object-fit: contain;
+            transition: transform 0.3s ease;
         }
+        .fa-youtube   { color: #FF0000; }
+        .fa-facebook-f { color: #1877F2; }
+        .fa-instagram { color: #E4405F; }
+        .fa-x-twitter { color: #FFFFFF; }
+        .link-label {
+            margin-top: 8px;
+            font-size: clamp(0.68rem, 2vw, 0.8rem);
+            color: var(--text-dim);
             transition: 0.3s;
         }
+        /* Hover — desktop only (no transform on mobile touch) */
+        @media (hover: hover) {
+            .link-item:hover .link-icon {
+                background: var(--accent);
+                color: white;
+                border-color: transparent;
+                box-shadow: 0 15px 30px var(--shadow-accent);
+            }
+            .link-item:hover .link-label { color: var(--text); }
+            .link-item:hover .genisi-logo { transform: scale(1.1); }
         }
+        /* Active state for mobile tap feedback */
+        .link-item:active .link-icon {
+            background: var(--accent);
+            color: white;
+            border-color: transparent;
+            box-shadow: 0 8px 20px var(--shadow-accent);
+            transform: scale(0.95);
         }
+        /* =========================================
+           8. FOOTER
+           ========================================= */
+        .footer {
+            position: fixed;
+            bottom: clamp(12px, 3vw, 20px);
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: clamp(0.7rem, 2vw, 0.8rem);
+            color: var(--text-dim);
             text-align: center;
+            z-index: 10;
+            white-space: nowrap;
         }
         /* =========================================
+           9. ANIMATIONS
            ========================================= */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(-20px); }
+            to   { opacity: 1; transform: translateY(0); }
         }
+        @keyframes fadeInUp {
+            from { opacity: 0; transform: translateY(20px); }
+            to   { opacity: 1; transform: translateY(0); }
         }
+        /* =========================================
+           10. RESPONSIVE BREAKPOINTS
+           ========================================= */
+        /* Small phones (≤360px) */
+        @media (max-width: 360px) {
+            .page-wrapper {
+                padding-top: 90px;
+                padding-bottom: 70px;
+            }
+            .quick-links {
+                gap: 10px;
+            }
+        }
+        /* Landscape phones */
+        @media (max-height: 500px) and (orientation: landscape) {
+            .page-wrapper {
+                padding-top: 70px;
+                padding-bottom: 50px;
+                gap: 0;
+            }
+            .logo {
+                font-size: clamp(32px, 8vw, 55px);
+                margin-bottom: 14px;
+            }
+            .clock-container {
+                top: 10px;
+            }
+            #time { font-size: 1.3rem; }
+            #date { font-size: 0.65rem; }
+            .quick-links {
+                margin-top: 18px;
+            }
+            .link-icon {
+                width: 44px;
+                height: 44px;
+                border-radius: 12px;
+            }
+        }
+        /* Tablets (768px+) */
+        @media (min-width: 768px) {
+            .page-wrapper {
+                padding-top: 120px;
+                padding-bottom: 80px;
+            }
+            .quick-links {
+                gap: 18px;
+            }
+        }
+        /* Desktop (1024px+) */
+        @media (min-width: 1024px) {
+            .page-wrapper {
+                justify-content: center;
+                min-height: 100vh;
+                padding-top: 0;
+                padding-bottom: 0;
+            }
+            .logo { margin-bottom: 30px; }
+        }
     </style>
 </head>
 <body>
+    <!-- Background -->
+    <div class="stars-container" id="stars"></div>
+    <div class="nebula" style="top: 10%; left: 10%;"></div>
+    <div class="nebula" style="bottom: 10%; right: 10%; background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 70%);"></div>
+    <!-- Clock -->
+    <div class="clock-container">
+        <div id="time">00:00</div>
+        <div id="date">Loading...</div>
+    </div>
+    <!-- Main Content -->
+    <div class="page-wrapper">
+        <!-- Logo -->
+        <div class="logo">SurfGO</div>
+        <!-- Search -->
         <div class="search-container">
+            <!-- تم إزالة target="_blank" ليعمل البحث في نفس التبويب -->
+            <form action="results.html" method="get" class="search-form">
+                <!-- Added aria-label for accessibility -->
+                <input type="text" name="q" placeholder="Explore the universe..." autocomplete="off" aria-label="Search Web">
+                <button type="submit" class="search-btn" aria-label="Search">
+                    <i class="fa-solid fa-magnifying-glass"></i>
                 </button>
             </form>
         </div>
+        <!-- Quick Links -->
+        <div class="quick-links">
+            <a href="https://youtube.com" target="_blank" rel="noopener" class="link-item">
+                <div class="link-icon"><i class="fa-brands fa-youtube"></i></div>
+                <div class="link-label">YouTube</div>
+            </a>
+            <a href="https://facebook.com" target="_blank" rel="noopener" class="link-item">
+                <div class="link-icon"><i class="fa-brands fa-facebook-f"></i></div>
+                <div class="link-label">Facebook</div>
+            </a>
+            <a href="https://instagram.com" target="_blank" rel="noopener" class="link-item">
+                <div class="link-icon"><i class="fa-brands fa-instagram"></i></div>
+                <div class="link-label">Instagram</div>
+            </a>
+            <!-- Genisi Link using local image -->
+            <a href="https://genisi.web.app/" target="_blank" rel="noopener" class="link-item">
+                <div class="link-icon">
+                    <img src="genisi.png" alt="Genisi Logo" width="32" height="32" class="genisi-logo">
+                </div>
+                <div class="link-label">Genisi</div>
+            </a>
+            <a href="https://twitter.com" target="_blank" rel="noopener" class="link-item">
+                <div class="link-icon"><i class="fa-brands fa-x-twitter"></i></div>
+                <div class="link-label">Twitter</div>
+            </a>
         </div>
+    </div>
+    <!-- Footer -->
+    <div class="footer">
+        Crafted by <strong>AnesNT</strong> · 2026
     </div>
     <script>
+        // Clock Function
+        function updateClock() {
+            const now = new Date();
+            const timeStr = now.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });
+            const dateStr = now.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' });
+            document.getElementById('time').textContent = timeStr;
+            document.getElementById('date').textContent = dateStr;
+        }
+        setInterval(updateClock, 1000);
+        updateClock();
+        // Auto-focus Search Input
+        document.querySelector('input[name="q"]').focus();
+        // Stars Background
+        const starsContainer = document.getElementById('stars');
+        const starCount = window.innerWidth < 480 ? 80 : 150;
+        for (let i = 0; i < starCount; i++) {
+            const star = document.createElement('div');
+            star.style.cssText = `
+                position: absolute;
+                left: ${Math.random() * 100}%;
+                top: ${Math.random() * 100}%;
+                width: ${Math.random() * 2 + 0.5}px;
+                height: ${Math.random() * 2 + 0.5}px;
+                background: #fff;
+                border-radius: 50%;
+                opacity: ${Math.random() * 0.8 + 0.1};
             `;
+            starsContainer.appendChild(star);
         }
     </script>
 </body>
 </html>