165 lines
7.9 KiB
HTML
165 lines
7.9 KiB
HTML
<!doctype html>
|
|
<html lang="{{ lang }}">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>{{ t('brand') }}</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Source+Sans+3:wght@400;500;600&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css', v='20260724x') }}" />
|
|
</head>
|
|
<body>
|
|
<header class="topbar">
|
|
<div>
|
|
<a class="brand" href="{{ url_for('welcome') if guest_name else url_for('landing') }}">{{ t('brand') }}</a>
|
|
</div>
|
|
<div class="toolbar {{ 'toolbar-authenticated' if guest_name else 'toolbar-login' }}">
|
|
<div class="toolbar-row toolbar-row-top">
|
|
<form method="post" action="{{ url_for('set_lang', code='de') }}">
|
|
<button class="btn btn-ghost" type="submit">DE</button>
|
|
</form>
|
|
<form method="post" action="{{ url_for('set_lang', code='en') }}">
|
|
<button class="btn btn-ghost" type="submit">EN</button>
|
|
</form>
|
|
{% if guest_name %}
|
|
<button
|
|
class="btn btn-ghost toolbar-nav-btn toolbar-translate-btn"
|
|
type="button"
|
|
aria-label="{{ t('translator') }}"
|
|
title="{{ t('translator') }}"
|
|
data-translator-open
|
|
>
|
|
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
|
<path d="M12 5.5A8.4 8.4 0 0 0 6.5 3.4 8.6 8.6 0 0 0 2 4.7v14.1a.75.75 0 0 0 1.02.7A8.1 8.1 0 0 1 6.5 18.6a7.1 7.1 0 0 1 4.98 2 .75.75 0 0 0 1.04 0 7.1 7.1 0 0 1 4.98-2 8.1 8.1 0 0 1 3.48.9.75.75 0 0 0 1.02-.7V4.7a8.6 8.6 0 0 0-4.5-1.3A8.4 8.4 0 0 0 12 5.5zm-1 12.9a8.7 8.7 0 0 0-4.5-1.3 9.6 9.6 0 0 0-3 .5V5.7a7.4 7.4 0 0 1 3-.8A6.9 6.9 0 0 1 11 6.7zm9.5-.8a9.6 9.6 0 0 0-3-.5 8.7 8.7 0 0 0-4.5 1.3V6.7a6.9 6.9 0 0 1 4.5-1.8 7.4 7.4 0 0 1 3 .8z" />
|
|
</svg>
|
|
</button>
|
|
<a class="btn btn-ghost toolbar-nav-btn toolbar-faq-btn" href="{{ url_for('faq') }}" aria-label="{{ t('faq') }}" title="{{ t('faq') }}">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
|
<path d="M12 2a10 10 0 1 0 10 10A10.01 10.01 0 0 0 12 2zm.15 16.25a1.25 1.25 0 1 1 1.25-1.25 1.25 1.25 0 0 1-1.25 1.25zm1.75-7.05-.75.48a1.36 1.36 0 0 0-.65 1.17v.4h-2v-.4a3.34 3.34 0 0 1 1.58-2.85l.75-.48a1.75 1.75 0 1 0-2.68-1.48h-2a3.75 3.75 0 1 1 5.75 3.16z" />
|
|
</svg>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
{% if guest_name %}
|
|
<div class="toolbar-row toolbar-row-bottom">
|
|
<div
|
|
class="toolbar-timer"
|
|
data-countdown-target="{{ wedding_countdown_iso }}"
|
|
data-countdown-started="{{ t('countdown_started') }}"
|
|
>
|
|
<button
|
|
class="btn btn-ghost toolbar-nav-btn toolbar-timer-btn"
|
|
type="button"
|
|
aria-label="{{ t('countdown_button_label') }}"
|
|
title="{{ t('countdown_button_label') }}"
|
|
data-countdown-toggle
|
|
aria-expanded="false"
|
|
>
|
|
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
|
<path d="M15 2H9v2h6V2zm-3 4a8 8 0 1 0 8 8 8 8 0 0 0-8-8zm3.4 11.4L11 13V8h2v4.2l3.8 3.8z" />
|
|
</svg>
|
|
</button>
|
|
<div class="toolbar-timer-popover" data-countdown-popover hidden>
|
|
<p class="toolbar-timer-label">{{ t('countdown_until') }}</p>
|
|
<div class="toolbar-timer-grid" data-countdown-grid>
|
|
<div class="toolbar-timer-unit">
|
|
<span class="toolbar-timer-value" data-countdown-days>0</span>
|
|
<span class="toolbar-timer-unit-label">{{ t('countdown_days') }}</span>
|
|
</div>
|
|
<div class="toolbar-timer-unit">
|
|
<span class="toolbar-timer-value" data-countdown-hours>00</span>
|
|
<span class="toolbar-timer-unit-label">{{ t('countdown_hours') }}</span>
|
|
</div>
|
|
<div class="toolbar-timer-unit">
|
|
<span class="toolbar-timer-value" data-countdown-minutes>00</span>
|
|
<span class="toolbar-timer-unit-label">{{ t('countdown_minutes') }}</span>
|
|
</div>
|
|
<div class="toolbar-timer-unit">
|
|
<span class="toolbar-timer-value" data-countdown-seconds>00</span>
|
|
<span class="toolbar-timer-unit-label">{{ t('countdown_seconds') }}</span>
|
|
</div>
|
|
</div>
|
|
<p class="toolbar-timer-subline" data-countdown-subline>{{ t('countdown_subline') }}</p>
|
|
</div>
|
|
</div>
|
|
<a class="btn btn-ghost toolbar-nav-btn" href="{{ url_for('guest_area') }}" aria-label="{{ t('dashboard') }}" title="{{ t('dashboard') }}">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
|
<path d="M3 3h8v8H3V3zm10 0h8v5h-8V3zM3 13h5v8H3v-8zm7 0h11v8H10v-8z" />
|
|
</svg>
|
|
</a>
|
|
<form method="post" action="{{ url_for('logout') }}">
|
|
<button class="btn btn-ghost" type="submit">{{ t('logout') }}</button>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</header>
|
|
|
|
{% if guest_name %}
|
|
<dialog
|
|
class="translator-dialog"
|
|
data-translator-dialog
|
|
data-source-lang="{{ 'de' if lang == 'de' else 'en' }}"
|
|
aria-labelledby="translator-title"
|
|
>
|
|
<div class="translator-sheet">
|
|
<div class="translator-head">
|
|
<div>
|
|
<h2 id="translator-title">{{ t('translator') }}</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="translator-direction" aria-label="{{ t('translator_direction') }}">
|
|
<span data-translator-source>{{ t('language_german') if lang == 'de' else t('language_english') }}</span>
|
|
<button class="translator-swap" type="button" data-translator-swap aria-label="{{ t('translator_swap') }}">⇄</button>
|
|
<span data-translator-target>{{ t('language_english') if lang == 'de' else t('language_german') }}</span>
|
|
</div>
|
|
|
|
<label class="translator-label" for="translator-text">{{ t('translator_input_label') }}</label>
|
|
<textarea
|
|
id="translator-text"
|
|
class="translator-input"
|
|
rows="4"
|
|
maxlength="500"
|
|
placeholder="{{ t('translator_placeholder') }}"
|
|
data-translator-input
|
|
></textarea>
|
|
|
|
<div class="translator-quick-list" aria-label="{{ t('translator_quick_phrases') }}">
|
|
<button type="button" data-translator-phrase data-de="Schön, dich kennenzulernen." data-en="Nice to meet you.">{{ t('translator_phrase_meet') }}</button>
|
|
<button type="button" data-translator-phrase data-de="Möchtest du etwas trinken?" data-en="Would you like something to drink?">{{ t('translator_phrase_drink') }}</button>
|
|
<button type="button" data-translator-phrase data-de="Wo ist die Toilette?" data-en="Where is the restroom?">{{ t('translator_phrase_restroom') }}</button>
|
|
</div>
|
|
|
|
<p class="translator-privacy">{{ t('translator_privacy') }}</p>
|
|
<button class="btn translator-submit" type="button" data-translator-submit disabled>
|
|
{{ t('translator_submit') }} <span aria-hidden="true">↗</span>
|
|
</button>
|
|
</div>
|
|
</dialog>
|
|
{% endif %}
|
|
|
|
<main class="container">
|
|
|
|
{% with messages = get_flashed_messages() %}
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<p class="flash">{{ message }}</p>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<a href="{{ url_for('datenschutz') }}">{{ t('privacy') }}</a>
|
|
<a href="{{ url_for('impressum') }}">{{ t('imprint') }}</a>
|
|
</footer>
|
|
<script src="{{ url_for('static', filename='dashboard-transition.js', v='20260303a') }}" defer></script>
|
|
<script src="{{ url_for('static', filename='countdown.js', v='20260303c') }}" defer></script>
|
|
<script src="{{ url_for('static', filename='translator.js', v='20260724b') }}" defer></script>
|
|
</body>
|
|
</html>
|