bckelley/spotify-player
1
0
Fork 0
mirror of https://github.com/bckelley/spotify-player.git synced 2026-08-24 03:24:12 -05:00
Code Issues Packages Projects Releases Wiki Activity

init commit - calling this project finished as of now, may revisit if in the future spotify lifts the premium requirement.

Browse Source
This commit is contained in:
bckelley
2025-07-01 15:17:12 -05:00
commit d3285bb1f3
8 changed files with 398 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+58
View File
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Spotify Now Playing - YourName</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<link rel="icon" href="https://spotify.com/favicon.ico"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body class="bg-gradient-to-br from-green-400 via-black to-gray-900 min-h-screen flex flex-col items-center justify-center">
<div class="bg-white bg-opacity-10 rounded-xl shadow-xl p-8 flex flex-col items-center gap-4 w-full max-w-md">
<img id="profile-pic" class="rounded-full w-16 h-16 border-4 border-green-500" src="" alt="Profile" style="display:none;">
<h1 class="text-2xl font-bold text-white flex items-center gap-2">
<svg fill="#1DB954" viewport="0 0 40 40" class="w-6 h-6"><path d="M12 0C5.371 0 0 5.373 0 12c0 6.627 5.371 12 12 12 6.627 0 12-5.373 12-12C24 5.373 18.627 0 12 0zm5.41 17.817a.905.905 0 0 1-1.246.273c-3.408-2.087-7.705-2.556-12.76-1.395a.908.908 0 0 1-.418-1.77c5.497-1.298 10.219-.77 14.039 1.543a.905.905 0 0 1 .385 1.349zm1.715-3.193a1.13 1.13 0 0 1-1.559.342c-3.899-2.397-9.835-3.09-14.426-1.69a1.131 1.131 0 1 1-.655-2.166c5.135-1.553 11.573-.782 15.99 2.03a1.128 1.128 0 0 1 .35 1.484zm1.789-3.37C16.395 8.765 7.591 8.563 4.768 9.396a1.354 1.354 0 0 1-.727-2.613c3.249-.902 12.808-.67 16.824 2.083a1.353 1.353 0 0 1-1.67 2.388z"/></svg>
Spotify Now Playing
</h1>
<button id="login-btn" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">Login with Spotify</button>
<div id="now-playing" class="w-full flex flex-col items-center" style="display:none;">
<img id="album-art" class="rounded-lg shadow w-40 h-40" src="" alt="Album Art"/>
<div class="mt-4 text-center">
<div id="track-title" class="text-xl font-bold text-white"></div>
<div id="track-artist" class="text-md text-gray-200"></div>
<div id="track-album" class="text-sm text-gray-400"></div>
</div>
<div class="w-full mt-4">
<div class="w-full bg-gray-700 rounded-full h-2.5">
<div id="progress-bar" class="bg-green-400 h-2.5 rounded-full" style="width:0%"></div>
</div>
<div class="flex justify-between text-xs text-gray-300 mt-1">
<span id="progress-current">0:00</span>
<span id="progress-duration">0:00</span>
</div>
<div id="player-controls" class="flex gap-2 mt-4 justify-center items-center">
<button id="prev-btn"
class="btn border border-green-500 text-green-500 bg-transparent rounded-full px-3 py-1 text-base w-16 transition hover:bg-green-500 hover:text-white"
title="Previous"> <i class="fas fa-backward"></i> </button>
<button id="play-btn"
class="btn bg-green-500 text-white w-28 h-28 rounded-full text-2xl flex items-center justify-center transition"
title="Play"><i class="fas fa-play"></i></button>
<button id="pause-btn" style="display:none;"
class="btn bg-green-500 text-white w-28 h-28 rounded-full text-2xl flex items-center justify-center transition"
title="Pause"><i class="fas fa-pause"></i></button>
<button id="next-btn"
class="btn border border-green-500 text-green-500 bg-transparent rounded-full px-3 py-1 text-base w-16 transition hover:bg-green-500 hover:text-white"
title="Next"><i class="fas fa-forward"></i></button>
</div>
</div>
</div>
<div id="error-msg" class="text-red-500 font-bold"></div>
<footer class="mt-4 text-xs text-gray-400">Built by bckelley · <a href="https://github.com/bckelley/spotify-player" class="underline hover:text-green-300">Source</a></footer>
</div>
<script type="module" src="main.js"></script>
</body>
</html>