generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
251 lines (225 loc) · 11.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!------------------------------------------------------------------------------------------script importing external functions-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.1.1/css/hover-min.css" type="text/css"/>
<link rel="stylesheet" href="assets/css/style.css" type="text/css"/>
<!--------------------------------------------------------------------------------------------e-mail js function-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script>
<script type="text/javascript">
(function() {
emailjs.init("user_iezLnx0DcuKeB2NUx8BAK");
})();
</script>
<title>Event-Planner</title>
</head>
<body>
<header>
<!--------------------------------------------------------------------------------------------------------Navigation Bar---->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.html">Artist Watch</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="social.html">Social<span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="events.html">Events<span class="sr-only"></span></a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search Events" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<!---------------------------------------------------------------------------------------------Cross-fade Carousel---->
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleFade" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleFade" data-slide-to="1"></li>
<li data-target="#carouselExampleFade" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/The-Funk-Monkeys.jpg" class="d-block w-100" alt="The Funk Monkeys">
<div class="carousel-caption d-none d-md-block">
<h5>The Funk Monkeys</h5>
<p>Live in Dublin last September, Upcoming Album and future tour dates to be announced!</p>
</div>
</div>
<div class="carousel-item">
<img src="assets/images/The-J-Minors.jpg" class="d-block w-100" alt="The J Minors">
<div class="carousel-caption d-none d-md-block">
<h5>The J Minors</h5>
<p>The J Minors are back with a bang! Check out their upcoming shows accross Europe!</p>
</div>
</div>
<div class="carousel-item">
<img src="assets/images/The-Octovpus-Quartet.jpg" class="d-block w-100" alt="The Octovpus Quartet">
<div class="carousel-caption d-none d-md-block">
<h5>The Octovpus Quartet</h5>
<p>What a show the The Octovpus Quartet put on in December we look forward to their next show!</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-------------------------------------------------------------------------------------------------Upcoming Shows Near You-->
<div class="container">
<div class="row">
<div class="col featured">
<h2>Featured Artists</h2>
</div>
</div>
<div class="row">
<div class="col acts">
<h4>The Funk Monkeys</h4>
<p>This great act has been touring Europe over the past year and has recently announced their next headline
show in the city of Dublin. Venue to be announced shortly.</p>
</div>
<div class="col acts">
<h4>The J Minors</h4>
<p>The J Minors are world renouned for the visuals performances and bring their original sytle of music to Dublin
this coming December. With support from the ever popular Xylophones it promises to be a show few will forget.</p>
</div>
<div class="col acts">
<h4>The Octovpus Quartet</h4>
<p>The Octovpus Quartet are an electric ensemble and have recently announced an upcoming show in the capital
city of Dublin. We look forward to recieving them here and expect a night like no other with acoustic and
electric takes on modern classics.</p>
</div>
</div>
</div>
<!------------------------------------------------Map div-->
<div id="map"></div>
<!------------------------------------------------Ticketmaster Widget-->
<div class="row ticket-master">
<div w-type="event-discovery" w-tmapikey="pLOeuGq2JL05uEGrZG7DuGWu6sh2OnMz" w-googleapikey="AIzaSyBnXc4AL_aE-L2XX4ms3njCqYAuwvzumT0" w-keyword=""
w-theme="oldschool" w-colorscheme="light" w-width="100%" w-height="550" w-size="25" w-border="4" w-borderradius="0" w-postalcode="" w-radius="25"
w-city="" w-period="month" w-layout="fullwidth" w-attractionid="" w-promoterid="" w-venueid="" w-affiliateid="" w-segmentid="" w-proportion="custom"
w-titlelink="off" w-sorting="groupByName" w-id="id_so4y8v" w-countrycode="IE" w-source="" w-branding="Ticketmaster" w-latlong="">
</div>
</div>
<!------------------------------------indexeddb container-->
<script>
//let db = null
//const BtnCreateDB = document.getElementById("BtnCreateDB")
//BtnCreateDB.addEventListener("click", createDB)
//function createDB() {
//const dbName = document.getElementById("txtDB").value
//const request = indexedDB.open("Up Coming Events")
/*on upgrade needed*/
//request.onupgradeneeded = e => {
//db = e.target.result
/*notes = {
Performance: "Kings of Leon"
Venue: "The_Sugar_Club"
Date: "20/10/2020"
}*/
//const upComingEvents = db.createObjectStore("Future_Events", {keyPath:"Performance"})
//alert("Upgrade has been requested");
}
/*on success*/
//request.onsuccess = e => {
//db = e.target.result
//alert(`Success you have updated your entry ${db.name}`);
}
/*onerror*/
//request.onerror = e => {
//alert(`Error: + ${e.target.error} was found`)
}
}
</script>
<!----------------------------------------------------------------------------------------Subscribe-->
<div class="container">
<div class="row">
<div class="col featured subscribe-bar">
<div class="center-form">
<form onsubmit="return sendMail(this);">
<label for="email" class="sr-only">E-Mail</label>
<input type="text" name="email" class="form-control" id="emailaddress" placeholder="E-Mail" required>
<button type="submit" class="btn btn-primary mb-2">Subscribe!</button>
</form>
</div>
</div>
</div>
</div>
<button class="open-button" onclick="openForm()">Hi There! Click Me!</button>
<div class="form-popup" id="myForm">
<form class="form-container">
<h1>Thanks for Visiting</h1>
<label><b>Please Subscribe to the Service at the bottom of the page!</b></label>
<p> Lots of Great Content!</p>
<label><b>Event-Planner</b></label>
<p>Stay Classy :)</p>
<button type="btn" class="btn cancel" onclick="closeForm();return false">Close</button>
</form>
</div>
<!---------------------------------------------------------------------------JS Script------>
<!-- Footer -->
<footer class="page-footer font-small special-color-dark pt-4">
<!-- Footer Elements -->
<div class="container">
<!-- Social buttons -->
<ul class="list-unstyled list-inline social-links text-center">
<li class="list-inline-item">
<a class="btn-floating btn-fb mx-1">
<i class="fa fa-facebook-f"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-tw mx-1">
<i class="fa fa-twitter"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-li mx-1">
<i class="fa fa-linkedin"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-li mx-1">
<i class="fa fa-youtube"> </i>
</a>
</li>
</ul>
<!-- Social buttons -->
</div>
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
<a>Event-Planner.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
<script src="/maps/documentation/javascript/examples/markerclusterer/markerclustererplus@4.0.1.min.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBnXc4AL_aE-L2XX4ms3njCqYAuwvzumT0&callback=initMap"></script>
<script src="https://ticketmaster-api-staging.github.io/products-and-docs/widgets/event-discovery/1.0.0/lib/main-widget.js"></script>
<script src="assets/js/maps.js"></script>
<script src="assets/js/sendEmail.js"></script>
<script src="assets/js/search.js"></script>
<script src="assets/js/contact.js"></script>
</body>
</html>