Spaces:
Running
Running
Add 3 files
Browse files- README.md +7 -5
- index.html +503 -19
- prompts.txt +0 -0
README.md
CHANGED
@@ -1,10 +1,12 @@
|
|
1 |
---
|
2 |
-
title:
|
3 |
-
emoji:
|
4 |
-
colorFrom:
|
5 |
-
colorTo:
|
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: timetable-project
|
3 |
+
emoji: 🐳
|
4 |
+
colorFrom: gray
|
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,503 @@
|
|
1 |
-
<!
|
2 |
-
<html>
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>Timetable Creator</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 |
+
.timetable-cell {
|
11 |
+
min-height: 80px;
|
12 |
+
transition: all 0.2s ease;
|
13 |
+
}
|
14 |
+
.timetable-cell:hover {
|
15 |
+
background-color: #f3f4f6;
|
16 |
+
}
|
17 |
+
.draggable-item {
|
18 |
+
cursor: grab;
|
19 |
+
user-select: none;
|
20 |
+
}
|
21 |
+
.draggable-item:active {
|
22 |
+
cursor: grabbing;
|
23 |
+
}
|
24 |
+
.dropzone {
|
25 |
+
transition: background-color 0.2s ease;
|
26 |
+
}
|
27 |
+
.dropzone.drag-over {
|
28 |
+
background-color: #e5e7eb;
|
29 |
+
}
|
30 |
+
.modal {
|
31 |
+
transition: opacity 0.2s ease, transform 0.2s ease;
|
32 |
+
}
|
33 |
+
.modal-hidden {
|
34 |
+
opacity: 0;
|
35 |
+
transform: translateY(20px);
|
36 |
+
pointer-events: none;
|
37 |
+
}
|
38 |
+
</style>
|
39 |
+
</head>
|
40 |
+
<body class="bg-gray-50 min-h-screen">
|
41 |
+
<div class="container mx-auto px-4 py-8">
|
42 |
+
<header class="mb-8">
|
43 |
+
<h1 class="text-3xl font-bold text-indigo-700 mb-2">Timetable Creator</h1>
|
44 |
+
<p class="text-gray-600">Drag and drop subjects to create your perfect schedule</p>
|
45 |
+
</header>
|
46 |
+
|
47 |
+
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
48 |
+
<!-- Subjects Panel -->
|
49 |
+
<div class="bg-white rounded-lg shadow p-4 lg:col-span-1">
|
50 |
+
<div class="flex justify-between items-center mb-4">
|
51 |
+
<h2 class="text-lg font-semibold text-gray-800">Subjects</h2>
|
52 |
+
<button id="addSubjectBtn" class="bg-indigo-100 text-indigo-700 p-2 rounded-full hover:bg-indigo-200 transition">
|
53 |
+
<i class="fas fa-plus"></i>
|
54 |
+
</button>
|
55 |
+
</div>
|
56 |
+
|
57 |
+
<div id="subjectsList" class="space-y-2">
|
58 |
+
<!-- Subjects will be added here -->
|
59 |
+
</div>
|
60 |
+
</div>
|
61 |
+
|
62 |
+
<!-- Timetable -->
|
63 |
+
<div class="bg-white rounded-lg shadow p-4 lg:col-span-3">
|
64 |
+
<div class="flex justify-between items-center mb-4">
|
65 |
+
<h2 class="text-lg font-semibold text-gray-800">Weekly Schedule</h2>
|
66 |
+
<div class="flex space-x-2">
|
67 |
+
<button id="saveTimetableBtn" class="bg-green-100 text-green-700 px-3 py-1 rounded hover:bg-green-200 transition">
|
68 |
+
<i class="fas fa-save mr-1"></i> Save
|
69 |
+
</button>
|
70 |
+
<button id="clearTimetableBtn" class="bg-red-100 text-red-700 px-3 py-1 rounded hover:bg-red-200 transition">
|
71 |
+
<i class="fas fa-trash mr-1"></i> Clear
|
72 |
+
</button>
|
73 |
+
</div>
|
74 |
+
</div>
|
75 |
+
|
76 |
+
<div class="overflow-x-auto">
|
77 |
+
<table class="w-full border-collapse">
|
78 |
+
<thead>
|
79 |
+
<tr class="bg-gray-100">
|
80 |
+
<th class="p-2 w-24 font-medium text-gray-600">Time</th>
|
81 |
+
<th class="p-2 font-medium text-gray-600">Monday</th>
|
82 |
+
<th class="p-2 font-medium text-gray-600">Tuesday</th>
|
83 |
+
<th class="p-2 font-medium text-gray-600">Wednesday</th>
|
84 |
+
<th class="p-2 font-medium text-gray-600">Thursday</th>
|
85 |
+
<th class="p-2 font-medium text-gray-600">Friday</th>
|
86 |
+
</tr>
|
87 |
+
</thead>
|
88 |
+
<tbody id="timetableBody">
|
89 |
+
<!-- Timetable rows will be generated here -->
|
90 |
+
</tbody>
|
91 |
+
</table>
|
92 |
+
</div>
|
93 |
+
</div>
|
94 |
+
</div>
|
95 |
+
|
96 |
+
<!-- Saved Timetables Section -->
|
97 |
+
<div class="mt-8 bg-white rounded-lg shadow p-4">
|
98 |
+
<h2 class="text-lg font-semibold text-gray-800 mb-4">Saved Timetables</h2>
|
99 |
+
<div id="savedTimetables" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
100 |
+
<!-- Saved timetables will appear here -->
|
101 |
+
</div>
|
102 |
+
</div>
|
103 |
+
</div>
|
104 |
+
|
105 |
+
<!-- Add Subject Modal -->
|
106 |
+
<div id="subjectModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 modal modal-hidden">
|
107 |
+
<div class="bg-white rounded-lg shadow-xl w-full max-w-md">
|
108 |
+
<div class="p-6">
|
109 |
+
<h3 class="text-xl font-semibold text-gray-800 mb-4">Add New Subject</h3>
|
110 |
+
|
111 |
+
<div class="mb-4">
|
112 |
+
<label for="subjectName" class="block text-sm font-medium text-gray-700 mb-1">Subject Name</label>
|
113 |
+
<input type="text" id="subjectName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
114 |
+
</div>
|
115 |
+
|
116 |
+
<div class="mb-4">
|
117 |
+
<label for="subjectColor" class="block text-sm font-medium text-gray-700 mb-1">Color</label>
|
118 |
+
<select id="subjectColor" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
119 |
+
<option value="bg-red-100 text-red-800">Red</option>
|
120 |
+
<option value="bg-blue-100 text-blue-800">Blue</option>
|
121 |
+
<option value="bg-green-100 text-green-800">Green</option>
|
122 |
+
<option value="bg-yellow-100 text-yellow-800">Yellow</option>
|
123 |
+
<option value="bg-purple-100 text-purple-800">Purple</option>
|
124 |
+
<option value="bg-pink-100 text-pink-800">Pink</option>
|
125 |
+
<option value="bg-indigo-100 text-indigo-800">Indigo</option>
|
126 |
+
</select>
|
127 |
+
</div>
|
128 |
+
|
129 |
+
<div class="flex justify-end space-x-3">
|
130 |
+
<button id="cancelSubjectBtn" class="px-4 py-2 text-gray-600 hover:text-gray-800 transition">Cancel</button>
|
131 |
+
<button id="saveSubjectBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition">Add Subject</button>
|
132 |
+
</div>
|
133 |
+
</div>
|
134 |
+
</div>
|
135 |
+
</div>
|
136 |
+
|
137 |
+
<!-- Save Timetable Modal -->
|
138 |
+
<div id="saveModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 modal modal-hidden">
|
139 |
+
<div class="bg-white rounded-lg shadow-xl w-full max-w-md">
|
140 |
+
<div class="p-6">
|
141 |
+
<h3 class="text-xl font-semibold text-gray-800 mb-4">Save Timetable</h3>
|
142 |
+
|
143 |
+
<div class="mb-4">
|
144 |
+
<label for="timetableName" class="block text-sm font-medium text-gray-700 mb-1">Timetable Name</label>
|
145 |
+
<input type="text" id="timetableName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="e.g. Fall Semester 2023">
|
146 |
+
</div>
|
147 |
+
|
148 |
+
<div class="flex justify-end space-x-3">
|
149 |
+
<button id="cancelSaveBtn" class="px-4 py-2 text-gray-600 hover:text-gray-800 transition">Cancel</button>
|
150 |
+
<button id="confirmSaveBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition">Save</button>
|
151 |
+
</div>
|
152 |
+
</div>
|
153 |
+
</div>
|
154 |
+
</div>
|
155 |
+
|
156 |
+
<script>
|
157 |
+
document.addEventListener('DOMContentLoaded', function() {
|
158 |
+
// DOM Elements
|
159 |
+
const subjectsList = document.getElementById('subjectsList');
|
160 |
+
const timetableBody = document.getElementById('timetableBody');
|
161 |
+
const savedTimetables = document.getElementById('savedTimetables');
|
162 |
+
const addSubjectBtn = document.getElementById('addSubjectBtn');
|
163 |
+
const saveTimetableBtn = document.getElementById('saveTimetableBtn');
|
164 |
+
const clearTimetableBtn = document.getElementById('clearTimetableBtn');
|
165 |
+
const subjectModal = document.getElementById('subjectModal');
|
166 |
+
const saveModal = document.getElementById('saveModal');
|
167 |
+
const cancelSubjectBtn = document.getElementById('cancelSubjectBtn');
|
168 |
+
const saveSubjectBtn = document.getElementById('saveSubjectBtn');
|
169 |
+
const cancelSaveBtn = document.getElementById('cancelSaveBtn');
|
170 |
+
const confirmSaveBtn = document.getElementById('confirmSaveBtn');
|
171 |
+
const subjectNameInput = document.getElementById('subjectName');
|
172 |
+
const subjectColorSelect = document.getElementById('subjectColor');
|
173 |
+
const timetableNameInput = document.getElementById('timetableName');
|
174 |
+
|
175 |
+
// State
|
176 |
+
let subjects = [];
|
177 |
+
let timetable = {};
|
178 |
+
let draggedItem = null;
|
179 |
+
let currentCell = null;
|
180 |
+
|
181 |
+
// Initialize timetable
|
182 |
+
initTimetable();
|
183 |
+
|
184 |
+
// Event Listeners
|
185 |
+
addSubjectBtn.addEventListener('click', showSubjectModal);
|
186 |
+
cancelSubjectBtn.addEventListener('click', hideSubjectModal);
|
187 |
+
saveSubjectBtn.addEventListener('click', addSubject);
|
188 |
+
saveTimetableBtn.addEventListener('click', showSaveModal);
|
189 |
+
cancelSaveBtn.addEventListener('click', hideSaveModal);
|
190 |
+
confirmSaveBtn.addEventListener('click', saveTimetable);
|
191 |
+
clearTimetableBtn.addEventListener('click', clearTimetable);
|
192 |
+
|
193 |
+
// Initialize with some sample subjects
|
194 |
+
addSampleSubjects();
|
195 |
+
|
196 |
+
// Functions
|
197 |
+
function initTimetable() {
|
198 |
+
const timeSlots = [
|
199 |
+
'8:00 - 9:00', '9:00 - 10:00', '10:00 - 11:00',
|
200 |
+
'11:00 - 12:00', '12:00 - 13:00', '13:00 - 14:00',
|
201 |
+
'14:00 - 15:00', '15:00 - 16:00', '16:00 - 17:00'
|
202 |
+
];
|
203 |
+
|
204 |
+
timetableBody.innerHTML = '';
|
205 |
+
|
206 |
+
timeSlots.forEach(time => {
|
207 |
+
const row = document.createElement('tr');
|
208 |
+
|
209 |
+
// Time cell
|
210 |
+
const timeCell = document.createElement('td');
|
211 |
+
timeCell.className = 'p-2 border border-gray-200 bg-gray-50 text-center text-sm text-gray-600';
|
212 |
+
timeCell.textContent = time;
|
213 |
+
row.appendChild(timeCell);
|
214 |
+
|
215 |
+
// Day cells
|
216 |
+
for (let i = 0; i < 5; i++) {
|
217 |
+
const dayCell = document.createElement('td');
|
218 |
+
dayCell.className = 'p-1 border border-gray-200 timetable-cell dropzone';
|
219 |
+
dayCell.dataset.day = i;
|
220 |
+
dayCell.dataset.time = time;
|
221 |
+
|
222 |
+
// Drag and drop events
|
223 |
+
dayCell.addEventListener('dragover', handleDragOver);
|
224 |
+
dayCell.addEventListener('dragleave', handleDragLeave);
|
225 |
+
dayCell.addEventListener('drop', handleDrop);
|
226 |
+
dayCell.addEventListener('dragenter', handleDragEnter);
|
227 |
+
|
228 |
+
row.appendChild(dayCell);
|
229 |
+
}
|
230 |
+
|
231 |
+
timetableBody.appendChild(row);
|
232 |
+
});
|
233 |
+
}
|
234 |
+
|
235 |
+
function addSampleSubjects() {
|
236 |
+
const sampleSubjects = [
|
237 |
+
{ name: 'Mathematics', color: 'bg-blue-100 text-blue-800' },
|
238 |
+
{ name: 'Physics', color: 'bg-red-100 text-red-800' },
|
239 |
+
{ name: 'Chemistry', color: 'bg-green-100 text-green-800' },
|
240 |
+
{ name: 'Biology', color: 'bg-purple-100 text-purple-800' },
|
241 |
+
{ name: 'History', color: 'bg-yellow-100 text-yellow-800' },
|
242 |
+
{ name: 'English', color: 'bg-pink-100 text-pink-800' }
|
243 |
+
];
|
244 |
+
|
245 |
+
sampleSubjects.forEach(subject => {
|
246 |
+
addSubjectToDOM(subject);
|
247 |
+
subjects.push(subject);
|
248 |
+
});
|
249 |
+
}
|
250 |
+
|
251 |
+
function showSubjectModal() {
|
252 |
+
subjectNameInput.value = '';
|
253 |
+
subjectModal.classList.remove('modal-hidden');
|
254 |
+
}
|
255 |
+
|
256 |
+
function hideSubjectModal() {
|
257 |
+
subjectModal.classList.add('modal-hidden');
|
258 |
+
}
|
259 |
+
|
260 |
+
function showSaveModal() {
|
261 |
+
timetableNameInput.value = '';
|
262 |
+
saveModal.classList.remove('modal-hidden');
|
263 |
+
}
|
264 |
+
|
265 |
+
function hideSaveModal() {
|
266 |
+
saveModal.classList.add('modal-hidden');
|
267 |
+
}
|
268 |
+
|
269 |
+
function addSubject() {
|
270 |
+
const name = subjectNameInput.value.trim();
|
271 |
+
const color = subjectColorSelect.value;
|
272 |
+
|
273 |
+
if (name) {
|
274 |
+
const subject = { name, color };
|
275 |
+
addSubjectToDOM(subject);
|
276 |
+
subjects.push(subject);
|
277 |
+
hideSubjectModal();
|
278 |
+
}
|
279 |
+
}
|
280 |
+
|
281 |
+
function addSubjectToDOM(subject) {
|
282 |
+
const subjectElement = document.createElement('div');
|
283 |
+
subjectElement.className = `p-3 rounded-md draggable-item ${subject.color} flex justify-between items-center`;
|
284 |
+
subjectElement.textContent = subject.name;
|
285 |
+
subjectElement.draggable = true;
|
286 |
+
subjectElement.dataset.subject = subject.name;
|
287 |
+
|
288 |
+
// Add drag icon
|
289 |
+
const dragIcon = document.createElement('span');
|
290 |
+
dragIcon.className = 'text-gray-500 ml-2';
|
291 |
+
dragIcon.innerHTML = '<i class="fas fa-grip-vertical"></i>';
|
292 |
+
subjectElement.appendChild(dragIcon);
|
293 |
+
|
294 |
+
// Drag events
|
295 |
+
subjectElement.addEventListener('dragstart', handleDragStart);
|
296 |
+
subjectElement.addEventListener('dragend', handleDragEnd);
|
297 |
+
|
298 |
+
subjectsList.appendChild(subjectElement);
|
299 |
+
}
|
300 |
+
|
301 |
+
function handleDragStart(e) {
|
302 |
+
draggedItem = e.target;
|
303 |
+
e.target.classList.add('opacity-50');
|
304 |
+
e.dataTransfer.setData('text/plain', e.target.dataset.subject);
|
305 |
+
}
|
306 |
+
|
307 |
+
function handleDragEnd(e) {
|
308 |
+
e.target.classList.remove('opacity-50');
|
309 |
+
}
|
310 |
+
|
311 |
+
function handleDragOver(e) {
|
312 |
+
e.preventDefault();
|
313 |
+
currentCell = e.target;
|
314 |
+
e.target.classList.add('drag-over');
|
315 |
+
}
|
316 |
+
|
317 |
+
function handleDragEnter(e) {
|
318 |
+
e.preventDefault();
|
319 |
+
}
|
320 |
+
|
321 |
+
function handleDragLeave(e) {
|
322 |
+
e.target.classList.remove('drag-over');
|
323 |
+
}
|
324 |
+
|
325 |
+
function handleDrop(e) {
|
326 |
+
e.preventDefault();
|
327 |
+
e.target.classList.remove('drag-over');
|
328 |
+
|
329 |
+
const subjectName = e.dataTransfer.getData('text/plain');
|
330 |
+
const subject = subjects.find(s => s.name === subjectName);
|
331 |
+
|
332 |
+
if (subject && currentCell) {
|
333 |
+
// Clear cell first
|
334 |
+
currentCell.innerHTML = '';
|
335 |
+
|
336 |
+
// Add subject to cell
|
337 |
+
const subjectElement = document.createElement('div');
|
338 |
+
subjectElement.className = `p-2 rounded ${subject.color} text-sm font-medium`;
|
339 |
+
subjectElement.textContent = subject.name;
|
340 |
+
|
341 |
+
// Add remove button
|
342 |
+
const removeBtn = document.createElement('button');
|
343 |
+
removeBtn.className = 'float-right text-gray-500 hover:text-gray-700 ml-1';
|
344 |
+
removeBtn.innerHTML = '<i class="fas fa-times"></i>';
|
345 |
+
removeBtn.addEventListener('click', function() {
|
346 |
+
currentCell.innerHTML = '';
|
347 |
+
});
|
348 |
+
|
349 |
+
subjectElement.appendChild(removeBtn);
|
350 |
+
currentCell.appendChild(subjectElement);
|
351 |
+
|
352 |
+
// Save to timetable object
|
353 |
+
const day = currentCell.dataset.day;
|
354 |
+
const time = currentCell.dataset.time;
|
355 |
+
|
356 |
+
if (!timetable[day]) timetable[day] = {};
|
357 |
+
timetable[day][time] = subject.name;
|
358 |
+
}
|
359 |
+
}
|
360 |
+
|
361 |
+
function saveTimetable() {
|
362 |
+
const name = timetableNameInput.value.trim();
|
363 |
+
|
364 |
+
if (name) {
|
365 |
+
const timetableData = {
|
366 |
+
name,
|
367 |
+
data: timetable,
|
368 |
+
createdAt: new Date().toISOString()
|
369 |
+
};
|
370 |
+
|
371 |
+
// Save to localStorage
|
372 |
+
let saved = JSON.parse(localStorage.getItem('timetables') || '[]');
|
373 |
+
saved.push(timetableData);
|
374 |
+
localStorage.setItem('timetables', JSON.stringify(saved));
|
375 |
+
|
376 |
+
// Update UI
|
377 |
+
displaySavedTimetables();
|
378 |
+
hideSaveModal();
|
379 |
+
|
380 |
+
// Show success message
|
381 |
+
alert('Timetable saved successfully!');
|
382 |
+
}
|
383 |
+
}
|
384 |
+
|
385 |
+
function displaySavedTimetables() {
|
386 |
+
const saved = JSON.parse(localStorage.getItem('timetables') || '[]');
|
387 |
+
savedTimetables.innerHTML = '';
|
388 |
+
|
389 |
+
if (saved.length === 0) {
|
390 |
+
savedTimetables.innerHTML = '<p class="text-gray-500">No saved timetables yet.</p>';
|
391 |
+
return;
|
392 |
+
}
|
393 |
+
|
394 |
+
saved.forEach((timetable, index) => {
|
395 |
+
const card = document.createElement('div');
|
396 |
+
card.className = 'bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition';
|
397 |
+
|
398 |
+
const name = document.createElement('h3');
|
399 |
+
name.className = 'font-medium text-lg text-gray-800 mb-2';
|
400 |
+
name.textContent = timetable.name;
|
401 |
+
|
402 |
+
const date = document.createElement('p');
|
403 |
+
date.className = 'text-sm text-gray-500 mb-3';
|
404 |
+
date.textContent = new Date(timetable.createdAt).toLocaleString();
|
405 |
+
|
406 |
+
const actions = document.createElement('div');
|
407 |
+
actions.className = 'flex justify-between';
|
408 |
+
|
409 |
+
const loadBtn = document.createElement('button');
|
410 |
+
loadBtn.className = 'bg-indigo-100 text-indigo-700 px-3 py-1 rounded text-sm hover:bg-indigo-200 transition';
|
411 |
+
loadBtn.innerHTML = '<i class="fas fa-upload mr-1"></i> Load';
|
412 |
+
loadBtn.addEventListener('click', () => loadTimetable(index));
|
413 |
+
|
414 |
+
const deleteBtn = document.createElement('button');
|
415 |
+
deleteBtn.className = 'bg-red-100 text-red-700 px-3 py-1 rounded text-sm hover:bg-red-200 transition';
|
416 |
+
deleteBtn.innerHTML = '<i class="fas fa-trash mr-1"></i> Delete';
|
417 |
+
deleteBtn.addEventListener('click', () => deleteTimetable(index));
|
418 |
+
|
419 |
+
actions.appendChild(loadBtn);
|
420 |
+
actions.appendChild(deleteBtn);
|
421 |
+
|
422 |
+
card.appendChild(name);
|
423 |
+
card.appendChild(date);
|
424 |
+
card.appendChild(actions);
|
425 |
+
|
426 |
+
savedTimetables.appendChild(card);
|
427 |
+
});
|
428 |
+
}
|
429 |
+
|
430 |
+
function loadTimetable(index) {
|
431 |
+
const saved = JSON.parse(localStorage.getItem('timetables') || '[]');
|
432 |
+
if (saved[index]) {
|
433 |
+
// Clear current timetable
|
434 |
+
clearTimetable();
|
435 |
+
|
436 |
+
// Load the saved timetable
|
437 |
+
const loadedTimetable = saved[index].data;
|
438 |
+
timetable = loadedTimetable;
|
439 |
+
|
440 |
+
// Update the UI
|
441 |
+
for (const day in loadedTimetable) {
|
442 |
+
for (const time in loadedTimetable[day]) {
|
443 |
+
const subjectName = loadedTimetable[day][time];
|
444 |
+
const subject = subjects.find(s => s.name === subjectName);
|
445 |
+
|
446 |
+
if (subject) {
|
447 |
+
const cells = document.querySelectorAll(`[data-day="${day}"][data-time="${time}"]`);
|
448 |
+
if (cells.length > 0) {
|
449 |
+
const cell = cells[0];
|
450 |
+
cell.innerHTML = '';
|
451 |
+
|
452 |
+
const subjectElement = document.createElement('div');
|
453 |
+
subjectElement.className = `p-2 rounded ${subject.color} text-sm font-medium`;
|
454 |
+
subjectElement.textContent = subject.name;
|
455 |
+
|
456 |
+
// Add remove button
|
457 |
+
const removeBtn = document.createElement('button');
|
458 |
+
removeBtn.className = 'float-right text-gray-500 hover:text-gray-700 ml-1';
|
459 |
+
removeBtn.innerHTML = '<i class="fas fa-times"></i>';
|
460 |
+
removeBtn.addEventListener('click', function() {
|
461 |
+
cell.innerHTML = '';
|
462 |
+
delete timetable[day][time];
|
463 |
+
});
|
464 |
+
|
465 |
+
subjectElement.appendChild(removeBtn);
|
466 |
+
cell.appendChild(subjectElement);
|
467 |
+
}
|
468 |
+
}
|
469 |
+
}
|
470 |
+
}
|
471 |
+
|
472 |
+
alert('Timetable loaded successfully!');
|
473 |
+
}
|
474 |
+
}
|
475 |
+
|
476 |
+
function deleteTimetable(index) {
|
477 |
+
if (confirm('Are you sure you want to delete this timetable?')) {
|
478 |
+
const saved = JSON.parse(localStorage.getItem('timetables') || '[]');
|
479 |
+
saved.splice(index, 1);
|
480 |
+
localStorage.setItem('timetables', JSON.stringify(saved));
|
481 |
+
displaySavedTimetables();
|
482 |
+
}
|
483 |
+
}
|
484 |
+
|
485 |
+
function clearTimetable() {
|
486 |
+
if (confirm('Are you sure you want to clear the current timetable?')) {
|
487 |
+
// Clear UI
|
488 |
+
const cells = document.querySelectorAll('.timetable-cell');
|
489 |
+
cells.forEach(cell => {
|
490 |
+
cell.innerHTML = '';
|
491 |
+
});
|
492 |
+
|
493 |
+
// Clear data
|
494 |
+
timetable = {};
|
495 |
+
}
|
496 |
+
}
|
497 |
+
|
498 |
+
// Initial display of saved timetables
|
499 |
+
displaySavedTimetables();
|
500 |
+
});
|
501 |
+
</script>
|
502 |
+
<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=theharby/timetable-project" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
503 |
+
</html>
|
prompts.txt
ADDED
File without changes
|