write web page teach kids math 6-8 years in arabic language

README.md

@@ -1,10 +1,13 @@
 ---
-title: Math Magic For Little Einsteins
-emoji: 🌖
-colorFrom: indigo
-colorTo: gray
+title: Math Magic for Little Einsteins 🧮✨
+colorFrom: purple
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html

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