hawk / commit
Replaced icons, added attribution, improving the look in small chunks.
public/favicon.ico | Bin 1150 -> 0 bytes public/favicon.png | Bin 872 -> 1625 bytes public/favicon.svg | 26 +++++++++----------------- public/hawk.png | Bin 0 -> 10621 bytes public/hawk.svg | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ public/index.html | 9 ++++++--- public/main.js | 25 +++++++++++++++---------- public/signin.js | 2 +- public/style.css | 16 +++++++++++----- 9 files changed, 90 insertions(+), 36 deletions(-) diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index 1eeafc2..0000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/favicon.png b/public/favicon.png index 35b6215..ef4007a 100644 Binary files a/public/favicon.png and b/public/favicon.png differ diff --git a/public/favicon.svg b/public/favicon.svg index 5ae5ac0..6f5f883 100644 --- a/public/favicon.svg +++ b/public/favicon.svg @@ -1,19 +1,11 @@ -<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="96.000000pt" height="96.000000pt"><svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="96.000000pt" height="96.000000pt" viewBox="0 0 96.000000 96.000000" preserveAspectRatio="xMidYMid meet"> - -<g transform="translate(0.000000,96.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"> -<path d="M400 771 c-76 -25 -173 -109 -218 -190 l-23 -41 31 0 31 0 -36 -52 -c-20 -30 -35 -65 -35 -82 0 -25 3 -28 23 -22 12 4 36 9 53 12 l31 6 -10 -55 -c-13 -72 -4 -107 28 -107 13 0 27 5 31 11 3 6 22 17 40 25 34 14 35 14 65 -21 -36 -41 74 -69 107 -79 21 -7 22 -4 22 38 0 101 37 206 86 245 22 17 41 21 101 -21 41 0 84 -5 95 -11 20 -11 20 -9 16 47 -4 50 -9 61 -39 86 -19 16 -38 34 --44 40 -60 65 -92 89 -142 108 -62 24 -172 35 -213 21z m215 -90 c35 -18 66 --40 70 -50 10 -31 -22 -90 -58 -104 -53 -23 -96 -75 -117 -145 -11 -35 -20 --75 -20 -88 0 -13 -4 -24 -9 -24 -10 0 -48 43 -67 76 -10 17 -15 18 -45 6 -69 --28 -70 -28 -63 9 4 19 15 56 26 83 l19 48 -26 -6 c-14 -3 -37 -9 -52 -13 -l-28 -6 29 39 c16 21 40 51 54 66 l24 27 -37 3 -38 3 27 32 c14 17 50 43 79 -58 68 35 141 30 232 -14z"></path> -<path d="M510 621 c0 -19 39 -51 63 -51 13 0 32 6 42 14 18 13 16 15 -25 26 --25 6 -53 13 -62 16 -10 3 -18 1 -18 -5z"></path> -</g> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="121.32814mm" height="116.39271mm"><svg width="121.32814mm" height="116.39271mm" viewBox="0 0 121.32814 116.39271" version="1.1" id="SvgjsSvg1006" inkscape:export-filename="hawk.png" inkscape:export-xdpi="42.759998" inkscape:export-ydpi="42.759998" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> + <sodipodi:namedview id="SvgjsSodipodi:namedview1005" pagecolor="#ffffff" bordercolor="#000000" borderopacity="0.25" inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" inkscape:document-units="mm"></sodipodi:namedview> + <defs id="SvgjsDefs1004"></defs> + <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="SvgjsG1003"> + <g id="SvgjsG1002" transform="matrix(0.26458333,0,0,0.26458333,-115.72487,-82.914759)"> + <path id="SvgjsPath1001" d="m 6604.14,4360.95 c 0,0 163.65,288.35 101.31,506.56 -62.34,218.2 -311.73,448.1 -814.38,420.82 0,0 -374.07,-241.58 -728.65,-93.52 -354.59,148.07 -736.45,-124.68 -452,-413.03 284.44,-288.34 670.35,-236.2 659.96,-651.83 0,0 190.95,411.41 622,519.35 331.2,82.93 623.45,27.27 611.76,-288.35" style="fill:#211c1d;fill-opacity:1;fill-rule:nonzero;stroke:none" transform="matrix(0.13333333,0,0,-0.13333333,0,1066.6667)"></path> + <path id="SvgjsPath1000" d="m 5879.38,5366.26 c 0,0 -97.42,58.45 -385.76,179.24 -288.34,120.8 -872.82,155.86 -1278.06,0 -405.25,-155.86 -716.97,-463.68 -833.86,-923.48 0,0 292.24,288.35 576.69,331.21 0,0 -498.76,-300.04 -623.45,-833.86 0,0 475.37,463.69 775.41,533.82 0,0 -666.31,-401.34 -829.96,-1055.96 0,0 280.55,296.14 526.03,342.9 0,0 175.35,-490.97 50.65,-892.31 0,0 413.04,300.03 467.59,755.93 0,0 -23.38,-214.31 81.82,-463.69 105.21,-249.38 -11.69,-568.89 -11.69,-568.89 0,0 300.04,257.17 354.59,490.96 54.56,233.79 -11.68,646.83 167.55,783.2 0,0 -128.58,-264.96 -35.06,-584.48 93.51,-319.51 268.85,-779.31 15.58,-1110.51 0,0 619.55,311.72 557.21,837.75 -62.35,526.04 42.86,931.28 42.86,931.28 0,0 -66.24,-370.17 3.9,-658.52 70.13,-288.34 124.68,-592.27 23.37,-845.55 0,0 253.88,280.55 140.58,779.31 -113.3,498.76 -24.83,974.33 342.6,1210.72 0,0 -432.37,-109.1 -662.41,-575.58 0,0 0,303.93 -187.04,409.14 -187.04,105.2 -502.6,248.18 -564.99,424.72 -64.81,183.33 -21.13,362.22 276.65,426.93 187.03,40.65 238.77,134.65 463.69,118.58 272.75,-19.48 327.3,-155.86 545.51,-42.86" style="fill:#211c1d;fill-opacity:1;fill-rule:nonzero;stroke:none" transform="matrix(0.13333333,0,0,-0.13333333,0,1066.6667)"></path> + </g> + </g> </svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } } </style></svg> \ No newline at end of file diff --git a/public/hawk.png b/public/hawk.png new file mode 100644 index 0000000..9c2172d Binary files /dev/null and b/public/hawk.png differ diff --git a/public/hawk.svg b/public/hawk.svg new file mode 100644 index 0000000..3936b0f --- /dev/null +++ b/public/hawk.svg @@ -0,0 +1,48 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + width="121.32814mm" + height="116.39271mm" + viewBox="0 0 121.32814 116.39271" + version="1.1" + id="svg1" + inkscape:export-filename="hawk.png" + inkscape:export-xdpi="42.759998" + inkscape:export-ydpi="42.759998" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <sodipodi:namedview + id="namedview1" + pagecolor="#ffffff" + bordercolor="#000000" + borderopacity="0.25" + inkscape:showpageshadow="2" + inkscape:pageopacity="0.0" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" + inkscape:document-units="mm" /> + <defs + id="defs1" /> + <g + inkscape:label="Layer 1" + inkscape:groupmode="layer" + id="layer1"> + <g + id="group-R5" + transform="matrix(0.26458333,0,0,0.26458333,-115.72487,-82.914759)"> + <path + id="path2" + d="m 6604.14,4360.95 c 0,0 163.65,288.35 101.31,506.56 -62.34,218.2 -311.73,448.1 -814.38,420.82 0,0 -374.07,-241.58 -728.65,-93.52 -354.59,148.07 -736.45,-124.68 -452,-413.03 284.44,-288.34 670.35,-236.2 659.96,-651.83 0,0 190.95,411.41 622,519.35 331.2,82.93 623.45,27.27 611.76,-288.35" + style="fill:#211c1d;fill-opacity:1;fill-rule:nonzero;stroke:none" + transform="matrix(0.13333333,0,0,-0.13333333,0,1066.6667)" /> + <path + id="path3" + d="m 5879.38,5366.26 c 0,0 -97.42,58.45 -385.76,179.24 -288.34,120.8 -872.82,155.86 -1278.06,0 -405.25,-155.86 -716.97,-463.68 -833.86,-923.48 0,0 292.24,288.35 576.69,331.21 0,0 -498.76,-300.04 -623.45,-833.86 0,0 475.37,463.69 775.41,533.82 0,0 -666.31,-401.34 -829.96,-1055.96 0,0 280.55,296.14 526.03,342.9 0,0 175.35,-490.97 50.65,-892.31 0,0 413.04,300.03 467.59,755.93 0,0 -23.38,-214.31 81.82,-463.69 105.21,-249.38 -11.69,-568.89 -11.69,-568.89 0,0 300.04,257.17 354.59,490.96 54.56,233.79 -11.68,646.83 167.55,783.2 0,0 -128.58,-264.96 -35.06,-584.48 93.51,-319.51 268.85,-779.31 15.58,-1110.51 0,0 619.55,311.72 557.21,837.75 -62.35,526.04 42.86,931.28 42.86,931.28 0,0 -66.24,-370.17 3.9,-658.52 70.13,-288.34 124.68,-592.27 23.37,-845.55 0,0 253.88,280.55 140.58,779.31 -113.3,498.76 -24.83,974.33 342.6,1210.72 0,0 -432.37,-109.1 -662.41,-575.58 0,0 0,303.93 -187.04,409.14 -187.04,105.2 -502.6,248.18 -564.99,424.72 -64.81,183.33 -21.13,362.22 276.65,426.93 187.03,40.65 238.77,134.65 463.69,118.58 272.75,-19.48 327.3,-155.86 545.51,-42.86" + style="fill:#211c1d;fill-opacity:1;fill-rule:nonzero;stroke:none" + transform="matrix(0.13333333,0,0,-0.13333333,0,1066.6667)" /> + </g> + </g> +</svg> diff --git a/public/index.html b/public/index.html index ae7ce88..34875ae 100644 --- a/public/index.html +++ b/public/index.html @@ -12,8 +12,8 @@ <template id="song-item"> <div class="song"> <div> - <span>${name}</span> - <span>${duration}</span> + <span>${name}</span> - <span>${artist}</span> + <span>(${duration})</span> </div> <div> <button id="play-${trackId}" onclick="playTrack('${trackId}')">Play</button> @@ -23,7 +23,7 @@ </template> <div id="header"> <h1 id="header"> - <img id="logo" src="favicon.png" /> + <img id="logo" src="hawk.png" /> <span>Hawk</span> </h1> </div> @@ -69,6 +69,9 @@ <div> <a href="https://gitlab.com/PavelSafronov/hawk" target="_blank">Source</a> </div> + <div> + <a href="https://www.vecteezy.com/free-vector/hawk">Hawk Vectors by Vecteezy</a> + </div> </div> </div> <script src="version.js"></script> diff --git a/public/main.js b/public/main.js index 7d05602..8861d38 100644 --- a/public/main.js +++ b/public/main.js @@ -40,17 +40,22 @@ searchButton.addEventListener('click', async () => { const seconds = document.getElementById('seconds-input').value; const tracks = await search(minutes, seconds); const resultsDiv = document.getElementById('results'); - resultsDiv.innerHTML = ''; - tracks.forEach(track => { - const songItem = document.querySelector('#song-item'); - const html = interpolate(songItem.innerHTML, { - name: track.name, - duration: formatDuration(track.duration_ms), - trackId: track.id, - trackHref: track.external_urls.spotify + if (tracks.length == 0) { + resultsDiv.innerHTML = 'No tracks found for that duration.'; + } else { + resultsDiv.innerHTML = ''; + tracks.forEach(track => { + const songItem = document.querySelector('#song-item'); + const html = interpolate(songItem.innerHTML, { + name: track.name, + artist: track.artists[0].name, + duration: formatDuration(track.duration_ms), + trackId: track.id, + trackHref: track.external_urls.spotify + }); + resultsDiv.innerHTML += html; }); - resultsDiv.innerHTML += html; - }); + } } finally { searchButton.removeAttribute('disabled'); } diff --git a/public/signin.js b/public/signin.js index af87b95..c344fe2 100644 --- a/public/signin.js +++ b/public/signin.js @@ -102,7 +102,7 @@ async function generateCodeChallenge(codeVerifier) { } async function getAccessToken() { - const accessToken = localStorage.getItem('access_token'); + let accessToken = localStorage.getItem('access_token'); if (!accessToken) { throw 'No access token found'; } diff --git a/public/style.css b/public/style.css index 89f83a7..214bbd6 100644 --- a/public/style.css +++ b/public/style.css @@ -10,7 +10,7 @@ body { #controls, #sign-in-div { /* margin-top: 2em; */ - text-align: center; + /* text-align: center; */ } #minutes, @@ -25,12 +25,12 @@ body { #minutes-input, #seconds-input { width: 3em; - padding: 0.5em; + /* padding: 0.5em; */ } div { - margin-left: 0.5em; - margin-right: 0.5em; + /* margin-left: 0.5em; */ + /* margin-right: 0.5em; */ padding: 0.5em; } @@ -50,7 +50,13 @@ div { #footer { margin-top: 1em; text-align: center; - font-size: smaller; + font-size: 8px; + display: flex; + align-items: center; +} + +#signout { + margin-top: 5em; } /* media query for screens smaller than 600px */