Spaces:

AnesKAM
/

SurfGO

Running

App Files Files Community

AnesKAM commited on 25 days ago

Commit

9989e30

verified ·

1 Parent(s): 8666110

Update index.html

Browse files

Files changed (1) hide show

index.html +278 -611

index.html CHANGED Viewed

@@ -2,652 +2,319 @@
 <html lang="en" dir="ltr">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-    <title>SurfGO | Intelligent Search</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;800&family=Tajawal:wght@300;400;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>
-        /* ════════════════════════════════════════════
-           TOKENS
-        ════════════════════════════════════════════ */
         :root {
-            --bg-deep:      #020408;
-            --bg-surface:   rgba(15,23,42,0.6);
-            --bg-card:      rgba(30,41,59,0.3);
-            --accent:       #3B82F6;
-            --accent-glow:  rgba(59,130,246,0.35);
-            --accent-2:     #8B5CF6;
-            --text-main:    #F8FAFC;
-            --text-dim:     #94A3B8;
-            --text-link:    #60A5FA;
-            --border:       rgba(255,255,255,0.08);
-            --border-hover: rgba(59,130,246,0.45);
-            --ease:         cubic-bezier(0.23,1,0.32,1);
-            --tr:           all 0.32s var(--ease);
-            --nav-h:        68px;
-            --r:            18px;
-        }
-        /* ════════════════════════════════════════════
-           BASE
-        ════════════════════════════════════════════ */
-        *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
-        html { -webkit-tap-highlight-color: transparent; }
-        body {
-            font-family: 'Plus Jakarta Sans','Tajawal',sans-serif;
-            background: var(--bg-deep);
-            color: var(--text-main);
-            min-height: 100vh;
-            overflow-x: hidden;
         }
-        /* Ambient glow – disabled on touch devices for perf */
-        .bg-glow {
-            position: fixed; inset: 0; pointer-events: none; z-index: 0;
-            background: radial-gradient(circle at 50% 28%, rgba(59,130,246,0.1) 0%, transparent 55%);
-        }
-        @media (hover:none) { .bg-glow { display:none; } }
-        /* Noise */
-        body::before {
-            content:'';
-            position:fixed; inset:0; pointer-events:none; z-index:0;
-            opacity:.45;
-            background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
         }
-        /* ════════════════════════════════════════════
-           NAVBAR
-        ════════════════════════════════════════════ */
-        .navbar {
-            position: sticky; top:0; z-index:900;
-            height: var(--nav-h);
-            background: rgba(2,4,8,0.88);
-            backdrop-filter: blur(28px) saturate(200%);
-            -webkit-backdrop-filter: blur(28px) saturate(200%);
-            border-bottom: 1px solid var(--border);
-            display: flex; align-items: center;
-            gap: 14px;
-            padding: 0 clamp(14px,4vw,40px);
-        }
         .logo {
-            font-size: clamp(18px,3vw,24px); font-weight:800;
-            color:#fff; text-decoration:none;
-            letter-spacing:-0.8px; white-space:nowrap; flex-shrink:0;
         }
-        .logo span {
-            background: linear-gradient(135deg,var(--accent),var(--accent-2));
-            -webkit-background-clip:text; -webkit-text-fill-color:transparent;
         }
-        /* Search bar */
-        .search-bar-wrapper { flex:1; min-width:0; max-width:680px; }
         .search-form {
-            display:flex; align-items:center;
-            background: var(--bg-surface);
-            border: 1px solid var(--border);
-            border-radius:100px; padding:4px 6px;
-            transition: var(--tr);
         }
         .search-form:focus-within {
             border-color: var(--accent);
-            box-shadow: 0 0 26px var(--accent-glow), 0 0 52px rgba(59,130,246,0.08);
-            background: rgba(255,255,255,0.05);
         }
         .search-form input {
-            flex:1; min-width:0;
-            background:transparent; border:none; outline:none;
-            color:var(--text-main);
-            padding:10px 14px;
-            font-size:clamp(13px,2.5vw,15px);
-            font-family:inherit;
         }
