-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
298 lines (285 loc) · 10.6 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
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
<!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" />
<!-- Font Awesome Link -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Domine:wght@400;700&family=Nanum+Gothic:wght@400;700&display=swap"
rel="stylesheet"
/>
<!-- Favicon Links -->
<link
rel="apple-touch-icon"
sizes="180x180"
href="./assets/images/favicon_io (2)/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./assets/images/favicon_io (2)/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="./assets/images/favicon_io (2)/favicon-16x16.png"
/>
<!-- Normalize CSS Stylesheet Link -->
<link rel="stylesheet" href="./assets/css/normalize.css" />
<!-- Tailwind CSS CDN Link -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- CSS Stylesheet Link -->
<link rel="stylesheet" href="./assets/css/style.css" />
<title>Event-Easy</title>
</head>
<body class="overflow-y-scroll">
<!-- Nav Bar to adjust based on minimum breakpoint -->
<nav
class="relative px-5 flex justify-between items-center bg-gradient-to-r from-sky-500 to-indigo-500 border-b-2 border-black px-5 py-4"
>
<!-- Header Element with location icon -->
<h1 class="text-5xl font-bold">
Event-<span class="italic text-white">Easy</span>
<i class="fa-solid fa-location-dot"></i>
</h1>
<!-- Search Bar and Search Button that "appear" from Menu Bars after reaching "lg" minimum breakpoint -->
<div
class="hidden absolute top-14 right-0 mt-12 px-5 py-10 space-y-4 bg-slate-600 h-screen flex flex-col lg:flex lg:relative lg:top-0 lg:right-0 lg:p-5 lg:space-y-0 lg:flex-row lg:h-full lg:justify-between lg:items-center lg:ml-10 lg:bg-inherit"
id="main-nav"
>
<form class="search-form mx-2">
<input
class="rounded-full py-1 pl-3 pr-10"
id="search-bar"
type="text"
placeholder="Search..."
/>
<button id="search-button" class="-ml-8 mr-6">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</form>
<!-- Button for Itinerary Dropdown -->
<button
id="dropdownDividerButton"
data-dropdown-toggle="dropdownDivider"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
type="button"
>
Itinerary<svg
class="ml-2 w-4 h-4"
aria-hidden="true"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
></path>
</svg>
</button>
<!-- Dropdown Menu for Custom Itinieraries from User Selection -->
<div
id="dropdownDivider"
class="hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600">
<ul
class="py-1 text-sm text-gray-700 dark:text-gray-200"
aria-labelledby="dropdownDividerButton"
id="savedropdown">
<li>
<a
href="#"
class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
id="Itin-1"
>Display</a>
</li>
</ul>
</div>
</div>
<!-- Bar Icon to open and close the Nav Menu when screen width reaches the "md" minimum breakpoint -->
<a
class="lg:hidden text-white text-2xl"
href="javascript:void(0)"
onclick="toggleMenu()"><i id="toggleicon" class="fa-bars fa-solid"></i></a>
</nav>
<!-- Description Header -->
<h2 class="text-center text-white text-3xl font-semibold mt-2">
Event & Lodging Search Engine
</h2>
<h3 class="text-center text-white text-3xl font-semibold mt-1">
Search for a city to see what's happening in the area!
</h3>
<!-- Main container made into flex container to adjust orientation based on default minimum breakpoints -->
<main
class="flex flex-col justify-between items-center overflow-y-scroll lg:flex-row lg:justify-around pt-20 pb-20">
<!-- Lodging Card that will populate list items from Search Button click -->
<div
class="flex-[1_0_100%] md:max-w-lg lg:w-1/3 rounded-lg border-2 border-black text-center shadow-lg bg-blue-400 bg-opacity-80 px-8 py-20 mb-10 lg:mb-0">
<h2
class="font-bold align-top text-white text-2xl bg-blue-700 rounded-lg border-2 border-black px-8 mb-2 -mt-24">
Events in Your Area:
</h2>
<div class="mt-8">
<ul id="eventCard" class="text-xl">
<li>
<a
id="eventlist1"
href="javascript:void(0)"
onclick="popUpModalEvent(this)"
></a>
</li>
<li>
<a
id="eventlist2"
href="javascript:void(0)"
onclick="popUpModalEvent(this)"
></a>
</li>
<li>
<a
id="eventlist3"
href="javascript:void(0)"
onclick="popUpModalEvent(this)"
></a>
</li>
<li>
<a
id="eventlist4"
href="javascript:void(0)"
onclick="popUpModalEvent(this)"
></a>
</li>
</ul>
</div>
</div>
<!-- Event Card that will populate list items from Search Button click -->
<div
class="flex-[1_0_100%] md:max-w-lg lg:w-1/3 rounded-lg border-2 border-black text-center shadow-lg bg-blue-400 bg-opacity-80 px-8 py-20 mt-10 lg:mt-0">
<h2
class="font-bold text-white text-2xl bg-blue-700 rounded-lg border-2 border-black px-8 mb-2 -mt-24">
Lodging in Your Area:
</h2>
<div class="mt-8">
<ul id="hotelCard" class="text-xl">
<li>
<a
id="hotellist1"
href="javascript:void(0)"
onclick="popUpModalHotel(this)"
></a>
</li>
<li>
<a
id="hotellist2"
href="javascript:void(0)"
onclick="popUpModalHotel(this)"></a>
</li>
<li>
<a
id="hotellist3"
href="javascript:void(0)"
onclick="popUpModalHotel(this)"></a>
</li>
<li>
<a
id="hotellist4"
href="javascript:void(0)"
onclick="popUpModalHotel(this)"></a>
</li>
</ul>
</div>
</div>
</main>
<!-- Modal to confirm item added to Itinerary based on clicked list item -->
<div
id="save-modal"
class="hidden bg-black bg-opacity-50 absolute inset-0 flex justify-center items-center">
<div class="bg-gray-50 max-w-sm py-2 px-4 rounded-lg shadow-xl">
<div class="flex justify-between items-center">
<h4 class="text-lg text-center font-semibold">Success!</h4>
<i class="fa-solid fa-xmark cursor-pointer p-1 rounded hover:bg-gray-300"
id="close-modal"></i>
</div>
<div class="mx-6 py-4 px-8">
List Item Saved to Itinerary!
<i class="fa-solid text-green-500 fa-circle-check"></i>
</div>
<div class="flex justify-end space-x-4">
<button
class="px-3 py-1 rounded-lg bg-blue-300 hover:bg-blue-600 hover:text-white"
id="modal-ok">
OK
</button>
</div>
</div>
</div>
<!-- Modal to populate items set from Local Sorage -->
<div
id="storage-modal"
class="hidden bg-black bg-opacity-50 inset-0 absolute flex justify-center items-center">
<div
class="bg-gray-50 w-2/5 h-80 max-w-4xl py-30 px-30 rounded-lg shadow-xl">
<div class="sm:overflow-y-hidden lg:overflow-hidden sm:relative lg:absolute justify-between items-center text-center">
<h4 class="text-lg text-center p-1 lg:ml-44 lg:mb-6 font-semibold">
Your Current Itinerary:
</h4>
</div>
<div class="text-center py-12 px-8">
<!-- Unordered list to append items set from local storage -->
<ul id="storage-modal-list"></ul>
</div>
<div class="flex justify-center space-x-4 lg:mt-10">
<button
class="ml-2 px-3 py-1 rounded-lg bg-blue-300 hover:bg-blue-600 hover:text-white"
id="storage-modal-clear">
Clear This Itinerary
</button>
<button
class="mr-2 px-3 py-1 rounded-lg bg-blue-300 hover:bg-blue-600 hover:text-white"
id="close-storage-modal">
OK
</button>
</div>
</div>
</div>
<!-- Footer with Copyright and Collaborator Credits -->
<footer class="text-center text-white inset-x-0 bottom-0 pb-2">
<p class="font-bold">
© 2022 Made with <span class="text-red-600">❤</span> by:
</p>
<ul>
<li>Shelby Hernandez</li>
<li>Damien Shoemake</li>
<li>Robert Barnes</li>
<li>Brett Elliott</li>
<li>Reginald Pitts</li>
</ul>
</footer>
<!-- JQuery CDN Link -->
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"
></script>
<!-- tailwinf flowbite source -->
<script src="https://unpkg.com/flowbite@1.5.3/dist/flowbite.js"></script>
<!-- JavaScript File Link -->
<script src="./script.js"></script>
</body>
</html>