Hugging Face's logo

Spaces:
MalikZeeshan
/
QuranWebsite
Running

App Files Community
MalikZeeshan commited on
Commit
b54bf3e
·
verified ·
1 Parent(s): 86c4d76

Create register.html

Browse files
Files changed (1) hide show
  1. register.html +346 -0
register.html ADDED
@@ -0,0 +1,346 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Register - AlFarooq Academy</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ .register-hero {
15
+ background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('http://static.photos/education/1200x630/5');
16
+ background-size: cover;
17
+ background-position: center;
18
+ }
19
+ .form-card {
20
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
21
+ }
22
+ </style>
23
+ </head>
24
+ <body class="font-sans bg-gray-50">
25
+ <!-- Navigation -->
26
+ <nav class="bg-white shadow-lg fixed w-full z-10">
27
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
28
+ <div class="flex justify-between h-16">
29
+ <div class="flex items-center">
30
+ <div class="flex-shrink-0 flex items-center">
31
+ <i data-feather="book-open" class="text-indigo-600 h-8 w-8"></i>
32
+ <span class="ml-2 text-xl font-bold text-gray-900">AlFarooq Academy</span>
33
+ </div>
34
+ </div>
35
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
36
+ <a href="index.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Home</a>
37
+ <a href="about.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 text-sm font-medium">About</a>
38
+ <a href="register.html" class="text-indigo-600 border-b-2 border-indigo-600 px-3 py-2 text-sm font-medium">Register</a>
39
+ <a href="index.html#contact" class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700">Contact</a>
40
+ </div>
41
+ <div class="-mr-2 flex items-center md:hidden">
42
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button">
43
+ <i data-feather="menu"></i>
44
+ </button>
45
+ </div>
46
+ </div>
47
+ </div>
48
+
49
+ <!-- Mobile menu -->
50
+ <div class="hidden md:hidden" id="mobile-menu">
51
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
52
+ <a href="index.html" class="text-gray-500 hover:bg-indigo-50 hover:text-indigo-600 block px-3 py-2 rounded-md text-base font-medium">Home</a>
53
+ <a href="about.html" class="text-gray-500 hover:bg-indigo-50 hover:text-indigo-600 block px-3 py-2 rounded-md text-base font-medium">About</a>
54
+ <a href="register.html" class="bg-indigo-600 text-white block px-3 py-2 rounded-md text-base font-medium">Register</a>
55
+ <a href="index.html#contact" class="text-gray-500 hover:bg-indigo-50 hover:text-indigo-600 block px-3 py-2 rounded-md text-base font-medium">Contact</a>
56
+ </div>
57
+ </div>
58
+ </nav>
59
+
60
+ <!-- Hero Section -->
61
+ <section class="register-hero text-white pt-32 pb-20 px-4 sm:px-6 lg:px-8">
62
+ <div class="max-w-7xl mx-auto text-center">
63
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl" data-aos="fade-up">Register for Classes</h1>
64
+ <p class="mt-6 max-w-3xl mx-auto text-lg" data-aos="fade-up" data-aos-delay="100">Join AlFarooq Academy today and take the first step towards academic excellence</p>
65
+ </div>
66
+ </section>
67
+
68
+ <!-- Registration Form -->
69
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
70
+ <div class="max-w-3xl mx-auto">
71
+ <div class="form-card bg-white p-8 rounded-lg" data-aos="fade-up">
72
+ <h2 class="text-2xl font-bold text-gray-900">Student Registration Form</h2>
73
+ <p class="mt-2 text-gray-600">Please fill out all required fields to complete your registration</p>
74
+
75
+ <form class="mt-8 space-y-6" id="registrationForm">
76
+ <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
77
+ <div>
78
+ <label for="first-name" class="block text-sm font-medium text-gray-700">First Name *</label>
79
+ <input type="text" name="first-name" id="first-name" autocomplete="given-name" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
80
+ </div>
81
+ <div>
82
+ <label for="last-name" class="block text-sm font-medium text-gray-700">Last Name *</label>
83
+ <input type="text" name="last-name" id="last-name" autocomplete="family-name" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
84
+ </div>
85
+ </div>
86
+
87
+ <div>
88
+ <label for="email" class="block text-sm font-medium text-gray-700">Email Address *</label>
89
+ <input type="email" name="email" id="email" autocomplete="email" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
90
+ </div>
91
+
92
+ <div>
93
+ <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number *</label>
94
+ <input type="tel" name="phone" id="phone" autocomplete="tel" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
95
+ </div>
96
+
97
+ <div>
98
+ <label for="address" class="block text-sm font-medium text-gray-700">Address</label>
99
+ <textarea id="address" name="address" rows="2" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"></textarea>
100
+ </div>
101
+
102
+ <div>
103
+ <label class="block text-sm font-medium text-gray-700">Class Type *</label>
104
+ <div class="mt-2 space-y-4">
105
+ <div class="flex items-center">
106
+ <input id="physical" name="class-type" type="radio" value="physical" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" checked>
107
+ <label for="physical" class="ml-3 block text-sm font-medium text-gray-700">Physical Classes (In-Person)</label>
108
+ </div>
109
+ <div class="flex items-center">
110
+ <input id="online" name="class-type" type="radio" value="online" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
111
+ <label for="online" class="ml-3 block text-sm font-medium text-gray-700">Online Classes</label>
112
+ </div>
113
+ </div>
114
+ </div>
115
+
116
+ <div id="onlineInfo" class="hidden">
117
+ <div class="bg-indigo-50 p-4 rounded-md">
118
+ <p class="text-sm text-indigo-700">For online classes, our tutors will contact you within 24 hours to schedule your sessions and provide platform access details.</p>
119
+ </div>
120
+ </div>
121
+
122
+ <div>
123
+ <label for="courses" class="block text-sm font-medium text-gray-700">Select Courses *</label>
124
+ <select id="courses" name="courses" multiple required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
125
+ <option value="mathematics">Mathematics</option>
126
+ <option value="physics">Physics</option>
127
+ <option value="chemistry">Chemistry</option>
128
+ <option value="biology">Biology</option>
129
+ <option value="english">English</option>
130
+ </select>
131
+ <p class="mt-2 text-sm text-gray-500">Hold down the Ctrl (Windows) or Command (Mac) button to select multiple options.</p>
132
+ </div>
133
+
134
+ <div>
135
+ <label for="level" class="block text-sm font-medium text-gray-700">Education Level *</label>
136
+ <select id="level" name="level" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
137
+ <option value="">Select your level</option>
138
+ <option value="school">School (Grade 6-10)</option>
139
+ <option value="olevel">O-Level</option>
140
+ <option value="alevel">A-Level</option>
141
+ <option value="undergraduate">Undergraduate</option>
142
+ <option value="other">Other</option>
143
+ </select>
144
+ </div>
145
+
146
+ <div>
147
+ <label for="referral" class="block text-sm font-medium text-gray-700">How did you hear about us?</label>
148
+ <select id="referral" name="referral" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
149
+ <option value="">Select an option</option>
150
+ <option value="friend">Friend/Family</option>
151
+ <option value="social">Social Media</option>
152
+ <option value="search">Search Engine</option>
153
+ <option value="advertisement">Advertisement</option>
154
+ <option value="other">Other</option>
155
+ </select>
156
+ </div>
157
+
158
+ <div class="flex items-start">
159
+ <div class="flex items-center h-5">
160
+ <input id="terms" name="terms" type="checkbox" required class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
161
+ </div>
162
+ <div class="ml-3 text-sm">
163
+ <label for="terms" class="font-medium text-gray-700">I agree to the <a href="#" class="text-indigo-600 hover:text-indigo-500">terms and conditions</a></label>
164
+ <p class="text-gray-500">By registering, you agree to our terms of service and privacy policy.</p>
165
+ </div>
166
+ </div>
167
+
168
+ <div>
169
+ <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
170
+ Complete Registration
171
+ </button>
172
+ </div>
173
+ </form>
174
+ </div>
175
+ </div>
176
+ </section>
177
+
178
+ <!-- Success Modal -->
179
+ <div id="successModal" class="fixed z-10 inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
180
+ <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
181
+ <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
182
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
183
+ <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6">
184
+ <div>
185
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
186
+ <i data-feather="check" class="h-6 w-6 text-green-600"></i>
187
+ </div>
188
+ <div class="mt-3 text-center sm:mt-5">
189
+ <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Registration Successful!</h3>
190
+ <div class="mt-2">
191
+ <p class="text-sm text-gray-500">Thank you for registering with AlFarooq Academy. We've sent a confirmation email to your provided address.</p>
192
+ <p class="mt-2 text-sm text-gray-500" id="modal-message"></p>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ <div class="mt-5 sm:mt-6">
197
+ <button type="button" id="modal-close" class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm">
198
+ Close
199
+ </button>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Footer -->
206
+ <footer class="bg-gray-800 text-white py-12 px-4 sm:px-6 lg:px-8">
207
+ <div class="max-w-7xl mx-auto">
208
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
209
+ <div>
210
+ <h3 class="text-lg font-medium">AlFarooq Academy</h3>
211
+ <p class="mt-4 text-gray-400">Empowering students through quality education since 2010.</p>
212
+ <div class="mt-4 flex space-x-6">
213
+ <a href="#" class="text-gray-400 hover:text-white">
214
+ <i data-feather="facebook"></i>
215
+ </a>
216
+ <a href="#" class="text-gray-400 hover:text-white">
217
+ <i data-feather="twitter"></i>
218
+ </a>
219
+ <a href="#" class="text-gray-400 hover:text-white">
220
+ <i data-feather="instagram"></i>
221
+ </a>
222
+ <a href="#" class="text-gray-400 hover:text-white">
223
+ <i data-feather="linkedin"></i>
224
+ </a>
225
+ </div>
226
+ </div>
227
+ <div>
228
+ <h3 class="text-lg font-medium">Quick Links</h3>
229
+ <ul class="mt-4 space-y-2">
230
+ <li><a href="index.html" class="text-gray-400 hover:text-white">Home</a></li>
231
+ <li><a href="about.html" class="text-gray-400 hover:text-white">About</a></li>
232
+ <li><a href="register.html" class="text-gray-400 hover:text-white">Register</a></li>
233
+ <li><a href="index.html#contact" class="text-gray-400 hover:text-white">Contact</a></li>
234
+ </ul>
235
+ </div>
236
+ <div>
237
+ <h3 class="text-lg font-medium">Courses</h3>
238
+ <ul class="mt-4 space-y-2">
239
+ <li><a href="#" class="text-gray-400 hover:text-white">Mathematics</a></li>
240
+ <li><a href="#" class="text-gray-400 hover:text-white">Physics</a></li>
241
+ <li><a href="#" class="text-gray-400 hover:text-white">Chemistry</a></li>
242
+ <li><a href="#" class="text-gray-400 hover:text-white">Biology</a></li>
243
+ </ul>
244
+ </div>
245
+ <div>
246
+ <h3 class="text-lg font-medium">Contact</h3>
247
+ <ul class="mt-4 space-y-2">
248
+ <li class="flex items-start">
249
+ <i data-feather="map-pin" class="h-5 w-5 text-gray-400 mr-2"></i>
250
+ <span class="text-gray-400">123 Education Street, Karachi, Pakistan</span>
251
+ </li>
252
+ <li class="flex items-center">
253
+ <i data-feather="mail" class="h-5 w-5 text-gray-400 mr-2"></i>
254
+ <span class="text-gray-400">info@alfarooqacademy.com</span>
255
+ </li>
256
+ <li class="flex items-center">
257
+ <i data-feather="phone" class="h-5 w-5 text-gray-400 mr-2"></i>
258
+ <span class="text-gray-400">+92 300 1234567</span>
259
+ </li>
260
+ </ul>
261
+ </div>
262
+ </div>
263
+ <div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center">
264
+ <p class="text-gray-400">© 2023 AlFarooq Academy. All rights reserved.</p>
265
+ <div class="mt-4 md:mt-0">
266
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
267
+ <span class="mx-2 text-gray-600">|</span>
268
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </footer>
273
+
274
+ <script>
275
+ // Mobile menu toggle
276
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
277
+ const menu = document.getElementById('mobile-menu');
278
+ if (menu.classList.contains('hidden')) {
279
+ menu.classList.remove('hidden');
280
+ } else {
281
+ menu.classList.add('hidden');
282
+ }
283
+ });
284
+
285
+ // Show/hide online classes info
286
+ const onlineRadio = document.getElementById('online');
287
+ const physicalRadio = document.getElementById('physical');
288
+ const onlineInfo = document.getElementById('onlineInfo');
289
+
290
+ onlineRadio.addEventListener('change', function() {
291
+ if(this.checked) {
292
+ onlineInfo.classList.remove('hidden');
293
+ }
294
+ });
295
+
296
+ physicalRadio.addEventListener('change', function() {
297
+ if(this.checked) {
298
+ onlineInfo.classList.add('hidden');
299
+ }
300
+ });
301
+
302
+ // Form submission
303
+ document.getElementById('registrationForm').addEventListener('submit', function(e) {
304
+ e.preventDefault();
305
+
306
+ // Get form values
307
+ const firstName = document.getElementById('first-name').value;
308
+ const lastName = document.getElementById('last-name').value;
309
+ const email = document.getElementById('email').value;
310
+ const phone = document.getElementById('phone').value;
311
+ const classType = document.querySelector('input[name="class-type"]:checked').value;
312
+
313
+ // Prepare success message
314
+ let message = `Welcome ${firstName} ${lastName}! `;
315
+ if(classType === 'online') {
316
+ message += "Our tutors will contact you shortly to schedule your online sessions.";
317
+ } else {
318
+ message += "Your physical class schedule will be emailed to you within 24 hours.";
319
+ }
320
+
321
+ // Display success modal
322
+ document.getElementById('modal-message').textContent = message;
323
+ document.getElementById('successModal').classList.remove('hidden');
324
+
325
+ // In a real application, you would send this data to your server
326
+ // Here we're just simulating the submission
327
+ console.log('Registration submitted:', {
328
+ firstName,
329
+ lastName,
330
+ email,
331
+ phone,
332
+ classType,
333
+ // ... other form fields
334
+ });
335
+ });
336
+
337
+ // Close modal
338
+ document.getElementById('modal-close').addEventListener('click', function() {
339
+ document.getElementById('successModal').classList.add('hidden');
340
+ document.getElementById('registrationForm').reset();
341
+ });
342
+ </script>
343
+ <script>AOS.init();</script>
344
+ <script>feather.replace();</script>
345
+ </body>
346
+ </html>