eta357/Spotify-Top-Songs-Playlist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Finish project

Browse Source
This commit is contained in:
Ethan Girouard
2025-08-01 12:37:53 -04:00
parent 260142445a
commit fde8f3d7a3
7 changed files with 497 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
html/callback.html Normal file
View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/style.css">
<title>Spotify Top Songs Playlist | Setup Complete</title>
<link rel="icon" type="image/x-icon" href="https://spotify.com/favicon.ico">
</head>
<body>
<div class="center">
<h1>Spotify Top Songs Playlist</h1>
<h2>Setup Complete!</h1>
<p class="description">Look for a new playlist on Spotify</p>
</div>
</body>
</html>

22
html/error.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/style.css">
<title>Spotify Top Songs Playlist</title>
<link rel="icon" type="image/x-icon" href="https://spotify.com/favicon.ico">
</head>
<body>
<div class="center">
<h1>Spotify Top Songs Playlist</h1>
<h2>Error Occurred</h2>
<p class="description error">{{ ERROR_MESSAGE }}</p>
<a href="/" class="btn home">
<p>Return Home</p>
</a>
</div>
</body>
</html>

26
html/home.html Normal file
View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/style.css">
<title>Spotify Top Songs Playlist</title>
<link rel="icon" type="image/x-icon" href="https://spotify.com/favicon.ico">
</head>
<body>
<div class="center">
<h1>Spotify Top Songs Playlist</h1>
<p class="description">Create an auto-updating playlist containing your recent top played tracks</p>
<a href="/authorize" class="btn spotify">
<img class="logo-img"
src="https://storage.googleapis.com/pr-newsroom-wp/1/2021/02/Spotify_Icon_RGB_White.png"
alt="Spotify Logo"
height="25"
/>
<p>Connect Spotify</p>
</a>
</div>
</body>
</html>

67
html/style.css Normal file
View File

@ -0,0 +1,67 @@
body {
background-color: #121212;
color: white;
font-family: sans-serif;
}
div.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
}
h1 h2 {
margin: 5px;
}
p.description {
color: grey;
margin: 15px;
}
p.error {
color: red;
}
a.btn {
color: white;
background-color: red;
border-radius: 10px;
padding: 5px;
margin: 5px;
text-decoration: none;
font-weight: bold;
display: flex;
align-items: center;
p {
margin: 5px;
}
}
a.btn:hover {
}
a.btn:active {
}
a.spotify {
background-color: #1ED760;
}
a.spotify:hover {
background-color: #18ac4d;
}
a.spotify:active {
background-color: #159643;
}
img.logo-img {
margin: 5px;
}