Skip to content

Commit 33454c7

Browse files
turinglabsorgturinglabsorg
committed
Refactor index.html for improved readability and consistency. Enhanced meta tags for OpenGraph and Twitter Card, updated slider input elements for better user interaction, and adjusted layout styles for a cleaner UI.
1 parent d4e8643 commit 33454c7

1 file changed

Lines changed: 134 additions & 39 deletions

File tree

‎dist/index.html‎

Lines changed: 134 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,31 @@
1414
/>
1515
<!-- OpenGraph Meta Tags -->
1616
<meta property="og:title" content="Bitcoin Synth" />
17-
<meta property="og:description" content="A crazy experiment turning Bitcoin transactions into synth music!" />
18-
<meta property="og:image" content="https://turinglabsorg.github.io/bitcoin-synth/banner.png" />
17+
<meta
18+
property="og:description"
19+
content="A crazy experiment turning Bitcoin transactions into synth music!"
20+
/>
21+
<meta
22+
property="og:image"
23+
content="https://turinglabsorg.github.io/bitcoin-synth/banner.png"
24+
/>
1925
<meta property="og:type" content="website" />
20-
<meta property="og:url" content="https://turinglabsorg.github.io/bitcoin-synth/" />
26+
<meta
27+
property="og:url"
28+
content="https://turinglabsorg.github.io/bitcoin-synth/"
29+
/>
2130

