diff options
| author | Leonardo Bishop <me@leonardobishop.com> | 2023-08-06 12:57:55 +0100 |
|---|---|---|
| committer | Leonardo Bishop <me@leonardobishop.com> | 2023-08-06 12:57:55 +0100 |
| commit | 31569d1a78a0731ef9efc7d462ec39acd428d588 (patch) | |
| tree | 8a17373f8b950c2e93872da293216e359403595b /pages | |
| parent | ccb8ef7183e6d7af7bde4bb398c27379fdc7089f (diff) | |
Add spotify page
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/spotify.html | 42 |
1 files changed, 31 insertions, 11 deletions
diff --git a/pages/spotify.html b/pages/spotify.html index b0110ba..e7e51b2 100644 --- a/pages/spotify.html +++ b/pages/spotify.html @@ -1,21 +1,41 @@ --- +stylesheets: + - /css/spotify.css scripts: - /scripts/spotify.js --- <h1>Spotify</h1> -<b> - This is a work in progress once I figure out Spotify's tedious - authentication flow. -</b> -<div id="music-player"> - <span id="song-title"></span> - <span id="song-artist"></span> - <span id="song-album"></span> +<div id="music-player" class="monospace"> + <img id="song-album-art" src=""></img> + <div id="track"> + <span id="song-title"></span> + <div> + <span id="song-artist"></span> - <span id="song-album"></span> + </div> + <div id="song-progress-bar"> + <span id="song-progress"></span> + <div id="song-progress-bar-fill"> + <div id="song-progress-bar-background"></div> + <div id="song-progress-bar-thumb"></div> + </div> + <span id="song-duration"></span> + </div> + </div> <br> - <span id="connection-status"></span> </div> -<br> +<div id="metadata" class="monospace small"> + <div id="connection-status"> + <div id="connection-status-indicator"></div> + <span id="connection-status-text">Disconnected</span> + </div> + <a id="open-in-spotify" target="_blank" href="#"> + Open in Spotify + </a> +</div> +<p class="small"> <em> This page shows what I'm currently listening to on Spotify. - It requires JavaScript to work. + It requires JavaScript to work, and was inspired by + <a href="https://joinmymusic.com/">ssamjh's Music Sync</a>. </em> +</p> |