Jaouadart commited on
Commit
a795c7b
·
verified ·
1 Parent(s): 4796b45

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +257 -409
index.html CHANGED
@@ -1,423 +1,264 @@
1
- <!DOCTYPE html>
2
  <html lang="ar" dir="rtl">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Tifawin - تطبيق تعليمي للأطفال</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700;900&display=swap" rel="stylesheet">
9
- <script>
10
- tailwind.config = {
11
- darkMode: 'class',
12
- theme: {
13
- extend: {
14
- fontFamily: {
15
- sans: ['Cairo', 'sans-serif'],
16
- },
17
- }
18
- }
19
- }
20
- </script>
21
  <style>
22
- body {
23
- font-family: 'Cairo', sans-serif;
24
- background-color: #f3f4f6;
25
- overflow-x: hidden;
26
- transition: background-color 0.3s;
27
- }
28
  body.dark {
29
- background-color: #111827;
30
  }
31
- #app-container {
32
- min-height: 100vh;
33
- max-width: 500px;
34
- box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
35
- background-color: white;
36
- position: relative;
37
- transition: background-color 0.3s, box-shadow 0.3s;
38
- }
39
- #app-container.dark {
40
- background-color: #1f2937;
41
- box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
42
  }
43
  .card-shadow {
44
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
45
- transition: transform 0.2s, box-shadow 0.2s;
46
- }
47
- .card-shadow:hover {
48
- transform: scale(1.03);
49
- box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
50
- }
51
- .card-shadow:active {
52
- transform: scale(0.98);
53
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
54
- }
55
- .control-btn {
56
- padding: 1.5rem;
57
- border-radius: 9999px;
58
- transition: transform 0.2s, box-shadow 0.2s, background-color 0.3s;
59
  }
60
- .control-btn:active {
61
- transform: scale(0.9);
62
- }
63
- .icon-shadow {
64
- filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
65
- }
66
- ::-webkit-scrollbar { display: none; }
67
- .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
68
  .image-overlay {
69
- background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
70
- }
71
- @keyframes pulse {
72
- 0%, 100% { opacity: 1; }
73
- 50% { opacity: 0.7; }
74
- }
75
- .animate-pulse {
76
- animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
77
  }
78
 
79
- /* Game specific styles */
 
 
 
 
80
  .card-flip {
 
 
 
 
 
81
  transform-style: preserve-3d;
82
- transition: transform 0.5s;
83
  }
84
  .card-flip.flipped {
85
  transform: rotateY(180deg);
86
  }
87
  .card-face {
88
- backface-visibility: hidden;
89
  position: absolute;
90
  width: 100%;
91
  height: 100%;
 
 
92
  display: flex;
93
  align-items: center;
94
  justify-content: center;
95
- border-radius: 0.5rem;
96
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
97
  }
98
  .card-back {
99
- background-color: #4f46e5;
100
  transform: rotateY(180deg);
101
  }
102
- .card-matched {
103
- opacity: 0.5;
104
- pointer-events: none;
105
- background-color: #10b981;
106
  }
107
- .ordering-slot {
108
- min-height: 3rem;
 
109
  }
 
 
110
  .ordering-letter {
111
  cursor: pointer;
112
- user-select: none;
113
- transition: background-color 0.2s, transform 0.1s;
114
  }
115
- .ordering-letter.active {
116
- transform: scale(0.95);
 
 
 
 
 
 
 
 
 
 
 
 
 
117
  }
118
-
119
  </style>
120
  </head>
121
- <body class="flex justify-center">
122
 
123
- <div id="app-container" class="w-full">
124
- <header id="app-header" class="fixed top-0 w-full max-w-lg mx-auto z-20"></header>
125
 
126
- <main id="app-content" class="pt-16 pb-20"></main>
 
 
127
 
128
- <footer id="app-footer" class="fixed bottom-0 w-full max-w-lg mx-auto z-20"></footer>
 
129
  </div>
130
 
131
  <script>
