Spaces:
Running
Running
Download index.html from Jaouadart/Notepad: direct link, hf CLI and curl.
- Browser
- Download file 108 kB
-
https://huggingface.co/spaces/Jaouadart/Notepad/resolve/main/index.html
- Command line
-
hf download hf://spaces/Jaouadart/Notepad/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Jaouadart/Notepad/resolve/main/index.html
108 kB
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tifawin - تطبيق تعليمي للأطفال</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700;900&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Cairo', 'sans-serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| /* ... (CSS Styles remain the same) ... */ | |
| body { | |
| font-family: 'Cairo', sans-serif; | |
| background-color: #f3f4f6; | |
| overflow-x: hidden; | |
| transition: background-color 0.3s; | |
| } | |
| body.dark { | |
| background-color: #111827; | |
| } | |
| #app-container { | |
| min-height: 100vh; | |
| max-width: 500px; | |
| box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); | |
| background-color: white; | |
| position: relative; | |
| transition: background-color 0.3s, box-shadow 0.3s; | |
| } | |
| #app-container.dark { | |
| background-color: #1f2937; | |
| box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); | |
| } | |
| .card-shadow { | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| } | |
| .card-shadow:hover { | |
| transform: scale(1.03); | |
| box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); | |
| } | |
| .card-shadow:active { | |
| transform: scale(0.98); | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| .control-btn { | |
| padding: 1.5rem; | |
| border-radius: 9999px; | |
| transition: transform 0.2s, box-shadow 0.2s, background-color 0.3s; | |
| } | |
| .control-btn:active { | |
| transform: scale(0.9); | |
| } | |
| .icon-shadow { | |
| filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2)); | |
| } | |
| ::-webkit-scrollbar { display: none; } | |
| .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } | |
| .image-overlay { | |
| background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| } | |
| .animate-pulse { | |
| animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| /* Welcome screen specific styles */ | |
| .welcome-bg { | |
| background: linear-gradient(to bottom right, #6366f1, #8b5cf6, #ec4899); /* Modern gradient */ | |
| } | |
| .welcome-card { | |
| background-color: rgba(255, 255, 255, 0.95); /* Slightly transparent white */ | |
| backdrop-filter: blur(10px); /* Frosted glass effect */ | |
| border-radius: 2rem; /* More rounded corners */ | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); | |
| } | |
| .welcome-card.dark { | |
| background-color: rgba(31, 41, 55, 0.95); /* Darker, slightly transparent */ | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); | |
| } | |
| .welcome-logo-container { | |
| max-height: 200px; /* Adjust as needed */ | |
| overflow: hidden; | |
| } | |
| .welcome-logo-image { | |
| max-width: 100%; | |
| height: auto; | |
| object-fit: contain; /* Ensures entire image is visible within its container */ | |
| } | |
| /* 🚨 NEW: Style for the music toggle to align with app colors */ | |
| .music-toggle-checked { | |
| background-color: #22c55e ; /* Green 500 */ | |
| } | |
| </style> | |
| </head> | |
| <body class="flex justify-center"> | |
| <div id="app-container" class="w-full"> | |
| <header id="app-header" class="fixed top-0 w-full max-w-lg mx-auto z-20"></header> | |
| <main id="app-content" class="pt-16 pb-20"></main> | |
| <footer id="app-footer" class="fixed bottom-0 w-full max-w-lg mx-auto z-20"></footer> | |
| </div> | |
| <audio id="sound-player" src="audio/Funny Kids _ Children_s Music (Instrumental Music For Kids)(M4A_128K).m4a" preload="auto"></audio> | |
| <audio id="story-audio" controls style="display:none;"></audio> | |
| <audio id="click-sound" src="audio/click_2.mp3" preload="auto"></audio> | |
| <audio id="success-sound" src="audio/Correct and Incorrect sound effect - right or wrong(M4A_128K)(2).mp3" preload="auto"></audio> | |
| <audio id="error-sound" src="audio/Correct and Incorrect sound effect - right or wrong(M4A_128K)(3).mpad" preload="auto"></audio> | |
| <audio id="background-music" src="audio/Funny Kids _ Children_s Music (Instrumental Music For Kids)(M4A_128K).m4a" preload="auto" loop></audio> | |
| <script> | |
| // --- 1. تعريف الأيقونات كـ SVG نصي (Icons) --- | |
| const ICONS = { | |
| 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>`, | |
| 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>`, | |
| 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>`, | |
| 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>`, | |
| 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>`, | |
| 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>`, | |
| 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>`, | |
| 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>`, | |
| 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>`, | |
| 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>`, | |
| VolumeX: (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"/><line x1="22" x2="16" y1="9" y2="15"/><line x1="16" x2="22" y1="9" y2="15"/></svg>`, | |
| 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>`, | |
| 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>`, | |
| 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>`, | |
| 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>`, | |
| 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>`, | |
| 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>`, | |
| 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>`, | |
| 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>`, | |
| 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>`, | |
| 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>`, | |
| 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>`, | |
| 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>`, | |
| 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>`, | |
| 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>`, | |
| WhatsApp: (cls) => ICONS.Share2(cls), | |
| }; | |
| const renderIcon = (name, classes = 'w-6 h-6', strokeWidth = 2) => { | |
| const IconRenderer = ICONS[name]; | |
| const finalIconName = IconRenderer ? name : 'Info'; | |
| const finalRenderer = ICONS[finalIconName]; | |
| if (!finalRenderer) return ''; | |
| const svgString = finalRenderer(classes); | |
| return svgString.replace(/stroke-width="2"/g, `stroke-width="${strokeWidth}"`); | |
| }; | |
| // --- 2. بيانات التطبيق الثابتة (Static Data) --- | |
| const APP_NAME = "Tifawin"; | |
| const APP_NAME_LETTERS = "TIMMUZIT"; | |
| const WHATSAPP_LINK = "https://wa.me/message/P3DXRV6NTZ63L1"; | |
| const DEVELOPER_INFO = { | |
| name: "ⵊⴰⵡⴰⴷ ⵄⴰⵣⵉⵣⵉ (AZIZI JAOUAD)", | |
| title: "مطوّر الواجهة التعليمية", | |
| bio: "طالب بالمدرسة العليا للتربية والتكوين ببرشيد -تخصص اللغة الأمازيغية", | |
| image: "images/unnamed (7).png" | |
| }; | |
| const VOICE_OVER_ARTISTS = [ | |
| { name: "فاطمة الزهراء", role: "المعلق الصوتي الأساسي (أصوات الكبار)" }, | |
| { name: "أحمد الصغير", role: "معلق صوتي للأطفال (أصوات الحروف والأرقام)" }, | |
| { name: "طاقم تطوان للتعابير", role: "تسجيل فصول السنة" } | |
| ]; | |
| // 🚨 UPDATED: تم فصل الكلمة الأمازيغية (word_tifinagh) عن الترجمة العربية | |
| const tifinaghData = [ | |
| { letter: 'ⴰ', word_tifinagh: 'ⴰⴳⴰⴷⵉⵔ', word_arabic: 'جدار', image: 'images/2947c16d27f8042f7d60783c6808519a.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⴰ_.mp3.m4a' }, | |
| { letter: 'ⴱ', word_tifinagh: 'ⵉⴱⵔⴱⵉⵍⵍⵓ', word_arabic: 'فراشة', image: 'images/3fd6beebd231e2f325469a40b0831b59.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⴱ_.mp3.m4a' }, | |
| { letter: 'ⴳ', word_tifinagh: 'ⴰⴳⴳⵓ', word_arabic: 'دخان', image: 'images/c0094eb5dcc49d7cce573d42f270d8de.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⴳ_.mp3.m4a' }, | |
| { letter: 'ⴳⵯ', word_tifinagh: 'ⴰⵣⴳⴳⵯⴰⵖ', word_arabic: 'احمر', image: 'images/0cfdba4860822105d92a6ed146936d33.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⴳⵯ_.mp3.m4a' }, | |
| { letter: 'ⴷ', word_tifinagh: 'ⴷⴷⵓⵏⵉⵜ', word_arabic: 'دنيا', image: 'images/3d018275c7d6ce027b469500fa38c4e2.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⴷ_.mp3.m4a' }, | |
| { letter: 'ⴹ', word_tifinagh: 'ⴰⴹⵉⵍ', word_arabic: 'عنب', image: 'images/1987ab2c045824929e7b8e5004f1c503.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⴹ_.mp3.m4a' }, | |
| { letter: 'ⴼ', word_tifinagh: 'ⴰⴼⴰ', word_arabic: 'نار', image: 'images/57f09f9ef64273601e9978752f9d44e5.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⴼ_.mp3.m4a' }, | |
| { letter: 'ⴽ', word_tifinagh: 'ⴰⴽⵢⵢⴰⵡ', word_arabic: 'كتكوت', image: 'images/dc9bdbedd2a2298e920da349b066426b (1).jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⴽ_.mp3.m4a' }, | |
| { letter: 'ⴽⵯ', word_tifinagh: 'ⴰⴽⵯⴼⴰⵢ', word_arabic: 'حليب', image: 'images/fef0c339a43b6405e541d804f4ce93ef.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⴽⵯ_.mp3.m4a' }, | |
| { letter: 'ⵀ', word_tifinagh: 'ⴰⵀⴷⴷⵓⵏ', word_arabic: 'سلهام ', image: 'images/images (3).jpeg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⵀ_.mp3.m4a' }, | |
| { letter: 'ⵃ', word_tifinagh: 'ⵜⴰⵃⵔⵉⵔⵜ', word_arabic: 'حساء', image: 'images/e4186eff6f60254be5ca492e106eea6f.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⵃ_.mp3.m4a' }, | |
| { letter: 'ⵄ', word_tifinagh: 'ⴰⵄⵍⵍⵓⵛ', word_arabic: 'عجل', image: 'images/13a993e73740f7a9e705f345c3f93e2b.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⵄ_.mp3.m4a' }, | |
| { letter: 'ⵅ', word_tifinagh: 'ⴰⵅⴰⵎ', word_arabic: 'بيت', image: 'images/ffe5482567dc035b488803f294448055.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⵅ_.mp3.m4a' }, | |
| { letter: 'ⵇ', word_tifinagh: 'ⵉⵇⵇⴰⵕⵉⴹⵏ', word_arabic: 'نقود', image: 'images/3937cfd005c2fd4fe306dc6475408a28.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⵇ_.mp3.m4a' }, | |
| { letter: 'ⵉ', word_tifinagh: 'ⵉⵣⵉ', word_arabic: 'ذبابة', image: 'images/d2e56baa73bac789347ab58837405c1b.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⵉ_.mp3.m4a' }, | |
| { letter: 'ⵊ', word_tifinagh: 'ⴰⵊⵎⵉⵔ', word_arabic: 'مرحاض', image: 'images/87fc31c080560115c848f3fc59aeb0ec.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⵊ_.mp3.m4a' }, | |
| { letter: 'ⵍ', word_tifinagh: 'ⴰⵎⵍⵍⴰⵍ', word_arabic: 'ابيض', image: 'images/4da7f34849bab634d5bc9da642d921dd.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⵍ_.mp3.m4a' }, | |
| { letter: 'ⵎ', word_tifinagh: 'ⴰⵎⴰⵍⵓ', word_arabic: 'ظل', image: 'images/96ec7f619eac1d671f711f1a5855d61c.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⵎ_.mp3.m4a' }, | |
| { letter: 'ⵏ', word_tifinagh: 'ⴰⵎⴰⵏ', word_arabic: 'ماء', image: 'images/97851b13e7689bf137356b60fcc29d67.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⵏ_ .mp3.m4a' }, | |
| { letter: 'ⵓ', word_tifinagh: 'ⴱⵓⵜⴳⵔⴰ', word_arabic: 'سلحفاة', image: 'images/69ef8ef015eaee077cb590f45fa79f3d.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⵓ_.mp3.m4a' }, | |
| { letter: 'ⵔ', word_tifinagh: 'ⵜⵓⵔⵉⵏ', word_arabic: 'رئتين', image: 'images/9c3df931d662394dbc92449e50bf9802.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⵔ_ .mp3.m4a' }, | |
| { letter: 'ⵕ', word_tifinagh: 'ⴰⵕⴰⵎ', word_arabic: 'جمل', image: 'images/897c6933dd87410c603aae4c04feb091.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⵕ_.mp3.m4a' }, | |
| { letter: 'ⵖ', word_tifinagh: 'ⴰⵖⵔⵓⵎ', word_arabic: 'خبز', image: 'images/d7788b29c0e24294a988025ce59c223b.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⵖ_.mp3.m4a' }, | |
| { letter: 'ⵙ', word_tifinagh: 'ⴰⵙⵉⴼ', word_arabic: 'نهر', image: 'images/b667b3694ce3b78b704eef70bc5a084e.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⵙ_.mp3.m4a' }, | |
| { letter: 'ⵚ', word_tifinagh: 'ⵜⴰⵙⴼⴼⴰⴹⵜ', word_arabic: 'ممحاة', image: 'images/7e14a7de1120f8e85d606ea6489aba02.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⵚ_.mp3.m4a' }, | |
| { letter: 'ⵛ', word_tifinagh: 'ⴰⵎⵓⵛⵛ', word_arabic: 'قط', image: 'images/cat.jpeg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⵛ_.mp3.m4a' }, | |
| { letter: 'ⵜ', word_tifinagh: 'ⵜⴰⵔⴱⴰⵜ', word_arabic: 'بنت', image: 'images/fe80c64129f875b8fe0cc0ab81a36274.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⵜ_.mp3.m4a' }, | |
| { letter: 'ⵟ', word_tifinagh: 'ⵜⴰⵎⵟⵟⵓⴹⵜ', word_arabic: 'امرأة', image: 'images/18ba9148bea2d0c08b4eb17fa5bb4191.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⵟ_.mp3.m4a' }, | |
| { letter: 'ⵡ', word_tifinagh: 'ⴰⵡⵔⴰⵖ', word_arabic: 'اصفر', image: 'images/7003fb876f05322043f933e3aa69b4b2.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⵡ_.mp3.m4a' }, | |
| { letter: 'ⵢ', word_tifinagh: 'ⴰⵢⵢⵓⵔ', word_arabic: 'قمر', image: 'images/d6fff0c6ae47f7a1975b0552f9a27ea3.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⵢ_.mp3.m4a' }, | |
| { letter: 'ⵣ', word_tifinagh: 'ⵉⵣⵎ', word_arabic: 'أسد', image: 'images/16ed553e1340aff9c328037809f77630.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⵣ_.mp3.m4a' }, | |
| { letter: 'ⵥ', word_tifinagh: 'ⴰⵥⴰⵍⵉⵎ', word_arabic: 'بصل', image: 'images/65b06b2cc59501fde624f2791ed29b7f.jpg', audio: 'audio/ⴰⵙⴽⴽⵉⵍ _ⵥ_.mp3.m4a' }, | |
| ]; | |
| const animalsData = [ | |
| { word_tifinagh: 'ⴰⵎⵓⵛⵛ', word_arabic: 'قط ', image: 'images/cat.jpeg', audio: 'audio/ⴰⵎⵓⵛⵛ.m4a', category: 'هه ' }, | |
| { word_tifinagh: 'ⴰⵢⴷⵉ', word_arabic: 'كلب', image: 'images/124419894dcfde81ffbca1e072804c71.jpg', audio: 'audio/ⴰⵢⴷⵉ.m4a', category: 'حيوان' }, | |
| { word_tifinagh: 'ⵉⵣⵎ', word_arabic: 'أسد', image: 'images/16ed553e1340aff9c328037809f77630.jpg', audio: 'audio/ⵉⵣⵎ.m4a', category: 'حيوان' }, | |
| { word_tifinagh: 'ⵉⵍⵡ', word_arabic: 'فيل', image: 'images/9effc4c9c62ffca84b93c65bc298836f.jpg', audio: 'audio/ⵉⵍⵡ.m4a', category: 'حيوان' }, | |
| { word_tifinagh: 'ⴰⴱⴰⵖⵓⵙ', word_arabic: 'قرد', image: 'images/bd76428bddeb01a4d10e00630ecf1af4.jpg', audio: 'audio/ⴰⴱⴰⵖⵓⵙ.m4a', category: 'حيوان' }, | |
| { word_tifinagh: 'ⵜⴰⵥⵏⴽⵯⴹⵜ', word_arabic: 'غزالة', image: 'images/962d3b8c713deb410ee5b8b50e4bd717.jpg', audio: 'audio/ⵜⴰⵥⵏⴽⵯⴹⵜ.m4a', category: 'حيوان' }, | |
| { word_tifinagh: 'ⴰⴽⵙⵉⵍ', word_arabic: 'نمر', image: 'images/aafe42802b757cd64eacd46369c434e7.jpg', audio: 'audio/ⴰⴽⵙⵉⵍ.m4a', category: 'حيوان' }, | |
| { word_tifinagh: 'ⴰⴱⵓⴱⴱⴰⵣ', word_arabic: 'دب', image: 'images/5b8ac2e52472946d311318ef526b6beb.jpg', audio: 'audio/ⴰⴱⵓⴱⴱⴰⵣ.m4a', category: 'حيوان' }, | |
| { word_tifinagh: 'ⵜⴰⵙⵍⵎⵜ', word_arabic: 'سمكة', image: 'images/da8aec162d9a6d5d9fe43a74275ee101.jpg', audio: 'audio/ⵜⴰⵙⵍⵎⵜ.m4a', category: 'حيوان' }, | |
| { word_tifinagh: 'ⵜⴰⵜⴱⵉⵔⵜ', word_arabic: 'حمامة', image: 'images/a84e9e05df41e5e0b719516010e98a4b.jpg', audio: 'audio/ⵜⴰⵜⴱⵉⵔⵜ.m4a', category: 'حيوان' }, | |
| // **ملاحظة:** تم تعديل 'ⴰⵇⵏⵏⵉⵏ' ليطابق القائمة السابقة إذا كان المقصود 'ⴰⵇⵏⵉⵏ' أو استخدام الاسم الحالي إذا كان صحيحًا. | |
| { word_tifinagh: 'ⴰⵇⵏⵏⵉⵏ', word_arabic: 'أرنب', image: 'images/a63049990b70e79ff55923e73c7e238e.jpg', audio: 'audio/ⴰⵇⵏⵉⵏ.m4a', category: 'حيوان' }, | |
| { word_tifinagh: 'ⴰⵖⴰⴹ', word_arabic: 'ماعز', image: 'images/e2c175ddc37997fd99ad5287e50e5377.jpg', audio: 'audio/ⴰⵖⴰⴹ.m4a', category: 'حيوان' }, | |
| { word_tifinagh: 'ⴰⵢⵢⵉⵙ', word_arabic: 'حصان', image: 'images/c7b9740d4a6a0a8b6a13f7f7b317af0d.jpg', audio: 'audio/ⵉⵢⵢⵉⵙ.m4a', category: 'حيوان' }, | |
| { word_tifinagh: 'ⴱⵓⵜⴳⵔⴰ', word_arabic: 'سلحفاة', image: 'images/69ef8ef015eaee077cb590f45fa79f3d.jpg', audio: 'audio/ⴱⵓⵜⴳⵔⴰ.m4a', category: 'حيوان' }, | |
| { word_tifinagh: 'ⵜⴰⵡⵡⵓⴽⵜ', word_arabic: 'بومة', image: 'images/b9b6d56ad9077190a9923a63bd78d8bc.jpg', audio: 'audio/ⵜⴰⵡⵡⵓⴽⵜ.m4a', category: 'حيوان' }, | |
| { word_tifinagh: 'ⵓⵛⵛⵏ', word_arabic: 'ذئب', image: 'images/2241ff059ca5b87903f61f336a4aa430.jpg', audio: 'audio/ⵓⵛⵛⵏ.m4a', category: 'حيوان' }, | |
| { word_tifinagh: 'ⵜⴰⴼⵓⵍⵍⵓⵙⵜ ⵏ ⵡⴰⵎⴰⵏ ', word_arabic: 'بطة', image: 'images/c93987d8f7f0baf0d29f9c20c83c97e3.jpg', audio: 'audio/ⵜⴰⴼⵓⵍⵍⵓⵙⵜ ⵏ ⵡⴰⵎⴰⵏ.m4a', category: 'حيوان' }, | |
| { word_tifinagh: 'ⴰⵎⴷⵖ', word_arabic: 'زرافة', image: 'images/c0cc7605f98169dfc456eb36d3a0582a.jpg', audio: 'audio/ⴰⵎⴷⵖ.m4a', category: 'حيوان' }, | |
| { word_tifinagh: 'ⴰⵍⵖⵎ', word_arabic: 'جمل', image: 'images/897c6933dd87410c603aae4c04feb091.jpg', audio: 'audio/ⴰⵍⵖⵎ.m4a', category: 'حيوان' }, | |
| { word_tifinagh: 'ⵉⴱⵔⴱⵉⵍⵍⵓ', word_arabic: 'فراشة', image: 'images/3fd6beebd231e2f325469a40b0831b59.jpg', audio: 'audio/ⵉⴱⵔⴱⵉⵍⵍⵓ.m4a', category: 'حيوان' } | |
| ]; | |
| const numbersData = [ | |
| { number: '0', word_tifinagh: 'ⴰⵎⵢⴰ', word_arabic: 'صفر ', image: 'images/d3a43a956f3129b847739dec5f10c81f.jpg', audio: 'audio/one.mp3' }, | |
| { number: '1', word_tifinagh: 'ⵢⴰⵏ ', word_arabic: ' واحد', image: 'images/b26681eaa5caacbf1c7bfb1f12f546def.jpg', audio: 'audio/one.mp3' }, | |
| { number: '2', word_tifinagh: 'ⵙⵉⵏ', word_arabic: 'اثنان', image: 'images/c391d2e8b5081720ab58b167d96abd50.jpg', audio: 'audio/two.mp3' }, | |
| { number: '3', word_tifinagh: 'ⴽⵕⴰⴹ', word_arabic: 'ثلاثة', image: 'images/8baf8accac02f718e274f7f0efe8e208.jpg', audio: 'audio/three.mp3' }, | |
| { number: '4', word_tifinagh: 'ⴽⴽⵓⵥ', word_arabic: 'أربعة', image: 'images/5af82e7a87c9d7d1a93173d953e2c033.jpg', audio: 'audio/four.mp3' }, | |
| { number: '5', word_tifinagh: 'ⵙⵎⵎⵓⵙ', word_arabic: 'خمسة', image: 'images/569cc0c8af30f8116c776a21a230f9d0.jpg', audio: 'audio/five.mp3' }, | |
| { number: '6', word_tifinagh: 'ⵙⴹⵉⵚ', word_arabic: 'ستة', image: 'images/8b693928c5447c7381948bd23fa0a94c.jpg', audio: 'audio/six.mp3' }, | |
| { number: '7', word_tifinagh: 'ⵙⴰ', word_arabic: 'سبعة', image: 'images/17a897f15be1f2e5976f0eb51f4cdbc8.jpg', audio: 'audio/seven.mp3' }, | |
| { number: '8', word_tifinagh: 'ⵜⴰⵎ', word_arabic: 'ثمانية', image: 'images/bbf58163e3765676d6dadffbc94dd6fb.jpg', audio: 'audio/eight.mp3' }, | |
| { number: '9', word_tifinagh: 'ⵜⵥⴰ', word_arabic: 'تسعة', image: 'images/83e98be29b454d400cc1c78160a51207.jpg', audio: 'audio/nine.mp3' }, | |
| { number: '10', word_tifinagh: 'ⵎⵔⴰⵡ', word_arabic: 'عشرة', image: 'images/a1b9f28aa43bda697d0bff6ae52bc06c.jpg', audio: 'audio/ten.mp3' }, | |
| { number: '11', word_tifinagh: 'ⵢⴰⵏ ⴷ ⵎⵔⴰⵡ', word_arabic: 'أحد عشر', image: 'images/d4ef0ea2c17f056b7c67aa6553b27199.jpg', audio: 'audio/eleven.mp3' }, | |
| { number: '12', word_tifinagh: 'ⵙⵉⵏ ⴷ ⵎⵔⴰⵡ', word_arabic: 'اثنا عشر', image: 'images/799c20391c8da09c7d215758ab073e37.jpg', audio: 'audio/twelve.mp3' }, | |
| { number: '13', word_tifinagh: 'ⴽⵕⴰⴹ ⴷ ⵎⵔⴰⵡ', word_arabic: 'ثلاثة عشر', image: 'images/6e399d0a8789755580e42baab5dc139c.jpg', audio: 'audio/thirteen.mp3' }, | |
| { number: '14', word_tifinagh: 'ⴽⴽⵓⵥ ⴷ ⵎⵔⴰⵡ', word_arabic: 'أربعة عشر', image: 'images/d343262b3b9442fcc9762211933606cc.jpg', audio: 'audio/fourteen.mp3' }, | |
| { number: '15', word_tifinagh: 'ⵙⵎⵎⵓⵙ ⴷ ⵎⵔⴰⵡ', word_arabic: 'خمسة عشر', image: 'images/c15420b455196337d1bb3262c76e0205.jpg', audio: 'audio/fifteen.mp3' }, | |
| { number: '16', word_tifinagh: 'ⵚⴹⵉⵚ ⴷ ⵎⵔⴰⵡ', word_arabic: 'ستة عشر', image: 'images/f78e9d858b7d623189b5c92069e1bed6.jpg', audio: 'audio/sixteen.mp3' }, | |
| { number: '17', word_tifinagh: 'ⵙⴰ ⴷ ⵎⵔⴰⵡ', word_arabic: 'سبعة عشر', image: 'images/59521d81566c71406f14deae2109e398.jpg', audio: 'audio/seventeen.mp3' }, | |
| { number: '18', word_tifinagh: 'ⵜⴰⵎ ⴷ ⵎⵔⴰⵡ', word_arabic: 'ثمانية عشر', image: 'images/941eca2038794392f5068e4ad4c26968 (1).jpg', audio: 'audio/eighteen.mp3' }, | |
| { number: '19', word_tifinagh: 'ⵜⵥⴰ ⴷ ⵎⵔⴰⵡ', word_arabic: 'تسعة عشر', image: 'images/a45794b6674c50601ed941cf1779e659.jpg', audio: 'audio/nineteen.mp3' }, | |
| { number: '20', word_tifinagh: 'ⵙⵉⵎⵔⴰⵡ', word_arabic: 'عشرون', image: 'images/e6129621d08c4d9d1d4ea409c25da4d0.jpg', audio: 'audio/twenty.mp3' }, | |
| { number: '30', word_tifinagh: 'ⴽⵕⴰⵎⵔⴰⵡ', word_arabic: 'ثلاثون', image: 'images/b36ee0ac2527f343cdc6901178d13f79.jpg', audio: 'audio/thirty.mp3' }, | |
| { number: '40', word_tifinagh: 'ⴽⴽⵓⵥⵎⵔⴰⵡ', word_arabic: 'أربعون', image: 'images/0654ca9081b2713cfc7bbffeac57bbe0.jpg', audio: 'audio/forty.mp3' }, | |
| { number: '50', word_tifinagh: 'ⵙⵎⵎⵓⵎⵔⴰⵡ', word_arabic: 'خمسون', image: 'images/3164ba91b5bb3ff493744e6c818a16d0.jpg', audio: 'audio/fifty.mp3' }, | |
| { number: '60', word_tifinagh: 'ⵚⴹⵉⵎⵔⴰⵡ', word_arabic: 'ستون', image: 'images/2246588b5c3c296bd437d680aba2215e.jpg', audio: 'audio/sixty.mp3' }, | |
| { number: '70', word_tifinagh: 'ⵙⴰⵎⵔⴰⵡ', word_arabic: 'سبعون', image: 'images/99888182607727f778a54d7928e6c9da.jpg', audio: 'audio/seventy.mp3' }, | |
| { number: '80', word_tifinagh: 'ⵜⴰⵎⵎⵔⴰⵡ', word_arabic: 'ثمانون', image: 'images/06712963a5e7ec91b2a92f6e784f497f.jpg', audio: 'audio/eighty.mp3' }, | |
| { number: '90', word_tifinagh: 'ⵜⵥⴰⵎⵔⴰⵡ', word_arabic: 'تسعون', image: 'images/200b2d90f616135b9a370edc61a6352d.jpg', audio: 'audio/ninety.mp3' }, | |
| { number: '100', word_tifinagh: 'ⵜⵉⵎⵉⴹⵉ', word_arabic: 'مئة', image: 'images/6c0d711f25cf417970f12ec5547e6b53.jpg', audio: 'audio/one_hundred.mp3' }, | |
| ]; | |
| const schoolSuppliesData = [ | |
| { word_tifinagh: 'ⴰⴽⵕⵕⴰⵊ', word_arabic: 'قلم رصاص', image: 'images/37b71533177feb9d55d55efba947309e.jpg', audio: 'audio/schoolSupplies/pencil.mp3', category: ' ' }, | |
| { word_tifinagh: 'ⴰⴷⴰⵍⵉⵙ', word_arabic: 'كتاب', image: 'images/4613832c5e65f89f5fea2371511dc024.jpg', audio: 'audio/schoolSupplies/book.mp3', category: 'أداة مدرسية' }, | |
| { word_tifinagh: 'ⵜⴰⵙⴼⴼⴰⴹⵜ', word_arabic: 'ممحاة', image: 'images/7e14a7de1120f8e85d606ea6489aba02.jpg', audio: 'audio/schoolSupplies/eraser.mp3', category: 'أداة مدرسية' }, | |
| { word_tifinagh: 'ⵜⴰⵖⴷⴰ', word_arabic: 'مسطرة', image: 'images/0e25f9cd6cb664dd942d359be7379b23.jpg', audio: 'audio/schoolSupplies/ruler.mp3', category: 'أداة مدرسية' }, | |
| { word_tifinagh: 'ⵜⴰⵛⵛⴽⴰⵔⵜ', word_arabic: 'حقيبة مدرسية', image: 'images/78dc308787867b8b0f838432ce879c77.jpg' , audio: 'audio/schoolSupplies/backpack.mp3', category: 'أداة مدرسية' }, | |
| { word_tifinagh: 'ⴰⵖⴰⵏⵉⴱ', word_arabic: 'قلم حبر', image: 'images/a7133e22fce83d3f189913eb36a4863d.jpg', audio: 'audio/schoolSupplies/pen.mp3', category: 'أداة مدرسية' }, | |
| { word_tifinagh: 'ⴰⵍⵓⴳ', word_arabic: 'دفتر', image: 'images/659eeba362a0c08c9131898eb50edd63.jpg', audio: 'audio/schoolSupplies/notebook.mp3', category: 'أداة مدرسية' }, | |
| { word_tifinagh: 'ⴰⴽⵕⵕⴰⵊ ⵏ ⵉⴽⵯⵍⴰⵏ', word_arabic: ' قلم ملون', image: 'images/16c20ce7b3ece3be5598be8220068c4d.jpg', audio: 'audio/schoolSupplies/colors.mp3', category: 'أداة مدرسية' }, | |
| { word_tifinagh: 'ⵜⴰⴱⴰⵏⴽⴰ', word_arabic: 'وزرة', image: 'images/1508501ee0b685b27a2467a844c2e8a2.jpg', audio: 'audio/schoolSupplies/scissors.mp3', category: 'أداة مدرسية' }, | |
| { word_tifinagh: 'ⵜⴰⵙⵔⵔⴰⵎⵜ', word_arabic: 'منجرة', image: 'images/25497c99aec49793974fcd280a4eafc4.jpg', audio: 'audio/schoolSupplies/glue.mp3', category: 'أداة مدرسية' } | |
| ]; | |
| const seasonsData = [ | |
| { word_tifinagh: 'ⵜⴰⴳⵔⵙⵜ', word_arabic: 'الشتاء', image: 'images/b2d331ea13a2df600219904dabd028fa.jpg', audio: 'audio/Tagrst.m4a', category: ' ' }, | |
| { word_tifinagh: 'ⵜⴰⴼⵙⵓⵜ', word_arabic: 'الربيع', image: 'images/01c3ea6f3c60d364b38f26394e166bd1.jpg', audio: 'audio/Tafsot.m4a', category: 'فصل' }, | |
| { word_tifinagh: 'ⴰⵏⴱⴷⵓ', word_arabic: 'الصيف', image: 'images/6da33d4175e50b17309485c8b33cfe0e.jpg', audio: 'audio/Anbdo.m4a', category: 'فصل' }, | |
| { word_tifinagh: 'ⴰⵎⴰⵡⴰⵏ', word_arabic: 'الخريف', image: 'images/e6c5c6a800de512091faa20db36472f8.jpg', audio: 'audio/Amawan.m4a', category: 'فصل' } | |
| ]; | |
| const fruitsData = [ | |
| { word_tifinagh: 'ⵜⴰⴷⴼⴼⵓⵢⵜ', word_arabic: 'تفاحة', image: 'images/da1da4f2015a32322f547ae5fff5236c.jpg', audio: 'audio/fruits/apple.mp3', category: ' ' }, | |
| { word_tifinagh: 'ⵜⴰⴱⴰⵏⴰⵏⵜ', word_arabic: 'موزة', image: 'images/11bde7577165c2edef985a3cbd9458ae.jpg', audio: 'audio/fruits/banana.mp3', category:'' }, | |
| { word_tifinagh: 'ⵍⵉⵜⵛⵉⵏ', word_arabic: 'برتقال', image: 'images/1efc88aa2e2e9bb97af6b059a4c05b91.jpg', audio: 'audio/fruits/orange.mp3', category: 'فاكهة' }, | |
| { word_tifinagh: 'ⵜⵉⵣⵡⵍⵜ', word_arabic: 'فراولة', image: 'images/f70521a26fbd3b91b349493081eb3b88.jpg', audio: 'audio/fruits/strawberry.mp3', category: 'فاكهة' }, | |
| { word_tifinagh: 'ⴰⴹⵉⵍ', word_arabic: 'عنب', image: 'images/1987ab2c045824929e7b8e5004f1c503.jpg', audio: 'audio/fruits/grapes.mp3', category: 'فاكهة' }, | |
| { word_tifinagh: 'ⵕⵕⵎⵎⴰⵏ', word_arabic: 'رمان', image: 'images/bf6a38717ec00ddb8394f5c7acab308e.jpg', audio: 'audio/fruits/pomegranate.mp3', category: 'فاكهة' }, | |
| { word_tifinagh: 'ⵜⴰⴷⴷⵍⵍⴰⵃⵜ', word_arabic: 'بطيخ', image: 'images/ae716e7b0b1009b29d2c0924aaa1cc15.jpg', audio: 'audio/fruits/watermelon.mp3', category: 'فاكهة' }, | |
| { word_tifinagh: 'ⴰⵎⴰⵏ', word_arabic: 'مانجو', image: 'images/afc84d4cffcfca39b86fc288758a65d9.jpg', audio: 'audio/fruits/mango.mp3', category: 'فاكهة' }, | |
| { word_tifinagh: 'ⴰⵏⴰⵏⴰⵚ', word_arabic: 'أناناس', image: 'images/e5a0d8fef5139197856d36bac0810210.jpg', audio: 'audio/fruits/pineapple.mp3', category: 'فاكهة' }, | |
| { word_tifinagh: 'ⵜⴰⵙⵎⵎⴰⵎⵜ', word_arabic: 'ليمون', image: 'images/3b19dbd8568f84de61fefc4d8f729e31.jpg', audio: 'audio/fruits/lemon.mp3', category: 'فاكهة' } | |
| ]; | |
| const vegetablesData = [ | |
| { word_tifinagh: 'ⵜⴰⵎⴰⵟⵉⵛⵜ', word_arabic: 'طماطم', image: 'images/6056d9839a962b5a78cddc402ef88c09.jpg', audio: 'audio/vegetables/tomato.mp3', category: ' ' }, | |
| { word_tifinagh: 'ⴰⵖⵙⵙⵉⵎ', word_arabic: 'خيار', image: 'images/c4267923b02091ba31923b94d5b81832.jpg', audio: 'audio/vegetables/cucumber.mp3', category: 'خضار' }, | |
| { word_tifinagh: 'ⵜⴰⵅⵉⵣⵣⵓⵜ', word_arabic: 'جزرة', image: 'images/f2c660e1af2eb42e0b2455bea8d476b5.jpg', audio: 'audio/vegetables/carrot.mp3', category: 'خضار' }, | |
| { word_tifinagh: 'ⴰⵥⴰⵍⵉⵎ', word_arabic: 'بصل', image: 'images/a1eca20822f37cef8dab2fa4feec8272.jpg', audio: 'audio/vegetables/onion.mp3', category: 'خضار' }, | |
| { word_tifinagh: 'ⵜⵉⵙⴽⵔⵜ', word_arabic: 'ثوم', image: 'images/88f83b4f34ca0aaa254aaf0eae8ee2ac.jpg', audio: 'audio/vegetables/garlic.mp3', category: 'خضار' }, | |
| { word_tifinagh: 'ⵉⴼⵉⴼⵍ', word_arabic: 'فلفل', image: 'images/44cbf575ceebda24dbb9fb28a2825744.jpg', audio: 'audio/vegetables/pepper.mp3', category: 'خضار' }, | |
| { word_tifinagh: 'ⵜⴰⵍⵍⵓⵖⴷⴰ', word_arabic: 'بطاطس', image: 'images/7b78e64a70a785fe35d853fb1568578a.jpg', audio: 'audio/vegetables/potato.mp3', category: 'خضار' }, | |
| { word_tifinagh: 'ⵜⴰⵎⴰⴼⴰⵔⵜ', word_arabic: 'خس', image: 'images/ef2153019a5f74807dfbab7194519d1e.jpg', audio: 'audio/vegetables/lettuce.mp3', category: 'خضار' }, | |
| { word_tifinagh: 'ⴱⵉⵟⵍⵊⴰⵏ', word_arabic: 'باذنجان', image: 'images/8f6a4542ebff0636e7926478d32a9bbd.jpg', audio: 'audio/vegetables/eggplant.mp3', category: 'خضار' }, | |
| { word_tifinagh: 'ⵜⵉⵇⵇⵙⵜ', word_arabic: ' فلفل حار', image: 'images/af35c440654de65e700818c36ef11dc9.jpg', audio: 'audio/vegetables/cauliflower.mp3', category: 'خضار' } | |
| ]; | |
| const monthsData = [ | |
| { word_tifinagh: 'ⵉⵏⵏⴰⵢⵔ', word_arabic: 'يناير', image: 'images/b26681eaa5caacbf1c7bfb112f546def.jpg', audio: 'audio/Yinayr.m4a' }, | |
| { word_tifinagh: 'ⴱⵕⴰⵢⵕ', word_arabic: 'فبراير', image: 'images/c391d2e8b5081720ab58b167d96abd50.jpg', audio: 'audio/Brayr.m4a' }, | |
| { word_tifinagh: 'ⵎⴰⵕⵚ', word_arabic: 'مارس', image: 'images/8baf8accac02f718e274f7f0efe8e208.jpg', audio: 'audio/Mars.m4a' }, | |
| { word_tifinagh: 'ⵉⴱⵔⵉⵔ', word_arabic: 'أبريل', image: 'images/5af82e7a87c9d7d1a93173d953e2c033.jpg', audio: 'audio/Ibrir.m4a' }, | |
| { word_tifinagh: 'ⵎⴰⵢⵢⵓ', word_arabic: 'ماي', image: 'images/569cc0c8af30f8116c776a21a230f9d0.jpg', audio: 'audio/Mayyu.m4a' }, | |
| { word_tifinagh: 'ⵢⵓⵏⵢⵓ', word_arabic: 'يونيو', image: 'images/8b693928c5447c7381948bd23fa0a94c.jpg', audio: 'audio/Yunyu.m4a' }, | |
| { word_tifinagh: 'ⵢⵓⵍⵢⵓⵣ', word_arabic: 'يوليوز', image: 'images/17a897f15be1f2e5976f0eb51f4cdbc8.jpg', audio: 'audio/Yulyuz.m4a' }, | |
| { word_tifinagh: 'ⵖⵓⵛⵜ', word_arabic: 'غشت', image: 'images/bbf58163e3765676d6dadffbc94dd6fb.jpg', audio: 'audio/Ruct.m4a' }, | |
| { word_tifinagh: 'ⵛⵓⵜⴰⵏⴱⵔ', word_arabic: ' شتنبر', image: 'images/83e98be29b454d400cc1c78160a51207.jpg', audio: 'audio/Cutanbir.m4a' }, | |
| { word_tifinagh: 'ⴽⵟⵓⴱⵕ', word_arabic: 'أكتوبر', image: 'images/a1b9f28aa43bda697d0bff6ae52bc06c.jpg', audio: 'audio/Ktobr.m4a' }, | |
| { word_tifinagh: 'ⵏⵓⵡⴰⵏⴱⵉⵔ', word_arabic: 'نونبر', image: 'images/d4ef0ea2c17f056b7c67aa6553b27199.jpg', audio: 'audio/Nuwanbir.m4a' }, | |
| { word_tifinagh: 'ⴷⵓⵊⴰⵏⴱⵉⵔ', word_arabic: 'دجنبر', image: 'images/799c20391c8da09c7d215758ab073e37.jpg', audio: 'audio/Dujanbir.m4a' } | |
| ]; | |
| const daysData = [ | |
| { word_tifinagh: 'ⴰⵢⵏⴰⵙ', word_arabic: 'الاثنين', image: 'images/37b71533177feb9d55d55efba947309e.jpg', audio: 'audio/Aynas.m4a' }, | |
| { word_tifinagh: 'ⴰⵙⵉⵏⴰⵙ', word_arabic: 'الثلاثاء', image: 'images/37b71533177feb9d55d55efba947309e.jpg', audio: 'audio/Asinas.m4a' }, | |
| { word_tifinagh: 'ⴰⴽⵕⴰⵙ', word_arabic: 'الأربعاء', image: 'images/37b71533177feb9d55d55efba947309e.jpg', audio: 'audio/Akrras.m4a' }, | |
| { word_tifinagh: 'ⴰⴽⵡⴰⵙ', word_arabic: 'الخميس', image: 'images/37b71533177feb9d55d55efba947309e.jpg', audio: 'audio/Akwas.m4a' }, | |
| { word_tifinagh: 'ⴰⵙⵉⵎⵡⴰⵙ', word_arabic: 'الجمعة', image: 'images/37b71533177feb9d55d55efba947309e.jpg', audio: 'audio/Asimwas.m4a' }, | |
| { word_tifinagh: 'ⴰⵚⵉⴹⵢⴰⵙ', word_arabic: 'السبت', image: 'images/37b71533177feb9d55d55efba947309e.jpg', audio: 'audio/Asidyas.m4a' }, | |
| { word_tifinagh: 'ⴰⵙⴰⵎⴰⵙ', word_arabic: 'الأحد', image: 'images/37b71533177feb9d55d55efba947309e.jpg', audio: 'audio/Asamas.m4a' } | |
| ]; | |
| const familyData = [ | |
| { word_tifinagh: 'ⵉⵎⵎⵉ', word_arabic: 'أمي', image: 'images/5957c378462b920ceb24f6aa294b5100.jpg', audio: 'audio/Immi.m4a' }, | |
| { word_tifinagh: 'ⴱⴰⴱⴰ', word_arabic: 'أبي', image: 'images/6b957498ddc6e49e618e91f7c5ce0134.jpg', audio: 'audio/Baba.m4a' }, | |
| { word_tifinagh: 'ⴳⵯⵎⴰ', word_arabic: 'أخي', image: 'images/8ae84a445390bd1695791a7721b2ebc0.jpg', audio: 'audio/Gma.m4a' }, | |
| { word_tifinagh: 'ⵓⵍⵜⵎⴰ', word_arabic: 'أختي', image: 'images/d959a12a45c2469850c44afd379b82f8.jpg', audio: 'audio/Oltma.m4a' }, | |
| { word_tifinagh: 'ⴱⴰⴱⴰ ⴰⵎⵇⵇⵔⴰⵏ', word_arabic: 'جدي', image: 'images/dc84969949644c410732c57215bcaa8e.jpg', audio: 'audio/Baba am9ran.m4a' }, | |
| { word_tifinagh: 'ⵉⵎⵎⴰ ⵜⴰⵎⵇⵔⴰⵏⵜ', word_arabic: 'جدتي', image: 'images/2bd2ccddaf31840edde5eab74b1a25ee.jpg', audio: 'audio/Ima tam9rant.m4a' }, | |
| { word_tifinagh: 'ⴷⴰⴷⴷⴰ', word_arabic: 'عمي', image: 'images/036bd0ed2c2e2dd991eb3aff426e94fb.jpg', audio: 'audio/Dada.m4a' }, | |
| { word_tifinagh: 'ⵜⴰⴱⴰ', word_arabic: 'عمتي', image: 'images/66abe3b026ff4c492fff8367587783bd.jpg', audio: 'audio/Taba.m4a' }, | |
| { word_tifinagh: 'ⴰⵏⴰ', word_arabic: 'خالي', image: 'images/036bd0ed2c2e2dd991eb3aff426e94fb.jpg', audio: 'audio/Ana.m4a' }, | |
| { word_tifinagh: 'ⵜⴰⵏⴰⵜ', word_arabic: 'خالتي', image: 'images/ff6b0dbc0e4f8d5f5df94c6df08f9c6a.jpg', audio: 'audio/Tanat.m4a' }, | |
| ]; | |
| const bodyPartsData = [ | |
| { word_tifinagh: 'ⵉⵅⴼ', word_arabic: 'الرأس', image: 'images/33dda7fe89cfd5526918246dae320059.jpg', audio: 'audio/Ixf.m4a' }, | |
| { word_tifinagh: 'ⴰⴼⵓⵙ', word_arabic: 'اليد', image: 'images/44947c8bbf8665173c5d8836c65d6f7c.jpg', audio: 'audio/Afos.m4a' }, | |
| { word_tifinagh: 'ⴰⴹⴰⵕ', word_arabic: 'القدم', image: 'images/641424d996e86204d032d59a4ccc09a0.jpg', audio: 'audio/Adar.m4a' }, | |
| { word_tifinagh: 'ⵜⵉⵟⵟ', word_arabic: 'العين', image: 'images/5e0b1a5ae043556912dec8e157f55b41.jpg', audio: 'audio/Tidt.m4a' }, | |
| { word_tifinagh: 'ⵉⵏⵅⴰⵔ', word_arabic: 'الأنف', image: 'images/ef9066caba835568e19799f187bdae6a.jpg', audio: 'audio/Inxar.m4a' }, | |
| { word_tifinagh: 'ⵉⵎⵉ', word_arabic: 'الفم', image: 'images/36ef29579225201947d3a6b0a0363dde.jpg', audio: 'audio/Imi.m4a' }, | |
| { word_tifinagh: 'ⴰⵎⵣⵣⵓⵖ', word_arabic: 'الأذن', image: 'images/13bc14d834265bd33a1fad47ee638f66.jpg', audio: 'audio/Amzzur.m4a' }, | |
| { word_tifinagh: 'ⴰⵖⵕⵓⴹ', word_arabic: ' كتف', image: 'images/8e16145c86a1fe2b52740f204152b72f.jpg', audio: 'audio/Arrud.m4a' }, | |
| { word_tifinagh: 'ⴰⵎⴳⴳⵕⴹ', word_arabic: 'الرقبة ', image: 'images/ce5e3ffa40b08796f6d1f758b36635db.jpg', audio: 'audio/Amgrd.m4a' }, | |
| { word_tifinagh: 'ⴰⵣⵣⴰⵔ', word_arabic: 'الشعر', image: 'images/9cdb435823e315ad4767e0c8e424b8f3.jpg', audio: 'audio/Azzar.m4a' }, | |
| { word_tifinagh: 'ⵜⴰⴷⴰⵡⵜ', word_arabic: 'الظهر', image: 'images/6bb3e17ed531423f1ce78b27eb6a4bcd.jpg', audio: 'audio/Tadawt.m4a' }, | |
| { word_tifinagh: 'ⵉⴷⵎⴰⵔⵏ', word_arabic: 'الصدر', image: 'images/860958a31e930382525ba82294cae31c.jpg', audio: 'audio/Idmarn.m4a' }, | |
| { word_tifinagh: 'ⴰⴷⵉⵙ', word_arabic: 'البطن', image: 'images/cd61420d75ef80789d9ef419ab6d78b3.jpg', audio: 'audio/Adis.m4a' }, | |
| { word_tifinagh: 'ⵉⵍⵙ', word_arabic: 'اللسان', image: 'images/42cc4f8bfbb86fb0e60a06d523bba4d8.jpg', audio: 'audio/Ils.m4a' }, | |
| { word_tifinagh: 'ⴰⴼⵓⴷ', word_arabic: 'الركبة', image: 'images/c38b399f59b84a1425d1100d7a142323.jpg', audio: 'audio/Afud.m4a' }, | |
| { word_tifinagh: 'ⵓⵅⵙⴰⵏ', word_arabic: 'الأسنان', image: 'images/d7087ae777b9121491ddfdbbe2bf9699.jpg', audio: 'audio/Oxsan.m4a' }, | |
| ]; | |
| const colorsData = [ | |
| { word_tifinagh: 'ⴰⵣⴳⴳⵯⴰⵖ', word_arabic: 'أحمر', image: 'images/b008721ac76def4ddfdbdb51fc82d320.jpg', audio: 'audio/Azggar.m4a' }, | |
| { word_tifinagh: 'ⴰⵥⵕⵡⴰⵍ', word_arabic: 'أزرق', image: 'images/3424729aa184959857a097fb421b480e.jpg', audio: 'audio/Azrwal.m4a' }, | |
| { word_tifinagh: 'ⴰⵡⵔⴰⵖ', word_arabic: 'أصفر', image: 'images/d871dd62033ef51b734e405d2be3db6f.jpg', audio: 'audio/Awrav.m4a' }, | |
| { word_tifinagh: 'ⴰⵣⴳⵣⴰⵡ', word_arabic: 'أخضر', image: 'images/a58989552838c41eba05072814e62c90.jpg', audio: 'audio/Azgzaw.m4a' }, | |
| { word_tifinagh: 'ⴰⵍⵉⵎⵓⵏⵉ', word_arabic: 'برتقالي', image: 'images/2957461e42e514fc8f28cdfcf6a26266.jpg', audio: 'audio/Alimoniy.m4a' }, | |
| { word_tifinagh: 'ⴰⵎⴽⵥⴰⵢ', word_arabic: 'بنفسجي', image: 'images/47c698f09fd37ff179f4ba31edd74b9a.jpg', audio: 'audio/Amkzay.m4a' }, | |
| { word_tifinagh: 'ⴰⴷⵎⵎⴰⵏ', word_arabic: 'بني', image: 'images/08a3dc3e988b98980e7252e07ad7356c.jpg', audio: 'audio/Admman.m4a' }, | |
| { word_tifinagh: 'ⴰⵣⵡⴰⵡⴰⵖ', word_arabic: 'وردي', image: 'images/18656b92846235109510e255b899a4ec.jpg', audio: 'audio/Azwawav.m4a' }, | |
| { word_tifinagh: 'ⴰⵙⴳⴳⴰⵏ', word_arabic: 'أسود', image: 'images/8a6ed41c982c97428b484ab13a95afc2.jpg', audio: 'audio/Asggan.m4a' }, | |
| { word_tifinagh: 'ⵓⵎⵍⵉⵍ', word_arabic: 'أبيض', image: 'images/4da7f34849bab634d5bc9da642d921dd.jpg', audio: 'audio/Omlil.m4a' } | |
| ]; | |
| const storiesData = [ | |
| { | |
| title: "أسد صغير شجاع", | |
| image: "images/Screenshot_20250927_140922_One Read.jpg", | |
| text: "ⵉⴽⴽⴰ ⵜⵜ ⵉⵏⵏ ⵢⴰⵏ ⵓⵔⴳⴰⵣ ⴳ ⵢⴰⵏ ⵡⵓⵙⵓⵏ ⴱⴰⵀⵔⴰ ⵢⴰⴳⴳⵓⴳⵏ ⵅⴼ ⵜⵎⴷⵉⵏⵜ , ⴰⵔ ⴰⵙ ⵜⵜⵉⵏⵉⵏ ⴱⵓ ⵜⴽⵔⴽⴰⵙ , ⴰⵔ ⴱⴰⵀⵔⴰ ⵉⵙⴽⵉⵔⴽⵉⵙ ⵅⴼ ⴰⵢⵜ ⵡⵓⵙⵓⵏ .ⵉⴽⴽⴰ ⴷ ⵢⴰⵏ ⵡⴰⵙⵙ ⵜⴰⵎⴷⵉⵏⵜ ,ⵉⴳⴰⵡⵔ ⴰⵔ ⵉⵜⵜⴰⵍⵙ ⵉ ⴽⵔⴰ ⵏ ⵉⵎⵣⴷⴰⵖⵏ ⵏ ⵡⵓⵙⵓⵏ , ⵎⴰⴷ ⵉⵥⵔⴰ ⴳ ⵜⵎⴷⵉⵏⵜ ⴰⵏⵏ .ⵉⵏⵏⴰ ⴰⵙⵏ ⴰⵔ ⴼⵜⵜⵓⵖ ⴳ ⵜⵎⴷⵉⵏⵜ , ⵥⵔⵖ ⴳⵉⵙ ⵢⴰⵏ ⵓⵅⵙⴰⵢ ⴱⴰⵀⵔⴰ ⵎⵇⵇⵓⵔⵏ , ⵓⵔ ⵊⵊⵓ ⴷ ⵏⴽⴽⵉⵏ ⴰⴷ ⵉⵥⵕⴰⵏ ⴰⵅⵙⴰⵢ ⵣⵓⵏⴷ ⵖⵡⴰⵏⵏ ⴳ ⵜⵓⴷⵔⵜ ⵉⵏⵓ , ⴰⵛⴽⵓ ⵉⵎⵇⵇⵓⵔ ⴰ ⵍⵍⵉⵖ ⵉⵥⴹⴰⵕ ⴰⴷ ⵉⴷⵍ ⵙ ⵓⵎⴰⵍⵓ ⵏⵏⵙ ⴽⵕⴰⴹⵜ ⵜⵉⵎⴰⴹ ⵏ ⵉⵔⴳⴰⵣⵏ ⵙⵙⵓⴷⴰⵏⵉⵏ ⵅⴼ ⵉⵙⴰⵏ ⵏⵏⵙⵏ ⵉⵏⵏⴰ ⴰⵙ ⴷ ⵏⵉⵜ ⵢⴰⵏ ⴳ ⵉⵔⴳⴰⵣⵏ ⵍⵍⵉ ⴰⵙ ⵙⵙⴼⵍⵉⴷⵏⵉⵏ ⵓⵔ ⴰⴽⴽⵯ ⴱⴰⵀⵔⴰ ⵉⵎⵇⵇⵓⵔ ⴰ ⴱⵓ ⵜⴽⵔⴽⴰⵙ ⴰⵛⴽⵓ ⵓⵔ ⴰⴽⴽⵯ ⵉⵣⵔⵉ ⵎⴰ ⵉⴳⴳⵓⵜⵏ ⵎⴰⵙ ⵥⵕⵉⵖ ⵙⵏⴰⵜ ⵜⵎⴰⴹ ⵏ ⵉⵔⴳⴰⵣⵏ ⴰⵔ ⵜⵜⵄⴷⴰⵍⵏ ⵢⴰⵜ ⵜⴳⴷⵓⵔⵜ ⴳ ⵢⴰⵏ ⵓⵙⴰⵢⵙ ⵎⵇⵇⵓⵔⵏ ⴳ ⵜⵎⴷⵉⵏⵜ , ⵢⴰⵜⵜⵓⵢ ⵓⵔⴳⴰⵣ ⵅⴼ ⵡⴰⵢⵢⴰⴹ ⴰ ⵍⵍⵉⵖ ⴰ ⵓⵔ ⵉⵙⵙⴼⵍⵉⴷ ⵢⴰⵏ ⴳⵉⵙⵏ ⵉ ⵡⴰⵢⵢⴰⴹ ⵉⵖ ⴰ ⵉⴽⴽⴰⵜ ⵙ ⵓⴼⴹⵉⵚ ⴰⴼⴰⴷ ⴰⴷ ⵉⵖⴷⵍ ⵜⴰⵙⴳⴰ ⵍⵍⵉ ⴰⵙ ⵉⵚⴰⵃⴰⵏ ⴳ ⵜⴳⴷⵓⵔⵜⵉⴳⴳⴰⵎⵎⵉ ⵙⵓⵍ ⴱⵓ ⵜⴽⵔⴽⴰⵙ ⵎⴰⴷ ⵉⵜⵜⵉⵏⵉ , ⵉⵙⵇⵙⴰ ⵏⵉⵜ ⴰⵔⴳⴰⵣ ⴰⵏⵏ , ⵉⵏⵏⴰ ⴰⵙ ⵎⴰ ⵎⵓ ⵣⴰ ⵔⴰⵏ ⴰⴳⴷⵓⵔ ⴰⵏⵏ ? ⵉⵔⴰⵔ ⴰⵙ ⴷ ⵓⵔⴳⴰⵣ ⴰⵏⵏ , ⵉⵏⵏⴰ ⴰⵙ ⴷ . ⵔⴰⵏ ⵜ ⴰⴼⴰⴷ ⴰⴷ ⴳⵉⵙ ⵙⵙⵏⵡⴰⵏ ⴰⵅⵙⴰⵢ ⵍⵍⵉ ⵅⴼ ⴰⵖ ⵜⵙⴰⵡⵍⵜ ⵢⴰⵏ ⵉⵎⵉⴽ . ", | |
| audioUrl: "audio/Tolist.m4a" // ⬅️ **تمت إضافة مسار صوت القصة** | |
| }, | |
| { | |
| title: "الأرنب والسلحفاة", | |
| image: "images/Screenshot_20250927_141840_One Read.jpg", | |
| text: "كان الأرنب يتفاخر دائمًا بأنه أسرع حيوان في الغابة. تحدته السلحفاة في سباق، فضحك الأرنب...", | |
| audioUrl: "audio/stories/rabbit_tortoise.mp3" // ⬅️ **تمت إضافة مسار صوت القصة** | |
| }, | |
| ]; | |
| // --- 3. كائن LEARNING_DATA المحدث بالكامل (التصحيح) --- | |
| const LEARNING_DATA = { | |
| // الحروف (صحيح) | |
| tifinaghLetters: tifinaghData.map(item => { | |
| return { | |
| main: item.letter, | |
| word: item.word_arabic.trim(), | |
| transliteration: item.word_tifinagh.trim(), | |
| imageUrl: item.image, | |
| audioUrl: item.audio, | |
| }; | |
| }), | |
| // الأرقام (صحيح) | |
| numbers: numbersData.map(item => ({ | |
| main: item.number, | |
| word: item.word_arabic.trim(), | |
| transliteration: item.word_tifinagh.trim(), | |
| imageUrl: item.image, | |
| audioUrl: item.audio, | |
| })), | |
| // الحيوانات (صحيح) | |
| animals: animalsData.map(item => ({ | |
| main: item.word_tifinagh, | |
| word: item.word_arabic, | |
| transliteration: item.word_tifinagh, | |
| imageUrl: item.image, | |
| audioUrl: item.audio | |
| })), | |
| // أدوات مدرسية (صحيح) | |
| tools: schoolSuppliesData.map(item => ({ | |
| main: item.word_tifinagh, | |
| word: item.word_arabic, | |
| transliteration: item.word_tifinagh, | |
| imageUrl: item.image, | |
| audioUrl: item.audio | |
| })), | |
| // الفواكه (صحيح) | |
| fruits: fruitsData.map(item => ({ | |
| main: item.word_tifinagh, | |
| word: item.word_arabic, | |
| transliteration: item.word_tifinagh, | |
| imageUrl: item.image, | |
| audioUrl: item.audio | |
| })), | |
| // الخضروات (صحيح) | |
| vegetables: vegetablesData.map(item => ({ | |
| main: item.word_tifinagh, | |
| word: item.word_arabic, | |
| transliteration: item.word_tifinagh, | |
| imageUrl: item.image, | |
| audioUrl: item.audio | |
| })), | |
| // أجزاء الجسم (صحيح) | |
| body: bodyPartsData.map(item => ({ | |
| main: item.word_tifinagh, | |
| word: item.word_arabic, | |
| transliteration: item.word_tifinagh, | |
| imageUrl: item.image, | |
| audioUrl: item.audio | |
| })), | |
| // الأيام (صحيح) | |
| days: daysData.map(item => ({ | |
| main: item.word_tifinagh, | |
| word: item.word_arabic, | |
| transliteration: item.word_tifinagh, | |
| imageUrl: item.image, | |
| audioUrl: item.audio | |
| })), | |
| // الأشهر (صحيح) | |
| months: monthsData.map(item => ({ | |
| main: item.word_tifinagh, | |
| word: item.word_arabic, | |
| transliteration: item.word_tifinagh, | |
| imageUrl: item.image, | |
| audioUrl: item.audio | |
| })), | |
| // العائلة (صحيح) | |
| family: familyData.map(item => ({ | |
| main: item.word_tifinagh, | |
| word: item.word_arabic, | |
| transliteration: item.word_tifinagh, | |
| imageUrl: item.image, | |
| audioUrl: item.audio | |
| })), | |
| // 🎨 الألوان (تم التحديث: تضمين الصورة و منطق فئة اللون لـ Tailwind) | |
| colors: colorsData.map(item => { | |
| let colorClass = 'bg-gray-500'; | |
| // ربط الاسم العربي بفئة Tailwind CSS | |
| if (item.word_arabic.includes('أحمر')) colorClass = 'bg-red-600'; | |
| else if (item.word_arabic.includes('أزرق')) colorClass = 'bg-blue-600'; | |
| else if (item.word_arabic.includes('أصفر')) colorClass = 'bg-yellow-400'; | |
| else if (item.word_arabic.includes('أخضر')) colorClass = 'bg-green-600'; | |
| else if (item.word_arabic.includes('برتقالي')) colorClass = 'bg-orange-500'; | |
| else if (item.word_arabic.includes('بنفسجي')) colorClass = 'bg-purple-600'; | |
| else if (item.word_arabic.includes('بني')) colorClass = 'bg-amber-800'; | |
| else if (item.word_arabic.includes('وردي')) colorClass = 'bg-pink-400'; | |
| else if (item.word_arabic.includes('أسود')) colorClass = 'bg-black'; | |
| else if (item.word_arabic.includes('أبيض')) colorClass = 'bg-white border border-gray-300'; // يحتاج حدود ليظهر | |
| return { | |
| main: item.word_tifinagh, | |
| word: item.word_arabic, | |
| transliteration: item.word_tifinagh, | |
| imageUrl: item.image, // ⬅️ **مسار الصورة متاح الآن** | |
| audioUrl: item.audio, | |
| colorClass: colorClass // ⬅️ **فئة اللون مضافة لسهولة العرض في الواجهة** | |
| }; | |
| }), | |
| // فصول السنة (صحيح) | |
| seasons: seasonsData.map(item => ({ | |
| main: item.word_tifinagh, | |
| word: item.word_arabic, | |
| transliteration: item.word_tifinagh, | |
| imageUrl: item.image, | |
| audioUrl: item.audio | |
| })), | |
| // 📖 القصص (تم التحديث: تضمين audioUrl) | |
| stories: storiesData.map(item => ({ | |
| main: item.title, | |
| word: item.text, | |
| transliteration: "قصة", | |
| imageUrl: item.image, | |
| audioUrl: item.audioUrl // ⬅️ **مسار الصوت للقصة متاح الآن** | |
| })), | |
| // الألعاب (تم توجيهها إلى القصص مؤقتاً مع مسار الصوت) | |
| games: storiesData.map(item => ({ | |
| main: item.title, | |
| word: item.text, | |
| transliteration: "لعبة", | |
| imageUrl: item.image, | |
| audioUrl: item.audioUrl // ⬅️ **مسار الصوت متاح** | |
| })), | |
| }; | |
| // 🚨 ملاحظة: يجب عليك التأكد من أن جميع ملفات الصور والصوت المشار إليها (مثل audio/stories/lion_story.mp3) موجودة في مساراتها الصحيحة ضمن مشروعك لكي يعمل التطبيق بشكل سليم. | |
| // ... (بقية تعريفات الفئات CATEGORIES - لم تتغير) ... | |
| const CATEGORIES = [ | |
| { id: 'tifinaghLetters', title: 'ⴰⵍⵎⵎⵓⴷ ⵏ ⵉⵙⴽⴽⵉⵍⵏ', subtitle: 'تعلم الحروف ', iconName: 'AArrowUp', imageUrl: 'images/6e318d538a2d8f0b5ad685db558ffe4e.jpg' }, | |
| { id: 'numbers', title: 'ⴰⵍⵎⵎⵓⴷ ⵏ ⵉⵣⵡⵉⵍⵏ', subtitle: 'تعلم الأرقام', iconName: 'Hash', imageUrl: 'images/0751e273c2de27e4b04dfeb7ee99b448.jpg' }, | |
| { id: 'animals', title: 'ⵉⵎⵓⴷⴰⵔ', subtitle: 'حيوانات', iconName: 'Cat', imageUrl: 'images/cc47a84c5a0bc2ca1dbcd62f10a55c87.jpg' }, | |
| { id: 'tools', title: 'ⵉⵎⴰⵙⵏ ⵏ ⵜⵖⵔⵉ', subtitle: 'ادوات مدرسية', iconName: 'PencilRuler', imageUrl: 'images/0c213d91ee39eb05ef6f72bd4bcba069.jpg' }, | |
| { id: 'colors', title: 'ⵉⴽⵯⵍⴰⵏ', subtitle: 'ألوان', iconName: 'Palette', imageUrl: 'images/006982c7d7140beec732267e28d68605.jpg' }, | |
| { id: 'family', title: 'ⵜⴰⵡⵊⴰ', subtitle: 'العائلة', iconName: 'Users', imageUrl: 'images/d79c9d03554cd6fee1d53198741968b7.jpg',audio:'audio/Tawja.m4a'}, | |
| { id: 'body', title: 'أجزاء الجسم', subtitle: 'أجزاء الجسم', iconName: 'Hand', imageUrl: 'images/06e6590e35375b8ef3a2e74882661597.jpg' }, | |
| { id: 'seasons', title: 'ⵉⵎⴰⵔⵔⵏ ⵏ ⵓⵙⴳⴳⵯ ⴰⵙ', subtitle: 'فصول السنة ', iconName: 'CloudRain', imageUrl: 'images/ea0c045a62c0ee0f966ab451c442a7bc.jpg' }, | |
| { id: 'fruits', title: 'ⵉⴳⵓⵎⵎⴰ', subtitle: 'الفواكه', iconName: 'Apple', imageUrl: 'images/06373d4c110a73840102a0eb6369d686.jpg' }, | |
| { id: 'vegetables', title: 'ⵉⵛⴰⴽⴰⵏ', subtitle: 'الخضر', iconName: 'Carrot', imageUrl: 'images/105d0617ac9684db8508f7f5997943d0.jpg' }, | |
| { id: 'months', title: 'ⴰⵢⵢⵓⵔⵏ', subtitle: 'الشهور', iconName: 'CalendarClock', imageUrl: 'images/490f057fea8b448d6ca63c1bcd2d1443.jpg' }, | |
| { id: 'days', title: 'ⵓⵙⵙⴰⵏ ⵏ ⵉⵎⴰⵍⴰⵙ', subtitle: 'أيام الأسبوع ', iconName: 'CalendarDays', imageUrl: 'images/7b3d97b91460a3452340081ea39f81d1.jpg' }, | |
| { id: 'games', title: 'ألعاب تعليمية', subtitle: 'تسلية وتعلم', iconName: 'Gamepad', imageUrl: 'images/10718386fa98b751dd0ec58cfdb9b5c9.jpg', isComingSoon: true }, | |
| { id: 'stories', title: 'ⵜⵓⵍⵍⵉⵙⵉⵏ', subtitle: 'حكايات أمازيغية', iconName: 'BookOpen', imageUrl: 'images/73b552bd0d3472c121adccc68a5bbb7f.jpg' }, | |
| ]; | |
| // --- 3. إدارة حالة التطبيق (State Management) --- | |
| const appState = { | |
| currentScreen: 'welcome', | |
| selectedCategory: null, | |
| currentIndex: 0, | |
| isMenuOpen: false, | |
| isDarkMode: false, | |
| isAppMuted: false, | |
| isRecording: false, | |
| isUsernameSubmitted: false, | |
| isBackgroundMusicPlaying: false, | |
| }; | |
| // ... (بقية الدوال المساعدة مثل playClickSound, playSuccessSound, playErrorSound, toggleBackgroundMusic - لم تتغير) ... | |
| /** يشغل صوت النقر على زر */ | |
| const playClickSound = () => { | |
| const audio = document.getElementById('click-sound'); | |
| if (audio && !appState.isAppMuted) { | |
| audio.currentTime = 0; | |
| audio.play().catch(e => console.error("Error playing click sound:", e)); | |
| } | |
| }; | |
| /** 🚨 يشغل صوت النجاح */ | |
| const playSuccessSound = () => { | |
| const audio = document.getElementById('success-sound'); | |
| if (audio && !appState.isAppMuted) { | |
| audio.currentTime = 0; | |
| audio.play().catch(e => console.error("Error playing success sound:", e)); | |
| } | |
| }; | |
| /** 🚨 يشغل صوت الخطأ */ | |
| const playErrorSound = () => { | |
| const audio = document.getElementById('error-sound'); | |
| if (audio && !appState.isAppMuted) { | |
| audio.currentTime = 0; | |
| audio.play().catch(e => console.error("Error playing error sound:", e)); | |
| } | |
| }; | |
| /** يشغل أو يوقف موسيقى الخلفية (مع الاحتفاظ بحالة الإعدادات) */ | |
| const toggleBackgroundMusic = (shouldPlay) => { | |
| const music = document.getElementById('background-music'); | |
| if (!music) return; | |
| // القيمة الافتراضية للتشغيل/الإيقاف تعتمد على ما تم تمريره، أو تبديل الحالة الحالية | |
| if (shouldPlay === undefined) { | |
| shouldPlay = !appState.isBackgroundMusicPlaying; | |
| } | |
| // إذا كان المطلوب التشغيل لكن المستخدم قام بكتم التطبيق يدوياً، لا تفعل شيئاً | |
| if (shouldPlay && appState.isAppMuted) { | |
| // تحديث الحالة لتعكس أن الموسيقى متوقفة بسبب الكتم العام | |
| appState.isBackgroundMusicPlaying = false; | |
| music.pause(); | |
| return; | |
| } | |
| if (shouldPlay) { | |
| music.volume = 0.3; | |
| music.play().then(() => { | |
| appState.isBackgroundMusicPlaying = true; | |
| renderApp(); | |
| }).catch(e => { | |
| console.warn("Background music autoplay failed:", e); | |
| appState.isBackgroundMusicPlaying = true; | |
| renderApp(); | |
| }); | |
| } else { | |
| music.pause(); | |
| appState.isBackgroundMusicPlaying = false; | |
| renderApp(); | |
| } | |
| }; | |
| // دالة تحديث الحالة وإعادة رسم التطبيق (UPDATED) | |
| window.setState = (newState) => { | |
| // 🚨 تشغيل صوت النقر لكل تغيير حالة | |
| if (newState.isMenuOpen === undefined && newState.isRecording === undefined && newState.currentScreen !== 'welcome') { | |
| playClickSound(); | |
| } | |
| const prevScreen = appState.currentScreen; | |
| const nextScreen = newState.currentScreen || prevScreen; | |
| // تحديد ما إذا كانت الشاشة الجديدة هي شاشة تعلم (ضمن الفئات) | |
| const isLearningScreen = CATEGORIES.some(c => c.id === nextScreen); | |
| // تحديد ما إذا كانت الشاشة الجديدة هي شاشة تنقل رئيسية | |
| const isMainScreen = ['home', 'settings', 'info', 'profile', 'appDefinition'].includes(nextScreen); | |
| // 🚨 منطق التحكم في موسيقى الخلفية | |
| // 1. إذا كان الانتقال إلى شاشة تعلم، أوقف الموسيقى | |
| if (isLearningScreen) { | |
| toggleBackgroundMusic(false); | |
| } | |
| // 2. إذا كان الانتقال من شاشة تعلم إلى شاشة رئيسية، أو من الترحيب إلى الرئيسية، شغل الموسيقى | |
| if ((isMainScreen) && (prevScreen === 'welcome' || CATEGORIES.some(c => c.id === prevScreen))) { | |
| // تأكد من أن الموسيقى لم يتم كتمها يدويا عبر الإعدادات | |
| if (!appState.isAppMuted) { | |
| toggleBackgroundMusic(true); | |
| } | |
| } | |
| if (newState.currentScreen && newState.currentScreen !== appState.selectedCategory) { | |
| appState.currentIndex = 0; | |
| } | |
| Object.assign(appState, newState); | |
| // تطبيق الوضع الليلي فوراً على الجسم والحاوية | |
| document.body.classList.toggle('dark', appState.isDarkMode); | |
| document.getElementById('app-container').classList.toggle('dark', appState.isDarkMode); | |
| renderApp(); | |
| }; | |
| // ... (بقية دوال التحكم في القائمة والتسجيل و submitUsername - لم تتغير) ... | |
| // دالة تبديل حالة القائمة الجانبية | |
| window.toggleMenu = () => { | |
| setState({ isMenuOpen: !appState.isMenuOpen }); | |
| }; | |
| // الدوال الجديدة للتحكم في التسجيل (محاكاة) | |
| window.startRecording = () => { | |
| setState({ isRecording: true, currentScreen: appState.currentScreen }); | |
| console.log("Recording Started..."); | |
| }; | |
| window.stopRecording = () => { | |
| // 🚨 NEW: إضافة منطق محاكاة النتيجة | |
| if (Math.random() > 0.5) { | |
| playSuccessSound(); | |
| console.log("Playback Success Sound"); | |
| } else { | |
| playErrorSound(); | |
| console.log("Playback Error Sound"); | |
| } | |
| setState({ isRecording: false, currentScreen: appState.currentScreen }); | |
| console.log("Recording Stopped."); | |
| }; | |
| // 🚨 دالة جديدة لإرسال اسم المستخدم | |
| window.submitUsername = () => { | |
| const usernameInput = document.getElementById('usernameInput'); | |
| const username = usernameInput.value.trim(); | |
| if (username.length < 2) { | |
| alert('الرجاء إدخال اسم مستخدم صالح لا يقل عن حرفين.'); | |
| return; | |
| } | |
| const formActionUrl = 'https://docs.google.com/forms/d/e/1FAIpQLSetWxdWQlx1MAwQV_tQvibcKwJKv83Q5KaqfUe-b_Q_oozJpg/formResponse'; | |
| const entryFieldId = 'entry.541560317'; | |
| const submissionUrl = `${formActionUrl}?${entryFieldId}=${encodeURIComponent(username)}&submit=Submit`; | |
| fetch(submissionUrl, { mode: 'no-cors' }) | |
| .then(() => { | |
| console.log('Google Form Submission initiated (assumed success). Username:', username); | |
| // تحديث الحالة فوراً لإظهار زر "هيا نبدأ" | |
| setState({ isUsernameSubmitted: true, currentScreen: 'welcome' }); | |
| }) | |
| .catch(error => { | |
| console.error('Fetch error (likely CORS issue, proceeding anyway):', error); | |
| setState({ isUsernameSubmitted: true, currentScreen: 'welcome' }); | |
| }); | |
| }; | |
| // --- 5. مكونات الواجهة المشتركة (رأس الصفحة وتذييلها) --- | |
| // ... (دوال renderHeader و renderFooter - لم تتغير) ... | |
| const renderHeader = () => { | |
| const headerElement = document.getElementById('app-header'); | |
| const categoryMeta = CATEGORIES.find(c => c.id === appState.selectedCategory); | |
| let title = APP_NAME; | |
| if (categoryMeta && appState.currentScreen !== 'home' && !['settings', 'info', 'appDefinition'].includes(appState.currentScreen)) { | |
| title = categoryMeta.title; | |
| } else if (appState.currentScreen === 'settings') { | |
| title = 'الإعدادات'; | |
| } else if (appState.currentScreen === 'info') { | |
| title = 'حول التطبيق'; | |
| } else if (appState.currentScreen === 'appDefinition') { | |
| title = 'تعريف التطبيق'; | |
| } | |
| headerElement.innerHTML = ` | |
| <div class="flex items-center justify-between p-4 h-16 bg-blue-800 dark:bg-gray-800 text-white shadow-lg rounded-b-xl transition-colors"> | |
| <button onclick="toggleMenu()" | |
| class="p-1 rounded-full hover:bg-white/10 transition-colors" aria-label="القائمة الرئيسية"> | |
| ${renderIcon('Menu', 'w-6 h-6 text-white')} | |
| </button> | |
| <h1 class="text-xl font-extrabold text-white">${title}</h1> | |
| <button onclick="setState({currentScreen: 'appDefinition', selectedCategory: null})" | |
| class="w-8 h-8 rounded-full bg-yellow-400 border-2 border-white flex items-center justify-center text-sm font-bold text-blue-900 shadow-md transition-shadow hover:shadow-lg" | |
| aria-label="تعريف التطبيق"> | |
| ${renderIcon('BookOpen', 'w-4 h-4 text-blue-900', 3)} | |
| </button> | |
| </div> | |
| `; | |
| }; | |
| const renderFooter = () => { | |
| const footerElement = document.getElementById('app-footer'); | |
| const navItems = [ | |
| { id: 'home', iconName: 'Home', label: 'الرئيسية' }, | |
| { id: 'whatsapp', iconName: 'Share2', label: 'واتساب' }, | |
| { id: 'profile', iconName: 'User', label: 'الملف' }, | |
| { id: 'settings', iconName: 'Settings', label: 'إعدادات' }, | |
| { id: 'info', iconName: 'Info', label: 'حول' }, | |
| ]; | |
| const activeScreen = ['home', 'profile', 'settings', 'info'].includes(appState.currentScreen) | |
| ? appState.currentScreen | |
| : 'home'; | |
| footerElement.innerHTML = ` | |
| <div class="bg-white dark:bg-gray-800 p-2 rounded-t-3xl shadow-[0_-5px_15px_rgba(0,0,0,0.1)] transition-colors"> | |
| <div class="flex justify-around items-center"> | |
| ${navItems.map(item => { | |
| const isActive = item.id === activeScreen; | |
| let clickAction = `setState({currentScreen: '${item.id}', selectedCategory: null})`; | |
| if (item.id === 'whatsapp') { | |
| clickAction = `window.open('${WHATSAPP_LINK}', '_blank')`; | |
| } | |
| return ` | |
| <button | |
| onclick="${clickAction}" | |
| class="flex flex-col items-center p-2 rounded-xl transition-all ${isActive ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 hover:text-blue-400'}" | |
| aria-label="${item.label}" | |
| > | |
| <div class="p-2 rounded-full transition-all ${isActive ? 'bg-blue-100 dark:bg-blue-900 shadow-md' : ''}"> | |
| ${renderIcon(item.iconName, 'w-5 h-5')} | |
| </div> | |
| <span class="text-xs font-medium mt-1">${item.label}</span> | |
| </button> | |
| `; | |
| }).join('')} | |
| </div> | |
| </div> | |
| `; | |
| }; | |
| // --- 6. شاشة 1: شاشة الترحيب (Welcome Screen) --- | |
| // ... (دالة renderWelcomeScreen - لم تتغير) ... | |
| const renderWelcomeScreen = () => { | |
| const content = document.getElementById('app-content'); | |
| const logoImage = 'images/img_1763228179173.jpg'; | |
| const appTagline = "رفيق أطفالك لتعلم اللغة الأمازيغية (تيفيناغ)"; | |
| const copyrightText = "TIFIWIN-AZIZIJAOUAD@2025"; | |
| const usernameFormHTML = ` | |
| <div id="welcome-form-container" class="w-full mb-6" style="display: ${appState.isUsernameSubmitted ? 'none' : 'block'};"> | |
| <p class="text-lg font-bold text-gray-700 dark:text-gray-200 mb-3 mt-6 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-2 focus:ring-blue-600 dark:focus:ring-blue-400 text-center text-lg text-gray-800 dark:text-gray-100 dark:bg-gray-700 transition-colors placeholder-gray-400 dark:placeholder-gray-500"> | |
| <button onclick="submitUsername()" | |
| class="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white text-lg font-bold rounded-xl shadow-xl shadow-blue-400/50 transition-all card-shadow"> | |
| تسجيل الاسم | |
| </button> | |
| </div> | |
| `; | |
| const startButtonHTML = ` | |
| <div id="start-button-container" class="w-full" 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-xl shadow-2xl shadow-green-400/50 transition-all card-shadow mb-6"> | |
| هيا بنا نبدأ ! | |
| </button> | |
| </div> | |
| `; | |
| content.innerHTML = ` | |
| <div class="flex flex-col items-center justify-between min-h-screen p-8 welcome-bg text-white dark:text-gray-200 transition-colors"> | |
| <div class="flex-grow flex flex-col items-center justify-center text-center w-full max-w-sm mx-auto p-6 welcome-card dark:welcome-card transition-colors"> | |
| <div class="welcome-logo-container mb-6"> | |
| <img src="${logoImage}" alt="${APP_NAME} Logo" class="welcome-logo-image" | |
| onerror="this.onerror=null; this.src='https://placehold.co/200x100/A0B2C3/ffffff?text=شعار+التطبيق';"> | |
| </div> | |
| <p class="text-xl font-medium text-gray-700 dark:text-gray-300 mb-8 leading-relaxed max-w-xs"> | |
| ${appTagline} | |
| </p> | |
| ${usernameFormHTML} | |
| ${startButtonHTML} | |
| </div> | |
| <p class="text-xs text-blue-200 dark:text-gray-500 font-mono tracking-wider mt-6"> | |
| ${copyrightText} | |
| </p> | |
| </div> | |
| `; | |
| }; | |
| // --- 7. شاشة 2: الشاشة الرئيسية (Home Screen) --- | |
| // ... (دالة renderHomeScreen - لم تتغير) ... | |
| const renderHomeScreen = () => { | |
| const content = document.getElementById('app-content'); | |
| const cardsHTML = CATEGORIES.map(category => { | |
| const isComingSoon = category.isComingSoon; | |
| const clickAction = isComingSoon | |
| ? 'alert("هذا القسم قريباً في التحديث القادم!")' | |
| : `setState({currentScreen: '${category.id}', selectedCategory: '${category.id}'})`; | |
| const cardClasses = isComingSoon | |
| ? 'cursor-not-allowed opacity-50' | |
| : 'card-shadow group'; | |
| const overlayContent = isComingSoon | |
| ? ` | |
| <div class="absolute inset-0 bg-black/70 flex flex-col items-center justify-center"> | |
| <span class="text-3xl font-black text-yellow-400 drop-shadow-xl animate-pulse">قريباً</span> | |
| <span class="text-sm text-white/80 mt-1">القسم قيد التطوير</span> | |
| </div> | |
| ` | |
| : ` | |
| <div class="absolute inset-0 flex flex-col items-center justify-center p-3 text-white font-extrabold text-lg image-overlay"> | |
| <span class="text-xl font-black text-center leading-tight drop-shadow-md">${category.title}</span> | |
| <span class="text-xs opacity-80 mt-1 drop-shadow-sm">${category.subtitle}</span> | |
| </div> | |
| `; | |
| return ` | |
| <button | |
| onclick="${clickAction}" | |
| class="relative w-full h-32 rounded-2xl overflow-hidden ${cardClasses}" | |
| aria-label="الذهاب إلى قسم ${category.title}" | |
| ${isComingSoon ? 'disabled' : ''} | |
| > | |
| <img | |
| src="${category.imageUrl}" | |
| alt="${category.title}" | |
| class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110" | |
| onerror="this.onerror=null; this.src='https://placehold.co/300x200/cccccc/000000?text=صورة+${category.title}';" | |
| /> | |
| ${overlayContent} | |
| </button> | |
| `; | |
| }).join(''); | |
| content.innerHTML = ` | |
| <div class="p-4 bg-gray-50 dark:bg-gray-900 min-h-[calc(100vh-130px)] transition-colors"> | |
| <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4 text-center">أقسام التعلم</h2> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 gap-3"> | |
| ${cardsHTML} | |
| </div> | |
| <p class="text-center text-gray-500 dark:text-gray-400 mt-6 text-sm"> | |
| اختر قسمًا لتبدأ رحلة التعلم الممتعة! | |
| </p> | |
| </div> | |
| `; | |
| }; | |
| // --- 8. شاشة 3 و 4: شاشة التعلم العامة (Learning Screen) --- | |
| // 🚨 NEW: دالة مساعدة لتلوين الحرف داخل الكلمة | |
| const highlightLetterInWord = (word, letter) => { | |
| if (!word || !letter) return word; | |
| // إنشاء تعبير نمطي للبحث عن جميع تكرارات الحرف (global flag g) | |
| // ويتم تغليف الحرف في وسم <span> باللون الأحمر | |
| const regex = new RegExp(letter, 'g'); | |
| // يتم استخدام تلوين Tailwind CSS | |
| return word.replace(regex, `<span class="text-red-500 dark:text-red-400 font-extrabold">${letter}</span>`); | |
| }; | |
| const renderLearningScreen = () => { | |
| const categoryId = appState.selectedCategory; | |
| const content = document.getElementById('app-content'); | |
| const data = LEARNING_DATA[categoryId] || []; | |
| const categoryMeta = CATEGORIES.find(c => c.id === categoryId); | |
| if (data.length === 0 || !categoryMeta) { | |
| content.innerHTML = ` | |
| <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"> | |
| <p class="text-xl font-bold text-red-500 mb-4 dark:text-red-400">عفواً! لا توجد بيانات لهذا القسم.</p> | |
| <button onclick="setState({currentScreen: 'home', selectedCategory: null})" | |
| class="px-6 py-3 bg-blue-600 text-white font-bold rounded-xl shadow-lg hover:bg-blue-700 card-shadow"> | |
| العودة للرئيسية | |
| </button> | |
| </div> | |
| `; | |
| return; | |
| } | |
| const currentItem = data[appState.currentIndex]; | |
| const isColorsCategory = categoryId === 'colors'; | |
| const isTifinaghLetters = categoryId === 'tifinaghLetters'; // 🚨 NEW | |
| const isRecordingActive = appState.isRecording; | |
| window.playAudio = () => { | |
| if (appState.isAppMuted) { | |
| console.log("Audio is muted by user setting."); | |
| return; | |
| } | |
| if (currentItem.audioUrl) { | |
| const audioPath = currentItem.audioUrl; | |
| new Audio(audioPath).play().catch(e => console.error("Error playing audio:", e)); | |
| } else { | |
| alert('ملف صوتي غير متوفر لهذا العنصر.'); | |
| } | |
| }; | |
| window.handleNext = () => { | |
| const newIndex = (appState.currentIndex + 1) % data.length; | |
| setState({ currentIndex: newIndex, currentScreen: categoryId }); | |
| }; | |
| window.handlePrev = () => { | |
| const newIndex = (appState.currentIndex - 1 + data.length) % data.length; | |
| setState({ currentIndex: newIndex, currentScreen: categoryId }); | |
| }; | |
| const mainCardGradient = appState.isDarkMode | |
| ? 'from-gray-700 to-gray-600' | |
| : (categoryId === 'tifinaghLetters' ? 'from-orange-400 to-pink-300' : 'from-blue-400 to-purple-300'); | |
| let illustrationContent; | |
| if (isColorsCategory && currentItem.word !== 'أبيض') { | |
| illustrationContent = ` | |
| <div class="w-40 h-40 sm:w-44 sm:h-44 rounded-full shadow-inner ${currentItem.colorClass || 'bg-gray-400'} border-4 border-white/80"></div> | |
| `; | |
| } else { | |
| illustrationContent = ` | |
| <img | |
| src="${currentItem.imageUrl || 'https://placehold.co/150x150/cccccc/000000?text=صورة'}" | |
| alt="${currentItem.word}" | |
| class="w-40 h-40 sm:w-44 sm:h-44 rounded-xl object-cover shadow-lg border-4 border-white/50" | |
| onerror="this.onerror=null; this.src='https://placehold.co/150x150/cccccc/000000?text=صورة+${categoryMeta.title}';" | |
| /> | |
| `; | |
| } | |
| let mainWordDisplay = currentItem.main; | |
| let secondaryText = currentItem.transliteration; // الكلمة الأمازيغية | |
| // 🚨 NEW LOGIC: منطق تلوين الحروف وإضافة الزوايا | |
| let cornerElementHTML = ''; | |
| let mainWordClasses = 'text-3xl font-black mb-1 drop-shadow-lg leading-tight'; | |
| if (isTifinaghLetters) { | |
| const targetLetter = currentItem.main; | |
| // 1. تلوين الحرف الرئيسي (البطاقة الكبيرة) باللون الأحمر | |
| mainWordDisplay = `<span class="text-red-500 dark:text-red-400 font-extrabold text-5xl">${targetLetter}</span>`; | |
| mainWordClasses = 'text-5xl font-black mb-1 drop-shadow-lg leading-tight'; | |
| // 2. تلوين الحرف داخل الكلمة الأمازيغية (secondaryText) | |
| if (currentItem.transliteration) { | |
| secondaryText = highlightLetterInWord(currentItem.transliteration, targetLetter); | |
| } | |
| // 3. بناء المقطع الصوتي للزاوية اليسرى وفقاً للمنطق الجديد | |
| let cornerTextLeft; | |
| // تطبيق منطق الاستثناء لحرف 'ⴰ' | |
| if (targetLetter === 'ⴰ') { | |
| // إذا كان الحرف هو ⴰ، اعرض ⵢⴰ فقط | |
| cornerTextLeft = `ⵢⴰ`; | |
| } else { | |
| // لبقية الحروف، اعرض ⵢⴰ متبوعاً بالحرف (مثل ⵢⴰⴱ) | |
| cornerTextLeft = `ⵢⴰ${targetLetter}`; | |
| } | |
| cornerElementHTML += ` | |
| <div class="absolute top-0 left-0 p-3 bg-white/20 backdrop-blur-sm rounded-tl-3xl rounded-br-3xl shadow-md text-white"> | |
| <h2 class="font-black text-4xl icon-shadow text-yellow-300"> | |
| ${cornerTextLeft} | |
| </h2> | |
| </div> | |
| `; | |
| // 4. الحرف في الزاوية العلوية اليمنى (الحرف الكبير الأصلي) | |
| cornerElementHTML += ` | |
| <div class="absolute top-0 right-0 p-3 bg-white/20 backdrop-blur-sm rounded-tr-3xl rounded-bl-3xl shadow-md text-white"> | |
| <h2 class="font-black text-4xl icon-shadow"> | |
| ${targetLetter} | |
| </h2> | |
| </div> | |
| `; | |
| } else { | |
| // Logic for other categories | |
| const cornerText = currentItem.main.length > 3 ? categoryMeta.title : currentItem.main; | |
| cornerElementHTML = ` | |
| <div class="absolute top-0 right-0 p-3 bg-white/20 backdrop-blur-sm rounded-tr-3xl rounded-bl-3xl shadow-md text-white"> | |
| <h2 class="font-black text-xl icon-shadow"> | |
| ${cornerText} | |
| </h2> | |
| </div> | |
| `; | |
| } | |
| const micAction = isRecordingActive ? 'stopRecording()' : 'startRecording()'; | |
| const micButtonClass = isRecordingActive | |
| ? 'bg-red-600 hover:bg-red-700 shadow-2xl shadow-red-400/70 animate-pulse' | |
| : 'bg-red-500 hover:bg-red-600 shadow-2xl shadow-red-400/70'; | |
| content.innerHTML = ` | |
| <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"> | |
| <div class="w-full max-w-sm mx-auto bg-gradient-to-br ${mainCardGradient} rounded-3xl p-4 sm:p-6 shadow-2xl mt-2 flex flex-col justify-center items-center relative"> | |
| ${cornerElementHTML} | |
| <h2 class="text-white text-xl font-bold mb-3 drop-shadow-md mt-4">${categoryMeta.title}</h2> | |
| <div class="flex items-center justify-center w-full p-2 mb-3"> | |
| ${illustrationContent} | |
| </div> | |
| <div class="mt-1 text-center text-white"> | |
| <p class="${mainWordClasses}">${mainWordDisplay}</p> | |
| <p class="text-2xl font-black mb-1 drop-shadow-lg leading-tight ${isTifinaghLetters ? 'mt-3' : ''}"> | |
| ${secondaryText} | |
| </p> | |
| <p class="text-sm font-medium opacity-80 italic drop-shadow-sm mt-1"> | |
| ${currentItem.word} | |
| </p> | |
| </div> | |
| </div> | |
| <div class="w-full max-w-sm mx-auto mt-4 bg-white dark:bg-gray-700 p-4 rounded-xl shadow-lg flex items-center gap-3 transition-colors"> | |
| <button onclick="playAudio()" class="p-2 rounded-full ${appState.isAppMuted ? 'bg-gray-200' : 'bg-green-100 hover:bg-green-200'} transition-colors" aria-label="تشغيل الصوت"> | |
| ${renderIcon('Volume2', `w-7 h-7 ${appState.isAppMuted ? 'text-gray-500' : 'text-green-600'} flex-shrink-0`, 3)} | |
| </button> | |
| <div class="flex-grow"> | |
| <p class="text-sm text-gray-700 dark:text-gray-300 font-bold">استمع إلى النطق</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1 text-left">${currentItem.audioUrl ? 'ملف الصوت متوفر' : 'ملف الصوت غير متوفر'}</p> | |
| </div> | |
| <p class="text-sm text-blue-800 dark:text-blue-300 font-bold flex-shrink-0"> | |
| نطق | |
| </p> | |
| </div> | |
| <div class="flex justify-around w-full max-w-sm mx-auto mt-4 mb-4"> | |
| <button onclick="handlePrev()" class="control-btn bg-green-500 hover:bg-green-600 shadow-xl shadow-green-300/70" aria-label="العنصر السابق"> | |
| ${renderIcon('ChevronRight', 'w-8 h-8 text-white', 3)} | |
| </button> | |
| <button onclick="${micAction}" class="control-btn p-6 ${micButtonClass}" aria-label="${isRecordingActive ? 'إيقاف التسجيل' : 'بدء التسجيل'}"> | |
| ${renderIcon('Mic', 'w-10 h-10 text-white', 3)} | |
| </button> | |
| <button onclick="handleNext()" class="control-btn bg-blue-500 hover:bg-blue-600 shadow-xl shadow-blue-300/70" aria-label="العنصر التالي"> | |
| ${renderIcon('ChevronLeft', 'w-8 h-8 text-white', 3)} | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| }; | |
| // --- 9. شاشة الإعدادات (Settings Screen) --- | |
| // ... (بقية الدوال - لم تتغير) ... | |
| const renderSettingsScreen = () => { | |
| const content = document.getElementById('app-content'); | |
| const renderToggle = (id, label, stateKey, iconName) => { | |
| const isChecked = appState[stateKey]; | |
| const checkedColorClass = stateKey === 'isBackgroundMusicPlaying' ? 'peer-checked:bg-green-600' : 'peer-checked:bg-blue-600'; | |
| return ` | |
| <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-xl shadow-md transition-colors"> | |
| <div class="flex items-center gap-3"> | |
| <div class="p-1 rounded-full ${isChecked ? 'bg-blue-100 dark:bg-blue-900' : 'bg-gray-100 dark:bg-gray-600'}"> | |
| ${renderIcon(iconName || 'Settings', 'w-5 h-5 text-gray-700 dark:text-gray-300')} | |
| </div> | |
| <span class="text-gray-800 dark:text-white font-bold">${label}</span> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" value="" class="sr-only peer" ${isChecked ? 'checked' : ''} onchange=" | |
| ${stateKey === 'isBackgroundMusicPlaying' ? 'toggleBackgroundMusic(event.target.checked)' : `setState({${stateKey}: event.target.checked, currentScreen: 'settings'})`} | |
| "> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:right-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-500 ${checkedColorClass}"></div> | |
| </label> | |
| </div> | |
| `; | |
| }; | |
| content.innerHTML = ` | |
| <div class="p-4 pt-6 min-h-[calc(100vh-130px)] bg-gray-50 dark:bg-gray-900 transition-colors"> | |
| <h2 class="text-3xl font-black text-gray-800 dark:text-white mb-6 text-center">الإعدادات</h2> | |
| <div class="space-y-4 max-w-sm mx-auto"> | |
| ${renderToggle('dark-mode-toggle', 'الوضع الليلي (Dark Mode)', 'isDarkMode', 'Palette')} | |
| ${renderToggle('app-mute-toggle', 'كتم صوت العناصر التعليمية', 'isAppMuted', 'VolumeX')} | |
| ${renderToggle('music-toggle', 'تشغيل الموسيقى الخلفية', 'isBackgroundMusicPlaying', 'Volume2')} | |
| <div class="text-sm text-gray-500 dark:text-gray-400 p-2"> | |
| * ملاحظة: الإعدادات تُطبق فورًا على جميع شاشات التطبيق. | |
| </div> | |
| <div class="mt-8 pt-4 border-t border-gray-200 dark:border-gray-700"> | |
| <h3 class="text-xl font-bold text-gray-700 dark:text-gray-300 mb-4">خيارات أخرى</h3> | |
| <button class="w-full py-3 bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 font-bold rounded-xl hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors"> | |
| إدارة البيانات (حذف/تصدير) | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| }; | |
| // --- 10. شاشة حول التطبيق والقائمة الجانبية (The rest of the rendering functions) --- | |
| const renderInfoScreen = () => { | |
| const content = document.getElementById('app-content'); | |
| const artistsHTML = VOICE_OVER_ARTISTS.map(artist => ` | |
| <li class="p-3 bg-white dark:bg-gray-700 rounded-lg shadow-sm flex flex-col sm:flex-row justify-between items-start sm:items-center transition-colors"> | |
| <span class="text-gray-800 dark:text-gray-200 font-bold">${artist.name}</span> | |
| <span class="text-sm text-blue-600 dark:text-blue-400 italic mt-1 sm:mt-0">${artist.role}</span> | |
| </li> | |
| `).join(''); | |
| content.innerHTML = ` | |
| <div class="p-4 pt-6 min-h-[calc(100vh-130px)] bg-gray-50 dark:bg-gray-900 transition-colors"> | |
| <h2 class="text-3xl font-black text-gray-800 dark:text-white mb-6 text-center">حول تطبيق ${APP_NAME}</h2> | |
| <div class="max-w-md mx-auto bg-blue-100 dark:bg-blue-900/50 p-6 rounded-2xl shadow-xl mb-8 border-t-4 border-blue-500 transition-colors"> | |
| <h3 class="text-2xl font-black text-blue-800 dark:text-blue-300 mb-4 text-center">مطوّر البرنامج</h3> | |
| <div class="flex flex-col items-center text-center"> | |
| <img src="${DEVELOPER_INFO.image}" | |
| alt="${DEVELOPER_INFO.name}" | |
| class="w-24 h-24 rounded-full object-cover border-4 border-white dark:border-gray-700 shadow-lg mb-3" | |
| onerror="this.onerror=null; this.src='https://placehold.co/96x96/4A5568/ffffff?text=المطور';" | |
| /> | |
| <p class="text-xl font-bold text-gray-900 dark:text-white">${DEVELOPER_INFO.name}</p> | |
| <p class="text-sm text-blue-700 dark:text-blue-400 mb-3">${DEVELOPER_INFO.title}</p> | |
| <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed italic">"${DEVELOPER_INFO.bio}"</p> | |
| </div> | |
| </div> | |
| <div class="max-w-md mx-auto"> | |
| <h3 class="text-2xl font-black text-gray-800 dark:text-white mb-4 border-b pb-2 border-gray-200 dark:border-gray-700">المعلقون الصوتيون</h3> | |
| <ul class="space-y-3"> | |
| ${artistsHTML} | |
| </ul> | |
| </div> | |
| </div> | |
| `; | |
| }; | |
| const renderAppDefinitionScreen = () => { | |
| const content = document.getElementById('app-content'); | |
| const features = [ | |
| { title: 'تعلم الأحرف والأرقام', description: 'أساسيات لغة الأمازيغية (تيفيناغ) مع النطق الواضح.', icon: 'AArrowUp' }, | |
| { title: 'المفردات المصنفة', description: 'أقسام متخصصة للحيوانات، الألوان، العائلة، وأجزاء الجسم.', icon: 'Palette' }, | |
| { title: 'تفاعلي بالصوت', description: 'إمكانية الاستماع للنطق والتسجيل للمقارنة (ميزة التسجيل قيد التطوير).', icon: 'Volume2' }, | |
| { title: 'إعدادات مخصصة', description: 'التحكم في الوضع الليلي وكتم الصوت لتجربة مريحة.', icon: 'Settings' }, | |
| ]; | |
| const featuresHTML = features.map(f => ` | |
| <div class="flex items-start p-3 bg-white dark:bg-gray-700 rounded-xl shadow-sm transition-colors"> | |
| <div class="flex-shrink-0 p-2 bg-blue-100 dark:bg-blue-900 rounded-full"> | |
| ${renderIcon(f.icon, 'w-6 h-6 text-blue-600 dark:text-blue-300')} | |
| </div> | |
| <div class="mr-3"> | |
| <h4 class="font-bold text-gray-800 dark:text-white">${f.title}</h4> | |
| <p class="text-sm text-gray-600 dark:text-gray-400 mt-0.5">${f.description}</p> | |
| </div> | |
| </div> | |
| `).join(''); | |
| content.innerHTML = ` | |
| <div class="p-4 pt-6 min-h-[calc(100vh-130px)] bg-gray-50 dark:bg-gray-900 transition-colors"> | |
| <h2 class="text-3xl font-black text-gray-800 dark:text-white mb-4 text-center">ما هو تطبيق ${APP_NAME_LETTERS}؟</h2> | |
| <div class="max-w-md mx-auto space-y-6"> | |
| <div class="bg-blue-500/10 dark:bg-blue-900/40 p-5 rounded-2xl border-l-4 border-blue-600"> | |
| <p class="text-lg text-gray-700 dark:text-gray-300 font-medium leading-relaxed"> | |
| **${APP_NAME}** تطبيق تيفاوين هو تطبيق أمازيغي تعليمي يهدف إلى تعليم اللغة الأمازيغية من الصفر بطريقة مبسطة، تفاعلية وممتعة، موجه للأطفال والمبتدئين الراغبين في اكتساب أسس هذه اللغة العريقة. | |
| يجمع التطبيق بين الصوت، الصورة، والأنشطة التعليمية في تجربة تعلم حديثة تساعد المتعلمين على النطق الصحيح، وتنمية المفردات، والتعرف على حروف تيفيناغ ⵜⵉⴼⵉⵡⵉⵏ بسهولة. | |
| </p> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-800 dark:text-white border-b pb-2">المميزات الرئيسية</h3> | |
| <div class="space-y-4"> | |
| ${featuresHTML} | |
| </div> | |
| <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700 text-center"> | |
| <p class="text-sm text-gray-500 dark:text-gray-400"> | |
| الإصدار الحالي: 1.1 | جميع الحقوق محفوظة 2025 | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| }; | |
| const renderMenu = () => { | |
| if (!appState.isMenuOpen) return ''; | |
| const cardsHTML = CATEGORIES.map(category => { | |
| const isComingSoon = category.isComingSoon; | |
| const clickAction = isComingSoon | |
| ? 'alert("هذا القسم قريباً في التحديث القادم!"); toggleMenu();' | |
| : `setState({currentScreen: '${category.id}', selectedCategory: '${category.id}', isMenuOpen: false})`; | |
| const buttonClasses = isComingSoon ? 'opacity-50 cursor-not-allowed' : 'card-shadow group'; | |
| return ` | |
| <button | |
| onclick="${clickAction}" | |
| class="relative w-full h-24 rounded-xl overflow-hidden ${buttonClasses} text-right" | |
| aria-label="الذهاب إلى قسم ${category.title}" | |
| ${isComingSoon ? 'disabled' : ''} | |
| > | |
| <div class="absolute inset-0" style="background-image: url('${category.imageUrl}'); background-size: cover; background-position: center;"> | |
| <div class="absolute inset-0 bg-blue-900/70 p-3 flex items-center gap-3 transition-all group-hover:bg-blue-800/80"> | |
| <div class="p-2 bg-white/20 rounded-lg"> | |
| ${renderIcon(category.iconName, 'w-6 h-6 text-white')} | |
| </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">${isComingSoon ? '(قريباً)' : category.subtitle}</span> | |
| </div> | |
| </div> | |
| </div> | |
| </button> | |
| `; | |
| }).join(''); | |
| return ` | |
| <div id="menu-overlay" | |
| class="fixed inset-0 z-30 bg-black/50 transition-opacity duration-300" | |
| onclick="toggleMenu()"> | |
| <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" | |
| onclick="event.stopPropagation()"> | |
| <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"> | |
| <h3 class="text-2xl font-black">جميع الأقسام</h3> | |
| <p class="text-sm opacity-80 mt-1">اختر ما تريد تعلمه الآن:</p> | |
| </div> | |
| <div class="p-4 grid grid-cols-1 gap-3 hide-scrollbar"> | |
| ${cardsHTML} | |
| </div> | |
| <div class="p-4"> | |
| <button onclick="toggleMenu()" class="w-full py-3 bg-red-500 text-white font-bold rounded-xl shadow-lg">إغلاق القائمة</button> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| }; | |
| // --- 11. دالة الرسم الرئيسية والتهيئة --- | |
| const renderApp = () => { | |
| const screen = appState.currentScreen; | |
| const content = document.getElementById('app-content'); | |
| const header = document.getElementById('app-header'); | |
| const footer = document.getElementById('app-footer'); | |
| // التحكم في عرض الـ Header و الـ Footer | |
| const shouldShowNav = screen !== 'welcome'; | |
| header.style.display = shouldShowNav ? 'block' : 'none'; | |
| footer.style.display = shouldShowNav ? 'block' : 'none'; | |
| if (shouldShowNav) { | |
| renderHeader(); | |
| renderFooter(); | |
| } | |
| // تحديد محتوى الشاشة | |
| if (screen === 'welcome') { | |
| renderWelcomeScreen(); | |
| content.style.paddingTop = '0'; | |
| content.style.paddingBottom = '0'; | |
| } else if (screen === 'home' || screen === 'profile') { | |
| content.style.paddingTop = shouldShowNav ? '4rem' : '0'; | |
| content.style.paddingBottom = shouldShowNav ? '5rem' : '0'; | |
| renderHomeScreen(); | |
| } else if (screen === 'settings') { | |
| renderSettingsScreen(); | |
| } else if (screen === 'info') { | |
| renderInfoScreen(); | |
| } else if (screen === 'appDefinition') { | |
| renderAppDefinitionScreen(); | |
| } else if (CATEGORIES.some(c => c.id === screen)) { | |
| content.style.paddingTop = shouldShowNav ? '4rem' : '0'; | |
| content.style.paddingBottom = shouldShowNav ? '5rem' : '0'; | |
| renderLearningScreen(); | |
| } else { | |
| content.innerHTML = ` | |
| <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"> | |
| <p class="text-xl font-bold text-purple-600 dark:text-purple-400 mb-4">هذا القسم قيد الإنشاء!</p> | |
| <button onclick="setState({currentScreen: 'home', selectedCategory: null})" | |
| class="px-6 py-3 bg-purple-600 text-white font-bold rounded-xl shadow-lg hover:bg-purple-700 card-shadow"> | |
| العودة للرئيسية | |
| </button> | |
| </div> | |
| `; | |
| } | |
| // إدارة الـ Menu Overlay | |
| const existingMenu = document.getElementById('menu-overlay'); | |
| const appContainer = document.getElementById('app-container'); | |
| if (appState.isMenuOpen) { | |
| if (!existingMenu) { | |
| const menuHTML = renderMenu(); | |
| appContainer.insertAdjacentHTML('afterend', menuHTML); | |
| } | |
| } else if (existingMenu) { | |
| existingMenu.remove(); | |
| } | |
| }; | |
| // تهيئة التطبيق عند تحميل النافذة | |
| window.onload = () => { | |
| // التشغيل الأولي للموسيقى (لتجهيزها) | |
| toggleBackgroundMusic(false); | |
| renderApp(); | |
| }; | |
| </script> | |
| </body> | |
| </html> |