Spaces:

AnesKAM
/

SurfGO

Running

App Files Files Community

AnesKAM commited on 26 days ago

Commit

7233388

verified ·

1 Parent(s): c88e277

Update index.html

Browse files

Files changed (1) hide show

index.html +400 -296

index.html CHANGED Viewed

@@ -1,312 +1,416 @@
 <!DOCTYPE html>
-<html class="dark" lang="en"><head>
-<meta charset="utf-8"/>
-<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
-<title>SurfGO - Precision Search</title>
-<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries">document.addEventListener('DOMContentLoaded', () => {
-    const signInBtn = document.getElementById('google-signin-btn');
-    const userProfile = document.getElementById('user-profile-container');
-    const searchForm = document.querySelector('form');
-    const searchInput = searchForm.querySelector('input[name="q"]');
-    // Robust Sign In simulation logic
-    const handleSignIn = () => {
-        const label = signInBtn.querySelector('span');
-        const originalText = label.textContent;
-        // Set loading state to prevent double clicks
-        signInBtn.disabled = true;
-        signInBtn.classList.add('opacity-70', 'cursor-not-allowed');
-        label.textContent = 'Signing in...';
-        // Simulate OAuth/Authentication flow delay
-        setTimeout(() => {
-            signInBtn.classList.add('hidden');
-            userProfile.classList.remove('hidden');
-            userProfile.classList.add('flex');
-            // Reset button state for future use
-            signInBtn.disabled = false;
-            signInBtn.classList.remove('opacity-70', 'cursor-not-allowed');
-            label.textContent = originalText;
-        }, 1000);
-    };
-    const handleSignOut = () => {
-        userProfile.classList.add('hidden');
-        userProfile.classList.remove('flex');
-        signInBtn.classList.remove('hidden');
-    };
-    // Search form submission handling
-    const handleSearch = (e) => {
-        const query = searchInput.value.trim();
-        if (!query) {
-            e.preventDefault(); // Prevent empty searches
-            searchInput.focus();
-            // Optional: add a subtle shake or highlight to input if empty
-            return;
-        }
-        // Browser naturally appends ?q=query to results.html on form submission
-    };
-    // Event Listeners
-    if (signInBtn) signInBtn.addEventListener('click', handleSignIn);
-    if (userProfile) {
-        const profileIcon = userProfile.querySelector('div');
-        if (profileIcon) profileIcon.addEventListener('click', handleSignOut);
-    }
-    if (searchForm) searchForm.addEventListener('submit', handleSearch);
-});</script>
-<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;family=Manrope:wght@300;400;500;600&amp;display=swap" rel="stylesheet"/>
-<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
-<script id="tailwind-config">
-        tailwind.config = {
-          darkMode: "class",
-          theme: {
-            extend: {
-              "colors": {
-                      "surface-container-low": "#171b26",
-                      "on-secondary-container": "#b9b7bf",
-                      "on-secondary-fixed-variant": "#46464c",
-                      "on-surface": "#dfe2f1",
-                      "surface-container-highest": "#313540",
-                      "primary": "#b3c5ff",
-                      "outline-variant": "#424656",
-                      "on-tertiary-fixed": "#1a1c1c",
-                      "tertiary-container": "#707272",
-                      "surface-tint": "#b3c5ff",
-                      "background": "#0f131e",
-                      "on-secondary-fixed": "#1a1b21",
-                      "inverse-surface": "#dfe2f1",
-                      "surface-container-lowest": "#0a0e18",
-                      "surface-variant": "#313540",
-                      "on-error-container": "#ffdad6",
-                      "outline": "#8c90a1",
-                      "on-primary": "#002b75",
-                      "inverse-primary": "#0054d6",
-                      "on-tertiary-container": "#f8f8f8",
-                      "inverse-on-surface": "#2c303c",
-                      "surface-container-high": "#262a35",
-                      "error": "#ffb4ab",
-                      "surface-bright": "#353945",
-                      "on-tertiary-fixed-variant": "#454747",
-                      "tertiary": "#c6c6c7",
-                      "tertiary-fixed-dim": "#c6c6c7",
-                      "surface-dim": "#0f131e",
-                      "surface-container": "#1b1f2a",
-                      "on-primary-fixed": "#001849",
-                      "surface": "#0f131e",
-                      "on-surface-variant": "#c2c6d8",
-                      "secondary-container": "#48494f",
-                      "primary-container": "#0066ff",
-                      "on-secondary": "#2f3036",
-                      "on-tertiary": "#2f3131",
-                      "on-error": "#690005",
-                      "secondary": "#c7c6cd",
-                      "on-primary-fixed-variant": "#003fa4",
-                      "secondary-fixed-dim": "#c7c6cd",
-                      "primary-fixed": "#dae1ff",
-                      "error-container": "#93000a",
-                      "on-primary-container": "#f8f7ff",
-                      "on-background": "#dfe2f1",
-                      "primary-fixed-dim": "#b3c5ff",
-                      "tertiary-fixed": "#e2e2e2",
-                      "secondary-fixed": "#e3e1e9"
-              },
-              "borderRadius": {
-                      "DEFAULT": "1rem",
-                      "lg": "2rem",
-                      "xl": "3rem",
-                      "full": "9999px"
-              },
-              "spacing": {
-                      "base": "8px",
-                      "gutter": "24px",
-                      "margin-page": "40px",
-                      "container-max": "1200px",
-                      "search-bar-height": "64px"
-              },
-              "fontFamily": {
-                      "headline-md": ["Space Grotesk"],
-                      "display": ["Space Grotesk"],
-                      "label-sm": ["Manrope"],
-                      "label-md": ["Manrope"],
-                      "headline-lg": ["Space Grotesk"],
-                      "body-md": ["Manrope"],
-                      "body-lg": ["Manrope"]
-              },
-              "fontSize": {
-                      "headline-md": ["24px", {"lineHeight": "1.3", "fontWeight": "500"}],
-                      "display": ["48px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "600"}],
-                      "label-sm": ["12px", {"lineHeight": "1.2", "fontWeight": "500"}],
-                      "label-md": ["14px", {"lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "600"}],
-                      "headline-lg": ["32px", {"lineHeight": "1.2", "fontWeight": "500"}],
-                      "body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
-                      "body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}]
-              }
-            },
-          },
         }
-    </script>
-<style>
         body {
-            background: #0A0B10 radial-gradient(circle at 50% 50%, #1a1e2e 0%, #0A0B10 100%);
-            position: relative;
             overflow-x: hidden;
         }
-        /* Performant CSS-only stars using pseudo-elements */
-        body::before {
-            content: "";
             position: fixed;
             inset: 0;
-            background-image:
-                radial-gradient(1px 1px at 10% 10%, #ffffff22 100%, transparent 0),
-                radial-gradient(1px 1px at 20% 80%, #ffffff33 100%, transparent 0),
-                radial-gradient(1.5px 1.5px at 50% 30%, #ffffff11 100%, transparent 0),
-                radial-gradient(1px 1px at 80% 20%, #ffffff22 100%, transparent 0),
-                radial-gradient(1px 1px at 90% 70%, #ffffff11 100%, transparent 0);
-            background-size: 300px 300px, 400px 400px, 250px 250px, 350px 350px, 500px 500px;
             pointer-events: none;
-            z-index: -1;
         }
-        .glass-effect {
-            background: rgba(30, 34, 45, 0.4);
             backdrop-filter: blur(20px);
             -webkit-backdrop-filter: blur(20px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
         }
-        .search-glow:focus-within {
-            box-shadow: 0 0 25px 2px rgba(179, 197, 255, 0.15);
-            border-color: rgba(179, 197, 255, 0.4);
         }
     </style>
-<script>document.addEventListener('DOMContentLoaded', () => {
-    const signInBtn = document.getElementById('google-signin-btn');
-    const userProfile = document.getElementById('user-profile-container');
-    const searchForm = document.querySelector('form');
-    const searchInput = searchForm.querySelector('input[name="q"]');
-    // Robust Sign In simulation logic
-    const handleSignIn = () => {
-        const label = signInBtn.querySelector('span');
-        const originalText = label.textContent;
-        // Set loading state to prevent double clicks
-        signInBtn.disabled = true;
-        signInBtn.classList.add('opacity-70', 'cursor-not-allowed');
-        label.textContent = 'Signing in...';
-        // Simulate OAuth/Authentication flow delay
-        setTimeout(() => {
-            signInBtn.classList.add('hidden');
-            userProfile.classList.remove('hidden');
-            userProfile.classList.add('flex');
-            // Reset button state for future use
-            signInBtn.disabled = false;
-            signInBtn.classList.remove('opacity-70', 'cursor-not-allowed');
-            label.textContent = originalText;
-        }, 1000);
-    };
-    const handleSignOut = () => {
-        userProfile.classList.add('hidden');
-        userProfile.classList.remove('flex');
-        signInBtn.classList.remove('hidden');
-    };
-    // Search form submission handling
-    const handleSearch = (e) => {
-        const query = searchInput.value.trim();
-        if (!query) {
-            e.preventDefault(); // Prevent empty searches
-            searchInput.focus();
-            // Optional: add a subtle shake or highlight to input if empty
-            return;
-        }
-        // Browser naturally appends ?q=query to results.html on form submission
-    };
-    // Event Listeners
-    if (signInBtn) signInBtn.addEventListener('click', handleSignIn);
-    if (userProfile) {
-        const profileIcon = userProfile.querySelector('div');
-        if (profileIcon) profileIcon.addEventListener('click', handleSignOut);
-    }
-    if (searchForm) searchForm.addEventListener('submit', handleSearch);
-});</script></head>
-<body class="min-h-screen flex flex-col font-body-md text-on-surface">
-<!-- Top Navigation Bar (Shared Component: TopAppBar) -->
-<header class="fixed top-0 w-full bg-transparent flex justify-end items-center gap-6 px-8 h-16 z-50">
-<nav class="flex items-center gap-6">
-<a class="font-['Space_Grotesk'] text-sm tracking-tight text-slate-600 dark:text-slate-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors duration-200" href="/images">Space Images</a>
-<a class="font-['Space_Grotesk'] text-sm tracking-tight text-slate-600 dark:text-slate-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors duration-200" href="/news">Galaxy News</a>
-<button class="flex items-center gap-2 px-4 py-2 rounded-full glass-effect hover:bg-white/10 transition-all duration-300 border border-white/10" id="google-signin-btn">
-<svg class="w-4 h-4" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"></path>
-<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"></path>
-<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"></path>
-<path d="M12 5.38c1.62 0 3.06.56 4.21 1.66l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"></path>
-</svg>
-<span class="text-label-md text-on-surface">Sign in</span>
-</button><div class="hidden items-center gap-3" id="user-profile-container">
-<div class="w-9 h-9 rounded-full bg-primary/20 border border-primary/30 flex items-center justify-center cursor-pointer hover:bg-primary/30 transition-all" title="Sign out">
-<span class="material-symbols-outlined text-primary text-[20px]">person</span>
-</div>
-</div><button class="material-symbols-outlined text-slate-600 dark:text-slate-400 hover:text-blue-500 transition-colors cursor-pointer" data-icon="apps">apps</button>
-</nav>
-</header>
-<!-- Main Search Section -->
-<main class="flex-grow flex flex-col items-center justify-center px-gutter pt-16">
-<div class="w-full max-w-[600px] flex flex-col items-center">
-<!-- Brand Wordmark -->
-<h1 class="font-display text-[84px] text-primary mb-8 tracking-tighter select-none">
-                SurfGO
-            </h1>
-<!-- Search Form -->
-<form action="results.html" class="w-full flex flex-col items-center" method="GET">
-<!-- Search Bar -->
-<div class="w-full h-search-bar-height glass-effect rounded-full px-6 flex items-center search-glow transition-all duration-300 group">
-<span class="material-symbols-outlined text-outline mr-4 group-focus-within:text-primary transition-colors" data-icon="search">search</span>
-<input class="flex-grow bg-transparent border-none outline-none focus:ring-0 text-body-lg text-on-surface placeholder-on-surface-variant/50 font-body-md" name="q" placeholder="Search the cosmos..." type="text"/>
-<div class="flex items-center gap-4">
-<button class="material-symbols-outlined text-outline hover:text-primary transition-colors" data-icon="settings_voice" type="button">settings_voice</button>
-<button class="material-symbols-outlined text-outline hover:text-primary transition-colors" data-icon="rocket_launch" type="submit">rocket_launch</button>
-</div>
-</div>
-<!-- Action Buttons -->
-<div class="flex gap-4 mt-10">
-<button class="bg-primary text-on-primary font-label-md px-8 py-3 rounded-full hover:shadow-[0_0_20px_rgba(179,197,255,0.3)] transition-all duration-300" type="submit">
-                    Cosmic Search
                 </button>
-<button class="glass-effect text-on-surface font-label-md px-8 py-3 rounded-full hover:bg-white/5 transition-all duration-300" onclick="window.location.href='#'" type="button">
-                    Explore the Universe
-                </button>
-</div>
-</form>
-<!-- Language/Quick Links -->
-<div class="mt-8 flex gap-4">
-<span class="text-label-sm text-on-surface-variant/60">SurfGO offered in:</span>
-<a class="text-label-sm text-primary hover:underline transition-all" href="#">Stellar</a>
-<a class="text-label-sm text-primary hover:underline transition-all" href="#">Nebula</a>
-</div>
-</div>
-</main>
-<!-- Footer (Shared Component: Footer) -->
-<footer class="fixed bottom-0 w-full bg-[#0A0B10] dark:bg-[#0A0B10] border-t border-white/10 flex justify-between items-center px-10 py-4 z-50">
-<div class="flex gap-6 items-center">
-<a class="font-['Space_Grotesk'] text-xs uppercase tracking-widest text-slate-500 hover:text-white transition-opacity duration-300" href="/about">About</a>
-<a class="font-['Space_Grotesk'] text-xs uppercase tracking-widest text-slate-500 hover:text-white transition-opacity duration-300" href="/privacy">Privacy</a>
-<a class="font-['Space_Grotesk'] text-xs uppercase tracking-widest text-slate-500 hover:text-white transition-opacity duration-300" href="/terms">Terms</a>
-<a class="font-['Space_Grotesk'] text-xs uppercase tracking-widest text-slate-500 hover:text-white transition-opacity duration-300" href="/settings">Settings</a>
-</div>
-<div class="font-['Space_Grotesk'] text-xs uppercase tracking-widest text-slate-500">
-            Precision Search.
         </div>
-</footer>
-<!-- Background Decoration (Subtle Nebula Glows) -->
-<div class="fixed top-[-10%] left-[-10%] w-[40%] h-[40%] rounded-full bg-primary/5 blur-[120px] pointer-events-none -z-10"></div>
-<div class="fixed bottom-[-5%] right-[-5%] w-[30%] h-[30%] rounded-full bg-primary/5 blur-[100px] pointer-events-none -z-10"></div>
-</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>