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