index.html

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>سحر الرياضيات للأطفال</title>
    <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=Tajawal:wght@400;700&display=swap');
        body {
            font-family: 'Tajawal', sans-serif;
        }
        .math-bubble {
            animation: float 3s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        .correct-answer {
            animation: celebrate 0.5s ease;
        }
        @keyframes celebrate {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
    </style>
</head>
<body class="bg-gradient-to-b from-blue-100 to-purple-100 min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <!-- Header -->
        <header class="text-center mb-10">
            <h1 class="text-4xl font-bold text-purple-700 mb-2">سحر الرياضيات 🧮</h1>
            <p class="text-lg text-gray-600">تعلم الرياضيات بطريقة ممتعة وسهلة!</p>
            <div class="w-24 h-2 bg-yellow-400 mx-auto mt-2 rounded-full"></div>
        </header>

        <!-- Main Content -->
        <main>
            <!-- Hero Section -->
            <section class="bg-white rounded-2xl shadow-lg p-6 mb-10 text-center">
                <div class="flex justify-center mb-6">
                    <div class="math-bubble bg-blue-500 text-white w-20 h-20 rounded-full flex items-center justify-center text-3xl font-bold">+</div>
                    <div class="math-bubble bg-green-500 text-white w-20 h-20 rounded-full flex items-center justify-center text-3xl font-bold mx-4">-</div>
                    <div class="math-bubble bg-yellow-500 text-white w-20 h-20 rounded-full flex items-center justify-center text-3xl font-bold">×</div>
                </div>
                <h2 class="text-2xl font-bold text-gray-800 mb-4">مرحباً بكم في عالم الرياضيات السحري!</h2>
                <p class="text-gray-600 mb-6">هنا سنتعلم معاً الأعداد والجمع والطرح بطريقة سهلة وممتعة</p>
                <button onclick="startLearning()" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300 shadow-lg">
                    ابدأ التعلم الآن <i data-feather="arrow-left" class="mr-2"></i>
                </button>
            </section>

            <!-- Learning Section (hidden by default) -->
            <section id="learningSection" class="hidden bg-white rounded-2xl shadow-lg p-6">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-2xl font-bold text-gray-800">دعونا نتعلم!</h2>
                    <span id="score" class="bg-green-100 text-green-800 px-3 py-1 rounded-full font-bold">النقاط: 0</span>
                </div>

                <!-- Numbers Learning -->
                <div id="numbersSection" class="mb-8">
                    <h3 class="text-xl font-semibold text-blue-600 mb-4 flex items-center">
                        <i data-feather="hash" class="mr-2"></i> تعلم الأعداد من 1 إلى 10
                    </h3>
                    <div class="grid grid-cols-2 sm:grid-cols-5 gap-4">
                        <!-- Numbers will be generated here -->
                    </div>
                </div>

                <!-- Addition Practice -->
                <div id="additionSection" class="mb-8">
                    <h3 class="text-xl font-semibold text-green-600 mb-4 flex items-center">
                        <i data-feather="plus" class="mr-2"></i> تدرب على الجمع
                    </h3>
                    <div class="bg-blue-50 rounded-xl p-4">
                        <div id="additionQuestion" class="text-3xl font-bold text-center mb-4">؟ + ؟ =</div>
                        <div class="grid grid-cols-3 gap-3 max-w-xs mx-auto">
                            <!-- Answer options will be generated here -->
                        </div>
                    </div>
                </div>

                <!-- Subtraction Practice -->
                <div id="subtractionSection" class="mb-8">
                    <h3 class="text-xl font-semibold text-yellow-600 mb-4 flex items-center">
                        <i data-feather="minus" class="mr-2"></i> تدرب على الطرح
                    </h3>
                    <div class="bg-green-50 rounded-xl p-4">
                        <div id="subtractionQuestion" class="text-3xl font-bold text-center mb-4">؟ - ؟ =</div>
                        <div class="grid grid-cols-3 gap-3 max-w-xs mx-auto">
                            <!-- Answer options will be generated here -->
                        </div>
                    </div>
                </div>

                <!-- Celebration -->
                <div id="celebration" class="hidden text-center py-6">
                    <div class="text-5xl mb-4">🎉</div>
                    <h3 class="text-2xl font-bold text-purple-700 mb-2">أحسنت!</h3>
                    <p class="text-gray-600">لقد أكملت درس الرياضيات بنجاح!</p>
                </div>
            </section>
        </main>

        <!-- Footer -->
        <footer class="text-center mt-12 text-gray-500 text-sm">
            <p>صمم بحب لمساعدة الأطفال على تعلم الرياضيات</p>
        </footer>
    </div>

    <script>
        // Initialize feather icons
        feather.replace();

        // Generate numbers 1-10
        const numbersContainer = document.querySelector('#numbersSection .grid');
        for (let i = 1; i <= 10; i++) {
            const numberDiv = document.createElement('div');
            numberDiv.className = 'bg-purple-100 text-purple-700 rounded-lg p-4 text-center cursor-pointer transition hover:bg-purple-200 flex flex-col items-center';
            numberDiv.innerHTML = `
                <span class="text-3xl font-bold">${i}</span>
                <span class="text-sm mt-1">${convertToArabicNumerals(i)}</span>
            `;
            numberDiv.addEventListener('click', () => {
                numberDiv.classList.add('bg-purple-300', 'correct-answer');
                setTimeout(() => {
                    numberDiv.classList.remove('bg-purple-300', 'correct-answer');
                }, 500);
            });
            numbersContainer.appendChild(numberDiv);
        }

        // Math questions
        function generateAdditionQuestion() {
            const num1 = Math.floor(Math.random() * 5) + 1;
            const num2 = Math.floor(Math.random() * 5) + 1;
            const correctAnswer = num1 + num2;
            
            document.getElementById('additionQuestion').textContent = `${num1} + ${num2} = ?`;
            
            const optionsContainer = document.querySelector('#additionSection .grid');
            optionsContainer.innerHTML = '';
            
            // Generate 3 answer options (1 correct, 2 wrong)
            let options = [correctAnswer];
            while (options.length < 3) {
                const randomOption = Math.floor(Math.random() * 10) + 1;
                if (!options.includes(randomOption)) {
                    options.push(randomOption);
                }
            }
            
            // Shuffle options
            options = options.sort(() => Math.random() - 0.5);
            
            options.forEach(option => {
                const optionBtn = document.createElement('button');
                optionBtn.className = 'bg-blue-200 hover:bg-blue-300 text-blue-800 font-bold py-3 rounded-lg transition';
                optionBtn.textContent = option;
                optionBtn.addEventListener('click', function() {
                    if (parseInt(this.textContent) === correctAnswer) {
                        this.classList.add('bg-green-300', 'text-green-800', 'correct-answer');
                        updateScore(5);
                        setTimeout(() => {
                            generateAdditionQuestion();
                        }, 1000);
                    } else {
                        this.classList.add('bg-red-300', 'text-red-800');
                    }
                });
                optionsContainer.appendChild(optionBtn);
            });
        }

        function generateSubtractionQuestion() {
            const num1 = Math.floor(Math.random() * 5) + 5;
            const num2 = Math.floor(Math.random() * num1) + 1;
            const correctAnswer = num1 - num2;
            
            document.getElementById('subtractionQuestion').textContent = `${num1} - ${num2} = ?`;
            
            const optionsContainer = document.querySelector('#subtractionSection .grid');
            optionsContainer.innerHTML = '';
            
            // Generate 3 answer options (1 correct, 2 wrong)
            let options = [correctAnswer];
            while (options.length < 3) {
                const randomOption = Math.floor(Math.random() * 5) + 1;
                if (!options.includes(randomOption)) {
                    options.push(randomOption);
                }
            }
            
            // Shuffle options
            options = options.sort(() => Math.random() - 0.5);
            
            options.forEach(option => {
                const optionBtn = document.createElement('button');
                optionBtn.className = 'bg-green-200 hover:bg-green-300 text-green-800 font-bold py-3 rounded-lg transition';
                optionBtn.textContent = option;
                optionBtn.addEventListener('click', function() {
                    if (parseInt(this.textContent) === correctAnswer) {
                        this.classList.add('bg-green-300', 'text-green-800', 'correct-answer');
                        updateScore(5);
                        setTimeout(() => {
                            generateSubtractionQuestion();
                        }, 1000);
                    } else {
                        this.classList.add('bg-red-300', 'text-red-800');
                    }
                });
                optionsContainer.appendChild(optionBtn);
            });
        }

        // Helper function to convert numbers to Arabic numerals
        function convertToArabicNumerals(num) {
            const arabicNumerals = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩', '١٠'];
            return arabicNumerals[num];
        }

        // Score system
        let score = 0;
        function updateScore(points) {
            score += points;
            document.getElementById('score').textContent = `النقاط: ${score}`;
            
            if (score >= 30) {
                document.getElementById('learningSection').classList.add('hidden');
                document.getElementById('celebration').classList.remove('hidden');
            }
        }

        // Start learning function
        function startLearning() {
            document.querySelector('main > section:first-child').classList.add('hidden');
            document.getElementById('learningSection').classList.remove('hidden');
            generateAdditionQuestion();
            generateSubtractionQuestion();
        }
    </script>
</body>
</html>