Hugging Face's logo

Spaces:
LOHITT49
/
leave-application
Running

App Files Community
LOHITT49 commited on
Commit
ceff6c0
·
verified ·
1 Parent(s): 8e7734d

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +502 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Leave Application
3
- emoji: 📊
4
- colorFrom: yellow
5
- colorTo: pink
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: leave-application
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: gray
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,502 @@
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>Student Leave Application System</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
+ .animated-input {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .animated-input:focus {
14
+ transform: translateY(-2px);
15
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
16
+ }
17
+ .btn-submit:hover {
18
+ transform: translateY(-3px);
19
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
20
+ }
21
+ .btn-submit:active {
22
+ transform: translateY(-1px);
23
+ }
24
+ .floating-label {
25
+ position: absolute;
26
+ top: 0;
27
+ left: 0;
28
+ transition: all 0.2s ease;
29
+ pointer-events: none;
30
+ transform-origin: top left;
31
+ }
32
+ .input-container:focus-within .floating-label,
33
+ .input-filled .floating-label {
34
+ transform: translateY(-20px) scale(0.8);
35
+ color: #3b82f6;
36
+ }
37
+ </style>
38
+ </head>
39
+ <body class="bg-gray-50 min-h-screen">
40
+ <div class="container mx-auto px-4 py-8 max-w-4xl">
41
+ <!-- Header -->
42
+ <div class="text-center mb-8">
43
+ <div class="flex justify-center mb-4">
44
+ <div class="bg-blue-100 p-4 rounded-full">
45
+ <i class="fas fa-calendar-alt text-blue-600 text-3xl"></i>
46
+ </div>
47
+ </div>
48
+ <h1 class="text-3xl font-bold text-gray-800 mb-2">Student Leave Application</h1>
49
+ <p class="text-gray-600">Please fill out this form to apply for leave from school</p>
50
+ </div>
51
+
52
+ <!-- Progress Steps -->
53
+ <div class="mb-8">
54
+ <div class="flex justify-between items-center relative">
55
+ <div class="absolute top-1/2 left-0 right-0 h-1 bg-gray-200 -z-10"></div>
56
+ <div class="step flex flex-col items-center relative" data-step="1">
57
+ <div class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center mb-2">
58
+ <span>1</span>
59
+ </div>
60
+ <span class="text-sm font-medium text-blue-600">Personal Info</span>
61
+ </div>
62
+ <div class="step flex flex-col items-center relative" data-step="2">
63
+ <div class="w-10 h-10 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center mb-2">
64
+ <span>2</span>
65
+ </div>
66
+ <span class="text-sm font-medium text-gray-500">Leave Details</span>
67
+ </div>
68
+ <div class="step flex flex-col items-center relative" data-step="3">
69
+ <div class="w-10 h-10 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center mb-2">
70
+ <span>3</span>
71
+ </div>
72
+ <span class="text-sm font-medium text-gray-500">Review</span>
73
+ </div>
74
+ </div>
75
+ </div>
76
+
77
+ <!-- Form Container -->
78
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 md:p-8">
79
+ <form id="leaveForm" class="space-y-6">
80
+ <!-- Step 1: Personal Information -->
81
+ <div class="step-content" data-step="1">
82
+ <h2 class="text-xl font-semibold text-gray-800 mb-6 flex items-center">
83
+ <i class="fas fa-user-circle text-blue-500 mr-2"></i> Personal Information
84
+ </h2>
85
+
86
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
87
+ <!-- Student ID -->
88
+ <div class="input-container relative">
89
+ <input type="text" id="studentId" name="studentId"
90
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg animated-input focus:border-blue-500 focus:outline-none"
91
+ required>
92
+ <label for="studentId" class="floating-label ml-3 mt-3 text-gray-500">Student ID</label>
93
+ </div>
94
+
95
+ <!-- Full Name -->
96
+ <div class="input-container relative">
97
+ <input type="text" id="fullName" name="fullName"
98
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg animated-input focus:border-blue-500 focus:outline-none"
99
+ required>
100
+ <label for="fullName" class="floating-label ml-3 mt-3 text-gray-500">Full Name</label>
101
+ </div>
102
+
103
+ <!-- Class/Grade -->
104
+ <div class="input-container relative">
105
+ <select id="classGrade" name="classGrade"
106
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg animated-input focus:border-blue-500 focus:outline-none appearance-none"
107
+ required>
108
+ <option value="" disabled selected></option>
109
+ <option value="Grade 7">Grade 7</option>
110
+ <option value="Grade 8">Grade 8</option>
111
+ <option value="Grade 9">Grade 9</option>
112
+ <option value="Grade 10">Grade 10</option>
113
+ <option value="Grade 11">Grade 11</option>
114
+ <option value="Grade 12">Grade 12</option>
115
+ </select>
116
+ <label for="classGrade" class="floating-label ml-3 mt-3 text-gray-500">Class/Grade</label>
117
+ <i class="fas fa-chevron-down absolute right-3 top-4 text-gray-400"></i>
118
+ </div>
119
+
120
+ <!-- Contact Number -->
121
+ <div class="input-container relative">
122
+ <input type="tel" id="contactNumber" name="contactNumber"
123
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg animated-input focus:border-blue-500 focus:outline-none"
124
+ required>
125
+ <label for="contactNumber" class="floating-label ml-3 mt-3 text-gray-500">Contact Number</label>
126
+ </div>
127
+ </div>
128
+
129
+ <div class="flex justify-end mt-8">
130
+ <button type="button" class="next-step bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300 btn-submit">
131
+ Next <i class="fas fa-arrow-right ml-2"></i>
132
+ </button>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Step 2: Leave Details -->
137
+ <div class="step-content hidden" data-step="2">
138
+ <h2 class="text-xl font-semibold text-gray-800 mb-6 flex items-center">
139
+ <i class="fas fa-calendar-check text-blue-500 mr-2"></i> Leave Details
140
+ </h2>
141
+
142
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
143
+ <!-- Leave Type -->
144
+ <div class="input-container relative">
145
+ <select id="leaveType" name="leaveType"
146
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg animated-input focus:border-blue-500 focus:outline-none appearance-none"
147
+ required>
148
+ <option value="" disabled selected></option>
149
+ <option value="Medical">Medical Leave</option>
150
+ <option value="Personal">Personal Leave</option>
151
+ <option value="Family">Family Emergency</option>
152
+ <option value="Other">Other</option>
153
+ </select>
154
+ <label for="leaveType" class="floating-label ml-3 mt-3 text-gray-500">Leave Type</label>
155
+ <i class="fas fa-chevron-down absolute right-3 top-4 text-gray-400"></i>
156
+ </div>
157
+
158
+ <!-- Start Date -->
159
+ <div class="input-container relative">
160
+ <input type="date" id="startDate" name="startDate"
161
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg animated-input focus:border-blue-500 focus:outline-none"
162
+ required>
163
+ <label for="startDate" class="floating-label ml-3 mt-3 text-gray-500">Start Date</label>
164
+ </div>
165
+
166
+ <!-- End Date -->
167
+ <div class="input-container relative">
168
+ <input type="date" id="endDate" name="endDate"
169
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg animated-input focus:border-blue-500 focus:outline-none"
170
+ required>
171
+ <label for="endDate" class="floating-label ml-3 mt-3 text-gray-500">End Date</label>
172
+ </div>
173
+
174
+ <!-- Days Requested -->
175
+ <div class="input-container relative">
176
+ <input type="number" id="daysRequested" name="daysRequested" min="1"
177
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg animated-input focus:border-blue-500 focus:outline-none"
178
+ required>
179
+ <label for="daysRequested" class="floating-label ml-3 mt-3 text-gray-500">Days Requested</label>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Reason for Leave -->
184
+ <div class="mt-6">
185
+ <div class="input-container relative">
186
+ <textarea id="reason" name="reason" rows="4"
187
+ class="w-full px-4 py-3 border border-gray-300 rounded-lg animated-input focus:border-blue-500 focus:outline-none"
188
+ required></textarea>
189
+ <label for="reason" class="floating-label ml-3 mt-3 text-gray-500">Reason for Leave</label>
190
+ </div>
191
+ </div>
192
+
193
+ <!-- Supporting Documents -->
194
+ <div class="mt-6">
195
+ <label class="block text-sm font-medium text-gray-700 mb-2">Supporting Documents (if any)</label>
196
+ <div class="flex items-center justify-center w-full">
197
+ <label for="documents" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100">
198
+ <div class="flex flex-col items-center justify-center pt-5 pb-6">
199
+ <i class="fas fa-cloud-upload-alt text-gray-400 text-3xl mb-2"></i>
200
+ <p class="mb-2 text-sm text-gray-500"><span class="font-semibold">Click to upload</span> or drag and drop</p>
201
+ <p class="text-xs text-gray-500">PDF, JPG, PNG (MAX. 5MB)</p>
202
+ </div>
203
+ <input id="documents" name="documents" type="file" class="hidden" multiple>
204
+ </label>
205
+ </div>
206
+ </div>
207
+
208
+ <div class="flex justify-between mt-8">
209
+ <button type="button" class="prev-step bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-6 rounded-lg transition duration-300">
210
+ <i class="fas fa-arrow-left mr-2"></i> Back
211
+ </button>
212
+ <button type="button" class="next-step bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300 btn-submit">
213
+ Next <i class="fas fa-arrow-right ml-2"></i>
214
+ </button>
215
+ </div>
216
+ </div>
217
+
218
+ <!-- Step 3: Review and Submit -->
219
+ <div class="step-content hidden" data-step="3">
220
+ <h2 class="text-xl font-semibold text-gray-800 mb-6 flex items-center">
221
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i> Review Your Application
222
+ </h2>
223
+
224
+ <div class="bg-blue-50 border border-blue-100 rounded-lg p-6 mb-6">
225
+ <h3 class="text-lg font-medium text-blue-800 mb-4">Application Summary</h3>
226
+
227
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
228
+ <div>
229
+ <p class="text-sm text-gray-600">Student ID</p>
230
+ <p id="reviewStudentId" class="font-medium"></p>
231
+ </div>
232
+ <div>
233
+ <p class="text-sm text-gray-600">Full Name</p>
234
+ <p id="reviewFullName" class="font-medium"></p>
235
+ </div>
236
+ <div>
237
+ <p class="text-sm text-gray-600">Class/Grade</p>
238
+ <p id="reviewClassGrade" class="font-medium"></p>
239
+ </div>
240
+ <div>
241
+ <p class="text-sm text-gray-600">Contact Number</p>
242
+ <p id="reviewContactNumber" class="font-medium"></p>
243
+ </div>
244
+ <div>
245
+ <p class="text-sm text-gray-600">Leave Type</p>
246
+ <p id="reviewLeaveType" class="font-medium"></p>
247
+ </div>
248
+ <div>
249
+ <p class="text-sm text-gray-600">Leave Period</p>
250
+ <p id="reviewLeavePeriod" class="font-medium"></p>
251
+ </div>
252
+ <div>
253
+ <p class="text-sm text-gray-600">Days Requested</p>
254
+ <p id="reviewDaysRequested" class="font-medium"></p>
255
+ </div>
256
+ <div class="md:col-span-2">
257
+ <p class="text-sm text-gray-600">Reason</p>
258
+ <p id="reviewReason" class="font-medium"></p>
259
+ </div>
260
+ </div>
261
+ </div>
262
+
263
+ <!-- Terms and Conditions -->
264
+ <div class="flex items-start mb-6">
265
+ <div class="flex items-center h-5">
266
+ <input id="terms" name="terms" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300" required>
267
+ </div>
268
+ <label for="terms" class="ml-2 text-sm font-medium text-gray-700">
269
+ I confirm that all information provided is accurate and I agree to the <a href="#" class="text-blue-600 hover:underline">terms and conditions</a> of leave application.
270
+ </label>
271
+ </div>
272
+
273
+ <div class="flex justify-between">
274
+ <button type="button" class="prev-step bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-6 rounded-lg transition duration-300">
275
+ <i class="fas fa-arrow-left mr-2"></i> Back
276
+ </button>
277
+ <button type="submit" class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300 btn-submit">
278
+ <i class="fas fa-paper-plane mr-2"></i> Submit Application
279
+ </button>
280
+ </div>
281
+ </div>
282
+ </form>
283
+ </div>
284
+
285
+ <!-- Success Modal -->
286
+ <div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
287
+ <div class="bg-white rounded-xl p-8 max-w-md w-full mx-4">
288
+ <div class="text-center">
289
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4">
290
+ <i class="fas fa-check text-green-600 text-xl"></i>
291
+ </div>
292
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Application Submitted!</h3>
293
+ <p class="text-sm text-gray-500 mb-6">Your leave application has been successfully submitted. You will receive a confirmation email shortly.</p>
294
+ <div class="mt-4">
295
+ <button id="closeModal" type="button" class="inline-flex justify-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
296
+ Close
297
+ </button>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </div>
303
+
304
+ <script>
305
+ document.addEventListener('DOMContentLoaded', function() {
306
+ // Initialize floating labels
307
+ const inputs = document.querySelectorAll('.input-container input, .input-container select, .input-container textarea');
308
+ inputs.forEach(input => {
309
+ // Check if input has value on load
310
+ if (input.value) {
311
+ input.parentElement.classList.add('input-filled');
312
+ }
313
+
314
+ input.addEventListener('focus', function() {
315
+ this.parentElement.classList.add('input-filled');
316
+ });
317
+
318
+ input.addEventListener('blur', function() {
319
+ if (!this.value) {
320
+ this.parentElement.classList.remove('input-filled');
321
+ }
322
+ });
323
+ });
324
+
325
+ // Form navigation
326
+ let currentStep = 1;
327
+ const totalSteps = 3;
328
+
329
+ // Next step button
330
+ document.querySelectorAll('.next-step').forEach(button => {
331
+ button.addEventListener('click', function() {
332
+ if (validateStep(currentStep)) {
333
+ showStep(currentStep + 1);
334
+ }
335
+ });
336
+ });
337
+
338
+ // Previous step button
339
+ document.querySelectorAll('.prev-step').forEach(button => {
340
+ button.addEventListener('click', function() {
341
+ showStep(currentStep - 1);
342
+ });
343
+ });
344
+
345
+ function showStep(step) {
346
+ // Hide all step contents
347
+ document.querySelectorAll('.step-content').forEach(content => {
348
+ content.classList.add('hidden');
349
+ });
350
+
351
+ // Show current step content
352
+ document.querySelector(`.step-content[data-step="${step}"]`).classList.remove('hidden');
353
+
354
+ // Update progress steps
355
+ document.querySelectorAll('.step').forEach(stepElement => {
356
+ const stepNumber = parseInt(stepElement.dataset.step);
357
+ const circle = stepElement.querySelector('div');
358
+ const text = stepElement.querySelector('span:last-child');
359
+
360
+ if (stepNumber < step) {
361
+ circle.classList.remove('bg-gray-200', 'text-gray-600');
362
+ circle.classList.add('bg-green-500', 'text-white');
363
+ text.classList.remove('text-gray-500');
364
+ text.classList.add('text-green-600');
365
+ } else if (stepNumber === step) {
366
+ circle.classList.remove('bg-gray-200', 'text-gray-600', 'bg-green-500');
367
+ circle.classList.add('bg-blue-600', 'text-white');
368
+ text.classList.remove('text-gray-500', 'text-green-600');
369
+ text.classList.add('text-blue-600');
370
+ } else {
371
+ circle.classList.remove('bg-blue-600', 'bg-green-500', 'text-white');
372
+ circle.classList.add('bg-gray-200', 'text-gray-600');
373
+ text.classList.remove('text-blue-600', 'text-green-600');
374
+ text.classList.add('text-gray-500');
375
+ }
376
+ });
377
+
378
+ // Update current step
379
+ currentStep = step;
380
+
381
+ // For review step, populate the review fields
382
+ if (currentStep === 3) {
383
+ document.getElementById('reviewStudentId').textContent = document.getElementById('studentId').value;
384
+ document.getElementById('reviewFullName').textContent = document.getElementById('fullName').value;
385
+ document.getElementById('reviewClassGrade').textContent = document.getElementById('classGrade').value;
386
+ document.getElementById('reviewContactNumber').textContent = document.getElementById('contactNumber').value;
387
+ document.getElementById('reviewLeaveType').textContent = document.getElementById('leaveType').value;
388
+
389
+ const startDate = new Date(document.getElementById('startDate').value);
390
+ const endDate = new Date(document.getElementById('endDate').value);
391
+ const options = { year: 'numeric', month: 'long', day: 'numeric' };
392
+
393
+ document.getElementById('reviewLeavePeriod').textContent =
394
+ `${startDate.toLocaleDateString('en-US', options)} to ${endDate.toLocaleDateString('en-US', options)}`;
395
+
396
+ document.getElementById('reviewDaysRequested').textContent = document.getElementById('daysRequested').value;
397
+ document.getElementById('reviewReason').textContent = document.getElementById('reason').value;
398
+ }
399
+ }
400
+
401
+ function validateStep(step) {
402
+ let isValid = true;
403
+
404
+ if (step === 1) {
405
+ const requiredFields = ['studentId', 'fullName', 'classGrade', 'contactNumber'];
406
+ requiredFields.forEach(fieldId => {
407
+ const field = document.getElementById(fieldId);
408
+ if (!field.value) {
409
+ field.classList.add('border-red-500');
410
+ isValid = false;
411
+ } else {
412
+ field.classList.remove('border-red-500');
413
+ }
414
+ });
415
+
416
+ // Simple phone number validation
417
+ const phone = document.getElementById('contactNumber').value;
418
+ if (phone && !/^[\d\s\-+]{8,15}$/.test(phone)) {
419
+ document.getElementById('contactNumber').classList.add('border-red-500');
420
+ isValid = false;
421
+ }
422
+ } else if (step === 2) {
423
+ const requiredFields = ['leaveType', 'startDate', 'endDate', 'daysRequested', 'reason'];
424
+ requiredFields.forEach(fieldId => {
425
+ const field = document.getElementById(fieldId);
426
+ if (!field.value) {
427
+ field.classList.add('border-red-500');
428
+ isValid = false;
429
+ } else {
430
+ field.classList.remove('border-red-500');
431
+ }
432
+ });
433
+
434
+ // Date validation
435
+ const startDate = new Date(document.getElementById('startDate').value);
436
+ const endDate = new Date(document.getElementById('endDate').value);
437
+
438
+ if (startDate && endDate && startDate > endDate) {
439
+ document.getElementById('startDate').classList.add('border-red-500');
440
+ document.getElementById('endDate').classList.add('border-red-500');
441
+ isValid = false;
442
+ }
443
+ }
444
+
445
+ if (!isValid) {
446
+ // Scroll to first error
447
+ const firstError = document.querySelector('.border-red-500');
448
+ if (firstError) {
449
+ firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
450
+ }
451
+ }
452
+
453
+ return isValid;
454
+ }
455
+
456
+ // Form submission
457
+ document.getElementById('leaveForm').addEventListener('submit', function(e) {
458
+ e.preventDefault();
459
+
460
+ if (validateStep(currentStep) && document.getElementById('terms').checked) {
461
+ // In a real application, you would send the data to the server here
462
+ // For this demo, we'll just show the success modal
463
+ document.getElementById('successModal').classList.remove('hidden');
464
+ } else if (!document.getElementById('terms').checked) {
465
+ document.getElementById('terms').nextElementSibling.classList.add('text-red-500');
466
+ }
467
+ });
468
+
469
+ // Close modal
470
+ document.getElementById('closeModal').addEventListener('click', function() {
471
+ document.getElementById('successModal').classList.add('hidden');
472
+ // Reset form
473
+ document.getElementById('leaveForm').reset();
474
+ // Reset all input-filled classes
475
+ document.querySelectorAll('.input-container').forEach(container => {
476
+ container.classList.remove('input-filled');
477
+ });
478
+ // Go back to step 1
479
+ showStep(1);
480
+ });
481
+
482
+ // Calculate days requested when dates change
483
+ const startDateInput = document.getElementById('startDate');
484
+ const endDateInput = document.getElementById('endDate');
485
+ const daysRequestedInput = document.getElementById('daysRequested');
486
+
487
+ function calculateDays() {
488
+ if (startDateInput.value && endDateInput.value) {
489
+ const startDate = new Date(startDateInput.value);
490
+ const endDate = new Date(endDateInput.value);
491
+ const diffTime = Math.abs(endDate - startDate);
492
+ const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1; // +1 to include both start and end dates
493
+ daysRequestedInput.value = diffDays;
494
+ }
495
+ }
496
+
497
+ startDateInput.addEventListener('change', calculateDays);
498
+ endDateInput.addEventListener('change', calculateDays);
499
+ });
500
+ </script>
501
+ <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=LOHITT49/leave-application" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
502
+ </html>