svaze/post_office_clone
0
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>Aadhaar Card Appointment - Post Office</title>
7 <style>
8 body {
9 font-family: Arial, sans-serif;
10 background-color: #f4f4f4;
11 padding: 20px;
12 }
13 .container {
14 max-width: 600px;
15 margin: auto;
16 background-color: #fff;
17 padding: 20px;
18 box-shadow: 0 0 10px rgba(0,0,0,0.1);
19 border-radius: 10px;
20 }
21 h2 {
22 text-align: center;
23 }
24 label {
25 font-weight: bold;
26 }
27 input, select, button {
28 width: 100%;
29 padding: 10px;
30 margin: 10px 0;
31 border: 1px solid #ccc;
32 border-radius: 5px;
33 }
34 button {
35 background-color: #007BFF;
36 color: white;
37 cursor: pointer;
38 }
39 button:hover {
40 background-color: #0056b3;
41 }
42 </style>
43</head>
44<body>
45
46<div class="container">
47 <h2>Book Your Aadhaar Appointment</h2>
48 <form action="submit_appointment.php" method="POST">
49 <!-- Personal Information Section -->
50 <label for="name">Full Name:</label>
51 <input type="text" id="name" name="name" required>
52
53 <label for="mobile">Mobile Number:</label>
54 <input type="tel" id="mobile" name="mobile" pattern="[0-9]{10}" required>
55
56 <label for="email">Email Address (optional):</label>
57 <input type="email" id="email" name="email">
58
59 <label for="aadhar">Aadhaar Number:</label>
60 <input type="text" id="aadhar" name="aadhar" pattern="[0-9]{12}" required>
61
62 <!-- Service Type -->
63 <label for="service">Service Type:</label>
64 <select id="service" name="service" required>
65 <option value="new">New Aadhaar Enrollment</option>
66 <option value="update">Update Existing Aadhaar</option>
67 <option value="biometric">Biometric Update</option>
68 </select>
69
70 <!-- Appointment Date and Time -->
71 <label for="date">Preferred Appointment Date:</label>
72 <input type="date" id="date" name="date" required>
73
74 <label for="time">Preferred Appointment Time:</label>
75 <input type="time" id="time" name="time" required>
76
77 <!-- Submit Button -->
78 <button type="submit">Book Appointment</button>
79 </form>
80</div>
81
82</body>
83</html>
84