-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
133 lines (120 loc) · 6.81 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Groovy Artist Search Engine</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body >
<div id="particles-js" style="background-color: rgb(34, 1, 30);"></div>
<!-- Navigation -->
<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<p class="title has-text-white is-3 logo">Groovy Concert Search</p>
</div>
</nav>
<!-- Main Content Area -->
<section class="section">
<div class="container">
<div class="columns">
<main id="artistResults" class="column is-two-thirds is-offset-2 has-background-grey">
<!-- Search Parameters -->
<form class="notification has-background-light">
<div class="buttons">
<div class="control">
<label class="radio" id="buttons">
<input id="countryBtn" type="radio" name="answer" value="Country" class="radBtn">
Country
</label>
<label class="radio" id="buttons">
<input id="classicalBtn" type="radio" name="answer" value="Classical" class="radBtn">
Classical
</label>
<label class="radio" id="buttons">
<input id="electronicBtn" type="radio" name="answer" value="Electronic" class="radBtn">
Electronic
</label>
<label class="radio" id="buttons">
<input id="hiphopBtn" type="radio" name="answer" value="Hip Hop / Rap" class="radBtn">
Hip Hop / Rap
</label>
<label class="radio" id="buttons">
<input id="jazzBtn" type="radio" name="answer" value="Jazz" class="radBtn">
Jazz
</label>
<label class="radio" id="buttons">
<input id="popBtn" type="radio" name="answer" value="Pop" class="radBtn">
Pop
</label>
<label class="radio" id="buttons">
<input id="rockBtn" type="radio" name="answer" value="Rock" class="radBtn">
Rock
</label>
</div>
</div>
<div class="field is-grouped">
<p class="control is-expanded">
<input class="input" id="cityInput" type="text" placeholder="Search for a City">
</p>
<p class="control">
<button id="artistSearch" class="button is-info">Search</button>
</p>
</div>
</form>
<!-- Welcome Info 'hide this after search' -->
<div id="welcomeInfo" class="notification has-background-info has-text-white">
<h4 class="title is-3">Welcome</h2>
<p style="font-size:18px;">Welcome to Groovy Concert Search, your one stop shop for finding information about upcoming performances and the City where you would like see the show! Simply search for a City you would like to see a show in, and select a genre. You will be presented with upcoming tour dates, information & current news about that city.</p>
</div>
<!-- Artist Wiki Info 'show after search' -->
<div id="cityInfo" class="is-hidden notification has-background-info has-text-white">
<!-- Pull artist info here dynamically -->
</div>
<!-- Artist Show Info 'show after search' -->
<div id="artistShows" class=" is-hidden notification has-background-info has-text-white">
<h4 class="title title-color-white is-3"><i class="fas fa-music"></i> Upcoming Shows</h4>
<!-- Pull upcoming shows here here dynamically -->
</div>
</main>
<aside id="articles" class="column is-one-third">
<div id="articleResults" class=" is-hidden notification">
<h4 class="title title-color-white is-3"><i class="far fa-newspaper"></i> Articles</h4>
<!-- Pull articles here dynamically -->
</div>
</aside>
</div>
</section>
<div class="our-footer" style="margin-top:50px;">
<p class="footer-title">
<strong>Powered By: </strong>
</p>
<div class="images-api">
<a href="https://www.ticketmaster.com" target="_blank">
<img src="media/ticketmaster-blue-logo.png" alt="ticketmaster" style="width:80px;height:30px; margin-right: 10px;">
</a>
<a href="https://www.mediawiki.org/wiki/MediaWiki" target="_blank">
<img src="media/mediawikinewLogo.png" alt="wikimedia" style="width:40px;height:30px; margin-right: 10px;">
</a>
<a href="https://newsapi.org" target="_blank">
<img src="media/newsapi.png" alt="wikimedia" style="width:40px;height:30px;">
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
jQuery.ajaxPrefilter(function(options) {
if (options.crossDomain && jQuery.support.cors) {
options.url = 'https://cors-anywhere.herokuapp.com/' + options.url;
}
});
</script>
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script src="lib/moment/moment.min.js"></script>
<script src="particles.js"></script>
<script src="script.js"></script>
</body>
</html>