Add 3 files
Browse files- README.md +7 -5
- index.html +506 -19
- prompts.txt +2 -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: tt
|
3 |
+
emoji: 🐳
|
4 |
+
colorFrom: yellow
|
5 |
+
colorTo: red
|
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,506 @@
|
|
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>Advanced 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 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
10 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
|
11 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
12 |
+
<style>
|
13 |
+
.time-slot {
|
14 |
+
min-height: 80px;
|
15 |
+
}
|
16 |
+
.draggable {
|
17 |
+
cursor: move;
|
18 |
+
user-select: none;
|
19 |
+
}
|
20 |
+
.dropzone {
|
21 |
+
transition: background-color 0.3s;
|
22 |
+
}
|
23 |
+
.dropzone.highlight {
|
24 |
+
background-color: rgba(147, 197, 253, 0.3);
|
25 |
+
}
|
26 |
+
.subject-card {
|
27 |
+
transition: transform 0.2s, box-shadow 0.2s;
|
28 |
+
}
|
29 |
+
.subject-card:hover {
|
30 |
+
transform: translateY(-2px);
|
31 |
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
32 |
+
}
|
33 |
+
@media print {
|
34 |
+
.no-print {
|
35 |
+
display: none !important;
|
36 |
+
}
|
37 |
+
}
|
38 |
+
</style>
|
39 |
+
</head>
|
40 |
+
<body class="bg-gray-50">
|
41 |
+
<div class="container mx-auto px-4 py-8">
|
42 |
+
<header class="mb-8 text-center">
|
43 |
+
<h1 class="text-4xl font-bold text-indigo-700 mb-2">Timetable Creator</h1>
|
44 |
+
<p class="text-gray-600">Create, customize and export your perfect timetable</p>
|
45 |
+
</header>
|
46 |
+
|
47 |
+
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
48 |
+
<!-- Left Panel - Subjects and Controls -->
|
49 |
+
<div class="lg:col-span-1 bg-white p-6 rounded-lg shadow-md no-print">
|
50 |
+
<h2 class="text-xl font-semibold mb-4 text-indigo-600 border-b pb-2">Subjects</h2>
|
51 |
+
|
52 |
+
<div class="mb-6">
|
53 |
+
<div class="flex mb-4">
|
54 |
+
<input type="text" id="subjectName" placeholder="Subject name" class="flex-1 px-3 py-2 border rounded-l focus:outline-none focus:ring-2 focus:ring-indigo-400">
|
55 |
+
<input type="color" id="subjectColor" value="#3B82F6" class="w-10 h-10 border">
|
56 |
+
<button onclick="addSubject()" class="bg-indigo-600 text-white px-4 py-2 rounded-r hover:bg-indigo-700 transition">Add</button>
|
57 |
+
</div>
|
58 |
+
|
59 |
+
<div id="subjectList" class="space-y-2 max-h-64 overflow-y-auto p-2 border rounded">
|
60 |
+
<!-- Subjects will be added here -->
|
61 |
+
</div>
|
62 |
+
</div>
|
63 |
+
|
64 |
+
<div class="mb-6">
|
65 |
+
<h3 class="font-medium mb-2 text-gray-700">Timetable Options</h3>
|
66 |
+
<div class="grid grid-cols-2 gap-2">
|
67 |
+
<div>
|
68 |
+
<label class="block text-sm text-gray-600 mb-1">Days</label>
|
69 |
+
<select id="dayCount" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-indigo-400">
|
70 |
+
<option value="5">5 (Mon-Fri)</option>
|
71 |
+
<option value="6">6 (Mon-Sat)</option>
|
72 |
+
<option value="7">7 (Mon-Sun)</option>
|
73 |
+
</select>
|
74 |
+
</div>
|
75 |
+
<div>
|
76 |
+
<label class="block text-sm text-gray-600 mb-1">Periods</label>
|
77 |
+
<select id="periodCount" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-indigo-400">
|
78 |
+
<option value="6">6</option>
|
79 |
+
<option value="7">7</option>
|
80 |
+
<option value="8">8</option>
|
81 |
+
<option value="9">9</option>
|
82 |
+
<option value="10">10</option>
|
83 |
+
</select>
|
84 |
+
</div>
|
85 |
+
</div>
|
86 |
+
<button onclick="generateTimetable()" class="mt-3 w-full bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700 transition">Generate Timetable</button>
|
87 |
+
</div>
|
88 |
+
|
89 |
+
<div>
|
90 |
+
<h3 class="font-medium mb-2 text-gray-700">Export Options</h3>
|
91 |
+
<div class="grid grid-cols-3 gap-2">
|
92 |
+
<button onclick="exportToPDF()" class="bg-red-500 text-white px-3 py-2 rounded hover:bg-red-600 transition flex items-center justify-center">
|
93 |
+
<i class="fas fa-file-pdf mr-2"></i> PDF
|
94 |
+
</button>
|
95 |
+
<button onclick="exportToExcel()" class="bg-green-600 text-white px-3 py-2 rounded hover:bg-green-700 transition flex items-center justify-center">
|
96 |
+
<i class="fas fa-file-excel mr-2"></i> Excel
|
97 |
+
</button>
|
98 |
+
<button onclick="exportToImage()" class="bg-blue-500 text-white px-3 py-2 rounded hover:bg-blue-600 transition flex items-center justify-center">
|
99 |
+
<i class="fas fa-image mr-2"></i> Image
|
100 |
+
</button>
|
101 |
+
</div>
|
102 |
+
</div>
|
103 |
+
</div>
|
104 |
+
|
105 |
+
<!-- Right Panel - Timetable -->
|
106 |
+
<div class="lg:col-span-3">
|
107 |
+
<div class="bg-white p-6 rounded-lg shadow-md">
|
108 |
+
<div class="flex justify-between items-center mb-4">
|
109 |
+
<h2 class="text-xl font-semibold text-indigo-600">Weekly Timetable</h2>
|
110 |
+
<div class="flex space-x-2">
|
111 |
+
<input type="text" id="timetableTitle" placeholder="Timetable Title" class="px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-indigo-400" value="My Weekly Timetable">
|
112 |
+
<button onclick="printTimetable()" class="bg-gray-200 text-gray-700 px-3 py-2 rounded hover:bg-gray-300 transition no-print">
|
113 |
+
<i class="fas fa-print mr-1"></i> Print
|
114 |
+
</button>
|
115 |
+
</div>
|
116 |
+
</div>
|
117 |
+
|
118 |
+
<div id="timetableContainer" class="overflow-x-auto">
|
119 |
+
<table id="timetable" class="w-full border-collapse">
|
120 |
+
<thead>
|
121 |
+
<tr>
|
122 |
+
<th class="border p-2 bg-gray-100 font-medium">Time/Day</th>
|
123 |
+
<!-- Days will be added here -->
|
124 |
+
</tr>
|
125 |
+
</thead>
|
126 |
+
<tbody>
|
127 |
+
<!-- Time slots will be added here -->
|
128 |
+
</tbody>
|
129 |
+
</table>
|
130 |
+
</div>
|
131 |
+
</div>
|
132 |
+
|
133 |
+
<div class="mt-6 bg-white p-6 rounded-lg shadow-md no-print">
|
134 |
+
<h2 class="text-xl font-semibold text-indigo-600 mb-4 border-b pb-2">Timetable Summary</h2>
|
135 |
+
<div id="summaryContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
136 |
+
<!-- Summary cards will be added here -->
|
137 |
+
</div>
|
138 |
+
</div>
|
139 |
+
</div>
|
140 |
+
</div>
|
141 |
+
</div>
|
142 |
+
|
143 |
+
<script>
|
144 |
+
// Initialize subjects array
|
145 |
+
let subjects = [];
|
146 |
+
|
147 |
+
// Days of the week
|
148 |
+
const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
149 |
+
|
150 |
+
// Function to add a new subject
|
151 |
+
function addSubject() {
|
152 |
+
const nameInput = document.getElementById('subjectName');
|
153 |
+
const colorInput = document.getElementById('subjectColor');
|
154 |
+
|
155 |
+
const name = nameInput.value.trim();
|
156 |
+
const color = colorInput.value;
|
157 |
+
|
158 |
+
if (name === '') {
|
159 |
+
alert('Please enter a subject name');
|
160 |
+
return;
|
161 |
+
}
|
162 |
+
|
163 |
+
// Add subject to array
|
164 |
+
const subject = {
|
165 |
+
id: Date.now().toString(),
|
166 |
+
name: name,
|
167 |
+
color: color,
|
168 |
+
hours: 0
|
169 |
+
};
|
170 |
+
|
171 |
+
subjects.push(subject);
|
172 |
+
|
173 |
+
// Add subject to UI
|
174 |
+
renderSubjects();
|
175 |
+
|
176 |
+
// Clear input
|
177 |
+
nameInput.value = '';
|
178 |
+
nameInput.focus();
|
179 |
+
}
|
180 |
+
|
181 |
+
// Function to render subjects list
|
182 |
+
function renderSubjects() {
|
183 |
+
const subjectList = document.getElementById('subjectList');
|
184 |
+
subjectList.innerHTML = '';
|
185 |
+
|
186 |
+
if (subjects.length === 0) {
|
187 |
+
subjectList.innerHTML = '<p class="text-gray-500 text-center py-4">No subjects added yet</p>';
|
188 |
+
return;
|
189 |
+
}
|
190 |
+
|
191 |
+
subjects.forEach(subject => {
|
192 |
+
const subjectElement = document.createElement('div');
|
193 |
+
subjectElement.className = 'subject-card draggable flex items-center justify-between p-3 rounded border cursor-move';
|
194 |
+
subjectElement.style.backgroundColor = `${subject.color}20`;
|
195 |
+
subjectElement.style.borderColor = subject.color;
|
196 |
+
subjectElement.draggable = true;
|
197 |
+
subjectElement.dataset.id = subject.id;
|
198 |
+
|
199 |
+
subjectElement.innerHTML = `
|
200 |
+
<div class="flex items-center">
|
201 |
+
<div class="w-4 h-4 rounded-full mr-2" style="background-color: ${subject.color}"></div>
|
202 |
+
<span class="font-medium">${subject.name}</span>
|
203 |
+
</div>
|
204 |
+
<button onclick="removeSubject('${subject.id}')" class="text-red-500 hover:text-red-700">
|
205 |
+
<i class="fas fa-times"></i>
|
206 |
+
</button>
|
207 |
+
`;
|
208 |
+
|
209 |
+
// Add drag events
|
210 |
+
subjectElement.addEventListener('dragstart', dragStart);
|
211 |
+
|
212 |
+
subjectList.appendChild(subjectElement);
|
213 |
+
});
|
214 |
+
}
|
215 |
+
|
216 |
+
// Function to remove a subject
|
217 |
+
function removeSubject(id) {
|
218 |
+
subjects = subjects.filter(subject => subject.id !== id);
|
219 |
+
renderSubjects();
|
220 |
+
|
221 |
+
// Also remove from timetable
|
222 |
+
document.querySelectorAll(`[data-subject-id="${id}"]`).forEach(el => {
|
223 |
+
el.remove();
|
224 |
+
});
|
225 |
+
|
226 |
+
updateSummary();
|
227 |
+
}
|
228 |
+
|
229 |
+
// Function to generate the timetable grid
|
230 |
+
function generateTimetable() {
|
231 |
+
const dayCount = parseInt(document.getElementById('dayCount').value);
|
232 |
+
const periodCount = parseInt(document.getElementById('periodCount').value);
|
233 |
+
|
234 |
+
const timetable = document.getElementById('timetable');
|
235 |
+
|
236 |
+
// Clear existing timetable
|
237 |
+
timetable.innerHTML = '';
|
238 |
+
|
239 |
+
// Create header row with days
|
240 |
+
const headerRow = document.createElement('tr');
|
241 |
+
headerRow.innerHTML = '<th class="border p-2 bg-gray-100 font-medium">Time/Day</th>';
|
242 |
+
|
243 |
+
for (let i = 0; i < dayCount; i++) {
|
244 |
+
headerRow.innerHTML += `<th class="border p-2 bg-gray-100 font-medium">${days[i]}</th>`;
|
245 |
+
}
|
246 |
+
|
247 |
+
timetable.appendChild(headerRow);
|
248 |
+
|
249 |
+
// Create time slots
|
250 |
+
const tbody = document.createElement('tbody');
|
251 |
+
|
252 |
+
for (let i = 0; i < periodCount; i++) {
|
253 |
+
const row = document.createElement('tr');
|
254 |
+
|
255 |
+
// Add time cell
|
256 |
+
const startHour = 8 + i;
|
257 |
+
const endHour = startHour + 1;
|
258 |
+
const timeCell = document.createElement('td');
|
259 |
+
timeCell.className = 'border p-2 bg-gray-50 text-center font-medium';
|
260 |
+
timeCell.textContent = `${startHour}:00 - ${endHour}:00`;
|
261 |
+
row.appendChild(timeCell);
|
262 |
+
|
263 |
+
// Add day cells
|
264 |
+
for (let j = 0; j < dayCount; j++) {
|
265 |
+
const cell = document.createElement('td');
|
266 |
+
cell.className = 'border p-1 time-slot dropzone';
|
267 |
+
cell.dataset.day = days[j];
|
268 |
+
cell.dataset.period = i + 1;
|
269 |
+
|
270 |
+
// Add drop events
|
271 |
+
cell.addEventListener('dragover', dragOver);
|
272 |
+
cell.addEventListener('dragleave', dragLeave);
|
273 |
+
cell.addEventListener('drop', drop);
|
274 |
+
|
275 |
+
row.appendChild(cell);
|
276 |
+
}
|
277 |
+
|
278 |
+
tbody.appendChild(row);
|
279 |
+
}
|
280 |
+
|
281 |
+
timetable.appendChild(tbody);
|
282 |
+
|
283 |
+
// Reset subject hours
|
284 |
+
subjects.forEach(subject => {
|
285 |
+
subject.hours = 0;
|
286 |
+
});
|
287 |
+
|
288 |
+
updateSummary();
|
289 |
+
}
|
290 |
+
|
291 |
+
// Drag and Drop functions
|
292 |
+
function dragStart(e) {
|
293 |
+
e.dataTransfer.setData('text/plain', e.target.dataset.id);
|
294 |
+
e.dataTransfer.effectAllowed = 'move';
|
295 |
+
setTimeout(() => {
|
296 |
+
e.target.classList.add('opacity-0');
|
297 |
+
}, 0);
|
298 |
+
}
|
299 |
+
|
300 |
+
function dragOver(e) {
|
301 |
+
e.preventDefault();
|
302 |
+
e.dataTransfer.dropEffect = 'move';
|
303 |
+
e.target.classList.add('highlight');
|
304 |
+
}
|
305 |
+
|
306 |
+
function dragLeave(e) {
|
307 |
+
e.target.classList.remove('highlight');
|
308 |
+
}
|
309 |
+
|
310 |
+
function drop(e) {
|
311 |
+
e.preventDefault();
|
312 |
+
e.target.classList.remove('highlight');
|
313 |
+
|
314 |
+
const id = e.dataTransfer.getData('text/plain');
|
315 |
+
const subject = subjects.find(s => s.id === id);
|
316 |
+
|
317 |
+
if (!subject) return;
|
318 |
+
|
319 |
+
// Check if this cell already has a subject
|
320 |
+
const existingSubject = e.target.querySelector('.subject-card');
|
321 |
+
if (existingSubject) {
|
322 |
+
// Swap subjects if needed
|
323 |
+
const existingId = existingSubject.dataset.subjectId;
|
324 |
+
const existingSubjectObj = subjects.find(s => s.id === existingId);
|
325 |
+
|
326 |
+
if (existingSubjectObj) {
|
327 |
+
existingSubjectObj.hours--;
|
328 |
+
}
|
329 |
+
|
330 |
+
existingSubject.remove();
|
331 |
+
}
|
332 |
+
|
333 |
+
// Add subject to cell
|
334 |
+
const subjectElement = document.createElement('div');
|
335 |
+
subjectElement.className = 'subject-card p-2 rounded text-white text-center text-sm font-medium mb-1';
|
336 |
+
subjectElement.style.backgroundColor = subject.color;
|
337 |
+
subjectElement.dataset.subjectId = subject.id;
|
338 |
+
|
339 |
+
subjectElement.innerHTML = `
|
340 |
+
<div>${subject.name}</div>
|
341 |
+
<button onclick="removeSubjectFromCell(this)" class="text-white hover:text-gray-200 mt-1">
|
342 |
+
<i class="fas fa-times text-xs"></i>
|
343 |
+
</button>
|
344 |
+
`;
|
345 |
+
|
346 |
+
e.target.appendChild(subjectElement);
|
347 |
+
|
348 |
+
// Update subject hours
|
349 |
+
subject.hours++;
|
350 |
+
|
351 |
+
updateSummary();
|
352 |
+
|
353 |
+
// Restore opacity of dragged element
|
354 |
+
document.querySelector(`[data-id="${id}"]`).classList.remove('opacity-0');
|
355 |
+
}
|
356 |
+
|
357 |
+
// Function to remove subject from a timetable cell
|
358 |
+
function removeSubjectFromCell(button) {
|
359 |
+
const card = button.closest('.subject-card');
|
360 |
+
const subjectId = card.dataset.subjectId;
|
361 |
+
|
362 |
+
// Find subject and decrement hours
|
363 |
+
const subject = subjects.find(s => s.id === subjectId);
|
364 |
+
if (subject) {
|
365 |
+
subject.hours--;
|
366 |
+
updateSummary();
|
367 |
+
}
|
368 |
+
|
369 |
+
card.remove();
|
370 |
+
}
|
371 |
+
|
372 |
+
// Function to update the summary section
|
373 |
+
function updateSummary() {
|
374 |
+
const summaryContainer = document.getElementById('summaryContainer');
|
375 |
+
summaryContainer.innerHTML = '';
|
376 |
+
|
377 |
+
if (subjects.length === 0) {
|
378 |
+
summaryContainer.innerHTML = '<p class="text-gray-500 text-center py-4 col-span-3">Add subjects to see summary</p>';
|
379 |
+
return;
|
380 |
+
}
|
381 |
+
|
382 |
+
// Filter subjects with hours > 0
|
383 |
+
const activeSubjects = subjects.filter(subject => subject.hours > 0);
|
384 |
+
|
385 |
+
if (activeSubjects.length === 0) {
|
386 |
+
summaryContainer.innerHTML = '<p class="text-gray-500 text-center py-4 col-span-3">Drag subjects to timetable to see summary</p>';
|
387 |
+
return;
|
388 |
+
}
|
389 |
+
|
390 |
+
// Calculate total hours
|
391 |
+
const totalHours = activeSubjects.reduce((sum, subject) => sum + subject.hours, 0);
|
392 |
+
|
393 |
+
// Add total hours card
|
394 |
+
const totalCard = document.createElement('div');
|
395 |
+
totalCard.className = 'bg-indigo-100 border border-indigo-200 rounded-lg p-4';
|
396 |
+
totalCard.innerHTML = `
|
397 |
+
<div class="flex items-center justify-between">
|
398 |
+
<h3 class="font-semibold text-indigo-800">Total Hours</h3>
|
399 |
+
<div class="bg-indigo-600 text-white rounded-full w-8 h-8 flex items-center justify-center">
|
400 |
+
${totalHours}
|
401 |
+
</div>
|
402 |
+
</div>
|
403 |
+
<div class="mt-2 text-sm text-indigo-600">
|
404 |
+
${totalHours} hours scheduled this week
|
405 |
+
</div>
|
406 |
+
`;
|
407 |
+
summaryContainer.appendChild(totalCard);
|
408 |
+
|
409 |
+
// Add cards for each subject
|
410 |
+
activeSubjects.forEach(subject => {
|
411 |
+
const card = document.createElement('div');
|
412 |
+
card.className = 'bg-white border rounded-lg p-4 shadow-sm';
|
413 |
+
card.innerHTML = `
|
414 |
+
<div class="flex items-center justify-between">
|
415 |
+
<div class="flex items-center">
|
416 |
+
<div class="w-3 h-3 rounded-full mr-2" style="background-color: ${subject.color}"></div>
|
417 |
+
<h3 class="font-semibold">${subject.name}</h3>
|
418 |
+
</div>
|
419 |
+
<div class="bg-gray-100 text-gray-800 rounded-full px-3 py-1 text-sm">
|
420 |
+
${subject.hours} ${subject.hours === 1 ? 'hour' : 'hours'}
|
421 |
+
</div>
|
422 |
+
</div>
|
423 |
+
<div class="mt-2">
|
424 |
+
<div class="w-full bg-gray-200 rounded-full h-2">
|
425 |
+
<div class="bg-blue-600 h-2 rounded-full" style="width: ${(subject.hours / totalHours) * 100}%"></div>
|
426 |
+
</div>
|
427 |
+
</div>
|
428 |
+
`;
|
429 |
+
summaryContainer.appendChild(card);
|
430 |
+
});
|
431 |
+
}
|
432 |
+
|
433 |
+
// Export functions
|
434 |
+
function exportToPDF() {
|
435 |
+
const { jsPDF } = window.jspdf;
|
436 |
+
const doc = new jsPDF({
|
437 |
+
orientation: 'landscape',
|
438 |
+
unit: 'mm'
|
439 |
+
});
|
440 |
+
|
441 |
+
const title = document.getElementById('timetableTitle').value || 'My Timetable';
|
442 |
+
const timetable = document.getElementById('timetableContainer');
|
443 |
+
|
444 |
+
html2canvas(timetable).then(canvas => {
|
445 |
+
const imgData = canvas.toDataURL('image/png');
|
446 |
+
const imgWidth = 280; // A4 width in mm
|
447 |
+
const imgHeight = canvas.height * imgWidth / canvas.width;
|
448 |
+
|
449 |
+
doc.setFontSize(20);
|
450 |
+
doc.text(title, 10, 10);
|
451 |
+
doc.addImage(imgData, 'PNG', 10, 15, imgWidth, imgHeight);
|
452 |
+
doc.save(`${title.replace(/\s+/g, '_')}.pdf`);
|
453 |
+
});
|
454 |
+
}
|
455 |
+
|
456 |
+
function exportToExcel() {
|
457 |
+
const title = document.getElementById('timetableTitle').value || 'My Timetable';
|
458 |
+
const workbook = XLSX.utils.book_new();
|
459 |
+
|
460 |
+
// Get timetable data
|
461 |
+
const timetable = document.getElementById('timetable');
|
462 |
+
const worksheet = XLSX.utils.table_to_sheet(timetable);
|
463 |
+
|
464 |
+
// Add worksheet to workbook
|
465 |
+
XLSX.utils.book_append_sheet(workbook, worksheet, 'Timetable');
|
466 |
+
|
467 |
+
// Export workbook
|
468 |
+
XLSX.writeFile(workbook, `${title.replace(/\s+/g, '_')}.xlsx`);
|
469 |
+
}
|
470 |
+
|
471 |
+
function exportToImage() {
|
472 |
+
const title = document.getElementById('timetableTitle').value || 'My Timetable';
|
473 |
+
const timetable = document.getElementById('timetableContainer');
|
474 |
+
|
475 |
+
html2canvas(timetable).then(canvas => {
|
476 |
+
const link = document.createElement('a');
|
477 |
+
link.download = `${title.replace(/\s+/g, '_')}.png`;
|
478 |
+
link.href = canvas.toDataURL('image/png');
|
479 |
+
link.click();
|
480 |
+
});
|
481 |
+
}
|
482 |
+
|
483 |
+
// Print function
|
484 |
+
function printTimetable() {
|
485 |
+
window.print();
|
486 |
+
}
|
487 |
+
|
488 |
+
// Initialize the app
|
489 |
+
document.addEventListener('DOMContentLoaded', () => {
|
490 |
+
renderSubjects();
|
491 |
+
generateTimetable();
|
492 |
+
|
493 |
+
// Add event listeners for drag and drop
|
494 |
+
document.querySelectorAll('.draggable').forEach(el => {
|
495 |
+
el.addEventListener('dragstart', dragStart);
|
496 |
+
});
|
497 |
+
|
498 |
+
document.querySelectorAll('.dropzone').forEach(el => {
|
499 |
+
el.addEventListener('dragover', dragOver);
|
500 |
+
el.addEventListener('dragleave', dragLeave);
|
501 |
+
el.addEventListener('drop', drop);
|
502 |
+
});
|
503 |
+
});
|
504 |
+
</script>
|
505 |
+
<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/tt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
506 |
+
</html>
|
prompts.txt
ADDED
@@ -0,0 +1,2 @@
|
|
|
|
|
|
|
1 |
+
A timetable creator that can be exported to pdf, xls and Image
|
2 |
+
The timetable are not generating
|