Improve draw reveal UX and auto-refresh

- Add reveal button for participants and organizer (suspense before seeing result)
- Auto-refresh every 15s on waiting pages, stops automatically once draw is done
- Remove manual refresh buttons (redundant with auto-refresh)
- Add organizer nudge message after draw: "let your participants know"
- Update waiting text across all 5 languages to be clearer
- Remove card entrance animation to prevent flash on auto-refresh
- Remove card animation flash on page reload

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: kpython

locales/de.json

@@ -16,8 +16,10 @@
   "wish_title": "Wunsch",
   "submit_button": "Absenden",
   "participant_ready": "Dein Geschenk geht an",
-  "participant_wait": "Danke für deine Teilnahme! Die Ziehung wurde noch nicht durchgeführt. Bitte komme später wieder und lade die Seite neu, um zu sehen, ob die Ziehung stattgefunden hat.",
-  "participant_wait_button": "🔄 Aktualisieren um das Ergebnis der Ziehung zu sehen",
+  "participant_wait": "Du bist dabei! Warte darauf, dass der Organisator dich informiert, wenn die Auslosung abgeschlossen ist, und komme dann hierher zurück.",
+  "participant_wait_button": "Aktualisieren",
+  "reveal_button": "Meine Auslosung entdecken",
+  "organizer_notify": "Die Auslosung ist abgeschlossen! Informiere deine Teilnehmer, damit sie herausfinden können, wem sie schenken.",
   "manage_draw": "Ziehung verwalten",
   "participants": "Teilnehmer",
   "start_draw": "Auslosung starten",

locales/en.json

@@ -16,8 +16,10 @@
   "wish_title": "Wish",
   "submit_button": "Submit",
   "participant_ready": "Your gift is for",
-  "participant_wait": "Thank you for submitting! The draw has not been done yet. Please check back later and try reloading the page to see if the draw has happened.",
-  "participant_wait_button": "🔄 Refresh to see the draw result",
+  "participant_wait": "You're in! Wait for the organizer to let you know when the draw is done, then come back here.",
+  "participant_wait_button": "Refresh",
+  "reveal_button": "Reveal my draw",
+  "organizer_notify": "The draw is done! Let your participants know so they can discover who they're gifting to.",
   "manage_draw": "Manage Draw",
   "participants": "Participants",
   "start_draw": "Start Draw",

locales/fr.json

@@ -16,8 +16,10 @@
   "wish_title": "Souhait",
   "submit_button": "Envoyer",
   "participant_ready": "Votre cadeau est pour",
-  "participant_wait": "Merci pour votre participation ! Le tirage n'a pas encore été effectué. Revenez plus tard et pensez à recharger la page pour voir si le tirage a eu lieu.",
-  "participant_wait_button": "🔄 Actualiser pour voir le résultat du tirage",
+  "participant_wait": "C'est enregistré ! Attendez que l'organisateur vous prévienne quand le tirage est fait, puis revenez ici.",
+  "participant_wait_button": "Actualiser",
+  "reveal_button": "Découvrir mon tirage",
+  "organizer_notify": "Le tirage est fait ! Prévenez vos participants pour qu'ils puissent découvrir à qui ils offrent.",
   "manage_draw": "Gérer le tirage",
   "participants": "Participants",
   "start_draw": "Lancer le tirage",

locales/it.json

@@ -16,8 +16,10 @@
   "wish_title": "Desiderio",
   "submit_button": "Invia",
   "participant_ready": "Il tuo regalo è per",
-  "participant_wait": "Grazie per la partecipazione! L'estrazione non è ancora avvenuta. Torna più tardi e ricarica la pagina per vedere se l'estrazione è avvenuta.",
-  "participant_wait_button": "🔄 Aggiorna per vedere il risultato",
+  "participant_wait": "Sei dentro! Aspetta che l'organizzatore ti avvisi quando l'estrazione è fatta, poi torna qui.",
+  "participant_wait_button": "Aggiorna",
+  "reveal_button": "Scopri la mia estrazione",
+  "organizer_notify": "L'estrazione è fatta! Avvisa i tuoi partecipanti così potranno scoprire a chi fanno il regalo.",
   "manage_draw": "Gestisci l'estrazione",
   "participants": "Partecipanti",
   "start_draw": "Avvia l'estrazione",

locales/pt.json

@@ -16,8 +16,10 @@
   "wish_title": "Desejo",
   "submit_button": "Enviar",
   "participant_ready": "Seu presente é para",
-  "participant_wait": "Obrigado por participar! O sorteio ainda não foi realizado. Por favor, volte mais tarde e tente recarregar a página para ver se o sorteio já aconteceu.",
-  "participant_wait_button": "🔄 Atualizar para ver o resultado do sorteio",
+  "participant_wait": "Você está dentro! Aguarde o organizador avisar quando o sorteio for feito, depois volte aqui.",
+  "participant_wait_button": "Atualizar",
+  "reveal_button": "Revelar meu sorteio",
+  "organizer_notify": "O sorteio foi feito! Avise seus participantes para que possam descobrir para quem vão presentear.",
   "manage_draw": "Gerenciar Sorteio",
   "participants": "Participantes",
   "start_draw": "Iniciar Sorteio",

static/style.css

@@ -213,15 +213,14 @@ body::after {
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.38);
   margin-bottom: 24px;
   color: #2c1810;