-        .search-form input::placeholder { color:var(--text-dim); }
-        .clear-btn {
-            background:none; border:none; color:var(--text-dim);
-            cursor:pointer; padding:0 6px; font-size:15px; line-height:1;
-            transition:.2s; display:none; flex-shrink:0;
-        }
-        .clear-btn:hover { color:#fff; transform:rotate(90deg); }
         .search-btn {
-            background: linear-gradient(135deg,var(--accent),var(--accent-2));
-            border:none; color:#fff;
-            width:36px; height:36px; border-radius:50%;
-            cursor:pointer; flex-shrink:0;
-            display:flex; align-items:center; justify-content:center;
-            font-size:13px; transition:var(--tr);
-        }
-        .search-btn:hover  { transform:scale(1.08); box-shadow:0 6px 18px var(--accent-glow); }
-        .search-btn:active { transform:scale(0.95); }
-        /* Desktop tabs */
-        .nav-tabs { display:flex; gap:5px; flex-shrink:0; }
-        /* Hamburger – mobile only */
-        .menu-btn {
-            display:none;
-            background:none; border:none; color:var(--text-dim);
-            cursor:pointer; font-size:20px; padding:6px; flex-shrink:0;
-            transition:color .2s;
-        }
-        .menu-btn:hover { color:#fff; }
-        /* Shared tab button styles */
-        .tab-btn {
-            background:transparent;
-            border:1px solid transparent;
-            color:var(--text-dim);
-            font-family:inherit; font-size:13px; font-weight:500;
-            padding:7px 14px; cursor:pointer;
-            border-radius:100px;
-            transition:var(--tr);
-            display:flex; align-items:center; gap:6px; white-space:nowrap;
-        }
-        .tab-btn:hover  { color:var(--text-main); border-color:var(--border); background:rgba(255,255,255,0.04); }
-        .tab-btn.active {
-            background: linear-gradient(135deg,var(--accent),var(--accent-2));
-            color:#fff; box-shadow:0 4px 16px var(--accent-glow);
-            border-color:transparent;
-        }
-        /* ════════════════════════════════════════════
-           MOBILE TAB STRIP (sticky, scrollable)
-        ════════════════════════════════════════════ */
-        .mobile-tabs {
-            display:none;
-            position:sticky; top:var(--nav-h); z-index:800;
-            background:rgba(2,4,8,0.9);
-            backdrop-filter:blur(20px);
-            border-bottom:1px solid var(--border);
-            padding:8px 14px;
-            gap:8px;
-            overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
-        }
-        .mobile-tabs::-webkit-scrollbar { display:none; }
-        .mobile-tabs .tab-btn { font-size:12px; padding:7px 14px; flex-shrink:0; }
-        /* ════════════════════════════════════════════
-           PAGE LAYOUT
-        ════════════════════════════════════════════ */
-        .page-wrap {
-            position:relative; z-index:1;
-            max-width:1280px; margin:0 auto;
-            padding:clamp(20px,4vw,40px) clamp(14px,4vw,40px);
-            display:grid;
-            grid-template-columns:1fr 310px;
-            gap:44px; align-items:start;
-        }
-        /* Meta bar */
-        .results-meta {
-            display:flex; align-items:center; gap:10px;
-            font-size:13px; color:var(--text-dim);
-            margin-bottom:24px; min-height:20px; flex-wrap:wrap;
-        }
-        .pulse {
-            width:7px; height:7px;
-            background:var(--accent); border-radius:50%;
-            box-shadow:0 0 10px var(--accent);
-            animation:blink 1.6s infinite; flex-shrink:0;
-        }
-        @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }
-        /* Skeleton */
-        .skeleton-card {
-            background:var(--bg-card);
-            border:1px solid var(--border);
-            border-radius:var(--r);
-            padding:clamp(16px,3vw,26px) clamp(16px,3vw,28px);
-            margin-bottom:16px;
-            animation:shimmer 1.6s infinite ease-in-out;
-        }
-        .sk-line { background:rgba(255,255,255,0.07); border-radius:6px; margin-bottom:10px; }
-        .sk-line.title { height:18px; width:52%; }
-        .sk-line.url   { height:11px; width:26%; margin-bottom:14px; }
-        .sk-line.body  { height:13px; width:100%; }
-        .sk-line.body2 { height:13px; width:83%; }
-        .sk-line.body3 { height:13px; width:60%; margin-bottom:0; }
-        @keyframes shimmer { 0%,100%{opacity:.4} 50%{opacity:.75} }
-        /* ── Google CSE overrides ── */
-        .gsc-control-cse { background:transparent!important; border:none!important; padding:0!important; }
-        .gsc-result {
-            background:var(--bg-card)!important;
-            border:1px solid var(--border)!important;
-            border-radius:var(--r)!important;
-            margin-bottom:16px!important;
-            padding:clamp(14px,3vw,24px) clamp(14px,3vw,28px)!important;
-            transition:var(--tr)!important;
-            backdrop-filter:blur(14px)!important;
-        }
-        .gsc-result:hover {
-            border-color:var(--border-hover)!important;
-            background:rgba(59,130,246,0.08)!important;
-            transform:translateY(-3px)!important;
-            box-shadow:0 16px 34px rgba(0,0,0,0.45)!important;
-        }
-        .gs-title,.gs-title b,.gs-title a {
-            color:var(--text-link)!important;
-            font-size:clamp(15px,2.5vw,19px)!important;
-            font-weight:600!important; text-decoration:none!important; line-height:1.4!important;
-        }
-        .gs-title a:hover { color:#fff!important; }
-        .gsc-url-top,.gs-visibleUrl,.gs-visibleUrl-short {
-            color:#4ade80!important; font-size:12px!important; opacity:.75!important;
-        }
-        .gs-snippet,.gs-snippet b {
-            color:var(--text-dim)!important;
-            font-size:clamp(13px,2vw,14.5px)!important; line-height:1.75!important;
-        }
-        /* Hide CSE noise */
-        .gsc-results-branding,.gsc-control-sunburst,.gsc-above-wrapper-area,
-        .gsc-tabsArea,.gsc-search-box,.gsc-adBlock,
-        .gcsc-find-more-on-google-root,.gsc-refinementHeader { display:none!important; }
-        /* Pagination */
-        .gsc-cursor-box { margin-top:22px; text-align:center; }
-        .gsc-cursor-page {
-            color:var(--text-dim)!important; background:var(--bg-card)!important;
-            border:1px solid var(--border)!important; border-radius:8px!important;
-            padding:6px 14px!important; margin:0 3px!important;
-            cursor:pointer; display:inline-block;
-            font-family:inherit!important; transition:var(--tr)!important;
-        }
-        .gsc-cursor-page:hover,.gsc-cursor-current-page {
-            background:var(--accent)!important; color:#fff!important; border-color:var(--accent)!important;
-        }
-        /* Empty state */
-        .empty-state { text-align:center; padding:80px 20px; color:var(--text-dim); }
-        .empty-state i { font-size:44px; margin-bottom:16px; opacity:.22; display:block; }
-        .empty-state p { font-size:15px; }
-        @keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
-        #cse-results { animation:fadeUp .4s ease both; }
-        /* ════════════════════════════════════════════
-           SIDEBAR (desktop)
-        ════════════════════════════════════════════ */
-        .sidebar { position:sticky; top:calc(var(--nav-h) + 24px); }
-        .side-card {
-            background:var(--bg-surface); border:1px solid var(--border);
-            border-radius:var(--r); padding:22px;
-            margin-bottom:18px; backdrop-filter:blur(16px);
-            transition:var(--tr);
-        }
-        .side-card:hover { border-color:rgba(139,92,246,.4); box-shadow:0 12px 32px rgba(0,0,0,.3); }
-        .side-title {
-            font-size:14.5px; font-weight:700; color:#fff;
-            margin-bottom:14px; display:flex; align-items:center; gap:10px;
-        }
-        .side-title i {
-            background:linear-gradient(135deg,var(--accent),var(--accent-2));
-            -webkit-background-clip:text; -webkit-text-fill-color:transparent;
-        }
-        .side-link {
-            display:flex; align-items:center; gap:12px;
-            padding:11px 8px; color:var(--text-dim);
-            text-decoration:none; font-size:13.5px;
-            border-bottom:1px solid var(--border);
-            border-radius:8px; transition:var(--tr);
-        }
-        .side-link:last-of-type { border-bottom:none; }
-        .side-link:hover { color:var(--text-main); background:rgba(59,130,246,.08); padding-left:16px; }
-        .side-link i { width:16px; text-align:center; color:var(--accent); opacity:.85; }
-        .stats-row { display:flex; gap:10px; margin-top:16px; }
-        .stat-badge {
-            flex:1;
-            background:rgba(59,130,246,.1); border:1px solid rgba(59,130,246,.2);
-            border-radius:12px; padding:10px; text-align:center;
-        }
-        .stat-num   { font-size:20px; font-weight:800; color:var(--accent); }
-        .stat-label { font-size:10px; color:var(--text-dim); margin-top:2px; }
-        .tip-text { font-size:13px; color:var(--text-dim); line-height:1.7; font-weight:300; }
-        .tip-text strong { color:var(--text-main); font-weight:600; }
-        /* ════════════════════════════════════════════
-           MOBILE DRAWER (bottom sheet)
-        ════════════════════════════════════════════ */
-        .drawer-overlay {
-            display:none; position:fixed; inset:0; z-index:1100;
-            background:rgba(0,0,0,.65); backdrop-filter:blur(4px);
-            animation:fadeIn .22s ease;
-        }
-        @keyframes fadeIn { from{opacity:0} to{opacity:1} }
-        .drawer {
-            position:fixed; bottom:0; left:0; right:0; z-index:1200;
-            background:rgba(8,14,28,0.98);
-            border-top:1px solid var(--border);
-            border-radius:24px 24px 0 0;
-            padding:18px 18px calc(18px + env(safe-area-inset-bottom));
-            max-height:82vh; overflow-y:auto;
-            transform:translateY(100%);
-            transition:transform .35s var(--ease);
-        }
-        .drawer.open { transform:translateY(0); }
-        .drawer-handle {
-            width:40px; height:4px;
-            background:rgba(255,255,255,.14);
-            border-radius:100px; margin:0 auto 18px;
-        }
-        .drawer-close {
-            position:absolute; top:14px; right:16px;
-            background:none; border:none; color:var(--text-dim);
-            cursor:pointer; font-size:18px; transition:color .2s;
-        }
-        .drawer-close:hover { color:#fff; }
-        /* ════════════════════════════════════════════
-           RESPONSIVE BREAKPOINTS
-        ════════════════════════════════════════════ */
-        /* Tablet */
-        @media (max-width:1100px) {
-            .page-wrap { grid-template-columns:1fr; gap:0; }
-            .sidebar   { display:none; }
-            .nav-tabs  { display:none; }
-            .mobile-tabs { display:flex; }
-            .menu-btn  { display:block; }
-        }
-        /* Large phone */
-        @media (max-width:768px) {
-            :root { --nav-h:60px; }
-            .search-form input { font-size:13px; padding:9px 12px; }
-            .search-btn { width:34px; height:34px; font-size:12px; }
-        }
-        /* Small phone */
-        @media (max-width:480px) {
-            .mobile-tabs .tab-btn { font-size:11.5px; padding:6px 12px; }
-            .empty-state { padding:50px 14px; }
-        }
-        /* Tiny phone */
-        @media (max-width:360px) { .logo { display:none; } }
-        /* Safe area */
-        @supports (padding-bottom:env(safe-area-inset-bottom)) {
-            .mobile-tabs { padding-bottom:calc(8px + env(safe-area-inset-bottom)); }
-        }
     </style>
 </head>
 <body>
-<div class="bg-glow" id="bg-glow"></div>
-<!-- ══════════════════════  NAVBAR  ══════════════════════ -->
-<nav class="navbar">
-    <a href="index.html" class="logo" aria-label="SurfGO">Surf<span>GO</span></a>
-    <div class="search-bar-wrapper">
-        <form class="search-form" id="search-form" action="results.html" method="get">
-            <input type="hidden" name="tab" id="tab-hidden" value="all">
-            <input type="text" name="q" id="search-input"
-                   placeholder="Search anything…"
-                   autocomplete="off" autocorrect="off" spellcheck="false"
-                   enterkeyhint="search" inputmode="search">
-            <button type="button" class="clear-btn" id="clear-btn" aria-label="Clear">
-                <i class="fa-solid fa-circle-xmark"></i>
-            </button>
-            <button type="submit" class="search-btn" aria-label="Search">
-                <i class="fa-solid fa-magnifying-glass"></i>
-            </button>
-        </form>
     </div>
-    <!-- Desktop tabs -->
-    <div class="nav-tabs" id="tabs-desktop" role="tablist">
-        <button class="tab-btn" data-tab="all"    role="tab"><i class="fa-solid fa-globe"></i> All</button>
-        <button class="tab-btn" data-tab="news"   role="tab"><i class="fa-solid fa-newspaper"></i> News</button>
-        <button class="tab-btn" data-tab="images" role="tab"><i class="fa-solid fa-image"></i> Images</button>
-        <button class="tab-btn" data-tab="videos" role="tab"><i class="fa-solid fa-play"></i> Videos</button>
     </div>
-    <!-- Mobile menu button -->
-    <button class="menu-btn" id="menu-btn" aria-label="Open links" aria-expanded="false">
-        <i class="fa-solid fa-bars-staggered"></i>
-    </button>
-</nav>
-<!-- ══════════════════════  MOBILE TABS  ══════════════════════ -->
-<div class="mobile-tabs" id="tabs-mobile" role="tablist">
-    <button class="tab-btn" data-tab="all"    role="tab"><i class="fa-solid fa-globe"></i> All</button>
-    <button class="tab-btn" data-tab="news"   role="tab"><i class="fa-solid fa-newspaper"></i> News</button>
-    <button class="tab-btn" data-tab="images" role="tab"><i class="fa-solid fa-image"></i> Images</button>
-    <button class="tab-btn" data-tab="videos" role="tab"><i class="fa-solid fa-play"></i> Videos</button>
-</div>
-<!-- ══════════════════════  CONTENT  ══════════════════════ -->
-<div class="page-wrap">
-    <main>
-        <div class="results-meta" id="results-meta" aria-live="polite">
-            <div class="pulse" id="pulse-dot"></div>
-            <span id="meta-text">Analyzing the universe…</span>
-        </div>
-        <div id="skeleton-area"></div>
-        <div id="cse-results"></div>
-    </main>
-    <!-- Desktop sidebar -->
-    <aside class="sidebar">
-        <div class="side-card">
-            <div class="side-title"><i class="fa-solid fa-wand-magic-sparkles"></i> Genisi AI Core</div>
-            <a href="https://genisi.web.app/" target="_blank" rel="noopener" class="side-link"><i class="fa-solid fa-robot"></i> Launch Genisi AI</a>
-            <a href="https://github.com"      target="_blank" rel="noopener" class="side-link"><i class="fa-brands fa-github"></i> Dev Repository</a>
-            <a href="https://wikipedia.org"   target="_blank" rel="noopener" class="side-link"><i class="fa-solid fa-book-open"></i> Global Knowledge</a>
-            <div class="stats-row">
-                <div class="stat-badge"><div class="stat-num" id="d-stat-tab">—</div><div class="stat-label">Active Tab</div></div>
-                <div class="stat-badge"><div class="stat-num" id="d-stat-q">—</div><div class="stat-label">Query Words</div></div>
             </div>
-        </div>
-        <div class="side-card">
-            <div class="side-title"><i class="fa-solid fa-lightbulb"></i> Pro Tip</div>
-            <p class="tip-text">Combine <strong>Genisi AI</strong> with <strong>SurfGO</strong> to synthesize complex information faster than ever.</p>
-        </div>
-    </aside>
-</div>
-<!-- ══════════════════════  MOBILE DRAWER  ══════════════════════ -->
-<div class="drawer-overlay" id="drawer-overlay"></div>
-<div class="drawer" id="drawer" role="dialog" aria-modal="true" aria-label="Quick links">
-    <div class="drawer-handle"></div>
-    <button class="drawer-close" id="drawer-close" aria-label="Close"><i class="fa-solid fa-xmark"></i></button>
-    <div class="side-card" style="margin-bottom:14px">
-        <div class="side-title"><i class="fa-solid fa-wand-magic-sparkles"></i> Genisi AI Core</div>
-        <a href="https://genisi.web.app/" target="_blank" rel="noopener" class="side-link"><i class="fa-solid fa-robot"></i> Launch Genisi AI</a>
-        <a href="https://github.com"      target="_blank" rel="noopener" class="side-link"><i class="fa-brands fa-github"></i> Dev Repository</a>
-        <a href="https://wikipedia.org"   target="_blank" rel="noopener" class="side-link"><i class="fa-solid fa-book-open"></i> Global Knowledge</a>
-        <div class="stats-row">
-            <div class="stat-badge"><div class="stat-num" id="m-stat-tab">—</div><div class="stat-label">Active Tab</div></div>
-            <div class="stat-badge"><div class="stat-num" id="m-stat-q">—</div><div class="stat-label">Query Words</div></div>
-        </div>
     </div>
-    <div class="side-card">
-        <div class="side-title"><i class="fa-solid fa-lightbulb"></i> Pro Tip</div>
-        <p class="tip-text">Combine <strong>Genisi AI</strong> with <strong>SurfGO</strong> to synthesize complex information faster than ever.</p>
     </div>
-</div>
-<!-- ══════════════════════  SCRIPT  ══════════════════════ -->
-<script>
-(function () {
-    /* ── Engine IDs (replace with real cx values) ── */
-    const ENGINES = {
-        all:    '75aa960081baa4f0c',
-        news:   '35b0f5b6012e94f78',
-        images: '23c7fd94975714dd8',
-        videos: 'b11f5dceb04784b9f'
-    };
-    /* ── URL ── */
-    const params     = new URLSearchParams(location.search);
-    const query      = (params.get('q') || '').trim();
-    let   currentTab = params.get('tab') || 'all';
-    if (!ENGINES[currentTab]) currentTab = 'all';
-    /* ── DOM ── */
-    const $ = id => document.getElementById(id);
-    const searchInput   = $('search-input');
-    const clearBtn      = $('clear-btn');
-    const tabHidden     = $('tab-hidden');
-    const metaText      = $('meta-text');
-    const pulseDot      = $('pulse-dot');
-    const skeletonArea  = $('skeleton-area');
-    const cseResults    = $('cse-results');
-    const menuBtn       = $('menu-btn');
-    const drawer        = $('drawer');
-    const drawerOverlay = $('drawer-overlay');
-    const drawerClose   = $('drawer-close');
-    const bgGlow        = $('bg-glow');
-    /* ── Ambient glow (desktop only) ── */
-    if (window.matchMedia('(hover:hover)').matches) {
-        document.addEventListener('mousemove', e => {
-            bgGlow.style.background =
-                `radial-gradient(circle at ${(e.clientX/innerWidth*100).toFixed(1)}% `+
-                `${(e.clientY/innerHeight*100).toFixed(1)}%, rgba(59,130,246,0.11) 0%, transparent 48%)`;
-        }, { passive:true });
-    }
-    /* ── Search input ── */
-    if (query) {
-        searchInput.value = query;
-        document.title    = `${query} | SurfGO`;
-        clearBtn.style.display = 'block';
-    }
-    searchInput.addEventListener('input', () => {
-        clearBtn.style.display = searchInput.value ? 'block' : 'none';
-    });
-    clearBtn.addEventListener('click', () => {
-        searchInput.value = '';
-        clearBtn.style.display = 'none';
-        searchInput.focus();
-    });
-    /* ── Drawer ── */
-    function openDrawer() {
-        drawerOverlay.style.display = 'block';
-        requestAnimationFrame(() => drawer.classList.add('open'));
-        menuBtn.setAttribute('aria-expanded','true');
-    }
-    function closeDrawer() {
-        drawer.classList.remove('open');
-        setTimeout(() => drawerOverlay.style.display = 'none', 330);
-        menuBtn.setAttribute('aria-expanded','false');
-    }
-    menuBtn.addEventListener('click', openDrawer);
-    drawerClose.addEventListener('click', closeDrawer);
-    drawerOverlay.addEventListener('click', closeDrawer);
-    /* Swipe-down to close */
-    let ty0 = 0;
-    drawer.addEventListener('touchstart', e => { ty0 = e.touches[0].clientY; }, { passive:true });
-    drawer.addEventListener('touchend',   e => { if (e.changedTouches[0].clientY - ty0 > 70) closeDrawer(); }, { passive:true });
-    /* ── Helpers ── */
-    function esc(s) {
-        return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
-    }
-    function updateStats() {
-        const label = currentTab.charAt(0).toUpperCase() + currentTab.slice(1);
-        const words = query ? query.split(/\s+/).length : 0;
-        $('d-stat-tab').textContent = label;
-        $('d-stat-q').textContent   = words;
-        $('m-stat-tab').textContent = label;
-        $('m-stat-q').textContent   = words;
-    }
-    /* ── Skeleton ── */
-    function showSkeletons() {
-        skeletonArea.innerHTML = Array(4).fill(`
-            <div class="skeleton-card" aria-hidden="true">
-                <div class="sk-line title"></div><div class="sk-line url"></div>
-                <div class="sk-line body"></div><div class="sk-line body2"></div>
-                <div class="sk-line body3"></div>
-            </div>`).join('');
-        cseResults.innerHTML = '';
-    }
-    function hideSkeletons() { skeletonArea.innerHTML = ''; }
-    /* ── CSE loader ── */
-    let cseScript = null;
-    function loadCSE(tabKey) {
-        if (cseScript) { cseScript.remove(); cseScript = null; }
-        try { if (window.google?.search?.cse?.element) window.google.search.cse.element.render = undefined; } catch(_){}
-        cseResults.innerHTML =
-            `<div class="gcse-searchresults-only" data-q="${esc(query)}" data-queryParameterName="q"></div>`;
-        cseScript = Object.assign(document.createElement('script'), {
-            src:   `https://cse.google.com/cse.js?cx=${ENGINES[tabKey]}`,
-            async: true
-        });
-        cseScript.onload  = () => setTimeout(hideSkeletons, 850);
-        cseScript.onerror = () => {
-            hideSkeletons();
-            metaText.textContent   = '⚠ Could not load search engine — check your CSE IDs.';
-            pulseDot.style.display = 'none';
-        };
-        document.head.appendChild(cseScript);
-    }
-    /* ── Tab switching ── */
-    function setActiveTab(key, reload) {
-        currentTab      = key;
-        tabHidden.value = key;
-        document.querySelectorAll('.tab-btn[data-tab]').forEach(b =>
-            b.classList.toggle('active', b.dataset.tab === key)
-        );
-        const p = new URLSearchParams(location.search);
-        p.set('tab', key);
-        if (query) p.set('q', query);
-        history.replaceState(null,'','?'+p.toString());
-        const label = key.charAt(0).toUpperCase() + key.slice(1);
-        metaText.innerHTML = query
-            ? `Showing <strong>${label}</strong> results for "<strong>${esc(query)}</strong>"`
-            : `Tab: <strong>${label}</strong>`;
-        updateStats();
-        if (reload) { showSkeletons(); loadCSE(key); }
-    }
-    /* Delegate clicks for both tab containers */
-    ['tabs-desktop','tabs-mobile'].forEach(id => {
-        $(id).addEventListener('click', e => {
-            const b = e.target.closest('.tab-btn[data-tab]');
-            if (!b || b.dataset.tab === currentTab) return;
-            setActiveTab(b.dataset.tab, true);
-        });
-    });
-    /* ── Init ── */
-    setActiveTab(currentTab, false);
-    if (query) {
-        showSkeletons();
-        loadCSE(currentTab);
-    } else {
-        pulseDot.style.display = 'none';
-        metaText.textContent   = '';
-        cseResults.innerHTML   = `
-            <div class="empty-state">
-                <i class="fa-solid fa-magnifying-glass"></i>
-                <p>Enter a query above to start exploring the universe.</p>
-            </div>`;
-    }
-})();
-</script>
 </body>
 </html>

 <html lang="en" dir="ltr">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SurfGO | Discover the Universe</title>
+    <!-- Fonts & Icons -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;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. 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);
         }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
         }
