-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathApplicationSec.html
524 lines (425 loc) · 20.5 KB
/
ApplicationSec.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>JULI-TOLA INTERNATIONAL SCHOOL</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!-- Favicons -->
<link href="assets/img/book.png" rel="icon">
<link href="assets/img/book.png" rel="apple-touch-icon">
<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Satisfy:wght@400&display=swap" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Main CSS File -->
<link href="assets/css/main.css" rel="stylesheet">
</head>
<style>
.index-page header{
background-color: rgba(21, 17, 13, 0.85) ;
}
/* General styles */
body {
background-color: #f8f9fa;
font-family: Arial, sans-serif;
}
.form-container {
max-width: 600px;
margin: auto;
background-color: #fff;
border-radius: 10px;
overflow: hidden;
}
/* Form steps */
.form-step {
display: none;
padding: 20px;
}
.form-step.active {
display: block;
}
/* Input styling */
.form-control {
border: 2px solid #ddd;
transition: all 0.3s ease-in-out;
}
.form-control:focus {
border-color: #007bff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
/* Button styling */
button {
margin-top: 20px;
}
.btn {
padding: 10px 20px;
}
.btn:focus {
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
/* Header styling */
h2 {
margin: 0;
}
/* Responsive tweaks */
@media (max-width: 768px) {
.form-container {
padding: 10px;
}
.btn {
font-size: 14px;
}
}
</style>
<body class="index-page">
<header id="header" class="header fixed-top">
<div class="branding d-flex align-items-cente">
<div class="container position-relative d-flex align-items-center justify-content-between">
<a href="index.html" class="logo d-flex align-items-center">
<!-- <img src="assets/img/logo.png" alt=""> -->
<h1 class="sitename" style="color: red;"><span style="color: green;">Juli</span>tola</h1>
</a>
<nav id="navmenu" class="navmenu">
<ul>
<li><a href="index.html#hero">Home</a></li>
<li><a href="index.html#about">About</a></li>
<li class="dropdown">
<a href="index#academics">
<span>Academics</span>
<!-- This is the small arrow icon beside "Academics." No changes are needed unless styling adjustments are required. -->
<i class="bi bi-chevron-down toggle-dropdown"></i>
</a>
<!-- This is the dropdown menu under "Academics." To add a new option, insert a new <li> item here. -->
<ul>
<!-- Alumni Link: This link directs users to the "Discover" section on the Alumni page.
To change the text "Alumni," edit it inside the <a> tag. -->
<li><a href="vocational.html">Vocational</a></li>
<!-- Secondaryy Link: This takes users to the primary school application form.
To change the link name, replace "Secondary" with the desired text. -->
<li><a href="Secondary.html">Secondary</a></li>
<!-- Application Form Secondary Link: This directs users to the secondary school application form.
Edit "Application Form Secondary" to change the displayed text. -->
<li><a href="primary.html">Primary</a></li>
</ul>
</li>
<li><a href="index.html#activities">Activities</a></li>
<li><a href="index.html#news">News</a></li>
<li><a href="index.html#gallery">Gallery</a></li>
<li class="dropdown"><a href="#discover" class="active"><span>Discover</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
<ul>
<li><a href="Alumni.html#discover">Alumni</a></li>
<li><a href="ApplicationPri.html">Application Form Primary</a></li>
<li><a href="ApplicationSec.html">Application Form Secondary</a></li>
</ul>
</li>
<li><a href="index.html#contact">Contact</a></li>
<li><a href="Login.html">Login</a></li>
</ul>
<i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
</nav>
</div>
</div>
</header>
<main class="main mt-5">
<section id="sec" class="sec section py-5" style="background-color: #f9f9f9;">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
<h2>Application</h2>
<div><span>Fill the Application Form for</span> <span class="description-title">Secondary Admission</span></div>
</div>
<!-- Download and Upload Form -->
<div class="container">
<form id="applicationForm">
<!-- Step 1: Personal Details -->
<div class="form-step active">
<h4 class="text-center">Student's Personal Data</h4>
<!-- Grouped Fields: Passport and Name of Applicant -->
<div class="row align-items-center mb-3">
<!-- Passport Photo Upload -->
<div class="col-md-4 text-center mb-3">
<label for="passport" class="form-label d-block">Upload Passport</label>
<div class="border rounded p-2">
<img id="passportPreview" src="assets/img/insert.jpg" alt="Passport Preview" class="img-fluid rounded mb-2" style="max-width: 150px;">
<input type="file" class="form-control rounded-pill" id="passport" accept="image/*" onchange="previewPassport(event)" required>
</div>
</div>
<!-- Name of Applicant -->
<div class="col-md-8">
<label for="applicantName" class="form-label">Name of Applicant (Surname first)</label>
<input type="text" class="form-control rounded-pill" name="applicantName" id="applicantName" placeholder="Enter full name" required>
</div>
</div>
<!-- Grouped Fields: Date of Birth and Gender -->
<div class="row">
<div class="col-md-6 mb-3">
<label for="dob" class="form-label">Date of Birth</label>
<input type="date" class="form-control rounded-pill" name="dob" id="dob" required>
</div>
<div class="col-md-6 mb-3">
<label for="gender" class="form-label">Gender</label>
<select class="form-control rounded-pill" name="gender" id="gender" required>
<option value="" disabled selected>Select gender</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select>
</div>
</div>
<!-- Grouped Fields: Religion and Nationality -->
<div class="row">
<div class="col-md-6 mb-3">
<label for="religion" class="form-label">Religion</label>
<input type="text" class="form-control rounded-pill" name="religion" id="religion" placeholder="Enter religion" required>
</div>
<div class="col-md-6 mb-3">
<label for="nationality" class="form-label">Nationality</label>
<input type="text" class="form-control rounded-pill" name="nationality" id="nationality" placeholder="Enter nationality" required>
</div>
</div>
<!-- Grouped Fields: State and Home Town -->
<div class="row">
<div class="col-md-6 mb-3">
<label for="state" class="form-label">State</label>
<input type="text" class="form-control rounded-pill" name="state" id="state" placeholder="Enter state" required>
</div>
<div class="col-md-6 mb-3">
<label for="lga" class="form-label">LGA</label>
<input type="text" class="form-control rounded-pill" name="lga" id="lga" placeholder="Enter home town" required>
</div>
</div>
<!-- Present Class -->
<div class="row">
<div class="col-md-6 mb-3">
<label for="homeTown" class="form-label">Home Town</label>
<input type="text" class="form-control rounded-pill" name="homeTown" id="homeTown" placeholder="Enter home town" required>
</div>
<div class="col-md-6 mb-3">
<label for="presentClass" class="form-label">Present Class</label>
<input type="text" class="form-control rounded-pill" name="presentClass" id="presentClass" placeholder="Enter current class" required>
</div>
</div>
<!-- Name of Last School Attended -->
<div class="mb-3">
<label for="lastSchool" class="form-label">Name of Last School Attended</label>
<input type="text" class="form-control rounded-pill" name="lastSchool" id="lastSchool" placeholder="Enter school name" required>
</div>
<!-- Class Admission Sought -->
<div class="mb-3">
<label for="admissionClass" class="form-label">Class To Which Admission Is Being Sought</label>
<input type="text" class="form-control rounded-pill" name="admissionClass" id="admissionClass" placeholder="Enter class" required>
</div>
<!-- Navigation Button -->
<button type="button" class="btn btn-success w-100 next-btn rounded-pill">Next</button>
</div>
<script>
function previewPassport(event) {
const reader = new FileReader();
reader.onload = function() {
document.getElementById('passportPreview').src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
}
</script>
<!-- Step 2: Passport and Signature -->
<div class="form-step">
<h4 class="text-center">Student's History and Relevant Information</h4>
<!-- Allergies -->
<div class="mb-3">
<label for="allergies" class="form-label">Any Allergies? Yes/No</label>
<select class="form-control rounded-pill" name="allergies" id="allergies" required>
<option value="" disabled selected>Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<!-- List Allergies -->
<div class="mb-3">
<label for="allergyList" class="form-label">If Yes, List the Allergies</label>
<input type="text" class="form-control rounded-pill" name="allergyList" id="allergyList" placeholder="List allergies or leave blank if none" >
</div>
<!-- Medications -->
<div class="mb-3">
<label for="medications" class="form-label">List Medications Regularly Taken</label>
<input type="text" class="form-control rounded-pill" name="medications" id="medications" placeholder="Enter medications or leave blank if none" >
</div>
<!-- Immunization -->
<div class="mb-3">
<label for="immunization" class="form-label">Is the Child Fully Immunized?</label>
<select class="form-control rounded-pill" name="immunization" id="immunization" required >
<option value="" disabled selected>Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<!-- Special Needs -->
<div class="mb-3">
<label for="specialNeeds" class="form-label">Describe Any Special Needs of the Child (If Any)</label>
<textarea class="form-control rounded" name="specialNeeds" id="specialNeeds" rows="3" placeholder="Provide details or leave blank if none"></textarea>
</div>
<!-- Navigation Buttons -->
<div class="d-flex justify-content-between">
<button type="button" class="btn btn-secondary prev-btn rounded-pill">Previous</button>
<button type="button" class="btn btn-success next-btn rounded-pill">Next</button>
</div>
</div>
<!-- Father's Information -->
<div class="form-step">
<h4 class="text-center">Parent's Information</h4>
<div class="border rounded p-3 mb-4">
<!-- Name of Father -->
<div class="mb-3">
<label for="fatherName" class="form-label">Name of Father</label>
<input type="text" class="form-control rounded-pill" name="fatherName" id="fatherName" placeholder="Enter father's name" required>
</div>
<!-- Office Address -->
<div class="mb-3">
<label for="fatherOfficeAddress" class="form-label">Office Address</label>
<input type="text" class="form-control rounded-pill" name="fatherOfficeAddress" id="fatherOfficeAddress" placeholder="Enter office address" required>
</div>
<!-- Residential Address -->
<div class="mb-3">
<label for="fatherResidentialAddress" class="form-label">Residential Address</label>
<input type="text" class="form-control rounded-pill" name="fatherResidentialAddress" id="fatherResidentialAddress" placeholder="Enter residential address" required>
</div>
<!-- Phone Numbers -->
<div class="mb-3">
<label for="fatherPhone" class="form-label">Phone Numbers</label>
<input type="text" class="form-control rounded-pill" name="fatherPhone" id="fatherPhone" placeholder="Enter phone number(s)" required>
</div>
</div>
<!-- Mother's Information -->
<div class="border rounded p-3">
<!-- Name of Mother -->
<div class="mb-3">
<label for="motherName" class="form-label">Name of Mother</label>
<input type="text" class="form-control rounded-pill" name="motherName" id="motherName" placeholder="Enter mother's name" required>
</div>
<!-- Office Address -->
<div class="mb-3">
<label for="motherOfficeAddress" class="form-label">Office Address</label>
<input type="text" class="form-control rounded-pill" name="motherOfficeAddress" id="motherOfficeAddress" placeholder="Enter office address" required>
</div>
<!-- Residential Address -->
<div class="mb-3">
<label for="motherResidentialAddress" class="form-label">Residential Address</label>
<input type="text" class="form-control rounded-pill" name="motherResidentialAddress" id="motherResidentialAddress" placeholder="Enter residential address" required>
</div>
<!-- Phone Numbers -->
<div class="mb-3">
<label for="motherPhone" class="form-label">Phone Numbers</label>
<input type="text" class="form-control rounded-pill" name="motherPhone" id="motherPhone" placeholder="Enter phone number(s)" required>
</div>
</div>
<!-- Navigation Buttons -->
<div class="d-flex justify-content-between mt-4">
<button type="button" class="btn btn-secondary prev-btn rounded-pill">Previous</button>
<button type="button" class="btn btn-success next-btn rounded-pill">Next</button>
</div>
</div>
<div class="form-step">
<h4 class="text-center"> Declaration</h4>
<!-- Declaration Statement -->
<div class="mb-3">
<p>
I, <input type="text" id="declarationName" name="declarationName" class="form-control d-inline-block w-auto rounded-pill" placeholder="Enter your name" required>,
the parent of the applicant, hereby declare that all the information provided in this form are accurate and true.
</p>
</div>
<!-- Parent's Signature -->
<div class="mb-3">
<label for="parentSignature" class="form-label">Signature</label>
<input type="file" accept="image/*" class="form-control rounded-pill" id="parentSignature" name="parentSignature" required>
<img id="signaturePreview" src="assets/img/insert.jpg" alt="Signature Preview" class="img-fluid mt-2" style="max-width: 150px; display: none;">
</div>
<!-- Navigation Buttons -->
<div class="d-flex justify-content-between">
<button type="button" class="btn btn-secondary prev-btn rounded-pill">Previous</button>
<button type="button" class="btn btn-success next-btn rounded-pill">Preview</button>
</div>
</div>
<!-- Step 3: Review and Submit -->
<div class="form-step">
<h4 class="text-center">Review Your Details</h4>
<p class="text-muted text-center">Please review the information you provided before submitting.</p>
<div class="d-flex justify-content-between">
<button type="button" class="btn btn-secondary prev-btn rounded-pill">Previous</button>
<button type="submit" class="btn btn-success rounded-pill">Submit</button>
</div>
</div>
</form>
</div>
</section>
</main>
<footer id="footer" class="footer dark-background">
<div class="container">
<div class="row gy-3">
<div class="col-lg-3 col-md-6 d-flex">
<i class="bi bi-geo-alt icon"></i>
<div class="address">
<h4>Address</h4>
<p>TPS 62, Block 21 Plot 1 Crusher (Gada-Shagari),</p>
<p> Along Okene Road, Lokoja, Kogi State</p>
<p></p>
</div>
</div>
<div class="col-lg-3 col-md-6 d-flex">
<i class="bi bi-telephone icon"></i>
<div>
<h4>Contact</h4>
<p>
<strong>Phone:</strong> <span>+ 234 80 85773372</span><br>
<strong>Email:</strong> <span>Info@julitolaschools.com</span><br>
</p>
</div>
</div>
<div class="col-lg-3 col-md-6 d-flex">
<i class="bi bi-clock icon"></i>
<div>
<h4>Opening Hours</h4>
<p>
<span>8:00 a.m. – 4:00 p.m.</span><br>
<strong>Sunday</strong>: <span>Closed</span>
</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<h4>Follow Us</h4>
<div class="social-links d-flex">
<a href="#" class="twitter"><i class="bi bi-twitter-x"></i></a>
<a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
<a href="#" class="instagram"><i class="bi bi-instagram"></i></a>
<a href="#" class="linkedin"><i class="bi bi-linkedin"></i></a>
</div>
</div>
</div>
</div>
<div class="container copyright text-center mt-4">
<p><span>Copyright © 2024</span> <strong class="px-1 sitename"> Julitola International Schools |
</strong> <span>Powered by Julitola International Schools.</span></p>
</div>
</footer>
<!-- Scroll Top -->
<a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<!-- Preloader -->
<div id="preloader"></div>
<!-- Vendor JS Files -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="module" src="assets/js/application.js"></script>
<!-- Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>