Add party slideshow photo upload link

README.md

@@ -1,6 +1,6 @@
 # Einladung & RSVP
 
-Eine responsive Einladung für Vicky und Daniels 30. Geburtstag. Jeder Gast erhält einen persönlichen Link, kann die Originaleinladung als PDF öffnen und eine von drei Antworten abgeben:
+Eine responsive Einladung von Vicky und Daniel zu Daniels 30. Geburtstag. Jeder Gast erhält einen persönlichen Link, kann die Originaleinladung als PDF öffnen und eine von drei Antworten abgeben:
 
 - Ich komme nicht
 - Ich komme alleine

public/app.js

@@ -15,6 +15,7 @@ const inviteCard = document.querySelector("#invite-card");
 const inviteImage = document.querySelector("#invite-image");
 const pdfLink = document.querySelector("#pdf-link");
 const inviteColumn = document.querySelector(".invite-column");
+const photoUpload = document.querySelector("#photo-upload");
 
 const tokenMatch = window.location.pathname.match(/^\/i\/([A-Za-z0-9_-]+)\/?$/);
 const token = tokenMatch?.[1];
@@ -34,6 +35,7 @@ function populate(invite) {
   inviteCard.href = `${assetBase}/pdf`;
   pdfLink.href = `${assetBase}/pdf`;
   greeting.textContent = invite.guestName ? `Hallo ${invite.guestName}!` : "Hallo!";
+  show(photoUpload);
   if (invite.answer) {
     const radio = form.querySelector(`[name="answer"][value="${invite.answer}"]`);
     if (radio) radio.checked = true;

public/index.html

@@ -4,8 +4,8 @@
     <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 zum 30. Geburtstag von Vicky und Daniel">
-    <title>Vicky &amp; Daniel werden 30</title>
+    <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>
@@ -13,9 +13,9 @@
     <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 zum 30. Geburtstag von Vicky und Daniel</h1>
+        <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 zum 30. Geburtstag von Vicky und Daniel.">
+          <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>
@@ -86,11 +86,20 @@
           <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 · 30 Jahre</footer>
+    <footer>Vicky &amp; Daniel laden ein</footer>
   </body>
 </html>

public/styles.css

@@ -216,6 +216,38 @@ button.secondary:hover { color: white; background: var(--ink); }
 
 .success .state-icon { background: var(--mint); }
 
+.photo-upload {
+  display: flex;
+  gap: .9rem;
+  margin-top: 1.8rem;
+  padding: 1rem;
+  background: #fff6ed;
+  border: 1.5px solid #f5c9a9;
+  border-radius: 15px;
+}
+
+.photo-upload-icon {
+  display: grid;
+  flex: 0 0 42px;
+  width: 42px;
+  height: 42px;
+  place-items: center;
+  background: white;
+  border-radius: 50%;
+  font: 1.25rem/1 system-ui, sans-serif;
+}
+
+.photo-upload h3 { margin: 0; color: var(--ink); font-size: 1.05rem; }
+.photo-upload p { margin: .35rem 0 .75rem; font-size: .9rem; }
+.photo-upload-link {
+  color: var(--ink);
+  font: 750 .8rem/1.2 system-ui, sans-serif;
+  letter-spacing: .04em;
+  text-transform: uppercase;
+}
+
+.photo-upload-link:hover { color: var(--turquoise); }
+
 .loading {
   position: absolute;
   inset: 0;