Spaces:
Running
Running
Download index.html from davklanton/undefined: direct link, hf CLI and curl.
- Browser
- Download file 30.4 kB
-
https://huggingface.co/spaces/davklanton/undefined/resolve/main/index.html
- Command line
-
hf download hf://spaces/davklanton/undefined/index.html
-
curl -L -o index.html https://huggingface.co/spaces/davklanton/undefined/resolve/main/index.html
30.4 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Akomapp A1 - Play, Learn & Shine!</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Nunito:wght@400;700;800&display=swap'); | |
| * { | |
| font-family: 'Nunito', 'Comic Neue', cursive; | |
| } | |
| .bubble-animation { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .confetti { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| background-color: #f0f; | |
| opacity: 0.7; | |
| } | |
| .star-reward { | |
| animation: twinkle 1.5s ease-in-out infinite; | |
| } | |
| @keyframes twinkle { | |
| 0%, 100% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: 0.7; transform: scale(1.1); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-yellow-50 via-pink-50 to-blue-50 min-h-screen"> | |
| <!-- Splash Screen --> | |
| <div id="splash" class="fixed inset-0 bg-gradient-to-br from-blue-400 to-purple-400 flex flex-col items-center justify-center z-50 transition-opacity duration-1000"> | |
| <div class="bubble-animation"> | |
| <div class="bg-white rounded-full p-6 shadow-2xl mb-4"> | |
| <img src="http://static.photos/education/320x240/1" alt="Learning Mascot" class="w-32 h-32 rounded-full"> | |
| </div> | |
| </div> | |
| <h1 class="text-4xl font-bold text-white text-center mb-2">Akomapp A1</h1> | |
| <p class="text-white text-lg opacity-90 mt-2">Play, Learn & Shine! 🌟</p> | |
| <div class="mt-8 flex space-x-2"> | |
| <div class="w-3 h-3 bg-yellow-300 rounded-full animate-pulse"></div> | |
| <div class="w-3 h-3 bg-pink-300 rounded-full animate-pulse" style="animation-delay: 0.2s"></div> | |
| <div class="w-3 h-3 bg-green-300 rounded-full animate-pulse" style="animation-delay: 0.4s"></div> | |
| </div> | |
| </div> | |
| <!-- Home Screen --> | |
| <div id="home" class="hidden min-h-screen p-6"> | |
| <!-- Header --> | |
| <header class="text-center mb-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <button id="parentBtn" class="bg-gray-200 hover:bg-gray-300 rounded-full p-2 transition-colors"> | |
| <i data-feather="settings"></i> | |
| </button> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-sm font-semibold">EN</span> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" id="languageToggle" class="sr-only peer"> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-400"></div> | |
| </label> | |
| <span class="text-sm font-semibold">FR</span> | |
| </div> | |
| </div> | |
| <div class="bubble-animation inline-block"> | |
| <img src="http://static.photos/education/200x200/2" alt="Mascot" class="w-24 h-24 rounded-full border-4 border-yellow-300 shadow-lg"> | |
| </div> | |
| <h1 class="text-3xl font-bold text-blue-600 mt-4">Hello Friend! 👋</h1> | |
| <p class="text-gray-600 mt-2">Let's learn something amazing today!</p> | |
| </header> | |
| <!-- Main Navigation --> | |
| <main class="grid grid-cols-2 gap-4 max-w-md mx-auto"> | |
| <a href="akomapp-home.html" class="bg-gradient-to-r from-blue-400 to-purple-400 hover:from-blue-500 hover:to-purple-500 text-white rounded-2xl p-6 flex flex-col items-center justify-center shadow-lg transition-all duration-300 transform hover:scale-105"> | |
| <div class="text-4xl mb-2">🔠</div> | |
| <span class="font-bold text-lg">Learn Alphabet</span> | |
| </a> | |
| <a href="numbers.html" class="bg-gradient-to-r from-green-400 to-teal-400 hover:from-green-500 hover:to-teal-500 text-white rounded-2xl p-6 flex flex-col items-center justify-center shadow-lg transition-all duration-300 transform hover:scale-105"> | |
| <div class="text-4xl mb-2">🔢</div> | |
| <span class="font-bold text-lg">Learn Numbers</span> | |
| </a> | |
| <a href="colors.html" class="bg-gradient-to-r from-pink-400 to-red-400 hover:from-pink-500 hover:to-red-500 text-white rounded-2xl p-6 flex flex-col items-center justify-center shadow-lg transition-all duration-300 transform hover:scale-105"> | |
| <div class="text-4xl mb-2">🎨</div> | |
| <span class="font-bold text-lg">Learn Colors</span> | |
| </a> | |
| <a href="shapes.html" class="bg-gradient-to-r from-yellow-400 to-orange-400 hover:from-yellow-500 hover:to-orange-500 text-white rounded-2xl p-6 flex flex-col items-center justify-center shadow-lg transition-all duration-300 transform hover:scale-105"> | |
| <div class="text-4xl mb-2">🟢</div> | |
| <span class="font-bold text-lg">Learn Shapes</span> | |
| </a> | |
| </main> | |
| <!-- Progress Section --> | |
| <div class="mt-8 bg-white rounded-2xl p-4 shadow-lg max-w-md mx-auto"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="font-bold text-gray-700">Your Learning Progress 🌟</h3> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between text-sm"> | |
| <span>Alphabet</span> | |
| <span id="alphabetProgress">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div id="alphabetBar" class="bg-gradient-to-r from-blue-400 to-purple-400 h-2 rounded-full" style="width: 0%"></div> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span>Numbers</span> | |
| <span id="numbersProgress">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div id="numbersBar" class="bg-gradient-to-r from-green-400 to-teal-400 h-2 rounded-full" style="width: 0%"></div> | |
| </div> | |
| <div class="mt-3 pt-3 border-t border-gray-100"> | |
| <div class="flex justify-between text-sm"> | |
| <span>Overall</span> | |
| <span id="overallProgress">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div id="overallBar" class="bg-gradient-to-r from-yellow-400 to-orange-400 h-2 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Alphabet Section --> | |
| <div id="alphabet" class="hidden min-h-screen p-6 bg-gradient-to-br from-blue-50 to-purple-50"> | |
| <button onclick="showSection('home')" class="mb-4 bg-white rounded-full p-2 shadow-md hover:shadow-lg transition-shadow"> | |
| <i data-feather="arrow-left"></i> | |
| </button> | |
| <div class="text-center mb-6"> | |
| <h2 class="text-3xl font-bold text-blue-600">Learn Alphabet 🔠</h2> | |
| <p class="text-gray-600">Swipe to explore letters A to Z!</p> | |
| </div> | |
| <div class="bg-white rounded-3xl shadow-2xl p-8 max-w-sm mx-auto"> | |
| <div id="letterDisplay" class="text-center"> | |
| <div class="text-8xl font-bold text-blue-500 mb-4">A</div> | |
| <div class="text-2xl text-gray-600 mb-2">a</div> | |
| <img src="http://static.photos/food/200x200/1" alt="Apple" class="w-32 h-32 mx-auto rounded-2xl mb-4"> | |
| <button onclick="playSound('A')" class="bg-blue-400 hover:bg-blue-500 text-white rounded-full p-4 transition-colors"> | |
| <i data-feather="volume-2"></i> | |
| </button> | |
| <p class="text-xl font-semibold text-gray-700 mt-4">Apple 🍎</p> | |
| </div> | |
| <div class="flex justify-between mt-6"> | |
| <button onclick="prevLetter()" class="bg-gray-200 hover:bg-gray-300 rounded-full p-3 transition-colors"> | |
| <i data-feather="chevron-left"></i> | |
| </button> | |
| <button onclick="nextLetter()" class="bg-gray-200 hover:bg-gray-300 rounded-full p-3 transition-colors"> | |
| <i data-feather="chevron-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-center space-x-2"> | |
| <div id="star1" class="text-gray-300 text-xl">⭐</div> | |
| <div id="star2" class="text-gray-300 text-xl">⭐</div> | |
| <div id="star3" class="text-gray-300 text-xl">⭐</div> | |
| </div> | |
| </div> | |
| <!-- Numbers Section --> | |
| <div id="numbers" class="hidden min-h-screen p-6 bg-gradient-to-br from-green-50 to-blue-50"> | |
| <button onclick="showSection('home')" class="mb-4 bg-white rounded-full p-2 shadow-md hover:shadow-lg transition-shadow"> | |
| <i data-feather="arrow-left"></i> | |
| </button> | |
| <div class="text-center mb-6"> | |
| <h2 class="text-3xl font-bold text-green-600">Learn Numbers 🔢</h2> | |
| <p class="text-gray-600">Count from 1 to 20!</p> | |
| </div> | |
| <div class="bg-white rounded-3xl shadow-2xl p-8 max-w-sm mx-auto"> | |
| <div id="numberDisplay" class="text-center"> | |
| <div class="text-8xl font-bold text-green-500 mb-4">1</div> | |
| <div class="text-2xl text-gray-600 mb-2">one</div> | |
| <div class="flex justify-center space-x-2 mb-4"> | |
| <div class="w-8 h-8 bg-red-400 rounded-full"></div> | |
| </div> | |
| <button onclick="playNumberSound(1)" class="bg-green-400 hover:bg-green-500 text-white rounded-full p-4 transition-colors"> | |
| <i data-feather="volume-2"></i> | |
| </button> | |
| <p class="text-xl font-semibold text-gray-700 mt-4">One Apple 🍎</p> | |
| </div> | |
| <div class="flex justify-between mt-6"> | |
| <button onclick="prevNumber()" class="bg-gray-200 hover:bg-gray-300 rounded-full p-3 transition-colors"> | |
| <i data-feather="chevron-left"></i> | |
| </button> | |
| <button onclick="nextNumber()" class="bg-gray-200 hover:bg-gray-300 rounded-full p-3 transition-colors"> | |
| <i data-feather="chevron-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <div id="completionMessage" class="hidden bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded-2xl"> | |
| 🎉 You did it! Great job! 🎉 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Games Section --> | |
| <div id="games" class="hidden min-h-screen p-6 bg-gradient-to-br from-yellow-50 to-orange-50"> | |
| <button onclick="showSection('home')" class="mb-4 bg-white rounded-full p-2 shadow-md hover:shadow-lg transition-shadow"> | |
| <i data-feather="arrow-left"></i> | |
| </button> | |
| <div class="text-center mb-6"> | |
| <h2 class="text-3xl font-bold text-yellow-600">Play & Practice 🎮</h2> | |
| <p class="text-gray-600">Fun games to learn!</p> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 max-w-md mx-auto"> | |
| <button onclick="startGame('letterMatch')" class="bg-blue-400 hover:bg-blue-500 text-white rounded-2xl p-4 flex flex-col items-center justify-center shadow-lg transition-all duration-300 transform hover:scale-105"> | |
| <div class="text-3xl mb-2">🔤</div> | |
| <span class="font-bold text-center">Letter Match</span> | |
| </button> | |
| <button onclick="startGame('numberCount')" class="bg-green-400 hover:bg-green-500 text-white rounded-2xl p-4 flex flex-col items-center justify-center shadow-lg transition-all duration-300 transform hover:scale-105"> | |
| <div class="text-3xl mb-2">🧮</div> | |
| <span class="font-bold text-center">Number Counting</span> | |
| </button> | |
| <button onclick="startGame('alphabetPuzzle')" class="bg-purple-400 hover:bg-purple-500 text-white rounded-2xl p-4 flex flex-col items-center justify-center shadow-lg transition-all duration-300 transform hover:scale-105"> | |
| <div class="text-3xl mb-2">🧩</div> | |
| <span class="font-bold text-center">Alphabet Puzzle</span> | |
| </button> | |
| <button onclick="startGame('numberChase')" class="bg-red-400 hover:bg-red-500 text-white rounded-2xl p-4 flex flex-col items-center justify-center shadow-lg transition-all duration-300 transform hover:scale-105"> | |
| <div class="text-3xl mb-2">🏃</div> | |
| <span class="font-bold text-center">Number Chase</span> | |
| </button> | |
| </div> | |
| <div id="gameArea" class="mt-6 bg-white rounded-3xl shadow-2xl p-6 max-w-md mx-auto hidden"> | |
| <div id="gameContent" class="text-center"> | |
| <!-- Game content will be loaded here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Songs Section --> | |
| <div id="songs" class="hidden min-h-screen p-6 bg-gradient-to-br from-pink-50 to-purple-50"> | |
| <button onclick="showSection('home')" class="mb-4 bg-white rounded-full p-2 shadow-md hover:shadow-lg transition-shadow"> | |
| <i data-feather="arrow-left"></i> | |
| </button> | |
| <div class="text-center mb-6"> | |
| <h2 class="text-3xl font-bold text-pink-600">Songs & Rhymes 🎵</h2> | |
| <p class="text-gray-600">Sing along and learn!</p> | |
| </div> | |
| <div class="max-w-md mx-auto space-y-4"> | |
| <button onclick="playSong('abc')" class="bg-white hover:bg-gray-50 rounded-2xl p-4 shadow-lg transition-all duration-300 transform hover:scale-105 w-full text-left"> | |
| <div class="flex items-center"> | |
| <div class="text-3xl mr-4">🎶</div> | |
| <div> | |
| <h3 class="font-bold text-gray-700">ABC Song</h3> | |
| <p class="text-sm text-gray-500">Learn the alphabet with music!</p> | |
| </div> | |
| </button> | |
| <button onclick="playSong('counting')" class="bg-white hover:bg-gray-50 rounded-2xl p-4 shadow-lg transition-all duration-300 transform hover:scale-105 w-full text-left"> | |
| <div class="flex items-center"> | |
| <div class="text-3xl mr-4">🎵</div> | |
| <div> | |
| <h3 class="font-bold text-gray-700">Count 1 to 20</h3> | |
| <p class="text-sm text-gray-500">Counting made fun!</p> | |
| </div> | |
| </div> | |
| </button> | |
| <button onclick="playSong('days')" class="bg-white hover:bg-gray-50 rounded-2xl p-4 shadow-lg transition-all duration-300 transform hover:scale-105 w-full text-left"> | |
| <div class="flex items-center"> | |
| <div class="text-3xl mr-4">📅</div> | |
| <div> | |
| <h3 class="font-bold text-gray-700">Days of the Week</h3> | |
| <p class="text-sm text-gray-500">Learn the days!</p> | |
| </div> | |
| </button> | |
| </div> | |
| <div id="songPlayer" class="mt-6 bg-white rounded-3xl shadow-2xl p-6 max-w-md mx-auto hidden"> | |
| <div id="lyrics" class="text-center mb-4"> | |
| <p class="text-lg font-semibold text-gray-700">A B C D E F G...</p> | |
| </div> | |
| <div class="flex justify-center space-x-4"> | |
| <button onclick="pauseSong()" class="bg-pink-400 hover:bg-pink-500 text-white rounded-full p-3 transition-colors"> | |
| <i data-feather="pause"></i> | |
| </button> | |
| <button onclick="stopSong()" class="bg-gray-400 hover:bg-gray-500 text-white rounded-full p-3 transition-colors"> | |
| <i data-feather="square"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Parental Section --> | |
| <div id="parental" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> | |
| <div class="bg-white rounded-3xl p-6 max-w-sm mx-auto shadow-2xl"> | |
| <h3 class="text-xl font-bold text-gray-700 mb-4">Parent Settings 🔒</h3> | |
| <p class="text-gray-600 mb-4">Solve to access:</p> | |
| <div class="text-center mb-4"> | |
| <p class="text-lg font-semibold">2 + 3 = ?</p> | |
| <input type="number" id="parentCode" class="border border-gray-300 rounded-xl p-2 w-full text-center"> | |
| </div> | |
| <button onclick="checkParentAccess()" class="bg-blue-400 hover:bg-blue-500 text-white rounded-xl p-3 w-full transition-colors"> | |
| Unlock | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize app | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Hide splash screen after 3 seconds | |
| setTimeout(() => { | |
| document.getElementById('splash').style.opacity = '0'; | |
| setTimeout(() => { | |
| document.getElementById('splash').style.display = 'none'; | |
| document.getElementById('home').classList.remove('hidden'); | |
| }, 1000); | |
| }, 3000); | |
| feather.replace(); | |
| }); | |
| // Navigation functions | |
| function showSection(sectionName) { | |
| // Hide all sections | |
| document.querySelectorAll('div[id]').forEach(div => { | |
| if (div.id !== 'splash' && div.id !== 'parental') { | |
| div.classList.add('hidden'); | |
| } | |
| }); | |
| // Show selected section | |
| if (sectionName === 'home') { | |
| document.getElementById('home').classList.remove('hidden'); | |
| } else { | |
| document.getElementById(sectionName).classList.remove('hidden'); | |
| } | |
| feather.replace(); | |
| } | |
| // Alphabet section variables | |
| let currentLetterIndex = 0; | |
| const letters = [ | |
| { letter: 'A', word: 'Apple', image: 'http://static.photos/food/200x200/1' }, | |
| { letter: 'B', word: 'Ball', image: 'http://static.photos/sport/200x200/1' }, | |
| { letter: 'C', word: 'Cat', image: 'http://static.photos/animals/200x200/1' }, | |
| { letter: 'D', word: 'Dog', image: 'http://static.photos/animals/200x200/2' } | |
| ]; | |
| function nextLetter() { | |
| currentLetterIndex = (currentLetterIndex + 1) % letters.length; | |
| updateLetterDisplay(); | |
| } | |
| function prevLetter() { | |
| currentLetterIndex = (currentLetterIndex - 1 + letters.length) % letters.length; | |
| updateLetterDisplay(); | |
| } | |
| function updateLetterDisplay() { | |
| const letter = letters[currentLetterIndex]; | |
| document.getElementById('letterDisplay').innerHTML = ` | |
| <div class="text-8xl font-bold text-blue-500 mb-4">${letter.letter}</div> | |
| <div class="text-2xl text-gray-600 mb-2">${letter.letter.toLowerCase()}</div> | |
| <img src="${letter.image}" alt="${letter.word}" class="w-32 h-32 mx-auto rounded-2xl mb-4"> | |
| <button onclick="playSound('${letter.letter}')" class="bg-blue-400 hover:bg-blue-500 text-white rounded-full p-4 transition-colors"> | |
| <i data-feather="volume-2"></i> | |
| </button> | |
| <p class="text-xl font-semibold text-gray-700 mt-4">${letter.word}</p> | |
| `; | |
| feather.replace(); | |
| } | |
| function playSound(letter) { | |
| // In a real app, this would play actual audio | |
| const speech = new SpeechSynthesisUtterance(`${letter} for ${letters.find(l => l.letter === letter).word}`); | |
| speech.rate = 0.8; | |
| speech.pitch = 1.2; | |
| window.speechSynthesis.speak(speech); | |
| // Add star reward animation | |
| addStarReward(); | |
| } | |
| // Numbers section variables | |
| let currentNumberIndex = 0; | |
| const numbers = Array.from({length: 20}, (_, i) => i + 1); | |
| function nextNumber() { | |
| currentNumberIndex = (currentNumberIndex + 1) % numbers.length; | |
| updateNumberDisplay(); | |
| if (currentNumberIndex === 19) { | |
| document.getElementById('completionMessage').classList.remove('hidden'); | |
| } | |
| } | |
| function prevNumber() { | |
| currentNumberIndex = (currentNumberIndex - 1 + numbers.length) % numbers.length; | |
| updateNumberDisplay(); | |
| document.getElementById('completionMessage').classList.add('hidden'); | |
| } | |
| function updateNumberDisplay() { | |
| const number = numbers[currentNumberIndex]; | |
| const items = Array.from({length: number}, (_, i) => | |
| `<div class="w-8 h-8 bg-red-400 rounded-full"></div>` | |
| ).join(''); | |
| document.getElementById('numberDisplay').innerHTML = ` | |
| <div class="text-8xl font-bold text-green-500 mb-4">${number}</div> | |
| <div class="text-2xl text-gray-600 mb-2">${numberToWords(number)}</div> | |
| <div class="flex justify-center space-x-2 mb-4 flex-wrap max-w-xs mx-auto"> | |
| ${items} | |
| </div> | |
| <button onclick="playNumberSound(${number})" class="bg-green-400 hover:bg-green-500 text-white rounded-full p-4 transition-colors"> | |
| <i data-feather="volume-2"></i> | |
| </button> | |
| <p class="text-xl font-semibold text-gray-700 mt-4">${numberToWords(number)} Apple${number > 1 ? 's' : ''} 🍎</p> | |
| `; | |
| feather.replace(); | |
| } | |
| function playNumberSound(number) { | |
| const speech = new SpeechSynthesisUtterance(numberToWords(number)); | |
| speech.rate = 0.8; | |
| speech.pitch = 1.2; | |
| window.speechSynthesis.speak(speech); | |
| // Animate counting | |
| animateCounting(number); | |
| } | |
| function numberToWords(num) { | |
| const words = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', | |
| 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen', 'twenty']; | |
| return words[num - 1] || num.toString(); | |
| } | |
| function animateCounting(number) { | |
| const items = document.querySelectorAll('#numberDisplay .flex div'); | |
| items.forEach((item, index) => { | |
| item.style.animation = 'none'; | |
| setTimeout(() => { | |
| item.style.animation = 'bounce 0.5s ease-in-out'; | |
| setTimeout(() => { | |
| item.style.animation = 'none'; | |
| }, 500); | |
| }, index * 200); | |
| }); | |
| } | |
| // Games functions | |
| function startGame(gameType) { | |
| document.getElementById('gameArea').classList.remove('hidden'); | |
| let gameContent = ''; | |
| switch(gameType) { | |
| case 'letterMatch': | |
| gameContent = ` | |
| <h3 class="text-xl font-bold mb-4">Letter Match Game</h3> | |
| <p class="text-gray-600 mb-4">Drag the correct letter to the picture!</p> | |
| <div class="bg-yellow-100 rounded-2xl p-4 mb-4"> | |
| <img src="http://static.photos/food/120x120/1" alt="Apple" class="mx-auto mb-4"> | |
| <div class="flex justify-center space-x-4"> | |
| <div class="bg-blue-300 text-white rounded-xl p-3 cursor-pointer drag-item">A</div> | |
| <div class="bg-green-300 text-white rounded-xl p-3 cursor-pointer drag-item">B</div> | |
| <div class="bg-red-300 text-white rounded-xl p-3 cursor-pointer drag-item">C</div> | |
| </div> | |
| </div> | |
| `; | |
| break; | |
| case 'numberCount': | |
| gameContent = ` | |
| <h3 class="text-xl font-bold mb-4">Number Counting</h3> | |
| <p class="text-gray-600 mb-4">How many apples do you see?</p> | |
| <div class="flex justify-center space-x-2 mb-4"> | |
| <div class="w-6 h-6 bg-red-400 rounded-full"></div> | |
| <div class="w-6 h-6 bg-red-400 rounded-full"></div> | |
| <div class="w-6 h-6 bg-red-400 rounded-full"></div> | |
| </div> | |
| <div class="flex justify-center space-x-2"> | |
| <button class="bg-gray-200 hover:bg-gray-300 rounded-xl p-2">1</button> | |
| <button class="bg-gray-200 hover:bg-gray-300 rounded-xl p-2">2</button> | |
| <button class="bg-gray-200 hover:bg-gray-300 rounded-xl p-2">3</button> | |
| </div> | |
| </div> | |
| `; | |
| break; | |
| } | |
| document.getElementById('gameContent').innerHTML = gameContent; | |
| feather.replace(); | |
| } | |
| // Songs functions | |
| function playSong(songType) { | |
| document.getElementById('songPlayer').classList.remove('hidden'); | |
| let lyrics = ''; | |
| switch(songType) { | |
| case 'abc': | |
| lyrics = 'A B C D E F G<br>H I J K L M N O P<br>Q R S T U V<br>W X Y Z'; | |
| break; | |
| case 'counting': | |
| lyrics = 'One, two, three, four, five<br>Six, seven, eight, nine, ten<br>Eleven, twelve, thirteen, fourteen<br>Fifteen, sixteen, seventeen, eighteen<br>Nineteen, twenty!'; | |
| break; | |
| case 'days': | |
| lyrics = 'Sunday, Monday, Tuesday<br>Wednesday, Thursday, Friday<br>Saturday!'; | |
| break; | |
| } | |
| document.getElementById('lyrics').innerHTML = `<p class="text-lg font-semibold text-gray-700">${lyrics}</p>`; | |
| } | |
| function pauseSong() { | |
| // In a real app, this would pause audio | |
| alert('Song paused!'); | |
| } | |
| function stopSong() { | |
| document.getElementById('songPlayer').classList.add('hidden'); | |
| } | |
| // Parental functions | |
| document.getElementById('parentBtn').addEventListener('click', function() { | |
| document.getElementById('parental').classList.remove('hidden'); | |
| }); | |
| function checkParentAccess() { | |
| const code = document.getElementById('parentCode').value; | |
| if (code === '5') { | |
| alert('Parental access granted! Settings would appear here.'); | |
| document.getElementById('parental').classList.add('hidden'); | |
| } else { | |
| alert('Try again! The answer is 5.'); | |
| } | |
| } | |
| // Star reward system | |
| function addStarReward() { | |
| const stars = document.querySelectorAll('#alphabet .flex div'); | |
| for (let i = 0; i < stars.length; i++) { | |
| if (stars[i].classList.contains('text-gray-300')) { | |
| stars[i].classList.remove('text-gray-300'); | |
| stars[i].classList.add('text-yellow-400', 'star-reward'); | |
| break; | |
| } | |
| } | |
| // Update progress | |
| updateProgress(); | |
| } | |
| function updateProgress() { | |
| const learnedLetters = 3; // Example count | |
| const learnedNumbers = 5; // Example count | |
| const alphabetProgress = Math.min(100, (learnedLetters / 26) * 100); | |
| const numbersProgress = Math.min(100, (learnedNumbers / 20) * 100); | |
| const overallProgress = (alphabetProgress + numbersProgress) / 2; | |
| document.getElementById('alphabetProgress').textContent = `${Math.round(alphabetProgress)}%`; | |
| document.getElementById('numbersProgress').textContent = `${Math.round(numbersProgress)}%`; | |
| document.getElementById('overallProgress').style.width = `${overallProgress}%`; | |
| } | |
| // Add some confetti animation for celebrations | |
| function createConfetti() { | |
| for (let i = 0; i < 50; i++) { | |
| const confetti = document.createElement('div'); | |
| confetti.className = 'confetti'; | |
| confetti.style.left = `${Math.random() * 100}%`; | |
| confetti.style.top = `${Math.random() * 100}%`; | |
| confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 70%, 60%)`; | |
| confetti.style.transform = `rotate(${Math.random() * 360}deg)`; | |
| document.body.appendChild(confetti); | |
| setTimeout(() => { | |
| confetti.remove(); | |
| }, 3000); | |
| } | |
| } | |
| // Initialize progress on load | |
| updateProgress(); | |
| </script> | |
| </body> | |
| </html> | |