Jaouadart commited on
Commit
fdee827
·
verified ·
1 Parent(s): c0bd0ff

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +55 -41
index.html CHANGED
@@ -19,6 +19,7 @@
19
  }
20
  </script>
21
  <style>
 
22
  body {
23
  font-family: 'Cairo', sans-serif;
24
  background-color: #f3f4f6;
@@ -26,9 +27,8 @@
26
  transition: background-color 0.3s;
27
  }
28
  body.dark {
29
- background-color: #111827; /* خلفية داكنة للجسم */
30
  }
31
- /* تحديد حاوية الهاتف المحمول */
32
  #app-container {
33
  min-height: 100vh;
34
  max-width: 500px;
@@ -38,10 +38,9 @@
38
  transition: background-color 0.3s, box-shadow 0.3s;
39
  }
40
  #app-container.dark {
41
- background-color: #1f2937; /* خلفية داكنة للحاوية */
42
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
43
  }
44
- /* تأثيرات الأزرار والبطاقات */
45
  .card-shadow {
46
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
47
  transition: transform 0.2s, box-shadow 0.2s;
@@ -54,11 +53,10 @@
54
  transform: scale(0.98);
55
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
56
  }
57
- /* نمط الزر الدائري الكبير */
58
  .control-btn {
59
  padding: 1.5rem;
60
  border-radius: 9999px;
61
- transition: transform 0.2s, box-shadow 0.2s;
62
  }
63
  .control-btn:active {
64
  transform: scale(0.9);
@@ -66,14 +64,18 @@
66
  .icon-shadow {
67
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
68
  }
69
- /* إخفاء شريط التمرير */
70
  ::-webkit-scrollbar { display: none; }
71
  .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
72
-
73
- /* تدرج فوق الصورة لجعل النص مقروءًا */
74
  .image-overlay {
75
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
76
  }
 
 
 
 
 
 
 
77
  </style>
78
  </head>
79
  <body class="flex justify-center">
@@ -87,7 +89,7 @@
87
  </div>
88
 
89
  <script>
90
- // --- 1. تعريف الأيقونات كـ SVG نصي (لإزالة الاعتماد على الاستيراد) ---
91
  const ICONS = {
92
  Home: (cls) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${cls}"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>`,
93
  Share2: (cls) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${cls}"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>`,
@@ -108,13 +110,11 @@
108
  Apple: (cls) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${cls}"><path d="M16 19s-2-2-4-2-4 2-4 2V5a2 2 0 0 1 4 0 2 2 0 0 1 4 0v14z"/><path d="M10 2a2 2 0 0 0-2 2v2M14 2a2 2 0 0 1 2 2v2"/></svg>`,
109
  Cat: (cls) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${cls}"><path d="M12 2a4 4 0 0 0-4 4v4a4 4 0 0 0 4 4 4 4 0 0 0 4-4V6a4 4 0 0 0-4-4z"/><path d="M12 14v8M7 19l-3 3M17 19l3 3"/></svg>`,
110
  Hand: (cls) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${cls}"><path d="M18 10c0 2.5-2.5 5-5 5H9a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h4c2.5 0 5 2.5 5 5z"/><path d="M5 22v-6m-2 0h4m-2 0l-1.5-3.5"/></svg>`,
111
- CalendarDays: (cls) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${cls}"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg>`,
112
  CalendarClock: (cls) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${cls}"><path d="M21 7.5V17a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h8.5"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><circle cx="17.5" cy="4.5" r="2.5"/><path d="M17.5 5v-1.5m0 3v1.5"/></svg>`,
113
  CloudRain: (cls) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${cls}"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M16 18v2"/><path d="M8 18v2"/><path d="M12 18v2"/></svg>`,
114
  Gamepad: (cls) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${cls}"><path d="M12 21a2 2 0 0 1-2-2v-4H8a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h4V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4v4a2 2 0 0 1-2 2v2a2 2 0 0 1-2 2z"/><path d="M8 11h4V7H8z"/></svg>`,
115
- // الأيقونة الجديدة لزر التعريف
116
  BookOpen: (cls) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${cls}"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>`,
117
- // أيقونة واتساب مؤقتة (سنستخدم Share2)
118
  WhatsApp: (cls) => ICONS.Share2(cls),
119
  };
120
 
@@ -129,16 +129,12 @@
129
  };
