290 lines
12 KiB
HTML
290 lines
12 KiB
HTML
{% extends 'base.html' %}
|
|
{% block content %}
|
|
<section class="card">
|
|
<h1>
|
|
{% if page == 'schedule' %}{{ t('schedule') }}{% endif %}
|
|
{% if page == 'hotels' %}{{ t('hotels') }}{% endif %}
|
|
{% if page == 'taxi' %}{{ t('taxi') }}{% endif %}
|
|
{% if page == 'location' %}{{ t('location') }}{% endif %}
|
|
{% if page == 'gifts' %}{{ t('gifts') }}{% endif %}
|
|
</h1>
|
|
|
|
{% if page == 'schedule' %}
|
|
<p>{{ t('schedule_intro') }}</p>
|
|
<div class="schedule-timeline">
|
|
<article class="schedule-item" style="--schedule-card-image: url('{{ url_for('static', filename='assets/ankunft.png') }}'); --schedule-card-position: center 18%;">
|
|
<p class="schedule-time">15:00</p>
|
|
<h2>{{ t('schedule_arrival_title') }}</h2>
|
|
<p>{{ t('schedule_arrival_text') }}</p>
|
|
</article>
|
|
<article class="schedule-item" style="--schedule-card-image: url('{{ url_for('static', filename='assets/trauzermonie.png') }}'); --schedule-card-position: center 25%;">
|
|
<p class="schedule-time">15:30</p>
|
|
<h2>{{ t('schedule_ceremony_title') }}</h2>
|
|
<p>{{ t('schedule_ceremony_text') }}</p>
|
|
</article>
|
|
<article class="schedule-item" style="--schedule-card-image: url('{{ url_for('static', filename='assets/sektempfang.png') }}'); --schedule-card-position: center 32%;">
|
|
<p class="schedule-time">16:00</p>
|
|
<h2>{{ t('schedule_reception_title') }}</h2>
|
|
<p>{{ t('schedule_reception_text') }}</p>
|
|
</article>
|
|
<article class="schedule-item" style="--schedule-card-image: url('{{ url_for('static', filename='assets/buffet.png') }}'); --schedule-card-position: center 40%;">
|
|
<p class="schedule-time">18:00</p>
|
|
<h2>{{ t('schedule_buffet_title') }}</h2>
|
|
<p>{{ t('schedule_buffet_text') }}</p>
|
|
</article>
|
|
<article class="schedule-item" style="--schedule-card-image: url('{{ url_for('static', filename='assets/kuchen.png') }}'); --schedule-card-position: center 48%;">
|
|
<p class="schedule-time">22:00</p>
|
|
<h2>{{ t('schedule_cake_title') }}</h2>
|
|
<p>{{ t('schedule_cake_text') }}</p>
|
|
</article>
|
|
<article class="schedule-item" style="--schedule-card-image: url('{{ url_for('static', filename='assets/party.png') }}'); --schedule-card-position: center 56%;">
|
|
<p class="schedule-time">{{ t('schedule_afterwards_time') }}</p>
|
|
<h2>{{ t('schedule_party_title') }}</h2>
|
|
<p>{{ t('schedule_party_text') }}</p>
|
|
</article>
|
|
</div>
|
|
{% elif page == 'hotels' %}
|
|
<p>{{ t('hotels_intro') }}</p>
|
|
<div class="hotel-list">
|
|
{% for hotel in hotels %}
|
|
<article class="hotel-card">
|
|
<h2>{{ hotel.name }}</h2>
|
|
<p class="hotel-address">{{ hotel.address }}</p>
|
|
<p>{{ hotel.description }}</p>
|
|
<div class="hotel-badges">
|
|
<span>{{ hotel.drive_badge }}</span>
|
|
<span>{{ hotel.walk_badge }}</span>
|
|
</div>
|
|
<div class="hotel-actions">
|
|
<a class="btn" href="{{ hotel.website_url }}" target="_blank" rel="noopener">{{ t('hotel_visit_website') }}</a>
|
|
<a
|
|
class="btn btn-ghost"
|
|
href="{{ hotel.drive_route_url }}"
|
|
target="_blank"
|
|
rel="noopener"
|
|
data-route-popup
|
|
data-route-src="{{ hotel.drive_route_embed_url }}"
|
|
>{{ t('hotel_route_drive') }}</a>
|
|
<a
|
|
class="btn btn-ghost"
|
|
href="{{ hotel.walk_route_url }}"
|
|
target="_blank"
|
|
rel="noopener"
|
|
data-route-popup
|
|
data-route-src="{{ hotel.walk_route_embed_url }}"
|
|
>{{ t('hotel_route_walk') }}</a>
|
|
</div>
|
|
</article>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="route-modal" data-route-modal hidden>
|
|
<div class="route-modal-backdrop" data-route-close></div>
|
|
<section class="route-modal-panel" role="dialog" aria-modal="true" aria-label="{{ t('hotel_route_modal_title') }}">
|
|
<header class="route-modal-head">
|
|
<h2>{{ t('hotel_route_modal_title') }}</h2>
|
|
<button class="btn btn-ghost route-modal-close" type="button" data-route-close>{{ t('hotel_route_modal_close') }}</button>
|
|
</header>
|
|
<div class="route-modal-body">
|
|
<iframe title="{{ t('hotel_route_modal_title') }}" loading="lazy" referrerpolicy="no-referrer-when-downgrade" allowfullscreen data-route-frame></iframe>
|
|
<div class="route-map-actions">
|
|
<a class="btn route-open-btn" href="#" target="_blank" rel="noopener" data-route-open-external>{{ t('hotel_route_open_maps') }}</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<script>
|
|
(() => {
|
|
const modal = document.querySelector("[data-route-modal]");
|
|
if (!modal) return;
|
|
const frame = modal.querySelector("[data-route-frame]");
|
|
const externalLink = modal.querySelector("[data-route-open-external]");
|
|
const closeNodes = modal.querySelectorAll("[data-route-close]");
|
|
const triggerNodes = document.querySelectorAll("[data-route-popup][data-route-src]");
|
|
if (!frame || !externalLink || triggerNodes.length === 0) return;
|
|
|
|
const closeModal = () => {
|
|
modal.hidden = true;
|
|
document.body.classList.remove("has-route-modal");
|
|
frame.src = "";
|
|
};
|
|
|
|
triggerNodes.forEach((node) => {
|
|
node.addEventListener("click", (event) => {
|
|
event.preventDefault();
|
|
const src = node.getAttribute("data-route-src");
|
|
const href = node.getAttribute("href");
|
|
if (!src) return;
|
|
frame.src = src;
|
|
externalLink.href = href || "#";
|
|
modal.hidden = false;
|
|
document.body.classList.add("has-route-modal");
|
|
});
|
|
});
|
|
|
|
closeNodes.forEach((node) => {
|
|
node.addEventListener("click", closeModal);
|
|
});
|
|
|
|
document.addEventListener("keydown", (event) => {
|
|
if (event.key === "Escape" && !modal.hidden) {
|
|
closeModal();
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
{% elif page == 'taxi' %}
|
|
<div class="taxi-coming-soon{% if lang == 'en' %} taxi-coming-soon--en{% else %} taxi-coming-soon--de{% endif %}">
|
|
<img
|
|
src="{{ url_for('static', filename='assets/bauerbeiter-eng-sticker.png' if lang == 'en' else 'assets/bauarbeiter-sticker.png') }}"
|
|
class="{% if lang == 'en' %}taxi-sticker--en{% endif %}"
|
|
alt="{{ t('taxi_sticker_alt') }}"
|
|
loading="lazy"
|
|
decoding="async"
|
|
>
|
|
</div>
|
|
<p>{{ t('taxi_text') }}</p>
|
|
{% elif page == 'gifts' %}
|
|
<section class="gift-fun" data-gift-fun>
|
|
<p class="gift-lead">{{ t('gifts_teaser') }}</p>
|
|
<button class="btn gift-reveal-btn" type="button" data-gift-reveal>{{ t('gifts_reveal_button') }}</button>
|
|
<div class="gift-reveal" hidden data-gift-reveal-panel>
|
|
<div class="gift-image-wrap">
|
|
<img
|
|
src="{{ url_for('static', filename='assets/money-pile.svg') }}"
|
|
alt="{{ t('gifts_image_alt') }}"
|
|
loading="lazy"
|
|
decoding="async"
|
|
>
|
|
</div>
|
|
<p class="gift-caption">{{ t('gifts_caption') }}</p>
|
|
<p>{{ t('gifts_text') }}</p>
|
|
<div class="money-rain" aria-hidden="true">
|
|
<span class="bill" style="--idx: 1;"></span>
|
|
<span class="bill" style="--idx: 2;"></span>
|
|
<span class="bill" style="--idx: 3;"></span>
|
|
<span class="bill" style="--idx: 4;"></span>
|
|
<span class="bill" style="--idx: 5;"></span>
|
|
<span class="bill" style="--idx: 6;"></span>
|
|
<span class="bill" style="--idx: 7;"></span>
|
|
<span class="bill" style="--idx: 8;"></span>
|
|
<span class="bill" style="--idx: 9;"></span>
|
|
<span class="bill" style="--idx: 10;"></span>
|
|
<span class="bill" style="--idx: 11;"></span>
|
|
<span class="bill" style="--idx: 12;"></span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>
|
|
(() => {
|
|
const root = document.querySelector("[data-gift-fun]");
|
|
if (!root) return;
|
|
const button = root.querySelector("[data-gift-reveal]");
|
|
const panel = root.querySelector("[data-gift-reveal-panel]");
|
|
if (!button || !panel) return;
|
|
|
|
button.addEventListener("click", () => {
|
|
panel.hidden = false;
|
|
panel.classList.add("is-active");
|
|
button.setAttribute("disabled", "disabled");
|
|
}, { once: true });
|
|
})();
|
|
</script>
|
|
{% elif page == 'location' %}
|
|
<h2>{{ t('location_story_title') }}</h2>
|
|
<p>{{ t('location_story_text') }}</p>
|
|
<div
|
|
class="map-wrap map-consent"
|
|
data-map-consent
|
|
data-route-denied="{{ t('route_location_denied') }}"
|
|
data-route-unavailable="{{ t('route_location_unavailable') }}"
|
|
>
|
|
<button
|
|
class="map-preview"
|
|
type="button"
|
|
data-map-load
|
|
aria-label="{{ t('maps_load_button') }}"
|
|
title="{{ t('maps_load_button') }}"
|
|
style="--map-preview-image: url('{{ url_for('static', filename='assets/location-map-preview.svg') }}');"
|
|
>
|
|
<span class="map-preview-overlay">{{ t('maps_load_button') }}</span>
|
|
</button>
|
|
<div class="map-embed-target" data-map-embed-target></div>
|
|
<div class="location-actions">
|
|
<a class="btn btn-ghost" href="{{ location_route_url }}" target="_blank" rel="noopener" data-location-route-live>{{ t('route_from_current') }}</a>
|
|
<a class="btn" href="{{ location_website_url }}" target="_blank" rel="noopener">{{ t('visit_location') }}</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(() => {
|
|
const wrapper = document.querySelector("[data-map-consent]");
|
|
if (!wrapper) return;
|
|
const loadButtons = Array.from(wrapper.querySelectorAll("[data-map-load]"));
|
|
const previewButton = wrapper.querySelector(".map-preview");
|
|
const target = wrapper.querySelector("[data-map-embed-target]");
|
|
const src = {{ google_maps_embed_url|tojson }};
|
|
const destination = {{ location_address|tojson }};
|
|
const liveRouteLink = wrapper.querySelector("[data-location-route-live]");
|
|
const deniedMsg = wrapper.dataset.routeDenied || "";
|
|
const unavailableMsg = wrapper.dataset.routeUnavailable || "";
|
|
let loaded = false;
|
|
|
|
const loadMap = () => {
|
|
if (loaded) return;
|
|
const iframe = document.createElement("iframe");
|
|
iframe.src = src;
|
|
iframe.loading = "lazy";
|
|
iframe.referrerPolicy = "no-referrer-when-downgrade";
|
|
iframe.allowFullscreen = true;
|
|
target.appendChild(iframe);
|
|
if (previewButton) {
|
|
previewButton.remove();
|
|
}
|
|
loadButtons.forEach((button) => button.remove());
|
|
loaded = true;
|
|
};
|
|
|
|
loadButtons.forEach((button) => {
|
|
button.addEventListener("click", loadMap);
|
|
});
|
|
|
|
if (liveRouteLink) {
|
|
liveRouteLink.addEventListener("click", (event) => {
|
|
event.preventDefault();
|
|
if (!navigator.geolocation) {
|
|
if (unavailableMsg) {
|
|
window.alert(unavailableMsg);
|
|
}
|
|
return;
|
|
}
|
|
|
|
navigator.geolocation.getCurrentPosition(
|
|
({ coords }) => {
|
|
const origin = `${coords.latitude},${coords.longitude}`;
|
|
const query = new URLSearchParams({
|
|
api: "1",
|
|
origin,
|
|
destination,
|
|
travelmode: "driving",
|
|
});
|
|
window.open(`https://www.google.com/maps/dir/?${query.toString()}`, "_blank", "noopener");
|
|
},
|
|
(geoError) => {
|
|
if (geoError && geoError.code === 1 && deniedMsg) {
|
|
window.alert(deniedMsg);
|
|
return;
|
|
}
|
|
if (unavailableMsg) {
|
|
window.alert(unavailableMsg);
|
|
}
|
|
},
|
|
{ enableHighAccuracy: true, timeout: 4500, maximumAge: 120000 }
|
|
);
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
{% endif %}
|
|
</section>
|
|
{% endblock %}
|