Spaces:

mlmihjaz
/

anycoder-b4b3fbe5

Running

App Files Files Community

mlmihjaz commited on Jan 19

Commit

9c109bf

verified ·

1 Parent(s): 00e34e9

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +770 -553

index.html CHANGED Viewed

@@ -1,581 +1,798 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Alphabet Pop! Interactive Learning Game</title>
-    <!-- Import Google Fonts for a playful look -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Nunito:wght@400;700&display=swap" rel="stylesheet">
-    <!-- FontAwesome for Icons -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        :root {
-            --primary-color: #6C63FF;
-            --secondary-color: #FF6584;
-            --accent-color: #43D9AD;
-            --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --glass-bg: rgba(255, 255, 255, 0.85);
-            --glass-border: rgba(255, 255, 255, 0.5);
-            --text-dark: #2D3436;
-            --shadow-lg: 0 10px 30px rgba(0,0,0,0.15);
-        }
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-        }
-        body {
-            font-family: 'Nunito', sans-serif;
-            background: var(--bg-gradient);
-            height: 100vh;
-            display: flex;
-            flex-direction: column;
-            overflow: hidden; /* Prevent scrolling during animations */
-            color: var(--text-dark);
-        }
-        /* Header Section */
-        header {
-            padding: 1rem 2rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background: rgba(255, 255, 255, 0.9);
-            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-            z-index: 100;
-        }
-        .logo {
-            font-family: 'Fredoka', sans-serif;
-            font-size: 1.5rem;
-            font-weight: 700;
-            color: var(--primary-color);
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        .anycoder-link {
-            font-size: 0.9rem;
-            font-weight: 600;
-            color: var(--text-dark);
-            text-decoration: none;
-            padding: 0.5rem 1rem;
-            background: #f0f0f0;
-            border-radius: 20px;
-            transition: all 0.3s ease;
-        }
-        .anycoder-link:hover {
-            background: var(--primary-color);
-            color: white;
-            transform: translateY(-2px);
-        }
-        /* Main Game Area */
-        main {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            position: relative;
-            padding: 1rem;
-        }
-        /* Game Container (Glassmorphism) */
-        .game-board {
-            background: var(--glass-bg);
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-            border: 1px solid var(--glass-border);
-            border-radius: 30px;
-            padding: 2rem;
-            width: 90%;
-            max-width: 600px;
-            box-shadow: var(--shadow-lg);
-            text-align: center;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            min-height: 500px;
-            justify-content: space-between;
-            transition: transform 0.3s ease;
-        }
-        /* Progress Bar */
-        .progress-container {
-            width: 100%;
-            height: 10px;
-            background: #e0e0e0;
-            border-radius: 10px;
-            margin-bottom: 2rem;
-            overflow: hidden;
-        }
-        .progress-bar {
-            height: 100%;
-            width: 0%;
-            background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
-            border-radius: 10px;
-            transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
-        }
-        /* The Big Letter Display */
-        .letter-display {
-            font-family: 'Fredoka', sans-serif;
-            font-size: 12rem; /* Responsive size handled below */
-            font-weight: 700;
-            color: var(--primary-color);
-            text-shadow: 4px 4px 0px rgba(0,0,0,0.1);
-            cursor: default;
-            user-select: none;
-            position: relative;
-            z-index: 2;
-            transition: color 0.3s;
-        }
-        /* Image Container */
-        .image-container {
-            width: 200px;
-            height: 200px;
-            border-radius: 20px;
-            overflow: hidden;
-            background: #fff;
-            box-shadow: inset 0 0 20px rgba(0,0,0,0.05);
-            border: 4px solid white;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            opacity: 0; /* Hidden by default */
-            transform: scale(0.8);
-            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-            margin-top: 1rem;
-        }
-        .image-container.visible {
-            opacity: 1;
-            transform: scale(1);
-        }
-        .image-container img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-        /* Instructions / Status */
-        .status-text {
-            font-size: 1.2rem;
-            color: #636e72;
-            margin-top: 1rem;
-            font-weight: 600;
-        }
-        .hint-text {
-            font-size: 0.9rem;
-            color: #b2bec3;
-            margin-top: 0.5rem;
-        }
-        /* Controls (Start/Restart) */
-        .controls {
-            margin-top: 2rem;
-        }
-        .btn {
-            background: var(--primary-color);
-            color: white;
-            border: none;
-            padding: 1rem 2.5rem;
-            font-size: 1.2rem;
-            border-radius: 50px;
-            cursor: pointer;
-            font-family: 'Fredoka', sans-serif;
-            box-shadow: 0 5px 15px rgba(108, 99, 255, 0.4);
-            transition: all 0.2s ease;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        .btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 8px 20px rgba(108, 99, 255, 0.5);
-        }
-        .btn:active {
-            transform: translateY(1px);
-        }
-        .btn.secondary {
-            background: var(--text-dark);
-            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
-        }
-        /* Animations */
-        @keyframes popIn {
-            0% { transform: scale(0); opacity: 0; }
-            60% { transform: scale(1.2); opacity: 1; }
-            100% { transform: scale(1); opacity: 1; }
-        }
-        @keyframes shake {
-            0% { transform: translateX(0); }
-            25% { transform: translateX(-10px) rotate(-5deg); color: var(--secondary-color); }
-            50% { transform: translateX(10px) rotate(5deg); color: var(--secondary-color); }
-            75% { transform: translateX(-10px) rotate(-5deg); }
-            100% { transform: translateX(0); color: var(--primary-color); }
-        }
-        @keyframes float {
-            0% { transform: translateY(0px); }
-            50% { transform: translateY(-10px); }
-            100% { transform: translateY(0px); }
-        }
-        .anim-pop {
-            animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
-        }
-        .anim-shake {
-            animation: shake 0.4s ease-in-out;
-        }
-        .anim-float {
-            animation: float 3s ease-in-out infinite;
-        }
-        /* Confetti Overlay */
-        #confetti-canvas {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            pointer-events: none;
-            z-index: 50;
-        }
-        /* Responsive Design */
-        @media (max-width: 768px) {
-            .letter-display {
-                font-size: 8rem;
-            }
-            .game-board {
-                width: 95%;
-                padding: 1.5rem;
-            }
-            .image-container {
-                width: 150px;
-                height: 150px;
-            }
-        }
-        @media (max-width: 480px) {
-            .letter-display {
-                font-size: 6rem;
-            }
-            header {
-                padding: 0.8rem 1rem;
-            }
-            .logo span {
-                display: none; /* Hide text logo on very small screens, keep icon */
-            }
-            .image-container {
-                width: 120px;
-                height: 120px;
-            }
-        }
-    </style>
 </head>
 <body>
