audio/noiz
2
0
Fork 0
mirror of https://codeberg.org/armin/noiz.git synced 2026-09-01 14:00:54 +02:00
Code Issues Projects Releases Packages Wiki Activity

add logo overlay (fades out after 2sec)

Browse source
This commit is contained in:
Armin 2026-07-05 23:09:43 +02:00
commit 7c3de9fc7b
1 changed files with 17 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

17
index.html
View file

@ -5,6 +5,16 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>noiz://</title> <title>noiz://</title>
<style> <style>
* { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #111; color: #e0e0e0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #111; color: #e0e0e0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.btn { background: linear-gradient(to bottom, #3a3a3a, #282828); border: 1px solid #484848; color: #e0e0e0; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 12px; transition: background .1s, transform .1s, box-shadow .1s; white-space: nowrap; box-shadow: 0 3px 0 #181818, 0 4px 6px rgba(0,0,0,0.4); transform: translateY(0); } .btn { background: linear-gradient(to bottom, #3a3a3a, #282828); border: 1px solid #484848; color: #e0e0e0; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 12px; transition: background .1s, transform .1s, box-shadow .1s; white-space: nowrap; box-shadow: 0 3px 0 #181818, 0 4px 6px rgba(0,0,0,0.4); transform: translateY(0); }
@ -35,6 +45,9 @@ canvas { width: 100%; height: 100px; border-radius: 6px; display: block; }
.progress-row .progress-bar { flex: 1; height: 6px; background: #333; border-radius: 3px; cursor: pointer; } .progress-row .progress-bar { flex: 1; height: 6px; background: #333; border-radius: 3px; cursor: pointer; }
.progress-row .progress-bar .fill { height: 100%; background: #1a6df5; border-radius: 3px; width: 0%; } .progress-row .progress-bar .fill { height: 100%; background: #1a6df5; border-radius: 3px; width: 0%; }
.progress-row .progress-bar:hover .fill { background: #3a8df5; } .progress-row .progress-bar:hover .fill { background: #3a8df5; }
#noiz-overlay { position: fixed; inset: 0; display: flex; justify-content: center; align-items: center; background: transparent; pointer-events: none; z-index: 9999; animation: fadeout 1s ease 2s forwards; }
#noiz-overlay img { max-width: 50vw; max-height: 50vh; }
@keyframes fadeout { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
#timeRemaining { color: #555; } #timeRemaining { color: #555; }
#vuMeter { width: 100%; height: 20px; border-radius: 2px; display: block; } #vuMeter { width: 100%; height: 20px; border-radius: 2px; display: block; }
.controls { display: flex; align-items: center; gap: 16px; align-self: flex-end; } .controls { display: flex; align-items: center; gap: 16px; align-self: flex-end; }
@ -98,6 +111,10 @@ footer .footer-track { flex: 1; min-width: 0; white-space: nowrap; overflow: hid
</head> </head>
<body> <body>
<div id="noiz-overlay">
<img src="noizmainlogo.png" alt="noiz://">
</div>
<div id="error"></div> <div id="error"></div>
<input type="file" id="folderPicker" webkitdirectory multiple style="display:none"> <input type="file" id="folderPicker" webkitdirectory multiple style="display:none">