Updated Form with E-Mail and JS-obfuscation

This commit is contained in:
spetznas
2026-05-17 08:39:09 +02:00
parent 1cb22384fd
commit 69a5cc6ee0
29 changed files with 1703 additions and 74 deletions
+3 -3
View File
@@ -1,9 +1,9 @@
<!DOCTYPE html>
<html lang="de">
<head>
<title>http://localhost:1313/de/marriage/</title>
<link rel="canonical" href="http://localhost:1313/de/marriage/">
<title>http://localhost:1313/de/hochzeit/</title>
<link rel="canonical" href="http://localhost:1313/de/hochzeit/">
<meta charset="utf-8">
<meta http-equiv="refresh" content="0; url=http://localhost:1313/de/marriage/">
<meta http-equiv="refresh" content="0; url=http://localhost:1313/de/hochzeit/">
</head>
</html>
+541 -6
View File
@@ -1,9 +1,544 @@
<!DOCTYPE html>
<html lang="de">
<head>
<title>http://localhost:1313/de/marriage/</title>
<link rel="canonical" href="http://localhost:1313/de/marriage/">
<meta charset="utf-8">
<meta http-equiv="refresh" content="0; url=http://localhost:1313/de/marriage/">
</head>
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<title>Markin Stefan</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<meta name="author" content="Markin Stefan">
<meta name="description" content="Wir freuen uns, Euch zu unserer 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 name="keywords" content="blog,desenvolvedor,pessoal">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Hochzeit von Stefan und Mariia">
<meta name="twitter:description" content="Wir freuen uns, Euch zu unserer 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/hochzeit/">
<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, Euch zu unserer 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:locale" content="de">
<meta property="og:type" content="article">
<link rel="canonical" href="http://localhost:1313/de/hochzeit/">
<link rel="preload" href="/fonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/fa-regular-400.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/css/coder.css" media="screen">
<link rel="stylesheet" href="/css/coder-dark.css" media="screen">
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" sizes="any">
<link rel="icon" type="image/png" href="/images/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/images/favicon-16x16.png" sizes="16x16">
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#5bbad5">
</head>
<body class="preload-transitions colorscheme-auto">
<div class="float-container">
<a id="dark-mode-toggle" class="colorscheme-toggle">
<i class="fa-solid fa-adjust fa-fw" aria-hidden="true"></i>
</a>
</div>
<main class="wrapper">
<nav class="navigation">
<section class="container">
<a class="navigation-title" href="http://localhost:1313/de/">
Markin Stefan
</a>
<input type="checkbox" id="menu-toggle" />
<label class="menu-button float-right" for="menu-toggle">
<i class="fa-solid fa-bars fa-fw" aria-hidden="true"></i>
</label>
<ul class="navigation-list">
<li class="navigation-item">
<a class="navigation-link " href="/de/about/">Über mich</a>
</li>
<li class="navigation-item">
<a class="navigation-link " href="/de/projects/">Projekte</a>
</li>
<li class="navigation-item">
<a class="navigation-link " href="/de/contact/">Kontakt</a>
</li>
<li class="navigation-item menu-separator">
<span>|</span>
</li>
<li class="navigation-item">
<a href="/wedding/">🇬🇧</a>
</li>
<li class="navigation-item">
<a href="/ru/svadba/">🇷🇺</a>
</li>
</ul>
</section>
</nav>
<div class="content">
<style>
body {
background-color: #fff;
color: #222;
background-image: url('/images/hochzeit-bg.jpg');
background-size: cover;
background-position: center;
background-repeat: repeat;
border-radius: 8px;
}
.wedding-container {
max-width: 1600px;
margin: 0 auto;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.6;
}
.hero {
text-align: center;
margin-bottom: 3rem;
}
.hero img {
width: 100%;
border-radius: 8px;
}
.hero h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.hero .date {
font-size: 1.2rem;
color: #666;
}
.section {
margin-bottom: 2.5rem;
}
.section h2 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
border-bottom: 1px solid #eee;
padding-bottom: 0.3rem;
}
.map iframe {
width: 100%;
background-color: rgba(255, 255, 255, 0.5);
padding: 1rem;
height: 400px;
border: 0;
border-radius: 8px;
}
.rsvp {
background-color: rgba(255, 255, 255, 0.8);
padding: 1rem;
border-radius: 8px;
}
.countdown {
text-align: center; margin-bottom: 2rem;
font-size: 5rem;
}
.footer {
text-align: center;
margin-top: 3rem;
color: #888;
font-size: 2rem;
padding-top: 1rem;
}
.footer a {
color: #0066cc;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
</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" autoplay 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.3;
let isPlaying = true;
btn.textContent = "⏸️";
audio.play().catch(() => {
isPlaying = false;
btn.textContent = "▶️";
});
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">
<h3>Countdown zu unserer Hochzeit:</h3>
<p id="timer"></p>
</div>
<div class="hero">
<img src="/images/hochzeit-header.jpg" alt="Wedding Header Image">
<h1>Hochzeit von Stefan und Mariia</h1>
<div class="date">
31. August 2026
</div>
</div>
<div class="section">
<p>Wir freuen uns, Euch zu unserer Hochzeit von Stefan und Mariia einzuladen!</p>
<p>Feiern Sie mit uns diesen besonderen Tag voller Liebe, Freude und wundervoller Erinnerungen!</p>
<p>Wir freuen uns darauf, Sie dort zu sehen!</p>
</div>
<div class="section">
<h2>📅 Veranstaltung</h2>
<p>
<strong>Zeremonie:</strong>
31. August 2026, um 14:00
</p>
<p><strong>Empfang:</strong> 17:00</p>
<p><strong>Ort:</strong> München, Deutschland</p>
</div>
<div class="section map">
<h2>📍 Ort</h2>
<iframe src="https://www.google.com/maps?q=Russische+Orthodoxe+Kirche+Auferstehungs-Gemeinde+Dachau+M%C3%BCnchen&hl=de&z=19&output=embed" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
<div class="section rsvp">
<h2>📝 RSVP</h2>
<p>Bitte antworten bis <strong>30. Juni</strong>.</p>
<p>E-Mail:
<span class="email"><b>Bitte erlauben Sie JavaScript um diesen Inhalt zu sehen.</b></span>
<script>
(function() {
var email = "hochzeit@markinstefan.xyz";
var user = email.split('@')[0];
var domain = email.split('@')[1];
var link = document.createElement('a');
link.href = 'mailto:' + user + '@' + domain;
link.textContent = user + '@' + domain;
var span = document.currentScript.previousElementSibling;
span.textContent = "";
span.appendChild(link);
})();
</script>
</p>
<form action="/rsvp-submit.php" method="POST">
<label for="first_name">Vorname:</label><br>
<input type="text" id="first_name" name="first_name" required><br><br>
<label for="last_name">Nachname:</label><br>
<input type="text" id="last_name" name="last_name" required><br><br>
<label>Getränkevorlieben:</label><br>
<input type="checkbox" id="wine" name="drinks[]" value="Wine">
<label for="wine">Wein</label><br>
<input type="checkbox" id="beer" name="drinks[]" value="Beer">
<label for="beer">Bier</label><br>
<input type="checkbox" id="juice" name="drinks[]" value="Juice">
<label for="juice">Saft</label><br><br>
<label for="allergies">Allergisch auf:</label><br>
<input type="text" id="allergies" name="allergies"><br><br>
<input type="text" name="website" style="display:none">
<button type="submit">Abschicken</button>
</form>
</div>
<div class="footer">
<p>Wir freuen uns darauf, mit euch zu feiern ❤️</p>
</div>
</div>
<script>
var labels = {
day: "T",
hour: "Std",
minute: "min",
second: "s"
};
var countDownDate = new Date("2026-08-31 14:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("timer").innerHTML =
days + " " + labels.day + " " +
hours + " " + labels.hour + " " +
minutes + " " + labels.minute + " " +
seconds + " " + labels.second;
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "Der große Tag ist da!";
}
}, 1000);
</script>
</div>
<footer class="footer">
<section class="container">
©
2026
Markin Stefan
·
Gestaltet mit <a href="https://gohugo.io/" target="_blank" rel="noopener">Hugo</a> & <a href="https://github.com/luizdepra/hugo-coder/" target="_blank" rel="noopener">Coder</a>.
</section>
</footer>
</main>
<script src="/js/coder.js"></script>
</body>
</html>
+2 -2
View File
@@ -9,9 +9,9 @@
<atom:link href="http://localhost:1313/de/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>Hochzeit von Stefan und Mariia</title>
<link>http://localhost:1313/de/marriage/</link>
<link>http://localhost:1313/de/hochzeit/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>http://localhost:1313/de/marriage/</guid>
<guid>http://localhost:1313/de/hochzeit/</guid>
<description>&lt;p&gt;Wir freuen uns, Euch zu unserer Hochzeit von Stefan und Mariia einzuladen!&lt;/p&gt;&#xA;&lt;p&gt;Feiern Sie mit uns diesen besonderen Tag voller Liebe, Freude und wundervoller Erinnerungen!&lt;/p&gt;&#xA;&lt;p&gt;Wir freuen uns darauf, Sie dort zu sehen!&lt;/p&gt;</description>
</item>
<item>
+3 -3
View File
@@ -1,9 +1,9 @@
<!DOCTYPE html>
<html lang="de">
<head>
<title>http://localhost:1313/de/marriage/</title>
<link rel="canonical" href="http://localhost:1313/de/marriage/">
<title>http://localhost:1313/de/hochzeit/</title>
<link rel="canonical" href="http://localhost:1313/de/hochzeit/">
<meta charset="utf-8">
<meta http-equiv="refresh" content="0; url=http://localhost:1313/de/marriage/">
<meta http-equiv="refresh" content="0; url=http://localhost:1313/de/hochzeit/">
</head>
</html>
+4 -4
View File
@@ -36,21 +36,21 @@
href="http://localhost:1313/de/categories/"
/>
</url><url>
<loc>http://localhost:1313/de/marriage/</loc>
<loc>http://localhost:1313/de/hochzeit/</loc>
<xhtml:link
rel="alternate"
hreflang="en"
href="http://localhost:1313/marriage/"
href="http://localhost:1313/wedding/"
/>
<xhtml:link
rel="alternate"
hreflang="ru"
href="http://localhost:1313/ru/marriage/"
href="http://localhost:1313/ru/svadba/"
/>
<xhtml:link
rel="alternate"
hreflang="de"
href="http://localhost:1313/de/marriage/"
href="http://localhost:1313/de/hochzeit/"
/>
</url><url>
<loc>http://localhost:1313/de/contact/</loc>
+8 -8
View File
@@ -70,21 +70,21 @@
href="http://localhost:1313/"
/>
</url><url>
<loc>http://localhost:1313/marriage/</loc>
<loc>http://localhost:1313/wedding/</loc>
<xhtml:link
rel="alternate"
hreflang="de"
href="http://localhost:1313/de/marriage/"
href="http://localhost:1313/de/hochzeit/"
/>
<xhtml:link
rel="alternate"
hreflang="ru"
href="http://localhost:1313/ru/marriage/"
href="http://localhost:1313/ru/svadba/"
/>
<xhtml:link
rel="alternate"
hreflang="en"
href="http://localhost:1313/marriage/"
href="http://localhost:1313/wedding/"
/>
</url><url>
<loc>http://localhost:1313/about/</loc>
@@ -141,13 +141,13 @@
<loc>http://localhost:1313/tags/</loc>
<xhtml:link
rel="alternate"
hreflang="de"
href="http://localhost:1313/de/tags/"
hreflang="ru"
href="http://localhost:1313/ru/tags/"
/>
<xhtml:link
rel="alternate"
hreflang="ru"
href="http://localhost:1313/ru/tags/"
hreflang="de"
href="http://localhost:1313/de/tags/"
/>
<xhtml:link
rel="alternate"
Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 MiB

