Update index.html

index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+ <!DOCTYPE html>
 <html lang="ar" dir="rtl">
 <head>
     <meta charset="UTF-8">
@@ -76,6 +76,30 @@
         .animate-pulse {
             animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
         }
+
+        /* 🚨 NEW: Welcome Screen specific styles */
+        .welcome-bg-gradient {
+            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); /* Light blue gradient */
+        }
+        .dark .welcome-bg-gradient {
+            background: linear-gradient(135deg, #1f2937 0%, #374151 100%); /* Dark gradient */
+        }
+        .welcome-illustration-container {
+            width: 100%;
+            max-width: 400px; /* Adjust max-width as needed */
+            height: auto;
+            border-radius: 1.5rem; /* Rounded corners for the image container */
+            overflow: hidden;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Soft shadow */
+        }
+        .dark .welcome-illustration-container {
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+        }
+        .welcome-illustration-container img {
+            width: 100%;
+            height: auto;
+            display: block; /* Ensure no extra space below image */
+        }
     </style>
 </head>
 <body class="flex justify-center">
@@ -294,7 +318,6 @@
 
 
         // --- 4. مكونات الواجهة المشتركة (رأس الصفحة وتذييلها) ---
-        // ... (renderHeader, renderFooter remain the same for brevity) ...
         const renderHeader = () => {
             const headerElement = document.getElementById('app-header');
             const categoryMeta = CATEGORIES.find(c => c.id === appState.selectedCategory);
@@ -374,61 +397,58 @@
         const renderWelcomeScreen = () => {
             const content = document.getElementById('app-content');
             
-            const logoHTML = `
-                <div class="flex flex-col items-center">
-                    <div class="text-6xl font-black text-blue-600 dark:text-blue-400 mb-4 drop-shadow-lg">
-                        ${renderIcon('Carrot', 'w-16 h-16 text-orange-500 dark:text-orange-300 icon-shadow', 2)}
+            // 🚨 الصورة الجديدة بدلاً من الشعار النصي
+            const illustrationAndTitleHTML = `
+                <div class="flex flex-col items-center mb-6">
+                    <div class="welcome-illustration-container mb-6">
+                        <img src="images/welcome_illustration.png" alt="شعار تيفاوين - تعلم الأمازيغية" />
                     </div>
-                    <h1 class="text-6xl font-extrabold text-gray-900 dark:text-white mb-2 leading-none">Tifawin</h1>
-                    <p class="text-xl font-medium text-gray-600 dark:text-gray-300 mt-2">تعلم الأمازيغية للأطفال</p>
+                    <h1 class="text-5xl md:text-6xl font-extrabold text-blue-700 dark:text-blue-300 mb-2 leading-tight text-center drop-shadow-md">
+                        مرحباً في <span class="text-orange-500 dark:text-orange-300">Tifawin</span>
+                    </h1>
+                    <p class="text-lg md:text-xl font-medium text-gray-700 dark:text-gray-300 text-center max-w-sm">
+                        انطلق في رحلة ممتعة لاستكشاف حروف ومفردات اللغة الأمازيغية.
+                    </p>
                 </div>
             `;
             
             const copyrightText = "TIFIWIN-AZIZIJAOUAD@2025";
             
-            // 🚨 حقل الإدخال وزر الإرسال
             const usernameFormHTML = `
                 <div id="welcome-form-container" class="w-full max-w-xs mb-6" style="display: ${appState.isUsernameSubmitted ? 'none' : 'block'};">
-                    <p class="text-lg font-bold text-gray-700 dark:text-gray-200 mb-3 mt-8">أدخل اسمك لتبدأ:</p>
-                    <input type="text" id="usernameInput" placeholder="الاسم هنا (مثل: جواد أو فاطمة)" required
-                           class="w-full p-3 mb-3 border-2 border-blue-300 dark:border-blue-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-center text-lg text-gray-800 dark:text-gray-100 dark:bg-gray-700 transition-colors"
-                           onkeypress="if(event.key === 'Enter') { submitUsername(); }">
+                    <p class="text-lg font-bold text-gray-700 dark:text-gray-200 mb-3 mt-8 text-center">أدخل اسمك لتبدأ المغامرة:</p>
+                    <input type="text" id="usernameInput" placeholder="اسمك هنا (مثل: جواد أو فاطمة)" required
+                           class="w-full p-3 mb-4 border-2 border-blue-400 dark:border-blue-600 rounded-xl focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-700 text-center text-lg text-gray-800 dark:text-gray-100 dark:bg-gray-700 placeholder-gray-500 dark:placeholder-gray-400 transition-all duration-300 ease-in-out">
                            
                     <button onclick="submitUsername()"
-                            class="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white text-lg font-bold rounded-full shadow-xl shadow-blue-400/50 transition-all card-shadow">
+                            class="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white text-lg font-bold rounded-full shadow-xl shadow-blue-400/50 transition-all duration-300 ease-in-out card-shadow">
                         تسجيل الاسم
                     </button>
                 </div>
             `;
             
-            // 🚨 زر "هيا نبدأ" المشروط
             const startButtonHTML = `
                 <div id="start-button-container" class="w-full max-w-xs" style="display: ${appState.isUsernameSubmitted ? 'block' : 'none'};">
                     <button onclick="setState({currentScreen: 'home'})"
-                            class="w-full py-4 bg-green-500 hover:bg-green-600 text-white text-xl font-bold rounded-full shadow-2xl shadow-green-400/50 transition-all card-shadow mb-6">
+                            class="w-full py-4 bg-green-500 hover:bg-green-600 text-white text-xl font-bold rounded-full shadow-2xl shadow-green-400/50 transition-all duration-300 ease-in-out card-shadow mb-6">
                         هيا نبدأ!
                     </button>
                 </div>
             `;
 
             content.innerHTML = `
-                <div class="flex flex-col items-center justify-between min-h-[calc(100vh)] p-8 bg-white dark:bg-gray-900 transition-colors">
+                <div class="flex flex-col items-center justify-between min-h-screen p-6 welcome-bg-gradient dark:welcome-bg-gradient transition-colors">
                     
-                    <div class="flex-grow flex flex-col items-center justify-center text-center w-full">
-                        ${logoHTML}
-                        
-                        <p class="text-lg text-gray-500 dark:text-gray-400 mt-10 max-w-xs">
-                           انطلق في رحلة ممتعة لاستكشاف حروف وألوان ومفردات اللغة الأمازيغية.
-                        </p>
+                    <div class="flex-grow flex flex-col items-center justify-center text-center w-full mt-4">
+                        ${illustrationAndTitleHTML}
                         
                         ${usernameFormHTML}
                         
                         ${startButtonHTML}
 
                     </div>
-
                     
-                    <p class="text-xs text-gray-400 dark:text-gray-600 font-mono tracking-wider">
+                    <p class="text-xs text-gray-500 dark:text-gray-400 font-mono tracking-wider mt-8">
                         ${copyrightText}
                     </p>
                 </div>
@@ -497,7 +517,6 @@
         };
 
         // --- 7. شاشة 3 و 4: شاشة التعلم العامة (Learning Screen) (...) ---
-        // ... (renderLearningScreen remains the same for brevity) ...
         const renderLearningScreen = () => {
             const categoryId = appState.selectedCategory;
             const content = document.getElementById('app-content');
@@ -631,7 +650,6 @@
                 </div>
             `;
         };
-        // ... (renderSettingsScreen, renderInfoScreen, renderAppDefinitionScreen remain the same for brevity) ...
         const renderSettingsScreen = () => {
             const content = document.getElementById('app-content');
             
@@ -784,7 +802,7 @@
                                 </div>
                                 <div class="text-right text-white">
                                    <span class="text-lg font-black leading-tight drop-shadow-md">${category.title}</span>
-                                   <span class="text-xs opacity-80 mt-1 block">${category.subtitle} ${isComingSoon ? '(قريباً)' : ''}</span>
+                                   <span class="text-xs opacity-80 mt-1 block">${isComingSoon ? '(قريباً)' : category.subtitle}</span>
                                 </div>
                             </div>
                          </div>