-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
106 lines (98 loc) · 4.54 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Billboard Top 100 Spotify Playlist Generator</title>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<link href="https://fonts.googleapis.com/css?family=Marvel:700|Michroma|Josefin+Sans:700&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<script type="text/javascript" src="auth.js"></script>
</head>
<body>
<section>
<div class="block level-right">
<a href="http://accounts.spotify.com/authorize?client_id=603ba6b52bf24da0a23b5db603d64c25&redirect_uri=https://dayadam.github.io/billboard-spotify/&scope=playlist-modify-public,playlist-modify-private,user-read-private,user-read-email&response_type=token"
id="connect" class="index button is-large spotify-button"><i class="fab fa-spotify"></i>Connect with
Spotify</a>
</div>
<section class="index">
<h1 class="title is-1 has-text-white is-marginless">
<span class="billboard">billboard</span>
<span class="top100">Top 100</span>
</h1>
<h2 class="title is-3 has-text-white">Spotify Playlist Generator</h2>
<div class="container">
<div class="block">
<div class="box main">
<h3 class="title is-3 has-text-white">
Welcome to the Billboard Top 100 Spotify Playlist Generator!
</h3>
<p class="content is-medium has-text-white">
What was that song that was so popular your senior year of high
school? How about that track that reverberated in the clubs two
summers ago? Drawing a blank? Not anymore! Re-live your life's
soundtrack! Just pick a date below and the generator will create a
playlist containing the Billboard Top 100 for the week you have
selected.
</p>
<div class="block">
<h3 class="title is-3 has-text-white">Select a Date:</h3>
<input id="userDate" type="date" />
<label for="genre" class="label is-large has-text-white">Select a Genre:</label>
<form action="#">
<select name="charts">
<option value="hot-100">The Hot 100</option>
<option value="artist-100">Artist 100</option>
<option value="pop-songs">Pop</option>
<option value="r-b-hip-hop-songs">R&B/Hip-Hop</option>
<option value="rock-songs">Rock</option>
<option value="latin-songs">Latin</option>
<option value="country-songs">Country</option>
<option value="dance-electronic-songs">Dance/Electronic</option>
</select>
<input id="submit" type="submit" />
</form>
</div>
</div>
</div>
</div>
</section>
</section>
</div>
<footer class="has-text-centered">© 2019 Team Turquoise</footer>
<section id="results">
<header>
<h1 class="header title is-2 has-text-white">Your Playlist</h1>
</header>
<div class="block is-marginless">
<div class="columns">
<!-- <div class="column is-full date-container">
<h3 id="date" class="title is-2 has-text-white tableHead is-marginless"><span class="dateChanged">October 30,
2019</span></h2>
</div> -->
<a href="http://accounts.spotify.com/authorize?client_id=603ba6b52bf24da0a23b5db603d64c25&redirect_uri=https://dayadam.github.io/billboard-spotify/&scope=playlist-modify-public,playlist-modify-private,user-read-private,user-read-email&response_type=token"
class="button is-large spotify-button save is-marginless"><i class="fab fa-spotify"></i>Save
Playlist on Spotify</a>
</div>
</div>
<div class="block">
<div class="columns">
<div class="column is-half">
<img class="cover" />
</div>
<div class="column is-half is-paddingless">
<table class="table is-fullwidth">
<tbody id="resultsTable" class="is-fullwidth is-marginless">
</tbody>
</div>
</div>
</div>
</section>
<!-- <footer>© 2019 Team Turquoise</footer> -->
</body>
</html>