-
Notifications
You must be signed in to change notification settings - Fork 0
/
spotify.html
105 lines (105 loc) · 4.12 KB
/
spotify.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
<!doctype html>
<html>
<head>
<title>ExaBerries - Spotify Profiler</title>
<link rel="stylesheet" href="assets/css/stylesheet.css">
<link rel="stylesheet" href="assets/css/spotify/spotify.css">
<link rel="stylesheet" href="assets/css/spotify/background.css">
<link rel="stylesheet" href="assets/css/spotify/general.css">
<link rel="stylesheet" href="assets/css/spotify/chronological.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/spotify/spotify.js"></script>
<script src="assets/js/spotify/spotify-auth.js"></script>
<script src="assets/js/spotify/spotify-load.js"></script>
<script src="assets/js/spotify/spotify-background.js"></script>
</head>
<body class="no-scroll">
<div class="background">
<div id="auth-background">
<div style="background-color: #1db954;z-index: -2;width: 100%;height: 100%;position: absolute;top: 0;"></div>
<div>
<canvas id="back-chart-0" class="background-auth-chart" width="200" height="100"></canvas>
<canvas id="back-chart-1" class="background-auth-chart" width="100" height="100"></canvas>
<canvas id="back-chart-2" class="background-auth-chart" width="100" height="100"></canvas>
<canvas id="back-chart-3" class="background-auth-chart" width="100" height="200"></canvas>
<canvas id="back-chart-4" class="background-auth-chart" width="100" height="100"></canvas>
<canvas id="back-chart-5" class="background-auth-chart" width="100" height="100"></canvas>
<canvas id="back-chart-6" class="background-auth-chart" width="100" height="100"></canvas>
<canvas id="back-chart-7" class="background-auth-chart" width="100" height="100"></canvas>
<div id="angled"></div>
</div>
<script>createBackgroundCharts()</script>
</div>
</div>
<div class="content">
<div id="auth">
<h1 style="font-size: 400%">Spotify Profiler</h1>
<h1>Log in to get started</h1>
<button class="btn-dark" onClick="auth()">Log In</button>
</div>
<div id="filter-songs" style="display: none">
<h2>Filter</h2>
<ul id="filter-songs-buttons">
</ul>
</div>
<div id="content" style="display: none">
<h1 id="username"></h1>
<div id="general">
<h2>General Stats</h2>
<div id="general-grid">
<div id="num-songs">
<b id="num-songs-stat" style="font-size: 800%;"></b><b id="num-songs-txt" style="font-size: 640%;"></b>
</div>
<div id="num-albums">
<b id="num-albums-stat" style="font-size: 800%;"></b>
<br>
<b id="num-albums-txt" style="font-size: 400%;"></b>
</div>
<div id="num-artists">
<b id="num-artists-stat" style="font-size: 800%;"></b>
<br>
<b id="num-artists-txt" style="font-size: 400%;"></b>
</div>
<div id="avg-length">
<b id="avg-length-stat" style="font-size: 800%;"></b>
<br>
<b style="font-size: 320%;"> average song length</b>
</div>
</div>
</div>
<div id="chronological">
<h2>Chronological Breakdown</h2>
<div id="chronological-grid">
<div>
<b id="weighted-mean-year-txt" style="font-size: 640%"></b>
<br>
<b style="font-size: 140%">weighted average year</b>
</div>
<div>
<b id="year-stdev-txt" style="font-size: 640%"></b>
<br>
<b style="font-size: 140%">standard deviation (how spread out through the years your music is)</b>
</div>
</div>
<div id="chronological-graph-buttons">
<button id="chronological-graph-button"></button>
<script>setChronoSort(false)</script>
</div>
<canvas id="songsperyear"></canvas>
<h3 id="songslist-header">Songs:</h3>
<div id="songslist"></div>
<script>createSongChart()</script>
</div>
</div>
</div>
<footer style="display: none">
<ul>
<li onClick="$(location).attr('href', '//' + $(location).attr('href').split('/')[2]);">exaberries.github.io</li>
<li>spotify profiler</li>
</ul>
</footer>
<script>checkAuth()</script>
</body>
</html>