759 lines
17 KiB
HTML
Executable File
759 lines
17 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<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="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://markinstefan.xyz/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://markinstefan.xyz/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.min.f6b1b35a7b02521b25338f6cf58975f9980a6c12847763fe35a48307758cd1e7.css" integrity="sha256-9rGzWnsCUhslM49s9Yl1+ZgKbBKEd2P+NaSDB3WM0ec=" crossorigin="anonymous" media="screen" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="/css/coder-dark.min.ad48f476275974885bdc03d5251e3cdbe1678c54a63ff772376b0ed2adc468dd.css" integrity="sha256-rUj0didZdIhb3APVJR482+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/">
|
|
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>
|
|
|
|
.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 to our Wedding:</h3>
|
|
<p id="timer"></p>
|
|
</div>
|
|
|
|
|
|
<div class="hero">
|
|
<h1>Marriage of Stefan and Mariia</h1>
|
|
<div class="date">
|
|
August 31, 2026
|
|
</div>
|
|
<img src="/images/hochzeit-header.jpg" alt="Wedding Header Image">
|
|
</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 15:00
|
|
|
|
</p>
|
|
|
|
|
|
<p><strong>Reception:</strong> 15:30</p>
|
|
|
|
|
|
<p><strong>Official end:</strong> 21:30</p>
|
|
|
|
|
|
<p><strong>Location:</strong> Haslach (Traunstein), Germany</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="section map">
|
|
<h2>📍 Location</h2>
|
|
<iframe src="https://www.google.com/maps?q=M%C3%BChlgasse+1,+83278+Traunstein-Haslach&hl=en&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>Please respond by <strong>July 05</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">
|
|
|
|
|
|
<input type="hidden" name="lang" value="en">
|
|
|
|
|
|
|
|
<h3>Personal Information</h3>
|
|
|
|
<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 for="email">Email Address:</label><br> <input type="email" id="email" name="email" required><br><br>
|
|
|
|
<label for="phone">Phone Number:</label><br> <input type="tel" id="phone" name="phone" placeholder="+45 12 34 56 78"><br> <small>Used for the WhatsApp group and wedding updates</small><br><br>
|
|
|
|
|
|
|
|
<h3>Attendance</h3>
|
|
|
|
<input type="radio" id="attending_yes" name="attendance" value="Yes" required>
|
|
<label for="attending_yes">I will attend</label><br>
|
|
|
|
<input type="radio" id="attending_no" name="attendance" value="No">
|
|
<label for="attending_no">I cannot attend</label><br><br>
|
|
|
|
|
|
|
|
<h3>Drink preferences:</h3>
|
|
|
|
<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>
|
|
|
|
<input type="checkbox" id="water" name="drinks[]" value="Water">
|
|
<label for="water">Water</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>Dietary Preference</h3>
|
|
|
|
<input type="radio" id="diet_meat" name="diet" value="Meat" required>
|
|
<label for="diet_meat">Meat</label><br>
|
|
|
|
<input type="radio" id="diet_vegetarian" name="diet" value="Vegetarian">
|
|
<label for="diet_vegetarian">Vegetarian</label><br>
|
|
|
|
<input type="radio" id="diet_vegan" name="diet" value="Vegan">
|
|
<label for="diet_vegan">Vegan</label><br><br>
|
|
|
|
|
|
|
|
<h3>Allergic to</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">Lactose</label><br>
|
|
|
|
<input type="checkbox" id="nuts" name="allergies[]" value="Nuts">
|
|
<label for="nuts">Nuts</label><br>
|
|
|
|
<input type="checkbox" id="other_allergy" name="allergies[]" value="Other">
|
|
<label for="other_allergy">Other</label><br><br>
|
|
|
|
<label for="allergies_other">Additional allergy details:</label><br> <input type="text" id="allergies_other" name="allergies_other"><br><br>
|
|
|
|
|
|
|
|
<h3>Organization</h3>
|
|
|
|
<input type="checkbox" id="parking" name="parking" value="Yes">
|
|
<label for="parking">I need a parking space</label><br>
|
|
|
|
<input type="checkbox" id="ride_needed" name="ride_needed" value="Yes">
|
|
<label for="ride_needed">I need a ride</label><br>
|
|
|
|
<input type="checkbox" id="ride_offer" name="ride_offer" value="Yes">
|
|
<label for="ride_offer">I can offer a ride</label><br>
|
|
|
|
<input type="checkbox" id="hotel" name="hotel" value="Yes">
|
|
<label for="hotel">I will stay in a hotel</label><br>
|
|
|
|
<input type="checkbox" id="hotel_booked" name="hotel_booked" value="Yes">
|
|
<label for="hotel_booked">My hotel is already booked</label><br><br>
|
|
|
|
|
|
|
|
<h3>Memories & Extras</h3>
|
|
|
|
<input type="checkbox" id="memory_card" name="memory_card" value="Yes">
|
|
<label for="memory_card">I would like a keepsake greeting card</label><br>
|
|
|
|
<input type="checkbox" id="photo_link" name="photo_link" value="Yes">
|
|
<label for="photo_link">I would like to receive the wedding photo gallery link</label><br><br>
|
|
|
|
|
|
|
|
<h3>Entertainment</h3>
|
|
|
|
<label for="music_request">Song request:</label><br> <input type="text" id="music_request" name="music_request"><br><br>
|
|
|
|
<label>I would like to contribute:</label><br>
|
|
|
|
<input type="checkbox" id="speech" name="contribution[]" value="Speech">
|
|
<label for="speech">Speech</label><br>
|
|
|
|
<input type="checkbox" id="game" name="contribution[]" value="Game">
|
|
<label for="game">Game</label><br>
|
|
|
|
<input type="checkbox" id="surprise" name="contribution[]" value="Surprise">
|
|
<label for="surprise">Surprise</label><br>
|
|
|
|
<input type="checkbox" id="other_contribution" name="contribution[]" value="Other">
|
|
<label for="other_contribution">Other</label><br><br>
|
|
|
|
|
|
|
|
<h3>Children</h3>
|
|
|
|
<input type="radio" id="children_yes" name="children" value="Yes">
|
|
<label for="children_yes">Yes</label>
|
|
|
|
<input type="radio" id="children_no" name="children" value="No" checked>
|
|
<label for="children_no">No</label><br><br>
|
|
|
|
<div id="children-details" style="display:none;">
|
|
|
|
```
|
|
<label for="children_count">Number of children:</label><br>
|
|
<input type="number" id="children_count" name="children_count" min="1"><br><br>
|
|
|
|
<label for="children_ages">Age(s) of the children:</label><br>
|
|
<input type="text"
|
|
id="children_ages"
|
|
name="children_ages"
|
|
placeholder="3, 7, 10"><br><br>
|
|
```
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<h3>Message to the Bride & Groom</h3>
|
|
|
|
<textarea id="message"
|
|
name="message"
|
|
rows="5"
|
|
cols="50"></textarea><br><br>
|
|
|
|
|
|
|
|
<h3>Privacy</h3>
|
|
|
|
<input type="checkbox"
|
|
id="privacy"
|
|
name="privacy"
|
|
value="Yes"
|
|
required>
|
|
|
|
<label for="privacy">
|
|
I agree that my information may be stored and used for wedding planning.
|
|
</label><br><br>
|
|
|
|
|
|
|
|
<input type="text" name="website" style="display:none">
|
|
|
|
<button type="submit">
|
|
Send
|
|
</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>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 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 = "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.min.6ae284be93d2d19dad1f02b0039508d9aab3180a12a06dcc71b0b0ef7825a317.js" integrity="sha256-auKEvpPS0Z2tHwKwA5UI2aqzGAoSoG3McbCw73gloxc="></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|