File size: 179,380 Bytes
05e90e7 7bf7d5b 41e1749 7bf7d5b e384bec c122b0a 7bf7d5b 5786389 41e1749 afba67e 41e1749 a281968 41e1749 7394487 036913a 41e1749 a281968 7bf7d5b 41e1749 7bf7d5b 41e1749 7bf7d5b 41e1749 8804f87 41e1749 e0902ac 41e1749 8804f87 41e1749 bc3796a 41e1749 afdf449 040f556 7bf7d5b 41e1749 e0902ac 41e1749 040f556 a281968 040f556 a281968 040f556 a281968 41e1749 a281968 7bf7d5b eb08613 acf7dfb e384bec 7bf7d5b 26f3f34 488c84b acf7dfb 488c84b 7bf7d5b 488c84b 7bf7d5b acf7dfb 7bf7d5b 488c84b 7bf7d5b acf7dfb 7bf7d5b afba67e 8804f87 c429610 8804f87 7bf7d5b acf7dfb 7bf7d5b c429610 7bf7d5b 8804f87 7bf7d5b c429610 7bf7d5b afba67e 7bf7d5b fb15789 7bf7d5b 472c4d5 7bf7d5b 21b37be 7bf7d5b 400e996 7bf7d5b 21b37be 7bf7d5b 21b37be 7bf7d5b 1136534 472c4d5 400e996 472c4d5 011fdef 472c4d5 9406c0b 7f6b95b 4f4f697 9406c0b 472c4d5 7bf7d5b e384bec 7bf7d5b acf7dfb e384bec acf7dfb 7bf7d5b 21b37be 7bf7d5b 21b37be 7bf7d5b 21b37be 7bf7d5b 7f6b95b 7bf7d5b 21b37be 7bf7d5b afba67e 7bf7d5b 7f6b95b 1136534 472c4d5 011fdef 472c4d5 011fdef 472c4d5 d455bce 472c4d5 d455bce 011fdef 54e2d4b 472c4d5 1136534 9406c0b 4f4f697 9406c0b 157d848 9406c0b 7f6b95b 4f4f697 9406c0b 7f6b95b 9406c0b 7f6b95b 9406c0b a28ff8b 9406c0b 7bf7d5b 41e1749 040f556 afdf449 040f556 41e1749 d83d4f5 11c092d c2845d9 11c092d 804eb2f c2845d9 11c092d d83d4f5 7bf7d5b 036913a 05e90e7 d4d18df 05e90e7 d4d18df 05e90e7 afdf449 05e90e7 afdf449 05e90e7 804eb2f 05e90e7 afdf449 804eb2f 41e1749 1eb5022 6b8f86b 1eb5022 41e1749 0ac5245 804eb2f 0ac5245 804eb2f 0ac5245 804eb2f 0ac5245 41e1749 70184c4 0ac5245 70184c4 afdf449 41e1749 18fcb1a 7bf7d5b 41e1749 7bf7d5b 41e1749 afdf449 7bf7d5b 41e1749 18fcb1a d91d104 18fcb1a 7bf7d5b 41e1749 7bf7d5b 41e1749 acf7dfb a879cdd acf7dfb 7e7ca7c 86c3d9d acf7dfb a879cdd 6222cc6 acf7dfb 70184c4 2ab3a0a 70184c4 7bf7d5b 41e1749 040f556 41e1749 f575866 804eb2f f575866 804eb2f f575866 41e1749 7bf7d5b 41e1749 7bf7d5b 41e1749 7bf7d5b 41e1749 7bf7d5b 41e1749 040f556 41e1749 7bf7d5b acf7dfb e384bec acf7dfb 7bf7d5b acf7dfb e384bec acf7dfb 7bf7d5b acf7dfb 7bf7d5b acf7dfb 7bf7d5b acf7dfb 7bf7d5b acf7dfb 7bf7d5b acf7dfb 7bf7d5b acf7dfb 7bf7d5b acf7dfb 7bf7d5b acf7dfb e384bec acf7dfb e384bec acf7dfb 7bf7d5b acf7dfb 7bf7d5b acf7dfb 7bf7d5b acf7dfb 7bf7d5b acf7dfb 7bf7d5b acf7dfb 7bf7d5b acf7dfb 7bf7d5b acf7dfb 7bf7d5b acf7dfb 7bf7d5b acf7dfb 7bf7d5b acf7dfb 7bf7d5b acf7dfb 7bf7d5b ed2cae2 e384bec ed2cae2 7bf7d5b 5447041 acf7dfb 5447041 e384bec 5447041 acf7dfb 5447041 bbe35ad 5447041 7bf7d5b 5447041 7bf7d5b 5447041 488c84b 7bf7d5b 488c84b e384bec 488c84b 1e1b7ae 97ed8d3 488c84b 1e1b7ae 488c84b 7bf7d5b acf7dfb 41e1749 7bf7d5b 41e1749 7bf7d5b 41e1749 a281968 7bf7d5b a281968 7bf7d5b 70184c4 18fcb1a 70184c4 7488d0f 33d73ef 70184c4 0ac5245 70184c4 0ac5245 70184c4 2ab3a0a 70184c4 2ab3a0a 70184c4 2ab3a0a 70184c4 2ab3a0a 70184c4 2ab3a0a 70184c4 2ab3a0a 70184c4 2ab3a0a 70184c4 2ab3a0a 70184c4 2ab3a0a 70184c4 2ab3a0a 70184c4 2ab3a0a 7bf7d5b 6222cc6 2ab3a0a 6222cc6 565d2f9 2ab3a0a 6222cc6 86c3d9d 6222cc6 86c3d9d 6222cc6 b3b321f 6222cc6 b3b321f 6222cc6 b3b321f 6222cc6 b3b321f 86c3d9d b3b321f 86c3d9d 6222cc6 2ab3a0a 6222cc6 6963862 7e7ca7c 6963862 14c5cee b8fa1e0 ad7b1d2 6963862 565d2f9 6963862 14c5cee 6963862 14c5cee 6963862 9c3f41f 6963862 9c3f41f 6963862 9c3f41f 6963862 9c3f41f 6963862 9c3f41f 6963862 e73811f 6963862 e73811f 6963862 14c5cee ad7b1d2 6963862 5786389 14c5cee 5786389 6963862 9c3f41f 6963862 9c3f41f 6963862 9c3f41f 6963862 9c3f41f 6963862 9c3f41f 6963862 9c3f41f 6963862 e73811f 6963862 e73811f d2ac012 6963862 b8fa1e0 ad7b1d2 d2ac012 b8fa1e0 5a4f444 6963862 9c3f41f 6963862 14c5cee 5786389 5c9f8f5 7e7ca7c 5786389 5a4f444 5786389 5c9f8f5 5786389 7e7ca7c 5786389 5a4f444 ad7b1d2 e65ed86 b8fa1e0 bf8500f b8fa1e0 ad7b1d2 1c3f93f ad7b1d2 80d7d85 ad7b1d2 80d7d85 ad7b1d2 80d7d85 ad7b1d2 b8fa1e0 1c3f93f b8fa1e0 14c5cee 7abe807 565d2f9 14c5cee ad7b1d2 b8fa1e0 565d2f9 7abe807 b8fa1e0 7abe807 b8fa1e0 565d2f9 b8fa1e0 7abe807 ad7b1d2 b8fa1e0 7abe807 565d2f9 7abe807 14c5cee 41e1749 afba67e 7bf7d5b 397e47b 7bf7d5b d91d104 7bf7d5b 0ac5245 7bf7d5b 0ac5245 7bf7d5b d91d104 7bf7d5b 18fcb1a 7bf7d5b 41e1749 7bf7d5b 41e1749 7bf7d5b 507ca44 7bf7d5b afdf449 d91d104 7bf7d5b 41e1749 7bf7d5b 41e1749 7bf7d5b afba67e 488c84b afba67e 7bf7d5b d91d104 ed2cae2 18fcb1a ed2cae2 18fcb1a ed2cae2 8d2df6d 7bf7d5b 41e1749 7bf7d5b 41e1749 7bf7d5b 41e1749 036913a afdf449 41e1749 a281968 41e1749 a281968 41e1749 7bf7d5b 6963862 14c5cee 5786389 14c5cee 6963862 d2ac012 5a4f444 b8fa1e0 6963862 70184c4 e355ff5 70184c4 1e1b7ae a281968 | 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 1438 1439 1440 1441 1442 1443 1444 1445 1446 1447 1448 1449 1450 1451 1452 1453 1454 1455 1456 1457 1458 1459 1460 1461 1462 1463 1464 1465 1466 1467 1468 1469 1470 1471 1472 1473 1474 1475 1476 1477 1478 1479 1480 1481 1482 1483 1484 1485 1486 1487 1488 1489 1490 1491 1492 1493 1494 1495 1496 1497 1498 1499 1500 1501 1502 1503 1504 1505 1506 1507 1508 1509 1510 1511 1512 1513 1514 1515 1516 1517 1518 1519 1520 1521 1522 1523 1524 1525 1526 1527 1528 1529 1530 1531 1532 1533 1534 1535 1536 1537 1538 1539 1540 1541 1542 1543 1544 1545 1546 1547 1548 1549 1550 1551 1552 1553 1554 1555 1556 1557 1558 1559 1560 1561 1562 1563 1564 1565 1566 1567 1568 1569 1570 1571 1572 1573 1574 1575 1576 1577 1578 1579 1580 1581 1582 1583 1584 1585 1586 1587 1588 1589 1590 1591 1592 1593 1594 1595 1596 1597 1598 1599 1600 1601 1602 1603 1604 1605 1606 1607 1608 1609 1610 1611 1612 1613 1614 1615 1616 1617 1618 1619 1620 1621 1622 1623 1624 1625 1626 1627 1628 1629 1630 1631 1632 1633 1634 1635 1636 1637 1638 1639 1640 1641 1642 1643 1644 1645 1646 1647 1648 1649 1650 1651 1652 1653 1654 1655 1656 1657 1658 1659 1660 1661 1662 1663 1664 1665 1666 1667 1668 1669 1670 1671 1672 1673 1674 1675 1676 1677 1678 1679 1680 1681 1682 1683 1684 1685 1686 1687 1688 1689 1690 1691 1692 1693 1694 1695 1696 1697 1698 1699 1700 1701 1702 1703 1704 1705 1706 1707 1708 1709 1710 1711 1712 1713 1714 1715 1716 1717 1718 1719 1720 1721 1722 1723 1724 1725 1726 1727 1728 1729 1730 1731 1732 1733 1734 1735 1736 1737 1738 1739 1740 1741 1742 1743 1744 1745 1746 1747 1748 1749 1750 1751 1752 1753 1754 1755 1756 1757 1758 1759 1760 1761 1762 1763 1764 1765 1766 1767 1768 1769 1770 1771 1772 1773 1774 1775 1776 1777 1778 1779 1780 1781 1782 1783 1784 1785 1786 1787 1788 1789 1790 1791 1792 1793 1794 1795 1796 1797 1798 1799 1800 1801 1802 1803 1804 1805 1806 1807 1808 1809 1810 1811 1812 1813 1814 1815 1816 1817 1818 1819 1820 1821 1822 1823 1824 1825 1826 1827 1828 1829 1830 1831 1832 1833 1834 1835 1836 1837 1838 1839 1840 1841 1842 1843 1844 1845 1846 1847 1848 1849 1850 1851 1852 1853 1854 1855 1856 1857 1858 1859 1860 1861 1862 1863 1864 1865 1866 1867 1868 1869 1870 1871 1872 1873 1874 1875 1876 1877 1878 1879 1880 1881 1882 1883 1884 1885 1886 1887 1888 1889 1890 1891 1892 1893 1894 1895 1896 1897 1898 1899 1900 1901 1902 1903 1904 1905 1906 1907 1908 1909 1910 1911 1912 1913 1914 1915 1916 1917 1918 1919 1920 1921 1922 1923 1924 1925 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2027 2028 2029 2030 2031 2032 2033 2034 2035 2036 2037 2038 2039 2040 2041 2042 2043 2044 2045 2046 2047 2048 2049 2050 2051 2052 2053 2054 2055 2056 2057 2058 2059 2060 2061 2062 2063 2064 2065 2066 2067 2068 2069 2070 2071 2072 2073 2074 2075 2076 2077 2078 2079 2080 2081 2082 2083 2084 2085 2086 2087 2088 2089 2090 2091 2092 2093 2094 2095 2096 2097 2098 2099 2100 2101 2102 2103 2104 2105 2106 2107 2108 2109 2110 2111 2112 2113 2114 2115 2116 2117 2118 2119 2120 2121 2122 2123 2124 2125 2126 2127 2128 2129 2130 2131 2132 2133 2134 2135 2136 2137 2138 2139 2140 2141 2142 2143 2144 2145 2146 2147 2148 2149 2150 2151 2152 2153 2154 2155 2156 2157 2158 2159 2160 2161 2162 2163 2164 2165 2166 2167 2168 2169 2170 2171 2172 2173 2174 2175 2176 2177 2178 2179 2180 2181 2182 2183 2184 2185 2186 2187 2188 2189 2190 2191 2192 2193 2194 2195 2196 2197 2198 2199 2200 2201 2202 2203 2204 2205 2206 2207 2208 2209 2210 2211 2212 2213 2214 2215 2216 2217 2218 2219 2220 2221 2222 2223 2224 2225 2226 2227 2228 2229 2230 2231 2232 2233 2234 2235 2236 2237 2238 2239 2240 2241 2242 2243 2244 2245 2246 2247 2248 2249 2250 2251 2252 2253 2254 2255 2256 2257 2258 2259 2260 2261 2262 2263 2264 2265 2266 2267 2268 2269 2270 2271 2272 2273 2274 2275 2276 2277 2278 2279 2280 2281 2282 2283 2284 2285 2286 2287 2288 2289 2290 2291 2292 2293 2294 2295 2296 2297 2298 2299 2300 2301 2302 2303 2304 2305 2306 2307 2308 2309 2310 2311 2312 2313 2314 2315 2316 2317 2318 2319 2320 2321 2322 2323 2324 2325 2326 2327 2328 2329 2330 2331 2332 2333 2334 2335 2336 2337 2338 2339 2340 2341 2342 2343 2344 2345 2346 2347 2348 2349 2350 2351 2352 2353 2354 2355 2356 2357 2358 2359 2360 2361 2362 2363 2364 2365 2366 2367 2368 2369 2370 2371 2372 2373 2374 2375 2376 2377 2378 2379 2380 2381 2382 2383 2384 2385 2386 2387 2388 2389 2390 2391 2392 2393 2394 2395 2396 2397 2398 2399 2400 2401 2402 2403 2404 2405 2406 2407 2408 2409 2410 2411 2412 2413 2414 2415 2416 2417 2418 2419 2420 2421 2422 2423 2424 2425 | <!doctype html>
<html lang="ar" dir="rtl" class="h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="supabase-url" content="">
<meta name="supabase-anon-key" content="">
<title>بيان - مساعد الكتابة العربية الذكي</title>
<meta name="description" content="بيان — منصة ذكاء اصطناعي متكاملة لتصحيح الإملاء والنحو والترقيم وتلخيص النصوص والإكمال التلقائي وتدقيق القرآن الكريم وتحويل اللهجات — مصمّمة خصيصًا للغة العربية. جرّبه مجاناً!">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Amiri+Quran&family=Cairo:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/tokens.css">
<link rel="stylesheet" href="/css/base.css">
<link rel="stylesheet" href="/css/components.css">
<script src="/js/vendor/supabase.min.js"></script>
<script src="/js/auth/config.js"></script>
<script src="/js/auth/client.js"></script>
<script src="/js/auth/session.js"></script>
<script src="/js/auth/auth.js"></script>
<script src="/js/auth/auth-ui.js"></script>
<script src="/js/theme.js"></script>
<script src="/js/vendor/mammoth.browser.min.js"></script>
<script src="/js/vendor/docx.umd.js"></script>
<script src="/js/vendor/FileSaver.min.js"></script>
<script src="/js/vendor/html2pdf.bundle.min.js"></script>
<script src="/js/renderer.js"></script>
<script src="/js/selection.js"></script>
<script src="/js/ui.js"></script>
<script src="/js/documents/doc-utils.js"></script>
<script src="/js/editor.js"></script>
<script src="/js/autocomplete.js"></script>
<script src="/js/format.js"></script>
<script src="/js/documents/import.js"></script>
<script src="/js/documents/export.js?v=20260615d"></script>
<script src="/js/documents/documents.js"></script>
<!-- Phase 7 — Sync System -->
<script src="/js/sync/sync-queue.js"></script>
<script src="/js/sync/sync-resolver.js"></script>
<script src="/js/sync/sync-manager.js"></script>
<!-- Phase 6 — Cloud Persistence -->
<script src="/js/documents-cloud/documents-api.js"></script>
<script src="/js/documents-cloud/documents-state.js"></script>
<script src="/js/documents-cloud/documents-ui.js"></script>
<script src="/js/summaries/summaries-api.js"></script>
<script src="/js/summaries/summaries-ui.js"></script>
<script src="/js/settings-sync/settings-api.js"></script>
<script src="/js/settings-sync/settings-sync.js"></script>
</head>
<body class="h-full page-bg">
<div class="h-full overflow-auto"><!-- Navigation -->
<nav class="site-nav fixed top-0 right-0 left-0 z-50" role="navigation" aria-label="التنقل الرئيسي">
<div class="max-w-7xl mx-auto px-4 md:px-6 py-3">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-3">
<button id="mobile-menu-btn" class="mobile-menu-btn md:hidden" aria-label="فتح القائمة" aria-expanded="false" aria-controls="mobile-drawer">
<svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
<button onclick="showPage('home')" class="flex items-center gap-3" style="background:none;border:none;cursor:pointer;" aria-label="الرئيسية"><svg width="22" height="22" fill="none" stroke="url(#navGrad)" viewBox="0 0 24 24" style="flex-shrink:0;"><defs><linearGradient id="navGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:var(--color-primary)"/><stop offset="100%" style="stop-color:var(--color-secondary)"/></linearGradient></defs><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg><span id="nav-brand" class="text-xl md:text-2xl font-bold text-gradient">بيان</span></button>
</div>
<div class="hidden md:flex items-center gap-8">
<button onclick="showPage('home')" class="nav-link active text-base font-medium" data-page="home">الرئيسية</button>
<button onclick="showPage('features')" class="nav-link text-base font-medium" data-page="features">الميزات</button>
<button onclick="showPage('pricing')" class="nav-link text-base font-medium" data-page="pricing">الأسعار</button>
<button onclick="showPage('editor')" class="nav-link text-base font-medium" data-page="editor">المحرر</button>
<a href="https://bayyinah-alpha.vercel.app/" class="nav-bayyinah-link" target="_blank" rel="noopener noreferrer" aria-label="بَيِّنَة — مساعد ذكي للإجابة عن أسئلة القرآن والحديث وقصص الأنبياء"><svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="flex-shrink:0;"><path d="M12 7v14"/><path d="M16 12h2"/><path d="M16 8h2"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/><path d="M6 12h2"/><path d="M6 8h2"/></svg> بَيِّنَة <span class="nav-bayyinah-arrow">↗</span></a>
</div>
<div class="flex items-center gap-2 md:gap-3">
<div id="auth-menu-wrap" class="auth-menu-wrap is-hidden">
<div class="auth-dropdown">
<button id="auth-menu-trigger" class="auth-menu-trigger" type="button" aria-label="قائمة الحساب" aria-haspopup="true" aria-expanded="false">
<span id="auth-avatar" class="auth-avatar" aria-hidden="true"><svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/></svg></span>
<span id="auth-display-name" class="auth-display-name">ضيف</span>
<span class="auth-menu-chevron" aria-hidden="true">▾</span>
</button>
<div id="auth-account-menu" class="auth-account-menu" role="menu" aria-label="الحساب">
<div class="auth-account-menu__header">
<span id="auth-provider-label" class="auth-provider-label">ضيف</span>
</div>
<button id="auth-link-google-btn" type="button" class="auth-account-menu__item" role="menuitem">ربط حساب Google</button>
<button id="auth-logout-btn" type="button" class="auth-account-menu__item auth-account-menu__item--danger" role="menuitem">تسجيل الخروج</button>
</div>
</div>
</div>
<button id="theme-toggle" class="theme-toggle-animated" aria-label="تبديل السمة" aria-pressed="true" type="button">
<svg class="theme-icon-sun" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
<svg class="theme-icon-moon" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
</button>
</div>
</div>
</div>
</nav>
<!-- Mobile drawer -->
<div id="mobile-drawer" class="mobile-drawer" aria-hidden="true">
<div id="mobile-drawer-backdrop" class="mobile-drawer-backdrop"></div>
<div class="mobile-drawer-panel" role="dialog" aria-label="قائمة التنقل">
<button id="mobile-drawer-close" class="mobile-drawer-link" style="text-align:left" aria-label="إغلاق القائمة">✕ إغلاق</button>
<button class="mobile-drawer-link active" data-page="home">الرئيسية</button>
<button class="mobile-drawer-link" data-page="features">الميزات</button>
<button class="mobile-drawer-link" data-page="pricing">الأسعار</button>
<button class="mobile-drawer-link" data-page="editor">المحرر</button>
<a href="https://bayyinah-alpha.vercel.app/" class="mobile-drawer-link mobile-drawer-link-external" target="_blank" rel="noopener noreferrer" aria-label="بَيِّنَة — مساعد ذكي للإجابة عن أسئلة القرآن والحديث وقصص الأنبياء">بَيِّنَة — القرآن والحديث والسيرة</a>
<div class="auth-drawer-section">
<p class="auth-drawer-label">الحساب</p>
<p id="auth-drawer-name" class="auth-drawer-name">—</p>
<p id="auth-drawer-provider" class="auth-drawer-provider"></p>
<button id="auth-link-google-btn-mobile" type="button" class="mobile-drawer-link auth-drawer-action is-hidden">ربط حساب Google</button>
<button id="auth-logout-btn-mobile" type="button" class="mobile-drawer-link auth-drawer-action is-hidden">تسجيل الخروج</button>
</div>
</div>
</div>
<div id="auth-offline-banner" class="auth-offline-banner is-hidden" role="status" aria-live="polite">
تعذر الاتصال بخدمة المصادقة. يمكنك متابعة استخدام المحرر والمحاولة لاحقاً.
</div>
<!-- Phase 6.1 — Docs Sidebar (mobile only overlay) -->
<div id="docs-sidebar" class="docs-sidebar" role="complementary" aria-label="مستنداتي">
<div class="docs-sidebar__header">
<span class="docs-sidebar__title">مستنداتي</span>
</div>
<div class="docs-sidebar__body">
<button id="docs-new-btn-mobile" class="docs-new-btn" type="button" aria-label="مستند جديد">
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
مستند جديد
</button>
<div id="docs-list-mobile" role="list" aria-label="قائمة المستندات"></div>
</div>
</div>
<!-- Auth Gate -->
<div id="auth-gate" class="auth-gate" aria-hidden="true" role="dialog" aria-labelledby="auth-gate-title" aria-modal="true">
<div id="auth-gate-backdrop" class="auth-gate-backdrop"></div>
<div class="auth-gate-panel auth-gate-panel--desktop">
<h2 id="auth-gate-title" class="auth-gate-title">مرحباً بك في بيان</h2>
<p class="auth-gate-subtitle">اختر طريقة المتابعة للبدء في الكتابة والتحليل</p>
<div class="auth-gate-actions">
<button id="auth-guest-btn" type="button" class="btn-primary auth-gate-btn">المتابعة كضيف</button>
<button id="auth-google-btn" type="button" class="btn-ghost auth-gate-btn auth-gate-btn--google">
<svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
المتابعة باستخدام Google
</button>
</div>
</div>
<div id="auth-gate-sheet" class="auth-gate-panel auth-gate-panel--mobile">
<div class="bottom-sheet-handle" aria-hidden="true"></div>
<h2 class="auth-gate-title">مرحباً بك في بيان</h2>
<p class="auth-gate-subtitle">اختر طريقة المتابعة</p>
<button id="auth-guest-btn-mobile" type="button" class="btn-primary auth-gate-btn w-full">المتابعة كضيف</button>
<button id="auth-google-btn-mobile" type="button" class="btn-ghost auth-gate-btn auth-gate-btn--google w-full">المتابعة باستخدام Google</button>
</div>
</div><!-- Home Page -->
<div id="page-home" class="page"><!-- Hero Section -->
<section class="gradient-bg min-h-screen pt-28 pb-20 relative overflow-hidden"><!-- Background Decoration -->
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-20 left-20 w-96 h-96 rounded-full opacity-20" style="background: radial-gradient(circle, var(--primary-color) 0%, transparent 70%); filter: blur(80px);"></div>
<div class="absolute bottom-20 right-20 w-96 h-96 rounded-full opacity-20" style="background: radial-gradient(circle, var(--secondary-color) 0%, transparent 70%); filter: blur(80px);"></div>
</div>
<div class="max-w-7xl mx-auto px-6 relative z-10">
<div class="grid lg:grid-cols-2 gap-16 items-center"><!-- Hero Content -->
<div class="text-center lg:text-right animate-fade-in">
<h1 id="hero-headline" class="text-5xl lg:text-7xl font-bold leading-tight mb-6" style="line-height: 1.4;">اكتب العربية<br><span class="text-gradient">بثقة واحتراف</span></h1>
<p id="hero-subheadline" class="text-xl lg:text-2xl leading-relaxed mb-10" style="color: var(--text-secondary); line-height: 1.9;">تدقيق إملائي ونحوي وترقيم، تلخيص ذكي، إكمال تلقائي، تدقيق القرآن الكريم، وتحويل اللهجات — كل ذلك بالذكاء الاصطناعي، وباللغة العربية.</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start mb-12"><button id="hero-cta-primary" onclick="showPage('editor')" class="px-8 py-4 rounded-2xl text-lg font-bold text-white gradient-accent transition-all hover:scale-105 hover:shadow-2xl">← ابدأ الكتابة مجانًا</button> <button onclick="showPage('features')" class="px-8 py-4 rounded-2xl text-lg font-bold transition-all hover:scale-105 border-2" style="border-color: rgba(255, 255, 255, 0.35); color: var(--text-color); box-shadow: 0 0 20px rgba(107, 163, 224, 0.12);">اكتشف الميزات</button>
</div><!-- Stats -->
<div class="flex items-center gap-8 justify-center lg:justify-start">
<div class="text-center">
<div class="text-3xl font-bold text-gradient">
٧ أدوات
</div>
<div class="text-sm mt-1" style="color: var(--text-secondary);">
ذكاء اصطناعي
</div>
</div>
<div class="w-px h-12" style="background: rgba(255, 255, 255, 0.2);"></div>
<div class="text-center">
<div class="text-3xl font-bold text-gradient">
فوري
</div>
<div class="text-sm mt-1" style="color: var(--text-secondary);">
تحليل لحظي
</div>
</div>
<div class="w-px h-12" style="background: rgba(255, 255, 255, 0.2);"></div>
<div class="text-center">
<div class="text-3xl font-bold text-gradient">
مجاني
</div>
<div class="text-sm mt-1" style="color: var(--text-secondary);">
لا يحتاج تسجيل
</div>
</div>
</div>
</div><!-- Editor Mockup -->
<div class="relative animate-float">
<div class="rounded-3xl overflow-hidden shadow-2xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.1);"><!-- Editor Header -->
<div class="flex items-center justify-between p-4 border-b" style="border-color: rgba(255, 255, 255, 0.1);">
<div class="flex items-center gap-3">
<div class="w-3 h-3 rounded-full" style="background: #ef4444;"></div>
<div class="w-3 h-3 rounded-full" style="background: #fbbf24;"></div>
<div class="w-3 h-3 rounded-full" style="background: #22c55e;"></div>
</div><span class="text-sm" style="color: var(--text-secondary);">محرر بيان</span>
<div class="w-20"></div>
</div><!-- Mock Editor Content -->
<div class="p-8 editor-content text-right text-lg" dir="rtl" style="background: var(--surface-color); color: var(--text-color); min-height: 300px;">
<p class="mb-4">تعتبر اللغة العربية من أجمل <span class="spelling-error">اللغاة</span> في العالم<span class="punctuation-suggestion">،</span> وهي لغة <span class="spelling-error">القرأن</span> الكريم<span class="punctuation-suggestion">.</span></p>
<p class="mb-4">الطالبات <span class="grammar-error">ذهبوا</span> إلى المكتبة لأن <span class="spelling-error">الأمتحان</span> قريب جداً<span class="punctuation-suggestion">.</span></p>
<p>محرر بيان يساعدك على كتابة نصوص عربية <span class="spelling-error">صحيحه</span> بكل <span style="color: var(--text-secondary); opacity: 0.4; font-style: italic; border-bottom: 1px dashed rgba(107,163,224,0.3);">سهولة ويسر وإتقان</span></p>
</div><!-- Mock Stats Bar -->
<div class="flex items-center justify-between p-4 border-t" style="border-color: rgba(255, 255, 255, 0.1);">
<div class="flex items-center gap-6">
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full" style="background: #ef4444;"></div><span class="text-sm" style="color: var(--text-secondary);">٤ إملائي</span>
</div>
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full" style="background: #fbbf24;"></div><span class="text-sm" style="color: var(--text-secondary);">١ نحوي</span>
</div>
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full" style="background: #22c55e;"></div><span class="text-sm" style="color: var(--text-secondary);">٣ ترقيم</span>
</div>
</div>
<div class="flex items-center gap-2"><span class="text-2xl font-bold text-gradient">٧٥</span> <span class="text-sm" style="color: var(--text-secondary);">التقييم</span>
</div>
</div>
<div class="absolute -bottom-6 -left-6 p-4 rounded-2xl shadow-xl animate-fade-in" style="background: var(--surface-color); border: 1px solid rgba(34, 197, 94, 0.3); max-width: 280px;">
<div class="flex items-start gap-3">
<div class="w-10 h-10 rounded-xl flex items-center justify-center" style="background: rgba(34, 197, 94, 0.15);"><span style="color: #22c55e; font-size: 20px;">✓</span>
</div>
<div>
<div class="text-sm font-bold mb-1">
تصحيح تلقائي
</div>
<div class="text-xs" style="color: var(--text-secondary);">
تم إصلاح ٨ أخطاء في النص
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section><!-- Features Preview Section -->
<section class="py-24" style="background: var(--background-color);">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-4xl lg:text-5xl font-bold mb-6">ميزات <span class="text-gradient">قوية ومتقدمة</span></h2>
<p class="text-xl max-w-3xl mx-auto" style="color: var(--text-secondary); line-height: 1.9;">كل ما تحتاجه لكتابة نصوص عربية احترافية وخالية من الأخطاء</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"><!-- Feature 1: Spelling -->
<div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
<div class="feature-icon mb-6" style="background: rgba(239, 68, 68, 0.15); color: #ef4444;">
<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
</div>
<h3 class="text-xl font-bold mb-3">التدقيق الإملائي الذكي</h3>
<p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">فهم الجذور الصرفية والسياق لتصحيح الأخطاء الإملائية بدقة عالية</p>
</div><!-- Feature 2: Grammar -->
<div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
<div class="feature-icon mb-6" style="background: rgba(251, 191, 36, 0.15); color: #fbbf24;">
<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
</div>
<h3 class="text-xl font-bold mb-3">تصحيح القواعد النحوية</h3>
<p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">توافق الفعل والفاعل واقتراح الإعراب الصحيح بشكل تلقائي</p>
</div><!-- Feature 3: Punctuation -->
<div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
<div class="feature-icon mb-6" style="background: rgba(34, 197, 94, 0.15); color: #22c55e;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10H14.017zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10H0z"/></svg>
</div>
<h3 class="text-xl font-bold mb-3">تصحيح علامات الترقيم</h3>
<p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">الفواصل والنقط وعلامات الاقتباس العربية في المكان الصحيح</p>
</div><!-- Feature 4: Summarization -->
<div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
<div class="feature-icon mb-6" style="background: rgba(139, 92, 246, 0.15); color: #8b5cf6;">
<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
</div>
<h3 class="text-xl font-bold mb-3">تلخيص النصوص العربية</h3>
<p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">الحفاظ على المعنى والأسلوب مع تقليل طول النص بذكاء</p>
</div><!-- Feature 5: Autocomplete -->
<div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
<div class="feature-icon mb-6" style="background: rgba(236, 72, 153, 0.15); color: #ec4899;">
<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
</div>
<h3 class="text-xl font-bold mb-3">الإكمال التلقائي الذكي</h3>
<p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">اقتراحات فورية لإكمال الجمل والعبارات أثناء الكتابة بذكاء اصطناعي</p>
</div>
<!-- Feature 6: Quran Verification -->
<div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
<div class="feature-icon mb-6" style="background: rgba(6, 182, 212, 0.15); color: #06b6d4;">
<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
</div>
<h3 class="text-xl font-bold mb-3">تدقيق النص القرآني</h3>
<p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">تحقق من النص القرآني وعرضه بالتشكيل مع اسم السورة ورقم الآية وترجمته إلى ١٤ لغة</p>
</div><!-- Feature 7: Dialect Conversion -->
<div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
<div class="feature-icon mb-6" style="background: rgba(249, 115, 22, 0.15); color: #f97316;">
<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
</div>
<h3 class="text-xl font-bold mb-3">تحويل اللهجات للفصحى</h3>
<p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">حوّل أي لهجة عربية إلى لغة عربية فصحى بذكاء اصطناعي</p>
</div><!-- Feature 8: Bayyinah -->
<div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
<div class="feature-icon mb-6" style="background: rgba(20, 145, 155, 0.15); color: #14919b;">
<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 7v14"/><path d="M16 12h2"/><path d="M16 8h2"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/><path d="M6 12h2"/><path d="M6 8h2"/></svg>
</div>
<h3 class="text-xl font-bold mb-3">بَيِّنَة</h3>
<p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">بوابتك للقرآن والتفسير والسنة والمصادر السردية الموثقة</p>
</div>
</div>
<div class="text-center mt-12"><button onclick="showPage('features')" class="px-8 py-4 rounded-2xl text-lg font-bold border-2 transition-all hover:scale-105" style="border-color: var(--primary-color); color: var(--primary-color);">← اكتشف جميع الميزات</button>
</div>
</div>
</section>
<!-- How It Works -->
<section class="py-24" style="background: var(--surface-color);">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-4xl lg:text-5xl font-bold mb-6">كيف <span class="text-gradient">يعمل بيان؟</span></h2>
<p class="text-xl max-w-3xl mx-auto" style="color: var(--text-secondary); line-height: 1.9;">ثلاث خطوات بسيطة للحصول على نص عربي مثالي</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Step 1 -->
<div class="text-center p-8 rounded-3xl" style="background: var(--background-color); border: 1px solid var(--color-border);">
<div class="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6" style="background: linear-gradient(135deg, rgba(107, 163, 224, 0.15), rgba(107, 163, 224, 0.05));">
<svg width="28" height="28" fill="none" stroke="var(--color-primary)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
</div>
<div class="text-sm font-bold mb-2 text-gradient">الخطوة ١</div>
<h3 class="text-xl font-bold mb-3">اكتب نصّك</h3>
<p class="text-sm" style="color: var(--text-secondary); line-height: 1.8;">اكتب أو الصق نصك العربي في المحرر — يدعم جميع أنماط الكتابة</p>
</div>
<!-- Step 2 -->
<div class="text-center p-8 rounded-3xl" style="background: var(--background-color); border: 1px solid var(--color-border);">
<div class="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6" style="background: linear-gradient(135deg, rgba(165, 148, 232, 0.15), rgba(165, 148, 232, 0.05));">
<svg width="28" height="28" fill="none" stroke="var(--color-secondary)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
</div>
<div class="text-sm font-bold mb-2 text-gradient">الخطوة ٢</div>
<h3 class="text-xl font-bold mb-3">تحليل تلقائي</h3>
<p class="text-sm" style="color: var(--text-secondary); line-height: 1.8;">يحلل بيان النص فورًا ويكتشف الأخطاء الإملائية والنحوية والترقيمية</p>
</div>
<!-- Step 3 -->
<div class="text-center p-8 rounded-3xl" style="background: var(--background-color); border: 1px solid var(--color-border);">
<div class="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6" style="background: linear-gradient(135deg, rgba(107, 201, 138, 0.15), rgba(107, 201, 138, 0.05));">
<svg width="28" height="28" fill="none" stroke="var(--color-success)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
</div>
<div class="text-sm font-bold mb-2 text-gradient">الخطوة ٣</div>
<h3 class="text-xl font-bold mb-3">صحّح بضغطة</h3>
<p class="text-sm" style="color: var(--text-secondary); line-height: 1.8;">اختر الاقتراح المناسب وطبّقه بضغطة واحدة — أو طبّق الكل دفعة واحدة</p>
</div>
</div>
<div class="text-center mt-12">
<button onclick="showPage('editor')" class="px-8 py-4 rounded-2xl text-lg font-bold text-white gradient-accent transition-all hover:scale-105 hover:shadow-2xl">← جرّب المحرر الآن</button>
</div>
</div>
</section>
</div><!-- Features Page -->
<div id="page-features" class="page">
<section class="pt-32 pb-24" style="background: var(--background-color);">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-20">
<h1 class="text-5xl lg:text-6xl font-bold mb-6">ميزات <span class="text-gradient">شاملة ومتكاملة</span></h1>
<p class="text-xl max-w-3xl mx-auto" style="color: var(--text-secondary); line-height: 1.9;">أدوات متخصصة مصممة خصيصًا للغة العربية</p>
</div><!-- Feature 1: Spelling Check -->
<div class="grid lg:grid-cols-2 gap-16 items-center mb-32">
<div class="order-2 lg:order-1">
<div class="p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
<div class="text-right text-xl editor-content" dir="rtl" style="color: var(--text-color); line-height: 2;">
<p class="mb-4">الكتابة <span class="spelling-error">الصحيحه</span> مهمة جدًا في التواصل الفعّال.</p>
<div class="mt-6 p-4 rounded-xl" style="background: rgba(239, 68, 68, 0.1); border-right: 4px solid #ef4444;">
<div class="text-sm font-bold mb-2" style="color: #ef4444;">
خطأ إملائي
</div>
<div class="flex items-center justify-between text-base">
<div><span style="text-decoration: line-through; color: var(--text-secondary);">الصحيحه</span> <span class="mx-3">←</span> <span style="color: #22c55e; font-weight: 600;">الصحيحة</span>
</div>
</div>
<div class="text-sm mt-3" style="color: var(--text-secondary);">
التاء المربوطة (ة) تُستخدم مع الصفات المؤنثة
</div>
</div>
</div>
</div>
</div>
<div class="order-1 lg:order-2 text-right">
<div class="feature-icon mb-6" style="background: rgba(239, 68, 68, 0.15); color: #ef4444; width: 64px; height: 64px; font-size: 32px;">
<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
</div>
<h2 class="text-4xl font-bold mb-6">التدقيق الإملائي الذكي</h2>
<p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">محرك ذكي يفهم الجذور الصرفية والسياق اللغوي لتصحيح الأخطاء الإملائية التي تفوتها البرامج التقليدية.</p>
<ul class="space-y-4">
<li class="flex items-center gap-4">
<div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span>
</div><span class="text-base">اقتراحات حسب السياق اللغوي</span></li>
<li class="flex items-center gap-4">
<div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span>
</div><span class="text-base">التعرف على الجذور الصرفية العربية</span></li>
<li class="flex items-center gap-4">
<div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span>
</div><span class="text-base">تصحيح فوري أثناء الكتابة</span></li>
</ul>
</div>
</div><!-- Feature 2: Grammar Check -->
<div class="grid lg:grid-cols-2 gap-16 items-center mb-32">
<div class="text-right">
<div class="feature-icon mb-6" style="background: rgba(251, 191, 36, 0.15); color: #fbbf24; width: 64px; height: 64px; font-size: 32px;">
<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
</div>
<h2 class="text-4xl font-bold mb-6">تصحيح القواعد النحوية</h2>
<p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">فهم عميق لقواعد النحو العربي بما في ذلك الإعراب وتوافق الفعل مع الفاعل والصفات.</p>
<ul class="space-y-4">
<li class="flex items-center gap-4">
<div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span>
</div><span class="text-base">توافق الفعل والفاعل تلقائيًا</span></li>
<li class="flex items-center gap-4">
<div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span>
</div><span class="text-base">اقتراح الإعراب الصحيح للكلمات</span></li>
<li class="flex items-center gap-4">
<div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span>
</div><span class="text-base">شرح تفصيلي لكل تصحيح</span></li>
</ul>
</div>
<div>
<div class="p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
<div class="text-right text-xl editor-content" dir="rtl" style="color: var(--text-color); line-height: 2;">
<p class="mb-4">الطلاب <span class="grammar-error">ذهبوا</span> إلى المدرسة صباحًا.</p>
<div class="mt-6 p-4 rounded-xl" style="background: rgba(251, 191, 36, 0.1); border-right: 4px solid #fbbf24;">
<div class="text-sm font-bold mb-2" style="color: #fbbf24;">
اقتراح نحوي
</div>
<div class="text-base mb-3"><span style="color: var(--text-secondary);">يُفضل:</span> <span style="color: #22c55e; font-weight: 600; margin-right: 8px;">ذهب الطلاب</span>
</div>
<div class="text-sm" style="color: var(--text-secondary); line-height: 1.7;">
في اللغة العربية الفصحى، عندما يتقدم الفعل على الفاعل الجمع، يُفضل إفراد الفعل.
</div>
</div>
</div>
</div>
</div>
</div><!-- Feature 3: Punctuation -->
<div class="grid lg:grid-cols-2 gap-16 items-center mb-32">
<div class="order-2 lg:order-1">
<div class="p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
<div class="text-right text-xl editor-content" dir="rtl" style="color: var(--text-color); line-height: 2;">
<p class="mb-4">قال المعلم<span class="punctuation-suggestion">:</span> <span class="punctuation-suggestion">«</span>الدرس مهم جدًا<span class="punctuation-suggestion">»</span><span class="punctuation-suggestion">.</span></p>
<div class="mt-6 p-4 rounded-xl" style="background: rgba(34, 197, 94, 0.1); border-right: 4px solid #22c55e;">
<div class="text-sm font-bold mb-2" style="color: #22c55e;">
✓ تم إصلاح علامات الترقيم
</div>
<div class="text-sm" style="color: var(--text-secondary); line-height: 1.7;">
• أُضيفت النقطتان بعد "قال المعلم"<br>
• استُخدمت علامات الاقتباس العربية «»<br>
• أُضيفت النقطة في نهاية الجملة
</div>
</div>
</div>
</div>
</div>
<div class="order-1 lg:order-2 text-right">
<div class="feature-icon mb-6" style="background: rgba(34, 197, 94, 0.15); color: #22c55e; width: 64px; height: 64px; font-size: 32px;">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10H14.017zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10H0z"/></svg>
</div>
<h2 class="text-4xl font-bold mb-6">تصحيح علامات الترقيم</h2>
<p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">كشف وتصحيح تلقائي لعلامات الترقيم العربية بما في ذلك الوضع الصحيح للفواصل والنقاط وعلامات الاقتباس.</p>
<ul class="space-y-4">
<li class="flex items-center gap-4">
<div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span>
</div><span class="text-base">علامات الترقيم العربية الأصيلة</span></li>
<li class="flex items-center gap-4">
<div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span>
</div><span class="text-base">تحليل بنية الجمل والفقرات</span></li>
<li class="flex items-center gap-4">
<div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span>
</div><span class="text-base">معالجة علامات الاقتباس والحوار</span></li>
</ul>
</div>
</div><!-- Feature 4: Summarization -->
<div class="grid lg:grid-cols-2 gap-16 items-center mb-32">
<div class="text-right">
<div class="feature-icon mb-6" style="background: rgba(139, 92, 246, 0.15); color: #8b5cf6; width: 64px; height: 64px; font-size: 32px;">
<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
</div>
<h2 class="text-4xl font-bold mb-6">تلخيص النصوص العربية</h2>
<p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">توليد ملخصات دقيقة وموجزة للنصوص الطويلة مع الحفاظ على المعنى الأساسي والأسلوب العربي الأصيل.</p>
<ul class="space-y-4">
<li class="flex items-center gap-4">
<div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span>
</div><span class="text-base">طول ملخص قابل للتعديل</span></li>
<li class="flex items-center gap-4">
<div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span>
</div><span class="text-base">استخراج النقاط الرئيسية</span></li>
<li class="flex items-center gap-4">
<div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span>
</div><span class="text-base">الحفاظ على فصاحة اللغة</span></li>
</ul>
</div>
<div>
<div class="p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
<div class="text-right" dir="rtl">
<div class="text-sm mb-4 p-4 rounded-xl" style="background: rgba(255, 255, 255, 0.05); color: var(--text-secondary); line-height: 1.8;">
النص الأصلي: ١٥٠ كلمة...<br>
مقالة طويلة تتحدث عن أهمية التكنولوجيا في العصر الحديث وتأثيرها على المجتمع...
</div>
<div class="flex items-center justify-center my-4">
<svg class="w-8 h-8" style="color: var(--secondary-color);" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>
</div>
<div class="text-lg p-4 rounded-xl editor-content" style="background: rgba(139, 92, 246, 0.1); border-right: 4px solid #8b5cf6; line-height: 2;">
<div class="text-sm font-bold mb-3" style="color: #8b5cf6;">
الملخص: ٣٠ كلمة
</div>
<p style="color: var(--text-color);">التكنولوجيا الحديثة أحدثت ثورة في حياتنا اليومية، حيث سهّلت التواصل والتعلم والعمل، مما أدى إلى تطور المجتمعات وتحسين جودة الحياة.</p>
</div>
</div>
</div>
</div>
</div><!-- End Feature 4 grid -->
<div class="grid lg:grid-cols-2 gap-16 items-center mt-32">
<div class="order-2 lg:order-1">
<div class="p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
<div class="text-right text-xl editor-content" dir="rtl" style="color: var(--text-color); line-height: 2;">
<p class="mb-4">اللغة العربية هي لغة <span style="color: var(--text-secondary); opacity: 0.5;">|</span></p>
<div class="mt-6 p-4 rounded-xl" style="background: rgba(236, 72, 153, 0.1); border-right: 4px solid #ec4899;">
<div class="text-sm font-bold mb-3" style="color: #ec4899;">⚡ اقتراحات الإكمال</div>
<div class="space-y-2">
<div class="p-3 rounded-lg" style="background: rgba(236, 72, 153, 0.15); border: 1px solid rgba(236, 72, 153, 0.3);"><span class="text-base" style="color: var(--text-color);">القرآن الكريم والحضارة الإسلامية</span></div>
<div class="p-3 rounded-lg" style="background: rgba(255, 255, 255, 0.05);"><span class="text-base" style="color: var(--text-secondary);">الضاد وأقدم اللغات السامية</span></div>
<div class="p-3 rounded-lg" style="background: rgba(255, 255, 255, 0.05);"><span class="text-base" style="color: var(--text-secondary);">العلم والأدب والشعر العربي</span></div>
</div>
<div class="text-xs mt-3" style="color: var(--text-secondary);">اضغط <kbd style="background: rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 4px; font-size: 11px;">Tab</kbd> لقبول الاقتراح</div>
</div>
</div>
</div>
</div>
<div class="order-1 lg:order-2 text-right">
<div class="feature-icon mb-6" style="background: rgba(236, 72, 153, 0.15); color: #ec4899; width: 64px; height: 64px; font-size: 32px;"><svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></div>
<h2 class="text-4xl font-bold mb-6">الإكمال التلقائي الذكي</h2>
<p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">محرك ذكي يقترح إكمال الجمل والعبارات أثناء الكتابة، مدعوم بنماذج لغوية متقدمة تفهم السياق العربي.</p>
<ul class="space-y-4">
<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">اقتراحات ذكية حسب السياق</span></li>
<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">قبول بضغطة زر واحدة (Tab)</span></li>
<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">تسريع الكتابة بنسبة تصل إلى ٤٠٪</span></li>
</ul>
</div>
</div><!-- Feature 6: Quran Verification -->
<div class="grid lg:grid-cols-2 gap-16 items-center mt-32">
<div class="text-right">
<div class="feature-icon mb-6" style="background: rgba(6, 182, 212, 0.15); color: #06b6d4; width: 64px; height: 64px; font-size: 32px;"><svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg></div>
<h2 class="text-4xl font-bold mb-6">تدقيق النص القرآني</h2>
<p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">علّم على أي نص قرآني واضغط زر التدقيق — يتحول تلقائيًا للرسم العثماني بالتشكيل الكامل مع اسم السورة ورقم الآية، مع إمكانية ترجمته إلى ١٤ لغة عالمية.</p>
<ul class="space-y-4">
<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">تشكيل كامل بالرسم العثماني</span></li>
<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">اسم السورة ورقم الآية تلقائيًا</span></li>
<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">ترجمة الآيات إلى ١٤ لغة (الإنجليزية، الفرنسية، التركية، الأردية...)</span></li>
<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">زر في شريط الأدوات — علّم واضغط</span></li>
</ul>
</div>
<div>
<div class="p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
<div class="text-right" dir="rtl">
<div class="text-sm mb-4 p-4 rounded-xl" style="background: rgba(255, 255, 255, 0.05); color: var(--text-secondary); line-height: 1.8;"><span style="font-size: 13px;">📝 النص المحدد:</span><br><span style="font-size: 16px;">انا انزلناه قرانا عربيا لعلكم تعقلون</span></div>
<div class="flex items-center justify-center my-4"><svg class="w-8 h-8" style="color: #06b6d4;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" /></svg></div>
<div class="text-lg p-4 rounded-xl editor-content" style="background: rgba(6, 182, 212, 0.1); border-right: 4px solid #06b6d4; line-height: 2.2;">
<div class="text-sm font-bold mb-3" style="color: #06b6d4;">✓ النص القرآني المدقق</div>
<p style="color: var(--text-color); font-size: 22px; font-family: 'Traditional Arabic', serif;">﴿إِنَّا أَنزَلْنَاهُ قُرْآنًا عَرَبِيًّا لَّعَلَّكُمْ تَعْقِلُونَ﴾</p>
<p class="mt-2" style="color: var(--text-secondary); font-size: 14px;">[يوسف: آية ٢]</p>
<div class="mt-4 pt-3" style="border-top: 1px solid rgba(6, 182, 212, 0.2);">
<div class="flex items-center gap-2 mb-2">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: #06b6d4;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
<span class="text-xs font-bold" style="color: #06b6d4;">English Translation</span>
</div>
<p style="color: var(--text-secondary); font-size: 13px; font-style: italic; line-height: 1.7;">Indeed, We have sent it down as an Arabic Quran that you might understand.</p>
</div>
</div>
</div>
</div>
</div>
</div><!-- Feature 7: Dialect Conversion -->
<div class="grid lg:grid-cols-2 gap-16 items-center mt-32">
<div class="order-2 lg:order-1">
<div class="p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
<div class="text-right" dir="rtl">
<div class="text-sm mb-4 p-4 rounded-xl" style="background: rgba(255, 255, 255, 0.05); line-height: 1.8;"><span style="font-size: 13px; color: var(--text-secondary);">🗣️ النص باللهجة:</span><br><span style="font-size: 16px; color: var(--text-color);">ازيك يا صاحبي، انت فين دلوقتي؟ انا مستنيك من بدري</span></div>
<div class="flex items-center justify-center my-4"><svg class="w-8 h-8" style="color: #f97316;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" /></svg></div>
<div class="text-lg p-4 rounded-xl editor-content" style="background: rgba(249, 115, 22, 0.1); border-right: 4px solid #f97316; line-height: 2;">
<div class="text-sm font-bold mb-3" style="color: #f97316;">✓ النص بالعربية الفصحى</div>
<p style="color: var(--text-color);">كيف حالك يا صديقي، أين أنت الآن؟ أنا أنتظرك منذ وقت مبكر</p>
<div class="flex items-center gap-2 mt-3"><span class="text-xs px-2 py-1 rounded-full" style="background: rgba(249, 115, 22, 0.15); color: #f97316;">🇪🇬 لهجة مصرية</span><span class="text-xs" style="color: var(--text-secondary);">→ عربية فصحى</span></div>
</div>
</div>
</div>
</div>
<div class="order-1 lg:order-2 text-right">
<div class="feature-icon mb-6" style="background: rgba(249, 115, 22, 0.15); color: #f97316; width: 64px; height: 64px; font-size: 32px;"><svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg></div>
<h2 class="text-4xl font-bold mb-6">تحويل اللهجات للفصحى</h2>
<p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">اكتب بأي لهجة عربية — مصرية، خليجية، شامية، مغاربية — وحوّلها تلقائيًا إلى لغة عربية فصحى سليمة.</p>
<ul class="space-y-4">
<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">دعم جميع اللهجات العربية</span></li>
<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">الحفاظ على المعنى والسياق</span></li>
<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">تحويل فوري بضغطة واحدة</span></li>
</ul>
</div>
</div>
<!-- Feature 8: Bayyinah RAG -->
<div class="grid lg:grid-cols-2 gap-16 items-center mt-32">
<div class="text-right">
<div class="feature-icon mb-6" style="background: rgba(20, 145, 155, 0.15); color: #14919b; width: 64px; height: 64px; font-size: 32px;"><svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 7v14"/><path d="M16 12h2"/><path d="M16 8h2"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/><path d="M6 12h2"/><path d="M6 8h2"/></svg></div>
<h2 class="text-4xl font-bold mb-6">بَيِّنَة</h2>
<p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">بوابتك للقرآن والتفسير والسنة والمصادر السردية الموثقة — اسأل أي سؤال في الدين الإسلامي واحصل على إجابة مدعومة بالمصادر.</p>
<ul class="space-y-4">
<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">إجابات من القرآن الكريم والتفسير</span></li>
<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">أحاديث نبوية وسيرة مع التخريج</span></li>
<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">مصادر موثقة وقابلة للتحقق</span></li>
</ul>
<a href="https://bayyinah-alpha.vercel.app/" target="_blank" rel="noopener noreferrer" class="inline-block mt-8 px-6 py-3 rounded-xl text-base font-bold text-white transition-all hover:scale-105" style="background: linear-gradient(135deg, #14919b, #0e7c86);">جرّب بَيِّنَة الآن ↗</a>
</div>
<div>
<div class="p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
<div class="text-right" dir="rtl">
<div class="p-4 rounded-xl mb-4" style="background: rgba(20, 145, 155, 0.08); border: 1px solid rgba(20, 145, 155, 0.2);">
<div class="flex items-center gap-2 mb-3"><svg width="18" height="18" fill="none" stroke="#14919b" viewBox="0 0 24 24" style="flex-shrink:0;"><path d="M12 7v14"/><path d="M16 12h2"/><path d="M16 8h2"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/><path d="M6 12h2"/><path d="M6 8h2"/></svg><span class="text-sm font-bold" style="color: #14919b;">بَيِّنَة</span></div>
<p class="text-base mb-2" style="color: var(--text-color);">ما حكم صلاة الضحى؟</p>
</div>
<div class="p-4 rounded-xl" style="background: rgba(20, 145, 155, 0.05); border-right: 4px solid #14919b; line-height: 2;">
<div class="text-sm font-bold mb-3" style="color: #14919b;">📖 الإجابة من المصادر</div>
<p class="text-base mb-3" style="color: var(--text-color);">صلاة الضحى سنة مؤكدة، وأقلها ركعتان وأكثرها ثمان ركعات.</p>
<div class="space-y-2 mt-3">
<div class="text-xs p-2 rounded-lg" style="background: rgba(20, 145, 155, 0.1);"><span style="color: #14919b; font-weight: 600;">📜 الحديث:</span> <span style="color: var(--text-secondary);">«يصبح على كل سُلامى من أحدكم صدقة...» رواه مسلم</span></div>
<div class="text-xs p-2 rounded-lg" style="background: rgba(20, 145, 155, 0.1);"><span style="color: #14919b; font-weight: 600;">📖 التفسير:</span> <span style="color: var(--text-secondary);">تفسير ابن كثير — سورة ص: آية ١٨</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div><!-- Editor Page -->
<div id="page-editor" class="page">
<section class="pt-16 md:pt-20 min-h-screen page-bg">
<div class="max-w-[1600px] mx-auto">
<div class="editor-layout">
<!-- RIGHT: Documents Panel (always visible on desktop) -->
<div class="docs-panel docs-panel-desktop">
<div class="docs-panel__header">
<svg class="docs-panel__icon" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
<span class="docs-panel__title">مستنداتي</span>
</div>
<div class="docs-panel__body">
<button id="docs-new-btn" class="docs-new-btn" type="button" aria-label="مستند جديد">
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
مستند جديد
</button>
<div class="docs-search">
<svg class="docs-search__icon" width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
<input type="text" class="docs-search__input" id="docs-search-input" placeholder="بحث في المستندات..." autocomplete="off">
</div>
<div id="docs-list" role="list" aria-label="قائمة المستندات"></div>
</div>
</div>
<!-- CENTER: Main Editor -->
<div>
<div class="editor-shell">
<div class="editor-toolbar">
<div class="flex items-center gap-4">
<div class="window-dots" aria-hidden="true">
<span class="dot dot--red"></span>
<span class="dot dot--yellow"></span>
<span class="dot dot--green"></span>
</div>
<div id="analyzing-indicator" class="analyzing-indicator" aria-live="polite">
<span class="analyzing-spinner" aria-hidden="true"></span>
<span>جاري التحليل...</span>
</div>
<span id="auto-save-status" class="text-xs text-secondary" style="opacity:0;transition:opacity 0.3s;"></span>
</div>
<div class="editor-tabs-center">
<button id="write-tab" onclick="switchTab('write')" class="editor-tab active" data-tooltip="كتابة — الاختصار: Alt+1" type="button"><svg class="tab-icon" width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>كتابة<span id="error-badge" class="tab-badge" style="display:none"></span></button>
<button id="summarize-tab" onclick="switchTab('summarize')" class="editor-tab" data-tooltip="تلخيص — الاختصار: Alt+2" type="button"><svg class="tab-icon" width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>تلخيص</button>
<button id="dialect-tab" onclick="switchTab('dialect')" class="editor-tab" data-tooltip="تحويل للفصحى — الاختصار: Alt+3" type="button"><svg class="tab-icon" width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/></svg>تحويل للفصحى</button>
<button id="quran-tab" onclick="switchTab('quran')" class="editor-tab" data-tooltip="تدقيق القرآن — الاختصار: Ctrl+Q" type="button"><svg class="tab-icon" width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>تدقيق النص القرآني</button>
</div>
<div class="flex items-center gap-2">
<span id="doc-current-title" class="doc-current-title" style="display:none;"></span>
</div>
</div>
<div class="format-toolbar" id="format-toolbar">
<div class="fmt-section"><span class="fmt-label">الخط</span>
<div class="fmt-group fmt-group--font">
<div class="fmt-dropdown" id="fmt-font-wrap">
<button class="fmt-dropdown__trigger" type="button" id="fmt-font-trigger" aria-haspopup="true" aria-expanded="false" data-tooltip="نوع الخط">
<svg class="fmt-dropdown__icon" width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7V4h16v3M9 20h6M12 4v16"/></svg>
<span id="fmt-font-label">Cairo</span>
<svg class="fmt-dropdown__chevron" width="10" height="10" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/></svg>
</button>
<div class="fmt-dropdown__menu" id="fmt-font-menu" role="menu">
<button class="fmt-dropdown__item" data-font="Cairo" role="menuitem" style="font-family:Cairo">Cairo</button>
<button class="fmt-dropdown__item" data-font="Arial" role="menuitem" style="font-family:Arial">Arial</button>
<button class="fmt-dropdown__item" data-font="Times New Roman" role="menuitem" style="font-family:'Times New Roman'">Times New Roman</button>
<button class="fmt-dropdown__item" data-font="Tahoma" role="menuitem" style="font-family:Tahoma">Tahoma</button>
<button class="fmt-dropdown__item" data-font="Simplified Arabic" role="menuitem" style="font-family:'Simplified Arabic'">Simplified Arabic</button>
<button class="fmt-dropdown__item" data-font="Traditional Arabic" role="menuitem" style="font-family:'Traditional Arabic'">Traditional Arabic</button>
<button class="fmt-dropdown__item" data-font="Courier New" role="menuitem" style="font-family:'Courier New'">Courier New</button>
</div>
</div>
<div class="fmt-dropdown" id="fmt-size-wrap">
<button class="fmt-dropdown__trigger fmt-dropdown__trigger--size" type="button" id="fmt-size-trigger" aria-haspopup="true" aria-expanded="false" data-tooltip="حجم الخط">
<span id="fmt-size-label">16</span>
<svg class="fmt-dropdown__chevron" width="10" height="10" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/></svg>
</button>
<div class="fmt-dropdown__menu fmt-dropdown__menu--size" id="fmt-size-menu" role="menu">
<button class="fmt-dropdown__item" data-size="12px" role="menuitem"><span class="fmt-size-preview" style="font-size:10px">بيان</span> 12</button>
<button class="fmt-dropdown__item fmt-dropdown__item--active" data-size="16px" role="menuitem"><span class="fmt-size-preview" style="font-size:12px">بيان</span> 16</button>
<button class="fmt-dropdown__item" data-size="20px" role="menuitem"><span class="fmt-size-preview" style="font-size:14px">بيان</span> 20</button>
<button class="fmt-dropdown__item" data-size="24px" role="menuitem"><span class="fmt-size-preview" style="font-size:16px">بيان</span> 24</button>
<button class="fmt-dropdown__item" data-size="32px" role="menuitem"><span class="fmt-size-preview" style="font-size:18px">بيان</span> 32</button>
<button class="fmt-dropdown__item" data-size="48px" role="menuitem"><span class="fmt-size-preview" style="font-size:22px">بيان</span> 48</button>
</div>
</div>
</div>
</div>
<div class="fmt-divider"></div>
<div class="fmt-section"><span class="fmt-label">التنسيق</span>
<div class="fmt-group">
<button id="fmt-bold" class="fmt-btn" onclick="formatBold()" type="button" data-tooltip="غامق (Ctrl+B)"><b>B</b></button>
<button id="fmt-italic" class="fmt-btn" onclick="formatItalic()" type="button" data-tooltip="مائل (Ctrl+I)"><i>I</i></button>
<button id="fmt-underline" class="fmt-btn" onclick="formatUnderline()" type="button" data-tooltip="تحته خط (Ctrl+U)"><u>U</u></button>
<button id="fmt-strikethrough" class="fmt-btn" onclick="formatStrikethrough()" type="button" data-tooltip="يتوسطه خط"><s>S</s></button>
</div>
</div>
<div class="fmt-divider"></div>
<div class="fmt-section"><span class="fmt-label">المحاذاة</span>
<div class="fmt-group">
<button id="fmt-align-right" class="fmt-btn fmt-active" onclick="formatAlignRight()" type="button" data-tooltip="محاذاة لليمين"><svg width="15" height="15" fill="currentColor" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm4 4h14v2H7V9zm-4 4h18v2H3v-2zm4 4h14v2H7v-2z"/></svg></button>
<button id="fmt-align-center" class="fmt-btn" onclick="formatAlignCenter()" type="button" data-tooltip="توسيط"><svg width="15" height="15" fill="currentColor" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm3 4h12v2H6V9zm-3 4h18v2H3v-2zm3 4h12v2H6v-2z"/></svg></button>
<button id="fmt-align-left" class="fmt-btn" onclick="formatAlignLeft()" type="button" data-tooltip="محاذاة لليسار"><svg width="15" height="15" fill="currentColor" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm0 4h14v2H3V9zm0 4h18v2H3v-2zm0 4h14v2H3v-2z"/></svg></button>
</div>
</div>
<div class="fmt-divider"></div>
<div class="fmt-section"><span class="fmt-label">القوائم</span>
<div class="fmt-group">
<button id="fmt-ul" class="fmt-btn" onclick="execFormat('insertUnorderedList')" type="button" data-tooltip="قائمة نقطية"><svg width="15" height="15" fill="currentColor" viewBox="0 0 24 24"><path d="M4 6.5a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm0 7a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm0 7a1.5 1.5 0 110-3 1.5 1.5 0 010 3zM8 5h13v2H8V5zm0 7h13v2H8v-2zm0 7h13v2H8v-2z"/></svg></button>
<button id="fmt-ol" class="fmt-btn" onclick="execFormat('insertOrderedList')" type="button" data-tooltip="قائمة مرقمة"><svg width="15" height="15" fill="currentColor" viewBox="0 0 24 24"><path d="M2 5h1V3h-.5v-.5h1V5h.5v.5H2V5zm0 5.5h1.5v.5H2v.5h2v-2H2.5V9H4V8H2v2.5zm0 5v.5h1v.5H2v.5h2V17H2.5v.5H4V14H2v1.5zM8 5h13v2H8V5zm0 7h13v2H8v-2zm0 7h13v2H8v-2z"/></svg></button>
</div>
</div>
<div class="fmt-divider"></div>
<div class="fmt-section"><span class="fmt-label">إضافي</span>
<div class="fmt-group">
<button id="fmt-rtl" class="fmt-btn" onclick="setDirection('rtl')" type="button" data-tooltip="يمين لليسار"><svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5h6M11 5v14m4-14v14M3 8l4-3v6"/></svg></button>
<button id="fmt-ltr" class="fmt-btn" onclick="setDirection('ltr')" type="button" data-tooltip="يسار لليمين"><svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5H7a4 4 0 000 8h2m4-8v14m4-14v14M21 8l-4-3v6"/></svg></button>
<button id="fmt-link" class="fmt-btn" onclick="insertLink()" type="button" data-tooltip="إدراج رابط"><svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg></button>
<button id="fmt-line-height" class="fmt-btn" onclick="cycleLineHeight()" type="button" data-tooltip="ارتفاع السطر"><svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 4v4m0-4l-1.5 1.5M20 4l1.5 1.5M20 20v-4m0 4l-1.5-1.5M20 20l1.5-1.5"/></svg></button>
<button id="fmt-indent" class="fmt-btn" onclick="execFormat('indent')" type="button" data-tooltip="مسافة بادئة"><svg width="15" height="15" fill="currentColor" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm6 4h12v2H9V9zm0 4h12v2H9v-2zm-6 4h18v2H3v-2zM3 9l4 3-4 3V9z"/></svg></button>
<button id="fmt-outdent" class="fmt-btn" onclick="execFormat('outdent')" type="button" data-tooltip="إزالة المسافة البادئة"><svg width="15" height="15" fill="currentColor" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm6 4h12v2H9V9zm0 4h12v2H9v-2zm-6 4h18v2H3v-2zM7 9l-4 3 4 3V9z"/></svg></button>
<button id="fmt-superscript" class="fmt-btn" onclick="execFormat('superscript')" type="button" data-tooltip="نص مرتفع"><svg width="15" height="15" fill="currentColor" viewBox="0 0 24 24"><path d="M16 7h2v1h-2v1h3V6h-2V5h2V4h-3v3zM5.47 13h2.06L10 7.22 12.47 13h2.06L10 3.3 5.47 13zM4 21l5-7h-3l5-7"/></svg></button>
<button id="fmt-subscript" class="fmt-btn" onclick="execFormat('subscript')" type="button" data-tooltip="نص منخفض"><svg width="15" height="15" fill="currentColor" viewBox="0 0 24 24"><path d="M16 18h2v1h-2v1h3v-4h-2v1h2v1h-3v1zM5.47 13h2.06L10 7.22 12.47 13h2.06L10 3.3 5.47 13z"/></svg></button>
<button id="fmt-blockquote" class="fmt-btn" onclick="formatBlockquote()" type="button" data-tooltip="اقتباس"><svg width="15" height="15" fill="currentColor" viewBox="0 0 24 24"><path d="M6 17h3l2-4V7H5v6h3l-2 4zm8 0h3l2-4V7h-6v6h3l-2 4z"/></svg></button>
<button id="fmt-hr" class="fmt-btn" onclick="execFormat('insertHorizontalRule')" type="button" data-tooltip="فاصل أفقي"><svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M3 12h18"/></svg></button>
</div>
</div>
<div class="fmt-divider"></div>
<div class="fmt-section"><span class="fmt-label">التراجع</span>
<div class="fmt-group">
<button class="fmt-btn" onclick="formatUndo()" type="button" data-tooltip="تراجع (Ctrl+Z)"><svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a5 5 0 015 5v2M3 10l4-4M3 10l4 4"/></svg></button>
<button class="fmt-btn" onclick="formatRedo()" type="button" data-tooltip="إعادة (Ctrl+Y)"><svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 10H11a5 5 0 00-5 5v2M21 10l-4-4M21 10l-4 4"/></svg></button>
</div>
</div>
<div class="fmt-divider"></div>
<div class="fmt-section"><span class="fmt-label">الألوان</span>
<div class="fmt-group fmt-group--font">
<div class="fmt-dropdown" id="fmt-textcolor-wrap">
<button class="fmt-color-btn" type="button" id="fmt-textcolor-trigger" data-tooltip="لون النص">
<svg width="15" height="15" fill="currentColor" viewBox="0 0 24 24"><path d="M11 2L5.5 16h2.25l1.12-3h6.25l1.12 3h2.25L13 2h-2zm-1.38 9L12 4.67 14.38 11H9.62z"/></svg>
<span class="fmt-color-indicator" id="fmt-textcolor-bar" style="background:#ECEEF2"></span>
</button>
<div class="fmt-dropdown__menu" id="fmt-textcolor-menu" role="menu"><div class="fmt-color-grid" id="fmt-textcolor-grid"></div></div>
</div>
<div class="fmt-dropdown" id="fmt-highlight-wrap">
<button class="fmt-color-btn" type="button" id="fmt-highlight-trigger" data-tooltip="لون التظليل">
<svg width="15" height="15" fill="currentColor" viewBox="0 0 24 24"><path d="M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15a1.49 1.49 0 000 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5zM2 20h20v4H2v-4z"/></svg>
<span class="fmt-color-indicator" id="fmt-highlight-bar" style="background:transparent"></span>
</button>
<div class="fmt-dropdown__menu" id="fmt-highlight-menu" role="menu"><div class="fmt-color-grid" id="fmt-highlight-grid"></div></div>
</div>
</div>
</div>
<div class="fmt-divider"></div>
<div class="fmt-group">
<button class="fmt-btn" onclick="execFormat('removeFormat')" type="button" data-tooltip="مسح التنسيق"><svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 4h12v3M12 4v16"/><path stroke-linecap="round" stroke-width="2.5" d="M5 19L19 5" opacity="0.6"/></svg></button>
</div>
</div>
<div id="find-replace-bar" class="find-replace-bar" style="display:none;">
<div class="find-replace-row">
<input type="text" id="find-input" class="find-input" placeholder="بحث..." autocomplete="off">
<span id="find-count" class="find-count">0/0</span>
<button type="button" class="find-btn" onclick="findPrev()" data-tooltip="السابق">▲</button>
<button type="button" class="find-btn" onclick="findNext()" data-tooltip="التالي">▼</button>
<button type="button" class="find-btn" onclick="toggleReplace()" data-tooltip="استبدال">⇄</button>
<button type="button" class="find-btn" onclick="closeFindReplace()" data-tooltip="إغلاق">✕</button>
</div>
<div id="replace-row" class="find-replace-row" style="display:none;">
<input type="text" id="replace-input" class="find-input" placeholder="استبدال بـ..." autocomplete="off">
<button type="button" class="find-btn" onclick="replaceCurrent()">استبدال</button>
<button type="button" class="find-btn" onclick="replaceAll()">استبدال الكل</button>
</div>
</div>
<input type="file" id="doc-import-input" class="sr-only" accept=".txt,.docx,text/plain,application/vnd.openxmlformats-officedocument.wordprocessingml.document" aria-hidden="true">
<div id="write-area">
<div id="analysis-limit-banner" class="analysis-limit-banner is-hidden" role="status" aria-live="polite"></div>
<div id="editor-container" class="editor-surface editor-content"
role="textbox" aria-multiline="true" aria-label="محرر النص العربي"
aria-describedby="editor-hint" contenteditable="true"
data-placeholder="ابدأ الكتابة هنا... اكتب نصك العربي وسنساعدك في تصحيحه وتحسينه بشكل فوري"></div>
<p id="editor-hint" class="sr-only">اكتب نصاً عربياً. ستظهر الاقتراحات تلقائياً.</p>
<div id="editor-tooltip" class="suggestion-popover" role="dialog" aria-label="اقتراح تصحيح">
<div id="tooltip-type" class="popover-type">خطأ</div>
<div class="popover-original-word"><span class="popover-label">الكلمة:</span> <span id="tooltip-original"></span></div>
<div id="tooltip-alternatives" class="popover-alternatives"></div>
<button type="button" class="popover-dismiss" onclick="if(window.currentApplySuggestion){dismissSuggestion(window.currentApplySuggestion);hideTooltip();}" title="تجاهل هذا الاقتراح">تجاهل</button>
<p class="popover-hint">اختر التصحيح المناسب · Escape للإغلاق</p>
</div>
<div class="editor-footer">
<div class="editor-stats" role="status" aria-label="إحصائيات">
<div class="flex items-center gap-2"><span class="stat-dot stat-dot--spelling" aria-hidden="true"></span><span class="text-sm text-secondary"><span id="spelling-count">٠</span> إملائي</span></div>
<div class="flex items-center gap-2"><span class="stat-dot stat-dot--grammar" aria-hidden="true"></span><span class="text-sm text-secondary"><span id="grammar-count">٠</span> نحوي</span></div>
<div class="flex items-center gap-2"><span class="stat-dot stat-dot--punctuation" aria-hidden="true"></span><span class="text-sm text-secondary"><span id="punctuation-count">٠</span> ترقيم</span></div>
<span class="stat-item--sep"></span>
<span class="stat-item"><span id="char-count">٠</span> حرف</span>
<span class="stat-item"><span id="paragraph-count">٠</span> فقرة</span>
<span class="stat-item"><span id="sentence-count">٠</span> جملة</span>
<span class="stat-item" style="cursor:pointer;" onclick="setWordGoalUI()" title="اضغط لتحديد هدف عدد الكلمات"><span id="word-count" class="font-bold">٠</span> كلمة</span>
<span id="word-goal-indicator" class="word-goal-badge" style="display:none;cursor:pointer;" onclick="setWordGoalUI()" title="اضغط لتغيير الهدف"></span>
<span class="stat-item--sep"></span>
<span class="stat-item">⏱ <span id="reading-time">٠</span> د قراءة</span>
<span class="collab-hint" id="last-edit-hint"></span></div>
<div class="editor-actions">
<button id="focus-mode-btn" class="btn-ghost" type="button" data-tooltip="وضع التركيز (Ctrl+Shift+F)" onclick="toggleFocusMode()"><svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg></button>
<button id="doc-save-btn" class="doc-save-btn-icon btn-ghost" type="button" aria-label="حفظ المستند" title="حفظ">
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg>
</button>
<button onclick="clearEditor()" class="btn-ghost" type="button" title="مسح الكل">
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
</button>
<button onclick="copyText()" class="btn-ghost" type="button" title="نسخ النص">
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
</button>
<button id="doc-import-btn" class="btn-ghost" type="button" aria-label="استيراد ملف" title="استيراد">
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
</button>
<div class="doc-dropdown" style="display:inline-block;">
<button id="doc-export-trigger" class="btn-ghost" type="button" aria-label="تصدير" title="تصدير" aria-haspopup="true" aria-expanded="false">
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
</button>
<div id="doc-export-menu" class="doc-dropdown__menu" role="menu" aria-label="خيارات التصدير">
<button type="button" class="doc-dropdown__item" role="menuitem" data-export-format="txt">نصي (.txt)</button>
<button type="button" class="doc-dropdown__item" role="menuitem" data-export-format="docx">Word (.docx)</button>
<button type="button" class="doc-dropdown__item" role="menuitem" data-export-format="pdf">PDF (.pdf)</button>
</div>
</div>
</div>
</div>
</div>
<div id="summarize-area" class="summarize-panel is-hidden">
<!-- Source Toggle: Editor text vs Custom input -->
<div class="mb-4">
<div class="flex items-center gap-2 mb-3">
<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: var(--color-primary);"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
<span class="text-base font-bold">تلخيص النصوص</span>
</div>
<textarea id="summary-custom-input" class="w-full p-4 rounded-xl text-right text-lg editor-content" dir="rtl" rows="6" placeholder="الصق أو اكتب النص الذي تريد تلخيصه هنا..." style="background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-primary); resize: vertical; font-family: inherit;"></textarea>
<div class="flex items-center justify-between mt-2 mb-2" dir="rtl">
<span id="summary-char-count" class="text-xs" style="color: var(--text-secondary);">0 حرف</span>
<label class="btn-ghost" style="cursor:pointer; display:inline-flex; align-items:center; gap:5px; padding:4px 12px; min-height:32px; font-size:12px;">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
استيراد ملف
<input type="file" id="summary-import-input" class="sr-only" accept=".txt,.docx" onchange="importSummaryFile(this)">
</label>
</div>
</div>
<!-- Item 11: Mode Toggle -->
<div class="summary-mode-toggle">
<button type="button" class="summary-mode-btn active" id="summary-mode-paragraph" onclick="setSummaryMode('paragraph')">
<svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm0 8h18v2H3v-2zm0 4h12v2H3v-2z"/></svg>
فقرة
</button>
<button type="button" class="summary-mode-btn" id="summary-mode-bullets" onclick="setSummaryMode('bullets')">
<svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M4 6h2v2H4V6zm4 0h12v2H8V6zM4 11h2v2H4v-2zm4 0h12v2H8v-2zm-4 5h2v2H4v-2zm4 0h12v2H8v-2z"/></svg>
نقاط
</button>
</div>
<div class="mb-6">
<label class="block text-base font-bold mb-3" for="summary-length">طول الملخص</label>
<div class="flex items-center gap-4">
<span class="text-sm text-secondary">طويل</span>
<input type="range" id="summary-length" min="1" max="3" value="2" onchange="updateSummaryLength()" aria-valuetext="متوسط">
<span class="text-sm text-secondary">قصير</span>
</div>
<div class="text-center mt-2"><span id="summary-length-text" class="text-sm font-bold text-brand">متوسط</span></div>
</div>
<button id="generate-summary-btn" onclick="generateSummary(event)" class="btn-primary w-full py-4 text-lg mb-6" type="button">توليد الملخص</button>
<div id="summary-preview" class="summary-preview">
<div class="summary-card">
<!-- Item 6: Summary Stats -->
<div id="summary-stats" class="summary-stats" style="display:none">
<div class="summary-stat"><span>كلمات الملخص:</span> <span class="summary-stat__value" id="summary-word-count">0</span></div>
<div class="summary-stat"><span>نسبة الاختصار:</span> <span class="summary-stat__value" id="summary-compression">0%</span></div>
</div>
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-bold summary-card__title">الملخص</h3>
<div class="flex items-center gap-2">
<button onclick="copySummary()" class="btn-ghost" type="button">نسخ</button>
<button id="summary-apply-btn" onclick="applySummaryToEditor()" class="quran-apply-btn" type="button" style="display:none;">تطبيق في المحرر ✓</button>
<div class="doc-dropdown" style="display:inline-block;">
<button id="summary-export-trigger" class="btn-ghost" type="button" aria-haspopup="true" aria-expanded="false">تصدير ▾</button>
<div id="summary-export-menu" class="doc-dropdown__menu" role="menu">
<button type="button" class="doc-dropdown__item" role="menuitem" onclick="exportSummaryAs('txt')">نصي (.txt)</button>
<button type="button" class="doc-dropdown__item" role="menuitem" onclick="exportSummaryAs('docx')">Word (.docx)</button>
<button type="button" class="doc-dropdown__item" role="menuitem" onclick="exportSummaryAs('pdf')">PDF (.pdf)</button>
</div>
</div>
</div>
</div>
<div id="summary-text" class="text-right text-lg editor-content" dir="rtl"></div>
</div>
</div>
</div>
<!-- Dialect Conversion Panel -->
<div id="dialect-area" class="summarize-panel is-hidden">
<div class="mb-4">
<div class="flex items-center gap-2 mb-3">
<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: var(--color-primary);"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
<span class="text-base font-bold">تحويل اللهجات للفصحى</span>
</div>
<p class="text-sm mb-4" style="color: var(--text-secondary);">اكتب نصًا بأي لهجة عربية (مصرية، خليجية، شامية...) وسنحوّله إلى لغة عربية فصحى سليمة.</p>
</div>
<textarea id="dialect-input" class="w-full p-4 rounded-xl text-right text-lg editor-content" dir="rtl" rows="6" placeholder="اكتب النص باللهجة هنا..." oninput="updateDialectCharCount()" style="background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-primary); resize: vertical; font-family: inherit;"></textarea>
<div class="flex items-center justify-between mt-1 mb-2" dir="rtl">
<span id="dialect-char-count" class="text-xs" style="color: var(--text-secondary);">٠ / ٥٬٠٠٠ حرف</span>
</div>
<button id="dialect-convert-btn" onclick="convertDialect()" class="btn-primary w-full py-4 text-lg mt-4 mb-4" type="button">تحويل إلى الفصحى</button>
<div id="dialect-result-card" class="is-hidden" style="background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 1rem; padding: 1.5rem;">
<div class="flex items-center justify-between mb-3">
<h3 class="text-base font-bold" style="color: var(--color-primary);">✓ النص بالعربية الفصحى</h3>
<div class="flex items-center gap-2">
<button onclick="copyDialectResult()" class="quran-copy-btn" type="button" title="نسخ">📋</button>
<button id="dialect-apply-btn" onclick="applyDialectResult()" class="quran-apply-btn is-hidden" type="button">تطبيق في المحرر ✓</button>
</div>
</div>
<div id="dialect-result" class="text-right text-lg editor-content" dir="rtl" style="line-height: 2;"></div>
</div>
</div>
<!-- Quran Standalone Panel -->
<div id="quran-area" class="summarize-panel is-hidden">
<div class="mb-4">
<div class="flex items-center gap-2 mb-3">
<svg width="18" height="18" fill="none" stroke="#06b6d4" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
<span class="text-base font-bold">تدقيق النص القرآني</span>
</div>
<p class="text-sm mb-4" style="color: var(--text-secondary);">اكتب أو الصق نصًا قرآنيًا وسنعرض لك النص الصحيح بالتشكيل مع اسم السورة ورقم الآية، مع إمكانية ترجمته إلى ١٤ لغة.</p>
</div>
<textarea id="quran-input" class="w-full p-4 rounded-xl text-right text-lg" dir="rtl" rows="4" placeholder="اكتب الآية أو جزءًا منها هنا..." style="background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-primary); resize: vertical; font-family: 'Amiri Quran', 'Cairo', serif; font-size: 20px; line-height: 2;"></textarea>
<button id="quran-search-btn" onclick="searchQuranStandalone()" class="btn-primary w-full py-4 text-lg mt-4 mb-4" type="button">بحث وتدقيق</button>
<div id="quran-inline-result" class="is-hidden" style="background: var(--color-surface); border: 1px solid rgba(6,182,212,0.2); border-radius: 1rem; padding: 1.5rem;">
<div class="flex items-center justify-between mb-3">
<div class="text-sm font-bold" style="color:#06b6d4;">✓ النص القرآني المدقق</div>
<div class="flex items-center gap-2">
<button onclick="copyQuranInlineResult()" class="quran-copy-btn" type="button" title="نسخ">📋</button>
<button id="quran-inline-apply-btn" onclick="applyQuranInlineResult()" class="quran-apply-btn" type="button">تطبيق في المحرر ✓</button>
</div>
</div>
<p id="quran-inline-uthmani" class="quran-uthmani" style="font-size: 24px; line-height: 2.2; text-align: center;"></p>
<p id="quran-inline-reference" class="quran-reference text-center mt-2"></p>
<div class="mt-4 pt-4" style="border-top:1px solid var(--color-border);">
<div class="flex items-center gap-3 mb-3 flex-wrap">
<svg width="16" height="16" fill="none" stroke="#06b6d4" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
<span class="text-sm font-bold">ترجمة الآية</span>
<select id="quran-inline-lang" onchange="translateQuranInline()" class="quran-lang-select">
<option value="">— اختر لغة —</option>
<option value="english">🇬🇧 English</option>
<option value="french">🇫🇷 Français</option>
<option value="turkish">🇹🇷 Türkçe</option>
<option value="persian">🇮🇷 فارسی</option>
<option value="russian">🇷🇺 Русский</option>
<option value="spanish">🇪🇸 Español</option>
<option value="german">🇩🇪 Deutsch</option>
<option value="indonesian">🇮🇩 Indonesia</option>
<option value="malay">🇲🇾 Melayu</option>
<option value="bengali">🇧🇩 বাংলা</option>
<option value="bosnian">🇧🇦 Bosanski</option>
<option value="portuguese">🇵🇹 Português</option>
<option value="uzbek">🇺🇿 O'zbek</option>
</select>
</div>
<div id="quran-inline-translation" class="is-hidden p-4 rounded-xl" style="background:rgba(6,182,212,0.06); border:1px solid rgba(6,182,212,0.15);">
<p id="quran-inline-trans-text" style="font-size:18px; line-height:2; color:var(--color-text-primary); text-align:center;"></p>
<p id="quran-inline-trans-ref" class="text-sm text-center mt-2" style="color:#06b6d4; font-weight:600; display:none;"></p>
<div class="flex items-center justify-center gap-2 mt-3" id="quran-inline-trans-actions" style="display:none;">
<button onclick="copyQuranInlineTranslation()" class="quran-copy-btn" type="button" title="نسخ الترجمة">📋 نسخ</button>
<button onclick="applyQuranInlineTranslation()" class="quran-apply-btn" type="button">تطبيق الترجمة ✓</button>
</div>
</div>
</div>
</div>
</div>
</div>
<button id="mobile-sheet-trigger" class="mobile-sheet-trigger" type="button" aria-expanded="false" aria-controls="bottom-sheet">
<span>الاقتراحات (<span id="mobile-suggestion-count">٠</span>)</span>
<span aria-hidden="true">▲</span>
</button>
</div>
<!-- LEFT: Sidebar (score + suggestions + import/export) -->
<div class="sidebar-panel sidebar-desktop">
<div class="surface-card sidebar-card">
<h3 class="text-xl font-bold mb-3 text-right">الاقتراحات</h3>
<div class="error-tabs">
<button class="error-tab active" data-filter="all" onclick="filterErrors('all')">الكل</button>
<button class="error-tab" data-filter="spelling" onclick="filterErrors('spelling')">إملائي</button>
<button class="error-tab" data-filter="grammar" onclick="filterErrors('grammar')">نحوي</button>
<button class="error-tab" data-filter="punctuation" onclick="filterErrors('punctuation')">ترقيم</button>
</div>
<div id="error-chart" class="error-chart-wrap"></div>
<div id="suggestions-list" class="suggestions-scroll" role="list" aria-live="polite" aria-label="اقتراحات التصحيح"></div>
<button id="apply-all-btn" class="btn-primary apply-all-btn is-hidden" type="button">تطبيق الكل</button>
<button id="dismiss-filtered-btn" class="btn-ghost dismiss-all-btn is-hidden" type="button" onclick="dismissAllFiltered()">تجاهل الكل</button>
</div>
<div class="surface-card sidebar-card">
<h3 class="text-xl font-bold mb-4 text-right">تقييم الكتابة</h3>
<div class="score-ring-wrap" role="img" aria-label="تقييم الكتابة">
<svg class="w-full h-full transform -rotate-90" viewBox="0 0 160 160" aria-hidden="true">
<circle cx="80" cy="80" r="70" fill="none" stroke="var(--color-border)" stroke-width="10"/>
<circle id="score-circle" cx="80" cy="80" r="70" fill="none" stroke="url(#scoreGradient)" stroke-width="10" stroke-linecap="round" stroke-dasharray="440" stroke-dashoffset="440" class="score-circle"/>
<defs><linearGradient id="scoreGradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="var(--primary-color)"/><stop offset="100%" stop-color="var(--secondary-color)"/></linearGradient></defs>
</svg>
<div class="score-value"><span id="score-value">--</span></div>
</div>
<p id="score-hint" class="text-center text-sm text-secondary">ابدأ الكتابة لرؤية تقييمك</p>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Mobile bottom sheet -->
<div id="bottom-sheet" class="bottom-sheet" aria-hidden="true">
<div id="bottom-sheet-backdrop" class="bottom-sheet-backdrop"></div>
<div class="bottom-sheet-panel" role="dialog" aria-label="الاقتراحات">
<div class="bottom-sheet-handle" aria-hidden="true"></div>
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-bold">الاقتراحات</h3>
<button id="bottom-sheet-close" class="btn-ghost" type="button" aria-label="إغلاق">إغلاق</button>
</div>
<div id="bottom-sheet-list" class="suggestions-scroll" role="list" aria-live="polite"></div>
<button id="apply-all-sheet" class="btn-primary apply-all-btn mt-4 is-hidden" type="button">تطبيق الكل</button>
</div>
</div>
<!-- Mobile export sheet (documents) -->
<div id="doc-export-sheet" class="bottom-sheet" aria-hidden="true">
<div id="doc-export-sheet-backdrop" class="bottom-sheet-backdrop"></div>
<div class="bottom-sheet-panel" role="dialog" aria-label="تصدير المستند">
<div class="bottom-sheet-handle" aria-hidden="true"></div>
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-bold">تصدير المستند</h3>
<button id="doc-export-sheet-close" class="btn-ghost" type="button" aria-label="إغلاق">إغلاق</button>
</div>
<div class="flex flex-col gap-2">
<button type="button" class="doc-dropdown__item" data-export-format="txt">ملف نصي (.txt)</button>
<button type="button" class="doc-dropdown__item" data-export-format="docx">Word (.docx)</button>
<button type="button" class="doc-dropdown__item" data-export-format="pdf">PDF (.pdf)</button>
</div>
</div>
</div><!-- Pricing Page -->
<div id="page-pricing" class="page">
<section class="pt-32 pb-24" style="background: var(--background-color);">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16">
<h1 class="text-5xl lg:text-6xl font-bold mb-6">خطط <span class="text-gradient">واضحة ومرنة</span></h1>
<p class="text-xl max-w-3xl mx-auto" style="color: var(--text-secondary); line-height: 1.9;">جميع الميزات متاحة مجانًا خلال الإصدار التجريبي. الخطط المدفوعة قادمة قريبًا.</p>
</div>
<!-- Beta Banner -->
<div class="text-center mb-12 p-6 rounded-2xl beta-shimmer" style="background: linear-gradient(135deg, rgba(107, 163, 224, 0.1), rgba(165, 148, 232, 0.1)); border: 1px solid rgba(107, 163, 224, 0.2);">
<div class="flex items-center justify-center gap-2 mb-2">
<span class="text-sm font-bold px-3 py-1 rounded-full text-white gradient-accent">BETA</span>
<span class="text-lg font-bold">الإصدار التجريبي — مجاني بالكامل</span>
</div>
<p class="text-base" style="color: var(--text-secondary);">استمتع بجميع ميزات بيان بدون أي قيود أثناء فترة التطوير</p>
</div>
<div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto"><!-- Current: Beta Free -->
<div class="p-8 rounded-3xl transition-all hover:scale-105 relative shadow-2xl pricing-glow" style="background: linear-gradient(165deg, var(--surface-color) 0%, rgba(59, 130, 246, 0.1) 100%); border: 2px solid var(--primary-color);">
<div class="pricing-badge gradient-accent text-white">
متاح الآن
</div>
<div class="text-center mb-8">
<h3 class="text-3xl font-bold mb-2">الإصدار التجريبي</h3>
<p class="text-base mb-6" style="color: var(--text-secondary);">جميع الميزات بدون قيود</p>
<div class="text-6xl font-bold mb-2">
مجاني
</div>
<p class="text-base" style="color: var(--text-secondary);">لفترة محدودة</p>
</div>
<ul class="space-y-4 mb-8">
<li class="flex items-center gap-3">
<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">تدقيق إملائي ونحوي متقدم</span></li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">تصحيح علامات الترقيم</span></li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">تلخيص النصوص بالذكاء الاصطناعي</span></li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">الإكمال التلقائي الذكي</span></li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">تصدير PDF و Word</span></li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">تدقيق النص القرآني + ترجمة</span></li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">تحويل اللهجات إلى الفصحى</span></li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">كلمات غير محدودة</span></li>
</ul><button onclick="showPage('editor')" class="w-full py-4 rounded-2xl text-lg font-bold text-white gradient-accent transition-all hover:scale-105 hover:shadow-2xl">← ابدأ الكتابة مجانًا</button>
</div><!-- Future: Pro Plan -->
<div class="p-8 rounded-3xl transition-all hover:scale-105 relative" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08); opacity: 0.7;">
<div class="pricing-badge" style="background: var(--color-surface-elevated); color: var(--color-text-secondary);">
قريبًا
</div>
<div class="text-center mb-8">
<h3 class="text-3xl font-bold mb-2">احترافي</h3>
<p class="text-base mb-6" style="color: var(--text-secondary);">للكُتّاب الجادين</p>
<div class="flex items-center justify-center gap-2"><span class="text-6xl font-bold">٩</span>
<div class="text-right">
<div class="text-lg font-bold">دولار</div>
<div class="text-sm" style="color: var(--text-secondary);">شهريًا</div>
</div>
</div>
</div>
<ul class="space-y-4 mb-8">
<li class="flex items-center gap-3">
<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">كل ميزات الإصدار التجريبي</span></li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">أولوية في التحليل</span></li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">تخزين سحابي للمستندات</span></li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">دعم فني مباشر</span></li>
</ul><button disabled class="w-full py-4 rounded-2xl text-lg font-bold border-2 transition-all" style="border-color: rgba(255, 255, 255, 0.2); color: var(--text-secondary); cursor: not-allowed;">قريبًا</button>
</div><!-- Future: Enterprise Plan -->
<div class="p-8 rounded-3xl transition-all hover:scale-105" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08); opacity: 0.7;">
<div class="pricing-badge" style="background: var(--color-surface-elevated); color: var(--color-text-secondary);">
قريبًا
</div>
<div class="text-center mb-8">
<h3 class="text-3xl font-bold mb-2">مؤسسات</h3>
<p class="text-base mb-6" style="color: var(--text-secondary);">للفرق والمنظمات</p>
<div class="flex items-center justify-center gap-2"><span class="text-6xl font-bold">٢٩</span>
<div class="text-right">
<div class="text-lg font-bold">دولار</div>
<div class="text-sm" style="color: var(--text-secondary);">لكل مستخدم/شهر</div>
</div>
</div>
</div>
<ul class="space-y-4 mb-8">
<li class="flex items-center gap-3">
<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">كل ميزات الاحترافي</span></li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">إدارة الفرق</span></li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">واجهة برمجية (API)</span></li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">تكامل مخصص</span></li>
<li class="flex items-center gap-3">
<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">دعم فني ذو أولوية</span></li>
</ul><button disabled class="w-full py-4 rounded-2xl text-lg font-bold border-2 transition-all" style="border-color: rgba(255, 255, 255, 0.2); color: var(--text-secondary); cursor: not-allowed;">قريبًا</button>
</div>
</div>
</div>
</section>
</div><!-- 404 Page -->
<div id="page-404" class="page">
<section class="gradient-bg min-h-screen pt-28 pb-20 flex items-center justify-center">
<div class="text-center">
<div class="text-8xl font-bold text-gradient mb-6">٤٠٤</div>
<h2 class="text-3xl font-bold mb-4">الصفحة غير موجودة</h2>
<p class="text-lg mb-8" style="color: var(--text-secondary);">يبدو أن الصفحة التي تبحث عنها غير متاحة.</p>
<button onclick="showPage('home')" class="px-8 py-4 rounded-2xl text-lg font-bold text-white gradient-accent transition-all hover:scale-105">→ العودة للرئيسية</button>
</div>
</section>
</div><!-- Footer -->
<footer class="py-16 border-t footer-bar">
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12" dir="rtl">
<div>
<div class="flex items-center gap-3 mb-4">
<svg width="24" height="24" fill="none" stroke="url(#grad1)" viewBox="0 0 24 24" style="flex-shrink:0;"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:var(--color-primary)"/><stop offset="100%" style="stop-color:var(--color-secondary)"/></linearGradient></defs><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg><span id="footer-brand" class="text-2xl font-bold text-gradient">بيان</span>
</div>
<p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">منصة ذكاء اصطناعي للكتابة العربية — تدقيق إملائي ونحوي، ترقيم، تلخيص، إكمال تلقائي، تدقيق القرآن، وتحويل اللهجات.</p>
</div>
<div>
<h4 class="text-base font-bold mb-4">المنتج</h4>
<ul class="space-y-3">
<li><button onclick="showPage('editor')" class="text-sm transition-colors footer-link-hover" style="color: var(--text-secondary); background: none; border: none; cursor: pointer; font-family: inherit;">المحرر</button></li>
<li><button onclick="showPage('features')" class="text-sm transition-colors footer-link-hover" style="color: var(--text-secondary); background: none; border: none; cursor: pointer; font-family: inherit;">الميزات</button></li>
<li><button onclick="showPage('pricing')" class="text-sm transition-colors footer-link-hover" style="color: var(--text-secondary); background: none; border: none; cursor: pointer; font-family: inherit;">الأسعار</button></li>
</ul>
</div>
<div>
<h4 class="text-base font-bold mb-4">المزيد</h4>
<ul class="space-y-3">
<li><a href="https://bayyinah-alpha.vercel.app/" class="footer-external-link text-sm transition-colors" target="_blank" rel="noopener noreferrer">بَيِّنَة — القرآن والحديث</a></li>
<li><a href="https://github.com/mohamedatef24/BAYAN" class="text-sm transition-colors hover:text-white" style="color: var(--text-secondary); display: flex; align-items: center; gap: 6px;" target="_blank" rel="noopener noreferrer"><svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>المستودع على GitHub</a></li>
</ul>
</div>
</div>
<div class="pt-8 border-t" style="border-color: var(--color-border);">
<p class="text-sm text-center" style="color: var(--text-secondary);">© ٢٠٢٦ بيان. جميع الحقوق محفوظة.</p>
</div>
</div>
</footer>
<!-- Toast Container -->
<div id="toast-container" class="toast-container"></div>
<!-- Scroll to Top -->
<button id="scroll-top-btn" class="scroll-top-btn" type="button" aria-label="العودة للأعلى">
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg>
</button>
</div>
<script>
// Toast notification system
function showToast(message, type = 'success', duration = 2500) {
const container = document.getElementById('toast-container');
if (!container) return;
const toast = document.createElement('div');
toast.className = 'toast toast--' + type;
toast.textContent = message;
container.appendChild(toast);
setTimeout(() => {
toast.classList.add('toast-out');
setTimeout(() => toast.remove(), 300);
}, duration);
}
// Custom confirmation dialog (replaces window.confirm)
function showConfirmDialog(title, message, onConfirm) {
var overlay = document.createElement('div');
overlay.className = 'confirm-dialog-overlay';
overlay.innerHTML =
'<div class="confirm-dialog" dir="rtl">' +
'<div class="confirm-dialog__title">' + title + '</div>' +
'<div class="confirm-dialog__message">' + message + '</div>' +
'<div class="confirm-dialog__actions">' +
'<button class="confirm-dialog__btn" id="confirm-cancel">\u0625\u0644\u063a\u0627\u0621</button>' +
'<button class="confirm-dialog__btn confirm-dialog__btn--danger" id="confirm-ok">\u062a\u0623\u0643\u064a\u062f</button>' +
'</div>' +
'</div>';
document.body.appendChild(overlay);
overlay.querySelector('#confirm-cancel').onclick = function() { overlay.remove(); };
overlay.querySelector('#confirm-ok').onclick = function() { overlay.remove(); if (onConfirm) onConfirm(); };
overlay.addEventListener('click', function(e) { if (e.target === overlay) overlay.remove(); });
document.addEventListener('keydown', function _esc(e) {
if (e.key === 'Escape') { overlay.remove(); document.removeEventListener('keydown', _esc); }
});
}
// Scroll to top
(function() {
const btn = document.getElementById('scroll-top-btn');
const sc = document.querySelector('.h-full.overflow-auto') || document.documentElement;
if (!btn) return;
const target = sc === document.documentElement ? window : sc;
(sc === document.documentElement ? window : sc).addEventListener('scroll', () => {
const st = sc === document.documentElement ? window.scrollY : sc.scrollTop;
btn.classList.toggle('visible', st > 400);
const nav = document.querySelector('.site-nav');
if (nav) nav.classList.toggle('nav-scrolled', st > 20);
});
btn.addEventListener('click', () => {
(sc === document.documentElement ? window : sc).scrollTo({ top: 0, behavior: 'smooth' });
});
})();
// Default configuration
const defaultConfig = {
brand_name: 'بيان',
hero_headline: 'اكتب العربية بثقة واحتراف',
hero_subheadline: 'منصة ذكاء اصطناعي متكاملة لتصحيح الإملاء والنحو والترقيم وتلخيص النصوص والإكمال التلقائي — مصمّمة خصيصًا للغة العربية.',
cta_primary: 'ابدأ الكتابة مجانًا',
primary_color: '#6BA3E0',
secondary_color: '#A594E8',
font_family: 'Cairo',
font_size: 16
};
let config = { ...defaultConfig };
// Page navigation
function showPage(pageId) {
document.querySelectorAll('.page').forEach(page => page.classList.remove('active'));
document.getElementById('page-' + pageId).classList.add('active');
document.querySelectorAll('.nav-link, .mobile-drawer-link').forEach(link => {
link.classList.remove('active');
});
document.querySelectorAll(`[data-page="${pageId}"]`).forEach(link => {
link.classList.add('active');
});
try {
sessionStorage.setItem('bayan_current_page', pageId);
} catch (e) {}
window.scrollTo(0, 0);
}
function switchTab(tab) {
const tabs = ['write', 'summarize', 'dialect', 'quran'];
const formatToolbar = document.getElementById('format-toolbar');
tabs.forEach(function(t) {
var tabEl = document.getElementById(t + '-tab');
var areaEl = document.getElementById(t + '-area') || document.getElementById(t === 'write' ? 'write-area' : t + '-area');
if (tabEl) tabEl.classList.remove('active');
if (areaEl) areaEl.classList.add('is-hidden');
});
var activeTab = document.getElementById(tab + '-tab');
var activeArea = document.getElementById(tab === 'write' ? 'write-area' : tab + '-area');
if (activeTab) activeTab.classList.add('active');
if (activeArea) activeArea.classList.remove('is-hidden');
if (formatToolbar) formatToolbar.style.display = (tab === 'write') ? '' : 'none';
// Hide/show sidebar (suggestions + writing score) — only for write tab
var sidebar = document.querySelector('.sidebar-panel.sidebar-desktop');
if (sidebar) sidebar.style.display = (tab === 'write') ? '' : 'none';
// Hide/show mobile suggestions trigger
var mobileTrigger = document.getElementById('mobile-sheet-trigger');
if (mobileTrigger) mobileTrigger.style.display = (tab === 'write') ? '' : 'none';
// Hide/show docs panel — only for write tab
var docsPanel = document.querySelector('.docs-panel-desktop');
if (docsPanel) docsPanel.style.display = (tab === 'write') ? '' : 'none';
// Expand layout when not in write tab (no sidebars)
var editorLayout = document.querySelector('.editor-layout');
if (editorLayout) {
if (tab === 'write') {
editorLayout.classList.remove('tools-mode');
} else {
editorLayout.classList.add('tools-mode');
}
}
}
/* ═══════════════════════════════════════════
Summarize — File Import
═══════════════════════════════════════════ */
window._summarySource = 'custom'; // always custom now
function setSummarySource() {} // no-op for backward compat
function importSummaryFile(inputEl) {
if (!inputEl || !inputEl.files || !inputEl.files[0]) return;
var file = inputEl.files[0];
var ta = document.getElementById('summary-custom-input');
if (!ta) return;
if (file.name.endsWith('.txt')) {
var reader = new FileReader();
reader.onload = function(e) {
ta.value = e.target.result;
if (typeof showToast === 'function') showToast('✓ تم استيراد الملف');
};
reader.readAsText(file, 'UTF-8');
} else if (file.name.endsWith('.docx')) {
// Use mammoth if available, otherwise fallback
if (typeof mammoth !== 'undefined') {
var reader = new FileReader();
reader.onload = function(e) {
mammoth.extractRawText({ arrayBuffer: e.target.result })
.then(function(result) { ta.value = result.value; if (typeof showToast === 'function') showToast('✓ تم استيراد الملف'); })
.catch(function() { if (typeof showToast === 'function') showToast('خطأ في قراءة الملف', 'error'); });
};
reader.readAsArrayBuffer(file);
} else {
if (typeof showToast === 'function') showToast('صيغة .docx غير مدعومة حاليًا — استخدم .txt', 'warning');
}
}
inputEl.value = ''; // reset for re-import
}
/* ═══════════════════════════════════════════
Floating Selection Toolbar
═══════════════════════════════════════════ */
(function() {
var selBar = null;
var hideTimer = null;
function showSelectionBar() {
var sel = window.getSelection();
if (!sel || sel.isCollapsed || !sel.toString().trim()) { hideSelectionBar(); return; }
var editor = document.getElementById('editor-container');
if (!editor || !editor.contains(sel.anchorNode)) { hideSelectionBar(); return; }
if (!selBar) selBar = document.getElementById('selection-toolbar');
if (!selBar) return;
var range = sel.getRangeAt(0);
var rect = range.getBoundingClientRect();
selBar.style.top = (rect.top + window.scrollY - 48) + 'px';
selBar.style.left = (rect.left + rect.width / 2) + 'px';
selBar.classList.remove('is-hidden');
}
function hideSelectionBar() {
if (!selBar) selBar = document.getElementById('selection-toolbar');
if (selBar) selBar.classList.add('is-hidden');
}
document.addEventListener('selectionchange', function() {
clearTimeout(hideTimer);
hideTimer = setTimeout(function() {
var sel = window.getSelection();
if (sel && !sel.isCollapsed && sel.toString().trim().length > 2) {
var editor = document.getElementById('editor-container');
if (editor && editor.contains(sel.anchorNode)) { showSelectionBar(); return; }
}
hideSelectionBar();
}, 300);
});
document.addEventListener('mousedown', function(e) {
if (!selBar) selBar = document.getElementById('selection-toolbar');
if (selBar && !selBar.contains(e.target)) hideSelectionBar();
});
})();
function selectionToolAction(tool) {
var sel = window.getSelection();
var text = sel ? sel.toString().trim() : '';
if (!text) { if (typeof showToast === 'function') showToast('حدد نصًا أولاً', 'warning'); return; }
var selBar = document.getElementById('selection-toolbar');
if (selBar) selBar.classList.add('is-hidden');
if (tool === 'summarize') {
switchTab('summarize');
var ta = document.getElementById('summary-custom-input');
if (ta) { ta.value = text; }
} else if (tool === 'dialect') {
switchTab('dialect');
var ta = document.getElementById('dialect-input');
if (ta) { ta.value = text; if (typeof updateDialectCharCount === 'function') updateDialectCharCount(); }
} else if (tool === 'quran') {
switchTab('quran');
var ta = document.getElementById('quran-input');
if (ta) ta.value = text;
}
}
/* ═══════════════════════════════════════════
Quran Standalone Panel Functions
═══════════════════════════════════════════ */
let _quranInlineVerse = '';
let _quranInlineRef = '';
let _quranInlineQuery = '';
async function searchQuranStandalone() {
var input = document.getElementById('quran-input').value.trim();
if (!input) { if (typeof showToast === 'function') showToast('الرجاء كتابة نص قرآني أولاً', 'warning'); return; }
_quranInlineQuery = input;
var resultDiv = document.getElementById('quran-inline-result');
var uthmaniEl = document.getElementById('quran-inline-uthmani');
var refEl = document.getElementById('quran-inline-reference');
var searchBtn = document.getElementById('quran-search-btn');
uthmaniEl.innerHTML = '<span class="text-secondary">⏳ جاري البحث...</span>';
refEl.textContent = '';
resultDiv.classList.remove('is-hidden');
document.getElementById('quran-inline-translation').classList.add('is-hidden');
document.getElementById('quran-inline-lang').value = '';
if (searchBtn) { searchBtn.disabled = true; searchBtn.textContent = '⏳ جاري البحث...'; }
var _abortCtrl = new AbortController();
var _timeout = setTimeout(function(){ _abortCtrl.abort(); }, 30000);
try {
var res = await fetch('/api/quran', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text: input, language: 'تدقيق الايات' }),
signal: _abortCtrl.signal
});
var data = await res.json();
if (data.error) {
uthmaniEl.innerHTML = '<span class="text-secondary">' + data.error.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>') + '</span>';
return;
}
var seg = data.matched_segment || '';
var refMatch = seg.match(/【([^】]+)】/);
var verseText = seg.replace(/\s*【[^】]+】\s*$/, '').replace(/^\(/, '').replace(/\)$/, '');
var reference = refMatch ? refMatch[1] : '';
_quranInlineVerse = verseText;
_quranInlineRef = reference;
uthmaniEl.textContent = verseText;
refEl.textContent = reference ? '[' + reference + ']' : '';
} catch (err) {
var msg = err.name === 'AbortError' ? 'انتهى وقت الانتظار — حاول مرة أخرى' : 'حدث خطأ أثناء البحث — تأكد من الاتصال';
uthmaniEl.innerHTML = '<span class="text-secondary">' + msg + '</span>';
} finally {
clearTimeout(_timeout);
if (searchBtn) { searchBtn.disabled = false; searchBtn.textContent = 'بحث وتدقيق'; }
}
}
let _quranInlineTransText = '';
let _quranInlineTransRef = '';
async function translateQuranInline() {
var lang = document.getElementById('quran-inline-lang').value;
if (!lang || !_quranInlineQuery) return;
var resultDiv = document.getElementById('quran-inline-translation');
var textEl = document.getElementById('quran-inline-trans-text');
var refEl = document.getElementById('quran-inline-trans-ref');
var actionsEl = document.getElementById('quran-inline-trans-actions');
textEl.innerHTML = '<span class="text-secondary">⏳ جاري الترجمة...</span>';
if (refEl) refEl.style.display = 'none';
if (actionsEl) actionsEl.style.display = 'none';
resultDiv.classList.remove('is-hidden');
var _abortCtrl = new AbortController();
var _timeout = setTimeout(function(){ _abortCtrl.abort(); }, 30000);
try {
var res = await fetch('/api/quran', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text: _quranInlineQuery, language: lang }),
signal: _abortCtrl.signal
});
var data = await res.json();
if (data.error) {
textEl.innerHTML = '<span class="text-secondary">' + data.error.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>') + '</span>';
return;
}
var seg = data.matched_segment || '';
var refMatch = seg.match(/【([^】]+)】/);
var transText = seg.replace(/\s*【[^】]+】\s*$/, '').replace(/^\(/, '').replace(/\)$/, '');
var transRef = refMatch ? refMatch[1] : '';
_quranInlineTransText = transText;
_quranInlineTransRef = transRef;
textEl.textContent = transText;
if (refEl && transRef) { refEl.textContent = '[' + transRef + ']'; refEl.style.display = ''; }
if (actionsEl) actionsEl.style.display = '';
} catch (err) {
var msg = err.name === 'AbortError' ? 'انتهى وقت الانتظار' : 'حدث خطأ في الترجمة';
textEl.innerHTML = '<span class="text-secondary">' + msg + '</span>';
} finally { clearTimeout(_timeout); }
}
function copyQuranInlineResult() {
var text = (_quranInlineVerse || '') + (_quranInlineRef ? ' [' + _quranInlineRef + ']' : '');
if (!text.trim()) return;
navigator.clipboard.writeText(text).then(function() {
if (typeof showToast === 'function') showToast('✓ تم نسخ النص المدقق');
});
}
function copyQuranInlineTranslation() {
var text = (_quranInlineTransText || '') + (_quranInlineTransRef ? ' [' + _quranInlineTransRef + ']' : '');
if (!text.trim()) return;
navigator.clipboard.writeText(text).then(function() {
if (typeof showToast === 'function') showToast('✓ تم نسخ الترجمة');
});
}
function _replaceQueryInEditor(newText, ref) {
var editor = document.getElementById('editor-container');
if (!editor) return false;
var plain = editor.textContent || '';
var query = _quranInlineQuery || '';
var idx = plain.indexOf(query);
if (idx === -1) return false;
if (typeof pushUndoState === 'function') pushUndoState();
var esc = function(t) { return t.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); };
var before = plain.substring(0, idx);
var after = plain.substring(idx + query.length);
var refHTML = ref ? ' <span class="quran-ref-inline">[' + esc(ref) + ']</span>' : '';
editor.innerHTML = esc(before) +
'<span class="quran-applied" contenteditable="false" data-quran="true">' +
esc(newText) + refHTML + '</span>' + esc(after);
editor.focus();
editor.dispatchEvent(new Event('input', { bubbles: true }));
return true;
}
function applyQuranInlineResult() {
if (!_quranInlineVerse) return;
var editor = document.getElementById('editor-container');
if (!editor) return;
// Try to replace original query text in editor
if (_quranInlineQuery && _replaceQueryInEditor(_quranInlineVerse, _quranInlineRef)) {
switchTab('write');
if (typeof showToast === 'function') showToast('✓ تم استبدال النص بالنص القرآني المدقق');
} else {
// Fallback: append if original text not found in editor
if (typeof pushUndoState === 'function') pushUndoState();
var esc = function(t) { return t.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); };
var refHTML = _quranInlineRef ? ' <span class="quran-ref-inline">[' + esc(_quranInlineRef) + ']</span>' : '';
var existing = editor.innerHTML;
editor.innerHTML = existing + (existing ? '<br>' : '') +
'<span class="quran-applied" contenteditable="false" data-quran="true">' +
esc(_quranInlineVerse) + refHTML + '</span>';
editor.dispatchEvent(new Event('input', { bubbles: true }));
switchTab('write');
if (typeof showToast === 'function') showToast('✓ تم إضافة النص القرآني في المحرر');
}
}
function applyQuranInlineTranslation() {
if (!_quranInlineTransText) return;
var editor = document.getElementById('editor-container');
if (!editor) return;
if (_quranInlineQuery) {
var plain = editor.textContent || '';
var idx = plain.indexOf(_quranInlineQuery);
if (idx !== -1) {
if (typeof pushUndoState === 'function') pushUndoState();
var esc = function(t) { return t.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); };
var before = plain.substring(0, idx);
var after = plain.substring(idx + _quranInlineQuery.length);
var refHTML = _quranInlineTransRef ? ' <span class="quran-ref-inline">[' + esc(_quranInlineTransRef) + ']</span>' : '';
editor.innerHTML = esc(before) + esc(_quranInlineTransText) + refHTML + esc(after);
editor.focus();
editor.dispatchEvent(new Event('input', { bubbles: true }));
switchTab('write');
if (typeof showToast === 'function') showToast('✓ تم تطبيق الترجمة في المحرر');
return;
}
}
// Fallback: append
if (typeof pushUndoState === 'function') pushUndoState();
var esc2 = function(t) { return t.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); };
var existing = editor.innerHTML;
editor.innerHTML = existing + (existing ? '<br>' : '') + esc2(_quranInlineTransText);
editor.dispatchEvent(new Event('input', { bubbles: true }));
switchTab('write');
if (typeof showToast === 'function') showToast('✓ تم إضافة الترجمة في المحرر');
}
let _dialectResult = '';
let _dialectInput = '';
async function convertDialect() {
var input = document.getElementById('dialect-input').value.trim();
if (!input) { if (typeof showToast === 'function') showToast('الرجاء كتابة نص أولاً', 'warning'); return; }
_dialectInput = input;
var resultCard = document.getElementById('dialect-result-card');
var resultDiv = document.getElementById('dialect-result');
var applyBtn = document.getElementById('dialect-apply-btn');
var convertBtn = document.getElementById('dialect-convert-btn');
resultDiv.innerHTML = '<p class="text-secondary text-center">⏳ جاري التحويل...</p>';
resultCard.classList.remove('is-hidden');
if (applyBtn) applyBtn.classList.add('is-hidden');
if (convertBtn) { convertBtn.disabled = true; convertBtn.textContent = '⏳ جاري التحويل...'; }
var _abortCtrl = new AbortController();
var _timeout = setTimeout(function(){ _abortCtrl.abort(); }, 30000);
try {
var resp = await fetch('/api/dialect', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text: input }),
signal: _abortCtrl.signal
});
var data = await resp.json();
if (data.status === 'success' && data.converted_text) {
_dialectResult = data.converted_text;
var esc = function(t) { return t.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); };
resultDiv.innerHTML = '<p style="font-size:20px; line-height:2; direction:rtl; text-align:center;">' + esc(data.converted_text) + '</p>';
if (applyBtn) applyBtn.classList.remove('is-hidden');
} else {
_dialectResult = '';
var errMsg = (data.error || 'حدث خطأ أثناء التحويل').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
resultDiv.innerHTML = '<p class="text-secondary text-center">' + errMsg + '</p>';
}
} catch (err) {
_dialectResult = '';
var msg = err.name === 'AbortError' ? 'انتهى وقت الانتظار — حاول مرة أخرى' : 'حدث خطأ — تأكد من الاتصال';
resultDiv.innerHTML = '<p class="text-secondary text-center">' + msg + '</p>';
} finally {
clearTimeout(_timeout);
if (convertBtn) { convertBtn.disabled = false; convertBtn.textContent = 'تحويل إلى الفصحى'; }
}
}
function copyDialectResult() {
if (!_dialectResult) { var t = document.getElementById('dialect-result'); if (t) navigator.clipboard.writeText(t.innerText); }
else navigator.clipboard.writeText(_dialectResult);
if (typeof showToast === 'function') showToast('✓ تم النسخ');
}
function applyDialectResult() {
if (!_dialectResult) return;
var editor = document.getElementById('editor-container');
if (!editor) return;
pushUndoState();
var esc = function(t) { return t.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); };
// Try to replace original dialect text in editor
if (_dialectInput) {
var plain = editor.textContent || '';
var idx = plain.indexOf(_dialectInput);
if (idx !== -1) {
var before = plain.substring(0, idx);
var after = plain.substring(idx + _dialectInput.length);
editor.innerHTML = esc(before) + esc(_dialectResult) + esc(after);
editor.focus();
editor.dispatchEvent(new Event('input', { bubbles: true }));
switchTab('write');
if (typeof showToast === 'function') showToast('✓ تم استبدال النص بالفصحى');
return;
}
}
// Fallback: replace all editor content
editor.innerHTML = esc(_dialectResult);
editor.dispatchEvent(new Event('input', { bubbles: true }));
switchTab('write');
if (typeof showToast === 'function') showToast('✓ تم تطبيق النص الفصيح في المحرر');
}
function updateDialectCharCount() {
var input = document.getElementById('dialect-input');
var counter = document.getElementById('dialect-char-count');
if (!input || !counter) return;
var len = input.value.length;
var arabicLen = len.toLocaleString('ar-EG');
counter.textContent = arabicLen + ' / ٥٬٠٠٠ حرف';
counter.style.color = len > 5000 ? '#ef4444' : 'var(--text-secondary)';
}
/* ═══════════════════════════════════════════
Quran Verification & Translation
═══════════════════════════════════════════ */
let _quranCurrentQuery = '';
let _quranSavedRange = null;
let _quranVerseClean = '';
let _quranTransClean = '';
let _quranRef = '';
let _quranTransRef = '';
async function verifyQuranText() {
const sel = window.getSelection();
const text = sel ? sel.toString().trim() : '';
if (!text) {
if (typeof showToast === 'function') showToast('علّم على النص القرآني أولاً', 'warning');
return;
}
// Save selection range before modal steals focus
_quranSavedRange = (sel.rangeCount > 0) ? sel.getRangeAt(0).cloneRange() : null;
_quranCurrentQuery = text;
_quranVerseClean = '';
// Show modal with loading
const modal = document.getElementById('quran-modal');
document.getElementById('quran-input-display').textContent = text;
document.getElementById('quran-uthmani-text').innerHTML = '<span class="text-secondary">⏳ جاري البحث...</span>';
document.getElementById('quran-reference').textContent = '';
document.getElementById('quran-translation-result').classList.add('is-hidden');
document.getElementById('quran-lang-select').value = '';
// Hide apply/copy until result
var _applyBtn = document.getElementById('quran-apply-btn');
var _copyBtn = document.getElementById('quran-copy-btn');
if (_applyBtn) _applyBtn.classList.add('is-hidden');
if (_copyBtn) _copyBtn.classList.add('is-hidden');
modal.classList.remove('is-hidden');
document.body.style.overflow = 'hidden';
var _qAbort = new AbortController();
var _qTimeout = setTimeout(function(){ _qAbort.abort(); }, 30000);
try {
const res = await fetch('/api/quran', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text: text, language: 'تدقيق الايات' }),
signal: _qAbort.signal
});
const data = await res.json();
if (data.error) {
var _escErr = data.error.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
document.getElementById('quran-uthmani-text').innerHTML =
'<span class="text-secondary">' + _escErr + '</span>';
return;
}
// Parse matched_segment: "(verse text) 【surah: ayah】"
const seg = data.matched_segment || '';
const refMatch = seg.match(/【([^】]+)】/);
const verseText = seg.replace(/\s*【[^】]+】\s*$/, '').replace(/^\(/, '').replace(/\)$/, '');
const reference = refMatch ? refMatch[1] : '';
_quranVerseClean = verseText;
_quranRef = reference;
document.getElementById('quran-uthmani-text').textContent = verseText;
document.getElementById('quran-reference').textContent = reference ? '[' + reference + ']' : '';
// Show apply & copy buttons
document.getElementById('quran-apply-btn').classList.remove('is-hidden');
document.getElementById('quran-copy-btn').classList.remove('is-hidden');
} catch (err) {
var _qMsg = err.name === 'AbortError' ? 'انتهى وقت الانتظار — حاول مرة أخرى' : 'حدث خطأ أثناء البحث — تأكد من الاتصال';
document.getElementById('quran-uthmani-text').innerHTML =
'<span class="text-secondary">' + _qMsg + '</span>';
} finally {
clearTimeout(_qTimeout);
}
}
async function translateQuranVerse() {
const lang = document.getElementById('quran-lang-select').value;
if (!lang || !_quranCurrentQuery) return;
const resultDiv = document.getElementById('quran-translation-result');
const textEl = document.getElementById('quran-translation-text');
textEl.innerHTML = '<span class="text-secondary">⏳ جاري الترجمة...</span>';
resultDiv.classList.remove('is-hidden');
// Hide apply/copy translation until result
var _applyTransBtn = document.getElementById('quran-apply-trans-btn');
var _copyTransBtn = document.getElementById('quran-copy-trans-btn');
if (_applyTransBtn) _applyTransBtn.classList.add('is-hidden');
if (_copyTransBtn) _copyTransBtn.classList.add('is-hidden');
var _tAbort = new AbortController();
var _tTimeout = setTimeout(function(){ _tAbort.abort(); }, 30000);
try {
const res = await fetch('/api/quran', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text: _quranCurrentQuery, language: lang }),
signal: _tAbort.signal
});
const data = await res.json();
if (data.error) {
var _escTErr = data.error.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
textEl.innerHTML = '<span class="text-secondary">' + _escTErr + '</span>';
return;
}
// Parse translation: "(text (ayah)) 【SurahName: ayah】"
const seg = data.matched_segment || '';
const refMatch = seg.match(/【([^】]+)】/);
const transText = seg.replace(/\s*【[^】]+】\s*$/, '').replace(/^\(/, '').replace(/\)$/, '');
const transRef = refMatch ? refMatch[1] : '';
textEl.textContent = transText;
_quranTransClean = transText;
_quranTransRef = transRef;
// Show reference in translated language
const refEl = document.getElementById('quran-translation-ref');
if (refEl) {
refEl.textContent = transRef ? '[' + transRef + ']' : '';
refEl.style.display = transRef ? '' : 'none';
}
// Show apply translation button
document.getElementById('quran-apply-trans-btn').classList.remove('is-hidden');
document.getElementById('quran-copy-trans-btn').classList.remove('is-hidden');
} catch (err) {
var _tMsg = err.name === 'AbortError' ? 'انتهى وقت الانتظار — حاول مرة أخرى' : 'حدث خطأ في الترجمة';
textEl.innerHTML = '<span class="text-secondary">' + _tMsg + '</span>';
} finally {
clearTimeout(_tTimeout);
}
}
function closeQuranModal() {
document.getElementById('quran-modal').classList.add('is-hidden');
document.body.style.overflow = '';
}
function copyQuranResult() {
const verse = _quranVerseClean || '';
const ref = _quranRef ? ' [' + _quranRef + ']' : '';
const text = verse + ref;
if (!text.trim()) return;
navigator.clipboard.writeText(text).then(() => {
if (typeof showToast === 'function') showToast('✓ تم نسخ النص المدقق');
const btn = document.getElementById('quran-copy-btn');
if (btn) { btn.textContent = '✅'; setTimeout(() => { btn.textContent = '📋'; }, 1500); }
});
}
// Ctrl+Q → Quran panel shortcut (e.code works with any keyboard language)
// Escape → Close Quran modal
document.addEventListener('keydown', (e) => {
if ((e.ctrlKey || e.metaKey) && e.code === 'KeyQ') {
e.preventDefault();
// Switch to Quran tab and copy selection if any
var sel = window.getSelection();
var text = sel ? sel.toString().trim() : '';
switchTab('quran');
if (text) {
var ta = document.getElementById('quran-input');
if (ta) ta.value = text;
}
}
if (e.key === 'Escape') {
var modal = document.getElementById('quran-modal');
if (modal && !modal.classList.contains('is-hidden')) {
closeQuranModal();
}
}
});
function copyQuranTranslation() {
const trans = _quranTransClean || '';
const ref = _quranTransRef ? ' [' + _quranTransRef + ']' : '';
const text = trans + ref;
if (!text.trim()) return;
navigator.clipboard.writeText(text).then(() => {
if (typeof showToast === 'function') showToast('✓ تم نسخ الترجمة');
const btn = document.getElementById('quran-copy-trans-btn');
if (btn) { btn.textContent = '✅'; setTimeout(() => { btn.textContent = '📋'; }, 1500); }
});
}
function _replaceInEditor(newText, ref) {
var editor = document.getElementById('editor-container');
if (!editor || !_quranCurrentQuery) return false;
pushUndoState(); // Save state before Quran replace
closeQuranModal();
// Replace in editor: wrap in quran-applied span to protect from analysis
var plain = editor.textContent || '';
var idx = plain.indexOf(_quranCurrentQuery);
if (idx === -1) return false;
var before = plain.substring(0, idx);
var after = plain.substring(idx + _quranCurrentQuery.length);
// Build HTML: before + quran span (verse + styled ref) + after
var esc = function(t) { return t.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); };
var refHTML = ref ? ' <span class="quran-ref-inline">[' + esc(ref) + ']</span>' : '';
editor.innerHTML = esc(before) +
'<span class="quran-applied" contenteditable="false" data-quran="true">' +
esc(newText) + refHTML + '</span>' +
esc(after);
editor.focus();
editor.dispatchEvent(new Event('input', { bubbles: true }));
return true;
}
function applyQuranText() {
if (!_quranVerseClean || !_quranCurrentQuery) {
if (typeof showToast === 'function') showToast('لا يوجد نص للتطبيق', 'warning');
return;
}
if (_replaceInEditor(_quranVerseClean, _quranRef)) {
if (typeof showToast === 'function') showToast('✓ تم تطبيق النص القرآني المدقق');
} else {
if (typeof showToast === 'function') showToast('لم يتم العثور على النص الأصلي', 'error');
}
}
function applyQuranTranslation() {
if (!_quranTransClean || !_quranCurrentQuery) {
if (typeof showToast === 'function') showToast('لا يوجد ترجمة للتطبيق', 'warning');
return;
}
if (_replaceInEditor(_quranTransClean, _quranTransRef)) {
if (typeof showToast === 'function') showToast('✓ تم تطبيق الترجمة');
} else {
if (typeof showToast === 'function') showToast('لم يتم العثور على النص الأصلي', 'error');
}
}
// Summarization functions
function updateSummaryLength() {
// Slider moves but label stays fixed as متوسط
}
let _summaryInput = '';
let _summaryResult = '';
async function generateSummary(event) {
var customInput = document.getElementById('summary-custom-input');
let text = customInput ? customInput.value.trim() : '';
if (!text) {
const summaryText = document.getElementById('summary-text');
summaryText.innerHTML = '<p class="text-secondary text-center">الرجاء كتابة أو لصق نص في مربع الإدخال أولاً</p>';
document.getElementById('summary-preview').classList.add('show');
return;
}
_summaryInput = text;
const lengthValue = document.getElementById('summary-length').value;
const isFullText = false;
const generateButton = event ? event.target : document.getElementById('generate-summary-btn');
const summaryText = document.getElementById('summary-text');
const summaryPreview = document.getElementById('summary-preview');
// Show loading state
const originalButtonText = generateButton.textContent;
generateButton.textContent = 'جاري التوليد...';
generateButton.disabled = true;
summaryText.innerHTML = '<div class="summary-loading"><span class="summary-loading__spinner" aria-hidden="true"></span><p class="summary-loading__text">جاري توليد الملخص...</p></div>';
summaryPreview.classList.add('show');
// Add spin animation if not exists — defined in base.css
try {
// Call API
const response = await fetch('/api/summarize', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
text: text,
length: parseInt(lengthValue),
full_text: isFullText
})
});
const data = await response.json();
if (!response.ok) {
throw new Error(data.error || 'حدث خطأ أثناء توليد الملخص');
}
if (data.status === 'success' && data.summary) {
let summaryContent = data.summary;
// Item 11: Bullet mode
if (window._summaryMode === 'bullets') {
const sentences = summaryContent.split(/[.،؛]\s*/).filter(s => s.trim().length > 2);
const ul = document.createElement('ul');
ul.style.cssText = 'list-style: disc; padding-right: 1.5rem; direction: rtl; text-align: right;';
sentences.forEach(s => {
const li = document.createElement('li');
li.textContent = s.trim();
li.style.marginBottom = '8px';
ul.appendChild(li);
});
summaryText.textContent = '';
summaryText.appendChild(ul);
} else {
const p = document.createElement('p');
p.textContent = summaryContent;
summaryText.textContent = '';
summaryText.appendChild(p);
}
// Item 6: Summary stats
if (typeof updateSummaryStats === 'function') {
updateSummaryStats(summaryContent);
}
_summaryResult = summaryContent;
var applyBtn = document.getElementById('summary-apply-btn');
if (applyBtn) applyBtn.style.display = '';
} else {
throw new Error(data.error || 'لم يتم توليد ملخص');
}
} catch (error) {
console.error('Error generating summary:', error);
const safeMsg = typeof escapeHtml === 'function'
? escapeHtml(error.message || 'تعذر توليد الملخص. يرجى المحاولة مرة أخرى.')
: String(error.message || 'تعذر توليد الملخص. يرجى المحاولة مرة أخرى.');
summaryText.innerHTML = `
<div class="summary-loading">
<p class="summary-error">⚠️ حدث خطأ</p>
<p class="text-secondary text-caption">${safeMsg}</p>
<p class="text-muted text-label mt-2">تأكد من أن الخادم يعمل وأن النموذج محمّل بشكل صحيح.</p>
</div>
`;
} finally {
// Restore button state
generateButton.textContent = originalButtonText;
generateButton.disabled = false;
}
}
function copySummary() {
const text = document.getElementById('summary-text').innerText;
navigator.clipboard.writeText(text).then(() => {
const btn = document.querySelector('[onclick="copySummary()"]');
if (btn) {
const originalText = btn.textContent;
btn.textContent = 'تم النسخ!';
if (typeof showToast === 'function') showToast('✓ تم نسخ الملخص');
setTimeout(() => btn.textContent = originalText, 2000);
}
}).catch(() => {
// Fallback for older browsers
const ta = document.createElement('textarea');
ta.value = text;
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);
});
}
function applySummaryToEditor() {
if (!_summaryResult) return;
var editor = document.getElementById('editor-container');
if (!editor) return;
if (typeof pushUndoState === 'function') pushUndoState();
var esc = function(t) { return t.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); };
// Try to replace original text in editor
if (_summaryInput) {
var plain = editor.textContent || '';
var idx = plain.indexOf(_summaryInput);
if (idx !== -1) {
var before = plain.substring(0, idx);
var after = plain.substring(idx + _summaryInput.length);
editor.innerHTML = esc(before) + esc(_summaryResult) + esc(after);
editor.focus();
editor.dispatchEvent(new Event('input', { bubbles: true }));
switchTab('write');
if (typeof showToast === 'function') showToast('✓ تم استبدال النص بالملخص');
return;
}
}
// Fallback: append summary
var existing = editor.innerHTML;
editor.innerHTML = existing + (existing ? '<br>' : '') + esc(_summaryResult);
editor.dispatchEvent(new Event('input', { bubbles: true }));
switchTab('write');
if (typeof showToast === 'function') showToast('✓ تم إضافة الملخص في المحرر');
}
function exportSummaryAsTxt() {
exportSummaryAs('txt');
}
function getSummaryText() {
return (document.getElementById('summary-text')?.innerText || '').trim();
}
async function exportSummaryAs(format) {
const text = getSummaryText();
if (!text) {
if (typeof showToast === 'function') showToast('لا يوجد ملخص للتصدير', 'error');
return;
}
if (format === 'txt') {
const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'ملخص-بيان.txt';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
if (typeof showToast === 'function') showToast('✓ تم تصدير الملخص');
} else if (format === 'docx') {
if (typeof docx === 'undefined') {
if (typeof showToast === 'function') showToast('مكتبة Word غير محمّلة', 'error');
return;
}
try {
const paragraphs = text.split(/\n+/).filter(p => p.trim());
const children = paragraphs.map(block =>
new docx.Paragraph({
bidirectional: true,
alignment: docx.AlignmentType.RIGHT,
children: [new docx.TextRun({ text: block, rightToLeft: true, font: 'Arial' })]
})
);
const doc = new docx.Document({ sections: [{ properties: { rightToLeft: true }, children }] });
const blob = await docx.Packer.toBlob(doc);
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'ملخص-بيان.docx';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
if (typeof showToast === 'function') showToast('✓ تم تصدير الملخص كـ Word');
} catch (err) {
console.error('Summary DOCX export error:', err);
if (typeof showToast === 'function') showToast('تعذر تصدير ملف Word', 'error');
}
} else if (format === 'pdf') {
if (typeof html2pdf === 'undefined') {
if (typeof showToast === 'function') showToast('مكتبة PDF غير محمّلة', 'error');
return;
}
try {
if (typeof showToast === 'function') showToast('جاري تصدير PDF...');
const html = buildPdfHtmlString(text);
await html2pdf().set({
margin: [15, 15, 15, 15],
filename: 'ملخص-بيان.pdf',
image: { type: 'jpeg', quality: 0.95 },
html2canvas: { scale: 1.5, useCORS: true, backgroundColor: '#ffffff', logging: false, foreignObjectRendering: false },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
}).from(html, 'string').save();
if (typeof showToast === 'function') showToast('✓ تم تصدير الملخص كـ PDF');
} catch (err) {
console.error('Summary PDF export error:', err);
if (typeof showToast === 'function') showToast('تعذر تصدير PDF', 'error');
}
}
// Close dropdown
const menu = document.getElementById('summary-export-menu');
if (menu) menu.classList.remove('show');
}
// Auto-save indicator
function showAutoSaveStatus(msg) {
const el = document.getElementById('auto-save-status');
if (!el) return;
el.textContent = msg;
el.style.opacity = '1';
clearTimeout(el._timer);
el._timer = setTimeout(() => { el.style.opacity = '0'; }, 3000);
}
// Word count goal UI
function setWordGoalUI() {
const current = localStorage.getItem('bayan_word_goal') || '0';
const input = prompt('حدد هدف عدد الكلمات (أدخل ٠ لإلغاء الهدف):', current);
if (input === null) return;
const goal = parseInt(input, 10);
if (isNaN(goal) || goal < 0) return;
localStorage.setItem('bayan_word_goal', String(goal));
if (typeof updateEditorStats === 'function') updateEditorStats();
if (goal > 0) {
if (typeof showToast === 'function') showToast('✓ تم تحديد الهدف: ' + goal + ' كلمة');
} else {
if (typeof showToast === 'function') showToast('تم إلغاء هدف الكلمات');
const el = document.getElementById('word-goal-indicator');
if (el) el.style.display = 'none';
}
}
// Element SDK Integration
async function onConfigChange(cfg) {
config = { ...defaultConfig, ...cfg };
// Brand accents only — surfaces & text are owned by data-theme in tokens.css
const primary = config.primary_color || defaultConfig.primary_color;
const secondary = config.secondary_color || defaultConfig.secondary_color;
document.documentElement.style.setProperty('--color-primary', primary);
document.documentElement.style.setProperty('--color-secondary', secondary);
document.documentElement.style.setProperty('--primary-color', primary);
document.documentElement.style.setProperty('--secondary-color', secondary);
const brandName = config.brand_name || defaultConfig.brand_name;
const navBrand = document.getElementById('nav-brand');
const footerBrand = document.getElementById('footer-brand');
if (navBrand) navBrand.textContent = brandName;
if (footerBrand) footerBrand.textContent = brandName;
const heroHeadline = config.hero_headline || defaultConfig.hero_headline;
const headlineEl = document.getElementById('hero-headline');
if (headlineEl) {
const parts = heroHeadline.split('\n');
if (parts.length > 1) {
headlineEl.innerHTML = parts[0] + '<br/><span class="text-gradient">' + parts[1] + '</span>';
} else {
headlineEl.innerHTML = heroHeadline.replace('بثقة واحتراف', '<span class="text-gradient">بثقة واحتراف</span>');
}
}
const heroSubheadline = document.getElementById('hero-subheadline');
if (heroSubheadline) {
heroSubheadline.textContent = config.hero_subheadline || defaultConfig.hero_subheadline;
}
const ctaPrimary = config.cta_primary || defaultConfig.cta_primary;
const navCta = document.getElementById('nav-cta');
const heroCta = document.getElementById('hero-cta-primary');
if (navCta) navCta.textContent = ctaPrimary;
if (heroCta) heroCta.textContent = ctaPrimary;
const fontFamily = config.font_family || defaultConfig.font_family;
const fontSize = config.font_size || defaultConfig.font_size;
document.body.style.fontFamily = `${fontFamily}, 'Cairo', sans-serif`;
document.body.style.fontSize = `${fontSize}px`;
}
function mapToCapabilities(cfg) {
return {
recolorables: [
{
get: () => cfg.primary_color || defaultConfig.primary_color,
set: (value) => { cfg.primary_color = value; window.elementSdk.setConfig({ primary_color: value }); }
},
{
get: () => cfg.secondary_color || defaultConfig.secondary_color,
set: (value) => { cfg.secondary_color = value; window.elementSdk.setConfig({ secondary_color: value }); }
}
],
borderables: [],
fontEditable: {
get: () => cfg.font_family || defaultConfig.font_family,
set: (value) => { cfg.font_family = value; window.elementSdk.setConfig({ font_family: value }); }
},
fontSizeable: {
get: () => cfg.font_size || defaultConfig.font_size,
set: (value) => { cfg.font_size = value; window.elementSdk.setConfig({ font_size: value }); }
}
};
}
function mapToEditPanelValues(cfg) {
return new Map([
['brand_name', cfg.brand_name || defaultConfig.brand_name],
['hero_headline', cfg.hero_headline || defaultConfig.hero_headline],
['hero_subheadline', cfg.hero_subheadline || defaultConfig.hero_subheadline],
['cta_primary', cfg.cta_primary || defaultConfig.cta_primary]
]);
}
// Initialize SDK
if (window.elementSdk) {
window.elementSdk.init({
defaultConfig,
onConfigChange,
mapToCapabilities,
mapToEditPanelValues
});
} else {
onConfigChange(defaultConfig);
}
document.addEventListener('DOMContentLoaded', async () => {
await initAuth();
initTheme();
initUI();
initEditor();
if (typeof initFormatToolbar === 'function') initFormatToolbar();
if (typeof initDocSearch === 'function') initDocSearch();
initDocuments();
updateSuggestionsList([]);
// Phase 7 — Sync System
if (typeof SyncManager !== 'undefined') SyncManager.init();
// Phase 6 — Cloud persistence
await initSettingsSync();
initDocumentsCloud();
initSummaries();
try {
const savedPage = sessionStorage.getItem('bayan_current_page');
if (savedPage) {
showPage(savedPage);
} else if (window.location.hash === '#/editor') {
showPage('editor');
} else {
showPage('home');
}
} catch (e) {
if (window.location.hash === '#/editor') {
showPage('editor');
} else {
showPage('home');
}
}
});
</script>
<!-- Quran Verification Modal -->
<div id="quran-modal" class="quran-modal is-hidden" role="dialog" aria-label="نتيجة التدقيق القرآني" aria-modal="true">
<div class="quran-modal-backdrop" onclick="closeQuranModal()"></div>
<div class="quran-modal-panel" dir="rtl">
<!-- Header -->
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-2">
<svg width="20" height="20" fill="none" stroke="#06b6d4" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
<span class="text-lg font-bold">تدقيق النص القرآني</span>
</div>
<button onclick="closeQuranModal()" class="btn-ghost" style="font-size:18px;padding:4px 8px;" aria-label="إغلاق">✕</button>
</div>
<!-- Input text -->
<div class="p-3 rounded-xl mb-4" style="background: rgba(255,255,255,0.04); border: 1px solid var(--color-border);">
<span class="text-xs" style="color:var(--text-secondary);">📝 النص المحدد:</span>
<p id="quran-input-display" class="text-base mt-1" style="color:var(--color-text-primary);"></p>
</div>
<!-- Uthmani Result -->
<div class="quran-result-card">
<div class="flex items-center justify-between mb-3">
<div class="text-sm font-bold" style="color:#06b6d4;">✓ النص القرآني المدقق</div>
<div class="flex items-center gap-2">
<button id="quran-copy-btn" onclick="copyQuranResult()" class="quran-copy-btn is-hidden" type="button" title="نسخ النص المدقق">📋</button>
<button id="quran-apply-btn" onclick="applyQuranText()" class="quran-apply-btn is-hidden" type="button">تطبيق ✓</button>
</div>
</div>
<p id="quran-uthmani-text" class="quran-uthmani"></p>
<p id="quran-reference" class="quran-reference"></p>
</div>
<!-- Translation -->
<div class="mt-4 pt-4" style="border-top:1px solid var(--color-border);">
<div class="flex items-center gap-3 mb-3 flex-wrap">
<svg width="16" height="16" fill="none" stroke="#06b6d4" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
<span class="text-sm font-bold">ترجمة الآية</span>
<select id="quran-lang-select" onchange="translateQuranVerse()" class="quran-lang-select">
<option value="">— اختر لغة —</option>
<option value="english">🇬🇧 English</option>
<option value="french">🇫🇷 Français</option>
<option value="turkish">🇹🇷 Türkçe</option>
<option value="persian">🇮🇷 فارسی</option>
<option value="russian">🇷🇺 Русский</option>
<option value="spanish">🇪🇸 Español</option>
<option value="german">🇩🇪 Deutsch</option>
<option value="indonesian">🇮🇩 Indonesia</option>
<option value="malay">🇲🇾 Melayu</option>
<option value="bengali">🇧🇩 বাংলা</option>
<option value="bosnian">🇧🇦 Bosanski</option>
<option value="portuguese">🇵🇹 Português</option>
<option value="uzbek">🇺🇿 O'zbek</option>
</select>
</div>
<div id="quran-translation-result" class="is-hidden p-4 rounded-xl" style="background:rgba(6,182,212,0.06); border:1px solid rgba(6,182,212,0.15);">
<p id="quran-translation-text" style="font-size:20px; line-height:2; color:var(--color-text-primary); text-align:center;"></p>
<p id="quran-translation-ref" class="quran-reference" style="display:none;"></p>
<div class="flex items-center justify-center gap-2 mt-3">
<button id="quran-copy-trans-btn" onclick="copyQuranTranslation()" class="quran-copy-btn is-hidden" type="button" title="نسخ الترجمة">📋</button>
<button id="quran-apply-trans-btn" onclick="applyQuranTranslation()" class="quran-apply-btn is-hidden" type="button">تطبيق الترجمة ✓</button>
</div>
</div>
</div>
</div>
</div>
<!-- Floating Selection Toolbar -->
<div id="selection-toolbar" class="selection-toolbar is-hidden" role="toolbar" aria-label="أدوات النص المحدد">
<button type="button" class="sel-tool-btn" onclick="selectionToolAction('summarize')" title="تلخيص النص المحدد">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
تلخيص
</button>
<span class="sel-tool-sep"></span>
<button type="button" class="sel-tool-btn" onclick="selectionToolAction('dialect')" title="تحويل النص المحدد للفصحى">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
فصحى
</button>
<span class="sel-tool-sep"></span>
<button type="button" class="sel-tool-btn" onclick="selectionToolAction('quran')" title="تدقيق النص القرآني المحدد">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
تدقيق قرآني
</button>
</div>
</body>
</html>
|