☰

IU Table Organizer

A script to order the lectures table according to weekdays on the Islamic University website

  1. // ==UserScript==
  2. // @name IU Table Organizer
  3. // @description A script to order the lectures table according to weekdays on the Islamic University website
  4. // @name:en IU Table Organizer
  5. // @description:en A script to order the lectures table according to weekdays on the Islamic University website
  6. // @name:ar منظم جدول الجامعة الاسلامية
  7. // @description:ar اضافة لتعديل مظهر الجدول بالجامعة الاسلامية الى جدول مرتب تبعا لايام الاسبوع بضغطة زر
  8. // @include https://eduportal.iu.edu.sa/iu/ui/student/homeIndex.faces
  9. // @include https://eduportal.iu.edu.sa/iu/ui/student/*/*/*
  10. // @include http://eduportal.iu.edu.sa/iu/ui/student/*
  11. // @include https://eduportal.iu.edu.sa/iu/ui/student/student_schedule/index/studentScheduleIndex.faces
  12. // @version 4.3
  13. // @icon https://www.google.com/s2/favicons?domain=sso.iu.edu.sa
  14. // @namespace https://greasyfork.org/users/814159
  15. // @icon https://icons.iconarchive.com/icons/fatcow/farm-fresh/32/table-icon.png
  16. // @license Mozilla Public License 2.0
  17. // @grant GM_addStyle
  18. // @require https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js
  19. // ==/UserScript==
  20.  
  21. (function() {{
  22.     'use strict';
  23.     
  24.     // Add styles
  25.     GM_addStyle(`#newTable {
  26.     border-collapse: collapse;
  27.     margin: 0;
  28.     font-size: 0.9em;
  29.     border-radius: 8px;
  30.     overflow: hidden;
  31.     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  32.     background: white;
  33.     width: fit-content;
  34.     min-width: auto;
  35.     table-layout: fixed;
  36.     display: table;
  37.     direction: rtl;
  38. }
  39.  
  40. /* Add styles for the table wrapper */
  41. .table-wrapper {
  42.     width: 100%;
  43.     max-width: 1100px;
  44.     margin: 0 auto;
  45.     overflow: hidden;
  46.     padding: 0;
  47.     display: flex;
  48.     justify-content: center;
  49.     border-radius: 8px;
  50. }
  51.  
  52. #newTable thead tr {
  53.     background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
  54.     color: #ffffff;
  55.     text-align: center;
  56.     font-weight: bold;
  57.     height: 60px;
  58.     position: relative;
  59.     box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  60.     font-feature-settings: "kern", "liga", "clig", "calt", "arab";
  61.     -webkit-font-feature-settings: "kern", "liga", "clig", "calt", "arab";
  62.     font-family: "Segoe UI", "Traditional Arabic", Tahoma, Geneva, Verdana, sans-serif;
  63. }
  64.  
  65. #newTable th {
  66.     padding: 1px;
  67.     position: relative;
  68.     font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  69.     border-left: 1px solid rgba(255,255,255,0.15);
  70.     transition: background-color 0.3s ease;
  71.     width: 220px;  /* 1100px / 5 columns */
  72. }
  73.  
  74. #newTable th:last-child {
  75.     border-left: none;
  76. }
  77.  
  78. #newTable th::after {
  79.     content: '';
  80.     position: absolute;
  81.     bottom: 0;
  82.     left: 0;
  83.     right: 0;
  84.     height: 3px;
  85.     background: rgba(255,255,255,0.1);
  86.     transform: scaleX(0.7);
  87.     transition: transform 0.3s ease;
  88. }
  89.  
  90. #newTable th:hover::after {
  91.     transform: scaleX(1);
  92. }
  93.  
  94. #newTable th .day-name {
  95.     font-size: 1.3em;
  96.     font-weight: 600;
  97.     margin-bottom: 2px;
  98.     text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  99.     text-align: center;
  100.     direction: rtl;
  101.     font-family: "Noto Kufi Arabic", "Segoe UI", sans-serif;
  102.     font-feature-settings: "kern", "liga", "clig", "calt";
  103.     -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
  104. }
  105.  
  106. #newTable td {
  107.     padding: 1px;
  108.     text-align: center;
  109.     vertical-align: middle;
  110.     height: auto;
  111.     width: 220px;  /* 1100px / 5 columns */
  112.     font-size: 0.85em;
  113.     direction: rtl;
  114. }
  115.  
  116. #newTable td:empty {
  117.     padding: 0;
  118.     height: 0;
  119. }
  120.  
  121. #newTable tbody tr {
  122.     border-bottom: 1px solid #e0e0e0;
  123.     transition: background-color 0.3s ease;
  124. }
  125.  
  126. #newTable tbody tr:hover {
  127.     background-color: #f5f5f5;
  128. }
  129.  
  130. .break-cell {
  131.     background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
  132.     color: #424242;
  133.     font-style: italic;
  134.     padding: 4px;
  135.     border-radius: 6px;
  136.     margin: 1px;
  137.     font-size: 1.1em;
  138.     box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  139.     text-align: center;
  140.     border: 1px solid #e0e0e0;
  141.     display: inline-block;
  142.     box-sizing: border-box;
  143.     width: fit-content;
  144.     margin: 0 auto;
  145. }
  146.  
  147. .break-content {
  148.     display: inline-block;
  149.     white-space: nowrap;
  150.     padding: 0 8px;
  151. }
  152.  
  153. .lecture-cell {
  154.     border-left: 4px solid;
  155.     padding: 4px;
  156.     background: #fff;
  157.     border-radius: 6px;
  158.     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  159.     margin: 1px;
  160.     transition: all 0.2s ease;
  161.     display: block;
  162.     box-sizing: border-box;
  163. }
  164.  
  165. .lecture-cell:hover {
  166.     transform: translateX(-2px);
  167. }
  168.  
  169. .lecture-cell strong {
  170.     display: block;
  171.     margin-bottom: 1px;
  172.     font-size: 0.95em;
  173. }
  174.  
  175. .lecture-cell div {
  176.     margin: 0px;
  177.     line-height: 1.15;
  178. }
  179.  
  180. .lecture-cell > div {
  181.     margin-bottom: 2px;
  182. }
  183.  
  184. .lecture-cell .lecture-hall {
  185.     display: block;
  186.     background: #e8f5e9;
  187.     padding: 4px 8px;
  188.     border-radius: 6px;
  189.     font-size: 1.1em;
  190.     color: #2e7d32;
  191.     margin-top: 5px;
  192.     font-weight: 500;
  193.     border: 1px solid #c8e6c9;
  194.     text-align: center;
  195. }
  196.  
  197. /* Update grid layout margins and gaps */
  198. .lecture-cell > div > div {
  199.     display: grid;
  200.     grid-template-columns: 1fr 1fr;
  201.     gap: 6px;
  202.     margin-top: 6px;
  203. }
  204.  
  205. .schedule-summary {
  206.     background: linear-gradient(45deg, #f5f5f5, #fff);
  207.     border-radius: 8px;
  208.     padding: 10px;
  209.     margin: 7px auto 0;
  210.     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  211.     border: 1px solid #e0e0e0;
  212.     width: 100%;
  213.     box-sizing: border-box;
  214.     min-width: auto;
  215. }
  216.  
  217. .schedule-summary > div {
  218.     display: flex;
  219.     align-items: center;
  220.     justify-content: center;
  221.     gap: 20px;
  222.     flex-wrap: wrap;
  223.     width: 100%;
  224.     box-sizing: border-box;
  225. }
  226.  
  227. .schedule-summary div > div {
  228.     flex: 0 1 auto;
  229.     min-width: fit-content;
  230.     white-space: nowrap;
  231. }
  232.  
  233. .control-buttons {
  234.     display: flex;
  235.     gap: 8px;
  236.     align-items: center;
  237.     flex-wrap: wrap;
  238. }
  239.  
  240. .control-button {
  241.     display: inline-flex;
  242.     align-items: center;
  243.     justify-content: center;
  244.     padding: 10px 20px;
  245.     border-radius: 12px;
  246.     font-family: "Segoe UI", "Traditional Arabic", Tahoma, Geneva, Verdana, sans-serif;
  247.     font-size: 0.95em;
  248.     font-weight: 600;
  249.     text-align: center;
  250.     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  251.     border: none;
  252.     background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  253.     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25),
  254.                 0 4px 8px rgba(0, 0, 0, 0.15),
  255.                 inset 0 2px 4px rgba(255, 255, 255, 0.1);
  256.     text-decoration: none;
  257.     margin: 4px 8px;
  258.     min-width: 120px;
  259.     white-space: nowrap;
  260.     line-height: 1.5;
  261.     cursor: pointer;
  262.     color: white;
  263.     position: relative;
  264.     overflow: visible;
  265. }
  266.  
  267. .control-button::before {
  268.     content: '';
  269.     position: absolute;
  270.     top: 0;
  271.     left: 0;
  272.     width: 100%;
  273.     height: 100%;
  274.     background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  275.     opacity: 0;
  276.     transition: opacity 0.3s ease;
  277. }
  278.  
  279. .control-button:hover {
  280.     transform: translateY(-2px) scale(1.02);
  281.     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35),
  282.                 0 8px 16px rgba(0, 0, 0, 0.25),
  283.                 inset 0 2px 4px rgba(255, 255, 255, 0.15);
  284.     filter: brightness(1.1);
  285. }
  286.  
  287. .control-button:hover::before {
  288.     opacity: 1;
  289. }
  290.  
  291. .control-button:active {
  292.     transform: translateY(1px) scale(0.98);
  293.     box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2),
  294.                 inset 0 2px 4px rgba(0, 0, 0, 0.1);
  295. }
  296.  
  297. /* Theme buttons specific styles */
  298. .theme-btn, #ramadanBtn {
  299.     min-width: 100px;
  300.     backdrop-filter: blur(8px);
  301.     position: relative;
  302.     padding-right: 3rem;
  303. }
  304.  
  305. .theme-btn::after, #ramadanBtn::after {
  306.     content: '';
  307.     position: absolute;
  308.     right: 0.75rem;
  309.     top: 50%;
  310.     transform: translateY(-50%);
  311.     width: 20px;
  312.     height: 10px;
  313.     border-radius: 2px;
  314.     background: #2a2a2a;
  315.     border: 1px solid rgba(255, 255, 255, 0.2);
  316.     transition: all 0.3s ease;
  317.     z-index: 1;
  318.     box-shadow: 
  319.         inset 0 1px 2px rgba(0, 0, 0, 0.3),
  320.         inset 0 -1px 2px rgba(255, 255, 255, 0.1);
  321. }
  322.  
  323. .theme-btn.active::after, #ramadanBtn.active::after {
  324.     background: linear-gradient(180deg, 
  325.         rgba(239, 68, 68, 1) 0%,
  326.         rgba(239, 68, 68, 0.8) 50%,
  327.         rgba(239, 68, 68, 0.9) 100%
  328.     );
  329.     border: 1px solid rgba(239, 68, 68, 0.5);
  330.     box-shadow: 
  331.         0 0 2px rgba(239, 68, 68, 0.4),
  332.         0 0 4px rgba(239, 68, 68, 0.2),
  333.         inset 0 -2px 4px rgba(0, 0, 0, 0.2),
  334.         inset 0 2px 4px rgba(255, 255, 255, 0.8);
  335.     animation: indicatorGlow 2s infinite;
  336. }
  337.  
  338. @keyframes indicatorGlow {
  339.     0%, 100% {
  340.         background: linear-gradient(180deg, 
  341.             rgba(239, 68, 68, 1) 0%,
  342.             rgba(239, 68, 68, 0.8) 50%,
  343.             rgba(239, 68, 68, 0.9) 100%
  344.         );
  345.         box-shadow: 
  346.             0 0 2px rgba(239, 68, 68, 0.4),
  347.             0 0 4px rgba(239, 68, 68, 0.2),
  348.             inset 0 -2px 4px rgba(0, 0, 0, 0.2),
  349.             inset 0 2px 4px rgba(255, 255, 255, 0.8);
  350.     }
  351.     50% {
  352.         background: linear-gradient(180deg, 
  353.             rgba(239, 68, 68, 0.95) 0%,
  354.             rgba(239, 68, 68, 0.75) 50%,
  355.             rgba(239, 68, 68, 0.85) 100%
  356.         );
  357.         box-shadow: 
  358.             0 0 4px rgba(239, 68, 68, 0.6),
  359.             0 0 8px rgba(239, 68, 68, 0.4),
  360.             inset 0 -2px 4px rgba(0, 0, 0, 0.2),
  361.             inset 0 2px 4px rgba(255, 255, 255, 0.8);
  362.     }
  363. }
  364.  
  365. /* Set permanent colors for light theme button */
  366. #lightThemeBtn {
  367.     background: linear-gradient(135deg, #451a03 0%, #582402 100%);
  368. }
  369.  
  370. /* Dark theme - only modify the indicator */
  371. .theme-dark .theme-btn::after, 
  372. .theme-dark #ramadanBtn::after {
  373.     background: #1a1a1a;
  374.     border-color: rgba(255, 255, 255, 0.1);
  375.     box-shadow: 
  376.         inset 0 1px 3px rgba(0, 0, 0, 0.5),
  377.         inset 0 -1px 2px rgba(255, 255, 255, 0.05);
  378. }
  379.  
  380. .theme-dark .theme-btn.active::after,
  381. .theme-dark #ramadanBtn.active::after {
  382.     background: linear-gradient(180deg, 
  383.         rgba(239, 68, 68, 0.9) 0%,
  384.         rgba(239, 68, 68, 0.7) 50%,
  385.         rgba(239, 68, 68, 0.8) 100%
  386.     );
  387.     border-color: rgba(239, 68, 68, 0.3);
  388.     box-shadow: 
  389.         0 0 4px rgba(239, 68, 68, 0.4),
  390.         0 0 8px rgba(239, 68, 68, 0.2),
  391.         inset 0 -2px 4px rgba(0, 0, 0, 0.3),
  392.         inset 0 2px 4px rgba(255, 255, 255, 0.4);
  393. }
  394.  
  395. /* Remove redundant Ramadan button indicator styles */
  396. #ramadanBtn {
  397.     background: linear-gradient(135deg, #5b21b6 0%, #6d28d9 100%);
  398.     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25),
  399.                 0 4px 8px rgba(0, 0, 0, 0.15),
  400.                 inset 0 2px 4px rgba(255, 255, 255, 0.1);
  401. }
  402.  
  403. #ramadanBtn::after {
  404.     background: #2a1650;
  405. }
  406.  
  407. #ramadanBtn:hover {
  408.     box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3),
  409.                 0 8px 16px rgba(124, 58, 237, 0.2),
  410.                 inset 0 2px 4px rgba(255, 255, 255, 0.2);
  411. }
  412.  
  413. /* Dark theme support for control buttons */
  414. .theme-dark .control-button {
  415.     background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  416.     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
  417.                 0 4px 8px rgba(0, 0, 0, 0.3),
  418.                 inset 0 1px 1px rgba(255, 255, 255, 0.05);
  419.     border: 1px solid rgba(255, 255, 255, 0.05);
  420.     color: #e0e0ff;
  421. }
  422.  
  423. .theme-dark .control-button:hover {
  424.     filter: brightness(1.1);
  425.     transform: translateY(-2px) scale(1.02);
  426. }
  427.  
  428. .theme-dark .control-button:active {
  429.     transform: translateY(1px) scale(0.98);
  430. }
  431.  
  432. /* Remove the light theme button override and keep only dark theme button override */
  433. .theme-dark #darkThemeBtn {
  434.     background: linear-gradient(135deg, #172554 0%, #1e3a8a 100%);
  435. }
  436.  
  437. /* Add specific style for download button in both themes */
  438. #downloadButton {
  439.     background: linear-gradient(135deg, #042f2e 0%, #134e4a 100%);
  440. }
  441.  
  442. .theme-dark #ramadanBtn {
  443.     background: linear-gradient(135deg, #3b0764 0%, #4c1d95 100%);
  444. }
  445.  
  446. .schedule-organizer-btn {
  447.     display: inline-flex;
  448.     align-items: center;
  449.     justify-content: center;
  450.     padding: 10px 28px;
  451.     background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  452.     color: white;
  453.     border-radius: 12px;
  454.     font-family: "Segoe UI", "Traditional Arabic", Tahoma, Geneva, Verdana, sans-serif;
  455.     font-size: 1.1em;
  456.     font-weight: 600;
  457.     text-align: center;
  458.     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  459.     border: none;
  460.     box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2),
  461.                 0 4px 8px rgba(37, 99, 235, 0.1),
  462.                 inset 0 2px 4px rgba(255, 255, 255, 0.1);
  463.     text-decoration: none;
  464.     margin: 6px;
  465.     min-width: 160px;
  466.     white-space: nowrap;
  467.     line-height: 1.5;
  468.     cursor: pointer;
  469.     position: relative;
  470.     overflow: hidden;
  471.     z-index: 100;
  472.     visibility: visible !important;
  473. }
  474.  
  475. .schedule-organizer-btn::before {
  476.     content: '';
  477.     position: absolute;
  478.     top: 0;
  479.     left: 0;
  480.     width: 100%;
  481.     height: 100%;
  482.     background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  483.     opacity: 0;
  484.     transition: opacity 0.3s ease;
  485. }
  486.  
  487. .schedule-organizer-btn:hover {
  488.     transform: translateY(-2px) scale(1.02);
  489.     box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3),
  490.                 0 8px 16px rgba(37, 99, 235, 0.2),
  491.                 inset 0 2px 4px rgba(255, 255, 255, 0.2);
  492. }
  493.  
  494. .schedule-organizer-btn:hover::before {
  495.     opacity: 1;
  496. }
  497.  
  498. .schedule-organizer-btn:active {
  499.     transform: translateY(1px) scale(0.98);
  500.     box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2),
  501.                 inset 0 2px 4px rgba(0, 0, 0, 0.1);
  502. }
  503.  
  504. .schedule-organizer-btn.active {
  505.     background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  506.     box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2),
  507.                 0 4px 8px rgba(220, 38, 38, 0.1),
  508.                 inset 0 2px 4px rgba(255, 255, 255, 0.1);
  509. }
  510.  
  511. /* Dark theme support */
  512. .theme-dark .schedule-organizer-btn {
  513.     background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  514.     box-shadow: 0 2px 4px rgba(30, 64, 175, 0.3),
  515.                 0 4px 8px rgba(30, 64, 175, 0.2),
  516.                 inset 0 2px 4px rgba(255, 255, 255, 0.05);
  517. }
  518.  
  519. .theme-dark .schedule-organizer-btn:hover {
  520.     box-shadow: 0 4px 12px rgba(30, 64, 175, 0.4),
  521.                 0 8px 16px rgba(30, 64, 175, 0.3),
  522.                 inset 0 2px 4px rgba(255, 255, 255, 0.1);
  523. }
  524.  
  525. .theme-dark .schedule-organizer-btn.active {
  526.     background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
  527. }
  528.  
  529. .schedule-summary.theme-dark {
  530.     background: linear-gradient(45deg, #1a1a2e, #232338);
  531.     border-color: #2e2e4a;
  532.     color: #e0e0ff;
  533.     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  534.     margin: 7px auto 0;
  535. }
  536.  
  537. /* Dark theme loading overlay */
  538.  
  539. #newTable.theme-dark {
  540.     background: #151b30;
  541.     border-color: #2e2e4a;
  542.     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  543.     margin: 0;
  544. }
  545.  
  546. #newTable.theme-dark thead tr {
  547.     background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  548.     color: #ffffff;
  549.     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  550. }
  551.  
  552. #newTable.theme-dark th {
  553.     border-left: 1px solid rgba(255, 255, 255, 0.2);
  554.     background: transparent;
  555. }
  556.  
  557. #newTable.theme-dark th::after {
  558.     background: rgba(255, 255, 255, 0.2);
  559. }
  560.  
  561. #newTable.theme-dark th .day-name {
  562.     color: #ffffff;
  563.     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  564.     font-weight: 600;
  565.     font-size: 18.2px;
  566. }
  567.  
  568. #newTable.theme-dark tbody tr {
  569.     border-bottom: 1px solid #2e2e4a;
  570. }
  571.  
  572. #newTable.theme-dark tbody tr:hover {
  573.     background-color: #1c2238;
  574. }
  575.  
  576. #newTable.theme-dark td {
  577.     color: #e4e4e7;
  578. }
  579.  
  580. #newTable.theme-dark .break-cell {
  581.     background: #1c2238;
  582.     color: #b0b0c0;
  583.     border-color: #2e2e4a;
  584.     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  585. }
  586.  
  587. #newTable.theme-dark .lecture-cell {
  588.     background: #1c2238;
  589.     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  590. }
  591.  
  592. #newTable.theme-dark .lecture-cell strong {
  593.     color: #e4e4e7;
  594. }
  595.  
  596. #newTable.theme-dark .lecture-hall {
  597.     background: #1e2a4a;
  598.     color: #a0b8ff;
  599.     border-color: #2e3f6a;
  600. }
  601.  
  602. .download-group {
  603.     display: flex;
  604.     align-items: center;
  605.     gap: 8px;
  606.     background: var(--download-group-bg, #f0f0f0);
  607.     padding: 4px;
  608.     border-radius: 12px;
  609.     border: 1px solid var(--download-group-border, #e0e0e0);
  610.     transition: all 0.3s ease;
  611. }
  612.  
  613. .theme-dark .download-group {
  614.     --download-group-bg: #1f1f1f;
  615.     --download-group-border: #333;
  616. }
  617.  
  618. .download-group:hover {
  619.     border-color: var(--download-group-hover-border, #ccc);
  620.     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  621. }
  622.  
  623. .theme-dark .download-group:hover {
  624.     --download-group-hover-border: #444;
  625. }
  626.  
  627. .custom-checkbox-container {
  628.     display: flex;
  629.     align-items: center;
  630.     gap: 8px;
  631.     background: var(--checkbox-container-bg, #f5f5f5);
  632.     padding: 8px 16px;
  633.     border-radius: 8px;
  634.     cursor: pointer;
  635.     transition: all 0.3s ease;
  636.     margin: 0;
  637.     user-select: none;
  638. }
  639.  
  640. .theme-dark .custom-checkbox-container {
  641.     --checkbox-container-bg: #2d2d2d;
  642. }
  643.  
  644. .custom-checkbox-container:hover {
  645.     background: var(--checkbox-container-hover-bg, #e8e8e8);
  646. }
  647.  
  648. .theme-dark .custom-checkbox-container:hover {
  649.     --checkbox-container-hover-bg: #363636;
  650. }
  651.  
  652. .checkbox-wrapper {
  653.     position: relative;
  654.     width: 18px;
  655.     height: 18px;
  656. }
  657.  
  658. .checkbox-wrapper input {
  659.     position: absolute;
  660.     opacity: 0;
  661.     cursor: pointer;
  662.     height: 0;
  663.     width: 0;
  664. }
  665.  
  666. .checkmark {
  667.     position: absolute;
  668.     top: 0;
  669.     left: 0;
  670.     height: 18px;
  671.     width: 18px;
  672.     background-color: var(--checkmark-bg, #ffffff);
  673.     border: 2px solid var(--checkmark-border, #ccc);
  674.     border-radius: 4px;
  675.     transition: all 0.2s ease;
  676. }
  677.  
  678. .theme-dark .checkmark {
  679.     --checkmark-bg: #404040;
  680.     --checkmark-border: #666;
  681. }
  682.  
  683. .custom-checkbox-container:hover .checkmark {
  684.     border-color: var(--checkmark-hover-border, #4CAF50);
  685. }
  686.  
  687. .theme-dark .custom-checkbox-container:hover .checkmark {
  688.     --checkmark-hover-border: #888;
  689. }
  690.  
  691. .custom-checkbox-container input:checked ~ .checkmark {
  692.     background-color: #4CAF50;
  693.     border-color: #4CAF50;
  694. }
  695.  
  696. .custom-checkbox-container input:checked ~ .checkmark:after {
  697.     content: '';
  698.     position: absolute;
  699.     left: 5px;
  700.     top: 2px;
  701.     width: 4px;
  702.     height: 8px;
  703.     border: solid white;
  704.     border-width: 0 2px 2px 0;
  705.     transform: rotate(45deg);
  706. }
  707.  
  708. /* Remove mobile-specific styles and desktop-specific styles */
  709. .control-buttons {
  710.     display: flex;
  711.     gap: 8px;
  712.     align-items: center;
  713.     flex-wrap: wrap;
  714. }
  715.  
  716. /* Mobile-specific styles */
  717. .mobile-buttons-container {
  718.     width: 100%;
  719.     box-sizing: border-box;
  720.     direction: rtl;
  721. }
  722.  
  723. .mobile-action-button {
  724.     display: block;
  725.     width: 100%;
  726.     padding: 12px 16px;
  727.     background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  728.     color: #ffffff !important;  /* Force white text color */
  729.     border: none;
  730.     border-radius: 10px;
  731.     font-family: "Segoe UI", "Traditional Arabic", Tahoma, Geneva, Verdana, sans-serif;
  732.     font-size: 1em;
  733.     font-weight: 600;
  734.     text-align: center;
  735.     margin-bottom: 8px;
  736.     cursor: pointer;
  737.     text-decoration: none !important;  /* Prevent text decoration */
  738.     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
  739.                 inset 0 1px 2px rgba(255, 255, 255, 0.1);
  740.     transition: all 0.2s ease;
  741.     position: relative;
  742.     overflow: hidden;
  743.     -webkit-tap-highlight-color: transparent;  /* Remove tap highlight on mobile */
  744. }
  745.  
  746. .mobile-action-button::before {
  747.     content: '';
  748.     position: absolute;
  749.     top: 0;
  750.     left: 0;
  751.     width: 100%;
  752.     height: 100%;
  753.     background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  754.     opacity: 0;
  755.     transition: opacity 0.2s ease;
  756. }
  757.  
  758. .mobile-action-button:hover {
  759.     background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  760.     transform: translateY(-1px);
  761.     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15),
  762.                 inset 0 1px 2px rgba(255, 255, 255, 0.2);
  763.     color: #ffffff !important;
  764. }
  765.  
  766. .mobile-action-button:hover::before {
  767.     opacity: 1;
  768. }
  769.  
  770. .mobile-action-button:active {
  771.     transform: translateY(1px) scale(0.98);
  772.     background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  773.     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1),
  774.                 inset 0 2px 4px rgba(0, 0, 0, 0.2);
  775.     color: #ffffff !important;
  776. }
  777.  
  778. /* Dark theme support for mobile buttons */
  779. .theme-dark .mobile-action-button {
  780.     background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  781.     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2),
  782.                 inset 0 1px 2px rgba(255, 255, 255, 0.05);
  783.     color: #ffffff !important;
  784. }
  785.  
  786. .theme-dark .mobile-action-button:hover {
  787.     background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
  788.     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25),
  789.                 inset 0 1px 2px rgba(255, 255, 255, 0.1);
  790.     color: #ffffff !important;
  791. }
  792.  
  793. .theme-dark .mobile-action-button:active {
  794.     background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  795.     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2),
  796.                 inset 0 2px 4px rgba(0, 0, 0, 0.3);
  797.     color: #ffffff !important;
  798. }
  799.  
  800. /* Hide organize button on mobile */
  801. @media (max-width: 768px) {
  802.     .schedule-organizer-btn {
  803.         display: none !important;
  804.     }
  805. }`);
  806.     
  807. // Global variables
  808. let rows = [];
  809. const days = ['الأحد','الإثنين','الثلاثاء','الأربعاء','الخميس'];
  810. let newTable = {};
  811. let newTableNode;
  812. let on = false;
  813. let ramadanMode = false;
  814. let colors = ["Blue", "Black", "Crimson", "Green", "Grey", "OrangeRed", "Purple", "Red", "SpringGreen", "MediumTurquoise", "Navy", "GoldenRod"];
  815. let subject_colors = {};
  816. let color_index = 0;
  817. let currentTheme = 'light';
  818. let includeSummaryInDownload = false;
  819. let hastebinApiKey = 'c03fb6598a7bfcde22f4eed0931e691e2c4ed173f14f1cc598016d48cca00bb3287b230ddb5a300c931220ff2bf38ba8fccf946d6a7b4ada4ac8706d2eb3dc59';
  820.  
  821. // Time conversion functions
  822. function convertToRamadanTime(timeStr) {
  823.     // Split the time range
  824.     const [startTime, endTime] = timeStr.split(' - ');
  825.     
  826.     // Helper function to parse time
  827.     function parseTime(time) {
  828.         const [timeComponent, period] = time.trim().split(' ');
  829.         const [hourStr, minuteStr] = timeComponent.split(':');
  830.         let hour = parseInt(hourStr);
  831.         const minute = parseInt(minuteStr);
  832.         const isPM = period === 'م';
  833.         if (isPM && hour !== 12) hour += 12;
  834.         if (!isPM && hour === 12) hour = 0;
  835.         return { hour, minute, period };
  836.     }
  837.  
  838.     // Parse start and end times to detect practical sessions
  839.     const start = parseTime(startTime);
  840.     const end = parseTime(endTime);
  841.     
  842.     // Determine if it's a practical session based on duration (80 minutes)
  843.     const duration = ((end.hour - start.hour) * 60 + (end.minute - start.minute));
  844.     const isPractical = Math.abs(duration - 80) <= 5;  // Allow 5-minute flexibility
  845.  
  846.     // Theoretical lecture time mappings
  847.     const theoreticalMap = {
  848.         '08:00 ص': { start: '09:30 ص', end: '10:05 ص' },
  849.         '09:00 ص': { start: '10:10 ص', end: '10:45 ص' },
  850.         '10:00 ص': { start: '10:50 ص', end: '11:25 ص' },
  851.         '11:00 ص': { start: '11:30 ص', end: '12:05 م' },
  852.         '12:00 م': { start: '12:10 م', end: '12:45 م' },
  853.         '01:00 م': { start: '01:05 م', end: '01:40 م' },
  854.         '02:00 م': { start: '01:45 م', end: '02:20 م' },
  855.         '03:00 م': { start: '02:25 م', end: '03:00 م' },
  856.         '04:00 م': { start: '03:05 م', end: '03:40 م' },
  857.         '05:00 م': { start: '03:45 م', end: '04:20 م' },
  858.         '06:00 م': 'غير مستخدم',
  859.         '07:00 م': { start: '04:40 م', end: '05:15 م' }
  860.     };
  861.  
  862.     // Practical session time mappings
  863.     const practicalMap = {
  864.         '08:00 ص': { start: '09:30 ص', end: '10:20 ص' },
  865.         '09:30 ص': { start: '10:25 ص', end: '11:15 ص' },
  866.         '11:00 ص': { start: '11:20 ص', end: '12:10 م' },
  867.         '12:30 م': { start: '12:15 م', end: '01:05 م' },
  868.         '02:00 م': { start: '01:30 م', end: '02:20 م' },
  869.         '03:30 م': { start: '02:25 م', end: '03:15 م' },
  870.         '05:00 م': { start: '03:20 م', end: '04:10 م' }
  871.     };
  872.  
  873.     // Get the mapped time based on session type
  874.     const timeMap = isPractical ? practicalMap : theoreticalMap;
  875.     const mappedTime = timeMap[startTime];
  876.  
  877.     // Handle "not in use" case
  878.     if (mappedTime === 'غير مستخدم') {
  879.         return 'غير مستخدم';
  880.     }
  881.  
  882.     // If no mapping found, return original time
  883.     if (!mappedTime) {
  884.         return timeStr;
  885.     }
  886.  
  887.     return `${mappedTime.start} - ${mappedTime.end}`;
  888. }
  889.  
  890. // Start initialization
  891. if (document.readyState === 'loading') {
  892.     document.addEventListener('DOMContentLoaded', init);
  893. } else {
  894.     init();
  895. }
  896.  
  897. // Main initialization function
  898. function waitForElement(selector, callback, maxTries = 100) {
  899.     if (maxTries <= 0) {
  900.         console.log('Element not found: ' + selector);
  901.         return;
  902.     }
  903.     
  904.     const element = document.getElementById(selector);
  905.     if (element) {
  906.         callback(element);
  907.         return;
  908.     }
  909.     
  910.     setTimeout(() => {
  911.         waitForElement(selector, callback, maxTries - 1);
  912.     }, 100);
  913. }
  914.  
  915. // Remove the DOMContentLoaded listener and replace with this:
  916. function init() {
  917.     waitForElement('scheduleFrm:studScheduleTable', (element) => {
  918.         try {
  919.             initializeTableOrganizer();
  920.         } catch (error) {
  921.             console.error('Error initializing table organizer:', error);
  922.         }
  923.     });
  924. }
  925.  
  926. // Add error handling to the table check
  927. function initializeTableOrganizer() {
  928.     const originalTableNode = document.getElementById('scheduleFrm:studScheduleTable');
  929.     if (!originalTableNode) {
  930.         console.log('Schedule table not found');
  931.         return;
  932.     }
  933.  
  934.     // Check if mobile device
  935.     if (isMobileDevice()) {
  936.         // For mobile: Add mobile buttons to main content
  937.         const mainContent = document.querySelector('.main_content.col-md-12');
  938.         if (mainContent) {
  939.             const mobileButtons = createMobileButtons();
  940.             mainContent.insertBefore(mobileButtons, mainContent.firstChild);
  941.         }
  942.         return; // Don't add the regular organize button for mobile
  943.     }
  944.  
  945.     // Desktop version continues with existing code
  946.     let button = document.createElement('span');
  947.     let cell = document.createElement('td');
  948.     button.classList.add("schedule-organizer-btn");
  949.  
  950.     // Set initial button state
  951.     button.innerHTML = on ? "الجدول الاصلي" : "نظم الجدول";
  952.     if (on) {
  953.         button.classList.add("active");
  954.         originalTableNode.style.display = 'none';
  955.         if (newTableNode) {
  956.             newTableNode.style.display = null;
  957.         } else {
  958.             getTableInfo();
  959.             getNewTable();
  960.             appendTable();
  961.         }
  962.     } else {
  963.         if (newTableNode) {
  964.             newTableNode.style.display = 'none';
  965.         }
  966.     }
  967.  
  968.     // Append button to table
  969.     cell.appendChild(button);
  970.     const printLink = document.getElementById("scheduleFrm:printLink");
  971.     if (printLink && printLink.parentElement && printLink.parentElement.parentElement) {
  972.         printLink.parentElement.parentElement.appendChild(cell);
  973.     } else {
  974.         // Fallback: append to the table directly if printLink is not found
  975.         const firstRow = originalTableNode.querySelector('tr');
  976.         if (firstRow) {
  977.             firstRow.appendChild(cell);
  978.         }
  979.     }
  980.  
  981.     // Add click handler
  982.     button.onclick = function() {
  983.         if (on) {
  984.             on = false;
  985.             button.classList.remove("active");
  986.             button.innerHTML = "نظم الجدول";
  987.             originalTableNode.style.display = null;
  988.             newTableNode.style.display = 'none';
  989.             document.querySelectorAll('.schedule-summary').forEach(el => el.remove());
  990.         } else {
  991.             on = true;
  992.             button.classList.add("active");
  993.             button.innerHTML = "الجدول الاصلي";
  994.             originalTableNode.style.display = 'none';
  995.             if (newTableNode) {
  996.                 newTableNode.style.display = null;
  997.                 document.querySelectorAll('.schedule-summary').forEach(el => el.remove());
  998.                 let summary = createSummary();
  999.                 originalTableNode.insertAdjacentElement('afterend', summary);
  1000.             } else {
  1001.                 if (rows.length == 0) {
  1002.                     getTableInfo();
  1003.                 }
  1004.                 getNewTable();
  1005.                 appendTable();
  1006.             }
  1007.         }
  1008.     };
  1009. }
  1010.  
  1011. // Helper function to get deepest text
  1012. function endText(node) {
  1013.     if (!node.firstElementChild) {
  1014.         return node.innerHTML;
  1015.     } else {
  1016.         return endText(node.firstElementChild);
  1017.     }
  1018. }
  1019.  
  1020. // Get table information
  1021. function getTableInfo() {
  1022.     const row1 = document.querySelectorAll(".ROW1");
  1023.     const row2 = document.querySelectorAll(".ROW2");
  1024.     
  1025.     function processRows(nodes) {
  1026.         for (let i = 0; i < nodes.length; i++) {
  1027.             let row_obj = {};
  1028.             let row = nodes[i];
  1029.             let cells = row.children;
  1030.         
  1031.             for (let j = 0; j < cells.length; j++) {
  1032.                 try {
  1033.                     if (cells[j].dataset.th.includes("القاعة")) {
  1034.                         let headers = cells[j].dataset.th.split(/\s+/);
  1035.                         let lectures = cells[j].firstElementChild.firstElementChild.children;
  1036.                         row_obj["محاضرات"] = [];
  1037.         
  1038.                         for (let k = 0; k < lectures.length; k++) {
  1039.                             let data = {};
  1040.                             for (let l = 0; l < headers.length; l++) {
  1041.                                 let currentHeader = headers[l];
  1042.                                 data[currentHeader] = endText(lectures[k].children[l]).trim();
  1043.                                 if (data[currentHeader].includes("&nbsp")) {
  1044.                                     data[currentHeader] = data[currentHeader].split('; ')[1].trim().split(' ');
  1045.                                 }
  1046.                             }
  1047.                             row_obj["محاضرات"].push(data);
  1048.                         }
  1049.                     } else {
  1050.                         let cellName = cells[j].dataset.th.trim();
  1051.                         row_obj[cellName] = endText(cells[j]).trim();
  1052.                         if (row_obj[cellName].includes("&nbsp")) {
  1053.                             row_obj[cellName] = row_obj[cellName].split('&')[0].trim();
  1054.                         }
  1055.                     }
  1056.                 } catch(err) {
  1057.                     console.log(err);
  1058.                 }
  1059.             }
  1060.             rows.push(row_obj);
  1061.         }    
  1062.     }
  1063.  
  1064.     processRows(row1);
  1065.     processRows(row2);
  1066. }
  1067.  
  1068. function getNewTable() {
  1069.     try {
  1070.         // Populate the new table with the days and their lectures
  1071.         for (i in days) {
  1072.             newTable[days[i]] = [];
  1073.         }
  1074.         for (i in rows) {
  1075.             let subjectLectures = rows[i]['محاضرات'];
  1076.             for (j in subjectLectures) {
  1077.                 let lecture = subjectLectures[j];
  1078.                 let time = lecture['الوقت'];
  1079.                 
  1080.                 // Convert time to Ramadan schedule if ramadanMode is enabled
  1081.                 if (ramadanMode) {
  1082.                     time = convertToRamadanTime(time);
  1083.                 }
  1084.  
  1085.                 function value(t) {
  1086.                     let hour = parseInt(t.slice(0, 2), 10);
  1087.                     let minutes = parseInt(t.slice(3, 5), 10);
  1088.                     let total = (hour * 60) + minutes;
  1089.  
  1090.                     if (t.slice(0, 10).includes('م') && hour != 12) {
  1091.                         total += 720;
  1092.                     }
  1093.  
  1094.                     return total;
  1095.                 }
  1096.  
  1097.                 function getLectureEndTime(timeStr) {
  1098.                     let parts = timeStr.split(' - ');
  1099.                     return value(parts[1]);
  1100.                 }
  1101.  
  1102.                 function getLectureStartTime(timeStr) {
  1103.                     let parts = timeStr.split(' - ');
  1104.                     return value(parts[0]);
  1105.                 }
  1106.  
  1107.                 for (k in lecture["اليوم"]) {
  1108.                     let day = days[parseInt(lecture["اليوم"][k])-1];
  1109.                     newTable[day].push({
  1110.                         subject: rows[i]['اسم المقرر'],
  1111.                         activity: rows[i]['النشاط'],
  1112.                         time: time,
  1113.                         place: lecture['القاعة'],
  1114.                         section: rows[i]['الشعبة'],
  1115.                         value: value(time),
  1116.                         endTime: getLectureEndTime(time),
  1117.                         startTime: getLectureStartTime(time)
  1118.                     });
  1119.                     if (!(rows[i]['اسم المقرر'] in subject_colors)){
  1120.                         subject_colors[rows[i]['اسم المقرر']] = colors[color_index];
  1121.                         color_index++;
  1122.                     }
  1123.                 }
  1124.             }
  1125.         }
  1126.  
  1127.         // Sort lectures by time
  1128.         for (i in newTable) {
  1129.             newTable[i].sort((a, b) => a.startTime - b.startTime);
  1130.         }
  1131.  
  1132.         // Helper function to insert after index
  1133.         function insert_after(element, array, index) {
  1134.             let new_array = [];
  1135.             for (i = 0; i < array.length; i++) {
  1136.                 if (i == index+1) {
  1137.                     new_array.push(element);
  1138.                 }
  1139.                 new_array.push(array[i]);
  1140.             }
  1141.             return new_array;
  1142.         }
  1143.  
  1144.         // Add breaks between lectures
  1145.         for (d = 0; d < days.length; d++) {
  1146.             let edited_day = JSON.parse(JSON.stringify(newTable[days[d]]));
  1147.             let uni_day = newTable[days[d]];
  1148.             let skip = 0;
  1149.             for (l = 0; l < uni_day.length - 1; l++) {
  1150.                 let currentLectureEnd = uni_day[l].endTime;
  1151.                 let nextLectureStart = uni_day[l+1].startTime;
  1152.                 let breakTime = nextLectureStart - currentLectureEnd;
  1153.                 
  1154.                 if (breakTime > 10) {  // Only show breaks longer than 10 minutes
  1155.                     let break_obj = {
  1156.                         subject: null,
  1157.                         activity: "break",
  1158.                         time: null,
  1159.                         place: null,
  1160.                         value: breakTime
  1161.                     };
  1162.                     edited_day = insert_after(break_obj, edited_day, l+skip);
  1163.                     skip++;
  1164.                 }
  1165.             }
  1166.             newTable[days[d]] = edited_day;
  1167.         }
  1168.     } catch(err) {
  1169.         console.log(err);
  1170.     }
  1171. }
  1172.  
  1173. function getBreakText(hrs) {
  1174.     const getBreakIcon = (hrs) => {
  1175.         if (hrs >= 2) return '☕';
  1176.         if (hrs >= 1) return '⏰';
  1177.         return '⌛';
  1178.     };
  1179.     
  1180.     // Round down if extra minutes are 10 or less
  1181.     const wholeHours = Math.floor(hrs);
  1182.     const extraMinutes = Math.round((hrs - wholeHours) * 60);
  1183.     const roundedHours = extraMinutes <= 10 ? wholeHours : hrs;
  1184.     
  1185.     const icon = getBreakIcon(roundedHours);
  1186.     let duration;
  1187.     
  1188.     if (roundedHours === 2) {
  1189.         duration = 'ساعتين';
  1190.     } else if (roundedHours > 2) {
  1191.         duration = `${Math.floor(roundedHours)} ساعات`;
  1192.     } else if (roundedHours >= 1) {
  1193.         duration = 'ساعة';
  1194.         if (roundedHours > 1) {
  1195.             const minutes = Math.round((roundedHours - 1) * 60);
  1196.             if (minutes > 10) {  // Only show minutes if more than 10
  1197.                 duration += ` و ${minutes} دقيقة`;
  1198.             }
  1199.         }
  1200.     } else {
  1201.         const minutes = Math.round(roundedHours * 60);
  1202.         duration = `${minutes} دقيقة`;
  1203.     }
  1204.     
  1205.     return `<div class="break-content">${icon} ${duration} استراحة</div>`;
  1206. }
  1207.  
  1208. function getActivityIcon(activity) {
  1209.     if (activity.includes('عملي')) return '🔬';
  1210.     if (activity.includes('نظري')) return '📚';
  1211.     return '📖';
  1212. }
  1213.  
  1214. function getActivityStyle(activity) {
  1215.     if (activity.includes('عملي')) return 'background: #9c27b0; color: white; border-radius: 4px; padding: 2px 6px;';
  1216.     if (activity.includes('نظري')) return 'background: #1976d2; color: white; border-radius: 4px; padding: 2px 6px;';
  1217.     return 'background: #757575; color: white; border-radius: 4px; padding: 2px 6px;';
  1218. }
  1219.  
  1220. function downloadAsPNG(event) {
  1221.     if (event) {
  1222.         event.preventDefault();
  1223.     }
  1224.     
  1225.     //Create and show loading overlay
  1226.     const loadingOverlay = document.createElement('div');
  1227.     loadingOverlay.className = 'loading-notification';
  1228.     
  1229.     loadingOverlay.innerHTML = `
  1230.         <div class="notification-content">
  1231.             <div class="modern-spinner"></div>
  1232.             <div class="notification-text">
  1233.                 <div class="notification-title">جار تحميل الصورة...</div>
  1234.                 <div class="notification-subtitle">يرجى الانتظار بينما نقوم بمعالجة الجدول</div>
  1235.             </div>
  1236.         </div>
  1237.     `;
  1238.     
  1239.     // Add styles for the notification
  1240.     const style = document.createElement('style');
  1241.     style.textContent = `
  1242.         .loading-notification {
  1243.             position: fixed;
  1244.             top: 20px;
  1245.             right: 20px;
  1246.             background: ${currentTheme === 'dark' ? '#1a1a1a' : '#ffffff'};
  1247.             border: 1px solid ${currentTheme === 'dark' ? '#333' : '#e0e0e0'};
  1248.             border-radius: 12px;
  1249.             padding: 16px;
  1250.             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  1251.             z-index: 10000;
  1252.             max-width: 300px;
  1253.             animation: slideIn 0.3s ease-out;
  1254.             backdrop-filter: blur(10px);
  1255.         }
  1256.  
  1257.         .notification-content {
  1258.             display: flex;
  1259.             align-items: center;
  1260.             gap: 12px;
  1261.         }
  1262.  
  1263.         .notification-text {
  1264.             flex: 1;
  1265.         }
  1266.  
  1267.         .notification-title {
  1268.             color: ${currentTheme === 'dark' ? '#ffffff' : '#000000'};
  1269.             font-weight: 600;
  1270.             margin-bottom: 4px;
  1271.         }
  1272.  
  1273.         .notification-subtitle {
  1274.             color: ${currentTheme === 'dark' ? '#888' : '#666'};
  1275.             font-size: 0.9em;
  1276.         }
  1277.  
  1278.         .modern-spinner {
  1279.             width: 24px;
  1280.             height: 24px;
  1281.             border: 3px solid ${currentTheme === 'dark' ? '#333' : '#f0f0f0'};
  1282.             border-top: 3px solid ${currentTheme === 'dark' ? '#4CAF50' : '#2196F3'};
  1283.             border-radius: 50%;
  1284.             animation: spin 1s linear infinite;
  1285.         }
  1286.  
  1287.         @keyframes spin {
  1288.             0% { transform: rotate(0deg); }
  1289.             100% { transform: rotate(360deg); }
  1290.         }
  1291.  
  1292.         @keyframes slideIn {
  1293.             from {
  1294.                 opacity: 0;
  1295.                 transform: translateX(100px);
  1296.             }
  1297.             to {
  1298.                 opacity: 1;
  1299.                 transform: translateX(0);
  1300.             }
  1301.         }
  1302.  
  1303.         @keyframes slideOut {
  1304.             from {
  1305.                 opacity: 1;
  1306.                 transform: translateX(0);
  1307.             }
  1308.             to {
  1309.                 opacity: 0;
  1310.                 transform: translateX(100px);
  1311.             }
  1312.         }
  1313.     `;
  1314.     
  1315.     document.head.appendChild(style);
  1316.     document.body.appendChild(loadingOverlay);
  1317.     
  1318.     const element = document.getElementById('newTable');
  1319.     const summary = document.querySelector('.schedule-summary');
  1320.     
  1321.     // Create filename based on mode
  1322.     const filename = ramadanMode ? 'الجدول_الدراسي_توقيت_رمضان.png' : 'الجدول_الدراسي.png';
  1323.     
  1324.     // Calculate the maximum width needed
  1325.     const tableWidth = element.offsetWidth;
  1326.     const summaryWidth = summary ? summary.offsetWidth : 0;
  1327.     const maxWidth = Math.max(tableWidth, summaryWidth);
  1328.     
  1329.     const wrapper = document.createElement('div');
  1330.     wrapper.style.cssText = `
  1331.         background: ${currentTheme === 'dark' ? '#1a1a1a' : '#ffffff'};
  1332.         direction: rtl;
  1333.         width: ${maxWidth}px;
  1334.         margin: 0;
  1335.         border-radius: 0;
  1336.         display: flex;
  1337.         flex-direction: column;
  1338.         align-items: stretch;
  1339.         position: relative;
  1340.     `;
  1341.     
  1342.     // Only include summary if checkbox is checked
  1343.     if (includeSummaryInDownload && summary) {
  1344.         const summaryClone = summary.cloneNode(true);
  1345.         // Remove control buttons from summary clone
  1346.         const controlButtons = summaryClone.querySelector('.control-buttons');
  1347.         if (controlButtons) controlButtons.remove();
  1348.         
  1349.         // Remove theme buttons and download button
  1350.         summaryClone.querySelectorAll('.control-button, .theme-btn, label').forEach(btn => btn.remove());
  1351.         
  1352.         // Ensure summary maintains consistent width
  1353.         summaryClone.style.cssText = `
  1354.             width: ${maxWidth}px;
  1355.             margin: 0;
  1356.             box-sizing: border-box;
  1357.             background: ${currentTheme === 'dark' ? '#1a1a1a' : '#ffffff'};
  1358.         `;
  1359.         
  1360.         wrapper.appendChild(summaryClone);
  1361.     }
  1362.     
  1363.     const tableClone = element.cloneNode(true);
  1364.     
  1365.     // If in Ramadan mode, find a suitable cell for the indicator
  1366.     if (ramadanMode) {
  1367.         // Try to find an empty or break cell in the middle of the table
  1368.         const rows = tableClone.querySelectorAll('tbody tr');
  1369.         let indicatorPlaced = false;
  1370.         
  1371.         // Calculate middle row
  1372.         const middleRowIndex = Math.floor(rows.length / 2);
  1373.         
  1374.         // First try: Look in the middle row
  1375.         if (rows[middleRowIndex]) {
  1376.             const cells = rows[middleRowIndex].children;
  1377.             for (let cell of cells) {
  1378.                 if (!cell.innerHTML.trim() || cell.innerHTML.includes('استراحة')) {
  1379.                     const ramadanIndicator = `
  1380.                         <div style="
  1381.                             background: ${currentTheme === 'dark' ? 
  1382.                                 'linear-gradient(135deg, #2d1f3d 0%, #1a1a2e 100%)' : 
  1383.                                 'linear-gradient(135deg, #f3e5f5 0%, #e8eaf6 100%)'
  1384.                             };
  1385.                             padding: 12px 24px;
  1386.                             border-radius: 12px;
  1387.                             display: flex;
  1388.                             align-items: center;
  1389.                             justify-content: center;
  1390.                             gap: 12px;
  1391.                             font-size: 1.2em;
  1392.                             box-shadow: ${currentTheme === 'dark' ? 
  1393.                                 '0 4px 15px rgba(123, 97, 255, 0.2), 0 0 20px rgba(123, 97, 255, 0.1)' : 
  1394.                                 '0 4px 15px rgba(156, 39, 176, 0.1), 0 0 20px rgba(156, 39, 176, 0.05)'
  1395.                             };
  1396.                             margin: 10px auto;
  1397.                             width: fit-content;
  1398.                             border: 2px solid ${currentTheme === 'dark' ? '#4a3f6b' : '#e1bee7'};
  1399.                             animation: ramadanGlow 2s ease-in-out infinite;
  1400.                         ">
  1401.                             <span style="font-size: 1.4em;">🌙</span>
  1402.                             <span style="
  1403.                                 color: ${currentTheme === 'dark' ? '#fff' : '#000'};
  1404.                                 font-weight: 500;
  1405.                             ">توقيت رمضان</span>
  1406.                         </div>
  1407.                         <style>
  1408.                             @keyframes ramadanGlow {
  1409.                                 0%, 100% {
  1410.                                     box-shadow: ${currentTheme === 'dark' ? 
  1411.                                         '0 4px 15px rgba(123, 97, 255, 0.2), 0 0 20px rgba(123, 97, 255, 0.1)' : 
  1412.                                         '0 4px 15px rgba(156, 39, 176, 0.1), 0 0 20px rgba(156, 39, 176, 0.05)'
  1413.                                     };
  1414.                                 }
  1415.                                 50% {
  1416.                                     box-shadow: ${currentTheme === 'dark' ? 
  1417.                                         '0 4px 20px rgba(123, 97, 255, 0.3), 0 0 30px rgba(123, 97, 255, 0.2)' : 
  1418.                                         '0 4px 20px rgba(156, 39, 176, 0.2), 0 0 30px rgba(156, 39, 176, 0.1)'
  1419.                                     };
  1420.                                 }
  1421.                             }
  1422.                         </style>
  1423.                     `;
  1424.                     cell.innerHTML = ramadanIndicator;
  1425.                     indicatorPlaced = true;
  1426.                     break;
  1427.                 }
  1428.             }
  1429.         }
  1430.         
  1431.         // Second try: Look in adjacent rows if middle row didn't work
  1432.         if (!indicatorPlaced) {
  1433.             for (let offset = 1; offset <= 2; offset++) {
  1434.                 const rowsToTry = [
  1435.                     rows[middleRowIndex - offset],
  1436.                     rows[middleRowIndex + offset]
  1437.                 ];
  1438.                 
  1439.                 for (const row of rowsToTry) {
  1440.                     if (!row) continue;
  1441.                     
  1442.                     const cells = row.children;
  1443.                     for (let cell of cells) {
  1444.                         if (!cell.innerHTML.trim() || cell.innerHTML.includes('استراحة')) {
  1445.                             const ramadanIndicator = `
  1446.                                 <div style="
  1447.                                     background: ${currentTheme === 'dark' ? 
  1448.                                         'linear-gradient(135deg, #2d1f3d 0%, #1a1a2e 100%)' : 
  1449.                                         'linear-gradient(135deg, #f3e5f5 0%, #e8eaf6 100%)'
  1450.                                     };
  1451.                                     padding: 12px 24px;
  1452.                                     border-radius: 12px;
  1453.                                     display: flex;
  1454.                                     align-items: center;
  1455.                                     justify-content: center;
  1456.                                     gap: 12px;
  1457.                                     font-size: 1.2em;
  1458.                                     box-shadow: ${currentTheme === 'dark' ? 
  1459.                                         '0 4px 15px rgba(123, 97, 255, 0.2), 0 0 20px rgba(123, 97, 255, 0.1)' : 
  1460.                                         '0 4px 15px rgba(156, 39, 176, 0.1), 0 0 20px rgba(156, 39, 176, 0.05)'
  1461.                                     };
  1462.                                     margin: 10px auto;
  1463.                                     width: fit-content;
  1464.                                     border: 2px solid ${currentTheme === 'dark' ? '#4a3f6b' : '#e1bee7'};
  1465.                                     animation: ramadanGlow 2s ease-in-out infinite;
  1466.                                 ">
  1467.                                     <span style="font-size: 1.4em;">🌙</span>
  1468.                                     <span style="
  1469.                                         color: ${currentTheme === 'dark' ? '#fff' : '#000'};
  1470.                                         font-weight: 500;
  1471.                                     ">توقيت رمضان</span>
  1472.                                 </div>
  1473.                                 <style>
  1474.                                     @keyframes ramadanGlow {
  1475.                                         0%, 100% {
  1476.                                             box-shadow: ${currentTheme === 'dark' ? 
  1477.                                                 '0 4px 15px rgba(123, 97, 255, 0.2), 0 0 20px rgba(123, 97, 255, 0.1)' : 
  1478.                                                 '0 4px 15px rgba(156, 39, 176, 0.1), 0 0 20px rgba(156, 39, 176, 0.05)'
  1479.                                             };
  1480.                                         }
  1481.                                         50% {
  1482.                                             box-shadow: ${currentTheme === 'dark' ? 
  1483.                                                 '0 4px 20px rgba(123, 97, 255, 0.3), 0 0 30px rgba(123, 97, 255, 0.2)' : 
  1484.                                                 '0 4px 20px rgba(156, 39, 176, 0.2), 0 0 30px rgba(156, 39, 176, 0.1)'
  1485.                                             };
  1486.                                         }
  1487.                                     }
  1488.                                 </style>
  1489.                             `;
  1490.                             cell.innerHTML = ramadanIndicator;
  1491.                             indicatorPlaced = true;
  1492.                             break;
  1493.                         }
  1494.                     }
  1495.                     if (indicatorPlaced) break;
  1496.                 }
  1497.                 if (indicatorPlaced) break;
  1498.             }
  1499.         }
  1500.     }
  1501.     
  1502.     wrapper.appendChild(tableClone);
  1503.     document.body.appendChild(wrapper);
  1504.     
  1505.     // Enhanced style preservation
  1506.     const preserveStyles = (element) => {
  1507.         const computedStyle = window.getComputedStyle(element);
  1508.         const importantStyles = [
  1509.             'font-family', 'font-size', 'font-weight', 'color', 'background',
  1510.             'padding', 'margin', 'border', 'text-align', 'direction',
  1511.             'display', 'width', 'height', 'border-radius', 'box-shadow',
  1512.             'grid-template-columns', 'gap', 'background-color', 'border-color',
  1513.             'border-width', 'border-style', 'line-height', 'letter-spacing',
  1514.             'text-decoration', 'text-transform', 'vertical-align', 'position',
  1515.             'top', 'left', 'right', 'bottom', 'z-index', 'opacity',
  1516.             'transform', 'transition', 'box-sizing', 'overflow'
  1517.         ];
  1518.         
  1519.         let styleString = importantStyles.map(property => 
  1520.             `${property}:${computedStyle.getPropertyValue(property)}`
  1521.         ).join(';');
  1522.         
  1523.         // Preserve existing inline styles
  1524.         if (element.style.cssText) {
  1525.             styleString += ';' + element.style.cssText;
  1526.         }
  1527.         
  1528.         element.style.cssText = styleString;
  1529.         Array.from(element.children).forEach(preserveStyles);
  1530.     };
  1531.     
  1532.     preserveStyles(wrapper);
  1533.     
  1534.     // Use fixed scale of 7
  1535.     const scale = 7;
  1536.     
  1537.     html2canvas(wrapper, {
  1538.         backgroundColor: '#ffffff',
  1539.         scale: scale,
  1540.         logging: false,
  1541.         useCORS: true,
  1542.         allowTaint: true,
  1543.         width: wrapper.offsetWidth,
  1544.         height: wrapper.offsetHeight,
  1545.         onclone: function(clonedDoc) {
  1546.             const clonedWrapper = clonedDoc.body.lastChild;
  1547.             preserveStyles(clonedWrapper);
  1548.         }
  1549.     }).then(canvas => {
  1550.         wrapper.remove();
  1551.         // Add slide out animation before removing
  1552.         loadingOverlay.style.animation = 'slideOut 0.3s ease-in';
  1553.         setTimeout(() => {
  1554.             loadingOverlay.remove();
  1555.             style.remove();
  1556.         }, 300);
  1557.         
  1558.         try {
  1559.             const image = canvas.toDataURL('image/png', 1.0);
  1560.             const link = document.createElement('a');
  1561.             link.download = filename;  // Use the new filename
  1562.             link.href = image;
  1563.             
  1564.             document.body.appendChild(link);
  1565.             link.click();
  1566.             document.body.removeChild(link);
  1567.         } catch (error) {
  1568.             console.error('Error saving image:', error);
  1569.             alert('خطأ في حفظ الصورة. يرجى المحاولة مرة أخرى.');
  1570.         }
  1571.     }).catch(error => {
  1572.         console.error('Error generating PNG:', error);
  1573.         // Add slide out animation before removing
  1574.         loadingOverlay.style.animation = 'slideOut 0.3s ease-in';
  1575.         setTimeout(() => {
  1576.             loadingOverlay.remove();
  1577.             style.remove();
  1578.         }, 300);
  1579.         
  1580.         if (error.message.includes('memory')) {
  1581.             alert('خطأ: الصورة كبيرة جداً. جاري المحاولة بجودة أقل...');
  1582.             setTimeout(() => {
  1583.                 html2canvas(wrapper, {
  1584.                     backgroundColor: '#ffffff',
  1585.                     scale: 6,  
  1586.                     logging: false,
  1587.                     useCORS: true,
  1588.                     allowTaint: true,
  1589.                     width: wrapper.offsetWidth,
  1590.                     height: wrapper.offsetHeight
  1591.                 }).then(canvas => {
  1592.                     const image = canvas.toDataURL('image/png', 1.0);
  1593.                     const link = document.createElement('a');
  1594.                     link.download = filename;  // Use the new filename
  1595.                     link.href = image;
  1596.                     document.body.appendChild(link);
  1597.                     link.click();
  1598.                     document.body.removeChild(link);
  1599.                 });
  1600.             }, 100);
  1601.         } else {
  1602.             alert('حدث خطأ أثناء إنشاء الصورة. يرجى المحاولة مرة أخرى.');
  1603.         }
  1604.         wrapper.remove();
  1605.     });
  1606. }
  1607.  
  1608. function toggleTheme(theme) {
  1609.     currentTheme = theme;
  1610.     const table = document.getElementById('newTable');
  1611.     if (!table) return;
  1612.     
  1613.     table.classList.remove('theme-light', 'theme-dark');
  1614.     table.classList.add(`theme-${theme}`);
  1615.     
  1616.     // Update summary section theme
  1617.     const summary = document.querySelector('.schedule-summary');
  1618.     if (summary) {
  1619.         summary.classList.remove('theme-light', 'theme-dark');
  1620.         summary.classList.add(`theme-${theme}`);
  1621.         
  1622.         // Update button states
  1623.         const lightThemeBtn = summary.querySelector('#lightThemeBtn');
  1624.         const darkThemeBtn = summary.querySelector('#darkThemeBtn');
  1625.         
  1626.         if (lightThemeBtn) {
  1627.             lightThemeBtn.classList.toggle('active', theme === 'light');
  1628.         }
  1629.         if (darkThemeBtn) {
  1630.             darkThemeBtn.classList.toggle('active', theme === 'dark');
  1631.         }
  1632.     }
  1633. }
  1634.  
  1635. function createSummary() {
  1636.     let summary = document.createElement('div');
  1637.     summary.classList.add('schedule-summary', `theme-${currentTheme}`);
  1638.     
  1639.     let totalHours = 0;
  1640.     let subjectCount = new Set();
  1641.     let daysWithClasses = new Set();
  1642.     let maxLectures = 0;
  1643.     let busyDays = [];
  1644.     
  1645.     for (let day in newTable) {
  1646.         let dayLectures = newTable[day].filter(slot => slot.activity !== "break");
  1647.         if (dayLectures.length > 0) {
  1648.             daysWithClasses.add(day);
  1649.             if (dayLectures.length > maxLectures) {
  1650.                 maxLectures = dayLectures.length;
  1651.                 busyDays = [day];
  1652.             } else if (dayLectures.length === maxLectures) {
  1653.                 busyDays.push(day);
  1654.             }
  1655.         }
  1656.         
  1657.         dayLectures.forEach(slot => {
  1658.             totalHours += (slot.time ? 1 : 0);
  1659.             subjectCount.add(slot.subject);
  1660.         });
  1661.     }
  1662.  
  1663.     // Desktop UI
  1664.     summary.innerHTML = `
  1665.         <div style="display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;">
  1666.             <div style="display: flex; align-items: center; gap: 4px; background: ${currentTheme === 'dark' ? '#1a2f4d' : '#e3f2fd'}; padding: 8px 16px; border-radius: 8px;">
  1667.                 <span style="font-weight: 500;">📚 المواد:</span>
  1668.                 <span>${subjectCount.size}</span>
  1669.             </div>
  1670.             <div style="display: flex; align-items: center; gap: 4px; background: ${currentTheme === 'dark' ? '#2d1f3d' : '#f3e5f5'}; padding: 8px 16px; border-radius: 8px;">
  1671.                 <span style="font-weight: 500;">⏰ الساعات:</span>
  1672.                 <span>${totalHours}</span>
  1673.             </div>
  1674.             <div style="display: flex; align-items: center; gap: 4px; background: ${currentTheme === 'dark' ? '#1f3d2d' : '#e8f5e9'}; padding: 8px 16px; border-radius: 8px;">
  1675.                 <span style="font-weight: 500;">📅 أيام الدراسة:</span>
  1676.                 <span>${daysWithClasses.size}</span>
  1677.             </div>
  1678.             <div style="display: flex; align-items: center; gap: 4px; background: ${currentTheme === 'dark' ? '#3d2d1f' : '#fff3e0'}; padding: 8px 16px; border-radius: 8px;">
  1679.                 <span style="font-weight: 500;">📊 اليوم الأكثر:</span>
  1680.                 <span>${busyDays.join(', ')} (${maxLectures})</span>
  1681.             </div>
  1682.             <div class="control-buttons">
  1683.                 <button class="control-button theme-btn ${currentTheme === 'light' ? 'active' : ''}" id="lightThemeBtn">
  1684.                     ☀️ فاتح
  1685.                 </button>
  1686.                 <button class="control-button theme-btn ${currentTheme === 'dark' ? 'active' : ''}" id="darkThemeBtn">
  1687.                     🌙 داكن
  1688.                 </button>
  1689.                 <button class="control-button ${ramadanMode ? 'active' : ''}" id="ramadanBtn">
  1690.                     🕌 توقيت رمضان
  1691.                 </button>
  1692.                 <div class="download-group">
  1693.                     <button class="control-button" id="downloadButton">
  1694.                         💾 تحميل كصورة
  1695.                     </button>
  1696.                     <label class="custom-checkbox-container">
  1697.                         <div class="checkbox-wrapper">
  1698.                             <input type="checkbox" id="includeSummaryCheckbox" ${includeSummaryInDownload ? 'checked' : ''}>
  1699.                             <span class="checkmark"></span>
  1700.                         </div>
  1701.                         <span>تضمين الملخص</span>
  1702.                     </label>
  1703.                 </div>
  1704.             </div>
  1705.         </div>
  1706.     `;
  1707.     
  1708.     setTimeout(() => {
  1709.         const downloadButton = summary.querySelector('#downloadButton');
  1710.         const lightThemeBtn = summary.querySelector('#lightThemeBtn');
  1711.         const darkThemeBtn = summary.querySelector('#darkThemeBtn');
  1712.         const ramadanBtn = summary.querySelector('#ramadanBtn');
  1713.         const includeSummaryCheckbox = summary.querySelector('#includeSummaryCheckbox');
  1714.         
  1715.         if (downloadButton) {
  1716.             downloadButton.addEventListener('click', downloadAsPNG);
  1717.         }
  1718.         
  1719.         if (lightThemeBtn) {
  1720.             lightThemeBtn.addEventListener('click', () => {
  1721.                 toggleTheme('light');
  1722.                 appendTable();
  1723.             });
  1724.         }
  1725.         
  1726.         if (darkThemeBtn) {
  1727.             darkThemeBtn.addEventListener('click', () => {
  1728.                 toggleTheme('dark');
  1729.                 appendTable();
  1730.             });
  1731.         }
  1732.         
  1733.         if (ramadanBtn) {
  1734.             ramadanBtn.addEventListener('click', () => {
  1735.                 ramadanMode = !ramadanMode;
  1736.                 ramadanBtn.classList.toggle('active');
  1737.                 getNewTable();
  1738.                 appendTable();
  1739.             });
  1740.         }
  1741.  
  1742.         if (includeSummaryCheckbox) {
  1743.             includeSummaryCheckbox.addEventListener('change', (e) => {
  1744.                 includeSummaryInDownload = e.target.checked;
  1745.             });
  1746.         }
  1747.     }, 0);
  1748.     
  1749.     return summary;
  1750. }
  1751.  
  1752. function appendTable() {
  1753.     // Remove any existing organized tables and summaries
  1754.     if (newTableNode) {
  1755.         newTableNode.remove();
  1756.     }
  1757.     document.querySelectorAll('.schedule-summary').forEach(el => el.remove());
  1758.  
  1759.     const originalTableNode = document.getElementById('scheduleFrm:studScheduleTable');
  1760.     
  1761.     // Continue with normal table creation
  1762.     let table = document.createElement('table');
  1763.     table.id = "newTable";
  1764.     table.classList.add('rowFlow', `theme-${currentTheme}`);
  1765.     table.cellPadding = '0';
  1766.     table.cellSpacing = '0';
  1767.     table.border = '1';
  1768.     
  1769.     // Create a wrapper div for the table
  1770.     const tableWrapper = document.createElement('div');
  1771.     tableWrapper.className = 'table-wrapper';
  1772.     
  1773.     originalTableNode.insertAdjacentElement('afterend', tableWrapper);
  1774.     tableWrapper.appendChild(table);
  1775.  
  1776.     let thead = document.createElement('thead');
  1777.     let tbody = document.createElement('tbody');
  1778.     table.appendChild(thead);
  1779.     table.appendChild(tbody);
  1780.  
  1781.     const dayNamesEn = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday'];
  1782.     days.forEach((day, i) => {
  1783.         let th = document.createElement('th');
  1784.         th.innerHTML = `
  1785.             <div class="day-name">${day}</div>
  1786.         `;
  1787.         th.classList.add('HEADING');
  1788.         th.scope = "col";
  1789.         thead.appendChild(th);
  1790.     });
  1791.  
  1792.     function maxDayLength(obj) {
  1793.         return Math.max(...Object.values(obj).map(day => day.length));
  1794.     }
  1795.  
  1796.     const maxLength = maxDayLength(newTable);
  1797.  
  1798.     // Create empty rows
  1799.     for (let i = 0; i < maxLength; i++) {
  1800.         let tr = document.createElement('tr');
  1801.         tbody.appendChild(tr);
  1802.         for (let j = 0; j < days.length; j++) {
  1803.             let td = document.createElement('td');
  1804.             tr.appendChild(td);
  1805.         }
  1806.     }
  1807.  
  1808.     let trs = tbody.children;
  1809.     days.forEach((day, i) => {
  1810.         let currentDay = newTable[day];
  1811.         currentDay.forEach((lecture, j) => {
  1812.             if (lecture.activity == "break") {
  1813.                 let hrs = lecture.value/60;
  1814.                 trs[j].children[i].innerHTML = `<div class="break-cell">${getBreakText(hrs)}</div>`;
  1815.             } else {
  1816.                 let subjectColor = subject_colors[lecture.subject];
  1817.                 // Adjust color for dark mode if needed
  1818.                 if (currentTheme === 'dark') {
  1819.                     // Make the color more visible in dark mode
  1820.                     subjectColor = adjustColorForDarkMode(subjectColor);
  1821.                 }
  1822.                 
  1823.                 let activityStyle = getActivityStyle(lecture.activity);
  1824.                 if (currentTheme === 'dark') {
  1825.                     activityStyle = activityStyle.replace('background: #9c27b0', 'background: #4a1259')
  1826.                         .replace('background: #1976d2', 'background: #1a3f6b')
  1827.                         .replace('background: #757575', 'background: #3d3d3d');
  1828.                 }
  1829.                 
  1830.                 let content = `<div style="margin-bottom: 2px;">
  1831.                     <strong style="font-size: 1.05em; color: ${currentTheme === 'dark' ? '#e4e4e7' : 'inherit'}">${lecture.subject}</strong>
  1832.                     <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px;">
  1833.                         <div style="text-align: right;">
  1834.                             <div style="${activityStyle}">
  1835.                                 ${getActivityIcon(lecture.activity)} ${lecture.activity}
  1836.                             </div>
  1837.                             <div style="background: ${currentTheme === 'dark' ? '#1a2f3a' : '#e8eaf6'}; border-radius: 6px; padding: 3px 4px; color: ${currentTheme === 'dark' ? '#8ebbff' : '#283593'}; display: inline-block; margin-top: 3px;">
  1838.                                 🔢 الشعبة: ${lecture.section}
  1839.                             </div>
  1840.                         </div>
  1841.                         <div style="text-align: left;">
  1842.                             <div style="font-weight: bold; color: ${currentTheme === 'dark' ? '#8ebbff' : '#1a237e'}; white-space: nowrap; font-size: 0.95em;">${formatTimeDisplay(lecture.time)}</div>
  1843.                             <div class="lecture-hall">🏛️ ${lecture.place}</div>
  1844.                         </div>
  1845.                     </div>
  1846.                  </div>`;
  1847.                      
  1848.                 trs[j].children[i].innerHTML = `<div class="lecture-cell" style="border-left-color: ${subjectColor};">${content}</div>`;
  1849.             }
  1850.         });
  1851.     });
  1852.  
  1853.     newTableNode = table;
  1854.     let summary = createSummary();
  1855.     summary.style.cssText = `
  1856.         width: 100%;
  1857.         max-width: 1100px;
  1858.         margin: 5px auto;
  1859.         overflow-x: auto;
  1860.         display: block;
  1861.     `;
  1862.     originalTableNode.insertAdjacentElement('afterend', summary);
  1863. }
  1864.  
  1865. // Helper function to adjust colors for dark mode
  1866. function adjustColorForDarkMode(color) {
  1867.     // Convert color to RGB if it's a named color
  1868.     let tempDiv = document.createElement('div');
  1869.     tempDiv.style.color = color;
  1870.     document.body.appendChild(tempDiv);
  1871.     let rgbColor = window.getComputedStyle(tempDiv).color;
  1872.     document.body.removeChild(tempDiv);
  1873.     
  1874.     // Parse RGB values
  1875.     let rgb = rgbColor.match(/\d+/g).map(Number);
  1876.     
  1877.     // Calculate luminance
  1878.     let luminance = (0.299 * rgb[0] + 0.587 * rgb[1] + 0.114 * rgb[2]) / 255;
  1879.     
  1880.     // For very dark colors (especially black or near-black)
  1881.     if (luminance < 0.2) {
  1882.         // Convert to a light gray-blue tint
  1883.         return `rgb(176, 196, 222)`; // Light steel blue
  1884.     }
  1885.     
  1886.     // For dark colors
  1887.     if (luminance < 0.5) {
  1888.         // Increase brightness more significantly
  1889.         let adjustedRgb = rgb.map(value => {
  1890.             return Math.min(255, value + 80);
  1891.         });
  1892.         return `rgb(${adjustedRgb.join(',')})`;
  1893.     }
  1894.     
  1895.     // For already light colors, just slight adjustment
  1896.     let adjustedRgb = rgb.map(value => {
  1897.         return Math.min(255, value + 40);
  1898.     });
  1899.     
  1900.     return `rgb(${adjustedRgb.join(',')})`;
  1901. }
  1902.  
  1903. // Add this helper function before appendTable()
  1904. function formatTimeDisplay(timeStr) {
  1905.     // Split the time range
  1906.     const [startTime, endTime] = timeStr.split(' - ');
  1907.     
  1908.     // Split each time into components
  1909.     const [startTimeComponent, startPeriod] = startTime.trim().split(' ');
  1910.     const [endTimeComponent, endPeriod] = endTime.trim().split(' ');
  1911.     
  1912.     // If both periods are the same, show it only once at the end
  1913.     if (startPeriod === endPeriod) {
  1914.         return `${startTimeComponent} - ${endTimeComponent} ${startPeriod}`;
  1915.     }
  1916.     
  1917.     // If periods are different, keep both but make it more compact
  1918.     return `${startTimeComponent}${startPeriod} - ${endTimeComponent}${endPeriod}`;
  1919. }
  1920.  
  1921. // Add mobile detection function
  1922. function isMobileDevice() {
  1923.     return (window.innerWidth <= 768);
  1924. }
  1925.  
  1926. // Add notification function
  1927. function showNotification(title, subtitle, type = 'success', duration = 3000) {
  1928.     const notification = document.createElement('div');
  1929.     notification.className = 'loading-notification';
  1930.     
  1931.     // Set icon based on type
  1932.     const icon = type === 'success' ? '✅' : type === 'error' ? '❌' : '⚠️';
  1933.     
  1934.     notification.innerHTML = `
  1935.         <div class="notification-content">
  1936.             <div class="notification-icon">${icon}</div>
  1937.             <div class="notification-text">
  1938.                 <div class="notification-title">${title}</div>
  1939.                 ${subtitle ? `<div class="notification-subtitle">${subtitle}</div>` : ''}
  1940.             </div>
  1941.         </div>
  1942.     `;
  1943.     
  1944.     // Add styles for the notification
  1945.     const style = document.createElement('style');
  1946.     style.textContent = `
  1947.         .loading-notification {
  1948.             position: fixed;
  1949.             top: 20px;
  1950.             right: 20px;
  1951.             background: ${currentTheme === 'dark' ? '#1a1a1a' : '#ffffff'};
  1952.             border: 1px solid ${currentTheme === 'dark' ? '#333' : '#e0e0e0'};
  1953.             border-radius: 12px;
  1954.             padding: 16px;
  1955.             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  1956.             z-index: 10000;
  1957.             max-width: 300px;
  1958.             animation: slideIn 0.3s ease-out;
  1959.             backdrop-filter: blur(10px);
  1960.         }
  1961.  
  1962.         .notification-content {
  1963.             display: flex;
  1964.             align-items: center;
  1965.             gap: 12px;
  1966.         }
  1967.  
  1968.         .notification-icon {
  1969.             font-size: 24px;
  1970.             line-height: 1;
  1971.         }
  1972.  
  1973.         .notification-text {
  1974.             flex: 1;
  1975.         }
  1976.  
  1977.         .notification-title {
  1978.             color: ${currentTheme === 'dark' ? '#ffffff' : '#000000'};
  1979.             font-weight: 600;
  1980.             margin-bottom: 4px;
  1981.         }
  1982.  
  1983.         .notification-subtitle {
  1984.             color: ${currentTheme === 'dark' ? '#888' : '#666'};
  1985.             font-size: 0.9em;
  1986.         }
  1987.  
  1988.         @keyframes slideIn {
  1989.             from {
  1990.                 opacity: 0;
  1991.                 transform: translateX(100px);
  1992.             }
  1993.             to {
  1994.                 opacity: 1;
  1995.                 transform: translateX(0);
  1996.             }
  1997.         }
  1998.  
  1999.         @keyframes slideOut {
  2000.             from {
  2001.                 opacity: 1;
  2002.                 transform: translateX(0);
  2003.             }
  2004.             to {
  2005.                 opacity: 0;
  2006.                 transform: translateX(100px);
  2007.             }
  2008.         }
  2009.     `;
  2010.     
  2011.     document.head.appendChild(style);
  2012.     document.body.appendChild(notification);
  2013.     
  2014.     // Remove notification after duration
  2015.     setTimeout(() => {
  2016.         notification.style.animation = 'slideOut 0.3s ease-in';
  2017.         setTimeout(() => {
  2018.             notification.remove();
  2019.             style.remove();
  2020.         }, 300);
  2021.     }, duration);
  2022. }
  2023.  
  2024. // Update copyScheduleJSON function
  2025. async function copyScheduleJSON() {
  2026.     try {
  2027.         if (rows.length === 0) {
  2028.             getTableInfo();
  2029.             getNewTable();
  2030.         }
  2031.  
  2032.         // Create a cleaned version of the schedule without breaks and time values
  2033.         const cleanedSchedule = {};
  2034.         for (const day in newTable) {
  2035.             cleanedSchedule[day] = newTable[day]
  2036.                 .filter(lecture => lecture.activity !== "break")
  2037.                 .map(lecture => ({
  2038.                     subject: lecture.subject,
  2039.                     activity: lecture.activity,
  2040.                     time: lecture.time,
  2041.                     place: lecture.place,
  2042.                     section: lecture.section
  2043.                 }));
  2044.         }
  2045.  
  2046.         // Create the final format
  2047.         const formattedData = {
  2048.             subjects: Array.from(new Set(rows.map(row => row['اسم المقرر']).filter(Boolean))),
  2049.             days: days,
  2050.             schedule: cleanedSchedule
  2051.         };
  2052.  
  2053.         const scheduleData = JSON.stringify(formattedData);
  2054.  
  2055.         // Try to create a Hastebin paste
  2056.         try {
  2057.             // Prepare headers with authentication if API key is available
  2058.             const headers = {
  2059.                 'Content-Type': 'text/plain'
  2060.             };
  2061.             
  2062.             // Add authorization header if API key is available
  2063.             if (hastebinApiKey) {
  2064.                 headers['Authorization'] = `Bearer ${hastebinApiKey}`;
  2065.             }
  2066.             
  2067.             // Using Hastebin API (hastebin.com)
  2068.             const hastebinResponse = await fetch('https://hastebin.com/documents', {
  2069.                 method: 'POST',
  2070.                 headers: headers,
  2071.                 body: scheduleData
  2072.             });
  2073.  
  2074.             if (!hastebinResponse.ok) {
  2075.                 throw new Error(`Hastebin creation failed: ${hastebinResponse.status}`);
  2076.             }
  2077.  
  2078.             const hasteData = await hastebinResponse.json();
  2079.             const hasteKey = hasteData.key;
  2080.  
  2081.             // Open the website with the hastebin key
  2082.             const baseUrl = 'https://jkc66.github.io/IU_Table_Organizer/cptable.html';
  2083.             window.open(`${baseUrl}?haste=${hasteKey}`, '_blank');
  2084.             showNotification('تم فتح منظم الجدول! ✨', 'تم نقل البيانات تلقائياً', 'success');
  2085.  
  2086.         } catch (hasteError) {
  2087.             console.error('Hastebin error:', hasteError);
  2088.             // If hastebin creation fails, fall back to copy method
  2089.             fallbackCopy(scheduleData);
  2090.         }
  2091.  
  2092.     } catch (error) {
  2093.         console.error('Processing error:', error);
  2094.         showNotification('حدث خطأ في معالجة الجدول ❌', 'جاري المحاولة بطريقة بديلة...', 'error');
  2095.         fallbackCopy(scheduleData);
  2096.     }
  2097. }
  2098.  
  2099. // New helper function for clipboard operations
  2100. function copyToClipboard(text) {
  2101.     // Try the modern Clipboard API first
  2102.     if (navigator.clipboard && window.isSecureContext) {
  2103.         navigator.clipboard.writeText(text)
  2104.             .then(() => {
  2105.                 console.log('Clipboard API: Copy successful');
  2106.                 return true;
  2107.             })
  2108.             .catch(err => {
  2109.                 console.error('Clipboard API failed:', err);
  2110.                 return fallbackCopyToClipboard(text);
  2111.             });
  2112.     } else {
  2113.         return fallbackCopyToClipboard(text);
  2114.     }
  2115. }
  2116.  
  2117. function fallbackCopyToClipboard(text) {
  2118.     const textarea = document.createElement('textarea');
  2119.     textarea.value = text;
  2120.     document.body.appendChild(textarea);
  2121.     textarea.select();
  2122.     try {
  2123.         const success = document.execCommand('copy');
  2124.         console.log('Fallback copy success:', success);
  2125.         return success;
  2126.     } catch (e) {
  2127.         console.error('Fallback copy failed:', e);
  2128.         return false;
  2129.     } finally {
  2130.         document.body.removeChild(textarea);
  2131.     }
  2132. }
  2133.  
  2134. // Update fallback copy to use new helper
  2135. function fallbackCopy(scheduleData) {
  2136.     console.log('Entering fallback copy with data length:', scheduleData.length);
  2137.     const success = copyToClipboard(scheduleData);
  2138.     
  2139.     if (success) {
  2140.         showNotification('تم نسخ البيانات بنجاح! ✨', 'يرجى فتح موقع منظم الجدول ولصق البيانات هناك', 'success');
  2141.     } else {
  2142.         showNotification('حدث خطأ أثناء النسخ ❌', 'يرجى المحاولة مرة أخرى لاحقاً', 'error');
  2143.     }
  2144.     
  2145.     // Open the website in a new tab
  2146.     window.open('https://jkc66.github.io/IU_Table_Organizer/cptable.html', '_blank');
  2147. }
  2148.  
  2149. // Add function to create mobile buttons
  2150. function createMobileButtons() {
  2151.     const mobileButtonsContainer = document.createElement('div');
  2152.     mobileButtonsContainer.className = 'mobile-buttons-container';
  2153.     mobileButtonsContainer.style.cssText = `
  2154.         display: flex;
  2155.         flex-direction: column;
  2156.         gap: 10px;
  2157.         padding: 15px;
  2158.         background: #f5f5f5;
  2159.         border-radius: 12px;
  2160.         margin: 10px 0;
  2161.         box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  2162.     `;
  2163.  
  2164.     // Create View Table button
  2165.     const viewTableButton = document.createElement('button');
  2166.     viewTableButton.className = 'mobile-action-button';
  2167.     viewTableButton.innerHTML = '📱 فتح منظم الجدول';
  2168.     viewTableButton.onclick = copyScheduleJSON;  // This will now handle both copying and redirecting
  2169.  
  2170.     mobileButtonsContainer.appendChild(viewTableButton);
  2171.  
  2172.     return mobileButtonsContainer;
  2173. }
  2174. }})();