index.html

1	<!DOCTYPE html>
2	<html lang="en">
3
4	<head>
5	<meta charset="utf-8">
6	<title>Hawk</title>
7	<link rel="icon" type="image/png" href="favicon.png">
8	<link rel="stylesheet" href="style.css">
9	<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" />
11	</head>
12
13	<body>
14	<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" />
23	</div>
24	</div>
25
26	<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>
38	</div>
39
40	<div id="main">
41	<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>
47	<div id="controls">
48	<div>
49	<h3>Currently playing:
50	<span id="current-song"></span>
51	</h3>
52	</div>
53	<button id="pause-play" onclick="pauseOrPlay()">
54	<span class="icon-and-label">
55	<span class="material-symbols-outlined">
56	play_pause
57	</span>
58	<span>Play/Pause</span>
59	</span>
60	</button>
61
62	<div>
63	<h3>Search for a song by duration:</h3>
64	</div>
65	<div id="search-controls">
66	<span id="minutes">
67	<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>
81	</span>
82	<span id="seconds">
83	<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>
97	</span>
98	<button id="search" onclick="searchForMatch()">Search</button>
99	</div>
100
101	<div>
102	<span id="status"></span>
103	</div>
104
105	<div>
106	<h3>Found songs:</h3>
107	<div id="results"></div>
108	</div>
109
110	</div>
111	<hr />
112	<div id="footer">
113	<button id="signout" onclick="signOut()">Sign Out</button>
114	<button id="clear-cache" onclick="clearDb()">Clear Cache</button>
115	<div>
116	Hawk version <span id="version"></span>
117	</div>
118	<div>
119	Updated on <span id="updated"></span>
120	</div>
121	<div>
122	<a href="https://gitlab.com/PavelSafronov/hawk" target="_blank">Source</a>
123	</div>
124	<div>
125	<a href="https://www.vecteezy.com/free-vector/hawk" target="_blank">Hawk Vectors by Vecteezy</a>
126	</div>
127	</div>
128	</div>
129	<script src="version.js"></script>
130	<script src="signin.js"></script>
131	<script src="db.js"></script>
132	<script src="api.js"></script>
133	<script src="template.js"></script>
134	<script src="main.js"></script>
135
136	<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
163	</body>
164
165	</html>