-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
257 lines (246 loc) · 11.4 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Smart Meeting Scheduler</title>
<link href="output.css" rel="stylesheet" />
<script src="api.js" defer></script>
<script src="dist/main.js" defer></script>
</head>
<body class="bg-white-200">
<!-- <div class="flex justify-between px-8 py-4">
<div></div>
<button
id="settings-button"
class="bg-gray-300 hover:bg-gray-400 text-white font-bold py-2 px-4 rounded relative flex justify-center items-center"
>
<img
src="img/settings-icon.png"
alt="settings"
class="w-4 h-4"
/>
</button>
</div> -->
<a href="https://smartmeetingscheduler.netlify.app/about" target="_blank" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 px-3 mt-1 rounded" rel="noopener">Privacy Policy</a>
<div class="flex justify-between px-8 py-4">
<div
id="settings-modal"
class="fixed z-10 inset-0 overflow-y-auto hidden"
>
<div
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
>
<!-- settings content goes here -->
<div
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
>
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<label for="preference">Preference:</label>
<input id="preference" type="text" value="" />
</div>
<div
class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"
>
<button
id="save-settings-button"
type="button"
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
>
Save
</button>
</div>
</div>
</div>
</div>
<form
id="meeting-form"
class="w-fullttox-w-xl bg-white rounded-lg shadow-md px-12 pt-6 pb-8 mb-4"
>
<div class="flex justify-center">
<img
class="justify center"
src="img/smart-meeting-scheduler-logo-128-128.png"
alt="Smart Meeting Scheduler logo"
/>
</div>
<div class="mb-4">
<label
class="block text-gray-700 text-sm font-bold mb-2"
for="title"
>
Meeting Title
</label>
<input
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
type="text"
id="title"
name="title"
required
/>
</div>
<div class="mb-4">
<label
class="block text-gray-700 text-sm font-bold mb-2"
for="description"
>
Description
</label>
<textarea
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id="description"
type="text"
name="description"
required
></textarea>
</div>
<div class="mb-4" id="attendees-section">
<label
class="block text-gray-700 text-sm font-bold mb-2"
for="attendees"
>
Attendees
</label>
<input
class="bg-gray-100 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline attendee"
id="attendee-1"
name="attendees[]"
type="text"
value="[email protected]"
readonly
required
/>
<div id="extra-attendees">
<!-- New attendee fields will be inserted here -->
</div>
<button
id="add-attendee"
type="button"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 mt-1 rounded"
>
Add new attendee
</button>
</div>
<div class="mb-4">
<label
class="block text-gray-700 text-sm font-bold mb-2"
for="start-date"
>
Preferred Start Date
</label>
<input
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id="start-date"
name="start-date"
type="date"
required
/>
</div>
<div class="mb-4">
<label
class="block text-gray-700 text-sm font-bold mb-2"
for="duration"
>
Meeting Duration (minutes)
</label>
<input
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id="duration"
name="duration"
type="number"
min="15"
step="15"
required
/>
</div>
<!-- Working Hours dropdown -->
<div class="mb-4 relative inline-block text-left">
<div>
<button
type="button"
class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500"
id="dropdown-btn"
aria-haspopup="true"
aria-expanded="true"
>
Working Hours
<svg
class="-mr-1 ml-2 h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10 14a2 2 0 001.41-.59l2.83-2.83a2 2 0 00-2.83-2.83L10 9.17l-1.41-1.42a2 2 0 00-2.83 2.83l2.83 2.83A2 2 0 0010 14z"
clip-rule="evenodd"
/>
</svg>
</button>
</div>
<div
class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 hidden"
>
<div
class="py-1"
role="menu"
aria-orientation="vertical"
aria-labelledby="dropdown-btn"
>
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
role="menuitem"
>Anytime</a
>
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
role="menuitem"
>Morning (8am - 12pm)</a
>
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
role="menuitem"
>Afternoon (12pm - 5pm)</a
>
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
role="menuitem"
>Evening (5pm - 9pm)</a
>
</div>
</div>
</div>
<div class="flex items-center justify-between">
<button
id="check-availability-btn"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 mx-2 rounded focus:outline-none focus:shadow-outline"
type="button"
>
Check Availability
</button>
<button
id="submit-btn"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 mx-2 rounded focus:outline-none focus:shadow-outline"
type="submit"
>
Schedule Meeting
</button>
</div>
<div id="best-time" class="my-4"></div>
<div id="slots" class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2"
>Available Slots</label
>
<!-- Radio buttons will be populated dynamically -->
</div>
</form>
</div>
<div id="upcoming-events"></div>
</body>
</html>