-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprofile.html
177 lines (159 loc) · 8.48 KB
/
profile.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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Material Design Bootstrap -->
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.18.0/css/mdb.min.css" rel="stylesheet">-->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Righteous&family=Roboto:wght@300;400;500&family=Squada+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/coliff/bootstrap-rfs/bootstrap-rfs.css" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.min.js"></script>
<script type="text/javascript" src="clamp.min.js"></script>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="profile.js"></script>
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<title>Spotify Data</title>
</head>
<body>
<div id="content" style="display: none;">
<div class="container-fluid mx-md-auto px-md-auto">
<div class="row m-0">
<div class="px-0 col-lg-9 col-md-8">
<div id="main_row" class="col px-0">
<div class="row text-center m-0 mb-3">
<span id="image" class="dot mt-4 ml-md-0 mr-md-4 mx-auto">
<svg width="75" height="75" fill="#88898D" viewBox="0 0 18 20" xmlns="http://www.w3.org/2000/svg" data-testid="user-icon" style="margin: 37px">
<path d="M15.216 13.717L12 11.869C11.823 11.768 11.772 11.607 11.757 11.521C11.742 11.435 11.737 11.267 11.869 11.111L13.18 9.57401C14.031 8.58001 14.5 7.31101 14.5 6.00001V5.50001C14.5 3.98501 13.866 2.52301 12.761 1.48601C11.64 0.435011 10.173 -0.0879888 8.636 0.0110112C5.756 0.198011 3.501 2.68401 3.501 5.67101V6.00001C3.501 7.31101 3.97 8.58001 4.82 9.57401L6.131 11.111C6.264 11.266 6.258 11.434 6.243 11.521C6.228 11.607 6.177 11.768 5.999 11.869L2.786 13.716C1.067 14.692 0 16.526 0 18.501V20H1V18.501C1 16.885 1.874 15.385 3.283 14.584L6.498 12.736C6.886 12.513 7.152 12.132 7.228 11.691C7.304 11.251 7.182 10.802 6.891 10.462L5.579 8.92501C4.883 8.11101 4.499 7.07201 4.499 6.00001V5.67101C4.499 3.21001 6.344 1.16201 8.699 1.00901C9.961 0.928011 11.159 1.35601 12.076 2.21501C12.994 3.07601 13.5 4.24301 13.5 5.50001V6.00001C13.5 7.07201 13.117 8.11101 12.42 8.92501L11.109 10.462C10.819 10.803 10.696 11.251 10.772 11.691C10.849 12.132 11.115 12.513 11.503 12.736L14.721 14.585C16.127 15.384 17.001 16.884 17.001 18.501V20H18.001V18.501C18 16.526 16.932 14.692 15.216 13.717Z"></path>
</svg>
</span>
<div class="display-3 text-md-left font-weight-bolder ml-md-0 mx-auto my-auto"><span id="name"></span>
<h5 class="text-center">Spotify ID: <a class="link text-decoration-none" id="id" href="#"></a> <span class="d-sm-inline-block d-none">|</span> <span id="account_type" style="color: #1DB954;">Free</span></h5>
</div>
</div>
<div class="text-center" id="slider">
<b>Time Range</b>
<div>
Shorter
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-ticks="[1, 2, 3]" data-slider-value="2" data-slider-lock-to-ticks="true" data-slider-tooltip="show" />
Longer
</div>
</div>
<div id="TopArtistsdiv" class=""></div>
<div id="TopTracksdiv" class=""></div>
<div id="RecentlyPlayeddiv" class=""></div>
</div>
</div>
<div id="stats" class=" d-inline-flex flex-column col-lg-3 col-md-4 text-center mt-2 h-100 mx-auto" style="border-radius: 40px; width: 90%">
<!--background-color: #1DB954;-->
<!--<a href="#" class="text-light text-decoration-none"><span id="following" class="display-2">200</span>
<h3 class="mb-3">Following</h3>
</a>-->
<!--<span id="country" style="font-family: 'Squada One', cursive; font-size: 9vw; line-height: .9em;" class="display-2">US</span>
<h3 class="mb-3 text-black-50">Country</h3>
<div class="border-bottom"></div>
<div style="height: 150px">
<span id="genre" style="font-family: 'Squada One', cursive; font-size: 6vw; line-height: .9em;" class="display-2">Hip Hop</span>
<h3 class="mb-3 text-black-50">Top Genre</h3>
</div>
<div class="border-bottom"></div>
<div style="height: 150px">
<span id="genre" style="font-family: 'Squada One', cursive; height: 100px; font-size: 9vw; line-height: .9em;" class="display-2">US</span>
<h3 class="mb-3 text-black-50">Country</h3>
</div>-->
<!--<a href="#" class="text-dark text-body text-decoration-none"><span id="followers" style="font-family: 'Squada One', cursive; font-size: 9vw; line-height: .9em;" class="display-2">69</span>
<h3 class="mb-3 text-black-50">Followers</h3>
</a>-->
</div>
</div>
</div>
</div>
<style type="text/css">
.dot {
height: 150px;
width: 150px;
background-color: #222327;
border-radius: 50%;
display: inline-block;
}
#ex1Slider {
width: 55%;
margin-left: 15px;
margin-right: 15px;
}
#ex1Slider .slider-selection {
background: #1DB954;
}
#ex1Slider .slider-handle {
background: #1DB954;
}
#ex1Slider .slider-tick {
background: white;
opacity: 1;
}
#ex1Slider .in-selection {
background: #1DB954;
opacity: 1;
}
#ex1Slider .slider-track-high {
background: white;
}
.cover-container {
height: 100%;
width: 100%;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
margin-left: 0;
}
.cover-item {
position: relative;
display: inline-block;
margin: 8px 8px;
width: 200px;
height: 100%;
vertical-align: bottom;
}
.art {
box-shadow: 1px 1px 8px #000;
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
width: 200px;
height: 200px;
font-size: 9em;
color: white;
padding: 0;
line-height: 200px;
}
.artist {
border-radius: 100px;
}
.album {
border-radius: 2px;
}
a.display-3:hover {
opacity: 50%;
}
a#id:hover {
opacity: 50%;
}
.overlay {
z-index: 5;
display: none;
background-color: rgba(0, 0, 0, 0.75);
font-family: 'Righteous', cursive;
}
</style>
</body>
</html>