-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (128 loc) · 7.46 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
<!DOCTYPE html>
<html>
<Head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Concerteer</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://unpkg.com/flowbite@1.5.2/dist/flowbite.min.css" />
<link rel="stylesheet" href="./assets/style.css">
<link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon/favicon-16x16.png">
<link rel="manifest" href="./assets/favicon/site.webmanifest">
</Head>
<body class="bg-black bg-cover h-screen">
<!--Nav Bar-->
<nav class="flex items-center justify-between flex-wrap bg-indigo-900 p-6">
<div class="flex items-center flex-shrink-0 text-indigo-50 mr-6">
<span class="font-semibold text-xl tracking-tight">concerteer</span>
</div>
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
<a href="#" id="recent-Search" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white hover:border-transparent hover:text-indigo-500 hover:bg-white mt-4 lg:mt-0">
Last Search
</a>
</div>
</nav>
<!--Hero-->
<hero class="p-32 text-center">
<h1 class="text-7xl font-bold mb-1 text-indigo-50">concerteer</h1>
<p class="font-medium text-indigo-900">Find upcoming shows for your favorite artists and hotels nearby</p>
</hero>
<!-- Search bar-->
<div class="max-w-2xl mx-auto mb-8 mt-8">
<form>
<label for="default-search"
class="mb-2 text-sm font-medium text-indigo-900 sr-only">Search</label>
<div class="relative">
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
<svg class="w-5 h-5 text-indigo-500" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z">
</path>
</svg>
</div>
<input type="search" id="artists-search"
class="block p-4 pl-10 w-full text-sm text-indigo-900 bg-indigo-50 rounded-lg border border-indigo-900 focus:ring-indigo-500 focus:border-indigo-500"
placeholder="Search artist or event" required>
<button type="submit" id="search-btn"
class="text-white absolute right-2.5 bottom-2.5 bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:outline-none focus:ring-indigo-300 font-medium rounded-lg text-sm px-4 py-2">Search</button>
</div>
</form>
</div>
<!--Search Result Table-->
<div class="overflow-x-auto relative hidden mb-auto" id="hide-table">
<h1 class="text-1xl text-indigo-100 font-semibold py-2 px-6">Up Coming Shows <span id="artist"></span></h1>
<table class="w-full text-sm text-left text-indigo-500 table-auto">
<thead class="text-xs text-indigo-700 uppercase bg-indigo-50">
<tr>
<th scope="col" class="py-3 px-6">
Show
</th>
<th scope="col" class="py-3 px-6">
Location
</th>
<th scope="col" class="py-3 px-6">
Date & Time
</th>
<th scope="col" class="py-3 px-6">
Ticket Price
</th>
<th scope="col" class="py-3 px-6">
Nearest Hotel
</th>
<th scope="col" class="py-3 px-6">
Action
</th>
</tr>
</thead>
<tbody class="results">
<!--js-->
</tbody>
</table>
</div>
<!--Modal-->
<div id="popup-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 md:inset-0 h-modal md:h-full justify-center items-center flex" role="dialog">
<div class="relative p-4 w-full max-w-md h-full md:h-auto">
<div class="relative bg-indigo-50 rounded-lg border border-indigo-900 focus:ring-indigo-500 focus:border-indigo-500">
<button type="button"class="close-btn absolute top-3 right-2.5 text-indigo-400 bg-transparent hover:bg-indigo-200 hover:text-indigo-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd">
</path>
</svg>
<span class="sr-only">Close modal</span>
</button>
<div class="p-6 text-center">
<svg class="mx-auto mb-4 w-14 h-14 text-indigo-400" 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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<h3 class="mb-5 text-lg font-normal text-indigo-500"><span id="modal-msg"></span></h3>
<button type="button" class="close-btn text-white bg-indigo-600 hover:bg-indigo-800 focus:ring-4 focus:outline-none focus:ring-indigo-300 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2">
OK
</button>
</div>
</div>
</div>
</div>
<footer class="p-4 shadow md:flex md:items-center md:justify-between md:p-6 inset-x-0 sticky top-[100vh]">
<span class="text-sm text-indigo-200 sm:text-center">© 2022 <a href="https://flowbite.com/" class="hover:underline">Scott'sTots™</a>. All Rights Reserved.
</span>
<ul class="flex flex-wrap items-center mt-3 text-sm text-indigo-200">
<li>
<a href="#" class="mr-4 hover:underline md:mr-6 ">About</a>
</li>
<li>
<a href="#" class="hover:underline">Contact</a>
</li>
</ul>
</footer>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://unpkg.com/flowbite@1.5.2/dist/flowbite.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="assets/script.js"></script>
</html>