| <!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> |
| |
| |
| |
| :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; |
| } |
| |
| |
| |
| .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); } |
| } |
| |
| |
| |
| .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; |
| } |
| |
| |
| |
| .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; |
| } |
| |
| |
| |
| .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; |
| } |
| |
| |
| |
| .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); } |
| |
| |
| |
| .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; |
| } |
| |
| @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); } |
| } |
| |
| .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); |
| } |
| |
| |
| |
| .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; |
| } |
| |
| |
| |
| @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); } |
| } |
| |
| |
| |
| |
| @media (max-width: 360px) { |
| .page-wrapper { |
| padding-top: 90px; |
| padding-bottom: 70px; |
| } |
| .quick-links { |
| gap: 10px; |
| } |
| } |
| |
| @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; |
| } |
| } |
| |
| @media (min-width: 768px) { |
| .page-wrapper { |
| padding-top: 120px; |
| padding-bottom: 80px; |
| } |
| .quick-links { |
| gap: 18px; |
| } |
| } |
| |
| @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> |
| |
| <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> |
| |
| <div class="clock-container"> |
| <div id="time">00:00</div> |
| <div id="date">Loading...</div> |
| </div> |
| |
| <div class="page-wrapper"> |
| |
| <div class="logo">SurfGO</div> |
| |
| <div class="search-container"> |
| |
| <form action="results.html" method="get" class="search-form"> |
| |
| <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> |
| |
| <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> |
| |
| <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> |
| |
| <div class="footer"> |
| Crafted by <strong>AnesNT</strong> · 2026 |
| </div> |
| <script> |
| |
| 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(); |
| |
| document.querySelector('input[name="q"]').focus(); |
| |
| 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> |
