Spaces:
Running
Running
File size: 4,560 Bytes
e5cf055 2293b08 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | <!DOCTYPE html>
<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>
|