debugging rsvp-submit.php

This commit is contained in:
spetznas committed 2026-06-17 19:33:31 +02:00
1 parent a34ca06a93
commit 589b1153a9
14 files changed
+92 -1328

No files matched your search

-1
View File
@@ -1,6 +1,5 @@
+++
title = "Danke Dir!"
slug = ""
layout = "wedding"
+++
Vielen Dank für das Absenden des Formulars!
-1
View File
@@ -1,6 +1,5 @@
+++
title = "Thank You!"
slug = ""
layout = "wedding"
+++
Thank you for submitting the form!
Regular → Executable
-1
View File
@@ -1,6 +1,5 @@
+++
title = "Спасибо тебе!"
slug = ""
layout = "wedding"
+++
Спасибо за отправку формы!
@@ -0,0 +1,6 @@
+++
title = "Danke Dir!"
slug = ""
layout = "wedding"
+++
Vielen Dank für das Absenden des Formulars!
+2 -2
View File
@@ -136,14 +136,14 @@
<li class="navigation-item">
<a href="/ru/404.html">🇷🇺</a>
<a href="/de/404.html">🇩🇪</a>
</li>
<li class="navigation-item">
<a href="/de/404.html">🇩🇪</a>
<a href="/ru/404.html">🇷🇺</a>
</li>
+2 -2
View File
@@ -136,14 +136,14 @@
<li class="navigation-item">
<a href="/404.html">🇬🇧</a>
<a href="/ru/404.html">🇷🇺</a>
</li>
<li class="navigation-item">
<a href="/ru/404.html">🇷🇺</a>
<a href="/404.html">🇬🇧</a>
</li>
+15 -15
View File
@@ -3,6 +3,11 @@
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>http://markinstefan.xyz/de/authors/</loc>
<xhtml:link
rel="alternate"
hreflang="de"
href="http://markinstefan.xyz/de/authors/"
/>
<xhtml:link
rel="alternate"
hreflang="en"
@@ -13,18 +18,8 @@
hreflang="ru"
href="http://markinstefan.xyz/ru/authors/"
/>
<xhtml:link
rel="alternate"
hreflang="de"
href="http://markinstefan.xyz/de/authors/"
/>
</url><url>
<loc>http://markinstefan.xyz/de/categories/</loc>
<xhtml:link
rel="alternate"
hreflang="de"
href="http://markinstefan.xyz/de/categories/"
/>
<xhtml:link
rel="alternate"
hreflang="en"
@@ -35,6 +30,11 @@
hreflang="ru"
href="http://markinstefan.xyz/ru/categories/"
/>
<xhtml:link
rel="alternate"
hreflang="de"
href="http://markinstefan.xyz/de/categories/"
/>
</url><url>
<loc>http://markinstefan.xyz/de/thank-you/</loc>
<xhtml:link
@@ -122,6 +122,11 @@
/>
</url><url>
<loc>http://markinstefan.xyz/de/tags/</loc>
<xhtml:link
rel="alternate"
hreflang="de"
href="http://markinstefan.xyz/de/tags/"
/>
<xhtml:link
rel="alternate"
hreflang="en"
@@ -132,11 +137,6 @@
hreflang="ru"
href="http://markinstefan.xyz/ru/tags/"
/>
<xhtml:link
rel="alternate"
hreflang="de"
href="http://markinstefan.xyz/de/tags/"
/>
</url><url>
<loc>http://markinstefan.xyz/de/about/</loc>
<xhtml:link
Regular → Executable
+15 -428
View File
@@ -2,7 +2,9 @@
<html lang="de">
<head>
<title>Markin Stefan</title>
<title>
Danke Dir! · 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">
@@ -156,437 +158,22 @@
<div class="content">
<section class="container page">
<article>
<header>
<h1 class="title">
<a class="title-link" href="http://markinstefan.xyz/de/thank-you/">
Danke Dir!
</a>
</h1>
</header>
<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>
<p>Vielen Dank für das Absenden des Formulars!</p>
</article>
</section>
<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>Danke Dir!</h1>
<div class="date">
1. Januar 1
</div>
</div>
<div class="section">
<p>Vielen Dank für das Absenden des Formulars!</p>
</div>
<div class="section">
<h2>📅 Veranstaltung</h2>
</div>
<h2>📝 RSVP</h2>
<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>
<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(" ").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>
+9 -9
View File
@@ -56,13 +56,13 @@
<loc>http://markinstefan.xyz/</loc>
<xhtml:link
rel="alternate"
hreflang="en"
href="http://markinstefan.xyz/"
hreflang="de"
href="http://markinstefan.xyz/de/"
/>
<xhtml:link
rel="alternate"
hreflang="de"
href="http://markinstefan.xyz/de/"
hreflang="en"
href="http://markinstefan.xyz/"
/>
<xhtml:link
rel="alternate"
@@ -122,11 +122,6 @@
/>
</url><url>
<loc>http://markinstefan.xyz/series/</loc>
<xhtml:link
rel="alternate"
hreflang="de"
href="http://markinstefan.xyz/de/series/"
/>
<xhtml:link
rel="alternate"
hreflang="en"
@@ -137,6 +132,11 @@
hreflang="ru"
href="http://markinstefan.xyz/ru/series/"
/>
<xhtml:link
rel="alternate"
hreflang="de"
href="http://markinstefan.xyz/de/series/"
/>
</url><url>
<loc>http://markinstefan.xyz/tags/</loc>
<xhtml:link
+2 -2
View File
@@ -138,14 +138,14 @@
<li class="navigation-item">
<a href="/">🇬🇧</a>
<a href="/de/">🇩🇪</a>
</li>
<li class="navigation-item">
<a href="/de/">🇩🇪</a>
<a href="/">🇬🇧</a>
</li>
+9 -9
View File
@@ -3,11 +3,6 @@
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>http://markinstefan.xyz/ru/authors/</loc>
<xhtml:link
rel="alternate"
hreflang="ru"
href="http://markinstefan.xyz/ru/authors/"
/>
<xhtml:link
rel="alternate"
hreflang="de"
@@ -18,6 +13,11 @@
hreflang="en"
href="http://markinstefan.xyz/authors/"
/>
<xhtml:link
rel="alternate"
hreflang="ru"
href="http://markinstefan.xyz/ru/authors/"
/>
</url><url>
<loc>http://markinstefan.xyz/ru/categories/</loc>
<xhtml:link
@@ -90,13 +90,13 @@
<loc>http://markinstefan.xyz/ru/</loc>
<xhtml:link
rel="alternate"
hreflang="en"
href="http://markinstefan.xyz/"
hreflang="de"
href="http://markinstefan.xyz/de/"
/>
<xhtml:link
rel="alternate"
hreflang="de"
href="http://markinstefan.xyz/de/"
hreflang="en"
href="http://markinstefan.xyz/"
/>
<xhtml:link
rel="alternate"
Regular → Executable
+15 -428
View File
@@ -2,7 +2,9 @@
<html lang="ru">
<head>
<title>Маркин Степан</title>
<title>
Спасибо тебе! · Маркин Степан
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
@@ -156,437 +158,22 @@
<div class="content">
<section class="container page">
<article>
<header>
<h1 class="title">
<a class="title-link" href="http://markinstefan.xyz/ru/thank-you/">
Спасибо тебе!
</a>
</h1>
</header>
<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>
<p>Спасибо за отправку формы!</p>
</article>
</section>
<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">
1 января 1 г.
</div>
</div>
<div class="section">
<p>Спасибо за отправку формы!</p>
</div>
<div class="section">
<h2>📅 Мероприятие</h2>
</div>
<h2>📝 RSVP</h2>
<form action="/rsvp-submit.php" method="POST">
<input type="hidden" name="lang" value="ru">
<h3>Личная информация</h3>
<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 for="email">Адрес электронной почты:</label><br> <input type="email" id="email" name="email" required><br><br>
<label for="phone">Номер телефона:</label><br> <input type="tel" id="phone" name="phone" placeholder="+45 12 34 56 78"><br> <small>Используется для группы WhatsApp и свадебных уведомлений</small><br><br>
<h3>Участие</h3>
<input type="radio" id="attending_yes" name="attendance" value="Yes" required>
<label for="attending_yes">Я буду присутствовать</label><br>
<input type="radio" id="attending_no" name="attendance" value="No">
<label for="attending_no">К сожалению, я не смогу присутствовать</label><br><br>
<h3>Предпочтения по напиткам:</h3>
<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>
<input type="checkbox" id="water" name="drinks[]" value="Water">
<label for="water">Вода</label><br>
<input type="checkbox" id="cola" name="drinks[]" value="Cola">
<label for="cola">Coca-Cola</label><br>
<input type="checkbox" id="fanta" name="drinks[]" value="Fanta">
<label for="fanta">Fanta</label><br><br>
<h3>Предпочтения в питании</h3>
<input type="radio" id="diet_meat" name="diet" value="Meat" required>
<label for="diet_meat">Мясо</label><br>
<input type="radio" id="diet_vegetarian" name="diet" value="Vegetarian">
<label for="diet_vegetarian">Вегетарианское</label><br>
<input type="radio" id="diet_vegan" name="diet" value="Vegan">
<label for="diet_vegan">Веганское</label><br><br>
<h3>Аллергия на</h3>
<input type="checkbox" id="gluten" name="allergies[]" value="Gluten">
<label for="gluten">Глютен</label><br>
<input type="checkbox" id="lactose" name="allergies[]" value="Lactose">
<label for="lactose">Лактоза</label><br>
<input type="checkbox" id="nuts" name="allergies[]" value="Nuts">
<label for="nuts">Орехи</label><br>
<input type="checkbox" id="other_allergy" name="allergies[]" value="Other">
<label for="other_allergy">Другое</label><br><br>
<label for="allergies_other">Дополнительная информация об аллергиях:</label><br> <input type="text" id="allergies_other" name="allergies_other"><br><br>
<h3>Организация</h3>
<input type="checkbox" id="parking" name="parking" value="Yes">
<label for="parking">Мне требуется парковочное место</label><br>
<input type="checkbox" id="ride_needed" name="ride_needed" value="Yes">
<label for="ride_needed">Мне нужна помощь с поездкой</label><br>
<input type="checkbox" id="ride_offer" name="ride_offer" value="Yes">
<label for="ride_offer">Я могу предложить место в машине</label><br>
<input type="checkbox" id="hotel" name="hotel" value="Yes">
<label for="hotel">Я остановлюсь в отеле</label><br>
<input type="checkbox" id="hotel_booked" name="hotel_booked" value="Yes">
<label for="hotel_booked">Отель уже забронирован</label><br><br>
<h3>Памятные материалы и дополнения</h3>
<input type="checkbox" id="memory_card" name="memory_card" value="Yes">
<label for="memory_card">Я хотел(а) бы получить памятную открытку</label><br>
<input type="checkbox" id="photo_link" name="photo_link" value="Yes">
<label for="photo_link">Я хотел(а) бы получить ссылку на свадебные фотографии</label><br><br>
<h3>Развлечения</h3>
<label for="music_request">Музыкальное пожелание:</label><br> <input type="text" id="music_request" name="music_request"><br><br>
<label>Я хотел(а) бы внести свой вклад:</label><br>
<input type="checkbox" id="speech" name="contribution[]" value="Speech">
<label for="speech">Речь</label><br>
<input type="checkbox" id="game" name="contribution[]" value="Game">
<label for="game">Игра</label><br>
<input type="checkbox" id="surprise" name="contribution[]" value="Surprise">
<label for="surprise">Сюрприз</label><br>
<input type="checkbox" id="other_contribution" name="contribution[]" value="Other">
<label for="other_contribution">Другое</label><br><br>
<h3>Дети</h3>
<input type="radio" id="children_yes" name="children" value="Yes">
<label for="children_yes">Да</label>
<input type="radio" id="children_no" name="children" value="No" checked>
<label for="children_no">Нет</label><br><br>
<div id="children-details" style="display:none;">
```
<label for="children_count">Количество детей:</label><br>
<input type="number" id="children_count" name="children_count" min="1"><br><br>
<label for="children_ages">Возраст детей:</label><br>
<input type="text"
id="children_ages"
name="children_ages"
placeholder="3, 7, 10"><br><br>
```
</div>
<h3>Сообщение молодожёнам</h3>
<textarea id="message"
name="message"
rows="5"
cols="50"></textarea><br><br>
<h3>Конфиденциальность</h3>
<input type="checkbox"
id="privacy"
name="privacy"
value="Yes"
required>
<label for="privacy">
Я согласен(согласна) на хранение и обработку моих данных для организации свадьбы.
</label><br><br>
<input type="text" name="website" style="display:none">
<button type="submit">
Отправить
</button>
</form>
<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>❤️ Мы с нетерпением ждем встречи с вами ❤️</p>
</div>
</div>
<script>
var labels = {
day: "Д.",
hour: "ч.",
minute: "м.",
second: "c."
};
var countDownDate = new Date(" ").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>
+2 -2
View File
@@ -137,14 +137,14 @@
<li class="navigation-item">
<a href="/de/series/">🇩🇪</a>
<a href="/ru/series/">🇷🇺</a>
</li>
<li class="navigation-item">
<a href="/ru/series/">🇷🇺</a>
<a href="/de/series/">🇩🇪</a>
</li>
Regular → Executable
+15 -428
View File
@@ -2,7 +2,9 @@
<html lang="en">
<head>
<title>Markin Stefan</title>
<title>
Thank You! · 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">
@@ -156,437 +158,22 @@
<div class="content">
<section class="container page">
<article>
<header>
<h1 class="title">
<a class="title-link" href="http://markinstefan.xyz/thank-you/">
Thank You!
</a>
</h1>
</header>
<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>
<p>Thank you for submitting the form!</p>
</article>
</section>
<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>Thank You!</h1>
<div class="date">
January 1, 1
</div>
</div>
<div class="section">
<p>Thank you for submitting the form!</p>
</div>
<div class="section">
<h2>📅 Event</h2>
</div>
<h2>📝 RSVP</h2>
<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 &amp; 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 &amp; 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>
<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(" ").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>