-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathappointment.html
68 lines (61 loc) · 2.44 KB
/
appointment.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
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<link href="appointment.css" rel="stylesheet">
<title>Appointment</title>
</head>
<body class="bg-gray-200 h-screen flex items-center justify-center">
<header class="header">
<link href="navbar.css" rel="stylesheet">
<a href="/profile.html"><img src="logos/Vaidhya.png"></a>
<div class="flex-container">
<nav class="navbar">
<a href="/homepage.html">Home</a>
<a href="/appointment.html">Book</a>
<a href="/login.html" id="login">Sign In</a>
<a href="/signup.html" id="signup">Sign Up</a>
<a href="/myappointments.html" id="myapps" class="hidden">My Appointments</a>
<a href="/profile.html" id="profile" class="hidden">My Profile</a>
</nav>
</div>
<script src="navbar.js"></script>
</header>
<div class="container mx-auto" style="margin-top:10em;">
<form id="appointment-form" class="bg-white p-6 rounded-lg shadow-md mb-4">
<h2 class="text-2xl font-medium text-indigo-500">Find an Appointment</h2>
<div class="mb-4">
<label class="block text-gray-700 font-medium mb-2" for="appointment-type">Appointment Type</label>
<select class="form-select py-2 px-3 text-gray-700" id="appointment-type">
<option value="">Select an appointment type</option>
</select>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-medium mb-2" for="city">City</label>
<select class="form-select py-2 px-3 text-gray-700" id="city">
<option value="">Select a city</option>
</select>
</div>
<button type="submit" class="bg-indigo-500 text-white py-2 px-4 rounded-lg hover:bg-indigo-600">Find</button>
</form>
<div class="appointment-results hidden" id="appointment-results">
<div class="bg-white p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-medium text-indigo-500">Results</h2>
<table class="table-auto">
<thead>
<tr>
<th class="px-4 py-2">Doctor Name</th>
<th class="px-4 py-2">City</th>
<th class="px-4 py-2">Address</th>
<th class="px-4 py-2">Appointment Type</th>
<th class="px-4 py-2">Price</th>
</tr>
</thead>
<tbody id="result-table"></tbody>
</table>
</div>
</div>
</div>
</body>
<script src="appointment.js"></script>
</html>