Spaces:

AnesKAM
/

SurfGO

Running

App Files Files Community

AnesKAM commited on May 2

Commit

8476a6d

verified ·

1 Parent(s): 32e7bd7

Update index.html

Browse files

Files changed (1) hide show

index.html +560 -354

index.html CHANGED Viewed

@@ -1,462 +1,668 @@
 <!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>

 <!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>