-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
142 lines (134 loc) · 7.47 KB
/
Copy pathindex.html
File metadata and controls
142 lines (134 loc) · 7.47 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./Assets/Images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkb96g-9_ZHg68di_g4cUEDTA5pEi9Ef8&libraries=places&v=weekly"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet">
<title>BandEaR | Discover live artists</title>
<link rel="stylesheet" href="./Assets/CSS/style.css" />
</head>
<body>
<!-- semantic header Navbar-->
<header class="black">
<nav>
<div class="nav-wrapper black">
<a href="index.html" class="brand-logo"><img src="Assets/Images/logo.png" height="45">andEaR</a>
</div>
</nav>
</header>
<!-- semantic main Page Layout-->
<!-- materialize main-content -->
<main class="main-content main-colour">
<!-- materialize grid row -->
<div class="row">
<!-- materialize grid column -->
<!-- aside for seach area of the page -->
<aside class="col s12 m4 l3 black">
<form action="submit" id="search-form" class="input-group">
<label for="artist-input" class="side-content-title white-text">Search by Band Name </label>
<div class="inputs">
<input placeholder="Artist/Band" id="artist-input" class="artist-input white black-text"
type="text">
<button id="search-btn" class="btn white black-text" type="submit" name="action"><i
class="fas fa-search"></i>
</button>
</div>
</form>
<div class="band-details" id="band-details">
</div>
</aside>
<!-- materialize grid column -->
<!-- section for main page body -->
<div class="col s12 m8 l9 main-body">
<!-- materialize grid row to split up the body into 2 columns -->
<div class="row body-row">
<!-- column for the page intro and detail search results -->
<div class="col s12 m6 l6 mid-column">
<!-- cards used for but could be other materialize items? -->
<div class="card blurb-about-site" id="blurb-about-site">
<div class="card-content center blurb-about-site-content">
<p><i>Love music and frequently attend live music shows?</i></p>
<div class="line-break">---------</div>
<p><i>Sick of going to shows with uncertainty as to who you are seeing?</i></p>
<div class="line-break">---------</div>
<p><i>Want an app that previews tracks?</i></p>
<br>
<h2 class="place4u">This is the place for you!!</h2>
<h4><a href="index.html" class="brand-logo"><img src="Assets/Images/logo.png"
height="70">andEaR</a></h4>
<br>
<p style="color: black;">Preview 30 second music snippets and view all upcoming events
in one location!</p>
<br><br><br>
<div>
<u>Future Developments:</u>
<ul>
<li>Allow users to book accommodation</li>
<li>Allow the users to insert certain parameters other than band name</li>
<li>Utilising SkyScanner API to allow users to book flights</li>
</ul>
</div>
</div>
</div>
<div class="card bands-in-town" id="bands-in-town">
<div class="card-title bands-in-town-band-name" id="bands-in-town-band-name">The bands in
Town
</div>
<div class="card-content bands-in-town-list">
<div id="band-info" class="band-info"></div>
<div id="spotify-info"></div>
<div id="band-tracks"></div>
</div>
</div>
</div>
<div class="col s12 m6 l6 right-column">
<div class="card map-canvas" id="map-canvas">
</div>
<div class="spacer">
</div>
<div class="card event-information" id="event-information">
<div class="card-title" id="event-information-title">Event Information</div>
<div class="row scroll" id="scroll">
<div class="col s6 m6 l6">
<div class="card-content event-information-list" id="event-information-list"></div>
</div>
<div class="col s6 m6 l6 no-padding">
<div class="card-content event-information-content" id="event-information-content">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- semantic footer -->
<footer class="black">
<div class="footer-copyright center">
<!-- <div class="container"> -->
<span class="grey-text text-lighten-4 center">© 2020 - <a href="index.html" class="brand-logo"><img
src="Assets/Images/logo.png" height="22">andEaR</a></span>
<!-- links to our github accounts -->
<a class="grey-text text-lighten-4 center" target="_blank" href="https://github.com/smcheah">- Simone</a>
<a class="grey-text text-lighten-4 center" target="_blank" href="https://github.com/willwoodburn1">-
William</a>
<a class="grey-text text-lighten-4 center" target="_blank" href="https://github.com/tonymelek">- Tony</a>
<a class="grey-text text-lighten-4 center" target="_blank" href="https://github.com/chrisjmckeown">-
Chris</a>
<!-- </div> -->
</div>
</footer>
<!-- required scripts -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="./Assets/JS/script.js"></script>
</body>
</html>