450 lines
12 KiB
HTML
Executable File
450 lines
12 KiB
HTML
Executable File
{{ define "content" }}
|
||
|
||
<style>
|
||
/* RSVP form responsive */
|
||
.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;
|
||
}
|
||
|
||
/* Prevent horizontal overflow */
|
||
html,
|
||
body {
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
body {
|
||
background-color: #fff; /* light bg */
|
||
color: #222; /* dark text */
|
||
/* NEW: background image */
|
||
background-image: url('/images/hochzeit-bg.jpg'); /* path to your image */
|
||
background-size: cover; /* cover whole container */
|
||
background-position: center; /* center the image */
|
||
background-repeat: repeat; /* don't tile */
|
||
border-radius: 8px; /* optional: match your hero border-radius */
|
||
}
|
||
|
||
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); /* subtle white overlay */
|
||
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">
|
||
{{ partial "audio.html" . }}
|
||
|
||
<!-- Countdown Timer -->
|
||
<div class="countdown">
|
||
<h3>{{ i18n "countdown_title" }}</h3>
|
||
<p id="timer"></p>
|
||
</div>
|
||
|
||
<!-- Hero -->
|
||
<div class="hero">
|
||
<h1>{{ .Title }}</h1>
|
||
<div class="date">
|
||
{{ .Params.event.date | time | time.Format ":date_long" }}
|
||
</div>
|
||
<img src="/images/hochzeit-header.jpg" alt="Wedding Header Image">
|
||
</div>
|
||
|
||
<!-- Intro -->
|
||
{{ if .Content }}
|
||
<div class="section">
|
||
{{ .Content }}
|
||
</div>
|
||
{{ end }}
|
||
|
||
<!-- Event Details -->
|
||
<div class="section">
|
||
<h2>📅 {{ i18n "event_title" }}</h2>
|
||
{{ with .Params.event.date }}
|
||
<p>
|
||
<strong>{{ i18n "ceremony" }}:</strong>
|
||
{{ . | time | time.Format ":date_long" }}{{ with $.Params.event.ceremony_time }}, {{ i18n "ceremony_time" }} {{ . }}
|
||
{{ end }}
|
||
</p>
|
||
{{ end }}
|
||
{{ with .Params.event.reception_time }}
|
||
<p><strong>{{ i18n "reception" }}:</strong> {{ . }}</p>
|
||
{{ end }}
|
||
{{ with .Params.event.end_time }}
|
||
<p><strong>{{ i18n "end" }}:</strong> {{ . }}</p>
|
||
{{ end }}
|
||
{{ with .Params.event.venue }}
|
||
<p><strong>{{ i18n "location" }}:</strong> {{ . }}</p>
|
||
{{ end }}
|
||
</div>
|
||
|
||
<!-- Map -->
|
||
{{ with .Params.event.map_embed }}
|
||
<div class="section map">
|
||
<h2>📍 {{ i18n "location" }}</h2>
|
||
{{ . | safeHTML }}
|
||
</div>
|
||
{{ end }}
|
||
|
||
<div class="rsvp">
|
||
<h2>📝 {{ i18n "rsvp_title" }}</h2>
|
||
{{ with .Params.rsvp.deadline }}
|
||
<p>{{ i18n "rsvp_deadline" }} <strong>{{ . }}</strong>.</p>
|
||
{{ end }}
|
||
{{ with .Params.rsvp.email }}
|
||
<p>{{ i18n "rsvp_email" }}: {{ partial "obfuscate_email.html" . }}</p>
|
||
{{ end }}
|
||
|
||
<form action="/rsvp-submit.php" method="POST">
|
||
|
||
<!-- Current Hugo language -->
|
||
<input type="hidden" name="lang" value="{{ .Site.Language.Lang }}">
|
||
|
||
<!-- Personal Information -->
|
||
|
||
<h3>{{ i18n "rsvp_personal_information" }}</h3>
|
||
|
||
<label for="first_name">{{ i18n "rsvp_firstname" }}:</label><br> <input type="text" id="first_name" name="first_name" required><br><br>
|
||
|
||
<label for="last_name">{{ i18n "rsvp_lastname" }}:</label><br> <input type="text" id="last_name" name="last_name" required><br><br>
|
||
|
||
<label for="email">{{ i18n "rsvp_email_address" }}:</label><br> <input type="email" id="email" name="email" required><br><br>
|
||
|
||
<label for="phone">{{ i18n "rsvp_phone" }}:</label><br> <input type="tel" id="phone" name="phone" placeholder="+45 12 34 56 78"><br> <small>{{ i18n "rsvp_phone_whatsapp_hint" }}</small><br><br>
|
||
|
||
<!-- Attendance -->
|
||
|
||
<h3>{{ i18n "rsvp_attendance" }}</h3>
|
||
|
||
<input type="radio" id="attending_yes" name="attendance" value="Yes" required>
|
||
<label for="attending_yes">{{ i18n "rsvp_attending_yes" }}</label><br>
|
||
|
||
<input type="radio" id="attending_no" name="attendance" value="No">
|
||
<label for="attending_no">{{ i18n "rsvp_attending_no" }}</label><br><br>
|
||
|
||
<!-- Drinks -->
|
||
|
||
<h3>{{ i18n "rsvp_drinks" }}</h3>
|
||
|
||
<input type="checkbox" id="wine" name="drinks[]" value="Wine">
|
||
<label for="wine">{{ i18n "rsvp_drinks_wine" }}</label><br>
|
||
|
||
<input type="checkbox" id="beer" name="drinks[]" value="Beer">
|
||
<label for="beer">{{ i18n "rsvp_drinks_beer" }}</label><br>
|
||
|
||
<input type="checkbox" id="juice" name="drinks[]" value="Juice">
|
||
<label for="juice">{{ i18n "rsvp_drinks_juice" }}</label><br>
|
||
|
||
<input type="checkbox" id="water" name="drinks[]" value="Water">
|
||
<label for="water">{{ i18n "rsvp_drinks_water" }}</label><br>
|
||
|
||
<input type="checkbox" id="cola" name="drinks[]" value="Cola">
|
||
<label for="cola">{{ i18n "rsvp_drinks_cola" }}</label><br>
|
||
|
||
<input type="checkbox" id="fanta" name="drinks[]" value="Fanta">
|
||
<label for="fanta">{{ i18n "rsvp_drinks_fanta" }}</label><br><br>
|
||
|
||
<!-- Diet -->
|
||
|
||
<h3>{{ i18n "rsvp_diet" }}</h3>
|
||
|
||
<input type="radio" id="diet_meat" name="diet" value="Meat" required>
|
||
<label for="diet_meat">{{ i18n "rsvp_diet_meat" }}</label><br>
|
||
|
||
<input type="radio" id="diet_vegetarian" name="diet" value="Vegetarian">
|
||
<label for="diet_vegetarian">{{ i18n "rsvp_diet_vegetarian" }}</label><br>
|
||
|
||
<input type="radio" id="diet_vegan" name="diet" value="Vegan">
|
||
<label for="diet_vegan">{{ i18n "rsvp_diet_vegan" }}</label><br><br>
|
||
|
||
<!-- Allergies -->
|
||
|
||
<h3>{{ i18n "rsvp_allergies" }}</h3>
|
||
|
||
<input type="checkbox" id="gluten" name="allergies[]" value="Gluten">
|
||
<label for="gluten">{{ i18n "rsvp_allergy_gluten" }}</label><br>
|
||
|
||
<input type="checkbox" id="lactose" name="allergies[]" value="Lactose">
|
||
<label for="lactose">{{ i18n "rsvp_allergy_lactose" }}</label><br>
|
||
|
||
<input type="checkbox" id="nuts" name="allergies[]" value="Nuts">
|
||
<label for="nuts">{{ i18n "rsvp_allergy_nuts" }}</label><br>
|
||
|
||
<input type="checkbox" id="other_allergy" name="allergies[]" value="Other">
|
||
<label for="other_allergy">{{ i18n "rsvp_allergy_other" }}</label><br><br>
|
||
|
||
<label for="allergies_other">{{ i18n "rsvp_allergy_details" }}:</label><br> <input type="text" id="allergies_other" name="allergies_other"><br><br>
|
||
|
||
<!-- Organization -->
|
||
|
||
<h3>{{ i18n "rsvp_organization" }}</h3>
|
||
|
||
<input type="checkbox" id="parking" name="parking" value="Yes">
|
||
<label for="parking">{{ i18n "rsvp_parking_needed" }}</label><br>
|
||
|
||
<input type="checkbox" id="ride_needed" name="ride_needed" value="Yes">
|
||
<label for="ride_needed">{{ i18n "rsvp_ride_needed" }}</label><br>
|
||
|
||
<input type="checkbox" id="ride_offer" name="ride_offer" value="Yes">
|
||
<label for="ride_offer">{{ i18n "rsvp_ride_offer" }}</label><br>
|
||
|
||
<input type="checkbox" id="hotel" name="hotel" value="Yes">
|
||
<label for="hotel">{{ i18n "rsvp_hotel" }}</label><br>
|
||
|
||
<input type="checkbox" id="hotel_booked" name="hotel_booked" value="Yes">
|
||
<label for="hotel_booked">{{ i18n "rsvp_hotel_booked" }}</label><br><br>
|
||
|
||
<!-- Memories -->
|
||
|
||
<h3>{{ i18n "rsvp_memories" }}</h3>
|
||
|
||
<input type="checkbox" id="memory_card" name="memory_card" value="Yes">
|
||
<label for="memory_card">{{ i18n "rsvp_memory_card" }}</label><br>
|
||
|
||
<input type="checkbox" id="photo_link" name="photo_link" value="Yes">
|
||
<label for="photo_link">{{ i18n "rsvp_photo_link" }}</label><br><br>
|
||
|
||
<!-- Entertainment -->
|
||
|
||
<h3>{{ i18n "rsvp_entertainment" }}</h3>
|
||
|
||
<label for="music_request">{{ i18n "rsvp_music_request" }}:</label><br> <input type="text" id="music_request" name="music_request"><br><br>
|
||
|
||
<label>{{ i18n "rsvp_contribution" }}:</label><br>
|
||
|
||
<input type="checkbox" id="speech" name="contribution[]" value="Speech">
|
||
<label for="speech">{{ i18n "rsvp_contribution_speech" }}</label><br>
|
||
|
||
<input type="checkbox" id="game" name="contribution[]" value="Game">
|
||
<label for="game">{{ i18n "rsvp_contribution_game" }}</label><br>
|
||
|
||
<input type="checkbox" id="surprise" name="contribution[]" value="Surprise">
|
||
<label for="surprise">{{ i18n "rsvp_contribution_surprise" }}</label><br>
|
||
|
||
<input type="checkbox" id="other_contribution" name="contribution[]" value="Other">
|
||
<label for="other_contribution">{{ i18n "rsvp_contribution_other" }}</label><br><br>
|
||
|
||
<!-- Children -->
|
||
|
||
<h3>{{ i18n "rsvp_children" }}</h3>
|
||
|
||
<input type="radio" id="children_yes" name="children" value="Yes">
|
||
<label for="children_yes">{{ i18n "yes" }}</label>
|
||
|
||
<input type="radio" id="children_no" name="children" value="No" checked>
|
||
<label for="children_no">{{ i18n "no" }}</label><br><br>
|
||
|
||
<div id="children-details" style="display:none;">
|
||
|
||
```
|
||
<label for="children_count">{{ i18n "rsvp_children_count" }}:</label><br>
|
||
<input type="number" id="children_count" name="children_count" min="1"><br><br>
|
||
|
||
<label for="children_ages">{{ i18n "rsvp_children_ages" }}:</label><br>
|
||
<input type="text"
|
||
id="children_ages"
|
||
name="children_ages"
|
||
placeholder="3, 7, 10"><br><br>
|
||
```
|
||
|
||
</div>
|
||
|
||
<!-- Message -->
|
||
|
||
<h3>{{ i18n "rsvp_message" }}</h3>
|
||
|
||
<textarea id="message"
|
||
name="message"
|
||
rows="5"
|
||
cols="50"></textarea><br><br>
|
||
|
||
<!-- Privacy -->
|
||
|
||
<h3>{{ i18n "rsvp_privacy" }}</h3>
|
||
|
||
<input type="checkbox"
|
||
id="privacy"
|
||
name="privacy"
|
||
value="Yes"
|
||
required>
|
||
|
||
<label for="privacy">
|
||
{{ i18n "rsvp_privacy_accept" }}
|
||
</label><br><br>
|
||
|
||
<!-- Honeypot -->
|
||
|
||
<input type="text" name="website" style="display:none">
|
||
|
||
<button type="submit">
|
||
{{ i18n "rsvp_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>
|
||
|
||
<!-- Extra Info -->
|
||
{{ with .Params.details }}
|
||
<div class="section">
|
||
<h2>ℹ️ {{ i18n "details_title" }}</h2>
|
||
<p>{{ . }}</p>
|
||
</div>
|
||
{{ end }}
|
||
|
||
<!-- Footer -->
|
||
<div class="footer">
|
||
<p>{{ i18n "footer_message" }}</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
var labels = {
|
||
day: "{{ i18n "day" }}",
|
||
hour: "{{ i18n "hour" }}",
|
||
minute: "{{ i18n "minute" }}",
|
||
second: "{{ i18n "second" }}"
|
||
};
|
||
|
||
var countDownDate = new Date("{{ .Params.event.date }} {{ .Params.event.ceremony_time }}").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 = "{{ i18n "big_day" }}";
|
||
}
|
||
}, 1000);
|
||
</script>
|
||
{{ end }}
|