UniSchedule/index.html at main · Mehrtek/UniSchedule · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>UniSchedule</title>
  <link rel="icon" type="image/svg+xml" href="src/images/icon.svg">


  <script src="src/js/docx.js"></script>
  <link rel="stylesheet" href="src/css/style.css">
</head>

<body class="flex flex-col min-h-screen">
  <div class="fixed inset-0 pointer-events-none opacity-[0.35]" aria-hidden="true">
    <div class="absolute -top-24 -left-24 w-[420px] h-[420px] rounded-full blur-3xl glow-blob-1"></div>
    <div class="absolute top-16 -right-28 w-[520px] h-[520px] rounded-full blur-3xl glow-blob-2"></div>
  </div>

  <header class="sticky top-0 z-50">
    <div class="glass border-b border-main">
      <div class="max-w-[95%] mx-auto px-4 sm:px-6 lg:px-8">
        <div class="h-16 flex items-center justify-between gap-4">
          <a href="#top" class="flex items-center gap-3">
            <img src="src/images/icon.svg" alt="UniSchedule Logo" class="logo-img w-9 h-9 object-contain">
            <div class="leading-tight">
              <div class="font-bold tracking-tight">UniSchedule</div>
              <div class="text-xs text-muted -mt-0.5">
              </div>
            </div>
          </a>


          <div class="flex items-center gap-2 flex-1 justify-center max-md:hidden">
            <button id="btnSeed" class="btn px-3 py-2 rounded-xl text-sm" title="Load demo data">Load Sample</button>
            <button id="btnSave" class="btn px-3 py-2 rounded-xl text-sm" title="Save to local storage">Save</button>
            <button id="btnLoad" class="btn px-3 py-2 rounded-xl text-sm" title="Import from JSON">Load</button>
            <input type="file" id="inputFile" class="hidden" accept=".json" title="Import from JSON">
            <button id="btnExportDocx" class="btn btn-primary px-3 py-2 rounded-xl text-sm" title="Download Word document">Export DOCX</button>
          </div>

          <div class="flex items-center gap-3">
            <div class="flex items-center gap-2">
              <span class="header-label text-xs font-bold uppercase tracking-widest text-muted2 mb-[-1px]">Themes</span>
              <div class="relative">
                <button id="btnThemeToggle" class="btn w-9 h-9 flex items-center justify-center rounded-full p-0 relative" title="Switch theme">
                  <svg class="w-5 h-5 theme-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
                  </svg>
                </button>

                <!-- Custom Vertical Dropdown (Android Volume Style) -->
                <div id="themeDropdown" class="theme-dropdown-menu hidden">
                  <div class="theme-dropdown-inner">
                    <button class="theme-opt" data-theme="onyx" title="Onyx (Dark)">
                      <svg class="w-4 h-4" 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>
                    <button class="theme-opt" data-theme="alabaster" title="Alabaster (Light)">
                      <svg class="w-4 h-4" 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 9H3m15.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>
                    </button>
                    <button class="theme-opt" data-theme="spectrum" title="Spectrum (Vibrant)">
                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </header>

  <main id="top" class="relative flex-1">


    <section id="generator" class="max-w-[95%] mx-auto px-4 sm:px-6 lg:px-8 pt-10 pb-16">
      <div class="grid xl:grid-cols-12 gap-6">
        <div class="xl:col-span-3 lg:col-span-4 space-y-6">
          <div class="glass rounded-3xl p-6 shadow-soft">
            <div class="flex items-start justify-between gap-3">
              <div>
                <div class="mt-1 text-xl font-black tracking-tight">Courses</div>
                <div class="mt-1 text-sm text-muted"> </div>
              </div>
              <div class="flex gap-2">
                <button id="btnAddCourse" class="btn btn-primary px-3 py-2 rounded-xl text-sm">Add</button>
              </div>
            </div>

            <div class="mt-4">
              <div class="flex gap-2">
                <input id="courseSearch" class="input" placeholder="Search courses (press /)" />
              </div>
            </div>

            <div class="mt-4 space-y-2" id="courseList" aria-live="polite"></div>

            <div class="mt-4 subtle-divider"></div>

            <div class="mt-4 flex flex-wrap gap-2">
              <button id="btnSortCourses" class="btn px-3 py-2 rounded-xl text-sm">Smart sort</button>
              <button id="btnClearSchedule" class="btn px-3 py-2 rounded-xl text-sm">Clear timetable</button>
              <button id="btnResetAll" class="btn btn-danger px-3 py-2 rounded-xl text-sm">Reset Data</button>
            </div>
          </div>


          <div class="glass rounded-3xl p-6 shadow-soft">
            <div class="flex items-start justify-between gap-3">
              <div>
                <div class="text-xs uppercase tracking-widest text-muted">Settings</div>
                <div class="mt-1 text-xl font-black tracking-tight">Week & hours</div>
                <div class="mt-1 text-sm text-muted">Tune the working day and the schedule horizon.</div>
              </div>
            </div>

            <div class="mt-4 grid grid-cols-2 gap-3">
              <div>
                <label class="label" for="startHour">Start hour</label>
                <input id="startHour" type="number" min="6" max="12" step="1" class="input mt-1" />
              </div>
              <div>
                <label class="label" for="endHour">End hour</label>
                <input id="endHour" type="number" min="13" max="22" step="1" class="input mt-1" />
              </div>
              <div class="col-span-2">
                <label class="label">Weekdays</label>
                <div class="mt-2 flex flex-wrap gap-2" id="dayChips"></div>

              </div>
            </div>

            <div class="mt-4 flex flex-wrap gap-2">
              <button id="btnApplySettings" class="btn btn-primary px-3 py-2 rounded-xl text-sm">Apply</button>
              <button id="btnAutoFix" class="btn px-3 py-2 rounded-xl text-sm">Auto-fix common issues</button>
            </div>
          </div>
        </div>

        <div class="xl:col-span-6 lg:col-span-8 space-y-6">
          <div class="glass rounded-3xl p-6 shadow-soft">
            <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
              <div>

                <div class="mt-1 text-xl font-black tracking-tight">Generated timetable</div>
                <div class="mt-1 text-sm text-muted" id="ttSummary">Generate to see results. Conflicts are avoided;
                  unplaceable sessions are listed.</div>
              </div>
              <button id="btnGenerate" class="btn btn-primary px-4 py-2 rounded-xl text-sm flex items-center gap-2">
                <svg class="w-4 h-4" 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>
                Generate
              </button>
            </div>

            <div class="mt-4">
              <div class="tt-wrap">
                <div class="tt-head tt-grid" id="ttHead"></div>
                <div class="tt-grid" id="ttBody"></div>
              </div>
            </div>


          </div>

        </div>

        <div class="xl:col-span-3 lg:col-span-12 space-y-6">
          <div class="glass rounded-3xl p-6 shadow-soft">
            <div class="flex items-start justify-between gap-3">
              <div>

                <div class="mt-1 text-xl font-black tracking-tight">Instructors</div>
                <div class="mt-1 text-sm text-muted">Add instructors and mark unavailable hours.</div>
              </div>
              <div class="flex gap-2">
                <button id="btnAddInstructor" class="btn btn-primary px-3 py-2 rounded-xl text-sm">Add</button>
              </div>
            </div>
            <div class="mt-4 grid grid-cols-2 gap-3">
              <div class="sm:col-span-2">
                <label class="label">Edit availability</label>
                <div class="custom-select-wrap mt-1" id="instructorSelectWrap">
                  <button id="instructorSelectBtn" class="input custom-select-trigger">
                    <span id="instructorSelectLabel">Select Instructor</span>
                    <svg class="w-4 h-4 opacity-40" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                  </button>
                  <div id="instructorSelectMenu" class="custom-select-menu hidden shadow-2xl"></div>
                </div>
                <!-- Hidden select for state compatibility -->
                <select id="instructorSelect" class="hidden" title="Select Instructor"></select>
              </div>
              <div>
                <button id="btnWorkingHours" class="btn w-full px-3 py-2 rounded-xl text-sm">Set working hours</button>
              </div>
              <div>
                <button id="btnMakeAllAvailable" class="btn w-full px-3 py-2 rounded-xl text-sm">Make all
                  available</button>
              </div>
            </div>

            <div class="mt-4">
              <div id="availabilityGrid" class="availability"></div>
            </div>

            <div class="mt-4 subtle-divider"></div>

            <div class="mt-4 space-y-2" id="instructorList" aria-live="polite"></div>
          </div>
        </div>


        </div>
      </div>
    </section>
  </main>

  <footer class="footer">
    <div class="max-w-[95%] mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex flex-col md:flex-row items-center justify-between gap-6 w-full">
        <div class="flex flex-col items-center md:items-start gap-2">
          <div class="dev-label">
            Designed & Developed by <span class="font-bold">Team Mehrtek</span>
          </div>
          <div class="flex items-center gap-4">
            <a href="https://www.instagram.com/nohanbaloch_7/" class="footer-link text-base">Nohan Baloch</a>
            <span class="text-muted2">&bull;</span>
            <a href="https://www.instagram.com/memonrafay9/" class="footer-link text-base">Rafay Ahmed Memon</a>
          </div>
        </div>

        <div class="flex flex-col items-center md:items-end gap-3">
          <a href="https://github.com/nohanbaloch/UniSchedule" target="_blank" rel="noopener" class="btn px-3 py-2 rounded-xl text-sm inline-flex items-center gap-2 text-muted hover:text-main transition-colors">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
            </svg>
            <span>GitHub</span>
          </a>
            <div class="text-xs text-muted2">
            &copy; 2026 Mehrtek. All rights reserved.
          </div>
        </div>
      </div>
    </div>
  </footer>

  <!-- Modals -->
  <div id="modalBackdrop" class="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
    <div class="modal">
      <div class="modal-header px-5 sm:px-6 py-4 flex items-start justify-between gap-3">
        <div>
          <div class="modal-kicker text-xs uppercase tracking-widest" id="modalKicker">Editor</div>
          <div class="modal-title mt-1 text-lg font-black tracking-tight" id="modalTitle">Modal</div>
        </div>
        <button id="btnCloseModal" class="btn px-3 py-2 rounded-xl text-sm">Close <span class="kbd ml-1">Esc</span></button>
      </div>

      <div class="p-5 sm:p-6" id="modalBody"></div>

      <div class="modal-footer px-5 sm:px-6 py-4 flex flex-col sm:flex-row gap-3 sm:items-center sm:justify-between">
        <div class="modal-hint text-xs" id="modalHint"></div>
        <div class="flex gap-2 justify-end">
          <button id="btnModalSecondary" class="btn px-3 py-2 rounded-xl text-sm">Cancel</button>
          <button id="btnModalPrimary" class="btn btn-primary px-3 py-2 rounded-xl text-sm">Save</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Toasts -->
  <div class="toast-wrap" id="toastWrap" aria-live="polite" aria-atomic="true"></div>

  <script type="module" src="src/js/main.js"></script>
</body>

</html>