+        body {
+            font-family: 'Tajawal', sans-serif;
+            background: var(--bg-gradient);
+            color: var(--text);
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+            position: relative;
+            transition: all 0.5s ease;
+        }
+        /* =========================================
+           2. SPACE BACKGROUND
+           ========================================= */
+        .stars-container {
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            z-index: 0;
+        }
+        .nebula {
+            position: absolute;
+            width: 500px;
+            height: 500px;
+            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;
+        }
+        @keyframes float {
+            0%, 100% { transform: translate(0, 0); }
+            50% { transform: translate(100px, 50px); }
+        }
+        /* =========================================
+           3. WIDGETS & LOGO
+           ========================================= */
+        .clock-container {
+            position: absolute;
+            top: 40px;
+            text-align: center;
+            z-index: 10;
+            animation: fadeIn 1s ease;
+        }
+        #time { font-size: 3rem; font-weight: 700; letter-spacing: 2px; color: var(--text); }
+        #date { font-size: 1rem; color: var(--text-dim); }
         .logo {
+            font-size: clamp(48px, 10vw, 85px);
+            font-weight: 800;
+            color: var(--accent);
+            margin-bottom: 30px;
+            z-index: 10;
+            text-shadow: 0 10px 20px var(--shadow-accent);
+            letter-spacing: -2px;
+            animation: fadeIn 1.2s ease;
         }