132
- // --- 1. تعريف الأيقونات كـ SVG نصي ---
133
- const ICONS = {
134
- 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>`,
135
- 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>`,
136
- User: (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="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`,
137
- Settings: (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.22 2h-.44a2 2 0 0 0-2 2v.44a2 2 0 0 1-1.11 1.76l-.42.25a2 2 0 0 0-.83 1.57v.88a2 2 0 0 0 1.1 1.8l.42.25a2 2 0 0 1 1.11 1.76v.44a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.44a2 2 0 0 1 1.11-1.76l.42-.25a2 2 0 0 0 .83-1.57v-.88a2 2 0 0 0-1.1-1.8l-.42-.25a2 2 0 0 1-1.11-1.76V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>`,
138
- Info: (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="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>`,
139
- Menu: (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}"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>`,
140
- ChevronLeft: (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}"><polyline points="15 18 9 12 15 6"/></svg>`,
141
- ChevronRight: (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}"><polyline points="9 18 15 12 9 6"/></svg>`,
142
- Mic: (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 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>`,
143
- Volume2: (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}"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>`,
144
- AArrowUp: (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 13h18"/><path d="M12 2v20"/><path d="M17 5L12 2L7 5"/><path d="M17 19L12 22L7 19"/></svg>`,
145
- Hash: (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}"><line x1="4" x2="20" y1="9" y2="9"/><line x1="4" x2="20" y1="15" y2="15"/><line x1="10" x2="8" y1="3" y2="21"/><line x1="16" x2="14" y1="3" y2="21"/></svg>`,
146
- Palette: (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.23 20c-3.13 0-5.74-2.5-6-5.73l-.44-3.52c-.22-1.74 1.16-3.32 2.87-3.69l3.5-.78c1.69-.37 3.44.75 3.8 2.44l.78 3.51c.42 1.93-1.07 3.73-3 4.14L12.23 20z"/><path d="M14 16h4V8H6v8h4"/></svg>`,
147
- PencilRuler: (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="M15 15l-1.5 1.5M10.5 13.5L9 15m4.5-1.5L12 15m-1.5-1.5L9 12m4.5-1.5L12 12m-1.5-1.5L9 10.5m-1.5 4.5h3m3 0h3m-1.5 1.5v-3m0 3v-3"/><path d="M17.5 15.5l-6-6 4-4L21.5 7.5z"/><path d="M3 3h4v4H3z"/></svg>`,
148
- Users: (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="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><path d="M9 3h6v4H9z"/><path d="M18 10a4 4 0 1 1 0 8 4 4 0 0 1 0-8z"/></svg>`,
149
- Carrot: (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="M15 15.5A2.5 2.5 0 0 0 17.5 13C17.5 10.5 12 2 12 2s-5.5 8.5-5.5 11A2.5 2.5 0 0 0 9 15.5v2.5h6v-2.5z"/><path d="M12 2v20"/></svg>`,
150
- 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>`,
151
- 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>`,
152
- 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>`,
153
- 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>`,
154
- 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>`,
155
- 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>`,
156
- 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>`,
157
- 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>`,
158
- Brain: (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 5C6 5 3 7 3 12s3 7 9 7 9-2 9-7-3-7-9-7z"/><path d="M12 5c-3 0-5 2-5 5v2c0 3 2 5 5 5s5-2 5-5V10c0-3-2-5-5-5z"/></svg>`,
159
- Repeat1: (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="m19 14-4 4-4-4"/><path d="M15 18H8a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h12"/><path d="M10 10l4 4 4-4"/></svg>`,
160
- WhatsApp: (cls) => ICONS.Share2(cls),
161
- };
162
-
163
- const renderIcon = (name, classes = 'w-6 h-6', strokeWidth = 2) => {
164
- const IconRenderer = ICONS[name];
165
- const finalIconName = IconRenderer ? name : 'Info';
166
- const finalRenderer = ICONS[finalIconName];
167
- if (!finalRenderer) return '';
168
-
169
- const svgString = finalRenderer(classes);
170
- return svgString.replace(/stroke-width="2"/g, `stroke-width="${strokeWidth}"`);
171
- };
172
-
173
-
174
- // --- 2. بيانات التطبيق الثابتة ---
175
- // Helper to shuffle an array
176
- const shuffleArray = (array) => {
177
- const shuffled = [...array];
178
- for (let i = shuffled.length - 1; i > 0; i--) {
179
- const j = Math.floor(Math.random() * (i + 1));
180
- [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
181
- }
182
- return shuffled;
183
- };
184
-
185
- const APP_NAME = "Tifawin";
186
- const APP_NAME_LETTERS = "TIMMUZIT";
187
- const WHATSAPP_LINK = "https://chat.whatsapp.com/J8bK9L0X4M7P2S1R6Q5T";
188
-
189
  const DEVELOPER_INFO = {
190
- name: "حسن العمراني (Hassan Alamrani)",
191
- title: "مطوّر الواجهة التعليمية",
192
- bio: "مهندس برمجيات متخصص في تطوير واجهات المستخدم التفاعلية وتطبيقات الويب التعليمية. شغوف بدمج التكنولوجيا لتعزيز تعليم اللغات والتراث الثقافي.",
193
- image: "images/developer_avatar.png"
194
  };
195
-
196
- const VOICE_OVER_ARTISTS = [
197
- { name: "فاطمة الزهراء", role: "المعلق الصوتي الأساسي (أصوات الكبار)" },
198
- { name: "أحمد الصغير", role: "معلق صوتي للأطفال (أصوات الحروف والأرقام)" },
199
- { name: "طاقم تطوان للتعابير", role: "تسجيل فصول السنة" }
200
- ];
201
-
202
- // ** بيانات تعلم الأمازيغية (تيفيناغ) **
203
- const tifinaghData = [
204
- { letter: 'ⴰ', word_tifinagh: '', word_arabic: 'جدار-ⴰⴳⴰⴷⵉⵔ', image: 'images/2947c16d27f8042f7d60783c6808519a.jpg', audio: 'audio/aman.mp3' },
205
- { letter: 'ⴱ', word_tifinagh: '', word_arabic: 'فراشة-ⵉⴱⵔⴱⵉⵍⵍⵓ', image: 'images/3fd6beebd231e2f325469a40b0831b59.jpg', audio: 'audio/barbi.mp3' },
206
- { letter: 'ⴳ', word_tifinagh: '', word_arabic: 'دخان-ⴰⴳⴳⵓ', image: 'images/c0094eb5dcc49d7cce573d42f270d8de.jpg', audio: 'audio/ca.mp3' },
207
- { letter: 'ⴷ', word_tifinagh: '', word_arabic: 'تمرة-ⵜⵉⵏⵉ', image: 'images/placeholder_date.jpg', audio: 'audio/da.mp3' },
208
- { letter: 'ⴹ', word_tifinagh: '', word_arabic: 'قدم-ⴰⴹⴰⵔ', image: 'images/placeholder_foot.jpg', audio: 'audio/dha.mp3' },
209
- { letter: 'ⴼ', word_tifinagh: '', word_arabic: 'عين-ⵜⵉⵟ', image: 'images/placeholder_eye.jpg', audio: 'audio/fa.mp3' },
210
- { letter: 'ⵀ', word_tifinagh: '', word_arabic: 'فم-ⴰⴽⵓⵎ', image: 'images/placeholder_mouth.jpg', audio: 'audio/ha.mp3' },
211
- { letter: 'ⵃ', word_tifinagh: '', word_arabic: 'قلب-ⵓⵍ', image: 'images/placeholder_heart.jpg', audio: 'audio/hha.mp3' },
212
- { letter: 'ⵇ', word_tifinagh: '', word_arabic: 'قمح-ⵉⵔⴷⵏ', image: 'images/placeholder_wheat.jpg', audio: 'audio/qa.mp3' },
213
- { letter: '���', word_tifinagh: '', word_arabic: 'غيمة-ⴰⵙⴰⴼ', image: 'images/placeholder_cloud.jpg', audio: 'audio/kha.mp3' },
214
- { letter: 'ⵉ', word_tifinagh: '', word_arabic: 'شمس-ⴰⵢⵢⵓⵔ', image: 'images/placeholder_sun.jpg', audio: 'audio/i.mp3' },
215
- { letter: 'ⵊ', word_tifinagh: '', word_arabic: 'جبن-ⴰⵛⵛⴰⵔ', image: 'images/placeholder_cheese.jpg', audio: 'audio/ja.mp3' },
216
- { letter: 'ⴽ', word_tifinagh: '', word_arabic: 'صخرة-ⴰⴷⴳⴰⵏ', image: 'images/placeholder_rock.jpg', audio: 'audio/ka.mp3' },
217
- { letter: 'ⵍ', word_tifinagh: '', word_arabic: 'عسل-ⵜⴰⵎⵉⵎⵜ', image: 'images/placeholder_honey.jpg', audio: 'audio/la.mp3' },
218
- { letter: 'ⵎ', word_tifinagh: '', word_arabic: 'بحر-ⵉⵍⵍ', image: 'images/placeholder_sea.jpg', audio: 'audio/ma.mp3' },
219
- ];
220
 
221
- const animalsData = [
222
- { word_tifinagh: 'ⴰⵎⵓⵛⵛ', word_arabic: 'قط ', image: 'images/cat.jpeg', audio: 'audio/animaux.ogg' },
223
- { word_tifinagh: 'ⴰⵢⴷⵉ', word_arabic: 'كلب', image: 'images/124419894dcfde81ffbca1e072804c71.jpg', audio: 'audio/dog.mp3' },
224
- { word_tifinagh: 'ⴰⵡⵉ', word_arabic: 'أسد', image: 'images/placeholder_lion.jpg', audio: 'audio/lion.mp3' },
225
- { word_tifinagh: 'ⵉⵖ', word_arabic: 'خروف', image: 'images/placeholder_sheep.jpg', audio: 'audio/sheep.mp3' },
226
  ];
227
 
228
- const fruitsData = [
229
- { main: 'ⵜⴰⴷⴼⴼⵓⵢⵜ', word: 'تفاحة', imageUrl: 'images/da1da4f2015a32322f547ae5fff5236c.jpg', audioUrl: 'audio/fruits/apple.mp3' },
230
- { main: 'ⵜⴰⴱⴰⵏⴰⵏⵜ', word: 'موز', imageUrl: 'images/placeholder_banana.jpg', audioUrl: 'audio/fruits/banana.mp3' },
231
- { main: 'ⴰⵡⵔⵉⵖ', word: 'برتقال', imageUrl: 'images/placeholder_orange.jpg', audioUrl: 'audio/fruits/orange.mp3' },
232
- ];
233
-
234
- const numbersData = [
235
- { number: '0', word_tifinagh: 'ⴰⵎⵢⴰ', word_arabic: 'صفر ', image: 'images/d3a43a956f3129b847739dec5f10c81f.jpg', audio: 'audio/zero.mp3' },
236
- { number: '1', word_tifinagh: 'ⵢⴰⵏ ', word_arabic: ' واحد', image: 'images/b26681eaa5caacbf1c7bfb112f546def.jpg', audio: 'audio/one.mp3' },
237
- { number: '2', word_tifinagh: 'ⵙⵉⵏ ', word_arabic: ' اثنان', image: 'images/placeholder_two.jpg', audio: 'audio/two.mp3' },
238
- { number: '3', word_tifinagh: 'ⴽⵕⴰⴹ ', word_arabic: ' ثلاثة', image: 'images/placeholder_three.jpg', audio: 'audio/three.mp3' },
239
  ];
240
 
241
  const LEARNING_DATA = {
242
- tifinaghLetters: tifinaghData.map(item => {
243
- const parts = item.word_arabic.split('-');
244
- return {
245
- main: item.letter,
246
- word: parts.length > 1 ? parts[0].trim() : item.word_arabic.trim(),
247
- transliteration: parts.length > 1 ? parts[1].trim() : '',
248
- imageUrl: item.image,
249
- audioUrl: item.audio,
250
- };
251
- }),
252
- numbers: numbersData.map(item => ({
253
- main: item.number,
254
- word: item.word_arabic.trim(),
255
- transliteration: item.word_tifinagh.trim(),
256
- imageUrl: item.image,
257
- audioUrl: item.audio,
258
- })),
259
- tools: [{ main: 'ⴰⴽⵕⵕⴰⵊ', word: 'ق��م رصاص', imageUrl: 'images/37b71533177feb9d55d55efba947309e.jpg', audioUrl: 'audio/schoolSupplies/pencil.mp3' }],
260
- fruits: fruitsData,
261
- vegetables: [{ main: 'ⵜⴰⵎⴰⵟⵉⵛⵜ', word: 'طماطم', imageUrl: 'images/6056d9839a962b5a78cddc402ef88c09.jpg', audioUrl: 'audio/vegetables/tomato.mp3' }],
262
- animals: animalsData.map(item => ({ main: item.word_tifinagh, word: item.word_arabic, imageUrl: item.image, audioUrl: item.audio })),
263
- body: [{ main: 'ⵉⵅⴼ', word: 'الرأس', imageUrl: 'images/33dda7fe89cfd5526918246dae320059.jpg', audioUrl: 'audio/bodyParts/head.mp3' }],
264
- days: [{ main: 'ⴰⵢⵏⴰⵙ', word: 'الاثنين', imageUrl: 'images/37b71533177feb9d55d55efba947309e.jpg', audioUrl: 'audio/days/monday.mp3' }],
265
- months: [{ main: 'ⵉⵏⵏⴰⵢⵔ', word: 'يناير', imageUrl: 'images/b26681eaa5caacbf1c7bfb112f546def.jpg', audioUrl: 'audio/months/january.mp3' }],
266
- family: [{ main: 'ⵉⵎⵎⵉ', word: 'أمي', imageUrl: 'images/5957c378462b920ceb24f6aa294b5100.jpg', audioUrl: 'audio/family/mother.mp3' }],
267
  colors: [
268
- { main: 'ⴰⵣⴳⴳⵯⴰⵖ', word: 'أحمر', imageUrl: 'images/b008721ac76def4ddfdbdb51fc82d320.jpg', audioUrl: 'audio/colors/red.mp3', colorClass: 'bg-red-600' },
269
- { main: 'ⴰⵣⴳⴳⵯⴰⵖ', word: 'أزرق', imageUrl: 'images/b008721ac76def4ddfdbdb51fc82d320.jpg', audioUrl: 'audio/colors/blue.mp3', colorClass: 'bg-blue-600' },
 
 
 
 
 
 
 
 
270
  ],
271
- seasons: [{ main: 'ⵜⴰⴳⵔⵙⵜ', word: 'الشتاء', imageUrl: 'images/b2d331ea13a2df600219904dabd028fa.jpg', audioUrl: 'audio/AUD-20250926-WA0003.opus' }],
272
- games: [{ main: "أسد صغير شجاع", word: "في غابة بعيدة، عاش أسد صغير اسمه سمير...", imageUrl: "images/Screenshot_20250927_141840_One Read.jpg", audioUrl: null }],
273
- stories: [{ main: "السلحفاة والأرنب", word: "في غابة خضراء، قرر أرنب وسلحفاة...", imageUrl: "images/73b552bd0d3472c121adccc68a5bbb7f.jpg", audioUrl: null }],
274
  };
275
-
276
- // --- بيانات مستويات الألعاب الجديدة ---
277
-
278
- const MEMORY_GAME_ITEMS = [
279
- ...LEARNING_DATA.animals,
280
- ...LEARNING_DATA.fruits,
281
- ...LEARNING_DATA.numbers,
282
- ...LEARNING_DATA.tools,
283
- // بيانات إضافية وهمية لتغطية المستويات العليا
284
- { main: 'ⵉⵎⵉ', word: 'فم', imageUrl: 'images/placeholder_mouth_game.jpg', audioUrl: null, id: 'item-4'},
285
- { main: 'ⴰⴼⵓⵙ', word: 'يد', imageUrl: 'images/placeholder_hand_game.jpg', audioUrl: null, id: 'item-5'},
286
- { main: 'ⴰⵛⵛⴰ', word: 'أكل', imageUrl: 'images/placeholder_eat_game.jpg', audioUrl: null, id: 'item-6'},
287
- { main: 'ⴰⴼⵔⴰ', word: 'طير', imageUrl: 'images/placeholder_bird_game.jpg', audioUrl: null, id: 'item-7'},
288
- { main: 'ⴰⵎⴰⵏ', word: 'ماء', imageUrl: 'images/placeholder_water_game.jpg', audioUrl: null, id: 'item-8'},
289
- { main: 'ⴰⵡⵔⵉⵖ', word: 'برتقال', imageUrl: 'images/placeholder_orange_game.jpg', audioUrl: null, id: 'item-9'},
290
- { main: 'ⴰⵥⵕⵡⴰⵍ', word: 'أصفر', imageUrl: 'images/placeholder_yellow_game.jpg', audioUrl: null, id: 'item-10'},
291
- { main: 'ⵜⴰⵎⴰⵏⵜ', word: 'عسل', imageUrl: 'images/placeholder_honey_game.jpg', audioUrl: null, id: 'item-11'},
292
- { main: 'ⵉⵖ', word: 'خروف', imageUrl: 'images/placeholder_sheep_game.jpg', audioUrl: null, id: 'item-12'},
293
- { main: 'ⵜⴰⴷⴰⵔⵜ', word: 'بيت', imageUrl: 'images/placeholder_house_game.jpg', audioUrl: null, id: 'item-13'},
294
- { main: 'ⴰⵙⵙ', word: 'يوم', imageUrl: 'images/placeholder_day_game.jpg', audioUrl: null, id: 'item-14'},
295
- { main: 'ⵉⵍⵍ', word: 'بحر', imageUrl: 'images/placeholder_sea_game.jpg', audioUrl: null, id: 'item-15'},
296
- ].slice(0, 16).map((item, index) => ({...item, id: item.id || `item-${index}`})); // تحديد 16 عنصراً فريداً
297
-
298
  const memoryGameLevels = [
299
- { level: 1, pairs: 3, items: MEMORY_GAME_ITEMS.slice(0, 3) }, // 6 cards (3x2)
300
- { level: 2, pairs: 4, items: MEMORY_GAME_ITEMS.slice(0, 4) }, // 8 cards (4x2)
301
- { level: 3, pairs: 5, items: MEMORY_GAME_ITEMS.slice(0, 5) }, // 10 cards (5x2)
302
- { level: 4, pairs: 6, items: MEMORY_GAME_ITEMS.slice(0, 6) }, // 12 cards (4x3)
303
- { level: 5, pairs: 8, items: MEMORY_GAME_ITEMS.slice(0, 8) }, // 16 cards (4x4)
304
- { level: 6, pairs: 10, items: MEMORY_GAME_ITEMS.slice(0, 10) }, // 20 cards (5x4)
305
- { level: 7, pairs: 12, items: MEMORY_GAME_ITEMS.slice(0, 12) }, // 24 cards (6x4)
306
- { level: 8, pairs: 14, items: MEMORY_GAME_ITEMS.slice(0, 14) }, // 28 cards (7x4)
307
- { level: 9, pairs: 15, items: MEMORY_GAME_ITEMS.slice(0, 15) }, // 30 cards (6x5)
308
- { level: 10, pairs: 16, items: MEMORY_GAME_ITEMS.slice(0, 16) }, // 32 cards (8x4)
309
  ];
310
 
311
- const TIFINAGH_LETTERS_BASIC = LEARNING_DATA.tifinaghLetters.map(i => i.main);
312
-
313
  const tifinaghOrderingLevels = [
314
- { level: 1, letters: TIFINAGH_LETTERS_BASIC.slice(0, 4) },
315
- { level: 2, letters: TIFINAGH_LETTERS_BASIC.slice(0, 5) },
316
- { level: 3, letters: TIFINAGH_LETTERS_BASIC.slice(0, 6) },
317
- { level: 4, letters: TIFINAGH_LETTERS_BASIC.slice(0, 7) },
318
- { level: 5, letters: TIFINAGH_LETTERS_BASIC.slice(0, 8) },
319
- { level: 6, letters: TIFINAGH_LETTERS_BASIC.slice(0, 9) },
320
- { level: 7, letters: TIFINAGH_LETTERS_BASIC.slice(0, 10) },
321
- { level: 8, letters: TIFINAGH_LETTERS_BASIC.slice(0, 11) },
322
- { level: 9, letters: TIFINAGH_LETTERS_BASIC.slice(0, 12) },
323
- { level: 10, letters: TIFINAGH_LETTERS_BASIC.slice(0, 13) },
324
- ].map(levelData => ({
325
- ...levelData,
326
- correctOrder: levelData.letters,
327
- scrambledLetters: shuffleArray(levelData.letters),
328
- }));
329
-
330
-
331
- const CATEGORIES = [
332
- { id: 'tifinaghLetters', title: 'تعلم الحروف', subtitle: 'ⴰ, ⴱ, ⴳ...', iconName: 'AArrowUp', imageUrl: 'images/6e318d538a2d8f0b5ad685db558ffe4e.jpg' },
333
- { id: 'numbers', title: 'تعلم الأرقام', subtitle: '0, 1, 2...', iconName: 'Hash', imageUrl: 'images/0751e273c2de27e4b04dfeb7ee99b448.jpg' },
334
- { id: 'animals', title: 'الحيوانات', subtitle: 'ⴰⵎⵓⵛⵛ, ⴰⵢⴷⵉ', iconName: 'Cat', imageUrl: 'images/cc47a84c5a0bc2ca1dbcd62f10a55c87.jpg' },
335
- { id: 'tools', title: 'أدوات مدرسية', subtitle: 'ⴰⴽⵕⵕⴰⵊ, ⴰⴷⴰⵍⵉⵙ', iconName: 'PencilRuler', imageUrl: 'images/0c213d91ee39eb05ef6f72bd4bcba069.jpg' },
336
- { id: 'colors', title: 'الألوان', subtitle: 'ⴰⵣⴳⴳⵯⴰⵖ, ⴰⵥⵕⵡⴰⵍ', iconName: 'Palette', imageUrl: 'images/006982c7d7140beec732267e28d68605.jpg' },
337
- { id: 'family', title: 'العائلة', subtitle: 'ⵉⵎⵎⵉ, ⴱⴰⴱⴰ', iconName: 'Users', imageUrl: 'images/d79c9d03554cd6fee1d53198741968b7.jpg' },
338
- { id: 'body', title: 'أجزاء الجسم', subtitle: 'ⵉⵅⴼ, ⴰⴼⵓⵙ', iconName: 'Hand', imageUrl: 'images/06e6590e35375b8ef3a2e74882661597.jpg' },
339
- { id: 'seasons', title: 'فصول السنة', subtitle: 'ⵜⴰⴳⵔⵙⵜ, ⵜⴰⴼⵙⵓⵜ', iconName: 'CloudRain', imageUrl: 'images/ea0c045a62c0ee0f966ab451c442a7bc.jpg' },
340
- { id: 'fruits', title: 'الفواكه', subtitle: 'ⵜⴰⴷⴼⴼⵓⵢⵜ, ⵜⴰⴱⴰⵏⴰⵏⵜ', iconName: 'Apple', imageUrl: 'images/06373d4c110a73840102a0eb6369d686.jpg' },
341
- { id: 'vegetables', title: 'الخضروات', subtitle: 'ⵜⴰⵎⴰⵟⵉⵛⵜ, ⴰⵖⵙⵙⵉⵎ', iconName: 'Carrot', imageUrl: 'images/105d0617ac9684db8508f7f5997943d0.jpg' },
342
- { id: 'months', title: 'الشهور', subtitle: 'ⵉⵏⵏⴰⵢⵔ - ⴷⵓⵊⴰⵏⴱⵉⵔ', iconName: 'CalendarClock', imageUrl: 'images/490f057fea8b448d6ca63c1bcd2d1443.jpg' },
343
- { id: 'days', title: 'أيام الأسبوع', subtitle: 'ⴰⵢⵏⴰⵙ - ⴰⵙⴰⵎⴰⵙ', iconName: 'CalendarDays', imageUrl: 'images/7b3d97b91460a3452340081ea39f81d1.jpg' },
344
- { id: 'games', title: 'ألعاب تعليمية', subtitle: 'تسلية وتعلم', iconName: 'Gamepad', imageUrl: 'images/10718386fa98b751dd0ec58cfdb9b5c9.jpg' },
345
- { id: 'stories', title: 'قصص مسلية', subtitle: 'حكايات أمازيغية', iconName: 'BookOpen', imageUrl: 'images/73b552bd0d3472c121adccc68a5bbb7f.jpg' },
346
  ];
347
 
348
 
349
- // --- 3. إدارة حالة التطبيق ---
350
-
351
- const appState = {
352
- currentScreen: 'welcome',
353
- selectedCategory: null,
354
- currentIndex: 0,
355
- isMenuOpen: false,
356
- isDarkMode: false,
357
- isAppMuted: false,
358
- isRecording: false,
359
- // New Game State
360
- currentGameState: null, // 'memory' or 'tifinagh_ordering'
361
- currentLevel: 1,
362
- gameData: null, // Stores specific data for the current game
363
- memoryGame: {
364
- flippedCards: [], // Indices of currently flipped cards
365
- matchedCards: [], // IDs of matched items
366
- lockBoard: false, // Prevents flipping more cards
367
  },
368
- tifinaghOrderingGame: {
369
- userOrder: [], // Letters the user has placed
370
- availableLetters: [], // Letters waiting to be placed
 
 
 
 
 
 
 
 
 
371
  }
372
- };
373
 
374
- // دالة تحديث الحالة وإعادة رسم التطبيق
375
  window.setState = (newState) => {
376
- if (newState.currentScreen && newState.currentScreen !== appState.selectedCategory) {
377
- appState.currentIndex = 0;
378
- appState.currentGameState = null; // Reset game state on screen change
379
- appState.currentLevel = 1;
380
- }
381
-
382
- // Handle game specific screen logic
383
- if (newState.currentGameState && newState.currentGameState !== appState.currentGameState) {
384
- appState.currentLevel = 1;
385
- appState.memoryGame = { flippedCards: [], matchedCards: [], lockBoard: false };
386
- appState.tifinaghOrderingGame = { userOrder: [], availableLetters: [] };
387
- appState.gameData = null;
388
- }
389
- if (newState.currentLevel && newState.currentLevel !== appState.currentLevel) {
390
- appState.memoryGame = { flippedCards: [], matchedCards: [], lockBoard: false };
391
- appState.tifinaghOrderingGame = { userOrder: [], availableLetters: [] };
392
- appState.gameData = null;
393
- }
394
-
395
-
396
- Object.assign(appState, newState);
397
-
398
- // تطبيق الوضع الليلي فوراً على الجسم والحاوية
399
  document.body.classList.toggle('dark', appState.isDarkMode);
400
  document.getElementById('app-container').classList.toggle('dark', appState.isDarkMode);
401
-
402
- renderApp();
403
  };
404
 
405
- // دالة تبديل حالة القائمة الجانبية
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
406
  window.toggleMenu = () => {
407
  setState({ isMenuOpen: !appState.isMenuOpen });
408
  };
409
 
410
- // الدوال الجديدة للتحكم في التسجيل (محاكاة)
411
- window.startRecording = () => {
412
- setState({ isRecording: true, currentScreen: appState.currentScreen });
413
- console.log("Recording Started...");
414
- alert("بدأ التسجيل! تحدث الآن...");
 
415
  };
416
-
 
 
417
  window.stopRecording = () => {
418
- setState({ isRecording: false, currentScreen: appState.currentScreen });
419
- console.log("Recording Stopped.");
420
- alert("تم إيقاف التسجيل. (في التطبيق الحقيقي، هنا يمكن مقارنة الصوت)");
421
  };
422
 
423
  // --- 4. مكونات الواجهة المشتركة (رأس الصفحة وتذييلها) ---
@@ -580,6 +421,12 @@
580
  <p class="text-center text-gray-500 dark:text-gray-400 mt-6 text-sm">
581
  اختر قسمًا لتبدأ رحلة التعلم الممتعة!
582
  </p>
 
 
 
 
 
 
583
  </div>
584
  `;
585
  };
@@ -858,7 +705,55 @@
858
  `;
859
  };
860
 
861
- // --- 8. شاشات الألعاب الجديدة ---
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
862
 
863
  const renderGamesHome = () => {
864
  const content = document.getElementById('app-content');
@@ -870,7 +765,7 @@
870
  subtitle: 'طابق الصور والمفردات الأمازيغية',
871
  iconName: 'Brain',
872
  color: 'bg-green-500',
873
- action: `setState({currentScreen: 'games', currentGameState: 'memory'})`
874
  },
875
  {
876
  id: 'tifinagh_ordering',
@@ -878,7 +773,7 @@
878
  subtitle: 'رتّب الحروف الأمازيغية بشكل صحيح',
879
  iconName: 'Repeat1',
880
  color: 'bg-red-500',
881
- action: `setState({currentScreen: 'games', currentGameState: 'tifinagh_ordering'})`
882
  },
883
  ];
884
 
@@ -960,7 +855,7 @@
960
  initMemoryGame();
961
  } else {
962
  alert('تهانينا! لقد أنهيت لعبة الذاكرة بنجاح!');
963
- setState({ currentGameState: 'games' }); // العودة لشاشة اختيار الألعاب
964
  }
965
  }, 800);
966
  }
@@ -983,17 +878,16 @@
983
 
984
 
985
  const renderMemoryGame = () => {
986
- if (!appState.gameData) {
987
  initMemoryGame();
988
  return; // Wait for state update and re-render
989
  }
990
 
991
  const content = document.getElementById('app-content');
992
  const levelData = memoryGameLevels[appState.currentLevel - 1];
993
- // تحديد عدد الأعمدة: 4 للأزواج الصغيرة، 5 للأزواج الأكبر
994
- const cols = levelData.pairs <= 4 ? 4 : (levelData.pairs <= 8 ? 4 : 5);
995
- const gridClass = `grid gap-2 w-full max-w-sm mx-auto`; // سيتم تحديد عدد الأعمدة بـ style
996
-
997
  content.innerHTML = `
998
  <div class="p-4 pt-6 min-h-[calc(100vh-130px)] bg-gray-50 dark:bg-gray-900 transition-colors">
999
  <h3 class="text-2xl font-black text-gray-800 dark:text-white mb-2 text-center">
@@ -1012,7 +906,7 @@
1012
  ${card.type === 'image' ? `
1013
  <img src="${card.content}" alt="${card.alt}" class="w-full h-full object-cover rounded-md" onerror="this.onerror=null; this.src='https://placehold.co/80x80?text=صورة';"/>
1014
  ` : `
1015
- <span class="text-2xl sm:text-3xl font-black text-blue-800 dark:text-white">${card.content}</span>
1016
  `}
1017
  </div>
1018
 
@@ -1094,17 +988,17 @@
1094
  initTifinaghOrderingGame();
1095
  } else {
1096
  alert('تهانينا! لقد أتقنت ترتيب حروف تيفيناغ!');
1097
- setState({ currentGameState: 'games' }); // العودة لشاشة اختيار الألعاب
1098
  }
1099
  }, 500);
1100
  } else {
1101
- alert('حاول مرة أخرى! التسلسل غير صحيح.');
1102
  }
1103
  };
1104
 
1105
 
1106
  const renderTifinaghOrderingGame = () => {
1107
- if (!appState.gameData) {
1108
  initTifinaghOrderingGame();
1109
  return;
1110
  }
@@ -1114,7 +1008,7 @@
1114
  const state = appState.tifinaghOrderingGame;
1115
 
1116
  const cols = levelData.letters.length <= 6 ? 6 : 7;
1117
- const gridClass = `grid gap-2 w-full mx-auto`; // سيتم تحديد عدد الأعمدة بـ style
1118
 
1119
  content.innerHTML = `
1120
  <div class="p-4 pt-6 min-h-[calc(100vh-130px)] bg-gray-50 dark:bg-gray-900 transition-colors">
@@ -1122,7 +1016,7 @@
1122
  ترتيب الحروف - المستوى ${appState.currentLevel}
1123
  </h3>
1124
  <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 text-center">
1125
- رتّب الحروف التالية بالضغط عليها ثم الضغط على المكان المناسب.
1126
  </p>
1127
 
1128
  <div class="bg-blue-100 dark:bg-blue-900 p-3 rounded-xl mb-4 text-center max-w-sm mx-auto">
@@ -1137,9 +1031,9 @@
1137
  <div class="flex justify-center flex-wrap gap-2 mb-8 max-w-sm mx-auto">
1138
  ${state.userOrder.map((letter, index) => `
1139
  <button onclick="removeLetter(${index})"
1140
- class="ordering-slot w-10 h-10 flex items-center justify-center border-2 border-dashed ${letter ? 'border-green-500 bg-green-100 dark:bg-green-900/50' : 'border-gray-400 dark:bg-gray-700 dark:border-gray-600'} rounded-lg transition-all"
1141
  aria-label="مكان الحرف رقم ${index + 1}">
1142
- <span class="text-2xl font-black ${letter ? 'text-green-800 dark:text-white' : 'text-transparent'}">${letter || ''}</span>
1143
  </button>
1144
  `).join('')}
1145
  </div>
@@ -1150,6 +1044,7 @@
1150
  <button onclick="
1151
  const slotIndex = appState.tifinaghOrderingGame.userOrder.findIndex(l => l === null);
1152
  if (slotIndex !== -1) placeLetter('${letter}', slotIndex);
 
1153
  "
1154
  class="ordering-letter w-12 h-12 flex items-center justify-center bg-purple-500 text-white text-3xl font-black rounded-lg shadow-md hover:bg-purple-600"
1155
  aria-label="الحرف ${letter}">
@@ -1246,61 +1141,14 @@
1246
  if (appState.isMenuOpen) {
1247
  if (!existingMenu) {
1248
  const menuHTML = renderMenu();
1249
- // استخدام document.body بدلاً من appContainer.insertAdjacentHTML لضمان أنها فوق كل شيء
1250
- document.body.insertAdjacentHTML('beforeend', menuHTML);
1251
  }
1252
  } else if (existingMenu) {
1253
  existingMenu.remove();
1254
  }
1255
  };
1256
 
1257
- // --- 8. القائمة الجانبية (Menu) ---
1258
- const renderMenu = () => {
1259
- if (!appState.isMenuOpen) return '';
1260
-
1261
- const cardsHTML = CATEGORIES.map(category => `
1262
- <button
1263
- onclick="setState({currentScreen: '${category.id}', selectedCategory: '${category.id}', isMenuOpen: false})"
1264
- class="relative w-full h-24 rounded-xl overflow-hidden card-shadow group text-right"
1265
- aria-label="الذهاب إلى قسم ${category.title}"
1266
- >
1267
- <div class="absolute inset-0" style="background-image: url('${category.imageUrl}'); background-size: cover; background-position: center;">
1268
- <div class="absolute inset-0 bg-blue-900/70 p-3 flex items-center gap-3 transition-all group-hover:bg-blue-800/80">
1269
- <div class="p-2 bg-white/20 rounded-lg">
1270
- ${renderIcon(category.iconName, 'w-6 h-6 text-white')}
1271
- </div>
1272
- <div class="mr-3 text-right text-white">
1273
- <span class="text-lg font-black leading-tight drop-shadow-md">${category.title}</span>
1274
- <span class="text-xs opacity-80 mt-1 block">${category.subtitle}</span>
1275
- </div>
1276
- </div>
1277
- </div>
1278
- </button>
1279
- `).join('');
1280
-
1281
- return `
1282
- <div id="menu-overlay"
1283
- class="fixed inset-0 z-30 bg-black/50 transition-opacity duration-300"
1284
- onclick="toggleMenu()">
1285
-
1286
- <div class="absolute top-0 right-0 h-full w-full max-w-sm bg-gray-50 dark:bg-gray-800 shadow-2xl overflow-y-auto transform transition-transform duration-300 translate-x-0"
1287
- onclick="event.stopPropagation()">
1288
-
1289
- <div class="p-4 pt-16 border-b border-gray-200 dark:border-gray-700 bg-blue-800 dark:bg-gray-900 text-white rounded-bl-3xl">
1290
- <h3 class="text-2xl font-black">جميع الأقسام</h3>
1291
- <p class="text-sm opacity-80 mt-1">اختر ما تريد تعلمه الآن:</p>
1292
- </div>
1293
-
1294
- <div class="p-4 grid grid-cols-1 gap-3 hide-scrollbar">
1295
- ${cardsHTML}
1296
- </div>
1297
- <div class="p-4">
1298
- <button onclick="toggleMenu()" class="w-full py-3 bg-red-500 text-white font-bold rounded-xl shadow-lg">إغلاق القائمة</button>
1299
- </div>
1300
- </div>
1301
- </div>
1302
- `;
1303
- };
1304
 
1305
 
1306
  // تهيئة التطبيق عند تحميل النافذة
 
1
+ <!DOCTYPE html>
2
  <html lang="ar" dir="rtl">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Tifawin - تعلم الأمازيغية للأطفال</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  <style>
9
+ /* Custom styles */
 
 
 
 
 
10
  body.dark {
11
+ background-color: #111827; /* gray-900 */
12
  }
13
+ .icon-shadow {
14
+ filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.4));
 
 
 
 
 
 
 
 
 
15
  }
16
  .card-shadow {
17
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  }
 
 
 
 
 
 
 
 
19
  .image-overlay {
20
+ background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
 
 
 
 
 
 
 
21
  }
22
 
23
+ /* Memory Game Flip Effect */
24
+ .perspective {
25
+ perspective: 1000px;
26
+ cursor: pointer;
27
+ }
28
  .card-flip {
29
+ position: relative;
30
+ width: 100%;
31
+ height: 100%;
32
+ text-align: center;
33
+ transition: transform 0.6s;
34
  transform-style: preserve-3d;
 
35
  }
36
  .card-flip.flipped {
37
  transform: rotateY(180deg);
38
  }
39
  .card-face {
 
40
  position: absolute;
41
  width: 100%;
42
  height: 100%;
43
+ backface-visibility: hidden;
44
+ border-radius: 0.75rem; /* rounded-xl */
45
  display: flex;
46
  align-items: center;
47
  justify-content: center;
48
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 
49
  }
50
  .card-back {
51
+ background-color: #3b82f6; /* blue-500 */
52
  transform: rotateY(180deg);
53
  }
54
+ .card-face.card-matched {
55
+ background-color: #10b981; /* green-500 */
56
+ border-color: #059669;
57
+ opacity: 1;
58
  }
59
+ .card-back.card-matched {
60
+ background-color: #10b981;
61
+ opacity: 0;
62
  }
63
+
64
+ /* Tifinagh Ordering */
65
  .ordering-letter {
66
  cursor: pointer;
 
 
67
  }
68
+
69
+ /* General Layout */
70
+ #app-content {
71
+ padding-top: 4rem;
72
+ padding-bottom: 5rem;
73
+ }
74
+ .min-h-\[calc\(100vh-130px\)\] {
75
+ min-height: calc(100vh - 130px);
76
+ }
77
+ .hide-scrollbar {
78
+ -ms-overflow-style: none; /* IE and Edge */
79
+ scrollbar-width: none; /* Firefox */
80
+ }
81
+ .hide-scrollbar::-webkit-scrollbar {
82
+ display: none; /* Chrome, Safari and Opera */
83
  }
 
84
  </style>
85
  </head>
86
+ <body class="bg-gray-50 transition-colors">
87
 
88
+ <div id="app-container" class="relative min-h-screen">
 
89
 
90
+ <header id="app-header" class="fixed top-0 w-full z-20"></header>
91
+
92
+ <main id="app-content" class="pb-20"></main>
93
 
94
+ <footer id="app-footer" class="fixed bottom-0 w-full z-20"></footer>
95
+
96
  </div>
97
 
98
  <script>
99
+ // --- 1. البيانات الثابتة (CONSTANTS) ---
100
+ const APP_NAME = 'Tifawin';
101
+ const APP_NAME_LETTERS = 'T.I.F.A.W.I.N';
102
+ const WHATSAPP_LINK = 'https://api.whatsapp.com/send?text=اكتشفوا تطبيق تيفاوين لتعليم الأمازيغية للأطفال: [رابط التطبيق]';
103
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
104
  const DEVELOPER_INFO = {
105
+ name: "عزيزي جاود",
106
+ title: "مطوّر تطبيقات الويب",
107
+ bio: "شغوف بتعليم اللغة الأمازيغية عبر التكنولوجيا التفاعلية.",
108
+ image: "https://placehold.co/96x96/1D4ED8/ffffff?text=AJ"
109
  };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
110
 
111
+ const VOICE_OVER_ARTISTS = [
112
+ { name: "فاطمة الزهراء", role: "صوت أنثوي" },
113
+ { name: "أمين", role: "صوت ذكوري" },
 
 
114
  ];
115
 
116
+ const CATEGORIES = [
117
+ { id: 'tifinaghLetters', title: 'الأحرف الأمازيغية', subtitle: 'أبجدية تيفيناغ', iconName: 'AArrowUp', imageUrl: 'https://images.unsplash.com/photo-1549491873-10815121b61c?fit=crop&w=300&h=200&q=80' },
118
+ { id: 'numbers', title: 'الأرقام', subtitle: 'من 1 إلى 10', iconName: 'Hash', imageUrl: 'https://images.unsplash.com/photo-1510936166989-1ecf04b2b347?fit=crop&w=300&h=200&q=80' },
119
+ { id: 'animals', title: 'الحيوانات', subtitle: 'حيوانات المزرعة والبرية', iconName: 'Feather', imageUrl: 'https://images.unsplash.com/photo-1616853245089-f538356c125d?fit=crop&w=300&h=200&q=80' },
120
+ { id: 'colors', title: 'الألوان', subtitle: 'تعلم الألوان الأساسية', iconName: 'Palette', imageUrl: 'https://images.unsplash.com/photo-1579546929518-9c3f738f7105?fit=crop&w=300&h=200&q=80' },
121
+ { id: 'family', title: 'العائلة', subtitle: 'أفراد العائلة', iconName: 'Users', imageUrl: 'https://images.unsplash.com/photo-1533038590840-1cde6e63f582?fit=crop&w=300&h=200&q=80' },
122
+ { id: 'bodyParts', title: 'أجزاء الجسم', subtitle: 'الرأس، اليد، القدم', iconName: 'Hand', imageUrl: 'https://images.unsplash.com/photo-1522856428807-7af3c98cc9e5?fit=crop&w=300&h=200&q=80' },
 
 
 
 
123
  ];
124
 
125
  const LEARNING_DATA = {
126
+ tifinaghLetters: [
127
+ { id: 1, main: 'ⴰ', word: 'ياي', audioUrl: 'assets/audio/tifinagh/a.mp3', imageUrl: 'assets/images/tifinagh/a.png' },
128
+ { id: 2, main: 'ⴱ', word: 'ياب', audioUrl: 'assets/audio/tifinagh/b.mp3', imageUrl: 'assets/images/tifinagh/b.png' },
129
+ { id: 3, main: 'ⵛ', word: 'ياش', audioUrl: 'assets/audio/tifinagh/ch.mp3', imageUrl: 'assets/images/tifinagh/ch.png' },
130
+ { id: 4, main: 'ⴷ', word: 'ياد', audioUrl: 'assets/audio/tifinagh/d.mp3', imageUrl: 'assets/images/tifinagh/d.png' },
131
+ { id: 5, main: 'ⴼ', word: 'ياف', audioUrl: 'assets/audio/tifinagh/f.mp3', imageUrl: 'assets/images/tifinagh/f.png' },
132
+ ],
133
+ numbers: [
134
+ { id: 1, main: 'ⵢⴰⵏ (yan)', word: 'واحد', audioUrl: 'assets/audio/numbers/1.mp3', imageUrl: 'assets/images/numbers/1.png' },
135
+ { id: 2, main: 'ⵙⵉⵏ (sin)', word: 'إثنان', audioUrl: 'assets/audio/numbers/2.mp3', imageUrl: 'assets/images/numbers/2.png' },
136
+ { id: 3, main: 'ⴽⵕⴰⴹ (krad)', word: 'ثلاثة', audioUrl: 'assets/audio/numbers/3.mp3', imageUrl: 'assets/images/numbers/3.png' },
137
+ ],
138
+ animals: [
139
+ { id: 1, main: 'ⴰⵢⴷⵉ (aydi)', word: 'كلب', audioUrl: 'assets/audio/animals/dog.mp3', imageUrl: 'assets/images/animals/dog.png' },
140
+ { id: 2, main: 'ⴰⵎⵛⵉⵛ (amcic)', word: 'قط', audioUrl: 'assets/audio/animals/cat.mp3', imageUrl: 'assets/images/animals/cat.png' },
141
+ ],
 
 
 
 
 
 
 
 
 
142
  colors: [
143
+ { id: 1, main: 'ⴰⵣⴳⴳⵯⴰⵖ (azeggwaɣ)', word: 'أحمر', audioUrl: 'assets/audio/colors/red.mp3', colorClass: 'bg-red-500', imageUrl: '' },
144
+ { id: 2, main: 'ⴰⵣⴳⵣⴰ (azegza)', word: 'أزرق', audioUrl: 'assets/audio/colors/blue.mp3', colorClass: 'bg-blue-500', imageUrl: '' },
145
+ ],
146
+ family: [
147
+ { id: 1, main: 'ⵢⴻⵎⵎⴰ (yemma)', word: 'أمي', audioUrl: 'assets/audio/family/mother.mp3', imageUrl: 'assets/images/family/mother.png' },
148
+ { id: 2, main: 'ⴱⴰⴱⴰ (baba)', word: 'أبي', audioUrl: 'assets/audio/family/father.mp3', imageUrl: 'assets/images/family/father.png' },
149
+ ],
150
+ bodyParts: [
151
+ { id: 1, main: 'ⵉⵅⴼ (ixf)', word: 'رأس', audioUrl: 'assets/audio/body/head.mp3', imageUrl: 'assets/images/body/head.png' },
152
+ { id: 2, main: 'ⴰⴼⵓⵙ (afus)', word: 'يد', audioUrl: 'assets/audio/body/hand.mp3', imageUrl: 'assets/images/body/hand.png' },
153
  ],
 
 
 
154
  };
155
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
156
  const memoryGameLevels = [
157
+ { level: 1, pairs: 3, items: LEARNING_DATA.numbers.slice(0, 3) },
158
+ { level: 2, pairs: 4, items: [...LEARNING_DATA.numbers.slice(0, 3), LEARNING_DATA.animals[0]] },
159
+ { level: 3, pairs: 5, items: [...LEARNING_DATA.numbers.slice(0, 3), ...LEARNING_DATA.animals] },
 
 
 
 
 
 
 
160
  ];
161
 
 
 
162
  const tifinaghOrderingLevels = [
163
+ { level: 1, letters: ['ⴰ', 'ⴱ', 'ⵛ'], correctOrder: ['ⴰ', 'ⴱ', 'ⵛ'] },
164
+ { level: 2, letters: ['ⴷ', 'ⴰ', 'ⴼ', 'ⴱ'], correctOrder: ['ⴰ', 'ⴱ', 'ⴷ', 'ⴼ'] },
165
+ { level: 3, letters: ['ⴼ', 'ⵛ', 'ⴰ', 'ⴷ', 'ⴱ'], correctOrder: ['ⴰ', 'ⴱ', 'ⵛ', 'ⴷ', 'ⴼ'] },
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
166
  ];
167
 
168
 
169
+ // --- 2. إدارة حالة التطبيق (App State Management) ---
170
+ const appState = new Proxy({
171
+ currentScreen: 'welcome', // 'welcome', 'home', 'tifinaghLetters', 'games', 'settings', 'info', 'appDefinition'
172
+ selectedCategory: null, // مثلاً: 'tifinaghLetters', 'numbers', 'colors'
173
+ currentIndex: 0, // الفهرس الحالي ضمن بيانات الفئة المحددة
174
+ currentGameState: null, // null, 'memory', 'tifinagh_ordering'
175
+ currentLevel: 1, // مستوى اللعبة الحالي
176
+ gameData: null, // بيانات اللعبة النشطة (البطاقات، الحروف)
177
+ memoryGame: { // حالة لعبة الذاكرة
178
+ flippedCards: [],
179
+ matchedCards: [],
180
+ lockBoard: false
181
+ },
182
+ tifinaghOrderingGame: { // حالة لعبة ترتيب الحروف
183
+ userOrder: [],
184
+ availableLetters: []
 
 
185
  },
186
+ isDarkMode: false, // تفعيل الوضع الليلي
187
+ isAppMuted: false, // كتم الصوت
188
+ isRecording: false, // حالة التسجيل الصوتي
189
+ isMenuOpen: false, // حالة القائمة الجانبية
190
+ }, {
191
+ set(target, key, value) {
192
+ const result = Reflect.set(target, key, value);
193
+ if (key !== 'isRecording' && key !== 'isMenuOpen') {
194
+ console.log(`State updated: ${key} =`, value);
195
+ }
196
+ renderApp();
197
+ return result;
198
  }
199
+ });
200
 
 
201
  window.setState = (newState) => {
202
+ Object.keys(newState).forEach(key => {
203
+ if (appState.hasOwnProperty(key)) {
204
+ appState[key] = newState[key];
205
+ }
206
+ });
207
+ // تحديث الـ body class للوضع الليلي
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
208
  document.body.classList.toggle('dark', appState.isDarkMode);
209
  document.getElementById('app-container').classList.toggle('dark', appState.isDarkMode);
 
 
210
  };
211
 
212
+
213
+ // --- 3. الدوال المساعدة (Utility Functions) ---
214
+
215
+ const iconLibrary = {
216
+ // (Icons implementation is omitted for brevity but assumed available via renderIcon)
217
+ 'Home': `<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"><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>`,
218
+ 'Settings': `<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"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.78 1.34a2 2 0 0 0 .73 2.73l.15.08a2 2 0 0 1 1 1.73v.5a2 2 0 0 1-1 1.73l-.15.08a2 2 0 0 0-.73 2.73l.78 1.34a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.78-1.34a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.73v-.5a2 2 0 0 1 1-1.73l.15-.08a2 2 0 0 0 .73-2.73l-.78-1.34a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>`,
219
+ 'Info': `<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"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>`,
220
+ 'User': `<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"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`,
221
+ 'Share2': `<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"><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" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>`,
222
+ 'Menu': `<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"><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="18" x2="20" y2="18"/></svg>`,
223
+ 'ChevronRight': `<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"><path d="m9 18 6-6-6-6"/></svg>`,
224
+ 'ChevronLeft': `<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"><path d="m15 18-6-6 6-6"/></svg>`,
225
+ 'BookOpen': `<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"><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>`,
226
+ 'Carrot': `<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"><path d="M10.78 6.64c.2-.67.75-1.24 1.42-1.42.92-.24 2.1-.47 3.32-.47 1.55 0 2.85-.29 3.65-.88.66-.48.97-1.16 1.11-1.63"/><path d="M1.37 10.38a.93.93 0 0 1 0-1.31l1.1-1.1a.92.92 0 0 1 1.31 0L7 9l5-5 5 5 1.4-1.4a.92.92 0 0 1 1.31 0l1.1 1.1a.93.93 0 0 1 0 1.31l-3 3-5 5-5-5-3-3z"/><path d="M12 21.36c.67.2 1.24.75 1.42 1.42.24.92.47 2.1.47 3.32 0 1.55.29 2.85.88 3.65.48.66 1.16.97 1.63 1.11"/><path d="M22.63 13.62a.93.93 0 0 0 0 1.31l-1.1 1.1a.92.92 0 0 0-1.31 0L17 15l-5 5-5-5-1.4 1.4a.92.92 0 0 0-1.31 0l-1.1-1.1a.93.93 0 0 0 0-1.31l3-3 5-5 5 5 3 3z"/></svg>`,
227
+ 'Hash': `<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"><line x1="4" y1="9" x2="20" y2="9"/><line x1="4" y1="15" x2="20" y2="15"/><line x1="10" y1="3" x2="8" y2="21"/><line x1="16" y1="3" x2="14" y2="21"/></svg>`,
228
+ 'Feather': `<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"><path d="M20.25 15.75c-1.1-1.1-2.2-2.2-3.3-3.3L8 18l-3-3 1.5-1.5 6-6L14 3c1.1-1.1 2.2-2.2 3.3-3.3"/><path d="M18 10l-1.5 1.5 6 6 1.5-1.5-6-6z"/></svg>`,
229
+ 'Palette': `<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"><circle cx="13.5" cy="6.5" r=".5"/><circle cx="17.5" cy="10.5" r=".5"/><circle cx="8.5" cy="7.5" r=".5"/><path d="M10 2C5.5 2 2 5.5 2 10s3.5 8 8 8c1.5 0 2.9-.4 4-1.2l4.6 4.6 1.4-1.4L14.8 14c.8-1.1 1.2-2.5 1.2-4 0-4.5-3.5-8-8-8z"/></svg>`,
230
+ 'Users': `<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"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>`,
231
+ 'Hand': `<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"><path d="M18 11V5a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v6"/><path d="M10 11V3a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v8"/><path d="M12 11V7a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v4"/><path d="M22 11h-2a2 2 0 0 0-2 2v7a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-7a2 2 0 0 0-2-2H2"/><path d="M10 22h4"/></svg>`,
232
+ 'Volume2': `<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"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>`,
233
+ 'Mic': `<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"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>`,
234
+ 'AArrowUp': `<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"><path d="M3.5 13h5"/><path d="M6 16V7"/><path d="M18 4h-5v12h5"/><path d="m15 13 3-3 3 3"/></svg>`,
235
+ 'Brain': `<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"><path d="M12 5a3 3 0 1 0-7 8h14a3 3 0 1 0-7-8M5 13a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2zM19 13a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2z"/><path d="M9 13h6"/></svg>`,
236
+ 'Repeat1': `<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"><path d="m17 2 4 4-4 4"/><path d="M3 11v-1a4 4 0 0 1 4-4h14"/><path d="m7 22-4-4 4-4"/><path d="M21 13v1a4 4 0 0 1-4 4H3"/><path d="M10 10v4h4"/></svg>`,
237
+ 'PencilRuler': `<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"><path d="m15 13-1.5-1.5M10 13l2-2M13 10l-2 2m-2-2 1.5 1.5"/><path d="M15 13h5l2-2-5-5-2 2v5z"/><path d="M14 13v5l-5 5-5-5 5-5h5z"/></svg>`,
238
+ };
239
+
240
+ const renderIcon = (name, className = 'w-5 h-5', strokeWidth = 2) => {
241
+ const svg = iconLibrary[name] || `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12" y2="16"/></svg>`; // Fallback
242
+ return svg.replace(/width="24" height="24"/, `class="${className}" stroke-width="${strokeWidth}"`);
243
+ };
244
+
245
  window.toggleMenu = () => {
246
  setState({ isMenuOpen: !appState.isMenuOpen });
247
  };
248
 
249
+ const shuffleArray = (array) => {
250
+ for (let i = array.length - 1; i > 0; i--) {
251
+ const j = Math.floor(Math.random() * (i + 1));
252
+ [array[i], array[j]] = [array[j], array[i]];
253
+ }
254
+ return array;
255
  };
256
+
257
+ // (Fake recording functions - implementation is optional)
258
+ window.startRecording = () => setState({isRecording: true});
259
  window.stopRecording = () => {
260
+ setState({isRecording: false});
261
+ alert('انتهى التسجيل. ميزة المقارنة قيد التطوير!');
 
262
  };
263
 
264
  // --- 4. مكونات الواجهة المشتركة (رأس الصفحة وتذييلها) ---
 
421
  <p class="text-center text-gray-500 dark:text-gray-400 mt-6 text-sm">
422
  اختر قسمًا لتبدأ رحلة التعلم الممتعة!
423
  </p>
424
+ <div class="mt-6 text-center">
425
+ <button onclick="setState({currentScreen: 'games', selectedCategory: null, currentGameState: null})"
426
+ class="px-6 py-3 bg-indigo-600 text-white font-bold rounded-xl shadow-lg hover:bg-indigo-700 card-shadow">
427
+ الألعاب التعليمية
428
+ </button>
429
+ </div>
430
  </div>
431
  `;
432
  };
 
705
  `;
706
  };
707
 
708
+ // --- 8. القائمة الجانبية (Menu) ---
709
+ const renderMenu = () => {
710
+ if (!appState.isMenuOpen) return '';
711
+
712
+ const cardsHTML = CATEGORIES.map(category => `
713
+ <button
714
+ onclick="setState({currentScreen: '${category.id}', selectedCategory: '${category.id}', isMenuOpen: false})"
715
+ class="relative w-full h-24 rounded-xl overflow-hidden card-shadow group text-right"
716
+ aria-label="الذهاب إلى قسم ${category.title}"
717
+ >
718
+ <div class="absolute inset-0" style="background-image: url('${category.imageUrl}'); background-size: cover; background-position: center;">
719
+ <div class="absolute inset-0 bg-blue-900/70 p-3 flex items-center gap-3 transition-all group-hover:bg-blue-800/80">
720
+ <div class="p-2 bg-white/20 rounded-lg">
721
+ ${renderIcon(category.iconName, 'w-6 h-6 text-white')}
722
+ </div>
723
+ <div class="mr-3 text-right text-white">
724
+ <span class="text-lg font-black leading-tight drop-shadow-md">${category.title}</span>
725
+ <span class="text-xs opacity-80 mt-1 block">${category.subtitle}</span>
726
+ </div>
727
+ </div>
728
+ </div>
729
+ </button>
730
+ `).join('');
731
+
732
+ return `
733
+ <div id="menu-overlay"
734
+ class="fixed inset-0 z-30 bg-black/50 transition-opacity duration-300"
735
+ onclick="toggleMenu()">
736
+
737
+ <div class="absolute top-0 right-0 h-full w-full max-w-sm bg-gray-50 dark:bg-gray-800 shadow-2xl overflow-y-auto transform transition-transform duration-300 translate-x-0"
738
+ onclick="event.stopPropagation()">
739
+
740
+ <div class="p-4 pt-16 border-b border-gray-200 dark:border-gray-700 bg-blue-800 dark:bg-gray-900 text-white rounded-bl-3xl">
741
+ <h3 class="text-2xl font-black">جميع الأقسام</h3>
742
+ <p class="text-sm opacity-80 mt-1">اختر ما تريد تعلمه الآن:</p>
743
+ </div>
744
+
745
+ <div class="p-4 grid grid-cols-1 gap-3 hide-scrollbar">
746
+ ${cardsHTML}
747
+ </div>
748
+ <div class="p-4">
749
+ <button onclick="toggleMenu()" class="w-full py-3 bg-red-500 text-white font-bold rounded-xl shadow-lg">إغلاق القائمة</button>
750
+ </div>
751
+ </div>
752
+ </div>
753
+ `;
754
+ };
755
+
756
+ // --- 8. شاشات الألعاب الجديدة ---
757
 
758
  const renderGamesHome = () => {
759
  const content = document.getElementById('app-content');
 
765
  subtitle: 'طابق الصور والمفردات الأمازيغية',
766
  iconName: 'Brain',
767
  color: 'bg-green-500',
768
+ action: `setState({currentGameState: 'memory'})`
769
  },
770
  {
771
  id: 'tifinagh_ordering',
 
773
  subtitle: 'رتّب الحروف الأمازيغية بشكل صحيح',
774
  iconName: 'Repeat1',
775
  color: 'bg-red-500',
776
+ action: `setState({currentGameState: 'tifinagh_ordering'})`
777
  },
778
  ];
779
 
 
855
  initMemoryGame();
856
  } else {
857
  alert('تهانينا! لقد أنهيت لعبة الذاكرة بنجاح!');
858
+ setState({ currentGameState: null });
859
  }
