-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
290 lines (275 loc) · 11 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Music Tape | Guilherme Balog</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Bungee&family=Bungee+Shade&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<link
rel="apple-touch-icon"
sizes="57x57"
href="./img/apple-icon-57x57.png"
/>
<link
rel="apple-touch-icon"
sizes="60x60"
href="./img/apple-icon-60x60.png"
/>
<link
rel="apple-touch-icon"
sizes="72x72"
href="./img/apple-icon-72x72.png"
/>
<link
rel="apple-touch-icon"
sizes="76x76"
href="./img/apple-icon-76x76.png"
/>
<link
rel="apple-touch-icon"
sizes="114x114"
href="./img/apple-icon-114x114.png"
/>
<link
rel="apple-touch-icon"
sizes="120x120"
href="./img/apple-icon-120x120.png"
/>
<link
rel="apple-touch-icon"
sizes="144x144"
href="./img/apple-icon-144x144.png"
/>
<link
rel="apple-touch-icon"
sizes="152x152"
href="./img/apple-icon-152x152.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="./img/apple-icon-180x180.png"
/>
<link
rel="icon"
type="image/png"
sizes="192x192"
href="./img/android-icon-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./img/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="96x96"
href="./img/favicon-96x96.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="./img/favicon-16x16.png"
/>
<meta
name="description"
content="Play a music tape, change its speed and have some fun!"
/>
<meta itemprop="name" content="Guilherme Balog | Music Tape" />
<meta
itemprop="description"
content="Play a music tape, change its speed and have some fun!"
/>
<meta
itemprop="image"
content="https://guilhermebalog.ga/music-tape/img/thumb.png"
/>
<meta property="og:title" content="Guilherme Balog | Music Tape" />
<meta
property="og:description"
content="Play a music tape, change its speed and have some fun!"
/>
<meta property="og:site_name" content="Guilherme Balog Gardino" />
<meta property="og:url" content="https://guilhermebalog.ga/music-tape" />
<meta property="og:type" content="website" />
<meta
property="og:image"
content="https://guilhermebalog.ga/music-tape/img/thumb.png"
/>
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="640" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Guilherme Balog | Music Tape" />
<meta
name="twitter:description"
content="Play a music tape, change its speed and have some fun!"
/>
<meta
name="twitter:image"
content="https://guilhermebalog.ga/music-tape/img/thumb.png"
/>
<link rel="manifest" href="./img/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="./img/ms-icon-144x144.png" />
<meta name="theme-color" content="#28384c" />
</head>
<body>
<main>
<header>
<h1>Music<br />Tape</h1>
<p>By <a href="https://guilhermebalog.ga">Guilherme Balog</a></p>
</header>
<svg
width="310"
height="194"
viewBox="0 0 310 194"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="tape">
<path
id="tape-background"
d="M293.976 194H16.0237C7.17299 194 0 187.802 0 180.152V13.8479C0 6.19897 7.17299 0 16.0237 0H293.982C302.828 0 310 6.19897 310 13.8479V180.157C310 187.802 302.827 194 293.976 194Z"
fill="#28384C"
/>
<path
id="center-background"
d="M289 148H21V31.9193C21 24.2309 28.1933 18 37.0692 18H272.936C281.807 18 288.999 24.2309 288.999 31.9193V148H289Z"
fill="#546B7F"
/>
<path
id="Vector"
d="M224.365 130L85.6346 130C57.6673 130 35 108.96 35 83C35 57.0402 57.6673 36 85.6346 36H224.365C252.333 36 275 57.0402 275 83C275 108.959 252.333 130 224.365 130Z"
fill="#3B4E63"
/>
<g id="circles">
<g id="left-circle">
<path
id="Vector_2"
d="M62.9324 88.9875H50.9276C47.6141 88.9875 44.9248 86.2982 44.9248 82.9847C44.9248 79.6712 47.6141 76.982 50.9276 76.982H62.9324C66.2459 76.982 68.9352 79.6712 68.9352 82.9847C68.9352 86.2982 66.2459 88.9875 62.9324 88.9875Z"
fill="#AFB6BB"
/>
<path
id="Vector_3"
d="M110.953 88.9875H98.9477C95.6342 88.9875 92.9449 86.2982 92.9449 82.9847C92.9449 79.6712 95.6342 76.982 98.9477 76.982H110.953C114.266 76.982 116.955 79.6712 116.955 82.9847C116.955 86.2982 114.266 88.9875 110.953 88.9875Z"
fill="#AFB6BB"
/>
<path
id="Vector_4"
d="M80.9401 119C77.6266 119 74.9373 116.311 74.9373 112.997V100.992C74.9373 97.6789 77.6266 94.9896 80.9401 94.9896C84.2535 94.9896 86.9428 97.6789 86.9428 100.992V112.997C86.9428 116.311 84.2535 119 80.9401 119Z"
fill="#AFB6BB"
/>
<path
id="Vector_5"
d="M80.9401 70.9799C77.6266 70.9799 74.9373 68.2906 74.9373 64.9771V52.9722C74.9373 49.6588 77.6266 46.9695 80.9401 46.9695C84.2535 46.9695 86.9428 49.6588 86.9428 52.9722V64.9771C86.9428 68.2906 84.2535 70.9799 80.9401 70.9799Z"
fill="#AFB6BB"
/>
<path
id="Vector_6"
d="M80.9401 119C61.0836 119 44.9248 102.847 44.9248 82.9847C44.9248 63.1221 61.0836 46.9695 80.9401 46.9695C100.797 46.9695 116.955 63.1221 116.955 82.9847C116.955 102.847 100.797 119 80.9401 119ZM80.9401 58.975C67.6983 58.975 56.9303 69.7437 56.9303 82.9847C56.9303 96.2258 67.699 106.994 80.9401 106.994C94.1811 106.994 104.95 96.2258 104.95 82.9847C104.95 69.7437 94.1818 58.975 80.9401 58.975Z"
fill="#E7ECED"
/>
</g>
<g id="right-circle">
<path
id="Vector_7"
d="M211.462 88.9875H199.457C196.143 88.9875 193.454 86.2982 193.454 82.9847C193.454 79.6712 196.143 76.982 199.457 76.982H211.462C214.775 76.982 217.464 79.6712 217.464 82.9847C217.464 86.2982 214.775 88.9875 211.462 88.9875Z"
fill="#AFB6BB"
/>
<path
id="Vector_8"
d="M259.482 88.9875H247.477C244.163 88.9875 241.474 86.2982 241.474 82.9847C241.474 79.6712 244.163 76.982 247.477 76.982H259.482C262.795 76.982 265.485 79.6712 265.485 82.9847C265.485 86.2982 262.795 88.9875 259.482 88.9875Z"
fill="#AFB6BB"
/>
<path
id="Vector_9"
d="M229.469 119C226.156 119 223.466 116.311 223.466 112.997V100.992C223.466 97.6789 226.156 94.9896 229.469 94.9896C232.783 94.9896 235.472 97.6789 235.472 100.992V112.997C235.471 116.311 232.783 119 229.469 119Z"
fill="#AFB6BB"
/>
<path
id="Vector_10"
d="M229.469 70.9799C226.156 70.9799 223.466 68.2906 223.466 64.9771V52.9722C223.466 49.6588 226.156 46.9695 229.469 46.9695C232.783 46.9695 235.472 49.6588 235.472 52.9722V64.9771C235.471 68.2906 232.783 70.9799 229.469 70.9799Z"
fill="#AFB6BB"
/>
<path
id="Vector_11"
d="M229.469 119C209.607 119 193.454 102.847 193.454 82.9847C193.454 63.1222 209.607 46.9695 229.469 46.9695C249.331 46.9695 265.484 63.1222 265.484 82.9847C265.484 102.847 249.331 119 229.469 119ZM229.469 58.975C216.227 58.975 205.459 69.7437 205.459 82.9847C205.459 96.2258 216.228 106.994 229.469 106.994C242.711 106.994 253.479 96.2258 253.479 82.9847C253.479 69.7437 242.711 58.975 229.469 58.975Z"
fill="#E7ECED"
/>
</g>
</g>
<path
id="Vector_12"
d="M238.262 194H71.7384L90.2413 147.744H219.759L238.262 194Z"
fill="#3B4E63"
/>
<g id="Group">
<path
id="Vector_13"
d="M122.621 175.498H104.118C101.565 175.498 99.4924 173.425 99.4924 170.872C99.4924 168.318 101.565 166.246 104.118 166.246H122.621C125.174 166.246 127.246 168.318 127.246 170.872C127.246 173.425 125.174 175.498 122.621 175.498Z"
fill="#546B7F"
/>
<path
id="Vector_14"
d="M205.882 175.498H187.379C184.826 175.498 182.754 173.425 182.754 170.872C182.754 168.318 184.826 166.246 187.379 166.246H205.882C208.435 166.246 210.508 168.318 210.508 170.872C210.508 173.425 208.435 175.498 205.882 175.498Z"
fill="#546B7F"
/>
<path
id="Vector_15"
d="M164.251 175.498H145.749C143.195 175.498 141.123 173.425 141.123 170.872C141.123 168.318 143.195 166.246 145.749 166.246H164.251C166.805 166.246 168.877 168.318 168.877 170.872C168.877 173.425 166.805 175.498 164.251 175.498Z"
fill="#546B7F"
/>
</g>
</g>
</svg>
<p>Now playing: 'Happy Rock.mp3'</p>
<!-- Music: Happy Rock from Bensound.com -->
<audio src="bensound-happyrock.mp3"></audio>
<div class="buttons">
<label class="button">
<input type="checkbox" id="play" />
<span>
<i class="fas fa-play"></i>
</span>
<p>play</p>
</label>
<div class="button hidden">
<input type="checkbox" id="reverse" />
<label for="reverse">
<button>
<i class="fas fa-backward"></i>
</button>
</label>
<p>reverse</p>
</div>
</div>
<div class="slider">
<label for="speed">Speed</label>
<input type="range" id="speed" min="0" max="2" value="1" step="0.1" />
</div>
<div class="hidden">
Icons made by <a href="" title="prettycons">prettycons</a> from
<a href="https://www.flaticon.com/" title="Flaticon"
>www.flaticon.com</a
>
</div>
</main>
<script src="main.js"></script>
</body>
</html>