iroxol/markinstefan.xyz
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added music button

Browse Source
This commit is contained in:
spetznas
2026-05-04 19:13:52 +02:00
parent eccb229f03
commit 9bd514dac0
83 changed files with 704 additions and 13276 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/de/marriage/index.html
Executable → Regular
+64 -7
View File
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="de">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<head>
<title>Markin Stefan</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -22,7 +22,7 @@ Wir freuen uns darauf, Sie dort zu sehen!">
<meta name="twitter:description" content="Wir freuen uns, Sie zur Hochzeit von Stefan und Mariia einzuladen! Feiern Sie mit uns diesen besonderen Tag voller Liebe, Freude und wundervoller Erinnerungen.
Wir freuen uns darauf, Sie dort zu sehen!">
<meta property="og:url" content="http://localhost:1313/de/marriage/">
<meta property="og:url" content="http://markinstefan.xyz/de/marriage/">
<meta property="og:site_name" content="Markin Stefan">
<meta property="og:title" content="Hochzeit von Stefan und Mariia">
<meta property="og:description" content="Wir freuen uns, Sie zur Hochzeit von Stefan und Mariia einzuladen! Feiern Sie mit uns diesen besonderen Tag voller Liebe, Freude und wundervoller Erinnerungen.
@@ -33,7 +33,7 @@ Wir freuen uns darauf, Sie dort zu sehen!">
<link rel="canonical" href="http://localhost:1313/de/marriage/">
<link rel="canonical" href="http://markinstefan.xyz/de/marriage/">
<link rel="preload" href="/fonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin>
@@ -43,7 +43,7 @@ Wir freuen uns darauf, Sie dort zu sehen!">
<link rel="stylesheet" href="/css/coder.css" media="screen">
<link rel="stylesheet" href="/css/coder.min.f6b1b35a7b02521b25338f6cf58975f9980a6c12847763fe35a48307758cd1e7.css" integrity="sha256-9rGzWnsCUhslM49s9Yl1&#43;ZgKbBKEd2P&#43;NaSDB3WM0ec=" crossorigin="anonymous" media="screen" />
@@ -53,7 +53,7 @@ Wir freuen uns darauf, Sie dort zu sehen!">
<link rel="stylesheet" href="/css/coder-dark.css" media="screen">
<link rel="stylesheet" href="/css/coder-dark.min.ad48f476275974885bdc03d5251e3cdbe1678c54a63ff772376b0ed2adc468dd.css" integrity="sha256-rUj0didZdIhb3APVJR482&#43;FnjFSmP/dyN2sO0q3EaN0=" crossorigin="anonymous" media="screen" />
@@ -102,7 +102,7 @@ Wir freuen uns darauf, Sie dort zu sehen!">
<nav class="navigation">
<section class="container">
<a class="navigation-title" href="http://localhost:1313/de/">
<a class="navigation-title" href="http://markinstefan.xyz/de/">
Markin Stefan
</a>
@@ -238,6 +238,63 @@ Wir freuen uns darauf, Sie dort zu sehen!">
</style>
<div class="wedding-container">
<style>
.music-fab {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 9999;
}
.fab-button {
width: 52px;
height: 52px;
border-radius: 50%;
border: none;
background: white;
box-shadow: 0 6px 18px rgba(0,0,0,0.2);
font-size: 20px;
cursor: pointer;
transition: transform 0.15s ease;
}
.fab-button:active {
transform: scale(0.95);
}
</style>
<div class="music-fab">
<button id="music-btn" class="fab-button">▶️</button>
</div>
<audio id="bg-music" loop>
<source src="/audio/canon-in-d.mp3" type="audio/mpeg">
</audio>
<script>
const btn = document.getElementById("music-btn");
const audio = document.getElementById("bg-music");
audio.volume = 0.2;
let isPlaying = false;
btn.addEventListener("click", async () => {
if (!isPlaying) {
try {
await audio.play();
isPlaying = true;
btn.textContent = "⏸️";
} catch (e) {
console.log("Playback blocked:", e);
}
} else {
audio.pause();
isPlaying = false;
btn.textContent = "▶️";
}
});
</script>
<div class="countdown">
@@ -364,7 +421,7 @@ Wir freuen uns darauf, Sie dort zu sehen!">
<script src="/js/coder.js"></script>
<script src="/js/coder.min.6ae284be93d2d19dad1f02b0039508d9aab3180a12a06dcc71b0b0ef7825a317.js" integrity="sha256-auKEvpPS0Z2tHwKwA5UI2aqzGAoSoG3McbCw73gloxc="></script>