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