Hugging Face's logo

Spaces:
MaroSamrah
/
study-manager
Running

App Files Community
MaroSamrah commited on
Commit
f4095a9
·
verified ·
1 Parent(s): 40e8751

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +743 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Study Manager
3
- emoji: 🐨
4
- colorFrom: purple
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: study-manager
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,743 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Study Manager</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .tab-content {
11
+ display: none;
12
+ }
13
+ .tab-content.active {
14
+ display: block;
15
+ animation: fadeIn 0.5s;
16
+ }
17
+ @keyframes fadeIn {
18
+ from { opacity: 0; }
19
+ to { opacity: 1; }
20
+ }
21
+ .progress-bar {
22
+ height: 20px;
23
+ border-radius: 10px;
24
+ background-color: #e0e0e0;
25
+ overflow: hidden;
26
+ }
27
+ .progress-fill {
28
+ height: 100%;
29
+ border-radius: 10px;
30
+ background-color: #4CAF50;
31
+ transition: width 0.3s ease;
32
+ }
33
+ .session-cell {
34
+ min-height: 60px;
35
+ position: relative;
36
+ }
37
+ .session-content {
38
+ position: absolute;
39
+ top: 0;
40
+ left: 0;
41
+ right: 0;
42
+ bottom: 0;
43
+ padding: 4px;
44
+ overflow: hidden;
45
+ text-overflow: ellipsis;
46
+ }
47
+ .draggable {
48
+ cursor: move;
49
+ }
50
+ .dropzone {
51
+ min-height: 60px;
52
+ border: 2px dashed #ccc;
53
+ border-radius: 5px;
54
+ margin-bottom: 10px;
55
+ padding: 10px;
56
+ }
57
+ .dropzone.highlight {
58
+ border-color: #4CAF50;
59
+ background-color: #f0fff0;
60
+ }
61
+ </style>
62
+ </head>
63
+ <body class="bg-gray-100 font-sans">
64
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
65
+ <header class="mb-8 text-center">
66
+ <h1 class="text-4xl font-bold text-indigo-700 mb-2">Study Manager</h1>
67
+ <p class="text-gray-600">Organize your academic life efficiently</p>
68
+ </header>
69
+
70
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden mb-8">
71
+ <div class="flex border-b border-gray-200">
72
+ <button class="tab-btn py-4 px-6 font-medium text-gray-600 hover:text-indigo-600 hover:bg-gray-50 transition duration-300 active" data-tab="tasks">
73
+ <i class="fas fa-tasks mr-2"></i>Tasks
74
+ </button>
75
+ <button class="tab-btn py-4 px-6 font-medium text-gray-600 hover:text-indigo-600 hover:bg-gray-50 transition duration-300" data-tab="lessons">
76
+ <i class="fas fa-book mr-2"></i>Lessons
77
+ </button>
78
+ <button class="tab-btn py-4 px-6 font-medium text-gray-600 hover:text-indigo-600 hover:bg-gray-50 transition duration-300" data-tab="weekly-plans">
79
+ <i class="fas fa-calendar-week mr-2"></i>Weekly Plans
80
+ </button>
81
+ <button class="tab-btn py-4 px-6 font-medium text-gray-600 hover:text-indigo-600 hover:bg-gray-50 transition duration-300" data-tab="timetable">
82
+ <i class="fas fa-calendar-alt mr-2"></i>Timetable
83
+ </button>
84
+ <button class="tab-btn py-4 px-6 font-medium text-gray-600 hover:text-indigo-600 hover:bg-gray-50 transition duration-300" data-tab="exams">
85
+ <i class="fas fa-file-alt mr-2"></i>Exams
86
+ </button>
87
+ </div>
88
+
89
+ <!-- Tasks Tab -->
90
+ <div id="tasks" class="tab-content active p-6">
91
+ <div class="mb-6">
92
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4">My Tasks</h2>
93
+ <div class="flex mb-4">
94
+ <input type="text" id="new-task" placeholder="Add a new task..." class="flex-grow px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
95
+ <button id="add-task" class="bg-indigo-600 text-white px-4 py-2 rounded-r-lg hover:bg-indigo-700 transition duration-300">
96
+ <i class="fas fa-plus mr-1"></i> Add
97
+ </button>
98
+ </div>
99
+ <div id="tasks-container" class="space-y-3">
100
+ <!-- Tasks will be added here -->
101
+ </div>
102
+ </div>
103
+ </div>
104
+
105
+ <!-- Lessons Tab -->
106
+ <div id="lessons" class="tab-content p-6">
107
+ <div class="mb-6">
108
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4">My Lessons</h2>
109
+ <div class="flex mb-4">
110
+ <input type="text" id="new-lesson" placeholder="Add a new lesson..." class="flex-grow px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
111
+ <button id="add-lesson" class="bg-indigo-600 text-white px-4 py-2 rounded-r-lg hover:bg-indigo-700 transition duration-300">
112
+ <i class="fas fa-plus mr-1"></i> Add
113
+ </button>
114
+ </div>
115
+ <div id="lessons-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
116
+ <!-- Lessons will be added here -->
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Weekly Plans Tab -->
122
+ <div id="weekly-plans" class="tab-content p-6">
123
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6">Weekly Study Plan</h2>
124
+
125
+ <div class="mb-6">
126
+ <div class="flex items-center mb-4">
127
+ <input type="text" id="new-session" placeholder="Enter session content..." class="flex-grow px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
128
+ <button id="add-session" class="bg-indigo-600 text-white px-4 py-2 rounded-r-lg hover:bg-indigo-700 transition duration-300">
129
+ <i class="fas fa-plus mr-1"></i> Create Session
130
+ </button>
131
+ </div>
132
+ <div id="sessions-pool" class="dropzone grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 mb-6 p-4">
133
+ <p class="col-span-full text-gray-500 text-sm">Drag sessions from here to the weekly plan below</p>
134
+ <!-- Sessions will be added here -->
135
+ </div>
136
+ </div>
137
+
138
+ <div class="overflow-x-auto">
139
+ <div class="flex space-x-4 mb-6">
140
+ <button class="day-btn px-4 py-2 bg-indigo-100 text-indigo-700 rounded-lg font-medium" data-day="sunday">Sunday</button>
141
+ <button class="day-btn px-4 py-2 bg-gray-100 text-gray-700 rounded-lg font-medium" data-day="monday">Monday</button>
142
+ <button class="day-btn px-4 py-2 bg-gray-100 text-gray-700 rounded-lg font-medium" data-day="tuesday">Tuesday</button>
143
+ <button class="day-btn px-4 py-2 bg-gray-100 text-gray-700 rounded-lg font-medium" data-day="wednesday">Wednesday</button>
144
+ <button class="day-btn px-4 py-2 bg-gray-100 text-gray-700 rounded-lg font-medium" data-day="thursday">Thursday</button>
145
+ </div>
146
+
147
+ <div id="weekly-plan-container">
148
+ <!-- Sunday Plan (default visible) -->
149
+ <div id="sunday-plan" class="day-plan">
150
+ <table class="min-w-full bg-white rounded-lg overflow-hidden">
151
+ <thead class="bg-gray-100">
152
+ <tr>
153
+ <th class="py-3 px-4 text-left text-gray-700 font-semibold">Session</th>
154
+ <th class="py-3 px-4 text-left text-gray-700 font-semibold">Time</th>
155
+ <th class="py-3 px-4 text-left text-gray-700 font-semibold">Content</th>
156
+ </tr>
157
+ </thead>
158
+ <tbody class="divide-y divide-gray-200">
159
+ <!-- Sessions will be added here -->
160
+ </tbody>
161
+ </table>
162
+ </div>
163
+
164
+ <!-- Other days' plans (hidden by default) -->
165
+ <div id="monday-plan" class="day-plan hidden"></div>
166
+ <div id="tuesday-plan" class="day-plan hidden"></div>
167
+ <div id="wednesday-plan" class="day-plan hidden"></div>
168
+ <div id="thursday-plan" class="day-plan hidden"></div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Timetable Tab -->
174
+ <div id="timetable" class="tab-content p-6">
175
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6">Weekly Timetable</h2>
176
+
177
+ <div class="overflow-x-auto">
178
+ <table class="min-w-full bg-white rounded-lg overflow-hidden shadow">
179
+ <thead class="bg-indigo-600 text-white">
180
+ <tr>
181
+ <th class="py-3 px-4 text-left">Time</th>
182
+ <th class="py-3 px-4 text-left">Sunday</th>
183
+ <th class="py-3 px-4 text-left">Monday</th>
184
+ <th class="py-3 px-4 text-left">Tuesday</th>
185
+ <th class="py-3 px-4 text-left">Wednesday</th>
186
+ <th class="py-3 px-4 text-left">Thursday</th>
187
+ </tr>
188
+ </thead>
189
+ <tbody class="divide-y divide-gray-200">
190
+ <!-- Timetable rows will be added here -->
191
+ </tbody>
192
+ </table>
193
+ </div>
194
+
195
+ <div class="mt-6">
196
+ <h3 class="text-lg font-medium text-gray-800 mb-3">Add New Subject</h3>
197
+ <div class="flex flex-wrap gap-4">
198
+ <select id="timetable-day" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
199
+ <option value="sunday">Sunday</option>
200
+ <option value="monday">Monday</option>
201
+ <option value="tuesday">Tuesday</option>
202
+ <option value="wednesday">Wednesday</option>
203
+ <option value="thursday">Thursday</option>
204
+ </select>
205
+ <select id="timetable-session" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
206
+ <option value="1">Session 1</option>
207
+ <option value="2">Session 2</option>
208
+ <option value="3">Session 3</option>
209
+ <option value="4">Session 4</option>
210
+ <option value="5">Session 5</option>
211
+ <option value="6">Session 6</option>
212
+ <option value="7">Session 7</option>
213
+ </select>
214
+ <input type="text" id="timetable-subject" placeholder="Subject name" class="flex-grow px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
215
+ <button id="add-timetable-subject" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition duration-300">
216
+ <i class="fas fa-plus mr-1"></i> Add Subject
217
+ </button>
218
+ </div>
219
+ </div>
220
+ </div>
221
+
222
+ <!-- Exams Tab -->
223
+ <div id="exams" class="tab-content p-6">
224
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6">My Exams</h2>
225
+
226
+ <div class="mb-6 bg-indigo-50 p-4 rounded-lg">
227
+ <h3 class="text-lg font-medium text-indigo-800 mb-3">Add New Exam</h3>
228
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
229
+ <div>
230
+ <label for="exam-name" class="block text-sm font-medium text-gray-700 mb-1">Exam Name</label>
231
+ <input type="text" id="exam-name" placeholder="e.g. Math Final" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
232
+ </div>
233
+ <div>
234
+ <label for="exam-date" class="block text-sm font-medium text-gray-700 mb-1">Exam Date</label>
235
+ <input type="date" id="exam-date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
236
+ </div>
237
+ <div>
238
+ <label for="exam-time" class="block text-sm font-medium text-gray-700 mb-1">Exam Time</label>
239
+ <input type="time" id="exam-time" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
240
+ </div>
241
+ <div class="flex items-end">
242
+ <button id="add-exam" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition duration-300 w-full">
243
+ <i class="fas fa-plus mr-1"></i> Add Exam
244
+ </button>
245
+ </div>
246
+ </div>
247
+ </div>
248
+
249
+ <div id="exams-container" class="space-y-6">
250
+ <!-- Exams will be added here -->
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <script>
257
+ // Tab switching functionality
258
+ document.querySelectorAll('.tab-btn').forEach(btn => {
259
+ btn.addEventListener('click', () => {
260
+ // Remove active class from all tabs and buttons
261
+ document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
262
+ document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
263
+
264
+ // Add active class to clicked tab and button
265
+ btn.classList.add('active');
266
+ const tabId = btn.getAttribute('data-tab');
267
+ document.getElementById(tabId).classList.add('active');
268
+ });
269
+ });
270
+
271
+ // Day switching for weekly plans
272
+ document.querySelectorAll('.day-btn').forEach(btn => {
273
+ btn.addEventListener('click', () => {
274
+ // Remove active class from all day buttons
275
+ document.querySelectorAll('.day-btn').forEach(b => {
276
+ b.classList.remove('bg-indigo-100', 'text-indigo-700');
277
+ b.classList.add('bg-gray-100', 'text-gray-700');
278
+ });
279
+
280
+ // Add active class to clicked button
281
+ btn.classList.remove('bg-gray-100', 'text-gray-700');
282
+ btn.classList.add('bg-indigo-100', 'text-indigo-700');
283
+
284
+ // Hide all day plans
285
+ document.querySelectorAll('.day-plan').forEach(plan => plan.classList.add('hidden'));
286
+
287
+ // Show selected day plan
288
+ const day = btn.getAttribute('data-day');
289
+ document.getElementById(`${day}-plan`).classList.remove('hidden');
290
+ });
291
+ });
292
+
293
+ // Tasks functionality
294
+ const tasksContainer = document.getElementById('tasks-container');
295
+ const addTaskBtn = document.getElementById('add-task');
296
+ const newTaskInput = document.getElementById('new-task');
297
+
298
+ function addTask(taskText) {
299
+ if (!taskText.trim()) return;
300
+
301
+ const taskId = 'task-' + Date.now();
302
+ const taskElement = document.createElement('div');
303
+ taskElement.className = 'flex items-center justify-between bg-white p-4 rounded-lg shadow-sm border border-gray-200';
304
+ taskElement.id = taskId;
305
+ taskElement.innerHTML = `
306
+ <div class="flex items-center">
307
+ <input type="checkbox" class="mr-3 h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500">
308
+ <span class="task-text">${taskText}</span>
309
+ </div>
310
+ <button class="delete-task text-gray-400 hover:text-red-500 transition duration-300">
311
+ <i class="fas fa-trash"></i>
312
+ </button>
313
+ `;
314
+
315
+ tasksContainer.appendChild(taskElement);
316
+
317
+ // Add event listeners
318
+ const checkbox = taskElement.querySelector('input[type="checkbox"]');
319
+ checkbox.addEventListener('change', function() {
320
+ const taskTextElement = taskElement.querySelector('.task-text');
321
+ if (this.checked) {
322
+ taskTextElement.classList.add('line-through', 'text-gray-400');
323
+ } else {
324
+ taskTextElement.classList.remove('line-through', 'text-gray-400');
325
+ }
326
+ });
327
+
328
+ const deleteBtn = taskElement.querySelector('.delete-task');
329
+ deleteBtn.addEventListener('click', function() {
330
+ tasksContainer.removeChild(taskElement);
331
+ });
332
+
333
+ newTaskInput.value = '';
334
+ }
335
+
336
+ addTaskBtn.addEventListener('click', () => addTask(newTaskInput.value));
337
+ newTaskInput.addEventListener('keypress', (e) => {
338
+ if (e.key === 'Enter') addTask(newTaskInput.value);
339
+ });
340
+
341
+ // Lessons functionality
342
+ const lessonsContainer = document.getElementById('lessons-container');
343
+ const addLessonBtn = document.getElementById('add-lesson');
344
+ const newLessonInput = document.getElementById('new-lesson');
345
+
346
+ function addLesson(lessonText) {
347
+ if (!lessonText.trim()) return;
348
+
349
+ const lessonId = 'lesson-' + Date.now();
350
+ const lessonElement = document.createElement('div');
351
+ lessonElement.className = 'bg-white p-4 rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition duration-300';
352
+ lessonElement.id = lessonId;
353
+ lessonElement.innerHTML = `
354
+ <div class="flex justify-between items-start mb-2">
355
+ <h3 class="font-medium text-gray-800">${lessonText}</h3>
356
+ <button class="delete-lesson text-gray-400 hover:text-red-500 transition duration-300">
357
+ <i class="fas fa-trash"></i>
358
+ </button>
359
+ </div>
360
+ <div class="flex items-center text-sm text-gray-500">
361
+ <span class="mr-3"><i class="far fa-calendar mr-1"></i> Not scheduled</span>
362
+ <span><i class="far fa-clock mr-1"></i> 0 min</span>
363
+ </div>
364
+ `;
365
+
366
+ lessonsContainer.appendChild(lessonElement);
367
+
368
+ // Add event listener for delete button
369
+ const deleteBtn = lessonElement.querySelector('.delete-lesson');
370
+ deleteBtn.addEventListener('click', function() {
371
+ lessonsContainer.removeChild(lessonElement);
372
+ });
373
+
374
+ newLessonInput.value = '';
375
+ }
376
+
377
+ addLessonBtn.addEventListener('click', () => addLesson(newLessonInput.value));
378
+ newLessonInput.addEventListener('keypress', (e) => {
379
+ if (e.key === 'Enter') addLesson(newLessonInput.value);
380
+ });
381
+
382
+ // Weekly Plans functionality
383
+ const sessionsPool = document.getElementById('sessions-pool');
384
+ const addSessionBtn = document.getElementById('add-session');
385
+ const newSessionInput = document.getElementById('new-session');
386
+ const sundayPlanTable = document.querySelector('#sunday-plan tbody');
387
+
388
+ // Initialize empty plans for all days
389
+ const dayPlans = {
390
+ sunday: sundayPlanTable,
391
+ monday: document.querySelector('#monday-plan'),
392
+ tuesday: document.querySelector('#tuesday-plan'),
393
+ wednesday: document.querySelector('#wednesday-plan'),
394
+ thursday: document.querySelector('#thursday-plan')
395
+ };
396
+
397
+ // Create tables for other days (similar to Sunday)
398
+ ['monday', 'tuesday', 'wednesday', 'thursday'].forEach(day => {
399
+ const planElement = dayPlans[day];
400
+ planElement.innerHTML = `
401
+ <table class="min-w-full bg-white rounded-lg overflow-hidden">
402
+ <thead class="bg-gray-100">
403
+ <tr>
404
+ <th class="py-3 px-4 text-left text-gray-700 font-semibold">Session</th>
405
+ <th class="py-3 px-4 text-left text-gray-700 font-semibold">Time</th>
406
+ <th class="py-3 px-4 text-left text-gray-700 font-semibold">Content</th>
407
+ </tr>
408
+ </thead>
409
+ <tbody class="divide-y divide-gray-200"></tbody>
410
+ </table>
411
+ `;
412
+ });
413
+
414
+ function addSessionToPool(sessionText) {
415
+ if (!sessionText.trim()) return;
416
+
417
+ const sessionId = 'session-' + Date.now();
418
+ const sessionElement = document.createElement('div');
419
+ sessionElement.className = 'bg-white p-3 rounded-lg shadow-sm border border-gray-200 draggable cursor-move';
420
+ sessionElement.id = sessionId;
421
+ sessionElement.setAttribute('draggable', 'true');
422
+ sessionElement.innerHTML = `
423
+ <div class="flex justify-between items-center">
424
+ <span>${sessionText}</span>
425
+ <button class="delete-session text-gray-400 hover:text-red-500 transition duration-300">
426
+ <i class="fas fa-trash text-sm"></i>
427
+ </button>
428
+ </div>
429
+ `;
430
+
431
+ sessionsPool.appendChild(sessionElement);
432
+
433
+ // Add event listeners
434
+ const deleteBtn = sessionElement.querySelector('.delete-session');
435
+ deleteBtn.addEventListener('click', function(e) {
436
+ e.stopPropagation();
437
+ sessionsPool.removeChild(sessionElement);
438
+ });
439
+
440
+ // Drag and drop functionality
441
+ sessionElement.addEventListener('dragstart', function(e) {
442
+ e.dataTransfer.setData('text/plain', sessionId);
443
+ setTimeout(() => {
444
+ sessionElement.classList.add('opacity-0');
445
+ }, 0);
446
+ });
447
+
448
+ sessionElement.addEventListener('dragend', function() {
449
+ sessionElement.classList.remove('opacity-0');
450
+ });
451
+
452
+ newSessionInput.value = '';
453
+ }
454
+
455
+ addSessionBtn.addEventListener('click', () => addSessionToPool(newSessionInput.value));
456
+ newSessionInput.addEventListener('keypress', (e) => {
457
+ if (e.key === 'Enter') addSessionToPool(newSessionInput.value);
458
+ });
459
+
460
+ // Set up drop zones for each day's plan
461
+ Object.keys(dayPlans).forEach(day => {
462
+ const plan = dayPlans[day];
463
+ const tbody = day === 'sunday' ? plan : plan.querySelector('tbody');
464
+
465
+ // Create 7 session rows for each day
466
+ for (let i = 1; i <= 7; i++) {
467
+ const row = document.createElement('tr');
468
+ row.className = 'hover:bg-gray-50';
469
+ row.innerHTML = `
470
+ <td class="py-3 px-4">Session ${i}</td>
471
+ <td class="py-3 px-4">
472
+ <input type="time" class="border border-gray-300 rounded px-2 py-1 w-24">
473
+ </td>
474
+ <td class="py-3 px-4 dropzone session-cell" data-session="${i}"></td>
475
+ `;
476
+ tbody.appendChild(row);
477
+
478
+ // Set up drop zone for this session
479
+ const dropzone = row.querySelector('.dropzone');
480
+
481
+ dropzone.addEventListener('dragover', function(e) {
482
+ e.preventDefault();
483
+ this.classList.add('highlight');
484
+ });
485
+
486
+ dropzone.addEventListener('dragleave', function() {
487
+ this.classList.remove('highlight');
488
+ });
489
+
490
+ dropzone.addEventListener('drop', function(e) {
491
+ e.preventDefault();
492
+ this.classList.remove('highlight');
493
+
494
+ const sessionId = e.dataTransfer.getData('text/plain');
495
+ const sessionElement = document.getElementById(sessionId);
496
+
497
+ if (sessionElement) {
498
+ // Clone the session element without the delete button
499
+ const clonedSession = sessionElement.cloneNode(true);
500
+ const deleteBtn = clonedSession.querySelector('.delete-session');
501
+ if (deleteBtn) deleteBtn.remove();
502
+
503
+ // Clear the dropzone and append the cloned session
504
+ this.innerHTML = '';
505
+ this.appendChild(clonedSession);
506
+
507
+ // Make the dropped session draggable again
508
+ clonedSession.setAttribute('draggable', 'true');
509
+ clonedSession.addEventListener('dragstart', function(e) {
510
+ e.dataTransfer.setData('text/plain', sessionId);
511
+ setTimeout(() => {
512
+ clonedSession.classList.add('opacity-0');
513
+ }, 0);
514
+ });
515
+
516
+ clonedSession.addEventListener('dragend', function() {
517
+ clonedSession.classList.remove('opacity-0');
518
+ });
519
+ }
520
+ });
521
+ }
522
+ });
523
+
524
+ // Timetable functionality
525
+ const timetableBody = document.querySelector('#timetable tbody');
526
+ const addTimetableSubjectBtn = document.getElementById('add-timetable-subject');
527
+ const timetableDaySelect = document.getElementById('timetable-day');
528
+ const timetableSessionSelect = document.getElementById('timetable-session');
529
+ const timetableSubjectInput = document.getElementById('timetable-subject');
530
+
531
+ // Create 7 rows for the timetable (one for each session)
532
+ for (let i = 1; i <= 7; i++) {
533
+ const row = document.createElement('tr');
534
+ row.className = 'hover:bg-gray-50';
535
+ row.innerHTML = `
536
+ <td class="py-3 px-4 font-medium">Session ${i}</td>
537
+ <td class="py-3 px-4 session-cell" data-day="sunday" data-session="${i}"></td>
538
+ <td class="py-3 px-4 session-cell" data-day="monday" data-session="${i}"></td>
539
+ <td class="py-3 px-4 session-cell" data-day="tuesday" data-session="${i}"></td>
540
+ <td class="py-3 px-4 session-cell" data-day="wednesday" data-session="${i}"></td>
541
+ <td class="py-3 px-4 session-cell" data-day="thursday" data-session="${i}"></td>
542
+ `;
543
+ timetableBody.appendChild(row);
544
+ }
545
+
546
+ function addTimetableSubject() {
547
+ const day = timetableDaySelect.value;
548
+ const session = timetableSessionSelect.value;
549
+ const subject = timetableSubjectInput.value.trim();
550
+
551
+ if (!subject) return;
552
+
553
+ // Find the correct cell
554
+ const cell = document.querySelector(`.session-cell[data-day="${day}"][data-session="${session}"]`);
555
+
556
+ if (cell) {
557
+ // Create subject element
558
+ const subjectElement = document.createElement('div');
559
+ subjectElement.className = 'bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full inline-flex items-center';
560
+ subjectElement.innerHTML = `
561
+ <span>${subject}</span>
562
+ <button class="ml-2 text-indigo-400 hover:text-indigo-700 delete-subject">
563
+ <i class="fas fa-times"></i>
564
+ </button>
565
+ `;
566
+
567
+ // Add delete functionality
568
+ const deleteBtn = subjectElement.querySelector('.delete-subject');
569
+ deleteBtn.addEventListener('click', function() {
570
+ cell.removeChild(subjectElement);
571
+ });
572
+
573
+ // Add to cell
574
+ cell.appendChild(subjectElement);
575
+ timetableSubjectInput.value = '';
576
+ }
577
+ }
578
+
579
+ addTimetableSubjectBtn.addEventListener('click', addTimetableSubject);
580
+ timetableSubjectInput.addEventListener('keypress', (e) => {
581
+ if (e.key === 'Enter') addTimetableSubject();
582
+ });
583
+
584
+ // Exams functionality
585
+ const examsContainer = document.getElementById('exams-container');
586
+ const addExamBtn = document.getElementById('add-exam');
587
+ const examNameInput = document.getElementById('exam-name');
588
+ const examDateInput = document.getElementById('exam-date');
589
+ const examTimeInput = document.getElementById('exam-time');
590
+
591
+ function addExam() {
592
+ const name = examNameInput.value.trim();
593
+ const date = examDateInput.value;
594
+ const time = examTimeInput.value;
595
+
596
+ if (!name || !date) return;
597
+
598
+ const examId = 'exam-' + Date.now();
599
+ const examElement = document.createElement('div');
600
+ examElement.className = 'bg-white p-6 rounded-lg shadow-sm border border-gray-200';
601
+ examElement.id = examId;
602
+
603
+ // Format date for display
604
+ const formattedDate = new Date(date).toLocaleDateString('en-US', {
605
+ weekday: 'long',
606
+ year: 'numeric',
607
+ month: 'long',
608
+ day: 'numeric'
609
+ });
610
+
611
+ examElement.innerHTML = `
612
+ <div class="flex justify-between items-start mb-4">
613
+ <div>
614
+ <h3 class="text-xl font-semibold text-gray-800">${name}</h3>
615
+ <div class="text-gray-600 mt-1">
616
+ <i class="far fa-calendar-alt mr-1"></i> ${formattedDate}
617
+ ${time ? `<span class="ml-3"><i class="far fa-clock mr-1"></i> ${time}</span>` : ''}
618
+ </div>
619
+ </div>
620
+ <button class="delete-exam text-gray-400 hover:text-red-500 transition duration-300">
621
+ <i class="fas fa-trash"></i>
622
+ </button>
623
+ </div>
624
+
625
+ <div class="mb-4">
626
+ <h4 class="font-medium text-gray-700 mb-2">Materials to Study</h4>
627
+ <div class="flex mb-2">
628
+ <input type="text" class="exam-material-input flex-grow px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Add study material">
629
+ <button class="add-material bg-indigo-600 text-white px-4 py-2 rounded-r-lg hover:bg-indigo-700 transition duration-300">
630
+ <i class="fas fa-plus"></i>
631
+ </button>
632
+ </div>
633
+ <ul class="materials-list space-y-2 mt-3">
634
+ <!-- Materials will be added here -->
635
+ </ul>
636
+ </div>
637
+
638
+ <div>
639
+ <h4 class="font-medium text-gray-700 mb-2">Study Progress</h4>
640
+ <div class="progress-bar mb-2">
641
+ <div class="progress-fill" style="width: 0%"></div>
642
+ </div>
643
+ <p class="text-sm text-gray-500 progress-text">0% completed (0 of 0 materials studied)</p>
644
+ </div>
645
+ `;
646
+
647
+ examsContainer.appendChild(examElement);
648
+
649
+ // Add event listeners
650
+ const deleteBtn = examElement.querySelector('.delete-exam');
651
+ deleteBtn.addEventListener('click', function() {
652
+ examsContainer.removeChild(examElement);
653
+ });
654
+
655
+ const addMaterialBtn = examElement.querySelector('.add-material');
656
+ const materialInput = examElement.querySelector('.exam-material-input');
657
+ const materialsList = examElement.querySelector('.materials-list');
658
+ const progressFill = examElement.querySelector('.progress-fill');
659
+ const progressText = examElement.querySelector('.progress-text');
660
+
661
+ function updateProgress() {
662
+ const totalMaterials = materialsList.children.length;
663
+ const completedMaterials = materialsList.querySelectorAll('input[type="checkbox"]:checked').length;
664
+ const percentage = totalMaterials > 0 ? Math.round((completedMaterials / totalMaterials) * 100) : 0;
665
+
666
+ progressFill.style.width = `${percentage}%`;
667
+ progressText.textContent = `${percentage}% completed (${completedMaterials} of ${totalMaterials} materials studied)`;
668
+ }
669
+
670
+ addMaterialBtn.addEventListener('click', function() {
671
+ const materialText = materialInput.value.trim();
672
+ if (!materialText) return;
673
+
674
+ const materialId = 'material-' + Date.now();
675
+ const materialElement = document.createElement('li');
676
+ materialElement.className = 'flex items-center';
677
+ materialElement.innerHTML = `
678
+ <input type="checkbox" class="mr-3 h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500">
679
+ <span class="material-text flex-grow">${materialText}</span>
680
+ <button class="delete-material text-gray-400 hover:text-red-500 transition duration-300 ml-2">
681
+ <i class="fas fa-trash"></i>
682
+ </button>
683
+ `;
684
+
685
+ materialsList.appendChild(materialElement);
686
+ materialInput.value = '';
687
+
688
+ // Add event listeners for the new material
689
+ const checkbox = materialElement.querySelector('input[type="checkbox"]');
690
+ checkbox.addEventListener('change', updateProgress);
691
+
692
+ const deleteMaterialBtn = materialElement.querySelector('.delete-material');
693
+ deleteMaterialBtn.addEventListener('click', function() {
694
+ materialsList.removeChild(materialElement);
695
+ updateProgress();
696
+ });
697
+
698
+ updateProgress();
699
+ });
700
+
701
+ materialInput.addEventListener('keypress', function(e) {
702
+ if (e.key === 'Enter') {
703
+ const materialText = materialInput.value.trim();
704
+ if (!materialText) return;
705
+
706
+ const materialId = 'material-' + Date.now();
707
+ const materialElement = document.createElement('li');
708
+ materialElement.className = 'flex items-center';
709
+ materialElement.innerHTML = `
710
+ <input type="checkbox" class="mr-3 h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500">
711
+ <span class="material-text flex-grow">${materialText}</span>
712
+ <button class="delete-material text-gray-400 hover:text-red-500 transition duration-300 ml-2">
713
+ <i class="fas fa-trash"></i>
714
+ </button>
715
+ `;
716
+
717
+ materialsList.appendChild(materialElement);
718
+ materialInput.value = '';
719
+
720
+ // Add event listeners for the new material
721
+ const checkbox = materialElement.querySelector('input[type="checkbox"]');
722
+ checkbox.addEventListener('change', updateProgress);
723
+
724
+ const deleteMaterialBtn = materialElement.querySelector('.delete-material');
725
+ deleteMaterialBtn.addEventListener('click', function() {
726
+ materialsList.removeChild(materialElement);
727
+ updateProgress();
728
+ });
729
+
730
+ updateProgress();
731
+ }
732
+ });
733
+
734
+ // Clear form
735
+ examNameInput.value = '';
736
+ examDateInput.value = '';
737
+ examTimeInput.value = '';
738
+ }
739
+
740
+ addExamBtn.addEventListener('click', addExam);
741
+ </script>
742
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MaroSamrah/study-manager" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
743
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Create me a website to manage my studying, consider apllying the following: Make different tabs including tasks, lessons, weekly plans, time table, and exams For the tasks tab, make it possible for me to add my assigned tasks For the lessons tab, make it possible for me to add the lessons I want to study For the weekly plans tab, add 5 tables for each of the 5 days, Sunday-Thursday, and 7 sessions each day; make it possible for me to add my weeky sessions For the time table tab, add one table for the 5 days, Sunday-Thursday, and 7 sessions each day, make it possible for me to enter my subjects for each day For the exams tab, make it possible for me to enter my exams, their dates, and the material I should study for each exam. Add a chcklist in the exams tab for each exam to calculate my progression through studying