-    <header>
-        <div class="logo">
-            <i class="fa-solid fa-shapes"></i>
-            <span>AlphaPop</span>
         </div>
-        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
-            Built with anycoder
-        </a>
-    </header>
-    <main>
-        <canvas id="confetti-canvas"></canvas>
-        <div class="game-board">
-            <!-- Progress -->
-            <div class="progress-container">
-                <div class="progress-bar" id="progressBar"></div>
-            </div>
-            <!-- Interactive Area -->
-            <div id="gameArea" style="display: none; flex-direction: column; align-items: center; width: 100%;">
-                <div class="letter-display anim-pop" id="letterDisplay">A</div>
-                <div class="image-container" id="imageContainer">
-                    <img id="letterImage" src="" alt="Letter Image">
-                </div>
-                <div class="status-text" id="statusText">Press the 'A' key!</div>
-                <div class="hint-text"><i class="fa-solid fa-volume-high"></i> Sound On</div>
-            </div>
-            <!-- Start Screen -->
-            <div id="startScreen" style="text-align: center;">
-                <div class="logo" style="justify-content: center; font-size: 3rem; margin-bottom: 1rem; color: var(--primary-color);">
-                    <i class="fa-solid fa-keyboard"></i>
-                </div>
-                <h2 style="margin-bottom: 1rem; font-size: 1.8rem;">Are you ready to type?</h2>
-                <p style="margin-bottom: 2rem; color: #636e72;">Press the matching key on your keyboard to hear the sound and see the picture!</p>
-                <button class="btn" onclick="startGame()">
-                    Start Game <i class="fa-solid fa-play"></i>
-                </button>
-            </div>
-            <!-- End Screen -->
-            <div id="endScreen" style="display: none; text-align: center;">
-                <i class="fa-solid fa-trophy" style="font-size: 4rem; color: #f1c40f; margin-bottom: 1rem; animation: float 2s infinite;"></i>
-                <h2 style="margin-bottom: 1rem; font-size: 2rem;">Great Job!</h2>
-                <p style="margin-bottom: 2rem; color: #636e72;">You completed the alphabet.</p>
-                <button class="btn" onclick="startGame()">
-                    Play Again <i class="fa-solid fa-rotate-right"></i>
-                </button>
-            </div>
         </div>