860
  }, 800);
861
  }
 
878
 
879
 
880
  const renderMemoryGame = () => {
881
+ if (!appState.gameData || appState.currentGameState !== 'memory') {
882
  initMemoryGame();
883
  return; // Wait for state update and re-render
884
  }
885
 
886
  const content = document.getElementById('app-content');
887
  const levelData = memoryGameLevels[appState.currentLevel - 1];
888
+ const cols = levelData.pairs <= 4 ? 4 : (levelData.pairs <= 8 ? 4 : 5);
889
+ const gridClass = `grid grid-cols-${cols} gap-2 w-full max-w-sm mx-auto`;
890
+
 
891
  content.innerHTML = `
892
  <div class="p-4 pt-6 min-h-[calc(100vh-130px)] bg-gray-50 dark:bg-gray-900 transition-colors">
893
  <h3 class="text-2xl font-black text-gray-800 dark:text-white mb-2 text-center">
 
906
  ${card.type === 'image' ? `
907
  <img src="${card.content}" alt="${card.alt}" class="w-full h-full object-cover rounded-md" onerror="this.onerror=null; this.src='https://placehold.co/80x80?text=صورة';"/>
908
  ` : `
909
+ <span class="text-3xl font-black text-blue-800 dark:text-white">${card.content}</span>
910
  `}
911
  </div>
912
 
 
988
  initTifinaghOrderingGame();
989
  } else {
990
  alert('تهانينا! لقد أتقنت ترتيب حروف تيفيناغ!');
991
+ setState({ currentGameState: null });
992
  }
993
  }, 500);
994
  } else {
995
+ alert('حاول مرة أخرى! التسلسل غير صحيح. يمكنك إعادة ترتيب الأحرف أو البدء من جديد.');
996
  }
997
  };
998
 
999
 
1000
  const renderTifinaghOrderingGame = () => {
1001
+ if (!appState.gameData || appState.currentGameState !== 'tifinagh_ordering') {
1002
  initTifinaghOrderingGame();
1003
  return;
1004
  }
 
1008
  const state = appState.tifinaghOrderingGame;
1009
 
1010
  const cols = levelData.letters.length <= 6 ? 6 : 7;
1011
+ // لم يتم استخدام gridClass في هذا التصميم، لذا سأزيلها لتوحيد الكود
1012
 
1013
  content.innerHTML = `
1014
  <div class="p-4 pt-6 min-h-[calc(100vh-130px)] bg-gray-50 dark:bg-gray-900 transition-colors">
 
1016
  ترتيب الحروف - المستوى ${appState.currentLevel}
1017
  </h3>
1018
  <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 text-center">
1019
+ اضغط على الحرف ثم اضغط على المكان المناسب في الأعلى.
1020
  </p>
1021
 
1022
  <div class="bg-blue-100 dark:bg-blue-900 p-3 rounded-xl mb-4 text-center max-w-sm mx-auto">
 
1031
  <div class="flex justify-center flex-wrap gap-2 mb-8 max-w-sm mx-auto">
1032
  ${state.userOrder.map((letter, index) => `
1033
  <button onclick="removeLetter(${index})"
1034
+ class="ordering-slot w-10 h-10 flex items-center justify-center border-2 border-dashed ${letter ? 'border-green-500 bg-green-100 dark:bg-green-900/50' : 'border-gray-400 dark:border-gray-600'} rounded-lg transition-all"
1035
  aria-label="مكان الحرف رقم ${index + 1}">
1036
+ <span class="text-2xl font-black ${letter ? 'text-green-800 dark:text-white' : 'text-gray-500 dark:text-gray-500'}">${letter || index + 1}</span>
1037
  </button>
1038
  `).join('')}
1039
  </div>
 
1044
  <button onclick="
1045
  const slotIndex = appState.tifinaghOrderingGame.userOrder.findIndex(l => l === null);
1046
  if (slotIndex !== -1) placeLetter('${letter}', slotIndex);
1047
+ else alert('الرجاء إزالة حرف أولاً لإفساح مكان.');
1048
  "
1049
  class="ordering-letter w-12 h-12 flex items-center justify-center bg-purple-500 text-white text-3xl font-black rounded-lg shadow-md hover:bg-purple-600"
1050
  aria-label="الحرف ${letter}">
 
1141
  if (appState.isMenuOpen) {
1142
  if (!existingMenu) {
1143
  const menuHTML = renderMenu();
1144
+ appContainer.insertAdjacentHTML('afterend', menuHTML);
 
1145
  }
1146
  } else if (existingMenu) {
1147
  existingMenu.remove();
1148
  }
1149
  };
1150
 
1151
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1152
 
1153
 
1154
  // تهيئة التطبيق عند تحميل النافذة