Improve UX: placeholders, char limit, participant counter, localized copy feedback

- Localized form placeholders: draw name with family names, organizer name per language
- Wish field changed to textarea (4 rows) with personal letter placeholder per language
- Add 500 char limit with live countdown counter on wish fields
- Show participant count (X/Y) next to the Participants label on manage page
- Animated dots on waiting state (CSS only, 0→3 dots loop)
- "Copied" button feedback now localized in all 5 languages
- Waiting message updated: "Keep this page open and come back later"
- Post-reveal reminder: "Remember or note this result — it won't be available forever"
- Remove trailing dots from waiting_draw translations

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

Author: kpython

locales/de.json

@@ -10,26 +10,31 @@
   "step_4": "Starten Sie die Ziehung und entdecken Sie, wem Sie schenken!",
   "title_create_draw": "Secret Santa Ziehung erstellen",
   "draw_name": "Name der Ziehung",
+  "placeholder_draw_name": "Weihnachts-Wichteln — Familie Müller",
+  "placeholder_organizer_name": "Anna Müller",
+  "placeholder_wish": "Lieber Secret Santa,\n\nIch würde mich sehr über ein gutes Buch, Schokolade oder etwas Selbstgemachtes freuen. Ich koche gerade auch sehr gerne!\n\nDanke 🎁",
   "expected_participants": "Erwartete Teilnehmer (3-50)",
   "create_button": "Ziehung erstellen",
   "join_draw": "Am Secret Santa teilnehmen",
   "name_label": "Name",
-  "wish_label": "Möchtest du Wünsche oder eine Nachricht an deinen Secret Santa übermitteln?",
+  "wish_label": "Deine Nachricht an deinen Secret Santa",
   "wish_title": "Wunsch",
   "submit_button": "Absenden",
   "participant_ready": "Dein Geschenk geht an",
-  "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": "Du bist dabei! Lass diese Seite offen und komm später zurück, wenn der Organisator dich informiert.",
+  "result_reminder": "Merke oder notiere dieses Ergebnis — es wird nicht für immer verfügbar sein.",
   "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",
-  "waiting_draw": "Warten auf Teilnehmer...",
+  "waiting_draw": "Warten auf Teilnehmer",
   "all_participants_ready": "Alle haben sich angemeldet",
   "share_link": "Teile diesen Link mit den Teilnehmern",
   "copy_link": "Link kopieren",
+  "copied": "Kopiert! ✅",
   "organizer_name": "Dein Name",
-  "organizer_wish": "Möchtest du Wünsche oder eine Nachricht an deinen Secret Santa übermitteln? (optional)",
+  "organizer_wish": "Deine Nachricht an deinen Secret Santa (optional)",
   "view_on_github": "Auf GitHub ansehen",
   "send_feedback": "💬 Feedback geben / Bug melden"
 }

locales/en.json

@@ -10,26 +10,31 @@
   "step_4": "Start the draw and discover who you're gifting to!",
   "title_create_draw": "Create Secret Santa Draw",
   "draw_name": "Draw Name",
+  "placeholder_draw_name": "Christmas Secret Santa — The Smiths",
+  "placeholder_organizer_name": "Jane Smith",
+  "placeholder_wish": "Dear Secret Santa,\n\nI'd love to receive a cozy book, some good chocolate, or anything handmade. I'm really into cooking lately too!\n\nThank you 🎁",
   "expected_participants": "Expected participants (3-50)",
   "create_button": "Create Draw",
   "join_draw": "Join Secret Santa",
   "name_label": "Name",
-  "wish_label": "Do you want to transmit any wishes or a message to your Secret Santa?",
+  "wish_label": "Your message to your Secret Santa",
   "wish_title": "Wish",
   "submit_button": "Submit",
   "participant_ready": "Your gift is for",
-  "participant_wait": "You're in! Wait for the organizer to let you know when the draw is done, then come back here.",
+  "participant_wait": "You're in! Keep this page open and come back later when the organizer lets you know.",
+  "result_reminder": "Remember or note down this result — it won't be available forever.",
   "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",
-  "waiting_draw": "Waiting for participants...",
+  "waiting_draw": "Waiting for participants",
   "all_participants_ready": "Everyone has joined",
   "share_link": "Share this link with participants",
   "copy_link": "Copy Link",
+  "copied": "Copied! ✅",
   "organizer_name": "Your name",
