-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (137 loc) · 6.17 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
<!DOCTYPE html>
<html>
<head>
<!-- Meta tags -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta name="viewport" content="width=device-width" />
<!-- Favicon and title -->
<link rel="icon" href="images/logo.png">
<title>Home | Dinner & A Show</title>
<!-- Halfmoon CSS -->
<link href="css/halfmoon.css" rel="stylesheet" />
<link rel="stylesheet" href="css/styles.css">
<script src="https://kit.fontawesome.com/0962ffea7b.js" crossorigin="anonymous"></script>
</head>
<body class="with-custom-webkit-scrollbars with-custom-css-scrollbars" data-dm-shortcut-enabled="true" data-set-preferred-theme-onload="true">
<!-- Modals go here -->
<!-- Reference: https://www.gethalfmoon.com/docs/modal -->
<div class="modal" id="settingsModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<a href="#" class="close" role="button" aria-label="Close">
<span aria-hidden="true">×</span>
</a>
<h5 class="modal-title text-center">Site Settings</h5>
<div class="text-center">
<p>Toggle Theme</p>
<button class="btn" onclick="halfmoon.toggleDarkMode()">Dark or Light</button>
<p>Local Storage</p>
<button class="btn" onclick="emptyStorage();">Clear Storage</button>
</div>
<div class="text-right mt-20"> <!-- text-right = text-align: right, mt-20 = margin-top: 2rem (20px) -->
<a href="#" class="btn mr-5" role="button">Close</a>
</div>
</div>
</div>
</div>
<div class="modal ie-scroll-fix" id="eventInfoModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content w-80-percent"> <!-- w-600 = width: 60rem (600px) -->
<a href="#" class="close" role="button" aria-label="Close">
<span aria-hidden="true">×</span>
</a>
<!-- Long scrollable content here -->
<div class="container" id="eventInfoModalContent">
<h2 class="text-center" id="eventModalName"></h2>
<h4 class="text-center" id="eventModalLocation"></h4>
<hr>
<h5 class="text-center" id="eventModalDate"></h5>
<div class="rounded" id="map"></div>
<br>
<div class="widget_wrap mr-auto ml-auto" style="width:100%;height:504px;display:inline-block;"><iframe id="zomatoWidget" style="position:relative;width:100%;height:100%;" border="0" frameborder="0"></iframe></div>
<br>
<a id="pwrdBySongKick" href=""><img id="songkickIcon" src="images/attribution-assets/powered-by-sk/powered-by-songkick-pink.svg" alt="Powered By Songkick"></a>
</div>
</div>
</div>
</div>
<!-- Page wrapper start -->
<div class="page-wrapper with-navbar">
<!-- Navbar start -->
<nav class="navbar">
<a href="#" class="navbar-brand has-fancy-text ml-auto mr-auto">
Dinner & A Show
</a>
<div class="navbar-content">
<a class="btn" type="button" href="#settingsModal"><i class="fas fa-cogs"></i></a>
</div>
</nav>
<!-- Navbar end -->
<!-- Content wrapper start -->
<div class="content-wrapper">
<div class="container" style="margin-top: 100px;">
<div class="card text-center" id="searchCard">
<div class="alert alert-danger hide" id="emptyInputError" role="alert">
<h4 class="alert-heading">Search Error</h4>
There was an error with your search! Please Try Again!
</div>
<h1 class="card-title text-center searchCardTitle">
Search for Events and Food
</h1>
<div class="input-group input-group-lg searchGroup ml-auto mr-auto">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-map-pin"></i></span>
</div>
<input type="text" name="locationInput" id="locationInput" class="form-control" placeholder="eg: Cleveland, OH..." >
<div class="input-group-append">
<button id="searchBtnCity" class="btn">Search</button>
</div>
</div>
OR
<div class="input-group input-group-lg searchGroup ml-auto mr-auto">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-search"></i></span>
</div>
<input type="text" name="artistInput" id="artistInput" class="form-control" placeholder="Find an artist...">
<div class="input-group-append">
<button id="searchBtnArtist" class="btn">Search</button>
</div>
</div>
</div>
<div class="card hide" style="margin-top: 150px;" id="eventsCards">
<h2 class="card-title">
Events Near You
</h2>
<div class="container-fluid">
<div id="event-listings" class="row">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Content wrapper end -->
</div>
<!-- Page wrapper end -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="js/halfmoon.js"></script>
<script src="js/script.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA7cOdssuq_GyAi3gnD_9GJW_hZ_Hdx6_k"></script>
<script>
function emptyStorage() {
localStorage.clear();
emptyStorageAlert();
}
function emptyStorageAlert() {
var alertContent = "Local Storage has been emptied";
// Built-in function
halfmoon.initStickyAlert({
content: alertContent, // Required, main content of the alert, type: string (can contain HTML)
title: "Local Storage Emptied" // Optional, title of the alert, default: "", type: string
})
};
</script>
</body>
</html>