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/marriage/index.html
Executable → Regular
+64 -7
View File
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<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 @@ We look forward to seeing you there!">
<meta name="twitter:description" content="We are happy to invite you to the wedding of Stefan and Mariia! Join us in celebrating this special day with love, joy, and wonderful memories.
We look forward to seeing you there!">
<meta property="og:url" content="http://localhost:1313/marriage/">
<meta property="og:url" content="http://markinstefan.xyz/marriage/">
<meta property="og:site_name" content="Markin Stefan">
<meta property="og:title" content="Marriage of Stefan and Mariia">
<meta property="og:description" content="We are happy to invite you to the wedding of Stefan and Mariia! Join us in celebrating this special day with love, joy, and wonderful memories.
@@ -33,7 +33,7 @@ We look forward to seeing you there!">
<link rel="canonical" href="http://localhost:1313/marriage/">
<link rel="canonical" href="http://markinstefan.xyz/marriage/">
<link rel="preload" href="/fonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin>
@@ -43,7 +43,7 @@ We look forward to seeing you there!">
<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 @@ We look forward to seeing you there!">
<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 @@ We look forward to seeing you there!">
<nav class="navigation">
<section class="container">
<a class="navigation-title" href="http://localhost:1313/">
<a class="navigation-title" href="http://markinstefan.xyz/">
Markin Stefan
</a>
@@ -238,6 +238,63 @@ We look forward to seeing you there!">
</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 @@ We look forward to seeing you there!">
<script src="/js/coder.js"></script>
<script src="/js/coder.min.6ae284be93d2d19dad1f02b0039508d9aab3180a12a06dcc71b0b0ef7825a317.js" integrity="sha256-auKEvpPS0Z2tHwKwA5UI2aqzGAoSoG3McbCw73gloxc="></script>