undefined / index.html
davklanton's picture
Create a complete Android educational game application named **Akomapp A1**.
febb111 verified
Raw History Blame Contribute Delete
30.4 kB
<!DOCTYPE html>
<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>