Spaces:
Running
Running
File size: 107,799 Bytes
95786c0 1787ea4 6c3bcb9 5f96e1f d381089 5f96e1f 1787ea4 8fbecaf 5f96e1f f7c6f67 5f96e1f f7c6f67 5f96e1f f7c6f67 1787ea4 5f96e1f f7c6f67 5f96e1f c5eb389 5f96e1f d26c359 5f96e1f a795c7b edbf623 c109bca edbf623 c109bca edbf623 c109bca edbf623 c109bca edbf623 c109bca edbf623 c109bca edbf623 c109bca 1787ea4 d381089 5f96e1f f7c6f67 5f96e1f 9010a2e 5f96e1f c5eb389 5f96e1f c5eb389 c109bca 9ac58ed c109bca c5eb389 9ac58ed b31be83 5f96e1f c109bca 5f96e1f 9ac58ed 5f96e1f 9347cda 5f96e1f f7c6f67 9347cda 5f96e1f 0d67323 9347cda f7c6f67 5f96e1f a795c7b 5f96e1f f7c6f67 5f96e1f 9ac58ed 5f96e1f 3358e28 c7180d0 34f50d6 ca1987b 34f50d6 7ef73d1 34f50d6 7ef73d1 34f50d6 e934ff9 34f50d6 43bf413 f7c6f67 5f96e1f 0da61a5 7d51d96 0da61a5 e934ff9 0da61a5 7d51d96 0da61a5 5f96e1f 8fbecaf 551b973 10388bf e934ff9 10388bf e934ff9 10388bf 3aaa2c9 3561abc e191887 3561abc e934ff9 3561abc e191887 7a25d5a 3561abc e191887 8157a03 e934ff9 3561abc e934ff9 3561abc e191887 3561abc 7a25d5a e934ff9 7a25d5a 3561abc a60bb87 b8d5f97 3561abc e33b10b e934ff9 e33b10b 3561abc 0ff88da 4927ca9 e934ff9 0ff88da e934ff9 0ff88da 43b1752 0ff88da 4927ca9 0ff88da 4927ca9 0ff88da 3561abc 08e61cd c3b5de9 4927ca9 c3b5de9 3561abc 99e830d c5702e2 0135509 3561abc 99e830d 551b973 3561abc 3aaa2c9 95786c0 c5eb389 551b973 5f96e1f 95786c0 5f96e1f 551b973 5f96e1f 551b973 95786c0 ce82b12 95786c0 551b973 95786c0 551b973 95786c0 551b973 95786c0 551b973 95786c0 551b973 95786c0 106c28c 95786c0 551b973 95786c0 551b973 95786c0 551b973 95786c0 551b973 95786c0 551b973 95786c0 551b973 95786c0 551b973 95786c0 551b973 95786c0 c5eb389 551b973 5f96e1f 9ac58ed 5f96e1f 4004768 90befd7 39585d7 90befd7 d53516b 90befd7 dc7d925 d53516b f7c6f67 c5eb389 f7c6f67 9ac58ed 5f96e1f c109bca b31be83 c109bca 9ac58ed c109bca b31be83 c109bca 5f96e1f c5eb389 9ac58ed b31be83 9ac58ed b31be83 c109bca b31be83 c109bca b31be83 c109bca b31be83 c109bca b31be83 c109bca b31be83 c109bca b31be83 c109bca b31be83 c5eb389 c109bca b31be83 c109bca b31be83 c109bca b31be83 c109bca b31be83 c109bca b31be83 c109bca 5f96e1f a795c7b 5f96e1f a795c7b 9ac58ed 5f96e1f f7c6f67 5f96e1f f7c6f67 5f96e1f f7c6f67 b31be83 5f96e1f f7c6f67 80139fc c109bca 80139fc 8fbecaf 80139fc 8fbecaf 3aaa2c9 c109bca b31be83 9ac58ed c5eb389 c67dfbd c5eb389 8fbecaf c5eb389 21180fe fdee827 c0bd0ff c5eb389 c67dfbd c5eb389 21180fe 8fbecaf c5eb389 8fbecaf c0bd0ff c5eb389 3aaa2c9 c5eb389 6c67451 c5eb389 fdee827 c5eb389 f14b0d9 21180fe c5eb389 21180fe c5eb389 f14b0d9 c0bd0ff 8fbecaf c0bd0ff c5eb389 c0bd0ff 21180fe c5eb389 21180fe c5eb389 3aaa2c9 c109bca 9ac58ed 3aaa2c9 8fbecaf 3aaa2c9 13b7d5f 54236fd 3aaa2c9 80139fc c109bca 9347cda c109bca 80139fc c109bca 80139fc c109bca 80139fc c109bca 54236fd 80139fc 3aaa2c9 c109bca 3aaa2c9 c109bca 80139fc f7c6f67 c109bca 3aaa2c9 c109bca 3aaa2c9 c109bca 9ac58ed 3aaa2c9 dc7d925 80139fc dc7d925 80139fc dc7d925 3aaa2c9 c109bca 9ac58ed 3aaa2c9 8fbecaf 3aaa2c9 8fbecaf 3aaa2c9 9ac58ed 3aaa2c9 9ac58ed 3aaa2c9 9ac58ed cd06305 4efd9c0 e846b26 777e282 8e5f0fb 777e282 8e5f0fb 777e282 8e5f0fb 777e282 cd06305 8e5f0fb cd06305 777e282 9ac58ed 3aaa2c9 9ac58ed 3aaa2c9 9ac58ed 3aaa2c9 9ac58ed b31be83 9ac58ed 3aaa2c9 8fbecaf 3aaa2c9 c109bca 3aaa2c9 c109bca 3aaa2c9 c109bca 3aaa2c9 c109bca 3aaa2c9 c109bca 3aaa2c9 c109bca 3aaa2c9 b31be83 3aaa2c9 8fbecaf 3aaa2c9 8fbecaf 3aaa2c9 8fbecaf 3aaa2c9 46b8f79 3aaa2c9 58b266d 3aaa2c9 8f06d8b 8fbecaf 5f96e1f dc7d925 edbf623 dc7d925 8fbecaf dc7d925 3aaa2c9 8fbecaf 0c605a0 8fbecaf 3aaa2c9 8fbecaf 0c605a0 6c67451 c109bca 3aaa2c9 c5eb389 0c605a0 32e526d 0c605a0 3aaa2c9 32e526d 3aaa2c9 f7c6f67 3aaa2c9 f7c6f67 b31be83 f7c6f67 8fbecaf f7c6f67 3aaa2c9 8fbecaf 3aaa2c9 c5eb389 3aaa2c9 c5eb389 b31be83 c109bca c5eb389 d865d6a c5eb389 007e4c6 3a56fcf | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242 1243 1244 1245 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 1287 1288 1289 1290 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300 1301 1302 1303 1304 1305 1306 1307 1308 1309 1310 1311 1312 1313 1314 1315 1316 1317 1318 1319 1320 1321 1322 1323 1324 1325 1326 1327 1328 1329 1330 1331 1332 1333 1334 1335 1336 1337 1338 1339 1340 1341 1342 1343 1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360 1361 1362 1363 1364 1365 1366 1367 1368 1369 1370 1371 1372 1373 1374 1375 1376 1377 1378 1379 1380 1381 1382 1383 1384 1385 1386 1387 1388 1389 1390 1391 1392 1393 1394 1395 1396 1397 1398 1399 1400 1401 1402 1403 1404 1405 1406 1407 1408 1409 1410 1411 1412 1413 1414 1415 1416 1417 1418 1419 1420 1421 1422 1423 1424 1425 1426 1427 1428 1429 1430 1431 1432 1433 1434 1435 1436 1437 | <!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> |