numbers.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learn Numbers - Akomapp A1</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>
    <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;
        }
        
        .number-pop {
            animation: numberPop 0.6s ease-out;
        }
        
        @keyframes numberPop {
            0% { transform: scale(0.8); opacity: 0; }
            70% { transform: scale(1.1); }
            100% { transform: scale(1); opacity: 1; }
        }
        
        .counting-animation {
            animation: countBounce 0.4s ease-in-out;
        }
        
        @keyframes countBounce {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-5px); }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-green-50 to-teal-50 min-h-screen p-4">
    <!-- Header -->
    <div class="flex items-center justify-between mb-6">
        <a href="akomapp-home.html" class="bg-white rounded-full p-3 shadow-md hover:shadow-lg transition-shadow">
            <i data-feather="arrow-left"></i>
        </a>
        <div class="text-center">
            <h2 class="text-2xl font-bold text-green-600">Learn Numbers 🔢</h2>
        <p class="text-gray-600 text-sm">Count from 1 to 20!</p>
        </div>
        <div class="w-10"></div>
    </div>

    <!-- Numbers Display -->
    <div class="bg-white rounded-3xl shadow-2xl p-6 max-w-sm mx-auto">
        <div id="numberDisplay" class="text-center">
            <div class="text-7xl font-bold text-green-500 mb-4 number-pop">1</div>
            <div class="text-2xl text-gray-600 mb-4">one</div>
            <div class="flex justify-center space-x-2 mb-4 flex-wrap max-w-xs mx-auto">
                <div class="w-6 h-6 bg-red-400 rounded-full counting-animation" style="animation-delay: 0.1s"></div>
            </div>
            <button onclick="playNumberSound(1)" class="bg-gradient-to-r from-green-400 to-teal-400 hover:from-green-500 hover:to-teal-500 text-white rounded-full p-4 transition-colors shadow-md">
                <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-100 hover:bg-gray-200 rounded-full p-3 transition-colors shadow-sm">
                <i data-feather="chevron-left"></i>
            </button>
            <div class="flex items-center space-x-1">
                <span class="text-green-500 text-sm font-bold">1</span>
            <span class="text-gray-400 text-sm">of 20</span>
            <button onclick="nextNumber()" class="bg-gray-100 hover:bg-gray-200 rounded-full p-3 transition-colors shadow-sm">
                <i data-feather="chevron-right"></i>
            </button>
        </div>
    </div>

    <!-- Completion Message -->
    <div id="completionMessage" class="hidden mt-6 bg-gradient-to-r from-yellow-100 to-orange-100 border border-yellow-300 text-yellow-700 px-4 py-3 rounded-2xl text-center max-w-sm mx-auto">
            <div class="flex items-center justify-center space-x-2">
                <span class="text-xl">🎉</span>
                <p class="font-semibold">You're a counting star! 🌟</p>
        </div>
    </div>

    <script>
        // Numbers data
        const numbers = Array.from({length: 20}, (_, i) => i + 1);
        
        let currentNumberIndex = 0;
        let learnedNumbers = 0;

        // Initialize
        document.addEventListener('DOMContentLoaded', function() {
            updateNumberDisplay();
            feather.replace();
        });

        function nextNumber() {
            currentNumberIndex = (currentNumberIndex + 1) % numbers.length;
            updateNumberDisplay();
            
            if (currentNumberIndex === 19) {
                document.getElementById('completionMessage').classList.remove('hidden');
                createConfetti();
            }
        }

        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-6 h-6 bg-red-400 rounded-full counting-animation" style="animation-delay: ${i * 0.1}s"></div>`
            ).join('');
            
            document.getElementById('numberDisplay').innerHTML = `
                <div class="text-7xl font-bold text-green-500 mb-4 number-pop">${number}</div>
                <div class="text-2xl text-gray-600 mb-4">${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-gradient-to-r from-green-400 to-teal-400 hover:from-green-500 hover:to-teal-500 text-white rounded-full p-4 transition-colors shadow-md">
                    <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);
            
            // Mark as learned
            learnedNumbers++;
            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) => {
                setTimeout(() => {
                    item.style.animation = 'none';
                    setTimeout(() => {
                        item.style.animation = 'countBounce 0.4s ease-in-out';
                }, index * 200);
            });
        }

        function createConfetti() {
            const colors = ['#4ECDC4', '#FF6B6B', '#FFE66D', '#1A535C', '#6A0572'];
            
            for (let i = 0; i < 25; i++) {
                setTimeout(() => {
                    const confetti = document.createElement('div');
                    confetti.className = 'confetti';
                    confetti.style.left = `${Math.random() * 100}%`;
                    confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                    confetti.style.animationDelay = `${Math.random() * 2}s`;
                    document.body.appendChild(confetti);
                    
                    setTimeout(() => {
                        if (confetti.parentNode) {
                            confetti.parentNode.removeChild(confetti);
                }, 3000);
            }, i * 120);
            }
        }
    </script>
</body>
</html>