forked from arirawr/nelson
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
145 lines (136 loc) · 6.71 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
<html>
<head>
<title>Nelson | Spotify Recommendations Jukebox</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://sp-bootstrap.global.ssl.fastly.net/8.0.0/sp-bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="nelson.css"/>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://sp-bootstrap.global.ssl.fastly.net/8.0.0/sp-bootstrap.js"></script>
<script src="https://sdk.scdn.co/spotify-player.js"></script>
</head>
<body>
<div class="nelson">
<div class="alert alert-info" role="alert">Like the project? It uses the Spotify <a href="https://beta.developer.spotify.com/documentation/web-api/reference/browse/get-recommendations/">Recommendations API</a> and <a href="https://beta.developer.spotify.com/documentation/web-playback-sdk/">Web Playback SDK</a>. Try it yourself!</div>
<div id="notice"></div>
<div class="body">
<button class="btn btn-aubergine btn-lg space-after" onclick="makePlaylist();">Make Playlist</button>
<span class="pull-right">
<span>Logged in as <span id="current-user"></span></span>
<button class="btn btn-secondary btn-sm" onclick="logout();">Logout</button>
</span>
<div class="inline space-after">
<h3>Current genres: <span id="current-genres"></span></h3>
<button class="btn btn-aubergine btn-sm" data-toggle="modal" data-target="#genre-select" onclick="getGenresList();">Choose genres</button>
</div>
<span>Current Playback: <span id="current-playback"></span></span>
<p style="font-size:12px">
Playback is only supported for Spotify Premium users. In Browser Playback is not supported in Safari or on mobile devices.
</p>
<!-- Playback Setting -->
<div class="inline">
<h3 class="spacer">Playback</h3>
<div class="radio-inline" onclick="setPlaybackSetting(1)">
<label>
<input type="radio" name="playback-setting" value="1" checked>
In Browser
<span class="control-indicator"></span>
</label>
</div>
<div class="radio-inline" onclick="setPlaybackSetting(2);">
<label>
<input type="radio" name="playback-setting" value="2" >
In Spotify Client
<span class="control-indicator"></span>
</label>
</div>
<div class="radio-inline" onclick="setPlaybackSetting(0)">
<label>
<input type="radio" name="playback-setting" value="0" >
No Playback
<span class="control-indicator"></span>
</label>
</div>
</div>
<div>
<h5>Mode</h5>
<div class="checkbox-inline" onclick="getRecommendations();">
<label>
<input id="mode-major" type="checkbox" value="1" checked>
Major
<span class="control-indicator"></span>
</label>
</div>
<div class="checkbox-inline" onclick="getRecommendations();">
<label>
<input id="mode-minor" type="checkbox" value="0" checked>
Minor
<span class="control-indicator"></span>
</label>
</div>
<h5>Popularity (0-100)</h5><div id="popularity-slider"></div>
<h5>Tempo (40-200bpm)</h5><div id="tempo-slider"></div>
<h5>Valence ("positivity" of the track)</h5><div id="valence-slider"></div>
<h5>Energy</h5><div id="energy-slider"></div>
<h5>Acousticness</h5><div id="acousticness-slider"></div>
<h5>Danceability</h5><div id="danceability-slider"></div>
<h5>Instrumentalness</h5><div id="instrumentalness-slider"></div>
<h5>Liveness</h5><div id="liveness-slider"></div>
<h5>Speechiness</h5><div id="speechiness-slider"></div>
<h6>
Read about what all these audio features mean <a href="https://beta.developer.spotify.com/documentation/web-api/reference/tracks/get-audio-features/#audio-features-object">here</a>.
</h6>
</div>
</div>
<div id="tracks">
<h4>Select some genres to get recommendations</h4>
<!-- Tracks to be appended here -->
</div>
</div>
<div class="alert alert-info" role="alert">My source code is on <a href="https://glitch.com/edit/#!/nelson">Glitch!</a></div>
<div class="modal fade" id="genre-select">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Select seed genres</h4>
</div>
<div class="modal-body">
<div id="genreLimitAlert" class="alert alert-danger alert-dismissible" role="alert" style="display:none;">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
Oops! You can only select up to 5 genres.
</div>
<div id="genres-list" data-toggle="buttons">
<label class="btn btn-salmon btn-sm">
<!-- Buttons for each genre to be appended here -->
</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-aubergine" data-dismiss="modal" onclick="getRecommendations();">Okay!</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="device-select">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Select a device</h4>
</div>
<div class="modal-body">
<div id="devices-list">
<!-- Buttons for each device to be appended here -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-aubergine" data-dismiss="modal">All done!</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="./client.js"></script>
</body>
</html>