-  "organizer_wish": "Do you want to transmit any wishes or a message to your Secret Santa? (optional)",
+  "organizer_wish": "Your message to your Secret Santa (optional)",
   "view_on_github": "View on GitHub",
   "send_feedback": "💬 Send feedback / Report a bug"
 }

locales/fr.json

@@ -10,26 +10,31 @@
   "step_4": "Lancez le tirage et découvrez à qui offrir un cadeau !",
   "title_create_draw": "Créer un tirage Secret Santa",
   "draw_name": "Nom du tirage",
+  "placeholder_draw_name": "Secret Santa de Noël — Les Dupont",
+  "placeholder_organizer_name": "Marie Dupont",
+  "placeholder_wish": "Cher Secret Santa,\n\nJ'adorerais recevoir un bon livre, du chocolat ou quelque chose de fait main. En ce moment je suis aussi passionné(e) de cuisine !\n\nMerci 🎁",
   "expected_participants": "Participants attendus (3-50)",
   "create_button": "Créer le tirage",
   "join_draw": "Rejoindre le Secret Santa",
   "name_label": "Nom",
-  "wish_label": "Souhaitez-vous transmettre des souhaits ou un message à votre Secret Santa?",
+  "wish_label": "Ton message à ton Secret Santa",
   "wish_title": "Souhait",
   "submit_button": "Envoyer",
   "participant_ready": "Votre cadeau est pour",
-  "participant_wait": "C'est enregistré ! Attendez que l'organisateur vous prévienne quand le tirage est fait, puis revenez ici.",
+  "participant_wait": "C'est bon ! Garde cette page ouverte et reviens plus tard quand l'organisateur te prévient.",
+  "result_reminder": "Retiens bien ou note ce résultat — il ne sera pas disponible pour toujours.",
   "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",
-  "waiting_draw": "En attente des participants...",
+  "waiting_draw": "En attente des participants",
   "all_participants_ready": "Tout le monde a rejoint",
   "share_link": "Partagez ce lien avec les participants",
   "copy_link": "Copier le lien",
+  "copied": "Copié ! ✅",
   "organizer_name": "Votre nom",
-  "organizer_wish": "Souhaitez-vous transmettre des souhaits ou un message à votre Secret Santa? (optionnel)",
+  "organizer_wish": "Ton message à ton Secret Santa (optionnel)",
   "view_on_github": "Voir sur GitHub",
   "send_feedback": "💬 Donner un feedback / Signaler un bug"
 }

locales/it.json

@@ -10,26 +10,31 @@
   "step_4": "Avvia l'estrazione e scopri a chi fare il regalo!",
   "title_create_draw": "Crea un'estrazione Secret Santa",
   "draw_name": "Nome dell'estrazione",
+  "placeholder_draw_name": "Secret Santa di Natale — Famiglia Rossi",
+  "placeholder_organizer_name": "Marco Rossi",
+  "placeholder_wish": "Caro Secret Santa,\n\nMi farebbe molto piacere ricevere un buon libro, del cioccolato o qualcosa di fatto a mano. Ultimamente sono appassionato di cucina!\n\nGrazie mille 🎁",
   "expected_participants": "Partecipanti attesi (3-50)",
   "create_button": "Crea l'estrazione",
   "join_draw": "Unisciti al Secret Santa",
   "name_label": "Nome",
-  "wish_label": "Vuoi trasmettere dei desideri o un messaggio al tuo Secret Santa?",
+  "wish_label": "Il tuo messaggio al tuo Secret Santa",
   "wish_title": "Desiderio",
   "submit_button": "Invia",
   "participant_ready": "Il tuo regalo è per",
-  "participant_wait": "Sei dentro! Aspetta che l'organizzatore ti avvisi quando l'estrazione è fatta, poi torna qui.",
+  "participant_wait": "Sei dentro! Tieni aperta questa pagina e torna più tardi quando l'organizzatore ti avvisa.",
+  "result_reminder": "Ricorda o annota questo risultato — non sarà disponibile per sempre.",
   "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",
-  "waiting_draw": "In attesa dei partecipanti...",
+  "waiting_draw": "In attesa dei partecipanti",
   "all_participants_ready": "Tutti si sono uniti",
   "share_link": "Condividi questo link con i partecipanti",
   "copy_link": "Copia il link",
+  "copied": "Copiato! ✅",
   "organizer_name": "Il tuo nome",
-  "organizer_wish": "Vuoi trasmettere dei desideri o un messaggio al tuo Secret Santa? (opzionale)",
+  "organizer_wish": "Il tuo messaggio al tuo Secret Santa (opzionale)",
   "view_on_github": "Vedi su GitHub",
   "send_feedback": "💬 Invia feedback / Segnala un bug"
 }

