fuzzyworld

hawk / time-arrows / files / public / index.html

Branch time-arrows · default branch · all branches

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>
8edcc887 2023-10-13 Pavel Safronov7 <link rel="icon" type="image/png" href="favicon.png">
187c6bc2 2023-10-13 Pavel Safronov8 <link rel="stylesheet" href="style.css">
cc1af884 2023-10-13 Pavel Safronov9 <link rel="stylesheet"
10 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 Safronov11</head>
12
13<body>
40a1ac1e 2023-10-14 Pavel Safronov14 <div>
15 <div>
16 <h1 id="header">
17 <img id="logo" src="hawk.png" />
18 <span>Hawk</span>
19 </h1>
20 </div>
21 <div>
22 <img id="spotify-logo" src="Spotify_Logo_RGB_Black.png" />
8edcc887 2023-10-13 Pavel Safronov23 </div>
187c6bc2 2023-10-13 Pavel Safronov24 </div>
601035fb 2023-10-12 Pavel Safronov25
40a1ac1e 2023-10-14 Pavel Safronov26 <div id="intro">
27
28 <div>
29 You can specify a duration (for example, "5:32"), and <b>Hawk</b> will find a song in your Spotify library
30 with that length, and with a single click you can start playing that song.
31 </div>
32 <div>
33 The name <b>Hawk</b> comes from the movie
34 <a href="https://www.imdb.com/title/tt0102070/" target="_blank">Hudson Hawk</a>,
35 where Bruce Willis sings songs of particular lengths in order to time things. Yeah, it's
36 weird, but it's also a pretty fun movie, so check it out.
37 </div>
601035fb 2023-10-12 Pavel Safronov38 </div>
40a1ac1e 2023-10-14 Pavel Safronov39
601035fb 2023-10-12 Pavel Safronov40 <div id="main">
40a1ac1e 2023-10-14 Pavel Safronov41 <button id="signin">
42 <div class="icon-and-label">
43 <img id="spotify-icon" src="Spotify_Icon_RGB_Black.png" />
44 Sign In
45 </div>
46 </button>
601035fb 2023-10-12 Pavel Safronov47 <div id="controls">
cc1af884 2023-10-13 Pavel Safronov48 <div>
3397fb1c 2023-10-13 Pavel Safronov49 <h3>Currently playing:
50 <span id="current-song"></span>
51 </h3>
52 </div>
40a1ac1e 2023-10-14 Pavel Safronov53 <button id="pause-play" onclick="pauseOrPlay()">
54 <span class="icon-and-label">
3397fb1c 2023-10-13 Pavel Safronov55 <span class="material-symbols-outlined">
56 play_pause
cc1af884 2023-10-13 Pavel Safronov57 </span>
3397fb1c 2023-10-13 Pavel Safronov58 <span>Play/Pause</span>
59 </span>
40a1ac1e 2023-10-14 Pavel Safronov60 </button>
cc1af884 2023-10-13 Pavel Safronov61
62 <div>
63 <h3>Search for a song by duration:</h3>
64 </div>
c24133f4 2023-10-14 Pavel Safronov65 <div id="search-controls">
3397fb1c 2023-10-13 Pavel Safronov66 <span id="minutes">
c24133f4 2023-10-14 Pavel Safronov67 <button class="arrow">
68 <span class="material-symbols-outlined">
69 arrow_drop_up
70 </span>
71 </button>
72 <div>
73 <input id="minutes-input" type="number" min="0" max="59" value="5" />
74 <label for="minutes-input">min</label>
75 </div>
76 <button class="arrow">
77 <span class="material-symbols-outlined">
78 arrow_drop_down
79 </span>
80 </button>
3397fb1c 2023-10-13 Pavel Safronov81 </span>
82 <span id="seconds">
c24133f4 2023-10-14 Pavel Safronov83 <button class="arrow">
84 <span class="material-symbols-outlined">
85 arrow_drop_up
86 </span>
87 </button>
88 <div>
89 <input id="seconds-input" type="number" min="0" max="59" value="32" />
90 <label for="seconds-input">sec</label>
91 </div>
92 <button class="arrow">
93 <span class="material-symbols-outlined">
94 arrow_drop_down
95 </span>
96 </button>
3397fb1c 2023-10-13 Pavel Safronov97 </span>
98 <button id="search" onclick="searchForMatch()">Search</button>
99 </div>
601035fb 2023-10-12 Pavel Safronov100
8c91be32 2023-10-13 Pavel Safronov101 <div>
102 <span id="status"></span>
103 </div>
104
cc1af884 2023-10-13 Pavel Safronov105 <div>
106 <h3>Found songs:</h3>
107 <div id="results"></div>
108 </div>
601035fb 2023-10-12 Pavel Safronov109
110 </div>
0d3f2167 2023-10-13 Pavel Safronov111 <hr />
187c6bc2 2023-10-13 Pavel Safronov112 <div id="footer">
8c91be32 2023-10-13 Pavel Safronov113 <button id="signout" onclick="signOut()">Sign Out</button>
114 <button id="clear-cache" onclick="clearDb()">Clear Cache</button>
187c6bc2 2023-10-13 Pavel Safronov115 <div>
3397fb1c 2023-10-13 Pavel Safronov116 Hawk version <span id="version"></span>
187c6bc2 2023-10-13 Pavel Safronov117 </div>
118 <div>
3397fb1c 2023-10-13 Pavel Safronov119 Updated on <span id="updated"></span>
187c6bc2 2023-10-13 Pavel Safronov120 </div>
121 <div>
122 <a href="https://gitlab.com/PavelSafronov/hawk" target="_blank">Source</a>
123 </div>
791409a6 2023-10-13 Pavel Safronov124 <div>
0d3f2167 2023-10-13 Pavel Safronov125 <a href="https://www.vecteezy.com/free-vector/hawk" target="_blank">Hawk Vectors by Vecteezy</a>
791409a6 2023-10-13 Pavel Safronov126 </div>
187c6bc2 2023-10-13 Pavel Safronov127 </div>
601035fb 2023-10-12 Pavel Safronov128 </div>
187c6bc2 2023-10-13 Pavel Safronov129 <script src="version.js"></script>
601035fb 2023-10-12 Pavel Safronov130 <script src="signin.js"></script>
6e3f55a5 2023-10-13 Pavel Safronov131 <script src="db.js"></script>
601035fb 2023-10-12 Pavel Safronov132 <script src="api.js"></script>
8edcc887 2023-10-13 Pavel Safronov133 <script src="template.js"></script>
601035fb 2023-10-12 Pavel Safronov134 <script src="main.js"></script>
135
40a1ac1e 2023-10-14 Pavel Safronov136 <template id="song-item">
137 <div class="song">
138 <div>
139 <span>${name}</span> - <span>${artist}</span>
140 <span>(${duration})</span>
141 </div>
142 <div>
143 <button onclick="playChosenSong('${trackId}')">
144 <span class="icon-and-label">
145 <span class="material-symbols-outlined">
146 play_arrow
147 </span>
148 <span>Play</span>
149 </span>
150 </button>
151 <button onclick="window.open('${trackHref}')">
152 <span class="icon-and-label">
153 <span class="material-symbols-outlined">
154 link
155 </span>
156 <span>Open</span>
157 </span>
158 </button>
159 </div>
160 </div>
161 </template>
162
601035fb 2023-10-12 Pavel Safronov163</body>
164
165</html>