UX improvements: add refresh buttons, footer on all pages, copy link feedback

Author: kpython

locales/de.json

@@ -17,10 +17,12 @@
   "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",
   "manage_draw": "Ziehung verwalten",
   "participants": "Teilnehmer",
   "start_draw": "🎉 Auslosung starten",
-  "waiting_draw": "Warten auf Teilnehmer... (Lade die Seite neu, um neue Teilnehmer zu sehen.)",
+  "waiting_draw": "Warten auf Teilnehmer...",
+  "waiting_draw_button": "🔄 Aktualisieren um neue Teilnehmer zu sehen",
   "all_participants_ready": "🎉 Alle haben sich angemeldet! Sie können jetzt die Auslosung starten.",
   "draw_completed": "🎉 Auslosung abgeschlossen!",
   "draw_completed_message": "Die Teilnehmer können jetzt sehen, wem sie ein Geschenk machen sollen.",
@@ -31,5 +33,6 @@
   "see_my_draw": "🎁 Meine Auslosung sehen",
   "open_source": "Open Source",
   "view_on_github": "Auf GitHub ansehen",
-  "send_feedback": "💬 Feedback geben / Bug melden"
+  "send_feedback": "💬 Feedback geben / Bug melden",
+  "refresh": "Aktualisieren"
 }

locales/en.json

@@ -17,10 +17,12 @@
   "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",
   "manage_draw": "Manage Draw",
   "participants": "Participants",
   "start_draw": "🎉 Start Draw",
-  "waiting_draw": "Waiting for participants... (Reload the page to see new participants.)",
+  "waiting_draw": "Waiting for participants...",
+  "waiting_draw_button": "🔄 Refresh to see new participants",
   "all_participants_ready": "🎉 Everyone has joined! You can now start the draw.",
   "draw_completed": "🎉 Draw Completed!",
   "draw_completed_message": "Participants can now see their assigned gift recipient.",
@@ -31,5 +33,6 @@
   "see_my_draw": "🎁 See My Draw",
   "open_source": "Open Source",
   "view_on_github": "View on GitHub",
-  "send_feedback": "💬 Send feedback / Report a bug"
+  "send_feedback": "💬 Send feedback / Report a bug",
+  "refresh": "Refresh"
 }

locales/fr.json

@@ -17,10 +17,12 @@
   "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",
   "manage_draw": "Gérer le tirage",
   "participants": "Participants",
   "start_draw": "🎉 Lancer le tirage",
-  "waiting_draw": "En attente des participants... (Pensez à recharger la page pour voir les nouveaux participants.)",
+  "waiting_draw": "En attente des participants...",
+  "waiting_draw_button": "🔄 Actualiser pour voir les nouveaux participants",
   "all_participants_ready": "🎉 Tout le monde a rejoint ! Vous pouvez maintenant lancer le tirage.",
   "draw_completed": "🎉 Tirage terminé !",
   "draw_completed_message": "Les participants peuvent maintenant voir à qui ils doivent offrir un cadeau.",
@@ -31,5 +33,6 @@
   "see_my_draw": "🎁 Voir mon tirage",
   "open_source": "Open Source",
   "view_on_github": "Voir sur GitHub",
-  "send_feedback": "💬 Donner un feedback / Signaler un bug"
+  "send_feedback": "💬 Donner un feedback / Signaler un bug",
+  "refresh": "Actualiser"
 }

locales/pt.json

@@ -17,10 +17,12 @@
   "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",
   "manage_draw": "Gerenciar Sorteio",
   "participants": "Participantes",
   "start_draw": "🎉 Iniciar Sorteio",
-  "waiting_draw": "Aguardando participantes... (Recarregue a página para ver novos participantes.)",
+  "waiting_draw": "Aguardando participantes...",
+  "waiting_draw_button": "🔄 Atualizar para ver novos participantes",
   "all_participants_ready": "🎉 Todos participaram! Você pode iniciar o sorteio agora.",
   "draw_completed": "🎉 Sorteio Concluído!",
   "draw_completed_message": "Os participantes agora podem ver para quem devem dar o presente.",
@@ -31,6 +33,7 @@
   "see_my_draw": "🎁 Ver Meu Sorteio",
   "open_source": "Código Aberto",
   "view_on_github": "Ver no GitHub",
-  "send_feedback": "💬 Enviar feedback / Relatar um bug"
+  "send_feedback": "💬 Enviar feedback / Relatar um bug",
+  "refresh": "Atualizar"
 }
 

static/style.css