+        /* =========================================
+           4. SEARCH BAR
+           ========================================= */
+        .search-container {
+            width: 90%;
+            max-width: 680px;
+            z-index: 10;
         }
         .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: 8px 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: 1.1rem;
+            padding: 12px 20px;
         }
+        .search-form input::placeholder { color: var(--text-dim); opacity: 0.6; }
         .search-btn {
+            background: none;
+            border: none;
+            color: var(--accent);
+            cursor: pointer;
+            padding: 0 15px;
+            font-size: 1.2rem;
+            transition: 0.3s;
+        }
+        .search-btn:hover { color: var(--accent-light); }
+        /* =========================================
+           5. QUICK LINKS
+           ========================================= */
+        .quick-links {
+            margin-top: 45px;
+            display: flex;
+            gap: 20px;
+            z-index: 10;
+            flex-wrap: wrap;
+            justify-content: center;
+            animation: fadeInUp 1s ease;
+        }
+        .link-item {
+            text-decoration: none;
+            color: inherit;
+            text-align: center;
+            transition: 0.3s;
+        }
+        .link-icon {
+            width: 60px;
+            height: 60px;
+            background: var(--surface);
+            border: 1px solid var(--glass-border);
+            border-radius: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            overflow: hidden;
+        }
+        /* Genisi Logo Specifics */
+        .genisi-logo {
+            width: 70%;
+            height: 70%;
+            object-fit: contain;
+            transition: transform 0.3s ease;
+        }
+        /* Official Icon Colors */
+        .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: 0.8rem;
+            color: var(--text-dim);
+            transition: 0.3s;
+        }
+        /* Hover effects - NO MOVEMENT as requested */
+        .link-item:hover { transform: none; }
+        .link-item:hover .link-icon {
+            transform: none;
+            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); }
+        /* =========================================
+           6. FOOTER & ANIMATIONS
+           ========================================= */
+        .footer {
+            position: absolute;
+            bottom: 20px;
+            font-size: 0.8rem;
+            color: var(--text-dim);
+            text-align: center;
+            z-index: 10;
+        }
+        @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); } }
     </style>
 </head>
 <body>