-    </main>
-    <script>
-        // Game Configuration
-        const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split('');
-        let currentIndex = 0;
-        let isGameActive = false;
-        // DOM Elements
-        const startScreen = document.getElementById('startScreen');
-        const endScreen = document.getElementById('endScreen');
-        const gameArea = document.getElementById('gameArea');
-        const letterDisplay = document.getElementById('letterDisplay');
-        const statusText = document.getElementById('statusText');
-        const imageContainer = document.getElementById('imageContainer');
-        const letterImage = document.getElementById('letterImage');
-        const progressBar = document.getElementById('progressBar');
-        // --- USER CONFIGURATION FOR IMAGES ---
-        // If you have local images, replace the return value of this function
-        // with the path to your image file.
-        // Example: return `assets/images/${letter}.jpg`;
-        function getRandomImageForLetter(letter) {
-            // This generates a consistent random seed based on the letter + a random number
-            // to simulate having multiple images for the same letter.
-            const randomId = Math.floor(Math.random() * 1000);
-            // Using picsum.photos as a placeholder service.
-            // The seed ensures that 'A' always looks somewhat different but consistent per session.
-            return `https://picsum.photos/seed/${letter}${randomId}/300/300`;
-            // YOUR CODE (Uncomment below and adjust path if you have local files):
-            // const images = {
-            //    'A': ['apple.jpg', 'ant.jpg', 'axe.jpg'],
-            //    'B': ['ball.jpg', 'bear.jpg', 'boat.jpg'],
-            //    // ... add all letters
-            // };
-            // const list = images[letter] || ['default.jpg'];
-            // return 'path/to/folder/' + list[Math.floor(Math.random() * list.length)];
-        }
-        // Sound Functionality (Web Speech API)
-        function speakLetter(letter) {
-            if ('speechSynthesis' in window) {
-                // Cancel any currently playing speech
-                window.speechSynthesis.cancel();
-                const utterance = new SpeechSynthesisUtterance(letter);
-                utterance.lang = 'en-US';
-                utterance.rate = 0.8; // Slightly slower for kids
-                utterance.pitch = 1.1; // Slightly higher/friendly
-                window.speechSynthesis.speak(utterance);
-            }
-        }
-        // Game Logic
-        function startGame() {
-            currentIndex = 0;
-            isGameActive = true;
-            // UI Transitions
-            startScreen.style.display = 'none';
-            endScreen.style.display = 'none';
-            gameArea.style.display = 'flex';
-            updateLevel();
         }
-        function updateLevel() {
-            if (currentIndex >= alphabet.length) {
-                endGame();
-                return;
-            }
-            const currentLetter = alphabet[currentIndex];
-            // Reset Animations
-            letterDisplay.classList.remove('anim-pop', 'anim-shake');
-            void letterDisplay.offsetWidth; // Trigger reflow to restart animation
-            letterDisplay.classList.add('anim-pop');
-            // Update Text
-            letterDisplay.textContent = currentLetter;
-            statusText.textContent = `Press the '${currentLetter}' key!`;
-            // Hide Image initially
-            imageContainer.classList.remove('visible');
-            // Update Progress
-            const progress = (currentIndex / alphabet.length) * 100;
-            progressBar.style.width = `${progress}%`;
-            // Speak the letter immediately when level starts
-            speakLetter(currentLetter);
-        }
-        function handleInput(e) {
-            if (!isGameActive) return;
-            const key = e.key.toUpperCase();
-            const targetLetter = alphabet[currentIndex];
-            // Check if the key pressed is a letter
-            if (!/^[A-Z]$/.test(key)) return;
-            if (key === targetLetter) {
-                // Correct Answer
-                onCorrectPress(targetLetter);
-            } else {
-                // Wrong Answer
-                onWrongPress();
-            }
-        }
-        function onCorrectPress(letter) {
-            // Play sound again for confirmation
-            speakLetter(letter);
-            // Show Image
-            const imgUrl = getRandomImageForLetter(letter);
-            letterImage.src = imgUrl;
-            // Wait for image to load slightly before showing to prevent flicker
-            letterImage.onload = () => {
-                imageContainer.classList.add('visible');
-            };
-            if(letterImage.complete) imageContainer.classList.add('visible');
-            // Visual feedback on text
-            letterDisplay.style.color = "var(--accent-color)";
-            statusText.textContent = "Great!";
-            statusText.style.color = "var(--accent-color)";
-            // Trigger small confetti
-            fireConfetti(0.5); // 50% screen width
-            // Wait 1.5 seconds then go to next letter
-            setTimeout(() => {
-                currentIndex++;
-                letterDisplay.style.color = "var(--primary-color)";
-                statusText.style.color = "#636e72";
-                updateLevel();
-            }, 1500);
-        }
-        function onWrongPress() {
-            // Shake animation
-            letterDisplay.classList.remove('anim-shake');
-            void letterDisplay.offsetWidth;
-            letterDisplay.classList.add('anim-shake');
-            statusText.textContent = "Oops, try again!";
-            statusText.style.color = "var(--secondary-color)";
-            // Play error sound (using speech synthesis for a low 'uh-oh' or just re-prompting target)
-            // For simplicity, we just re-speak the target letter
-            speakLetter(alphabet[currentIndex]);
         }
