Tipp

GUESTS.md

@@ -8,7 +8,7 @@ Anzahl Gruppen: **41**
 |---|---|---|---|
 | Bubus | admin | `Bubu!Herz24#` | Svenja, Dominic |
 | Remi | guest | `Remi#Ring24!` | Remi |
-| Chantal | guest | `Chan!Tanz24#` | Chantal |
+ | Chantal |
 | Madeleine | guest | `Madi$Rose24!` | Madeleine |
 | Julie & Daniel | guest | `Juli&Dan24!#` | Julie, Daniel |
 | Tim & Sophie | guest | `Tim+Sofi24!#` | Tim, Sophie |

backend/app.py

@@ -455,6 +455,7 @@ TEXTS = {
         "gallery_uploaded_by": "von {name}",
         "gallery_empty": "Noch keine Bilder vorhanden.",
         "gallery_image_alt": "Upload von {name}",
+        "gallery_save_hint": "Tipp: Halte das Bild länger gedrückt, um es in deiner Mediathek zu speichern.",
         "flash_enter_group_name": "Bitte Gruppenname eingeben.",
         "flash_invalid_group_login": "Ungültiger Gruppenname oder Passwort.",
         "flash_rsvp_select": "Bitte für alle Mitglieder eine RSVP-Auswahl treffen.",
@@ -728,6 +729,7 @@ TEXTS = {
         "gallery_uploaded_by": "by {name}",
         "gallery_empty": "No photos available yet.",
         "gallery_image_alt": "Uploaded by {name}",
+        "gallery_save_hint": "Tip: Touch and hold the photo to save it to your photo library.",
         "flash_enter_group_name": "Please enter group name.",
         "flash_invalid_group_login": "Invalid group name or password.",
         "flash_rsvp_select": "Please choose RSVP values for all members.",

backend/static/styles.css

@@ -1412,6 +1412,29 @@ input[type="file"]:focus {
   fill: currentColor;
 }
 
+.lightbox-save-hint {
+  position: absolute;
+  z-index: 4;
+  left: 50%;
+  bottom: 1rem;
+  width: min(78vw, 34rem);
+  padding: 0.65rem 0.9rem;
+  border-radius: 999px;
+  background: rgba(20, 20, 20, 0.78);
+  color: #fff;
+  font-size: 0.85rem;
+  text-align: center;
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, 0.5rem);
+  transition: opacity 220ms ease, transform 220ms ease;
+}
+
+.lightbox-save-hint.is-visible {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+
 .lightbox-nav {
   top: 50%;
   transform: translateY(-50%);

backend/templates/gallery.html

@@ -40,6 +40,7 @@
     <button class="lightbox-nav lightbox-prev" type="button" aria-label="Previous image">‹</button>
     <img class="lightbox-image" id="lightbox-image" alt="" />
     <button class="lightbox-nav lightbox-next" type="button" aria-label="Next image">›</button>
+    <div class="lightbox-save-hint" id="lightbox-save-hint" role="status">{{ t('gallery_save_hint') }}</div>
   </div>
 
   <script>
@@ -48,6 +49,7 @@
       const lightboxImage = document.getElementById("lightbox-image");
       const lightboxDownload = document.getElementById("lightbox-download");
       const lightboxCounter = document.getElementById("lightbox-counter");
+      const saveHint = document.getElementById("lightbox-save-hint");
       const closeBtn = lightbox.querySelector(".lightbox-close");
       const prevBtn = lightbox.querySelector(".lightbox-prev");
       const nextBtn = lightbox.querySelector(".lightbox-next");
@@ -67,6 +69,7 @@
       let touchStartY = 0;
       let didSwipe = false;
       let controlsTimer = null;
+      let hintTimer = null;
 
       const scheduleHideControls = () => {
         clearTimeout(controlsTimer);
@@ -105,6 +108,9 @@
         lightbox.setAttribute("aria-hidden", "false");
         document.body.classList.add("no-scroll");
         showControlsTemporarily();
+        saveHint.classList.add("is-visible");
+        clearTimeout(hintTimer);
+        hintTimer = window.setTimeout(() => saveHint.classList.remove("is-visible"), 5000);
       };
 
       const closeLightbox = () => {
@@ -113,6 +119,8 @@
         document.body.classList.remove("no-scroll");
         lightbox.classList.remove("lightbox-controls-hidden");
         clearTimeout(controlsTimer);
+        clearTimeout(hintTimer);
+        saveHint.classList.remove("is-visible");
       };
 
       openButtons.forEach((link) => {