30-birthday/public/index.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#f8f4ef">
    <meta name="description" content="Einladung von Vicky und Daniel zu Daniels 30. Geburtstag">
    <title>Daniels 30. Geburtstag</title>
    <link rel="stylesheet" href="/styles.css">
    <script src="/app.js" defer></script>
  </head>
  <body>
    <a class="skip-link" href="#antwort">Zur Antwort springen</a>
    <main class="page-shell">
      <section class="invite-column" aria-labelledby="page-title">
        <h1 id="page-title" class="visually-hidden">Einladung von Vicky und Daniel zu Daniels 30. Geburtstag</h1>
        <a id="invite-card" class="invite-card" target="_blank" rel="noopener" aria-label="Einladung als PDF öffnen">
          <img id="invite-image" alt="Persönliche Einladung von Vicky und Daniel zu Daniels 30. Geburtstag.">
        </a>
        <a id="pdf-link" class="pdf-link" download="Einladung-Vicky-und-Daniel.pdf">
          <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M12 3v12m0 0 5-5m-5 5-5-5M5 19h14"/></svg>
          Einladung als PDF
        </a>
      </section>

      <section id="antwort" class="rsvp-card" aria-labelledby="rsvp-title">
        <div class="eyebrow">Persönliche Einladung</div>
        <div id="loading" class="loading" role="status">
          <span></span><span></span><span></span>
          <span class="visually-hidden">Einladung wird geladen</span>
        </div>

        <div id="invalid-state" class="state-message" hidden>
          <div class="state-icon" aria-hidden="true">?</div>
          <h2>Link nicht gefunden</h2>
          <p id="invalid-message">Dieser Einladungslink ist leider nicht gültig.</p>
        </div>

        <form id="rsvp-form" hidden novalidate>
          <p class="hello" id="guest-greeting">Hallo!</p>
          <h2 id="rsvp-title">Bist du dabei?</h2>
          <p class="intro">Bitte gib uns kurz Bescheid, damit wir Essen und Getränke planen können.</p>

          <fieldset>
            <legend class="visually-hidden">Deine Antwort</legend>
            <label class="choice">
              <input type="radio" name="answer" value="not_coming">
              <span class="choice-mark" aria-hidden="true">
                <svg viewBox="0 0 24 24"><path d="m7 7 10 10M17 7 7 17"/></svg>
              </span>
              <span><strong>Ich komme nicht</strong><small>Schade, beim nächsten Mal!</small></span>
            </label>

            <label class="choice">
              <input type="radio" name="answer" value="alone">
              <span class="choice-mark" aria-hidden="true">
                <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="3.5"/><path d="M5.5 20c.7-4 3-6 6.5-6s5.8 2 6.5 6"/></svg>
              </span>
              <span><strong>Ich komme alleine</strong><small>Wir freuen uns auf dich!</small></span>
            </label>

            <label class="choice">
              <input type="radio" name="answer" value="with_someone">
              <span class="choice-mark" aria-hidden="true">
                <svg viewBox="0 0 24 24"><circle cx="9" cy="8" r="3"/><circle cx="17" cy="9" r="2.3"/><path d="M3 20c.6-4 2.8-6 6-6s5.4 2 6 6m0-5.5c3 0 4.8 1.8 5 5.5"/></svg>
              </span>
              <span><strong>Ich komme mit jemandem</strong><small>Zu zweit feiert es sich schöner.</small></span>
            </label>
          </fieldset>

          <div id="companion-wrap" class="companion" hidden>
            <label for="companion-name">Wie heißt deine Begleitung?</label>
            <input id="companion-name" name="companionName" type="text" maxlength="100" autocomplete="name" placeholder="Vorname &amp; Nachname">
          </div>

          <p id="form-error" class="form-error" role="alert" hidden></p>
          <button id="submit-button" type="submit">Antwort senden</button>
          <p class="update-note" id="update-note" hidden>Du hast schon geantwortet. Du kannst deine Auswahl jederzeit ändern.</p>
        </form>

        <div id="success-state" class="state-message success" hidden aria-live="polite">
          <div class="state-icon" aria-hidden="true">✓</div>
          <p class="hello">Danke!</p>
          <h2 id="success-title">Deine Antwort ist gespeichert.</h2>
          <p id="success-copy"></p>
          <button id="change-button" type="button" class="secondary">Antwort ändern</button>
        </div>

        <aside id="photo-upload" class="photo-upload" aria-labelledby="photo-upload-title" hidden>
          <div class="photo-upload-icon" aria-hidden="true">📸</div>
          <div>
            <h3 id="photo-upload-title">Fotos für die Diashow</h3>
            <p>Bitte ladet, falls ihr Fotos von mir oder uns habt, diese hier hoch; die Fotos werden beim Geburtstag über einen Beamer an eine Wand projiziert.</p>
            <a class="photo-upload-link" href="https://immich.brunner.ninja/share/cBA3dAiMH2J8KCIFac1zw3or00h7nCFgxVB-5OPojL9OinFozJX_bfHtOxywJem_UJY" target="_blank" rel="noopener noreferrer">Fotos hochladen</a>
          </div>
        </aside>

        <div class="mini-confetti" aria-hidden="true">
          <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
        </div>
      </section>
    </main>
    <footer>Vicky &amp; Daniel laden ein</footer>
  </body>
</html>