Files
markinstefan.xyz/public/de/hochzeit/index.html
T
2026-06-17 20:29:05 +02:00

759 lines
18 KiB
HTML
Executable File

<!DOCTYPE html>
<html lang="de">
<head>
<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://markinstefan.xyz/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://markinstefan.xyz/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.min.f6b1b35a7b02521b25338f6cf58975f9980a6c12847763fe35a48307758cd1e7.css" integrity="sha256-9rGzWnsCUhslM49s9Yl1&#43;ZgKbBKEd2P&#43;NaSDB3WM0ec=" crossorigin="anonymous" media="screen" />
<link rel="stylesheet" href="/css/coder-dark.min.ad48f476275974885bdc03d5251e3cdbe1678c54a63ff772376b0ed2adc468dd.css" integrity="sha256-rUj0didZdIhb3APVJR482&#43;FnjFSmP/dyN2sO0q3EaN0=" crossorigin="anonymous" 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://markinstefan.xyz/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>
.rsvp input[type="text"],
.rsvp input[type="email"],
.rsvp input[type="tel"],
.rsvp input[type="number"],
.rsvp textarea {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.rsvp button {
width: 100%;
max-width: 300px;
}
html,
body {
overflow-x: hidden;
}
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;
}
body.colorscheme-dark .wedding-container,
body.colorscheme-dark .hero,
body.colorscheme-dark .section,
body.colorscheme-dark .rsvp,
body.colorscheme-dark .countdown {
color: #222 !important;
}
body.colorscheme-dark .section h2,
body.colorscheme-dark .hero h1,
body.colorscheme-dark label,
body.colorscheme-dark p,
body.colorscheme-dark h3 {
color: #222 !important;
}
.wedding-container {
max-width: 1600px;
margin: 0 auto;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.6;
color: #222;
}
.hero {
text-align: center;
margin-bottom: 3rem;
background-color: rgba(255, 255, 255, 0.65);
padding: 1.5rem;
border-radius: 12px;
backdrop-filter: blur(4px);
}
.hero img {
width: 100%;
border-radius: 8px;
}
.hero h1 {
font-size: 2.5rem;
margin-bottom: 0.7rem;
}
.hero .date {
font-size: 2rem;
color: #666;
}
.section {
margin-bottom: 2.5rem;
background-color: rgba(255, 255, 255, 0.65);
padding: 1.5rem;
border-radius: 12px;
backdrop-filter: blur(4px);
}
.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.65);
padding: 1.5rem;
border-radius: 12px;
backdrop-filter: blur(4px);
}
.countdown {
background-color: rgba(255, 255, 255, 0.65);
padding: 1.5rem;
border-radius: 12px;
backdrop-filter: blur(4px);
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">
<h1>Hochzeit von Stefan und Mariia</h1>
<div class="date">
31. August 2026
</div>
<img src="/images/hochzeit-header.jpg" alt="Wedding Header Image">
</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 15:00
</p>
<p><strong>Empfang:</strong> 15:30</p>
<p><strong>Offizielles Ende:</strong> 21:30</p>
<p><strong>Ort:</strong> Haslach (Traunstein), Deutschland</p>
</div>
<div class="section map">
<h2>📍 Ort</h2>
<iframe src="https://www.google.com/maps?q=M%C3%BChlgasse+1,+83278+Traunstein-Haslach&hl=de&z=18&output=embed" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
<div class="rsvp">
<h2>📝 RSVP</h2>
<p>Bitte antworten bis <strong>05. Juli</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">
<input type="hidden" name="lang" value="de">
<h3>Persönliche Informationen</h3>
<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 for="email">E-Mail-Adresse:</label><br> <input type="email" id="email" name="email" required><br><br>
<label for="phone">Telefonnummer:</label><br> <input type="tel" id="phone" name="phone" placeholder="+45 12 34 56 78"><br> <small>Wird für die WhatsApp-Gruppe und Hochzeitsinformationen verwendet</small><br><br>
<h3>Teilnahme</h3>
<input type="radio" id="attending_yes" name="attendance" value="Yes" required>
<label for="attending_yes">Ich nehme teil</label><br>
<input type="radio" id="attending_no" name="attendance" value="No">
<label for="attending_no">Ich kann leider nicht teilnehmen</label><br><br>
<h3>Getränkevorlieben</h3>
<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>
<input type="checkbox" id="water" name="drinks[]" value="Water">
<label for="water">Wasser</label><br>
<input type="checkbox" id="cola" name="drinks[]" value="Cola">
<label for="cola">Cola</label><br>
<input type="checkbox" id="fanta" name="drinks[]" value="Fanta">
<label for="fanta">Fanta</label><br><br>
<h3>Ernährungsweise</h3>
<input type="radio" id="diet_meat" name="diet" value="Meat" required>
<label for="diet_meat">Fleisch</label><br>
<input type="radio" id="diet_vegetarian" name="diet" value="Vegetarian">
<label for="diet_vegetarian">Vegetarisch</label><br>
<input type="radio" id="diet_vegan" name="diet" value="Vegan">
<label for="diet_vegan">Vegan</label><br><br>
<h3>Allergisch auf</h3>
<input type="checkbox" id="gluten" name="allergies[]" value="Gluten">
<label for="gluten">Gluten</label><br>
<input type="checkbox" id="lactose" name="allergies[]" value="Lactose">
<label for="lactose">Laktose</label><br>
<input type="checkbox" id="nuts" name="allergies[]" value="Nuts">
<label for="nuts">Nüsse</label><br>
<input type="checkbox" id="other_allergy" name="allergies[]" value="Other">
<label for="other_allergy">Sonstiges</label><br><br>
<label for="allergies_other">Weitere Details zu Allergien:</label><br> <input type="text" id="allergies_other" name="allergies_other"><br><br>
<h3>Organisation</h3>
<input type="checkbox" id="parking" name="parking" value="Yes">
<label for="parking">Ich benötige einen Parkplatz</label><br>
<input type="checkbox" id="ride_needed" name="ride_needed" value="Yes">
<label for="ride_needed">Ich benötige eine Mitfahrgelegenheit</label><br>
<input type="checkbox" id="ride_offer" name="ride_offer" value="Yes">
<label for="ride_offer">Ich kann eine Mitfahrgelegenheit anbieten</label><br>
<input type="checkbox" id="hotel" name="hotel" value="Yes">
<label for="hotel">Ich übernachte im Hotel</label><br>
<input type="checkbox" id="hotel_booked" name="hotel_booked" value="Yes">
<label for="hotel_booked">Mein Hotel ist bereits gebucht</label><br><br>
<h3>Erinnerungen &amp; Extras</h3>
<input type="checkbox" id="memory_card" name="memory_card" value="Yes">
<label for="memory_card">Ich möchte eine Grußkarte zur Erinnerung erhalten</label><br>
<input type="checkbox" id="photo_link" name="photo_link" value="Yes">
<label for="photo_link">Ich möchte den Link zu den Hochzeitsfotos erhalten</label><br><br>
<h3>Unterhaltung</h3>
<label for="music_request">Musikwunsch:</label><br> <input type="text" id="music_request" name="music_request"><br><br>
<label>Ich möchte etwas beitragen:</label><br>
<input type="checkbox" id="speech" name="contribution[]" value="Speech">
<label for="speech">Rede</label><br>
<input type="checkbox" id="game" name="contribution[]" value="Game">
<label for="game">Spiel</label><br>
<input type="checkbox" id="surprise" name="contribution[]" value="Surprise">
<label for="surprise">Überraschung</label><br>
<input type="checkbox" id="other_contribution" name="contribution[]" value="Other">
<label for="other_contribution">Sonstiges</label><br><br>
<h3>Kinder</h3>
<input type="radio" id="children_yes" name="children" value="Yes">
<label for="children_yes">Ja</label>
<input type="radio" id="children_no" name="children" value="No" checked>
<label for="children_no">Nein</label><br><br>
<div id="children-details" style="display:none;">
```
<label for="children_count">Anzahl der Kinder:</label><br>
<input type="number" id="children_count" name="children_count" min="1"><br><br>
<label for="children_ages">Alter der Kinder:</label><br>
<input type="text"
id="children_ages"
name="children_ages"
placeholder="3, 7, 10"><br><br>
```
</div>
<h3>Nachricht an das Brautpaar</h3>
<textarea id="message"
name="message"
rows="5"
cols="50"></textarea><br><br>
<h3>Datenschutz</h3>
<input type="checkbox"
id="privacy"
name="privacy"
value="Yes"
required>
<label for="privacy">
Ich stimme zu, dass meine Angaben für die Hochzeitsplanung gespeichert und verarbeitet werden dürfen.
</label><br><br>
<input type="text" name="website" style="display:none">
<button type="submit">
Abschicken
</button>
</form>
</div>
<script>
document.querySelectorAll('input[name="children"]').forEach(el => {
el.addEventListener('change', function() {
document.getElementById('children-details').style.display =
this.value === 'Yes' ? 'block' : 'none';
});
});
</script>
<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 15: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.min.6ae284be93d2d19dad1f02b0039508d9aab3180a12a06dcc71b0b0ef7825a317.js" integrity="sha256-auKEvpPS0Z2tHwKwA5UI2aqzGAoSoG3McbCw73gloxc="></script>
</body>
</html>