Added new RSVP-Form with translations
This commit is contained in:
spetznas committed
1 parent
6101a72fd5
commit
060b3723a8
87 files changed
+3247
-1219
No files matched your search
@@ -0,0 +1,237 @@
|
||||
{{ define "content" }}
|
||||
|
||||
<style>
|
||||
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 */
|
||||
}
|
||||
.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); /* subtle white overlay */
|
||||
padding: 1rem;
|
||||
height: 400px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.rsvp {
|
||||
background-color: rgba(255, 255, 255, 0.8); /* subtle white overlay */
|
||||
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">
|
||||
{{ partial "audio.html" . }}
|
||||
|
||||
<!-- Countdown Timer -->
|
||||
<div class="countdown">
|
||||
<h3>{{ i18n "countdown_title" }}</h3>
|
||||
<p id="timer"></p>
|
||||
</div>
|
||||
|
||||
<!-- Hero -->
|
||||
<div class="hero">
|
||||
<img src="/images/hochzeit-header.jpg" alt="Wedding Header Image">
|
||||
<h1>{{ .Title }}</h1>
|
||||
<div class="date">
|
||||
{{ .Params.event.date | time | time.Format ":date_long" }}
|
||||
</div>
|
||||
</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.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 }}
|
||||
|
||||
<!-- <!-1- RSVP -1-> -->
|
||||
<!-- <div class="section rsvp"> -->
|
||||
<!-- <h2>📝 {{ i18n "rsvp_title" }}</h2> -->
|
||||
<!-- {{ with .Params.rsvp.deadline }} -->
|
||||
<!-- <p>{{ i18n "rsvp_deadline" }} <strong>{{ . }}</strong>.</p> -->
|
||||
<!-- {{ end }} -->
|
||||
<!-- {{ with .Params.rsvp.form }} -->
|
||||
<!-- <p><a href="{{ . }}" target="_blank">{{ i18n "rsvp_form" }}</a></p> -->
|
||||
<!-- {{ end }} -->
|
||||
<!-- </div> -->
|
||||
<!-- RSVP -->
|
||||
<div class="section 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 }}
|
||||
|
||||
<!-- RSVP Form -->
|
||||
<form action="/rsvp-submit.php" method="POST">
|
||||
|
||||
<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>{{ i18n "rsvp_drinks" }}:</label><br>
|
||||
|
||||
<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><br>
|
||||
|
||||
<label for="allergies">{{ i18n "rsvp_allergies" }}:</label><br>
|
||||
<input type="text" id="allergies" name="allergies"><br><br>
|
||||
|
||||
<!-- optional but recommended: helps prevent spam bots -->
|
||||
<input type="text" name="website" style="display:none">
|
||||
|
||||
<button type="submit">{{ i18n "rsvp_send" }}</button>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<!-- 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 }}
|
||||
Reference in new issue
Block a user