130
 
131
 
132
- // --- 2. بيانات التطبيق الثابتة (التحديثات) ---
133
 
134
  const APP_NAME = "Tifawin";
135
  const APP_NAME_LETTERS = "TIMMUZIT";
 
136
 
137
- // **الرابط الجديد للواتساب**
138
- const WHATSAPP_LINK = "https://chat.whatsapp.com/J8bK9L0X4M7P2S1R6Q5T"; // **يجب استبدال هذا برابط مجموعتك الفعلي**
139
-
140
-
141
- // *** بيانات المطور والمعلقين الصوتيين ***
142
  const DEVELOPER_INFO = {
143
  name: "حسن العمراني (Hassan Alamrani)",
144
  title: "مطوّر الواجهة التعليمية",
@@ -152,9 +148,8 @@
152
  { name: "طاقم تطوان للتعابير", role: "تسجيل فصول السنة" }
153
  ];
154
 
155
- // *************** بيانات المحاور التعليمية ***************
156
- // (تم اختصارها هنا لتبسيط الكود)
157
- const tifinaghData = [
158
  { letter: 'ⴰ', word_tifinagh: '', word_arabic: 'جدار-ⴰⴳⴰⴷⵉⵔ', image: 'images/2947c16d27f8042f7d60783c6808519a.jpg', audio: 'audio/aman.mp3' },
159
  { letter: 'ⴱ', word_tifinagh: '', word_arabic: 'فراشة-ⵉⴱⵔⴱⵉⵍⵍⵓ', image: 'images/3fd6beebd231e2f325469a40b0831b59.jpg', audio: 'audio/barbi.mp3' },
160
  { letter: 'ⴳ', word_tifinagh: '', word_arabic: 'دخان-ⴰⴳⴳⵓ', image: 'images/c0094eb5dcc49d7cce573d42f270d8de.jpg', audio: 'audio/ca.mp3' },
@@ -219,7 +214,7 @@
219
  ];
220
 
221
 
222
- // --- 3. إدارة حالة التطبيق (متاحة عالمياً) ---
223
 
224
  const appState = {
225
  currentScreen: 'home',
@@ -228,6 +223,7 @@
228
  isMenuOpen: false,
229
  isDarkMode: false,
230
  isAppMuted: false,
 
231
  };
232
 
233
  // دالة تحديث الحالة وإعادة رسم التطبيق
@@ -249,6 +245,24 @@
249
  window.toggleMenu = () => {
250
  setState({ isMenuOpen: !appState.isMenuOpen });
251
  };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
252
 
253
  // --- 4. مكونات الواجهة المشتركة (رأس الصفحة وتذييلها) ---
254
 
@@ -263,7 +277,7 @@
263
  title = 'الإعدادات';
264
  } else if (appState.currentScreen === 'info') {
265
  title = 'حول التطبيق';
266
- } else if (appState.currentScreen === 'appDefinition') { // **الجديد**
267
  title = 'تعريف التطبيق';
268
  }
269
 
@@ -287,13 +301,12 @@
287
  const footerElement = document.getElementById('app-footer');
288
  const navItems = [
289
  { id: 'home', iconName: 'Home', label: 'الرئيسية' },
290
- { id: 'whatsapp', iconName: 'Share2', label: 'واتساب' }, // تم التغيير من 'share' إلى 'whatsapp'
291
  { id: 'profile', iconName: 'User', label: 'الملف' },
292
  { id: 'settings', iconName: 'Settings', label: 'إعدادات' },
293
  { id: 'info', iconName: 'Info', label: 'حول' },
294
  ];
295
 
296
- // تحديد الشاشة النشطة في شريط التنقل السفلي
297
  const activeScreen = ['home', 'profile', 'settings', 'info'].includes(appState.currentScreen)
298
  ? appState.currentScreen
299
  : 'home';