locales/pt.json

@@ -10,26 +10,31 @@
   "step_4": "Realize o sorteio e descubra para quem você vai dar o presente!",
   "title_create_draw": "Criar Sorteio Secret Santa",
   "draw_name": "Nome do Sorteio",
+  "placeholder_draw_name": "Secret Santa de Natal — Família Silva",
+  "placeholder_organizer_name": "Maria Silva",
+  "placeholder_wish": "Caro Secret Santa,\n\nAdoraria receber um bom livro, chocolates ou algo feito à mão. Também adoro cozinhar ultimamente!\n\nMuito obrigado 🎁",
   "expected_participants": "Participantes esperados (3-50)",
   "create_button": "Criar Sorteio",
   "join_draw": "Participar do Secret Santa",
   "name_label": "Nome",
-  "wish_label": "Você quer transmitir algum desejo ou mensagem para seu Secret Santa?",
+  "wish_label": "Sua mensagem ao seu Secret Santa",
   "wish_title": "Desejo",
   "submit_button": "Enviar",
   "participant_ready": "Seu presente é para",
-  "participant_wait": "Você está dentro! Aguarde o organizador avisar quando o sorteio for feito, depois volte aqui.",
+  "participant_wait": "Está dentro! Mantém esta página aberta e volta mais tarde quando o organizador te avisar.",
+  "result_reminder": "Guarda ou anota este resultado — não estará disponível para sempre.",
   "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",
-  "waiting_draw": "Aguardando participantes...",
+  "waiting_draw": "Aguardando participantes",
   "all_participants_ready": "Todos participaram",
   "share_link": "Compartilhe este link com os participantes",
   "copy_link": "Copiar Link",
+  "copied": "Copiado! ✅",
   "organizer_name": "Seu nome",
-  "organizer_wish": "Você quer transmitir algum desejo ou mensagem para seu Secret Santa? (opcional)",
+  "organizer_wish": "Sua mensagem ao seu Secret Santa (opcional)",
   "view_on_github": "Ver no GitHub",
   "send_feedback": "💬 Enviar feedback / Relatar um bug"
 }

main.go

@@ -581,6 +581,10 @@ func drawHandler(w http.ResponseWriter, r *http.Request) {
 		}
 		canDraw := allSubmitted && !draw.DrawDone && expectedReached
 		canonical := fmt.Sprintf("https://%s%s", r.Host, r.URL.Path)
