markinstefan.xyz/layouts/_default/wedding.html

{{ 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 }}

  <!-- 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" }}: <a href="mailto:{{ . }}">{{ . }}</a></p>
    {{ end }}
    {{ with .Params.rsvp.form }}
      <p><a href="{{ . }}" target="_blank">{{ i18n "rsvp_form" }}</a></p>
    {{ end }}
  </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 }}