Skip to content

Commit d0d63b2

Browse files
kpythonclaude
kpython
and
claude
committed
Improve wish display: paper note effect, dynamic label, no-message case
- Add SVG feTurbulence filter for crumpled paper background (text stays crisp) - Paper note styled with Dancing Script cursive font, warm cream background - Fix Dancing Script font missing from participant and manage templates - Replace static "Wish" label with dynamic "Message from [Name]" - Show "No message left" when participant didn't write a wish - Add wish_from and no_wish translation keys in all 5 languages - Add animated dots waiting indicator (CSS only, 0→3 loop) - Add participant count X/Y next to Participants label Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent d0cc5f6 commit d0d63b2

8 files changed

Lines changed: 84 additions & 6 deletions

File tree

‎locales/de.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
"name_label": "Name",
2020
"wish_label": "Deine Nachricht an deinen Secret Santa",
2121
"wish_title": "Wunsch",
22+
"wish_from": "Nachricht von",
23+
"no_wish": "Keine Nachricht hinterlassen.",
2224
"submit_button": "Absenden",
2325
"participant_ready": "Dein Geschenk geht an",
2426
"participant_wait": "Du bist dabei! Lass diese Seite offen und komm später zurück, wenn der Organisator dich informiert.",

‎locales/en.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
"name_label": "Name",
2020
"wish_label": "Your message to your Secret Santa",
2121
"wish_title": "Wish",
22+
"wish_from": "Message from",
23+
"no_wish": "No message left.",
2224
"submit_button": "Submit",
2325
"participant_ready": "Your gift is for",
2426
"participant_wait": "You're in! Keep this page open and come back later when the organizer lets you know.",

‎locales/fr.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
"name_label": "Nom",
2020
"wish_label": "Ton message à ton Secret Santa",
2121
"wish_title": "Souhait",
22+
"wish_from": "Message de",
23+
"no_wish": "Aucun message laissé.",
2224
"submit_button": "Envoyer",
2325
"participant_ready": "Votre cadeau est pour",
2426
"participant_wait": "C'est bon ! Garde cette page ouverte et reviens plus tard quand l'organisateur te prévient.",

‎locales/it.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
"name_label": "Nome",
2020
"wish_label": "Il tuo messaggio al tuo Secret Santa",
2121
"wish_title": "Desiderio",
22+
"wish_from": "Messaggio di",
23+
"no_wish": "Nessun messaggio lasciato.",
2224
"submit_button": "Invia",
2325
"participant_ready": "Il tuo regalo è per",
2426
"participant_wait": "Sei dentro! Tieni aperta questa pagina e torna più tardi quando l'organizzatore ti avvisa.",

‎locales/pt.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
"name_label": "Nome",
2020
"wish_label": "Sua mensagem ao seu Secret Santa",
2121
"wish_title": "Desejo",
22+
"wish_from": "Mensagem de",
23+
"no_wish": "Nenhuma mensagem deixada.",
2224
"submit_button": "Enviar",
2325
"participant_ready": "Seu presente é para",
2426
"participant_wait": "Está dentro! Mantém esta página aberta e volta mais tarde quando o organizador te avisar.",

‎static/style.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -451,6 +451,54 @@ footer.github-footer a:hover {
451451
margin: 0;
452452
}
453453