+		expectedCount := 0
+		if draw.ExpectedParticipants != nil {
+			expectedCount = *draw.ExpectedParticipants
+		}
 		templates.ExecuteTemplate(w, "manage.html", struct {
 			EventID                string
 			EventName              string
@@ -591,12 +595,13 @@ func drawHandler(w http.ResponseWriter, r *http.Request) {
 			OrganizerGiftFor       string
 			OrganizerRecipientWish string
 			Participants           map[string]*Participant
+			ExpectedCount          int
 			CanDraw                bool
 			DrawDone               bool
 			T                      Translations
 			CurrentLang            string
 			Canonical              string
-		}{id, draw.Name, joinLink, organizerLink, organizerToken, organizerName, organizerGiftFor, organizerRecipientWish, draw.Participants, canDraw, draw.DrawDone, t, lang, canonical})
+		}{id, draw.Name, joinLink, organizerLink, organizerToken, organizerName, organizerGiftFor, organizerRecipientWish, draw.Participants, expectedCount, canDraw, draw.DrawDone, t, lang, canonical})
 
 	case "draw":
 		if r.Method != http.MethodPost {

static/style.css

@@ -269,12 +269,37 @@ body::after {
   color: #2c1810;
 }
 
-.event-form input:focus {
+.event-form input:focus,
+.event-form textarea:focus {
   border-color: #c41e3a;
   box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.15);
   outline: none;
 }
 
+.event-form textarea {
+  width: 100%;
+  padding: 11px 14px;
+  margin-top: 6px;
+  border-radius: 10px;
+  border: 1.5px solid #ddd;
+  box-sizing: border-box;
+  font-size: 16px;
+  font-family: 'Lato', sans-serif;
+  background: #fafafa;
+  color: #2c1810;
+  resize: vertical;
+  line-height: 1.5;
+}
+
+.char-count {
+  display: block;
+  text-align: right;
+  font-size: 0.78em;
+  color: #aaa;
+  margin-top: 4px;
+  transition: color 0.2s;
+}
+
 .event-form > button {
   display: block;
   margin: 20px auto 0;
@@ -347,6 +372,14 @@ footer.github-footer a:hover {
 
 
 /* ── Section label ─────────────────────────────────────── */
+.participants-count {
+  font-size: 1em;
+  font-weight: 600;
+  color: #888;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
 .section-label {
   font-size: 0.78em;
   font-weight: 700;
@@ -398,14 +431,36 @@ footer.github-footer a:hover {
   font-size: 0.9em;
   color: #aaa;
   font-weight: 500;
-  margin: 0 0 4px;
+  margin: 0 0 6px;
+}
+
+
+.dots-anim span {
+  animation: dot-wave 1.4s infinite ease-in-out both;
+}
+.dots-anim span:nth-child(2) { animation-delay: 0.2s; }
+.dots-anim span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes dot-wave {
+  0%, 80%, 100% { opacity: 0; }
+  40%           { opacity: 1; }
 }
 
 /* ── Draw result (manage page) ─────────────────────────── */
 .draw-result {
   margin: 0;
 }
 
+/* ── Result reminder ───────────────────────────────────── */
+.result-reminder {
+  font-size: 0.8em;
+  color: #aaa;
+  font-style: italic;
+  margin: 0;
+  border-top: 1px solid #ede8e2;
+  padding-top: 12px;
+}
+
 /* ── Organizer notify ──────────────────────────────────── */
 .organizer-notify {
   padding: 16px 0;

templates/create_event.html

@@ -88,13 +88,14 @@ <h2>{{index .T "how_it_works"}}</h2>
     <h2>{{index .T "title_create_draw"}}</h2>
     <form method="POST" action="/draw/create" class="event-form">
       <label>{{index .T "draw_name"}}:
-        <input type="text" name="eventname" placeholder="Christmas Secret Santa 2025" required>
+        <input type="text" name="eventname" placeholder="{{index .T "placeholder_draw_name"}}" required>
       </label>
       <label>{{index .T "organizer_name"}}:
-        <input type="text" name="organizername" placeholder="John Doe" required>
+        <input type="text" name="organizername" placeholder="{{index .T "placeholder_organizer_name"}}" required>
       </label>
       <label>{{index .T "organizer_wish"}}:
-        <input type="text" name="organizerwish" placeholder="Books, video games, chocolate...">
+        <textarea name="organizerwish" rows="4" maxlength="500" placeholder="{{index .T "placeholder_wish"}}" oninput="updateCount(this)"></textarea>
+        <span class="char-count">500</span>
       </label>
       <label>{{index .T "expected_participants"}}:
         <input type="number" name="expected" min="3" max="50" placeholder="10" required>
@@ -120,5 +121,13 @@ <h2>{{index .T "title_create_draw"}}</h2>
     </a>
   </p>
 </footer>
+<script>
+function updateCount(el) {
+  const remaining = 500 - el.value.length;
+  const counter = el.nextElementSibling;
+  counter.textContent = remaining;
+  counter.style.color = remaining < 50 ? '#c41e3a' : '#aaa';
+}
+</script>
 </body>
 </html>

templates/join.html

@@ -33,10 +33,11 @@
     <h1>{{index .T "join_draw"}}</h1>
     <form method="POST" class="event-form">
       <label>{{index .T "name_label"}}:
-        <input type="text" name="name" placeholder="Jane Smith" required>
+        <input type="text" name="name" placeholder="{{index .T "placeholder_organizer_name"}}" required>
       </label>
       <label>{{index .T "wish_label"}}:
-        <input type="text" name="wish" placeholder="Books, video games, chocolate...">
+        <textarea name="wish" rows="4" maxlength="500" placeholder="{{index .T "placeholder_wish"}}" oninput="updateCount(this)"></textarea>
+        <span class="char-count">500</span>
       </label>
       <button type="submit">{{index .T "submit_button"}}</button>
     </form>
@@ -52,5 +53,13 @@ <h1>{{index .T "join_draw"}}</h1>
   </a></p>
   <p><a href="https://github.com/kpython/secret-santa/issues/new" target="_blank" rel="noopener noreferrer">{{index .T "send_feedback"}}</a></p>
 </footer>
+<script>
+function updateCount(el) {
+  const remaining = 500 - el.value.length;
+  const counter = el.nextElementSibling;
+  counter.textContent = remaining;
+  counter.style.color = remaining < 50 ? '#c41e3a' : '#aaa';
+}
+</script>
 </body>
 </html>