Notepad / index.html
Jaouadart's picture
Update index.html
3358e28 verified
Raw History Blame Contribute Delete
108 kB
<!DOCTYPE html>
<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 !important; /* 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>