-  animation: fadeSlideIn 0.55s ease both;
 }
 
 .container > .card:nth-child(3) { animation-delay: 0.1s; }
 .container > .card:nth-child(4) { animation-delay: 0.2s; }
 
 @keyframes fadeSlideIn {
-  from { opacity: 0; transform: translateY(22px); }
-  to   { opacity: 1; transform: translateY(0);    }
+  from { opacity: 0; }
+  to   { opacity: 1; }
 }
 
 .card h1 {
@@ -407,6 +406,15 @@ footer.github-footer a:hover {
   margin: 0;
 }
 
+/* ── Organizer notify ──────────────────────────────────── */
+.organizer-notify {
+  padding: 16px 0;
+  border-top: 1px solid #ede8e2;
+  font-size: 0.88em;
+  color: #888;
+  margin: 4px 0;
+}
+
 /* ── Share section (manage page) ───────────────────────── */
 .share-section {
   padding: 20px 0;

templates/manage.html

@@ -42,13 +42,19 @@ <h1>{{.EventName}}</h1>
     {{if and .DrawDone .OrganizerGiftFor}}
     <div class="draw-result">
       <h1>Hello, {{.OrganizerName}}</h1>
-      <div class="section-label">{{index .T "participant_ready"}}</div>
-      <p style="font-size: 1.15em; font-weight: 600; color: #1a0a04; margin: 0 0 16px;">{{.OrganizerGiftFor}}</p>
-      {{if .OrganizerRecipientWish}}
-      <div class="section-label">{{index .T "wish_title"}}</div>
-      <p style="color: #555; margin: 0;">{{.OrganizerRecipientWish}}</p>
-      {{end}}
+      <div id="organizer-reveal-wrap" class="status-card">
+        <button onclick="revealDraw()" style="width: 100%;">{{index .T "reveal_button"}}</button>
+      </div>
+      <div id="organizer-draw-result" style="display: none;">
+        <div class="section-label">{{index .T "participant_ready"}}</div>
+        <p style="font-size: 1.15em; font-weight: 600; color: #1a0a04; margin: 0 0 16px;">{{.OrganizerGiftFor}}</p>
+        {{if .OrganizerRecipientWish}}
+        <div class="section-label">{{index .T "wish_title"}}</div>
+        <p style="color: #555; margin: 0;">{{.OrganizerRecipientWish}}</p>
+        {{end}}
+      </div>
     </div>
+    <div class="organizer-notify">{{index .T "organizer_notify"}}</div>
     {{end}}
 
     <!-- Share link -->
@@ -88,7 +94,6 @@ <h1>Hello, {{.OrganizerName}}</h1>
       </form>
       {{else}}
       <p class="status-waiting">{{index .T "waiting_draw"}}</p>
-      <button onclick="refreshPage(event)" style="margin-top: 15px; width: 100%;">{{index .T "waiting_draw_button"}}</button>
       {{end}}
     </div>
     {{end}}
@@ -129,15 +134,17 @@ <h1>Hello, {{.OrganizerName}}</h1>
   }
 }
 
-function refreshPage(event) {
-  const button = event.target;
+function revealDraw() {
+  document.getElementById('organizer-reveal-wrap').style.display = 'none';
+  const result = document.getElementById('organizer-draw-result');
+  result.style.display = 'block';
+  result.style.animation = 'fadeSlideIn 0.4s ease both';
+}
 
-  if (navigator.vibrate) navigator.vibrate(50);
 
-  button.style.transform = 'scale(0.95)';
-  setTimeout(() => { button.style.transform = 'scale(1)'; }, 200);
-  setTimeout(() => { location.reload(); }, 300);
-}
+{{if not .DrawDone}}
+setTimeout(() => { location.reload(); }, 15000);
+{{end}}
 </script>
 
 </body>

templates/participant.html

@@ -32,38 +32,37 @@
   <div class="card">
     <h1>Hello, {{.Name}}</h1>
     {{if .Ready}}
-    <div class="section-label">{{index .T "participant_ready"}}</div>
-    <p style="font-size: 1.15em; font-weight: 600; color: #1a0a04; margin: 0 0 16px;">{{.GiftFor}}</p>
-    {{if .Wish}}
-    <div class="section-label">{{index .T "wish_title"}}</div>
-    <p style="color: #555; margin: 0;">{{.Wish}}</p>
-    {{end}}
+    <div id="reveal-wrap" class="status-card">
+      <button onclick="revealDraw()" style="width: 100%;">{{index .T "reveal_button"}}</button>
+    </div>
+    <div id="draw-result" style="display: none;">
+      <div class="section-label">{{index .T "participant_ready"}}</div>
+      <p style="font-size: 1.15em; font-weight: 600; color: #1a0a04; margin: 0 0 16px;">{{.GiftFor}}</p>
+      {{if .Wish}}
+      <div class="section-label">{{index .T "wish_title"}}</div>
+      <p style="color: #555; margin: 0;">{{.Wish}}</p>
+      {{end}}
+    </div>
     {{else}}
     <div class="status-card">
       <p>{{index .T "participant_wait"}}</p>
-      <button onclick="refreshPage(event)" style="width: 100%;">{{index .T "participant_wait_button"}}</button>
     </div>
     {{end}}
   </div>
 </div>
 
 <script>
-function refreshPage(event) {
-  const button = event.target;
-  
-  // Haptic feedback (vibration)
-  if (navigator.vibrate) {
-    navigator.vibrate(50);
-  }
-  
-  button.style.transform = 'scale(0.95)';
-  setTimeout(() => { button.style.transform = 'scale(1)'; }, 200);
-  
-  // Reload after animation
-  setTimeout(() => {
-    location.reload();
-  }, 300);
+function revealDraw() {
+  document.getElementById('reveal-wrap').style.display = 'none';
+  const result = document.getElementById('draw-result');
+  result.style.display = 'block';
+  result.style.animation = 'fadeSlideIn 0.4s ease both';
 }
+
+
+{{if not .Ready}}
+setTimeout(() => { location.reload(); }, 15000);
+{{end}}
 </script>
 
 <footer class="github-footer">