| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>SurfGO | بحث حر وآمن</title> |
| <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;800&display=swap" rel="stylesheet"> |
| <style> |
| :root { --primary: #4285f4; --bg: #ffffff; --text: #202124; --border: #dfe1e5; } |
| @media (prefers-color-scheme: dark) { :root { --bg: #202124; --text: #e8eaed; --border: #5f6368; } } |
| |
| body { font-family: 'Tajawal', sans-serif; background: var(--bg); color: var(--text); margin: 0; display: flex; flex-direction: column; height: 100vh; align-items: center; justify-content: center; overflow: hidden; } |
| .logo { font-size: clamp(60px, 15vw, 90px); font-weight: 800; color: var(--primary); margin-bottom: 30px; letter-spacing: -3px; } |
| .search-box { width: 90%; max-width: 580px; } |
| .search-box input { width: 100%; padding: 14px 25px; border-radius: 30px; border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 16px; outline: none; transition: all 0.3s; box-sizing: border-box; } |
| .search-box input:focus { box-shadow: 0 2px 8px rgba(0,0,0,0.15); border-color: transparent; } |
| .btns { margin-top: 25px; display: flex; gap: 10px; justify-content: center; } |
| button { padding: 10px 24px; border: none; background: #f8f9fa; color: #3c4043; border-radius: 6px; cursor: pointer; font-family: 'Tajawal'; font-size: 14px; border: 1px solid transparent; transition: 0.2s; } |
| button:hover { border-color: #dadce0; box-shadow: 0 1px 2px rgba(0,0,0,0.1); } |
| @media (prefers-color-scheme: dark) { button { background: #3c4043; color: #e8eaed; } } |
| </style> |
| </head> |
| <body> |
|
|
| <div class="logo">SurfGO</div> |
|
|
| <div class="search-box"> |
| <form action="results.html" method="GET"> |
| <input type="text" name="q" placeholder="ابحث في الويب..." required autofocus autocomplete="off"> |
| <div class="btns"> |
| <button type="submit">بحث SurfGO</button> |
| <button type="button">أشعر بالحظ</button> |
| </div> |
| </form> |
| </div> |
|
|
| </body> |
| </html> |
