Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Waves! 🌊</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: linear-gradient(135deg, #0a0a0a 0%, #121212 100%); | |
| background-attachment: fixed; | |
| color: #ffffff; | |
| } | |
| .glass-nav { | |
| backdrop-filter: blur(12px); | |
| background-color: rgba(30, 30, 30, 0.7); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| } | |
| .search-glow { | |
| box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); | |
| } | |
| .plus-btn { | |
| transition: all 0.3s ease; | |
| } | |
| .plus-btn:hover { | |
| transform: rotate(90deg) scale(1.1); | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.8s ease-out forwards; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .grid-bg { | |
| background-image: | |
| linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| } | |
| </style> | |
| </head> | |
| <body class="grid-bg min-h-screen"> | |
| <!-- Navigation Bar --> | |
| <nav class="glass-nav p-4 rounded-xl mx-4 mt-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent">Waves! 🌊</span> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#" class="flex items-center space-x-1 px-3 py-1 rounded-lg hover:bg-gray-800 transition-all"> | |
| <span class="text-gray-300 font-medium">[H] Home</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-1 px-3 py-1 rounded-lg hover:bg-gray-800 transition-all"> | |
| <span class="text-gray-300 font-medium">[G] Games</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-1 px-3 py-1 rounded-lg hover:bg-gray-800 transition-all"> | |
| <span class="text-gray-300 font-medium">[A] AI</span> | |
| </a> | |
| </div> | |
| <button class="p-2 rounded-full hover:bg-gray-800 transition-all"> | |
| <i data-feather="settings"></i> | |
| </button> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 flex flex-col items-center justify-center min-h-[80vh] fade-in"> | |
| <h1 class="text-6xl md:text-7xl font-bold mb-8 bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent">Hello!</h1> | |
| <div class="w-full max-w-2xl relative"> | |
| <div class="flex items-center"> | |
| <input | |
| type="text" | |
| id="search" | |
| placeholder="Have anything in mind?" | |
| class="w-full px-6 py-4 rounded-2xl bg-gray-900 border border-gray-700 focus:outline-none focus:border-blue-500 focus:search-glow transition-all" | |
| > | |
| <span class="absolute right-4 text-gray-400 text-sm hidden md:block">Ctrl + E</span> | |
| </div> | |
| <button class="plus-btn absolute -bottom-6 left-1/2 transform -translate-x-1/2 bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-full shadow-lg"> | |
| <i data-feather="plus"></i> | |
| </button> | |
| </div> | |
| </main> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| feather.replace(); | |
| // Ctrl+E shortcut for search | |
| document.addEventListener('keydown', (e) => { | |
| if (e.ctrlKey && e.key === 'e') { | |
| e.preventDefault(); | |
| document.getElementById('search').focus(); | |
| } | |
| }); | |
| // Mobile menu toggle would go here in future versions | |
| }); | |
| </script> | |
| </body> | |
| </html> | |