fuzzyworld

hawk / files / public / index.html

index.html

Blame: the commit that last changed each line · file · history

601035fb 2023-10-12 Pavel Safronov1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta charset="utf-8">
6 <title>Hawk</title>
1e95383a 2023-10-14 Pavel Safronov7 <link rel="icon" type="image/png" href="images/favicon.png">
731b0b9c 2023-10-15 Pavel Safronov8 <link rel="stylesheet" href="styles/collapsible.css">
c1610592 2023-10-17 Pavel Safronov9 <link rel="stylesheet" href="styles/song.css">
2c1835af 2023-10-19 Pavel Safronov10 <link rel="stylesheet" href="styles/links.css">
c1610592 2023-10-17 Pavel Safronov11 <link rel="stylesheet" href="styles/main.css">
cc1af884 2023-10-13 Pavel Safronov12 <link rel="stylesheet"
13 href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
601035fb 2023-10-12 Pavel Safronov14</head>
15
16<body>
1e95383a 2023-10-14 Pavel Safronov17 <!-- HEADER -->
40a1ac1e 2023-10-14 Pavel Safronov18 <div>
2c1835af 2023-10-19 Pavel Safronov19 <div id="header" class="flex">
20 <span class="left">
feb7d632 2023-10-15 Pavel Safronov21 <h1 id="logo-and-text">
dd354806 2026-10-27 Pavel Safronov22 <a href="https://apps.fuzzyworld.net/hawk/index.html">
0b9bb35f 2023-10-15 Pavel Safronov23 <img id="logo" src="images/hawk.png" />
24 </a>
feb7d632 2023-10-15 Pavel Safronov25 <span>Hawk</span>
26 </h1>
27 </span>
2c1835af 2023-10-19 Pavel Safronov28 <span class="right">
feb7d632 2023-10-15 Pavel Safronov29 <a href="https://spotify.com/" target="_blank">
30 <img id="spotify-logo" src="images/Spotify_Logo_RGB_Black.png" />
31 </a>
32 </span>
8edcc887 2023-10-13 Pavel Safronov33 </div>
187c6bc2 2023-10-13 Pavel Safronov34 </div>
601035fb 2023-10-12 Pavel Safronov35
1e95383a 2023-10-14 Pavel Safronov36 <!-- INTRO -->
731b0b9c 2023-10-15 Pavel Safronov37 <button type="button" class="collapsible">What is this?</button>
38 <div id="intro" class="content active">
40a1ac1e 2023-10-14 Pavel Safronov39 <div>
731b0b9c 2023-10-15 Pavel Safronov40 Specify a duration like "5:32", and <b>Hawk</b> will find all the songs in your Spotify library
40a1ac1e 2023-10-14 Pavel Safronov41 with that length, and with a single click you can start playing that song.
42 </div>
43 <div>
a2f73fbd 2023-10-15 Pavel Safronov44 <div>
45
46 The name <b>Hawk</b> comes from the movie
47 <a href="https://www.imdb.com/title/tt0102070/" target="_blank">Hudson Hawk</a>,
48 where <a href="https://www.youtube.com/watch?v=I6WXVqg48Qs" target="_blank">Bruce Willis sings songs of
49 particular lengths in order to time things</a>.
50 </div>
51 <div>
52
53 Yeah, it's weird, but I was also wondering what it would
54 take to make this. This project ended up taking just two days,
55 and the core functionality was working in the first few hours. Check out the git history to see how this
56 thing evolved.
57 </div>
58 <div>
59
60 I'm pretty happy with the result, but it definitely needs a designer's touch. Pull requests are welcome!
61 </div>
40a1ac1e 2023-10-14 Pavel Safronov62 </div>
d1b8bc36 2023-10-14 Pavel Safronov63 <div>
dd354806 2026-10-27 Pavel Safronov64 Found an issue? Please report it by <a href="mailto:bugs-k7q4+hawk@fuzzyworld.net?subject=hawk%20bug%20report"
65 target="_blank">email</a>
d1b8bc36 2023-10-14 Pavel Safronov66 </div>
601035fb 2023-10-12 Pavel Safronov67 </div>
40a1ac1e 2023-10-14 Pavel Safronov68
1e95383a 2023-10-14 Pavel Safronov69 <!-- MAIN -->
601035fb 2023-10-12 Pavel Safronov70 <div id="main">
731cddfd 2023-10-14 Pavel Safronov71 <div class="signedout">
72 <div>
73 While in development mode, you'll need to have your Spotify profile added to the list of users that can
74 access this app.
75 <a href="mailto:hawk@fuzzyworld.net">Please email me</a> if you'd like to be added.
40a1ac1e 2023-10-14 Pavel Safronov76 </div>
731cddfd 2023-10-14 Pavel Safronov77 <button id="signin" onclick="signIn()">
78 <div class="icon-and-label">
1e95383a 2023-10-14 Pavel Safronov79 <img id="spotify-icon" src="images/Spotify_Icon_RGB_Black.png" />
731cddfd 2023-10-14 Pavel Safronov80 Sign In
81 </div>
82 </button>
83 </div>
84 <div class="signedin">
2c1835af 2023-10-19 Pavel Safronov85 <div class="flex">
86 <h3 class="left">Target player:</h3>
87 <select id="devices" class="right" required></select>
88 </div>
cc1af884 2023-10-13 Pavel Safronov89 <div>
90 <h3>Search for a song by duration:</h3>
91 </div>
660845f9 2023-10-20 Pavel Safronov92 <div class="flex">
93 <div class="left">
94 <span id="minutes">
95 <input id="minutes-input" type="number" min="0" max="59" value="5" onclick="this.select();" />
96 <label for="minutes-input">min</label>
97 </span>
98 <span id="seconds">
99 <input id="seconds-input" type="number" min="0" max="59" value="32" onclick="this.select();" />
100 <label for="seconds-input">sec</label>
101 </span>
102 <span>
103 <ul id="times"></ul>
104 </span>
105 </div>
106 <div class="right">
107 <button id="search" onclick="searchForMatch()">Search</button>
108 </div>
3397fb1c 2023-10-13 Pavel Safronov109 </div>
2c1835af 2023-10-19 Pavel Safronov110 <div class="flex">
111 <div id="status"></div>
8c91be32 2023-10-13 Pavel Safronov112 </div>
113
cc1af884 2023-10-13 Pavel Safronov114 <div>
115 <h3>Found songs:</h3>
116 <div id="results"></div>
117 </div>
601035fb 2023-10-12 Pavel Safronov118
22f70a1c 2023-10-14 Pavel Safronov119 <div>
120 <h3>Currently playing:
121 </h3>
122 <span id="current-song"></span>
123 </div>
124
601035fb 2023-10-12 Pavel Safronov125 </div>
731cddfd 2023-10-14 Pavel Safronov126 </div>
1e95383a 2023-10-14 Pavel Safronov127
128 <!-- FOOTER -->
731cddfd 2023-10-14 Pavel Safronov129 <hr />
130 <div id="footer">
131 <button id="signout" class="signedin" onclick="signOut()">Sign Out</button>
132 <button id="clear-cache" class="signedin" onclick="clearDb()">Clear Cache</button>
1e82c571 2023-10-17 Pavel Safronov133 <div id="info">
187c6bc2 2023-10-13 Pavel Safronov134 </div>
731cddfd 2023-10-14 Pavel Safronov135 <div>
dd354806 2026-10-27 Pavel Safronov136 <a href="https://code.fuzzyworld.net/hawk/" target="_blank">Source</a>
731cddfd 2023-10-14 Pavel Safronov137 </div>
138 <div>
139 <a href="https://www.vecteezy.com/free-vector/hawk" target="_blank">Hawk Vectors by Vecteezy</a>
140 </div>
141 </div>
601035fb 2023-10-12 Pavel Safronov142 </div>
143
1e95383a 2023-10-14 Pavel Safronov144 <!-- TEMPLATES -->
6afcc473 2023-10-14 Pavel Safronov145 <template id="found-song-item">
c1610592 2023-10-17 Pavel Safronov146 <div class="found-song">
40a1ac1e 2023-10-14 Pavel Safronov147 <div>
c1610592 2023-10-17 Pavel Safronov148 <div>
149 <a href="${songUrl}" target="_blank">
150 <img src="${albumArtUrl}" alt="Album Cover" class="album-image" />
151 </a>
152 </div>
153 <div>
154 <button onclick="playChosenSong('${name}', '${trackId}')">
155 <span class="material-symbols-outlined">
156 play_circle
157 </span>
158 </button>
159 </div>
40a1ac1e 2023-10-14 Pavel Safronov160 </div>
c1610592 2023-10-17 Pavel Safronov161 <div class="song-info">
162 <span class="song-name icon-and-label">
163 <span class="material-symbols-outlined">
164 music_note
165 </span>
0c3c57b6 2023-10-18 Pavel Safronov166 <span>
167 <a href="${songUrl}" target="_blank">${name}</a>
168 </span>
c1610592 2023-10-17 Pavel Safronov169 </span>
170 <span class="song-album icon-and-label">
171 <span class="material-symbols-outlined">
172 album
173 </span>
0c3c57b6 2023-10-18 Pavel Safronov174 <span>
175 <a href="${albumUrl}" target="_blank">${album}</a>
176 </span>
c1610592 2023-10-17 Pavel Safronov177 </span>
178 <span class="song-artist icon-and-label">
179 <span class=" material-symbols-outlined">group</span>
0c3c57b6 2023-10-18 Pavel Safronov180 <span>
181 <a href="${artistUrl}" target="_blank">${artist}</a>
182 </span>
c1610592 2023-10-17 Pavel Safronov183 </span>
184 </div>
40a1ac1e 2023-10-14 Pavel Safronov185 </div>
186 </template>
6afcc473 2023-10-14 Pavel Safronov187 <template id="playing-song">
188 <div class="currently-playing">
189 <div>
190 <div>
191 <a href="${songUrl}" target="_blank">
192 <img src="${albumArtUrl}" alt="Album Cover" class="album-image" />
193 </a>
194 </div>
195 <div>
196 <button onclick="pauseOrPlay()">
197 <span class="material-symbols-outlined">
198 play_pause
199 </span>
200 </button>
201 </div>
202 </div>
203 <div class="song-info">
c1610592 2023-10-17 Pavel Safronov204 <span class="song-name icon-and-label">
205 <span class="material-symbols-outlined">
206 music_note
207 </span>
0c3c57b6 2023-10-18 Pavel Safronov208 <span>
209 <a href="${songUrl}" target="_blank">${name}</a>
210 </span>
c1610592 2023-10-17 Pavel Safronov211 </span>
212 <span class="song-album icon-and-label">
213 <span class="material-symbols-outlined">
214 album
215 </span>
0c3c57b6 2023-10-18 Pavel Safronov216 <span>
217 <a href="${albumUrl}" target="_blank">${album}</a>
218 </span>
c1610592 2023-10-17 Pavel Safronov219 </span>
220 <span class="song-artist icon-and-label">
221 <span class=" material-symbols-outlined">group</span>
0c3c57b6 2023-10-18 Pavel Safronov222 <span>
223 <a href="${artistUrl}" target="_blank">${artist}</a>
224 </span>
c1610592 2023-10-17 Pavel Safronov225 </span>
a2f73fbd 2023-10-15 Pavel Safronov226 <div class="song-duration">
227 <span>${progress}</span>
228 <progress class="song-progressbar" value="${progressPercent}" max="100"></progress>
229 <span>${duration}</span>
230 </div>
6afcc473 2023-10-14 Pavel Safronov231 </div>
232 </div>
233 </template>
1e82c571 2023-10-17 Pavel Safronov234 <template id="app-info">
a2f73fbd 2023-10-15 Pavel Safronov235 <div>
dd354806 2026-10-27 Pavel Safronov236 Last updated on <a href="https://code.fuzzyworld.net/hawk/commit/${version}.html"
a2f73fbd 2023-10-15 Pavel Safronov237 target="_blank">${updated}</a>
238 </div>
239 </template>
1e82c571 2023-10-17 Pavel Safronov240 <template id="no-song-playing">
241 <div>
242 <span>
243 Nothing playing
244 </span>
245 </div>
246 </template>
a2f73fbd 2023-10-15 Pavel Safronov247
248 <!-- SCRIPTS -->
249 <script src="gen/version.js"></script>
250 <script src="js/signin.js"></script>
251 <script src="js/db.js"></script>
252 <script src="js/api.js"></script>
253 <script src="js/template.js"></script>
254 <script src="js/collapsible.js"></script>
a95a53d1 2023-10-17 Pavel Safronov255 <script src="js/controls.js"></script>
a2f73fbd 2023-10-15 Pavel Safronov256 <script src="js/main.js"></script>
40a1ac1e 2023-10-14 Pavel Safronov257
601035fb 2023-10-12 Pavel Safronov258</body>
259
260</html>