+    <!-- Background Layer -->
+    <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 Widget -->
+    <div class="clock-container">
+        <div id="time">00:00</div>
+        <div id="date">Loading date...</div>
     </div>
+    <!-- Main Logo -->
+    <div class="logo">SurfGO</div>
+    <!-- Search Section -->
+    <div class="search-container">
+        <form action="results.html" method="get" class="search-form">
+            <input type="text" name="q" placeholder="Explore the universe..." autocomplete="off">
+            <button type="submit" class="search-btn">
+                <i class="fa-solid fa-paper-plane"></i>
+            </button>
+        </form>
     </div>
+    <!-- Quick Navigation -->
+    <div class="quick-links">
+        <a href="https://youtube.com" target="_blank" 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" 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" class="link-item">
+            <div class="link-icon"><i class="fa-brands fa-instagram"></i></div>
+            <div class="link-label">Instagram</div>
+        </a>
+        <a href="https://genisi.web.app/" target="_blank" class="link-item">
+            <div class="link-icon">
+                <img src="https://copilot.microsoft.com/th/id/BCO.f29916dd-b0c1-4089-87cd-43d099a7d1a6.png" alt="Genisi Logo" class="genisi-logo">
             </div>
+            <div class="link-label">Genisi</div>
+        </a>
+        <a href="https://twitter.com" target="_blank" class="link-item">
+            <div class="link-icon"><i class="fa-brands fa-x-twitter"></i></div>
+            <div class="link-label">Twitter</div>
+        </a>
     </div>
+    <!-- Footer -->
+    <div class="footer">
+        Crafted by <strong>AnesNT</strong> • 2026
     </div>
+    <script>
+        // 1. Real-time Clock & Date
+        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();
+        // 2. Dynamic Stars Generation
+        const starsContainer = document.getElementById('stars');
+        for (let i = 0; i < 150; i++) {
+            const star = document.createElement('div');
+            star.style.position = 'absolute';
+            star.style.left = Math.random() * 100 + '%';
+            star.style.top = Math.random() * 100 + '%';
+            star.style.width = Math.random() * 2 + 'px';
+            star.style.height = star.style.width;
+            star.style.background = '#fff';
+            star.style.borderRadius = '50%';
+            star.style.opacity = Math.random();
+            starsContainer.appendChild(star);
+        }
+    </script>
 </body>
 </html>