+2 -2
View File
@@ -16,9 +16,9 @@
</item>
<item>
<title>Marriage of Stefan and Mariia</title>
<link>http://localhost:1313/marriage/</link>
<link>http://localhost:1313/wedding/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>http://localhost:1313/marriage/</guid>
<guid>http://localhost:1313/wedding/</guid>
<description>&lt;p&gt;We are happy to invite you to our wedding of Stefan and Mariia!&lt;/p&gt;&#xA;&lt;p&gt;Join us in celebrating this special day with love, joy, and wonderful memories.&lt;/p&gt;&#xA;&lt;p&gt;We look forward to seeing you there!&lt;/p&gt;</description>
</item>
<item>
+3 -3
View File
@@ -1,9 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>http://localhost:1313/marriage/</title>
<link rel="canonical" href="http://localhost:1313/marriage/">
<title>http://localhost:1313/wedding/</title>
<link rel="canonical" href="http://localhost:1313/wedding/">
<meta charset="utf-8">
<meta http-equiv="refresh" content="0; url=http://localhost:1313/marriage/">
<meta http-equiv="refresh" content="0; url=http://localhost:1313/wedding/">
</head>
</html>
+1 -1
View File
@@ -142,7 +142,7 @@ We look forward to seeing you there!">
<li class="navigation-item">
<a href="/de/marriage/">🇩🇪</a>
<a href="/de/hochzeit/">🇩🇪</a>
</li>
+3 -3
View File
@@ -1,9 +1,9 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>http://localhost:1313/ru/marriage/</title>
<link rel="canonical" href="http://localhost:1313/ru/marriage/">
<title>http://localhost:1313/ru/svadba/</title>
<link rel="canonical" href="http://localhost:1313/ru/svadba/">
<meta charset="utf-8">
<meta http-equiv="refresh" content="0; url=http://localhost:1313/ru/marriage/">
<meta http-equiv="refresh" content="0; url=http://localhost:1313/ru/svadba/">
</head>
</html>
+2 -2
View File
@@ -30,9 +30,9 @@
</item>
<item>
<title>Свадьба Стефана и Марии</title>
<link>http://localhost:1313/ru/marriage/</link>
<link>http://localhost:1313/ru/svadba/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>http://localhost:1313/ru/marriage/</guid>
<guid>http://localhost:1313/ru/svadba/</guid>
<description>&lt;p&gt;С радостью приглашаем вас на свадьбу Стефана и Марии!&lt;/p&gt;&#xA;&lt;p&gt;Мы приглашаем вас разделить с нами этот особенный день, наполненный любовью, радостью и незабываемыми воспоминаниями!&lt;/p&gt;&#xA;&lt;p&gt;С нетерпением ждем встречи с вами!&lt;/p&gt;</description>
</item>
</channel>
+3 -3
View File
@@ -1,9 +1,9 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>http://localhost:1313/ru/marriage/</title>
<link rel="canonical" href="http://localhost:1313/ru/marriage/">
<title>http://localhost:1313/ru/svadba/</title>
<link rel="canonical" href="http://localhost:1313/ru/svadba/">
<meta charset="utf-8">
<meta http-equiv="refresh" content="0; url=http://localhost:1313/ru/marriage/">
<meta http-equiv="refresh" content="0; url=http://localhost:1313/ru/svadba/">
</head>
</html>
+2 -2
View File
@@ -142,14 +142,14 @@
<li class="navigation-item">
<a href="/de/marriage/">🇩🇪</a>
<a href="/de/hochzeit/">🇩🇪</a>
</li>
<li class="navigation-item">
<a href="/marriage/">🇬🇧</a>
<a href="/wedding/">🇬🇧</a>
</li>
+4 -4
View File
@@ -138,21 +138,21 @@
href="http://localhost:1313/ru/about/"
/>
</url><url>
<loc>http://localhost:1313/ru/marriage/</loc>
<loc>http://localhost:1313/ru/svadba/</loc>
<xhtml:link
rel="alternate"
hreflang="de"
href="http://localhost:1313/de/marriage/"
href="http://localhost:1313/de/hochzeit/"
/>
<xhtml:link
rel="alternate"
hreflang="en"
href="http://localhost:1313/marriage/"
href="http://localhost:1313/wedding/"
/>
<xhtml:link
rel="alternate"
hreflang="ru"
href="http://localhost:1313/ru/marriage/"
href="http://localhost:1313/ru/svadba/"
/>
</url>
</urlset>
+541 -6
View File
@@ -1,9 +1,544 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>http://localhost:1313/ru/marriage/</title>
<link rel="canonical" href="http://localhost:1313/ru/marriage/">
<meta charset="utf-8">
<meta http-equiv="refresh" content="0; url=http://localhost:1313/ru/marriage/">
</head>
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<title>Маркин Степан</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<meta name="author" content="Маркин Степан">
<meta name="description" content="С радостью приглашаем вас на свадьбу Стефана и Марии!
Мы приглашаем вас разделить с нами этот особенный день, наполненный любовью, радостью и незабываемыми воспоминаниями!
С нетерпением ждем встречи с вами!">
<meta name="keywords" content="blog,desenvolvedor,pessoal">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Свадьба Стефана и Марии">
<meta name="twitter:description" content="С радостью приглашаем вас на свадьбу Стефана и Марии!
Мы приглашаем вас разделить с нами этот особенный день, наполненный любовью, радостью и незабываемыми воспоминаниями!
С нетерпением ждем встречи с вами!">
<meta property="og:url" content="http://localhost:1313/ru/svadba/">
<meta property="og:site_name" content="Маркин Степан">
<meta property="og:title" content="Свадьба Стефана и Марии">
<meta property="og:description" content="С радостью приглашаем вас на свадьбу Стефана и Марии!
Мы приглашаем вас разделить с нами этот особенный день, наполненный любовью, радостью и незабываемыми воспоминаниями!
С нетерпением ждем встречи с вами!">
<meta property="og:locale" content="ru">
<meta property="og:type" content="article">
<link rel="canonical" href="http://localhost:1313/ru/svadba/">
<link rel="preload" href="/fonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/fa-regular-400.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/css/coder.css" media="screen">
<link rel="stylesheet" href="/css/coder-dark.css" media="screen">
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" sizes="any">
<link rel="icon" type="image/png" href="/images/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/images/favicon-16x16.png" sizes="16x16">
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#5bbad5">
</head>
<body class="preload-transitions colorscheme-auto">
<div class="float-container">
<a id="dark-mode-toggle" class="colorscheme-toggle">
<i class="fa-solid fa-adjust fa-fw" aria-hidden="true"></i>
</a>
</div>
<main class="wrapper">
<nav class="navigation">
<section class="container">
<a class="navigation-title" href="http://localhost:1313/ru/">
Маркин Степан
</a>
<input type="checkbox" id="menu-toggle" />
<label class="menu-button float-right" for="menu-toggle">
<i class="fa-solid fa-bars fa-fw" aria-hidden="true"></i>
</label>
<ul class="navigation-list">
<li class="navigation-item">
<a class="navigation-link " href="/ru/about/">Обо мне</a>
</li>
<li class="navigation-item">
<a class="navigation-link " href="/ru/projects/">Проекты</a>
</li>
<li class="navigation-item">
<a class="navigation-link " href="/ru/contact/">Контакты</a>
</li>
<li class="navigation-item menu-separator">
<span>|</span>
</li>
<li class="navigation-item">
<a href="/de/hochzeit/">🇩🇪</a>
</li>
<li class="navigation-item">
<a href="/wedding/">🇬🇧</a>
</li>
</ul>
</section>
</nav>
<div class="content">
<style>
body {
background-color: #fff;
color: #222;
background-image: url('/images/hochzeit-bg.jpg');
background-size: cover;
background-position: center;
background-repeat: repeat;
border-radius: 8px;
}
.wedding-container {
max-width: 1600px;
margin: 0 auto;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.6;
}
.hero {
text-align: center;
margin-bottom: 3rem;
}
.hero img {
width: 100%;
border-radius: 8px;
}
.hero h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.hero .date {
font-size: 1.2rem;
color: #666;
}
.section {
margin-bottom: 2.5rem;
}
.section h2 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
border-bottom: 1px solid #eee;
padding-bottom: 0.3rem;
}
.map iframe {
width: 100%;
background-color: rgba(255, 255, 255, 0.5);
padding: 1rem;
height: 400px;
border: 0;
border-radius: 8px;
}
.rsvp {
background-color: rgba(255, 255, 255, 0.8);
padding: 1rem;
border-radius: 8px;
}
.countdown {
text-align: center; margin-bottom: 2rem;
font-size: 5rem;
}
.footer {
text-align: center;
margin-top: 3rem;
color: #888;
font-size: 2rem;
padding-top: 1rem;
}
.footer a {
color: #0066cc;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
</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" autoplay 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.3;
let isPlaying = true;
btn.textContent = "⏸️";
audio.play().catch(() => {
isPlaying = false;
btn.textContent = "▶️";
});
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">
<h3>До нашей свадьбы осталось:</h3>
<p id="timer"></p>
</div>
<div class="hero">
<img src="/images/hochzeit-header.jpg" alt="Wedding Header Image">
<h1>Свадьба Стефана и Марии</h1>
<div class="date">
31 августа 2026 г.
</div>
</div>
<div class="section">
<p>С радостью приглашаем вас на свадьбу Стефана и Марии!</p>
<p>Мы приглашаем вас разделить с нами этот особенный день, наполненный любовью, радостью и незабываемыми воспоминаниями!</p>
<p>С нетерпением ждем встречи с вами!</p>
</div>
<div class="section">
<h2>📅 Мероприятие</h2>
<p>
<strong>Церемония:</strong>
31 августа 2026 г., в 14:00
</p>
<p><strong>Начало:</strong> 17:00</p>
<p><strong>Место:</strong> Мюнхен, Германия</p>
</div>
<div class="section map">
<h2>📍 Место</h2>
<iframe src="https://www.google.com/maps?q=Russische+Orthodoxe+Kirche+Auferstehungs-Gemeinde+Dachau+M%C3%BCnchen&hl=ru&z=19&output=embed" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
<div class="section rsvp">
<h2>📝 RSVP</h2>
<p>Пожалуйста, ответьте до <strong>30 июня</strong>.</p>
<p>Электронная почта:
<span class="email"><b>Пожалуйста, разрешите JavaScript для просмотра этого контента.</b></span>
<script>
(function() {
var email = "hochzeit@markinstefan.xyz";
var user = email.split('@')[0];
var domain = email.split('@')[1];
var link = document.createElement('a');
link.href = 'mailto:' + user + '@' + domain;
link.textContent = user + '@' + domain;
var span = document.currentScript.previousElementSibling;
span.textContent = "";
span.appendChild(link);
})();
</script>
</p>
<form action="/rsvp-submit.php" method="POST">
<label for="first_name">Имя:</label><br>
<input type="text" id="first_name" name="first_name" required><br><br>
<label for="last_name">Фамилия:</label><br>
<input type="text" id="last_name" name="last_name" required><br><br>
<label>Предпочтения по напиткам::</label><br>
<input type="checkbox" id="wine" name="drinks[]" value="Wine">
<label for="wine">Вино</label><br>
<input type="checkbox" id="beer" name="drinks[]" value="Beer">
<label for="beer">Пиво</label><br>
<input type="checkbox" id="juice" name="drinks[]" value="Juice">
<label for="juice">Сок</label><br><br>
<label for="allergies">Аллергия на:</label><br>
<input type="text" id="allergies" name="allergies"><br><br>
<input type="text" name="website" style="display:none">
<button type="submit">Отправить</button>
</form>
</div>
<div class="footer">
<p>❤️ Мы с нетерпением ждем встречи с вами ❤️</p>
</div>
</div>
<script>
var labels = {
day: "Д.",
hour: "ч.",
minute: "м.",
second: "c."
};
var countDownDate = new Date("2026-08-31 14:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("timer").innerHTML =
days + " " + labels.day + " " +
hours + " " + labels.hour + " " +
minutes + " " + labels.minute + " " +
seconds + " " + labels.second;
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "Наступил великий день!";
}
}, 1000);
</script>
</div>
<footer class="footer">
<section class="container">
©
2026
Маркин Степан
·
Работает на <a href="https://gohugo.io/" target="_blank" rel="noopener">Hugo</a> & <a href="https://github.com/luizdepra/hugo-coder/" target="_blank" rel="noopener">Coder</a>.
</section>
</footer>
</main>
<script src="/js/coder.js"></script>
</body>
</html>
+2 -2
View File
@@ -137,14 +137,14 @@
<li class="navigation-item">
<a href="/de/tags/">🇩🇪</a>
<a href="/ru/tags/">🇷🇺</a>
</li>
<li class="navigation-item">
<a href="/ru/tags/">🇷🇺</a>
<a href="/de/tags/">🇩🇪</a>
</li>
+541 -6
View File
@@ -1,9 +1,544 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>http://localhost:1313/marriage/</title>
<link rel="canonical" href="http://localhost:1313/marriage/">
<meta charset="utf-8">
<meta http-equiv="refresh" content="0; url=http://localhost:1313/marriage/">
</head>
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<title>Markin Stefan</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<meta name="author" content="Markin Stefan">
<meta name="description" content="We are happy to invite you to our 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 name="keywords" content="blog,developer,personal">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Marriage of Stefan and Mariia">
<meta name="twitter:description" content="We are happy to invite you to our 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/wedding/">
<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 our 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:locale" content="en">
<meta property="og:type" content="article">
<link rel="canonical" href="http://localhost:1313/wedding/">
<link rel="preload" href="/fonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/fa-regular-400.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/css/coder.css" media="screen">
<link rel="stylesheet" href="/css/coder-dark.css" media="screen">
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" sizes="any">
<link rel="icon" type="image/png" href="/images/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/images/favicon-16x16.png" sizes="16x16">
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#5bbad5">
</head>
<body class="preload-transitions colorscheme-auto">
<div class="float-container">
<a id="dark-mode-toggle" class="colorscheme-toggle">
<i class="fa-solid fa-adjust fa-fw" aria-hidden="true"></i>
</a>
</div>
<main class="wrapper">
<nav class="navigation">
<section class="container">
<a class="navigation-title" href="http://localhost:1313/">
Markin Stefan
</a>
<input type="checkbox" id="menu-toggle" />
<label class="menu-button float-right" for="menu-toggle">
<i class="fa-solid fa-bars fa-fw" aria-hidden="true"></i>
</label>
<ul class="navigation-list">
<li class="navigation-item">
<a class="navigation-link " href="/about/">About</a>
</li>
<li class="navigation-item">
<a class="navigation-link " href="/projects/">Projects</a>
</li>
<li class="navigation-item">
<a class="navigation-link " href="/contact/">Contact me</a>
</li>
<li class="navigation-item menu-separator">
<span>|</span>
</li>
<li class="navigation-item">
<a href="/de/hochzeit/">🇩🇪</a>
</li>
<li class="navigation-item">
<a href="/ru/svadba/">🇷🇺</a>
</li>
</ul>
</section>
</nav>
<div class="content">
<style>
body {
background-color: #fff;
color: #222;
background-image: url('/images/hochzeit-bg.jpg');
background-size: cover;
background-position: center;
background-repeat: repeat;
border-radius: 8px;
}
.wedding-container {
max-width: 1600px;
margin: 0 auto;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.6;
}
.hero {
text-align: center;
margin-bottom: 3rem;
}
.hero img {
width: 100%;
border-radius: 8px;
}
.hero h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.hero .date {
font-size: 1.2rem;
color: #666;
}
.section {
margin-bottom: 2.5rem;
}
.section h2 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
border-bottom: 1px solid #eee;
padding-bottom: 0.3rem;
}
.map iframe {
width: 100%;
background-color: rgba(255, 255, 255, 0.5);
padding: 1rem;
height: 400px;
border: 0;
border-radius: 8px;
}
.rsvp {
background-color: rgba(255, 255, 255, 0.8);
padding: 1rem;
border-radius: 8px;
}
.countdown {
text-align: center; margin-bottom: 2rem;
font-size: 5rem;
}
.footer {
text-align: center;
margin-top: 3rem;
color: #888;
font-size: 2rem;
padding-top: 1rem;
}
.footer a {
color: #0066cc;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
</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" autoplay 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.3;
let isPlaying = true;
btn.textContent = "⏸️";
audio.play().catch(() => {
isPlaying = false;
btn.textContent = "▶️";
});
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">
<h3>Countdown to our Wedding:</h3>
<p id="timer"></p>
</div>
<div class="hero">
<img src="/images/hochzeit-header.jpg" alt="Wedding Header Image">
<h1>Marriage of Stefan and Mariia</h1>
<div class="date">
August 31, 2026
</div>
</div>
<div class="section">
<p>We are happy to invite you to our wedding of Stefan and Mariia!</p>
<p>Join us in celebrating this special day with love, joy, and wonderful memories.</p>
<p>We look forward to seeing you there!</p>
</div>
<div class="section">
<h2>📅 Event</h2>
<p>
<strong>Ceremony:</strong>
August 31, 2026, at 14:00
</p>
<p><strong>Reception:</strong> 17:00</p>
<p><strong>Location:</strong> Munich, Germany</p>
</div>
<div class="section map">
<h2>📍 Location</h2>
<iframe src="https://www.google.com/maps?q=Russische+Orthodoxe+Kirche+Auferstehungs-Gemeinde+Dachau+M%C3%BCnchen&hl=en&z=19&output=embed" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
<div class="section rsvp">
<h2>📝 RSVP</h2>
<p>Please respond by <strong>June 30</strong>.</p>
<p>Email:
<span class="email"><b>Please enable JavaScript to see this content.</b></span>
<script>
(function() {
var email = "hochzeit@markinstefan.xyz";
var user = email.split('@')[0];
var domain = email.split('@')[1];
var link = document.createElement('a');
link.href = 'mailto:' + user + '@' + domain;
link.textContent = user + '@' + domain;
var span = document.currentScript.previousElementSibling;
span.textContent = "";
span.appendChild(link);
})();
</script>
</p>
<form action="/rsvp-submit.php" method="POST">
<label for="first_name">First name:</label><br>
<input type="text" id="first_name" name="first_name" required><br><br>
<label for="last_name">Last name:</label><br>
<input type="text" id="last_name" name="last_name" required><br><br>
<label>Drink preferences::</label><br>
<input type="checkbox" id="wine" name="drinks[]" value="Wine">
<label for="wine">Wine</label><br>
<input type="checkbox" id="beer" name="drinks[]" value="Beer">
<label for="beer">Beer</label><br>
<input type="checkbox" id="juice" name="drinks[]" value="Juice">
<label for="juice">Juice</label><br><br>
<label for="allergies">Allergic to:</label><br>
<input type="text" id="allergies" name="allergies"><br><br>
<input type="text" name="website" style="display:none">
<button type="submit">Send</button>
</form>
</div>
<div class="footer">
<p>We look forward to celebrating with you ❤️</p>
</div>
</div>
<script>
var labels = {
day: "d",
hour: "h",
minute: "m",
second: "s"
};
var countDownDate = new Date("2026-08-31 14:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("timer").innerHTML =
days + " " + labels.day + " " +
hours + " " + labels.hour + " " +
minutes + " " + labels.minute + " " +
seconds + " " + labels.second;
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "The big day is here!";
}
}, 1000);
</script>
</div>
<footer class="footer">
<section class="container">
©
2026
Markin Stefan
·
Powered by <a href="https://gohugo.io/" target="_blank" rel="noopener">Hugo</a> & <a href="https://github.com/luizdepra/hugo-coder/" target="_blank" rel="noopener">Coder</a>.
</section>
</footer>
</main>
<script src="/js/coder.js"></script>
</body>
</html>