Wiki creating connections between generations of people by demystifying their real experience and explain about new language trends etc

README.md

@@ -1,10 +1,13 @@
 ---
-title: Generation Bridge Wiki
-emoji: 🚀
-colorFrom: indigo
-colorTo: pink
+title: Generation Bridge Wiki 🌉
+colorFrom: green
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/navbar.js

@@ -0,0 +1,274 @@
+class CustomNavbar extends HTMLElement {
+    constructor() {
+        super();
+        this.isMenuOpen = false;
+    }
+
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+        this.setupEventListeners();
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    z-index: 50;
+                }
+
+                .navbar {
+                    background: rgba(15, 23, 42, 0.8);
+                    backdrop-filter: blur(20px);
+                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+                    transition: all 0.3s ease;
+                }
+
+                .navbar.scrolled {
+                    background: rgba(15, 23, 42, 0.95);
+                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+                }
+
+                .nav-container {
+                    max-width: 1200px;
+                    margin: 0 auto;
+                    padding: 0 1rem;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    height: 80px;
+                }
+
+                .logo {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    font-size: 1.5rem;
+                    font-weight: bold;
+                    color: white;
+                    text-decoration: none;
+                    transition: transform 0.3s ease;
+                }
+
+                .logo:hover {
+                    transform: scale(1.05);
+                }
+
+                .logo-icon {
+                    width: 2.5rem;
+                    height: 2.5rem;
+                    background: linear-gradient(135deg, #a855f7, #db2777);
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+
+                .nav-links {
+                    display: flex;
+                    gap: 2rem;
+                    align-items: center;
+                }
+
+                .nav-link {
+                    color: #d1d5db;
+                    text-decoration: none;
+                    font-weight: 500;
+                    transition: all 0.3s ease;
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                }
+
+                .nav-link:hover {
+                    color: #c084fc;
+                    transform: translateY(-2px);
+                }
+
+                .mobile-menu-btn {
+                    display: none;
+                    background: none;
+                    border: none;
+                    color: white;
+                    cursor: pointer;
+                    padding: 0.5rem;
+                    border-radius: 0.5rem;
+                    transition: background 0.3s ease;
+                }
+
+                .mobile-menu-btn:hover {
+                    background: rgba(255, 255, 255, 0.1);
+                }
+
+                @media (max-width: 768px) {
+                    .nav-links {
+                        position: fixed;
+                        top: 80px;
+                        left: -100%;
+                        width: 100%;
+                        height: calc(100vh - 80px);
+                        background: rgba(15, 23, 42, 0.98);
+                        flex-direction: column;
+                        padding: 2rem;
+                        transition: left 0.3s ease;
+                        backdrop-filter: blur(20px);
+                    }
+
+                    .nav-links.active {
+                        left: 0;
+                    }
+
+                    .mobile-menu-btn {
+                        display: block;
+                    }
+
+                    .nav-link {
+                        width: 100%;
+                        padding: 1rem;
+                        border-radius: 0.75rem;
+                        justify-content: center;
+                    }
+
+                    .nav-link:hover {
+                        background: rgba(168, 85, 247, 0.2);
+                    }
+                }
+
+                .live-indicator {
+                    display: inline-flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    background: rgba(34, 197, 94, 0.2);
+                    color: #22c55e;
+                    padding: 0.25rem 0.75rem;
+                    border-radius: 9999px;
+                    font-size: 0.75rem;
+                    font-weight: bold;
+                    border: 1px solid rgba(34, 197, 94, 0.3);
+                }
+
+                .pulse-dot {
+                    width: 8px;
+                    height: 8px;
+                    background: #22c55e;
+                    border-radius: 50%;
+                    animation: pulse 2s infinite;
+                }
+
+                @keyframes pulse {
+                    0% { transform: scale(1); opacity: 1; }
+                    50% { transform: scale(1.2); opacity: 0.7; }
+                    100% { transform: scale(1); opacity: 1; }
+                }
+
+                .submit-btn {
+                    background: linear-gradient(135deg, #a855f7, #db2777);
+                    color: white;
+                    padding: 0.5rem 1.5rem;
+                    border-radius: 0.75rem;
+                    font-weight: bold;
+                    transition: all 0.3s ease;
+                }
+
+                .submit-btn:hover {
+                    transform: scale(1.05);
+                    box-shadow: 0 10px 25px rgba(168, 85, 247, 0.4);
+                }
+            </style>
+
+            <nav class="navbar" id="navbar">
+                <div class="nav-container">
+                    <a href="#" class="logo" data-action="home">
+                        <div class="logo-icon">🌉</div>
+                        <span>GenBridge</span>
+                    </a>
+
+                    <div class="nav-links" id="navLinks">
+                        <a href="#" class="nav-link" data-action="home">
+                            <i data-feather="home"></i>
+                            Home
+                        </a>
+                        <a href="#" class="nav-link" data-action="search">
+                            <i data-feather="search"></i>
+                            Search
+                        </a>
+                        <a href="#" class="nav-link" data-action="stories">
+                            <i data-feather="book-open"></i>
+                            Stories
+                        </a>
+                        <a href="#" class="nav-link" data-action="about">
+                            <i data-feather="info"></i>
+                            About
+                        </a>
+                        
+                        <div class="live-indicator">
+                            <div class="pulse-dot"></div>
+                            <span>LIVE</span>
+                        </div>
+
+                        <a href="#" class="nav-link submit-btn" data-action="submit">
+                            <i data-feather="plus"></i>
+                            Submit Term
+                        </a>
+                    </div>
+
+                    <button class="mobile-menu-btn" id="mobileMenuBtn">
+                        <i data-feather="menu" class="w-6 h-6"></i>
+                    </button>
+                </div>
+            </nav>
+        `;
+    }
+
+    setupEventListeners() {
+        const navbar = this.shadowRoot.getElementById('navbar');
+        const mobileMenuBtn = this.shadowRoot.getElementById('mobileMenuBtn');
+        const navLinks = this.shadowRoot.getElementById('navLinks');
+
+        // Scroll effect
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 50) {
+                navbar.classList.add('scrolled');
+            } else {
+                navbar.classList.remove('scrolled');
+            }
+        });
+
+        // Mobile menu toggle
+        mobileMenuBtn.addEventListener('click', () => {
+            this.isMenuOpen = !this.isMenuOpen;
+            navLinks.classList.toggle('active');
+            
+            const icon = mobileMenuBtn.querySelector('i');
+            if (this.isMenuOpen) {
+                icon.setAttribute('data-feather', 'x');
+            } else {
+                icon.setAttribute('data-feather', 'menu');
+            }
+            feather.replace();
+        });
+
+        // Close mobile menu on link click
+        const links = navLinks.querySelectorAll('.nav-link');
+        links.forEach(link => {
+            link.addEventListener('click', () => {
+                this.isMenuOpen = false;
+                navLinks.classList.remove('active');
+                const icon = mobileMenuBtn.querySelector('i');
+                icon.setAttribute('data-feather', 'menu');
+                feather.replace();
+            });
+        });
+
+        // Re-initialize feather icons
+        feather.replace();
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,190 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<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">&copy; 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>

script.js

@@ -0,0 +1,429 @@
+// Generation Bridge Wiki - Main JavaScript
+
+// Mock data for terms
+const termsData = [
+    {
+        id: 1,
+        term: "No Cap",
+        generation: "genz",
+        meaning: "No lie, for real, truthfully",
+        example: "This pizza is the best, no cap!",
+        category: "slang",
+        popularity: 95,
+        tags: ["truth", "honesty", "slang"]
+    },
+    {
+        id: 2,
+        term: "Lit",
+        generation: "millennial",
+        meaning: "Amazing, exciting, fun",
+        example: "That party was so lit last night!",
+        category: "slang",
+        popularity: 85,
+        tags: ["fun", "exciting", "awesome"]
+    },
+    {
+        id: 3,
+        term: "Groovy",
+        generation: "boomer",
+        meaning: "Cool, fashionable, or pleasant",
+        example: "That music is really groovy!",
+        category: "slang",
+        popularity: 60,
+        tags: ["cool", "music", "vintage"]
+    },
+    {
+        id: 4,
+        term: "Slay",
+        generation: "genz",
+        meaning: "To do something exceptionally well",
+        example: "You absolutely slayed that presentation!",
+        category: "slang",
+        popularity: 98,
+        tags: ["success", "fashion", "performance"]
+    },
+    {
+        id: 5,
+        term: "Whatever",
+        generation: "genx",
+        meaning: "Indifference, dismissive",
+        example: "You don't like my idea? Whatever.",
+        category: "attitude",
+        popularity: 70,
+        tags: ["indifferent", "sarcastic", "dismissive"]
+    },
+    {
+        id: 6,
+        term: "Bussin",
+        generation: "genz",
+        meaning: "Really good, especially food",
+        example: "This burger is bussin!",
+        category: "food",
+        popularity: 88,
+        tags: ["food", "delicious", "good"]
+    },
+    {
+        id: 7,
+        term: "Rad",
+        generation: "genx",
+        meaning: "Radical, excellent, cool",
+        example: "That skateboard trick was rad!",
+        category: "slang",
+        popularity: 65,
+        tags: ["cool", "awesome", "extreme"]
+    },
+    {
+        id: 8,
+        term: "Skibidi",
+        generation: "genalpha",
+        meaning: "Fun, silly, nonsensical (from YouTube series)",
+        example: "Skibidi toilet is so funny!",
+        category: "meme",
+        popularity: 75,
+        tags: ["meme", "funny", "youtube"]
+    },
+    {
+        id: 9,
+        term: "Adulting",
+        generation: "millennial",
+        meaning: "Doing adult responsibilities",
+        example: "I spent my Saturday doing taxes, adulting is hard.",
+        category: "lifestyle",
+        popularity: 90,
+        tags: ["responsibility", "growing up", "life"]
+    },
+    {
+        id: 10,
+        term: "Bet",
+        generation: "genz",
+        meaning: "Okay, agreement, or confirmation",
+        example: "Want to hang out later? Bet.",
+        category: "slang",
+        popularity: 92,
+        tags: ["agreement", "yes", "cool"]
+    },
+    {
+        id: 11,
+        term: "FOMO",
+        generation: "millennial",
+        meaning: "Fear Of Missing Out",
+        example: "I have serious FOMO seeing everyone's vacation photos.",
+        category: "psychology",
+        popularity: 88,
+        tags: ["anxiety", "social", "missing out"]
+    },
+    {
+        id: 12,
+        term: "Cool Beans",
+        generation: "genx",
+        meaning: "Agreeable, good idea",
+        example: "Want to grab pizza? Cool beans!",
+        category: "slang",
+        popularity: 55,
+        tags: ["agreement", "casual", "friendly"]
+    }
+];
+
+// Translation dictionary
+const translationDictionary = {
+    "awesome": { boomer: "groovy", genx: "rad", millennial: "lit", genz: "slaps" },
+    "cool": { boomer: "hip", genx: "cool", millennial: "chill", genz: "fire" },
+    "great": { boomer: "fabulous", genx: "excellent", millennial: "amazing", genz: "bussin" },
+    "bad": { boomer: "bummer", genx: "lame", millennial: "trash", genz: "mid" },
+    "friend": { boomer: "pal", genx: "buddy", millennial: "homie", genz: "fam" },
+    "very": { boomer: "real", genx: "totally", millennial: "super", genz: "lowkey" },
+    "yes": { boomer: "right on", genx: "for sure", millennial: "absolutely", genz: "bet" }
+};
+
+// DOM Elements
+let searchInput, featuredTermsContainer, translateBtn, translateInput, 
+    fromGenSelect, toGenSelect, translationResult, translatedText, 
+    translationContext, generationButtons;
+
+// Initialize the app
+document.addEventListener('DOMContentLoaded', () => {
+    initializeElements();
+    setupEventListeners();
+    loadFeaturedTerms();
+});
+
+function initializeElements() {
+    searchInput = document.getElementById('mainSearch');
+    featuredTermsContainer = document.getElementById('featuredTerms');
+    translateBtn = document.getElementById('translateBtn');
+    translateInput = document.getElementById('translateInput');
+    fromGenSelect = document.getElementById('fromGen');
+    toGenSelect = document.getElementById('toGen');
+    translationResult = document.getElementById('translationResult');
+    translatedText = document.getElementById('translatedText');
+    translationContext = document.getElementById('translationContext');
+    generationButtons = document.querySelectorAll('.generation-btn');
+}
+
+function setupEventListeners() {
+    // Search functionality
+    searchInput.addEventListener('input', handleSearch);
+    searchInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            performSearch();
+        }
+    });
+
+    // Translation
+    translateBtn.addEventListener('click', performTranslation);
+    translateInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter' && e.ctrlKey) {
+            performTranslation();
+        }
+    });
+
+    // Generation buttons
+    generationButtons.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const gen = btn.dataset.gen;
+            filterByGeneration(gen);
+        });
+    });
+
+    // Navbar interactions
+    document.addEventListener('click', (e) => {
+        if (e.target.matches('[data-action]')) {
+            handleNavbarAction(e.target.dataset.action);
+        }
+    });
+}
+
+function loadFeaturedTerms() {
+    // Sort by popularity and get top terms
+    const topTerms = [...termsData]
+        .sort((a, b) => b.popularity - a.popularity)
+        .slice(0, 9);
+
+    featuredTermsContainer.innerHTML = topTerms.map(term => createTermCard(term)).join('');
+    
+    // Re-initialize feather icons for new content
+    if (typeof feather !== 'undefined') {
+        feather.replace();
+    }
+}
+
+function createTermCard(term) {
+    const generationColors = {
+        boomer: 'from-blue-500/30 to-blue-600/30',
+        genx: 'from-purple-500/30 to-purple-600/30',
+        millennial: 'from-pink-500/30 to-pink-600/30',
+        genz: 'from-orange-500/30 to-orange-600/30',
+        genalpha: 'from-green-500/30 to-teal-600/30'
+    };
+
+    const generationEmojis = {
+        boomer: '👴',
+        genx: '🎸',
+        millennial: '📱',
+        genz: '💫',
+        genalpha: '🚀'
+    };
+
+    return `
+        <div class="term-card" data-term-id="${term.id}">
+            <div class="flex items-start justify-between mb-4">
+                <span class="px-3 py-1 rounded-full text-xs font-bold bg-gradient-to-r ${generationColors[term.generation]} border border-white/20 backdrop-blur-sm">
+                    ${generationEmojis[term.generation]} ${term.generation.toUpperCase()}
+                </span>
+                <div class="flex items-center text-sm text-gray-300">
+                    <i data-feather="trending-up" class="w-4 h-4 mr-1 text-green-400"></i>
+                    ${term.popularity}%
+                </div>
+            </div>
+            
+            <h3 class="text-2xl font-bold mb-2 text-white">${term.term}</h3>
+            <p class="text-gray-300 mb-3">${term.meaning}</p>
+            
+            <div class="bg-white/5 p-3 rounded-lg mb-4 border border-white/10">
+                <p class="text-sm text-gray-200 italic">"${term.example}"</p>
+            </div>
+            
+            <div class="flex flex-wrap gap-2">
+                ${term.tags.map(tag => `
+                    <span class="px-2 py-1 bg-white/10 rounded-full text-xs text-gray-300 hover:bg-white/20 transition-colors cursor-pointer">
+                        #${tag}
+                    </span>
+                `).join('')}
+            </div>
+            
+            <button class="mt-4 w-full py-2 bg-gradient-to-r from-purple-500/30 to-pink-500/30 rounded-lg 
+                           hover:from-purple-500/50 hover:to-pink-500/50 transition-all duration-300 text-sm font-bold"
+                    onclick="showTermDetails(${term.id})">
+                Learn More
+            </button>
+        </div>
+    `;
+}
+
+function handleSearch(e) {
+    const query = e.target.value.toLowerCase().trim();
+    
+    if (query.length === 0) {
+        loadFeaturedTerms();
+        return;
+    }
+
+    const filteredTerms = termsData.filter(term => 
+        term.term.toLowerCase().includes(query) ||
+        term.meaning.toLowerCase().includes(query) ||
+        term.tags.some(tag => tag.toLowerCase().includes(query))
+    );
+
+    featuredTermsContainer.innerHTML = filteredTerms.map(term => createTermCard(term)).join('');
+    feather.replace();
+}
+
+function performSearch() {
+    const query = searchInput.value.trim();
+    if (query) {
+        console.log('Searching for:', query);
+        // Could implement advanced search or redirect to search results page
+    }
+}
+
+function filterByGeneration(generation) {
+    const filteredTerms = termsData.filter(term => term.generation === generation);
+    featuredTermsContainer.innerHTML = filteredTerms.map(term => createTermCard(term)).join('');
+    feather.replace();
+    
+    // Update active state
+    generationButtons.forEach(btn => {
+        if (btn.dataset.gen === generation) {
+            btn.classList.add('ring-4', 'ring-purple-400/40');
+        } else {
+            btn.classList.remove('ring-4', 'ring-purple-400/40');
+        }
+    });
+
+    // Scroll to terms section
+    document.getElementById('featuredTerms').scrollIntoView({ behavior: 'smooth' });
+}
+
+function performTranslation() {
+    const input = translateInput.value.trim().toLowerCase();
+    const fromGen = fromGenSelect.value;
+    const toGen = toGenSelect.value;
+
+    if (!input) {
+        showTranslationError('Please enter a phrase to translate');
+        return;
+    }
+
+    if (fromGen === toGen) {
+        showTranslationError('Please select different generations');
+        return;
+    }
+
+    // Simple translation logic - could be enhanced with a proper dictionary
+    let translated = input;
+    let context = '';
+
+    // Check for common words in our dictionary
+    Object.keys(translationDictionary).forEach(word => {
+        if (input.includes(word)) {
+            const replacement = translationDictionary[word][toGen];
+            translated = translated.replace(new RegExp(word, 'g'), replacement);
+            context += ` "${word}" → "${replacement}"`;
+        }
+    });
+
+    // Add generation-specific context
+    const contexts = {
+        boomer: "This phrase reflects Boomer values of authenticity and straightforwardness",
+        genx: "Gen X expressions often carry a tone of rebellion and independence",
+        millennial: "Millennial phrases blend digital culture with ironic humor",
+        genz: "Gen Z language is fast-evolving and heavily influenced by social media"
+    };
+
+    translatedText.textContent = translated.charAt(0).toUpperCase() + translated.slice(1);
+    translationContext.textContent = `Based on ${fromGen.toUpperCase()} → ${toGen.toUpperCase()} translation.${context ? ' Translated:' + context : ''} ${contexts[toGen] || ''}`;
+    
+    translationResult.classList.remove('hidden', 'border-red-500/30', 'bg-red-500/10');
+    translationResult.classList.add('border-green-500/30', 'bg-green-500/10');
+    translationResult.scrollIntoView({ behavior: 'smooth' });
+}
+
+function showTranslationError(message) {
+    translatedText.textContent = message;
+    translationContext.textContent = 'Please check your input and try again.';
+    
+    translationResult.classList.remove('hidden', 'border-green-500/30', 'bg-green-500/10');
+    translationResult.classList.add('border-red-500/30', 'bg-red-500/10');
+}
+
+function showTermDetails(termId) {
+    const term = termsData.find(t => t.id === termId);
+    if (term) {
+        console.log('Showing details for:', term);
+        // Could open modal or navigate to detail page
+        alert(`${term.term}\n\nMeaning: ${term.meaning}\n\nExample: "${term.example}"\n\nPopularity: ${term.popularity}%`);
+    }
+}
+
+function handleNavbarAction(action) {
+    switch(action) {
+        case 'home':
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+            break;
+        case 'search':
+            searchInput.focus();
+            break;
+        case 'submit':
+            alert('Submit feature coming soon!');
+            break;
+        case 'stories':
+            alert('Stories feature coming soon!');
+            break;
+        case 'about':
+            alert('About section coming soon!');
+            break;
+    }
+}
+
+// Keyboard shortcuts
+document.addEventListener('keydown', (e) => {
+    // Ctrl/Cmd + K for search
+    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+        e.preventDefault();
+        searchInput.focus();
+    }
+    
+    // Escape to clear search
+    if (e.key === 'Escape') {
+        if (document.activeElement === searchInput) {
+            searchInput.value = '';
+            searchInput.blur();
+            loadFeaturedTerms();
+        }
+    }
+});
+
+// Intersection Observer for animations
+const observerOptions = {
+    threshold: 0.1,
+    rootMargin: '0px 0px -50px 0px'
+};
+
+const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            entry.target.style.opacity = '1';
+            entry.target.style.transform = 'translateY(0)';
+        }
+    });
+}, observerOptions);
+
+// Observe all term cards
+setTimeout(() => {
+    document.querySelectorAll('.term-card').forEach(card => {
+        card.style.opacity = '0';
+        card.style.transform = 'translateY(20px)';
+        card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+        observer.observe(card);
+    });
+}, 100);

style.css

@@ -1,28 +1,89 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Custom animations and effects beyond Tailwind */
+
+@keyframes gradientShift {
+    0%, 100% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+}
+
+.animate-gradient-shift {
+    background-size: 200% 200%;
+    animation: gradientShift 8s ease-in-out infinite;
+}
+
+.animate-gradient {
+    background-size: 200% 200%;
+    animation: gradientShift 3s ease-in-out infinite;
+}
+
+/* Generation buttons */
+.generation-btn {
+    @apply p-6 bg-white/10 backdrop-blur-lg rounded-2xl border border-white/20 text-center 
+           hover:bg-white/20 hover:border-purple-400/50 transition-all duration-300 transform 
+           hover:-translate-y-2 hover:scale-105 active:scale-95 shadow-lg;
+}
+
+/* Term cards */
+.term-card {
+    @apply bg-white/10 backdrop-blur-lg rounded-2xl p-6 border border-white/10 
+           hover:border-white/30 hover:bg-white/20 transition-all duration-300 
+           transform hover:-translate-y-1 shadow-lg;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+    width: 10px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.05);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-thumb {
+    background: rgba(168, 85, 247, 0.5);
+    border-radius: 5px;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(168, 85, 247, 0.8);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Loading animation */
+.loading-skeleton {
+    background: linear-gradient(90deg, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 75%);
+    background-size: 200% 100%;
+    animation: loading 1.5s infinite;
 }
+
+@keyframes loading {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+
+/* Custom selection color */
+::selection {
+    background: rgba(168, 85, 247, 0.5);
+    color: white;
+}
+
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Glass morphism enhancements */
+.glass {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* Pulse animation for live indicators */
+.pulse-dot {
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); opacity: 1; }
+    50% { transform: scale(1.2); opacity: 0.7; }
+    100% { transform: scale(1); opacity: 1; }
+}