454+
/* ── Paper note (wish display) ─────────────────────────── */
455+
.paper-note {
456+
background: transparent;
457+
padding: 18px 36px 18px 22px;
458+
font-family: 'Dancing Script', cursive;
459+
font-size: 1.2em;
460+
color: #3d2b1f;
461+
line-height: 1.7;
462+
margin: 10px 0 20px;
463+
position: relative;
464+
box-shadow: 0 3px 10px rgba(0,0,0,0.13), 0 6px 20px rgba(0,0,0,0.07);
465+
}
466+
467+
.paper-note::before {
468+
content: '';
469+
position: absolute;
470+
inset: 0;
471+
z-index: -1;
472+
background:
473+
radial-gradient(ellipse at 25% 20%, rgba(210,190,80,0.12) 0%, transparent 55%),
474+
radial-gradient(ellipse at 75% 75%, rgba(190,170,60,0.1) 0%, transparent 45%),
475+
linear-gradient(94deg, transparent 55%, rgba(170,150,50,0.07) 55.5%, transparent 56%),
476+
linear-gradient(177deg, transparent 38%, rgba(170,150,50,0.06) 38.5%, transparent 39%),
477+
#fffde8;
478+
border-radius: 2px 5px 3px 4px / 4px 2px 5px 3px;
479+
filter: url(#paper-crumple);
480+
}
481+
482+
.paper-note::after {
483+
content: '';
484+
position: absolute;
485+
bottom: 0;
486+
right: 0;
487+
width: 0;
488+
height: 0;
489+
border-style: solid;
490+
border-width: 0 0 18px 18px;
491+
border-color: transparent transparent #d4bc50 transparent;
492+
}
493+
494+
/* ── No wish ───────────────────────────────────────────── */
495+
.no-wish {
496+
font-size: 0.9em;
497+
color: #bbb;
498+
font-style: italic;
499+
margin: 6px 0 16px;
500+
}
501+
454502
/* ── Result reminder ───────────────────────────────────── */
455503
.result-reminder {
456504
font-size: 0.8em;

‎templates/manage.html‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,18 @@
88
<link rel="icon" href="/static/santa-hat.png" type="image/png">
99
<link rel="preconnect" href="https://fonts.googleapis.com">
1010
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Lato:wght@400;500;700&display=swap">
11+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Playfair+Display:wght@600;700&family=Lato:wght@400;500;700&display=swap">
1212
<link rel="stylesheet" href="/static/style.css">
1313
</head>
1414
<body>
15+
<svg style="position:absolute;width:0;height:0" xmlns="http://www.w3.org/2000/svg">
16+
<defs>
17+
<filter id="paper-crumple">
18+
<feTurbulence type="fractalNoise" baseFrequency="0.04 0.07" numOctaves="3" seed="5" result="noise"/>
19+
<feDisplacementMap in="SourceGraphic" in2="noise" scale="4" xChannelSelector="R" yChannelSelector="G"/>
20+
</filter>
21+
</defs>
22+
</svg>
1523
<div class="snowflakes" aria-hidden="true">
1624
<div class="snowflake">❄</div>
1725
<div class="snowflake">❅</div>
@@ -48,9 +56,11 @@ <h1>Hello, {{.OrganizerName}}</h1>
4856
<div id="organizer-draw-result" style="display: none;">
4957
<div class="section-label">{{index .T "participant_ready"}}</div>
5058
<p style="font-size: 1.15em; font-weight: 600; color: #1a0a04; margin: 0 0 16px;">{{.OrganizerGiftFor}}</p>
59+
<div class="section-label">{{index .T "wish_from"}} {{.OrganizerGiftFor}}</div>
5160
{{if .OrganizerRecipientWish}}
52-
<div class="section-label">{{index .T "wish_title"}}</div>
53-
<p style="color: #555; margin: 0 0 16px;">{{.OrganizerRecipientWish}}</p>
61+
<p class="paper-note">{{.OrganizerRecipientWish}}</p>
62+
{{else}}
63+
<p class="no-wish">{{index .T "no_wish"}}</p>
5464
{{end}}
5565
<p class="result-reminder">{{index .T "result_reminder"}}</p>
5666
</div>

‎templates/participant.html‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,18 @@
88
<link rel="icon" href="/static/santa-hat.png" type="image/png">
99
<link rel="preconnect" href="https://fonts.googleapis.com">
1010
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Lato:wght@400;500;700&display=swap">
11+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Playfair+Display:wght@600;700&family=Lato:wght@400;500;700&display=swap">
1212
<link rel="stylesheet" href="/static/style.css">
1313
</head>
1414
<body>
15+
<svg style="position:absolute;width:0;height:0" xmlns="http://www.w3.org/2000/svg">
16+
<defs>
17+
<filter id="paper-crumple">
18+
<feTurbulence type="fractalNoise" baseFrequency="0.04 0.07" numOctaves="3" seed="5" result="noise"/>
19+
<feDisplacementMap in="SourceGraphic" in2="noise" scale="4" xChannelSelector="R" yChannelSelector="G"/>
20+
</filter>
21+
</defs>
22+
</svg>
1523
<div class="snowflakes" aria-hidden="true">
1624
<div class="snowflake">❄</div>
1725
<div class="snowflake">❅</div>
@@ -38,9 +46,11 @@ <h1>Hello, {{.Name}}</h1>
3846
<div id="draw-result" style="display: none;">
3947
<div class="section-label">{{index .T "participant_ready"}}</div>
4048
<p style="font-size: 1.15em; font-weight: 600; color: #1a0a04; margin: 0 0 16px;">{{.GiftFor}}</p>
49+
<div class="section-label">{{index .T "wish_from"}} {{.GiftFor}}</div>
4150
{{if .Wish}}
42-
<div class="section-label">{{index .T "wish_title"}}</div>
43-
<p style="color: #555; margin: 0 0 16px;">{{.Wish}}</p>
51+
<p class="paper-note">{{.Wish}}</p>
52+
{{else}}
53+
<p class="no-wish">{{index .T "no_wish"}}</p>
4454
{{end}}
4555
<p class="result-reminder">{{index .T "result_reminder"}}</p>
4656
</div>

0 commit comments

Comments
 (0)