-        function endGame() {
-            isGameActive = false;
-            gameArea.style.display = 'none';
-            endScreen.style.display = 'block';
-            progressBar.style.width = '100%';
-            fireConfetti(1.0); // Full screen confetti
-        }
-        // Event Listeners
-        window.addEventListener('keydown', handleInput);
-        // --- Simple Confetti Implementation (No external library) ---
-        const canvas = document.getElementById('confetti-canvas');
-        const ctx = canvas.getContext('2d');
-        let particles = [];
-        function resizeCanvas() {
-            canvas.width = window.innerWidth;
-            canvas.height = window.innerHeight;
-        }
-        window.addEventListener('resize', resizeCanvas);
-        resizeCanvas();
-        function fireConfetti(intensity = 1.0) {
-            const particleCount = 100 * intensity;
-            const colors = ['#FF6584', '#6C63FF', '#43D9AD', '#FFD93D', '#FF8C00'];
-            for (let i = 0; i < particleCount; i++) {
-                particles.push({
-                    x: canvas.width / 2,
-                    y: canvas.height / 2 + 50, // Start from middle-ish
-                    vx: (Math.random() - 0.5) * 20 * intensity,
-                    vy: (Math.random() - 1) * 20 * intensity,
-                    size: Math.random() * 8 + 4,
-                    color: colors[Math.floor(Math.random() * colors.length)],
-                    life: 100,
-                    gravity: 0.5
-                });
-            }
-            requestAnimationFrame(updateConfetti);
         }
-        function updateConfetti() {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            for (let i = 0; i < particles.length; i++) {
-                let p = particles[i];
-                p.x += p.vx;
-                p.y += p.vy;
-                p.vy += p.gravity;
-                p.life--;
-                ctx.fillStyle = p.color;
-                ctx.beginPath();
-                ctx.rect(p.x, p.y, p.size, p.size);
-                ctx.fill();
-            }
-            // Remove dead particles
-            particles = particles.filter(p => p.life > 0);
-            if (particles.length > 0) {
-                requestAnimationFrame(updateConfetti);
-            }
         }
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AlphaPop & Chat - Interactive Learning</title>
+  <!-- Import Google Fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Nunito:wght@400;700&display=swap"
+    rel="stylesheet">
+  <!-- FontAwesome for Icons -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <style>
+    :root {
+      --primary-color: #6C63FF;
+      --secondary-color: #FF6584;
+      --accent-color: #43D9AD;
+      --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+      --glass-bg: rgba(255, 255, 255, 0.9);
+      --glass-border: rgba(255, 255, 255, 0.5);
+      --text-dark: #2D3436;
+      --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
+      --chat-bg: #ffffff;
+    }
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+    body {
+      font-family: 'Nunito', sans-serif;
+      background: var(--bg-gradient);
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      color: var(--text-dark);
+    }
+    /* Header Section */
+    header {
+      padding: 1rem 2rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: rgba(255, 255, 255, 0.95);
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+      z-index: 100;
+    }
+    .logo {
+      font-family: 'Fredoka', sans-serif;
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: var(--primary-color);
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .header-actions {
+      display: flex;
+      gap: 15px;
+      align-items: center;
+    }
+    .chat-trigger {
+      background: var(--primary-color);
+      color: white;
+      border: none;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transition: transform 0.2s;
+      box-shadow: 0 4px 10px rgba(108, 99, 255, 0.3);
+    }
+    .chat-trigger:hover {
+      transform: scale(1.1);
+    }
+    .anycoder-link {
+      font-size: 0.9rem;
+      font-weight: 600;
+      color: var(--text-dark);
+      text-decoration: none;
+      padding: 0.5rem 1rem;
+      background: #f0f0f0;
+      border-radius: 20px;
+      transition: all 0.3s ease;
+    }
+    .anycoder-link:hover {
+      background: var(--primary-color);
+      color: white;
+      transform: translateY(-2px);
+    }
+    /* Main Game Area */
+    main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      padding: 1rem;
+    }
+    /* Game Container */
+    .game-board {
+      background: var(--glass-bg);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      border: 1px solid var(--glass-border);
+      border-radius: 30px;
+      padding: 2rem;
+      width: 90%;
+      max-width: 600px;
+      box-shadow: var(--shadow-lg);
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-height: 500px;
+      justify-content: space-between;
+      transition: transform 0.3s ease, filter 0.3s ease;
+    }
+    .game-board.blurred {
+      filter: blur(5px);
+      pointer-events: none;
+    }
+    /* Progress Bar */
+    .progress-container {
+      width: 100%;
+      height: 10px;
+      background: #e0e0e0;
+      border-radius: 10px;
+      margin-bottom: 2rem;
+      overflow: hidden;
+    }
+    .progress-bar {
+      height: 100%;
+      width: 0%;
+      background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
+      border-radius: 10px;
+      transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+    /* Letter Display */
+    .letter-display {
+      font-family: 'Fredoka', sans-serif;
+      font-size: 10rem;
+      font-weight: 700;
+      color: var(--primary-color);
+      text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
+      cursor: default;
+      user-select: none;
+      position: relative;
+      z-index: 2;
+      transition: color 0.3s;
+    }
+    /* Image Container */
+    .image-container {
+      width: 180px;
+      height: 180px;
+      border-radius: 20px;
+      overflow: hidden;
+      background: #fff;
+      box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
+      border: 4px solid white;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      opacity: 0;
+      transform: scale(0.8);
+      transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+      margin-top: 1rem;
+    }
+    .image-container.visible {
+      opacity: 1;
+      transform: scale(1);
+    }
+    .image-container img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    /* Status Text */
+    .status-text {
+      font-size: 1.2rem;
+      color: #636e72;
+      margin-top: 1rem;
+      font-weight: 600;
+    }
+    .hint-text {
+      font-size: 0.9rem;
+      color: #b2bec3;
+      margin-top: 0.5rem;
+    }
+    /* Buttons */
+    .controls {
+      margin-top: 2rem;
+    }
+    .btn {
+      background: var(--primary-color);
+      color: white;
+      border: none;
+      padding: 1rem 2.5rem;
+      font-size: 1.2rem;
+      border-radius: 50px;
+      cursor: pointer;
+      font-family: 'Fredoka', sans-serif;
+      box-shadow: 0 5px 15px rgba(108, 99, 255, 0.4);
+      transition: all 0.2s ease;
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .btn:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 8px 20px rgba(108, 99, 255, 0.5);
+    }
+    .btn:active {
+      transform: translateY(1px);
+    }
+    /* --- CHAT UI STYLES --- */
+    .chat-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.4);
+      z-index: 200;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.3s ease;
+    }
+    .chat-overlay.active {
+      opacity: 1;
+      visibility: visible;
+    }
+    .chat-window {
+      width: 90%;
+      max-width: 500px;
+      height: 70vh;
+      background: white;
+      border-radius: 20px;
+      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      transform: translateY(50px);
+      transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    }
+    .chat-overlay.active .chat-window {
+      transform: translateY(0);
+    }
+    .chat-header {
+      background: var(--primary-color);
+      color: white;
+      padding: 1rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .chat-header h3 {
+      font-family: 'Fredoka', sans-serif;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .close-chat {
+      background: none;
+      border: none;
+      color: white;
+      font-size: 1.2rem;
+      cursor: pointer;
+      opacity: 0.8;
+    }
+    .close-chat:hover {
+      opacity: 1;
+    }
+    .chat-messages {
+      flex: 1;
+      padding: 1rem;
+      overflow-y: auto;
+      background: #f9f9f9;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+    .message {
+      max-width: 80%;
+      padding: 10px 15px;
+      border-radius: 15px;
+      font-size: 0.95rem;
+      line-height: 1.4;
+      position: relative;
+      animation: slideUp 0.3s ease;
+    }
+    @keyframes slideUp {
+      from { transform: translateY(10px); opacity: 0; }
+      to { transform: translateY(0); opacity: 1; }
+    }
+    .message.bot {
+      background: white;
+      color: var(--text-dark);
+      border-bottom-left-radius: 2px;
+      align-self: flex-start;
+      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+    }
+    .message.user {
+      background: var(--primary-color);
+      color: white;
+      border-bottom-right-radius: 2px;
+      align-self: flex-end;
+      box-shadow: 0 2px 5px rgba(108, 99, 255, 0.2);
+    }
+    .chat-input-area {
+      padding: 1rem;
+      background: white;
+      border-top: 1px solid #eee;
+      display: flex;
+      gap: 10px;
+    }
+    .chat-input-area input {
+      flex: 1;
+      padding: 10px 15px;
+      border: 2px solid #eee;
+      border-radius: 25px;
+      outline: none;
+      font-family: 'Nunito', sans-serif;
+      transition: border-color 0.2s;
+    }
+    .chat-input-area input:focus {
+      border-color: var(--primary-color);
+    }
+    .send-btn {
+      background: var(--primary-color);
+      color: white;
+      border: none;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transition: background 0.2s;
+    }
+    .send-btn:hover {
+      background: var(--secondary-color);
+    }
+    /* Animations */
+    @keyframes popIn {
+      0% { transform: scale(0); opacity: 0; }
+      60% { transform: scale(1.2); opacity: 1; }
+      100% { transform: scale(1); opacity: 1; }
+    }
+    @keyframes shake {
+      0%, 100% { transform: translateX(0); }
+      25% { transform: translateX(-10px) rotate(-5deg); color: var(--secondary-color); }
+      75% { transform: translateX(10px) rotate(5deg); color: var(--secondary-color); }
+    }
+    @keyframes float {
+      0%, 100% { transform: translateY(0px); }
+      50% { transform: translateY(-10px); }
+    }
+    .anim-pop { animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
+    .anim-shake { animation: shake 0.4s ease-in-out; }
+    .anim-float { animation: float 3s ease-in-out infinite; }
+    /* Confetti Canvas */
+    #confetti-canvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 50;
+    }
+    /* Responsive */
+    @media (max-width: 768px) {
+      .letter-display { font-size: 7rem; }
+      .game-board { width: 95%; padding: 1.5rem; }
+      .image-container { width: 140px; height: 140px; }
+    }
+    @media (max-width: 480px) {
+      .letter-display { font-size: 5rem; }
+      .header-actions .anycoder-link span { display: none; }
+      .header-actions .anycoder-link { padding: 0.5rem; }
+    }
+  </style>
 </head>
 <body>
+  <header>
+    <div class="logo">
+      <i class="fa-solid fa-shapes"></i>
+      <span>AlphaPop</span>
+    </div>
+    <div class="header-actions">
+      <button class="chat-trigger" onclick="toggleChat()" title="Talk to me">
+        <i class="fa-solid fa-comment-dots"></i>
+      </button>
+      <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+        <span>Built with anycoder</span>
+      </a>
+    </div>
+  </header>
+  <main>
+    <canvas id="confetti-canvas"></canvas>
+    <div class="game-board" id="gameBoard">
+      <!-- Progress -->
+      <div class="progress-container">
+        <div class="progress-bar" id="progressBar"></div>
+      </div>
+      <!-- Game Area -->
+      <div id="gameArea" style="display: none; flex-direction: column; align-items: center; width: 100%;">
+        <div class="letter-display anim-pop" id="letterDisplay">A</div>
+        <div class="image-container" id="imageContainer">
+          <img id="letterImage" src="" alt="Letter Image">
         </div>
+        <div class="status-text" id="statusText">Press the 'A' key!</div>
+        <div class="hint-text"><i class="fa-solid fa-volume-high"></i> Sound On</div>
+      </div>
+      <!-- Start Screen -->
+      <div id="startScreen" style="text-align: center;">
+        <div class="logo" style="justify-content: center; font-size: 3rem; margin-bottom: 1rem; color: var(--primary-color);">
+          <i class="fa-solid fa-keyboard"></i>
         </div>
+        <h2 style="margin-bottom: 1rem; font-size: 1.8rem;">Ready to type?</h2>
+        <p style="margin-bottom: 2rem; color: #636e72;">Press the matching key to hear the sound and see the picture!</p>
+        <button class="btn" onclick="startGame()">Start Game <i class="fa-solid fa-play"></i></button>
+        <div style="margin-top: 10px;">
+            <button class="btn" style="background: transparent; color: var(--primary-color); box-shadow: none; border: 2px solid var(--primary-color); font-size: 1rem; padding: 0.8rem 1.5rem;" onclick="toggleChat()">
+                <i class="fa-solid fa-comments"></i> Talk to Me First
+            </button>
+        </div>
+      </div>
+      <!-- End Screen -->
+      <div id="endScreen" style="display: none; text-align: center;">
+        <i class="fa-solid fa-trophy" style="font-size: 4rem; color: #f1c40f; margin-bottom: 1rem; animation: float 2s infinite;"></i>
+        <h2 style="margin-bottom: 1rem; font-size: 2rem;">Great Job!</h2>
+        <p style="margin-bottom: 2rem; color: #636e72;">You completed the alphabet.</p>
+        <button class="btn" onclick="startGame()">Play Again <i class="fa-solid fa-rotate-right"></i></button>
+      </div>
+    </div>
+  </main>
+  <!-- Chat Interface Overlay -->
+  <div class="chat-overlay" id="chatOverlay">
+    <div class="chat-window">
+      <div class="chat-header">
+        <h3><i class="fa-solid fa-robot"></i> AlphaBot</h3>
+        <button class="close-chat" onclick="toggleChat()"><i class="fa-solid fa-xmark"></i></button>
+      </div>
+      <div class="chat-messages" id="chatMessages">
+        <div class="message bot">Hello! I'm AlphaBot. I can talk to you! Try saying "Hello" or ask me about the game.</div>
+      </div>
+      <div class="chat-input-area">
+        <input type="text" id="chatInput" placeholder="Type a message..." onkeypress="handleChatEnter(event)">
+        <button class="send-btn" onclick="sendMessage()"><i class="fa-solid fa-paper-plane"></i></button>
+      </div>
+    </div>
+  </div>
+  <script>
+    // --- Game Configuration & State ---
+    const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split('');
+    let currentIndex = 0;
+    let isGameActive = false;
+    let isChatOpen = false;
+    // DOM Elements
+    const startScreen = document.getElementById('startScreen');
+    const endScreen = document.getElementById('endScreen');
+    const gameArea = document.getElementById('gameArea');
+    const gameBoard = document.getElementById('gameBoard');
+    const letterDisplay = document.getElementById('letterDisplay');
+    const statusText = document.getElementById('statusText');
+    const imageContainer = document.getElementById('imageContainer');
+    const letterImage = document.getElementById('letterImage');
+    const progressBar = document.getElementById('progressBar');
+    // Chat Elements
+    const chatOverlay = document.getElementById('chatOverlay');
+    const chatMessages = document.getElementById('chatMessages');
+    const chatInput = document.getElementById('chatInput');
+    // --- Chat Logic ---
+    function toggleChat() {
+        isChatOpen = !isChatOpen;
+        if (isChatOpen) {
+            chatOverlay.classList.add('active');
+            gameBoard.classList.add('blurred');
+            chatInput.focus();
+        } else {
+            chatOverlay.classList.remove('active');
+            gameBoard.classList.remove('blurred');
+            // Return focus to game if active
+            if(isGameActive) gameBoard.focus();
+        }
+    }
+    function handleChatEnter(e) {
+        if (e.key === 'Enter') sendMessage();
+    }
+    function sendMessage() {
+        const text = chatInput.value.trim();
+        if (!text) return;
+        // Add User Message
+        addMessage(text, 'user');
+        chatInput.value = '';
+        // Generate Bot Response
+        const reply = getBotResponse(text);
+        // Simulate typing delay
+        setTimeout(() => {
+            addMessage(reply, 'bot');
+            speakText(reply); // Speak the reply
+        }, 600);
+    }
+    function addMessage(text, sender) {
+        const div = document.createElement('div');
+        div.className = `message ${sender}`;
+        div.textContent = text;
+        chatMessages.appendChild(div);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+    }
+    function getBotResponse(input) {
+        const lower = input.toLowerCase();
+        if (lower.includes('hello') || lower.includes('hi')) {
+            return "Hi there! Are you ready to learn the alphabet?";
+        } else if (lower.includes('play') || lower.includes('game')) {
+            return "Close this chat and click 'Start Game' to begin! You can also type letters like 'A' or 'B' here to hear them.";
+        } else if (lower.includes('name')) {
+            return "I am AlphaBot, your friendly coding assistant.";
+        } else if (lower.includes('help')) {
+            return "I can help you practice letters. Just type a letter, or close the chat to play the typing game.";
+        } else if (/^[a-z]$/.test(lower)) {
+            // If user types a single letter
+            return `You typed ${input.toUpperCase()}. Good job!`;
+        } else {
+            const randomReplies = [
+                "That's interesting!",
+                "Tell me more!",
+                "I'm listening.",
+                "Can you teach me a new word?",
+                "Let's get back to learning soon!"
+            ];
+            return randomReplies[Math.floor(Math.random() * randomReplies.length)];
+        }
+    }
+    // --- Speech Synthesis (Shared) ---
+    function speakText(text) {
+        if ('speechSynthesis' in window) {
+            window.speechSynthesis.cancel();
+            const utterance = new SpeechSynthesisUtterance(text);
+            utterance.lang = 'en-US';
+            utterance.rate = 1.0;
+            utterance.pitch = 1.0;
+            window.speechSynthesis.speak(utterance);
+        }
+    }
+    function speakLetter(letter) {
+        speakText(letter); // Reuse the main speak function
+    }
+    // --- Game Logic ---
+    function startGame() {
+        currentIndex = 0;
+        isGameActive = true;
+        startScreen.style.display = 'none';
+        endScreen.style.display = 'none';
+        gameArea.style.display = 'flex';
+        // Close chat if open
+        if(isChatOpen) toggleChat();
+        updateLevel();
+    }
+    function updateLevel() {
+        if (currentIndex >= alphabet.length) {
+            endGame();
+            return;
         }
+        const currentLetter = alphabet[currentIndex];
+        // Reset Animations
+        letterDisplay.classList.remove('anim-pop', 'anim-shake');
+        void letterDisplay.offsetWidth;
+        letterDisplay.classList.add('anim-pop');
+        letterDisplay.textContent = currentLetter;
+        statusText.textContent = `Press the '${currentLetter}' key!`;
+        imageContainer.classList.remove('visible');
+        const progress = (currentIndex / alphabet.length) * 100;
+        progressBar.style.width = `${progress}%`;
+        speakLetter(currentLetter);
+    }
+    function handleInput(e) {
+        // If chat is open, don't process game keys
+        if (isChatOpen) return;
+        if (!isGameActive) return;
+        const key = e.key.toUpperCase();
+        const targetLetter = alphabet[currentIndex];
+        if (!/^[A-Z]$/.test(key)) return;
+        if (key === targetLetter) {
+            onCorrectPress(targetLetter);
+        } else {
+            onWrongPress();
         }
+    }
+    function onCorrectPress(letter) {
+        speakLetter(letter);
+        // Random Image Placeholder
+        const randomId = Math.floor(Math.random() * 1000);
+        const imgUrl = `https://picsum.photos/seed/${letter}${randomId}/300/300`;
+        letterImage.src = imgUrl;
+        letterImage.onload = () => {
+            imageContainer.classList.add('visible');
+        };
+        if(letterImage.complete) imageContainer.classList.add('visible');
+        letterDisplay.style.color = "var(--accent-color)";
+        statusText.textContent = "Great!";
+        statusText.style.color = "var(--accent-color)";
+        fireConfetti(0.5);
+        setTimeout(() => {
+            currentIndex++;
+            letterDisplay.style.color = "var(--primary-color)";
+            statusText.style.color = "#636e72";
+            updateLevel();
+        }, 1500);
+    }
+    function onWrongPress() {
+        letterDisplay.classList.remove('anim-shake');
+        void letterDisplay.offsetWidth;
+        letterDisplay.classList.add('anim-shake');
+        statusText.textContent = "Oops, try again!";
+        statusText.style.color = "var(--secondary-color)";
+        speakLetter(alphabet[currentIndex]);
+    }
+    function endGame() {
+        isGameActive = false;
+        gameArea.style.display = 'none';
+        endScreen.style.display = 'block';
+        progressBar.style.width = '100%';
+        fireConfetti(1.0);
+        speakText("Great job! You finished the game!");
+    }
+    // Event Listeners
+    window.addEventListener('keydown', handleInput);
+    // --- Confetti Logic ---
+    const canvas = document.getElementById('confetti-canvas');
+    const ctx = canvas.getContext('2d');
+    let particles = [];
+    function resizeCanvas() {
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+    }
+    window.addEventListener('resize', resizeCanvas);
+    resizeCanvas();
+    function fireConfetti(intensity = 1.0) {
+        const particleCount = 100 * intensity;
+        const colors = ['#FF6584', '#6C63FF', '#43D9AD', '#FFD93D', '#FF8C00'];
+        for (let i = 0; i < particleCount; i++) {
+            particles.push({
+                x: canvas.width / 2,
+                y: canvas.height / 2 + 50,
+                vx: (Math.random() - 0.5) * 20 * intensity,
+                vy: (Math.random() - 1) * 20 * intensity,
+                size: Math.random() * 8 + 4,
+                color: colors[Math.floor(Math.random() * colors.length)],
+                life: 100,
+                gravity: 0.5
+            });
+        }
+        if(particles.length <= particleCount) requestAnimationFrame(updateConfetti);
+    }
+    function updateConfetti() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        for (let i = 0; i < particles.length; i++) {
+            let p = particles[i];
+            p.x += p.vx;
+            p.y += p.vy;
+            p.vy += p.gravity;
+            p.life--;
+            ctx.fillStyle = p.color;
+            ctx.beginPath();
+            ctx.rect(p.x, p.y, p.size, p.size);
+            ctx.fill();
         }
+        particles = particles.filter(p => p.life > 0);
+        if (particles.length > 0) {
+            requestAnimationFrame(updateConfetti);
         }
+    }
+  </script>
 </body>
 </html>