Mindboost/mindboost-media-server
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add a symbol and a funny button

Browse Source
This commit is contained in:
Robert Rapp
2025-07-17 12:14:12 +02:00
parent 6302ea2cc8
commit 509af1ffaa
2 changed files with 104 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
nginx/html/fasting.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

111
nginx/html/index.html
View File

@@ -2,14 +2,111 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Hello from b.mindboost.team 🎉</title> <meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Mindboost – Media Server</title>
<style>
/* ----- Reset & flex centering ----- */
html,
body {
height: 100%;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: #111;
color: #fff;
font-family: sans-serif;
}
/* ----- The clickable image “button” ----- */
#soundBtn {
width: 200px; /* tweak size here */
cursor: pointer;
transition: filter 0.2s;
}
#soundBtn:hover {
filter: brightness(1.3);
}
/* ----- Wobble animation (2× back-and-forth) ----- */
@keyframes wobble {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(7deg);
}
50% {
transform: rotate(-7deg);
}
75% {
transform: rotate(5deg);
}
100% {
transform: rotate(0deg);
}
}
.animate {
animation: wobble 0.6s ease-in-out 2;
}
</style>
</head> </head>
<body> <body>
<h1>🚀 Nginx inside Docker – it works!</h1> <!-- Replace play.png with any PNG/SVG/JPG in your html folder -->
<p> <img id="soundBtn" src="fasting.png" alt="Fasting" />
Edit <div>
<code>nginx/html/index.html</code> Thanks to
and re-deploy to see changes. <a href="https://www.flaticon.com/free-icons/fart" title="fart icons">
</p> BomSymbols
</a>
for creating the icon and share it via Flaticon Plattform and thanks to
the
<a
href="https://pixabay.com/users/freesound_community-46691455/"
title="freesound_community"
>
freesound_community
</a>
to share this incredible sound on pixabay!
</div>
<script>
/* ---------- Audio-setup & wobbly button ---------- */
;(async () => {
const BUTTON = document.getElementById("soundBtn")
const AUDIO_FILE = "demo-ping.mp3" // <-- change path/format at will
let ctx, buffer
// Pre-fetch & decode once (lazy: only on first click)
async function initAudio() {
ctx = new (window.AudioContext || window.webkitAudioContext)()
const res = await fetch(AUDIO_FILE)
const array = await res.arrayBuffer()
buffer = await ctx.decodeAudioData(array)
}
function playSound() {
const src = ctx.createBufferSource()
src.buffer = buffer
src.connect(ctx.destination)
src.start()
}
// Click handler: spin + sound 🌀🎵
BUTTON.addEventListener("click", async () => {
// First click: create context & decode
if (!ctx) await initAudio()
playSound()
// Trigger wobble animation
BUTTON.classList.add("animate")
BUTTON.addEventListener(
"animationend",
() => BUTTON.classList.remove("animate"),
{ once: true },
)
})
})()
</script>
</body> </body>
</html> </html>