Spaces:

mlmihjaz
/

anycoder-b4b3fbe5

Running

App Files Files Community

mlmihjaz commited on Jan 19

Commit

4796a88

verified ·

1 Parent(s): de31d03

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +581 -19

index.html CHANGED Viewed

@@ -1,19 +1,581 @@
-<!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>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>