Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Generation Bridge Wiki - Connecting Generations Through Language</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌉</text></svg>"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 min-h-screen text-white"> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section --> | |
| <section class="relative overflow-hidden pt-20 pb-32 px-4"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-purple-500/20 via-transparent to-blue-500/20 animate-gradient-shift"></div> | |
| <div class="max-w-6xl mx-auto relative z-10"> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-purple-400 via-pink-400 to-blue-400 bg-clip-text text-transparent animate-gradient"> | |
| Generation Bridge Wiki | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto leading-relaxed"> | |
| Bridging the communication gap between generations through language, culture, and shared experiences | |
| </p> | |
| </div> | |
| <!-- Search Bar --> | |
| <div class="max-w-2xl mx-auto mb-16"> | |
| <div class="relative group"> | |
| <input type="text" id="mainSearch" placeholder="Search for a term, slang, or phrase..." | |
| class="w-full px-6 py-4 rounded-2xl bg-white/10 backdrop-blur-lg border border-white/20 | |
| focus:border-purple-400 focus:ring-4 focus:ring-purple-400/20 transition-all duration-300 | |
| placeholder-gray-400 text-white text-lg"> | |
| <div class="absolute right-4 top-1/2 transform -translate-y-1/2"> | |
| <i data-feather="search" class="w-6 h-6 text-gray-400 group-focus-within:text-purple-400 transition-colors"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Generation Selector --> | |
| <div class="grid grid-cols-2 md:grid-cols-5 gap-4 max-w-5xl mx-auto"> | |
| <button class="generation-btn" data-gen="boomer"> | |
| <div class="text-3xl mb-2">👴</div> | |
| <div class="font-bold">Boomers</div> | |
| <div class="text-sm opacity-75">1946-1964</div> | |
| </button> | |
| <button class="generation-btn" data-gen="genx"> | |
| <div class="text-3xl mb-2">🎸</div> | |
| <div class="font-bold">Gen X</div> | |
| <div class="text-sm opacity-75">1965-1980</div> | |
| </button> | |
| <button class="generation-btn" data-gen="millennial"> | |
| <div class="text-3xl mb-2">📱</div> | |
| <div class="font-bold">Millennials</div> | |
| <div class="text-sm opacity-75">1981-1996</div> | |
| </button> | |
| <button class="generation-btn" data-gen="genz"> | |
| <div class="text-3xl mb-2">💫</div> | |
| <div class="font-bold">Gen Z</div> | |
| <div class="text-sm opacity-75">1997-2012</div> | |
| </button> | |
| <button class="generation-btn" data-gen="genalpha"> | |
| <div class="text-3xl mb-2">🚀</div> | |
| <div class="font-bold">Gen Alpha</div> | |
| <div class="text-sm opacity-75">2013+</div> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Terms Section --> | |
| <section class="py-20 px-4"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-4xl font-bold text-center mb-4 bg-gradient-to-r from-pink-400 to-orange-400 bg-clip-text text-transparent"> | |
| Trending Terms | |
| </h2> | |
| <p class="text-center text-gray-300 mb-12 max-w-2xl mx-auto"> | |
| Discover the latest slang and phrases making waves across generations | |
| </p> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6" id="featuredTerms"> | |
| <!-- Terms will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Translation Tool --> | |
| <section class="py-20 px-4 bg-white/5 backdrop-blur-lg"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-4xl font-bold text-center mb-12 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"> | |
| Translation Tool | |
| </h2> | |
| <div class="bg-white/10 backdrop-blur-xl rounded-3xl p-8 border border-white/20"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-bold mb-3 text-gray-200">From Generation</label> | |
| <select id="fromGen" class="w-full p-3 rounded-xl bg-white/10 border border-white/20 focus:border-purple-400 focus:ring-4 focus:ring-purple-400/20 transition-all"> | |
| <option value="boomer">Boomers (1946-1964)</option> | |
| <option value="genx">Gen X (1965-1980)</option> | |
| <option value="millennial">Millennials (1981-1996)</option> | |
| <option value="genz">Gen Z (1997-2012)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-bold mb-3 text-gray-200">To Generation</label> | |
| <select id="toGen" class="w-full p-3 rounded-xl bg-white/10 border border-white/20 focus:border-purple-400 focus:ring-4 focus:ring-purple-400/20 transition-all"> | |
| <option value="genz">Gen Z (1997-2012)</option> | |
| <option value="millennial">Millennials (1981-1996)</option> | |
| <option value="genx">Gen X (1965-1980)</option> | |
| <option value="boomer">Boomers (1946-1964)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <label class="block text-sm font-bold mb-3 text-gray-200">Enter Phrase</label> | |
| <textarea id="translateInput" rows="3" placeholder="Type a phrase to translate..." | |
| class="w-full p-4 rounded-xl bg-white/10 border border-white/20 focus:border-purple-400 | |
| focus:ring-4 focus:ring-purple-400/20 transition-all placeholder-gray-400 resize-none"></textarea> | |
| </div> | |
| <button id="translateBtn" class="mt-6 w-full py-4 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl font-bold | |
| hover:from-purple-600 hover:to-pink-600 transition-all duration-300 transform | |
| hover:scale-105 active:scale-95 shadow-lg hover:shadow-purple-500/25"> | |
| <i data-feather="shuffle" class="w-5 h-5 inline mr-2"></i> | |
| Translate | |
| </button> | |
| <div id="translationResult" class="mt-6 p-6 bg-green-500/10 border border-green-500/30 rounded-xl hidden"> | |
| <h3 class="font-bold text-lg mb-2 text-green-400">Translation Result</h3> | |
| <p id="translatedText" class="text-white text-lg"></p> | |
| <p id="translationContext" class="text-gray-300 text-sm mt-2"></p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Connect Section --> | |
| <section class="py-20 px-4"> | |
| <div class="max-w-6xl mx-auto text-center"> | |
| <h2 class="text-4xl font-bold mb-6 bg-gradient-to-r from-orange-400 to-red-400 bg-clip-text text-transparent"> | |
| Share Your Experience | |
| </h2> | |
| <p class="text-xl text-gray-300 mb-12 max-w-3xl mx-auto"> | |
| Help others understand your generation's perspective. Share stories, explain slang, and build bridges. | |
| </p> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="p-8 bg-white/5 backdrop-blur-lg rounded-2xl border border-white/10 hover:border-white/30 transition-all"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="edit-3" class="w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Submit Slang</h3> | |
| <p class="text-gray-300">Add new terms and expressions from your generation</p> | |
| </div> | |
| <div class="p-8 bg-white/5 backdrop-blur-lg rounded-2xl border border-white/10 hover:border-white/30 transition-all"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-pink-500 to-orange-500 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="message-circle" class="w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Share Stories</h3> | |
| <p class="text-gray-300">Tell us about experiences that shaped your generation</p> | |
| </div> | |
| <div class="p-8 bg-white/5 backdrop-blur-lg rounded-2xl border border-white/10 hover:border-white/30 transition-all"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-teal-500 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="users" class="w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Join Discussions</h3> | |
| <p class="text-gray-300">Connect with people from different generations</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer class="py-12 px-4 border-t border-white/10"> | |
| <div class="max-w-6xl mx-auto text-center"> | |
| <p class="text-gray-400">© 2024 Generation Bridge Wiki. Building connections, one word at a time.</p> | |
| </div> | |
| </footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |