-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
92 lines (90 loc) · 8.3 KB
/
Copy pathindex.html
File metadata and controls
92 lines (90 loc) · 8.3 KB
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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
<title>Statsify</title>
</head>
<body>
<main style="display: none">
<div id="header">
<div class="userBox">
<img id="profilePicture" src="" alt="profile picture" />
<p id="displayName"></p>
</div>
<svg
width="119"
height="31"
viewBox="0 0 119 31"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.45599 24.48C4.54399 24.48 1.59999 23.68 -1.46031e-05 22.624L1.66399 19.04C3.19999 20.032 5.53599 20.704 7.64799 20.704C9.95199 20.704 10.816 20.096 10.816 19.136C10.816 18.048 9.24799 17.792 7.32799 17.504C4.28799 17.088 0.415985 16.512 0.415985 12.32C0.415985 9.056 3.35999 6.752 8.38399 6.752C10.752 6.752 13.376 7.296 15.008 8.256L13.344 11.808C11.648 10.848 9.95199 10.528 8.38399 10.528C6.14399 10.528 5.18399 11.232 5.18399 12.128C5.18399 15.072 15.584 12.224 15.584 19.008C15.584 22.208 12.608 24.48 7.45599 24.48ZM25.704 24.48C21.64 24.48 19.272 22.4 19.272 18.304V10.848H16.616V7.008H19.272V3.2H24.264V7.008H28.552V10.848H24.264V18.24C24.264 19.712 25.064 20.512 26.408 20.512C27.144 20.512 27.88 20.288 28.424 19.872L29.768 23.392C28.744 24.128 27.24 24.48 25.704 24.48ZM42.5677 24.224V22.112C41.6077 23.648 39.8477 24.48 37.3197 24.48C33.2877 24.48 30.8877 22.24 30.8877 19.264C30.8877 16.224 33.0317 14.112 38.2797 14.112H42.2477C42.2477 11.968 40.9677 10.72 38.2797 10.72C36.4557 10.72 34.5677 11.328 33.3197 12.32L31.5277 8.832C33.4157 7.488 36.1997 6.752 38.9517 6.752C44.1997 6.752 47.2397 9.184 47.2397 14.4V24.224H42.5677ZM42.2477 18.784V17.024H38.8237C36.4877 17.024 35.7517 17.888 35.7517 19.04C35.7517 20.288 36.8077 21.12 38.5677 21.12C40.2317 21.12 41.6717 20.352 42.2477 18.784ZM58.7977 24.48C54.7337 24.48 52.3657 22.4 52.3657 18.304V10.848H49.7097V7.008H52.3657V3.2H57.3577V7.008H61.6457V10.848H57.3577V18.24C57.3577 19.712 58.1577 20.512 59.5017 20.512C60.2377 20.512 60.9737 20.288 61.5177 19.872L62.8617 23.392C61.8377 24.128 60.3337 24.48 58.7977 24.48ZM71.456 24.48C68.544 24.48 65.6 23.68 64 22.624L65.664 19.04C67.2 20.032 69.536 20.704 71.648 20.704C73.952 20.704 74.816 20.096 74.816 19.136C74.816 18.048 73.248 17.792 71.328 17.504C68.288 17.088 64.416 16.512 64.416 12.32C64.416 9.056 67.36 6.752 72.384 6.752C74.752 6.752 77.376 7.296 79.008 8.256L77.344 11.808C75.648 10.848 73.952 10.528 72.384 10.528C70.144 10.528 69.184 11.232 69.184 12.128C69.184 15.072 79.584 12.224 79.584 19.008C79.584 22.208 76.608 24.48 71.456 24.48Z"
fill="#D4E09B"
/>
<path
d="M83.272 24.224V7.264H86.344V24.224H83.272ZM84.808 4C83.656 4 82.76 3.136 82.76 2.016C82.76 0.895998 83.656 -1.90735e-06 84.808 -1.90735e-06C85.992 -1.90735e-06 86.888 0.863998 86.888 1.952C86.888 3.104 86.024 4 84.808 4ZM92.6575 24.224V9.792H89.7775V7.264H92.6575V5.76C92.6575 2.464 94.6415 0.287998 98.2575 0.287998C99.5695 0.287998 100.849 0.607998 101.713 1.28L100.785 3.616C100.145 3.136 99.3135 2.816 98.4175 2.816C96.5935 2.816 95.6655 3.84 95.6655 5.792V7.264H100.593V9.792H95.7295V24.224H92.6575ZM104.133 30.624C102.501 30.624 100.837 30.08 99.781 29.056L101.093 26.752C101.925 27.552 102.981 28 104.133 28C105.605 28 106.533 27.328 107.365 25.376L107.909 24.224L100.421 7.264H103.621L109.509 20.8L115.397 7.264H118.405L110.181 25.92C108.677 29.504 106.725 30.624 104.133 30.624Z"
fill="#A3B18A"
/>
</svg>
</div>
<div id="container">
<div class="list">
<div class="listHeader">
<p>your top five tracks in the last</p>
<div class="listButtons">
<button id="tracks7days" class="rangeButton">7</button>
<button id="tracks30days" class="rangeButton">30</button>
<button id="tracks365days" class="rangeButton">365</button>
</div>
<p>days</p>
</div>
<div id="topTracks" class="listCards"></div>
</div>
<div class="list">
<div class="listHeader">
<p>your top five artists in the last</p>
<div class="listButtons">
<button id="artists7days" class="rangeButton">7</button>
<button id="artists30days" class="rangeButton">30</button>
<button id="artists365days" class="rangeButton">365</button>
</div>
<p>days</p>
</div>
<div id="topArtists" class="listCards"></div>
</div>
</div>
</main>
<div class="loginScreen">
<svg
width="119"
height="31"
viewBox="0 0 119 31"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.45599 24.48C4.54399 24.48 1.59999 23.68 -1.46031e-05 22.624L1.66399 19.04C3.19999 20.032 5.53599 20.704 7.64799 20.704C9.95199 20.704 10.816 20.096 10.816 19.136C10.816 18.048 9.24799 17.792 7.32799 17.504C4.28799 17.088 0.415985 16.512 0.415985 12.32C0.415985 9.056 3.35999 6.752 8.38399 6.752C10.752 6.752 13.376 7.296 15.008 8.256L13.344 11.808C11.648 10.848 9.95199 10.528 8.38399 10.528C6.14399 10.528 5.18399 11.232 5.18399 12.128C5.18399 15.072 15.584 12.224 15.584 19.008C15.584 22.208 12.608 24.48 7.45599 24.48ZM25.704 24.48C21.64 24.48 19.272 22.4 19.272 18.304V10.848H16.616V7.008H19.272V3.2H24.264V7.008H28.552V10.848H24.264V18.24C24.264 19.712 25.064 20.512 26.408 20.512C27.144 20.512 27.88 20.288 28.424 19.872L29.768 23.392C28.744 24.128 27.24 24.48 25.704 24.48ZM42.5677 24.224V22.112C41.6077 23.648 39.8477 24.48 37.3197 24.48C33.2877 24.48 30.8877 22.24 30.8877 19.264C30.8877 16.224 33.0317 14.112 38.2797 14.112H42.2477C42.2477 11.968 40.9677 10.72 38.2797 10.72C36.4557 10.72 34.5677 11.328 33.3197 12.32L31.5277 8.832C33.4157 7.488 36.1997 6.752 38.9517 6.752C44.1997 6.752 47.2397 9.184 47.2397 14.4V24.224H42.5677ZM42.2477 18.784V17.024H38.8237C36.4877 17.024 35.7517 17.888 35.7517 19.04C35.7517 20.288 36.8077 21.12 38.5677 21.12C40.2317 21.12 41.6717 20.352 42.2477 18.784ZM58.7977 24.48C54.7337 24.48 52.3657 22.4 52.3657 18.304V10.848H49.7097V7.008H52.3657V3.2H57.3577V7.008H61.6457V10.848H57.3577V18.24C57.3577 19.712 58.1577 20.512 59.5017 20.512C60.2377 20.512 60.9737 20.288 61.5177 19.872L62.8617 23.392C61.8377 24.128 60.3337 24.48 58.7977 24.48ZM71.456 24.48C68.544 24.48 65.6 23.68 64 22.624L65.664 19.04C67.2 20.032 69.536 20.704 71.648 20.704C73.952 20.704 74.816 20.096 74.816 19.136C74.816 18.048 73.248 17.792 71.328 17.504C68.288 17.088 64.416 16.512 64.416 12.32C64.416 9.056 67.36 6.752 72.384 6.752C74.752 6.752 77.376 7.296 79.008 8.256L77.344 11.808C75.648 10.848 73.952 10.528 72.384 10.528C70.144 10.528 69.184 11.232 69.184 12.128C69.184 15.072 79.584 12.224 79.584 19.008C79.584 22.208 76.608 24.48 71.456 24.48Z"
fill="#D4E09B"
/>
<path
d="M83.272 24.224V7.264H86.344V24.224H83.272ZM84.808 4C83.656 4 82.76 3.136 82.76 2.016C82.76 0.895998 83.656 -1.90735e-06 84.808 -1.90735e-06C85.992 -1.90735e-06 86.888 0.863998 86.888 1.952C86.888 3.104 86.024 4 84.808 4ZM92.6575 24.224V9.792H89.7775V7.264H92.6575V5.76C92.6575 2.464 94.6415 0.287998 98.2575 0.287998C99.5695 0.287998 100.849 0.607998 101.713 1.28L100.785 3.616C100.145 3.136 99.3135 2.816 98.4175 2.816C96.5935 2.816 95.6655 3.84 95.6655 5.792V7.264H100.593V9.792H95.7295V24.224H92.6575ZM104.133 30.624C102.501 30.624 100.837 30.08 99.781 29.056L101.093 26.752C101.925 27.552 102.981 28 104.133 28C105.605 28 106.533 27.328 107.365 25.376L107.909 24.224L100.421 7.264H103.621L109.509 20.8L115.397 7.264H118.405L110.181 25.92C108.677 29.504 106.725 30.624 104.133 30.624Z"
fill="#A3B18A"
/>
</svg>
<button id="loginButton">Sign in with Spotify</button>
</div>
<div id="loadingOverlay">
<div class="loader"></div>
</div>
<script type="module" src="scripts/ui.js"></script>
</body>
</html>