@@ -4,12 +4,18 @@ body {
   color: #333;
   margin: 0;
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  width: 100%;
 }
 
 .container {
   max-width: 700px;
   margin: 30px auto;
   padding: 0 15px;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .lang-selector {
@@ -103,9 +109,14 @@ button:hover {
 
 footer.github-footer {
   text-align: center;
-  margin-top: 45px;
+  margin-top: auto;
+  padding: 30px 15px;
   font-size: 0.85em;
   color: #555;
+  background-color: transparent;
+  border-top: none;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 footer.github-footer p {
@@ -181,6 +192,34 @@ ul li {
   border-left: 3px solid #4CAF50;
 }
 
+.status-card {
+  background-color: #f0f7ff;
+  padding: 20px;
+  border-radius: 10px;
+  border-left: 4px solid #2196F3;
+  margin: 20px 0;
+}
+
+.button-group {
+  display: flex;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.button-group button,
+.button-group form {
+  flex: 1;
+}
+
+.button-group button {
+  margin: 0;
+}
+
+.button-group form button {
+  width: 100%;
+  margin: 0;
+}
+
 @media (max-width: 768px) {
   .share-link-box {
     flex-direction: column;

templates/create_event.html

@@ -49,23 +49,22 @@ <h2>{{index .T "title_create_draw"}}</h2>
     </form>
   </div>
 
-  <!-- Footer -->
-  <footer class="github-footer">
-    <p>
-      <a href="https://github.com/kpython/secret-santa" target="_blank" rel="noopener noreferrer">
-        <svg height="20" viewBox="0 0 16 16" width="20" style="vertical-align: middle;">
-          <path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
-        </svg>
-        {{index .T "view_on_github"}}
-      </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>
-
 </div>
+
+<footer class="github-footer">
+  <p>
+    <a href="https://github.com/kpython/secret-santa" target="_blank" rel="noopener noreferrer">
+      <svg height="20" viewBox="0 0 16 16" width="20" style="vertical-align: middle;">
+        <path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
+      </svg>
+      {{index .T "view_on_github"}}
+    </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>
 </body>
 </html>

templates/draw_done.html

@@ -23,5 +23,15 @@ <h1>{{index .T "join_draw"}}</h1>
     </form>
   </div>
 </div>
+
+<footer class="github-footer">
+  <p><a href="https://github.com/kpython/secret-santa" target="_blank" rel="noopener noreferrer">
+    <svg height="20" viewBox="0 0 16 16" width="20" style="vertical-align: middle;">
+      <path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
+    </svg>
+    {{index .T "view_on_github"}}
+  </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>
 </body>
 </html>

templates/join.html

@@ -26,7 +26,7 @@ <h2>{{index .T "manage_draw"}}</h2>
   <p><strong>{{index .T "share_link"}}:</strong></p>
   <div class="share-link-box">
     <input type="text" id="joinLink" value="{{.JoinLink}}" readonly>
-    <button onclick="copyLink()">{{index .T "copy_link"}}</button>
+    <button id="copyBtn" onclick="copyLink()" style="min-width: 150px; white-space: nowrap; height: 48px; line-height: 1;">{{index .T "copy_link"}}</button>
   </div>
 </div>
 {{end}}
@@ -37,26 +37,89 @@ <h2>{{index .T "manage_draw"}}</h2>
   <li>{{$p.Name}}</li>
 {{end}}
 </ul>
+
 {{if not .DrawDone}}
-{{if .CanDraw}}
-<p>{{index .T "all_participants_ready"}}</p>
-{{else}}
-<p>{{index .T "waiting_draw"}}</p>
-{{end}}
-<form method="POST" action="/draw/{{.EventID}}/draw{{if .OrganizerToken}}?organizer={{.OrganizerToken}}{{end}}">
-  <button type="submit" {{if not .CanDraw}}disabled{{end}}>{{index .T "start_draw"}}</button>
-</form>
+<div class="status-card">
+  {{if .CanDraw}}
+  <p style="font-size: 1.1em; color: #4CAF50; font-weight: 600;">✅ {{index .T "all_participants_ready"}}</p>
+  <form method="POST" action="/draw/{{.EventID}}/draw{{if .OrganizerToken}}?organizer={{.OrganizerToken}}{{end}}" style="margin-top: 15px;">
+    <button type="submit" style="width: 100%;">{{index .T "start_draw"}}</button>
+  </form>
+  {{else}}
+  <p style="font-size: 1.1em; color: #ff9800; font-weight: 600;">⏳ {{index .T "waiting_draw"}}</p>
+  <button onclick="refreshPage(event)" style="margin-top: 15px; width: 100%;">{{index .T "waiting_draw_button"}}</button>
+  {{end}}
+</div>
 {{end}}
 
 <script>
 function copyLink() {
   const input = document.getElementById('joinLink');
+  const button = event.target;
+  
   input.select();
   document.execCommand('copy');
-  alert('Link copied to clipboard!');
+  
+  // Haptic feedback (vibration)
+  if (navigator.vibrate) {
+    navigator.vibrate(50);
+  }
+  
+  // Store original text and color
+  const originalText = button.textContent;
+  const originalColor = button.style.backgroundColor;
+  
+  // Button animation
+  button.style.transform = 'scale(0.95)';
+  button.style.backgroundColor = '#45a049';
+  button.textContent = 'Copied! ✅';
+  
+  setTimeout(() => {
+    button.style.transform = 'scale(1)';
+    button.style.backgroundColor = originalColor;
+  }, 200);
+  
+  // Restore original text after 2 seconds
+  setTimeout(() => {
+    button.textContent = originalText;
+  }, 2000);
+}
+
+function refreshPage(event) {
+  const button = event.target;
+  
+  // Haptic feedback (vibration)
+  if (navigator.vibrate) {
+    navigator.vibrate(50);
+  }
+  
+  // Button animation
+  button.style.transform = 'scale(0.95)';
+  const originalColor = button.style.backgroundColor;
+  button.style.backgroundColor = '#45a049';
+  
+  setTimeout(() => {
+    button.style.transform = 'scale(1)';
+    button.style.backgroundColor = originalColor;
+  }, 200);
+  
+  // Reload after animation
+  setTimeout(() => {
+    location.reload();
+  }, 300);
 }
 </script>
-  </div>
+
 </div>
+
+<footer class="github-footer">
+  <p><a href="https://github.com/kpython/secret-santa" target="_blank" rel="noopener noreferrer">
+    <svg height="20" viewBox="0 0 16 16" width="20" style="vertical-align: middle;">
+      <path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
+    </svg>
+    {{index .T "view_on_github"}}
+  </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>
 </body>
 </html>