@@ -304,10 +317,8 @@
304
  ${navItems.map(item => {
305
  const isActive = item.id === activeScreen;
306
 
307
- // الوظيفة المحدثة لزر واتساب
308
  let clickAction = `setState({currentScreen: '${item.id}', selectedCategory: null})`;
309
  if (item.id === 'whatsapp') {
310
- // فتح الرابط في نافذة جديدة
311
  clickAction = `window.open('${WHATSAPP_LINK}', '_blank')`;
312
  }
313
 
@@ -331,6 +342,7 @@
331
 
332
  // --- 5. شاشة 1: الشاشة الرئيسية (Home Screen) ---
333
  const renderHomeScreen = () => {
 
334
  const content = document.getElementById('app-content');
335
 
336
  const cardsHTML = CATEGORIES.map(category => `
@@ -366,7 +378,7 @@
366
  `;
367
  };
368
 
369
- // --- 6. شاشة 2 و 3: شاشة التعلم العامة (Learning Screen) ---
370
  const renderLearningScreen = () => {
371
  const categoryId = appState.selectedCategory;
372
  const content = document.getElementById('app-content');
@@ -388,8 +400,9 @@
388
 
389
  const currentItem = data[appState.currentIndex];
390
  const isColorsCategory = categoryId === 'colors';
 
391
 
392
- // دالة تشغيل الصوت (مع التحقق من حالة كتم الصوت)
393
  window.playAudio = () => {
394
  if (appState.isAppMuted) {
395
  console.log("Audio is muted by user setting.");
@@ -447,6 +460,12 @@
447
  </div>
448
  ` : '';
449
 
 
 
 
 
 
 
450
 
451
  content.innerHTML = `
452
  <div class="p-4 flex flex-col items-center justify-between min-h-[calc(100vh-130px)] bg-gray-50 dark:bg-gray-900 transition-colors">
@@ -488,7 +507,7 @@
488
  ${renderIcon('ChevronRight', 'w-8 h-8 text-white', 3)}
489
  </button>
490
 
491
- <button onclick="console.log('Microphone Activated!')" class="control-btn p-6 bg-red-500 hover:bg-red-600 shadow-2xl shadow-red-400/70" aria-label="تسجيل النطق">
492
  ${renderIcon('Mic', 'w-10 h-10 text-white', 3)}
493
  </button>
494
 
@@ -500,7 +519,7 @@
500
  `;
501
  };
502
 
503
- // --- 7. شاشة الإعدادات (Settings Screen) ---
504
  const renderSettingsScreen = () => {
505
  const content = document.getElementById('app-content');
506
 
@@ -539,7 +558,6 @@
539
  `;
540
  };
541
 
542
- // --- 8. شاشة حول (Info Screen) ---
543
  const renderInfoScreen = () => {
544
  const content = document.getElementById('app-content');
545
 
@@ -578,8 +596,6 @@
578
  `;
579
  };
580
 
581
- // --- 9. شاشة تعريف التطبيق (App Definition Screen) ---
582
-
583
  const renderAppDefinitionScreen = () => {
584
  const content = document.getElementById('app-content');
585
 
@@ -630,9 +646,8 @@
630
  `;
631
  };
632
 
633
- // --- 10. شاشة القائمة الجانبية (Menu Overlay) ---
634
-
635
  const renderMenu = () => {
 
636
  if (!appState.isMenuOpen) return '';
637
 
638
  const cardsHTML = CATEGORIES.map(category => `
@@ -677,7 +692,7 @@
677
  `;
678
  };
679
 
680
- // --- 11. دالة الرسم الرئيسية والتهيئة ---
681
 
682
  const renderApp = () => {
683
  renderHeader();
@@ -692,12 +707,11 @@
692
  renderSettingsScreen();
693
  } else if (screen === 'info') {
694
  renderInfoScreen();
695
- } else if (screen === 'appDefinition') { // **الشاشة الجديدة**
696
  renderAppDefinitionScreen();
697
  } else if (CATEGORIES.some(c => c.id === screen)) {
698
  renderLearningScreen();
699
  } else {
700
- // الشاشات غير المجهزة مثل 'whatsapp' (التي تفتح رابط خارجي) أو أي شاشة مفقودة
701
  content.innerHTML = `
702
  <div class="p-8 min-h-[calc(100vh-130px)] flex flex-col items-center justify-center bg-gray-50 dark:bg-gray-900 transition-colors">
703
  <p class="text-xl font-bold text-purple-600 dark:text-purple-400 mb-4">هذا القسم قيد الإنشاء!</p>
@@ -711,7 +725,7 @@
711
 
712
  renderFooter();
713
 
714
- // إضافة وإزالة الـ Menu Overlay
715
  const existingMenu = document.getElementById('menu-overlay');
716
  const appContainer = document.getElementById('app-container');
717
 
 
19
  }
20
  </script>
21
  <style>
22
+ /* ... (CSS Styles remain the same) ... */
23
  body {
24
  font-family: 'Cairo', sans-serif;
25
  background-color: #f3f4f6;
 
27
  transition: background-color 0.3s;
28
  }
29
  body.dark {
30
+ background-color: #111827;
31
  }
 
32
  #app-container {
33
  min-height: 100vh;
34
  max-width: 500px;
 
38
  transition: background-color 0.3s, box-shadow 0.3s;
39
  }
40
  #app-container.dark {
41
+ background-color: #1f2937;
42
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
43
  }
 
44
  .card-shadow {
45
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
46
  transition: transform 0.2s, box-shadow 0.2s;
 
53
  transform: scale(0.98);
54
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
55
  }
 
56
  .control-btn {
57
  padding: 1.5rem;
58
  border-radius: 9999px;
59
+ transition: transform 0.2s, box-shadow 0.2s, background-color 0.3s;
60
  }
61
  .control-btn:active {
62
  transform: scale(0.9);
 
64
  .icon-shadow {
65
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
66
  }
 
67
  ::-webkit-scrollbar { display: none; }
68
  .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
 
 
69
  .image-overlay {
70
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
71
  }
72
+ @keyframes pulse {
73
+ 0%, 100% { opacity: 1; }
74
+ 50% { opacity: 0.7; }
75
+ }
76
+ .animate-pulse {
77
+ animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
78
+ }
79
  </style>
80
  </head>
81
  <body class="flex justify-center">
 
89
  </div>
90
 
91
  <script>
92
+ // --- 1. تعريف الأيقونات كـ SVG نصي ---
93
  const ICONS = {
94
  Home: (cls) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${cls}"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>`,
95
  Share2: (cls) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${cls}"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>`,
 
110
  Apple: (cls) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${cls}"><path d="M16 19s-2-2-4-2-4 2-4 2V5a2 2 0 0 1 4 0 2 2 0 0 1 4 0v14z"/><path d="M10 2a2 2 0 0 0-2 2v2M14 2a2 2 0 0 1 2 2v2"/></svg>`,
111
  Cat: (cls) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${cls}"><path d="M12 2a4 4 0 0 0-4 4v4a4 4 0 0 0 4 4 4 4 0 0 0 4-4V6a4 4 0 0 0-4-4z"/><path d="M12 14v8M7 19l-3 3M17 19l3 3"/></svg>`,
112
  Hand: (cls) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${cls}"><path d="M18 10c0 2.5-2.5 5-5 5H9a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h4c2.5 0 5 2.5 5 5z"/><path d="M5 22v-6m-2 0h4m-2 0l-1.5-3.5"/></svg>`,
113
+ CalendarDays: (cls) => `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${cls}"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg>`,
114
  CalendarClock: (cls) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${cls}"><path d="M21 7.5V17a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h8.5"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><circle cx="17.5" cy="4.5" r="2.5"/><path d="M17.5 5v-1.5m0 3v1.5"/></svg>`,
115
  CloudRain: (cls) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${cls}"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M16 18v2"/><path d="M8 18v2"/><path d="M12 18v2"/></svg>`,
116
  Gamepad: (cls) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${cls}"><path d="M12 21a2 2 0 0 1-2-2v-4H8a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h4V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4v4a2 2 0 0 1-2 2v2a2 2 0 0 1-2 2z"/><path d="M8 11h4V7H8z"/></svg>`,
 
117
  BookOpen: (cls) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${cls}"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>`,
 
118
  WhatsApp: (cls) => ICONS.Share2(cls),
119
  };
120
 
 
129
  };
130
 
131
 
132
+ // --- 2. بيانات التطبيق الثابتة ---
133
 
134
  const APP_NAME = "Tifawin";
135
  const APP_NAME_LETTERS = "TIMMUZIT";
136
+ const WHATSAPP_LINK = "https://chat.whatsapp.com/J8bK9L0X4M7P2S1R6Q5T";
137
 
 
 
 
 
 
138
  const DEVELOPER_INFO = {
139
  name: "حسن العمراني (Hassan Alamrani)",
140
  title: "مطوّر الواجهة التعليمية",
 
148
  { name: "طاقم تطوان للتعابير", role: "تسجيل فصول السنة" }
149
  ];
150
 
151
+ // ... (LEARNING_DATA and CATEGORIES remain the same) ...
152
+ const tifinaghData = [
 
153
  { letter: 'ⴰ', word_tifinagh: '', word_arabic: 'جدار-ⴰⴳⴰⴷⵉⵔ', image: 'images/2947c16d27f8042f7d60783c6808519a.jpg', audio: 'audio/aman.mp3' },
154
  { letter: 'ⴱ', word_tifinagh: '', word_arabic: 'فراشة-ⵉⴱⵔⴱⵉⵍⵍⵓ', image: 'images/3fd6beebd231e2f325469a40b0831b59.jpg', audio: 'audio/barbi.mp3' },
155
  { letter: 'ⴳ', word_tifinagh: '', word_arabic: 'دخان-ⴰⴳⴳⵓ', image: 'images/c0094eb5dcc49d7cce573d42f270d8de.jpg', audio: 'audio/ca.mp3' },
 
214
  ];
215
 
216
 
217
+ // --- 3. إدارة حالة التطبيق (تحديث) ---
218
 
219
  const appState = {
220
  currentScreen: 'home',
 
223
  isMenuOpen: false,
224
  isDarkMode: false,
225
  isAppMuted: false,
226
+ isRecording: false, // **الحالة الجديدة لتتبع التسجيل**
227
  };
228
 
229
  // دالة تحديث الحالة وإعادة رسم التطبيق
 
245
  window.toggleMenu = () => {
246
  setState({ isMenuOpen: !appState.isMenuOpen });
247
  };
248
+
249
+ // **الدوال الجديدة للتحكم في التسجيل (محاكاة)**
250
+ window.startRecording = () => {
251
+ // يمكن إضافة منطق طلب إذن الميكروفون هنا
252
+ setState({ isRecording: true, currentScreen: appState.currentScreen });
253
+ console.log("Recording Started...");
254
+ // إظهار رسالة للمستخدم
255
+ alert("بدأ التسجيل! تحدث الآن...");
256
+ };
257
+
258
+ window.stopRecording = () => {
259
+ // يمكن إضافة منطق إيقاف التسجيل ومعالجته هنا
260
+ setState({ isRecording: false, currentScreen: appState.currentScreen });
261
+ console.log("Recording Stopped.");
262
+ // إظهار رسالة للمستخدم
263
+ alert("تم إيقاف التسجيل. (في التطبيق الحقيقي، هنا يمكن مقارنة الصوت)");
264
+ };
265
+
266
 
267
  // --- 4. مكونات الواجهة المشتركة (رأس الصفحة وتذييلها) ---
268
 
 
277
  title = 'الإعدادات';
278
  } else if (appState.currentScreen === 'info') {
279
  title = 'حول التطبيق';
280
+ } else if (appState.currentScreen === 'appDefinition') {
281
  title = 'تعريف التطبيق';
282
  }
283
 
 
301
  const footerElement = document.getElementById('app-footer');
302
  const navItems = [
303
  { id: 'home', iconName: 'Home', label: 'الرئيسية' },
304
+ { id: 'whatsapp', iconName: 'Share2', label: 'واتساب' },
305
  { id: 'profile', iconName: 'User', label: 'الملف' },
306
  { id: 'settings', iconName: 'Settings', label: 'إعدادات' },
307
  { id: 'info', iconName: 'Info', label: 'حول' },
308
  ];
309
 
 
310
  const activeScreen = ['home', 'profile', 'settings', 'info'].includes(appState.currentScreen)
311
  ? appState.currentScreen
312
  : 'home';
 
317
  ${navItems.map(item => {
318
  const isActive = item.id === activeScreen;
319
 
 
320
  let clickAction = `setState({currentScreen: '${item.id}', selectedCategory: null})`;
321
  if (item.id === 'whatsapp') {
 
322
  clickAction = `window.open('${WHATSAPP_LINK}', '_blank')`;
323
  }
324
 
 
342
 
343
  // --- 5. شاشة 1: الشاشة الرئيسية (Home Screen) ---
344
  const renderHomeScreen = () => {
345
+ // ... (Home Screen content remains the same) ...
346
  const content = document.getElementById('app-content');
347
 
348
  const cardsHTML = CATEGORIES.map(category => `
 
378
  `;
379
  };
380
 
381
+ // --- 6. شاشة 2 و 3: شاشة التعلم العامة (Learning Screen) (تحديث) ---
382
  const renderLearningScreen = () => {
383
  const categoryId = appState.selectedCategory;
384
  const content = document.getElementById('app-content');
 
400
 
401
  const currentItem = data[appState.currentIndex];
402
  const isColorsCategory = categoryId === 'colors';
403
+ const isRecordingActive = appState.isRecording; // جلب حالة التسجيل
404
 
405
+ // دالة تشغيل الصوت
406
  window.playAudio = () => {
407
  if (appState.isAppMuted) {
408
  console.log("Audio is muted by user setting.");
 
460
  </div>
461
  ` : '';
462
 
463
+ // **منطق زر الميكروفون المحدث**
464
+ const micAction = isRecordingActive ? 'stopRecording()' : 'startRecording()';
465
+ const micButtonClass = isRecordingActive
466
+ ? 'bg-red-600 hover:bg-red-700 shadow-2xl shadow-red-400/70 animate-pulse'
467
+ : 'bg-red-500 hover:bg-red-600 shadow-2xl shadow-red-400/70';
468
+
469
 
470
  content.innerHTML = `
471
  <div class="p-4 flex flex-col items-center justify-between min-h-[calc(100vh-130px)] bg-gray-50 dark:bg-gray-900 transition-colors">
 
507
  ${renderIcon('ChevronRight', 'w-8 h-8 text-white', 3)}
508
  </button>
509
 
510
+ <button onclick="${micAction}" class="control-btn p-6 ${micButtonClass}" aria-label="${isRecordingActive ? 'إيقاف التسجيل' : 'بدء التسجيل'}">
511
  ${renderIcon('Mic', 'w-10 h-10 text-white', 3)}
512
  </button>
513
 
 
519
  `;
520
  };
521
 
522
+ // ... (renderSettingsScreen, renderInfoScreen, renderAppDefinitionScreen, renderMenu remain the same) ...
523
  const renderSettingsScreen = () => {
524
  const content = document.getElementById('app-content');
525
 
 
558
  `;
559
  };
560
 
 
561
  const renderInfoScreen = () => {
562
  const content = document.getElementById('app-content');
563
 
 
596
  `;
597
  };
598
 
 
 
599
  const renderAppDefinitionScreen = () => {
600
  const content = document.getElementById('app-content');
601
 
 
646
  `;
647
  };
648
 
 
 
649
  const renderMenu = () => {
650
+ // ... (Menu content remains the same) ...
651
  if (!appState.isMenuOpen) return '';
652
 
653
  const cardsHTML = CATEGORIES.map(category => `
 
692
  `;
693
  };
694
 
695
+ // --- 7. دالة الرسم الرئيسية والتهيئة ---
696
 
697
  const renderApp = () => {
698
  renderHeader();
 
707
  renderSettingsScreen();
708
  } else if (screen === 'info') {
709
  renderInfoScreen();
710
+ } else if (screen === 'appDefinition') {
711
  renderAppDefinitionScreen();
712
  } else if (CATEGORIES.some(c => c.id === screen)) {
713
  renderLearningScreen();
714
  } else {
 
715
  content.innerHTML = `
716
  <div class="p-8 min-h-[calc(100vh-130px)] flex flex-col items-center justify-center bg-gray-50 dark:bg-gray-900 transition-colors">
717
  <p class="text-xl font-bold text-purple-600 dark:text-purple-400 mb-4">هذا القسم قيد الإنشاء!</p>
 
725
 
726
  renderFooter();
727
 
728
+ // إدارة الـ Menu Overlay
729
  const existingMenu = document.getElementById('menu-overlay');
730
  const appContainer = document.getElementById('app-container');
731