hawk / commit
Added Spotify logo and icons, changed the styles around a bit to improve mobile experience.
public/Spotify_Icon_RGB_Black.png | Bin 0 -> 16260 bytes public/Spotify_Logo_RGB_Black.png | Bin 0 -> 47591 bytes public/index.html | 96 +++++++++++++++++++++++--------------- public/style.css | 43 +++++++---------- 4 files changed, 76 insertions(+), 63 deletions(-) diff --git a/public/Spotify_Icon_RGB_Black.png b/public/Spotify_Icon_RGB_Black.png new file mode 100755 index 0000000..4a83bfd Binary files /dev/null and b/public/Spotify_Icon_RGB_Black.png differ diff --git a/public/Spotify_Logo_RGB_Black.png b/public/Spotify_Logo_RGB_Black.png new file mode 100755 index 0000000..a3cf946 Binary files /dev/null and b/public/Spotify_Logo_RGB_Black.png differ diff --git a/public/index.html b/public/index.html index 73f14ac..8f42e08 100644 --- a/public/index.html +++ b/public/index.html @@ -11,60 +11,53 @@ </head> <body> - <template id="song-item"> - <div class="song"> - <div> - <span>${name}</span> - <span>${artist}</span> - <span>(${duration})</span> - </div> - <div class="buttons"> - <span class="button" onclick="playChosenSong('${trackId}')"> - <span class="material-symbols-outlined"> - play_arrow - </span> - <span>Play</span> - </span> - <span class="button" onclick="window.open('${trackHref}')"> - <span class="material-symbols-outlined"> - link - </span> - <span>Open</span> - </span> - </div> + <div> + <div> + <h1 id="header"> + <img id="logo" src="hawk.png" /> + <span>Hawk</span> + </h1> + </div> + <div> + <img id="spotify-logo" src="Spotify_Logo_RGB_Black.png" /> </div> - </template> - <div id="header"> - <h1 id="header"> - <img id="logo" src="hawk.png" /> - <span>Hawk</span> - </h1> </div> - <div> - You can specify a duration (for example, "5:32"), and Hawk will find a song in your Spotify library with that - length, or as close to it as possible. - </div> - <div> - The name 'Hawk' comes from the movie <a href="https://www.imdb.com/title/tt0102070/" target="_blank">Hudson - Hawk</a>, where Bruce Willis picks and sings songs of a particular lengths to time things. Yeah, it's - weird, but it's also a fun movie, so check it out. + <div id="intro"> + + <div> + You can specify a duration (for example, "5:32"), and <b>Hawk</b> will find a song in your Spotify library + with that length, and with a single click you can start playing that song. + </div> + <div> + The name <b>Hawk</b> comes from the movie + <a href="https://www.imdb.com/title/tt0102070/" target="_blank">Hudson Hawk</a>, + where Bruce Willis sings songs of particular lengths in order to time things. Yeah, it's + weird, but it's also a pretty fun movie, so check it out. + </div> </div> + <div id="main"> - <button id="signin">Sign In to Spotify</button> + <button id="signin"> + <div class="icon-and-label"> + <img id="spotify-icon" src="Spotify_Icon_RGB_Black.png" /> + Sign In + </div> + </button> <div id="controls"> <div> <h3>Currently playing: <span id="current-song"></span> </h3> </div> - <div class="buttons"> - <span class="button" onclick="pauseOrPlay()"> + <button id="pause-play" onclick="pauseOrPlay()"> + <span class="icon-and-label"> <span class="material-symbols-outlined"> play_pause </span> <span>Play/Pause</span> </span> - </div> + </button> <div> <h3>Search for a song by duration:</h3> @@ -116,6 +109,33 @@ <script src="template.js"></script> <script src="main.js"></script> + <template id="song-item"> + <div class="song"> + <div> + <span>${name}</span> - <span>${artist}</span> + <span>(${duration})</span> + </div> + <div> + <button onclick="playChosenSong('${trackId}')"> + <span class="icon-and-label"> + <span class="material-symbols-outlined"> + play_arrow + </span> + <span>Play</span> + </span> + </button> + <button onclick="window.open('${trackHref}')"> + <span class="icon-and-label"> + <span class="material-symbols-outlined"> + link + </span> + <span>Open</span> + </span> + </button> + </div> + </div> + </template> + </body> </html> \ No newline at end of file diff --git a/public/style.css b/public/style.css index 1b7c84d..319b3cd 100644 --- a/public/style.css +++ b/public/style.css @@ -1,17 +1,8 @@ body { font-family: sans-serif; font-size: 1.5em; - margin: 0; - padding: 0; - max-width: 600px; - margin: 0 auto; -} - -#main, -#controls, -#sign-in-div { - /* margin-top: 2em; */ - /* text-align: center; */ + font-weight: 400; + margin: 0 2em; } #minutes, @@ -27,7 +18,6 @@ body { #seconds-input { width: 3em; font-size: 1.5em; - /* padding: 0.5em; */ } div { @@ -70,27 +60,18 @@ div { 'opsz' 24 } -.button { +.icon-and-label { display: flex; align-items: center; cursor: pointer; justify-items: center; - border: 2px solid black; padding: .25em; margin: .25em; } -.buttons { - display: flex; - justify-content: start; -} - -/* media query for screens smaller than 600px */ -@media (max-width: 600px) { - body { - font-size: 4em; - /* increase the font size */ - } +button { + border: 2px solid black; + font-size: 1em; } .song { @@ -107,4 +88,16 @@ div { padding: .5em; margin: .5em; font-size: 1em; +} + +#spotify-logo { + /* width: 48px; */ + height: 2em; + margin-right: 1em; +} + +#spotify-icon { + width: 1em; + height: 1em; + margin-right: 1em; } \ No newline at end of file