2231
<!-- Twitter Card Meta Tags -->
2332
<meta name="twitter:card" content="summary_large_image" />
2433
<meta name="twitter:title" content="Bitcoin Synth" />
25-
<meta name="twitter:description" content="A crazy experiment turning Bitcoin transactions into synth music!" />
26-
<meta name="twitter:image" content="https://turinglabsorg.github.io/bitcoin-synth/banner.png" />
34+
<meta
35+
name="twitter:description"
36+
content="A crazy experiment turning Bitcoin transactions into synth music!"
37+
/>
38+
<meta
39+
name="twitter:image"
40+
content="https://turinglabsorg.github.io/bitcoin-synth/banner.png"
41+
/>
2742
<style>
2843
html,
2944
body {
@@ -56,7 +71,6 @@
5671
font-family: "Roboto Mono", monospace;
5772
position: relative;
5873
justify-content: flex-start;
59-
padding: 10px 70px 10px 10px;
6074
}
6175
.btcamp-header {
6276
background: #181c20;
@@ -284,7 +298,7 @@
284298
height: 100px;
285299
width: 60px;
286300
}
287-
.synth-knob[type=range]::-webkit-slider-thumb {
301+
.synth-knob[type="range"]::-webkit-slider-thumb {
288302
appearance: none;
289303
width: 24px;
290304
height: 24px;
@@ -294,7 +308,7 @@
294308
box-shadow: none;
295309
cursor: pointer;
296310
}
297-
.synth-knob[type=range]::-moz-range-thumb {
311+
.synth-knob[type="range"]::-moz-range-thumb {
298312
width: 24px;
299313
height: 24px;
300314
border-radius: 50%;
@@ -303,7 +317,7 @@
303317
box-shadow: none;
304318
cursor: pointer;
305319
}
306-
.synth-knob[type=range]::-ms-thumb {
320+
.synth-knob[type="range"]::-ms-thumb {
307321
width: 24px;
308322
height: 24px;
309323
border-radius: 50%;
@@ -312,7 +326,7 @@
312326
box-shadow: none;
313327
cursor: pointer;
314328
}
315-
.synth-knob[type=range] {
329+
.synth-knob[type="range"] {
316330
background: #23272b;
317331
width: 60px;
318332
height: 60px;
@@ -323,54 +337,54 @@
323337
border: 2px solid #888;
324338
box-shadow: none;
325339
}
326-
.synth-knob[type=range]:focus {
340+
.synth-knob[type="range"]:focus {
327341
border: 3px solid #00c3ff;
328342
}
329-
.synth-knob[type=range]::-webkit-slider-runnable-track {
343+
.synth-knob[type="range"]::-webkit-slider-runnable-track {
330344
height: 100px;
331345
background: transparent;
332346
}
333-
.synth-knob[type=range]::-ms-fill-lower {
347+
.synth-knob[type="range"]::-ms-fill-lower {
334348
background: transparent;
335349
}
336-
.synth-knob[type=range]::-ms-fill-upper {
350+
.synth-knob[type="range"]::-ms-fill-upper {
337351
background: transparent;
338352
}
339-
.synth-knob[type=range]:focus::-webkit-slider-runnable-track {
353+
.synth-knob[type="range"]:focus::-webkit-slider-runnable-track {
340354
background: transparent;
341355
}
342-
.synth-knob[type=range]:focus::-ms-fill-lower {
356+
.synth-knob[type="range"]:focus::-ms-fill-lower {
343357
background: transparent;
344358
}
345-
.synth-knob[type=range]:focus::-ms-fill-upper {
359+
.synth-knob[type="range"]:focus::-ms-fill-upper {
346360
background: transparent;
347361
}
348-
.synth-knob[type=range]::-moz-range-track {
362+
.synth-knob[type="range"]::-moz-range-track {
349363
height: 100px;
350364
background: transparent;
351365
}
352-
.synth-knob[type=range]:focus::-moz-range-track {
366+
.synth-knob[type="range"]:focus::-moz-range-track {
353367
background: transparent;
354368
}
355-
.synth-knob[type=range]:focus::-ms-fill-lower {
369+
.synth-knob[type="range"]:focus::-ms-fill-lower {
356370
background: transparent;
357371
}
358-
.synth-knob[type=range]:focus::-ms-fill-upper {
372+
.synth-knob[type="range"]:focus::-ms-fill-upper {
359373
background: transparent;
360374
}
361-
.synth-knob[type=range]:focus {
375+
.synth-knob[type="range"]:focus {
362376
outline: none;
363377
}
364-
.synth-knob[type=range]:active::-webkit-slider-thumb {
378+
.synth-knob[type="range"]:active::-webkit-slider-thumb {
365379
background: #00ffea;
366380
}
367-
.synth-knob[type=range]:active::-moz-range-thumb {
381+
.synth-knob[type="range"]:active::-moz-range-thumb {
368382
background: #00ffea;
369383
}
370-
.synth-knob[type=range]:active::-ms-thumb {
384+
.synth-knob[type="range"]:active::-ms-thumb {
371385
background: #00ffea;
372386
}
373-
.synth-knob[type=range]:disabled {
387+
.synth-knob[type="range"]:disabled {
374388
opacity: 0.5;
375389
}
376390
</style>
@@ -381,35 +395,102 @@
381395
<img src="bitcoin-pixelated.png" alt="Bitcoin Logo" />
382396
Bitcoin Synth
383397
</div>
384-
<div class="btcamp-display" style="margin-top:2.5em; margin-bottom:2.5em;">
398+
<div
399+
class="btcamp-display"
400+
style="margin-top: 2.5em; margin-bottom: 2.5em"
401+
>
385402
<div id="txplaying"></div>
386403
<div id="progress-bar">
387404
<div id="progress-bar-fill"></div>
388405
</div>
389406
</div>
390-
<div class="btcamp-btn-row" style="display:flex;flex-direction:row;gap:2rem;justify-content:center;width:100%;margin-bottom:2em;">
407+
<div
408+
class="btcamp-btn-row"
409+
style="
410+
display: flex;
411+
flex-direction: row;
412+
gap: 2rem;
413+
justify-content: center;
414+
width: 100%;
415+
margin-bottom: 2em;
416+
"
417+
>
391418
<button id="playpause-indicator" class="btcamp-btn">▶️ Play</button>
392419
<button id="next" class="btcamp-btn">⏭️ Next</button>
393420
</div>
394-
<div class="synth-controls-row" style="display:flex;flex-direction:row;align-items:flex-end;justify-content:center;gap:2.5em;margin-bottom:2.5em;">
421+
<div
422+
class="synth-controls-row"
423+
style="
424+
display: flex;
425+
flex-direction: row;
426+
align-items: flex-end;
427+
justify-content: center;
428+
gap: 2.5em;
429+
margin-bottom: 2.5em;
430+
"
431+
>
395432
<div class="synth-control">
396-
<input type="range" id="tempo-slider" min="0.5" max="2" step="0.01" value="1" class="synth-knob vertical-knob">
397-
<div class="synth-label"><span style="color:#00ffea;">Tempo</span><br><span id="tempo-value" style="color:#00ffea;">1.00x</span></div>
433+
<input
434+
type="range"
435+
id="tempo-slider"
436+
min="0.5"
437+
max="2"
438+
step="0.01"
439+
value="1"
440+
class="synth-knob vertical-knob"
441+
/>
442+
<div class="synth-label">
443+
<span style="color: #00ffea">Tempo</span><br /><span
444+
id="tempo-value"
445+
style="color: #00ffea"
446+
>1.00x</span
447+
>
448+
</div>
398449
</div>
399450
<div class="synth-control">
400-
<input type="range" id="mood-slider" min="0" max="1" step="0.01" value="0" class="synth-knob vertical-knob">
401-
<div class="synth-label"><span style="color:#ffb347;">Mood</span><br><span id="mood-value" style="color:#ffb347;">Sad</span></div>
451+
<input
452+
type="range"
453+
id="mood-slider"
454+
min="0"
455+
max="1"
456+
step="0.01"
457+
value="0"
458+
class="synth-knob vertical-knob"
459+
/>
460+
<div class="synth-label">
461+
<span style="color: #ffb347">Mood</span><br /><span
462+
id="mood-value"
463+
style="color: #ffb347"
464+
>Sad</span
465+
>
466+
</div>
402467
</div>
403468
<div class="synth-control">
404-
<input type="range" id="key-slider" min="0" max="6" step="1" value="0" class="synth-knob vertical-knob">
405-
<div class="synth-label"><span style="color:#b3ff00;">Key</span><br><span id="key-value" style="color:#b3ff00;">C</span></div>
469+
<input
470+
type="range"
471+
id="key-slider"
472+
min="0"
473+
max="6"
474+
step="1"
475+
value="0"
476+
class="synth-knob vertical-knob"
477+
/>
478+
<div class="synth-label">
479+
<span style="color: #b3ff00">Key</span><br /><span
480+
id="key-value"
481+
style="color: #b3ff00"
482+
>C</span
483+
>
484+
</div>
406485
</div>
407486
</div>
408487
<div class="btcamp-info">
409488
<span id="info-label">Playing transaction:</span>
410489
<span id="info-value"></span>
411490
</div>
412-
<div class="btcamp-raw" id="rawtx">Still need to be fetched, press play..</div>
491+
<div class="btcamp-raw" id="rawtx">
492+
Still need to be fetched, press play..
493+
</div>
413494
<div class="btcamp-nowplaying" id="nowplaying"></div>
414495
<div class="btcamp-footer">
415496
<span
@@ -421,15 +502,29 @@
421502
>turinglabs</a
422503
></span
423504
>
424-
<div style="margin-top: 0.5em; color: #00ffea; font-size: 0.8em; letter-spacing: 1px; display: flex; align-items: center; justify-content: center; gap: 1.5em;">
505+
<div
506+
style="
507+
margin-top: 0.5em;
508+
color: #00ffea;
509+
font-size: 0.8em;
510+
letter-spacing: 1px;
511+
display: flex;
512+
align-items: center;
513+
justify-content: center;
514+
gap: 1.5em;
515+
"
516+
>
425517
<span>Version: v1.0.0</span>
426-
<span id="btc-price-display" style="color:#ffb347; font-size:1.1em;"></span>
518+
<span
519+
id="btc-price-display"
520+
style="color: #ffb347; font-size: 1.1em"
521+
></span>
427522
</div>
428523
</div>
429524
</div>
430525
<script src="main.js"></script>
431526
<script>
432-
document.addEventListener('contextmenu', function(e) {
527+
document.addEventListener("contextmenu", function (e) {
433528
e.preventDefault();
434529
});
435530
</script>

0 commit comments

Comments
 (0)