Spaces:

AnesKAM
/

SurfGO

Running

App Files Files Community

AnesKAM commited on 24 days ago

Commit

c88e277

verified ·

1 Parent(s): a136939

Update index.html

Browse files

Files changed (1) hide show

index.html +296 -400

index.html CHANGED Viewed

@@ -1,416 +1,312 @@
 <!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 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>