Hugging Face's logo

Spaces:
MatteoScript
/
TableauDuMariage
Running

App Files Community
MatteoScript commited on
Commit
0344fde
·
verified ·
1 Parent(s): c8ecae0

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +184 -361
index.html CHANGED
@@ -1,4 +1,5 @@
1
  <!doctype html>
 
2
  <html lang="it">
3
  <head>
4
  <meta charset="utf-8" />
@@ -85,7 +86,7 @@
85
 
86
  body.reveal-open { overflow: hidden; }
87
 
88
- /* ---------- decorative frame + corners ---------- */
89
  .frame {
90
  position: fixed;
91
  inset: 18px;
@@ -95,21 +96,6 @@
95
  z-index: 1;
96
  }
97
 
98
- .corner {
99
- position: fixed;
100
- width: 64px;
101
- height: 64px;
102
- color: var(--olive);
103
- opacity: .55;
104
- pointer-events: none;
105
- z-index: 2;
106
- }
107
- .corner svg { width: 100%; height: 100%; display: block; overflow: visible; }
108
- .corner-tl { top: 26px; left: 26px; }
109
- .corner-tr { top: 26px; right: 26px; transform: scaleX(-1); }
110
- .corner-bl { bottom: 26px; left: 26px; transform: scaleY(-1); }
111
- .corner-br { bottom: 26px; right: 26px; transform: scale(-1, -1); }
112
-
113
  /* ---------- screen layout ---------- */
114
  .screen {
115
  position: relative;
@@ -126,10 +112,10 @@
126
  position: relative;
127
  width: min(100%, 500px);
128
  height: 100dvh;
129
- padding: max(20px, env(safe-area-inset-top)) 30px max(20px, env(safe-area-inset-bottom));
130
  display: grid;
131
- grid-template-rows: auto minmax(0, 1fr) auto;
132
- gap: 6px;
133
  overflow: hidden;
134
  }
135
 
@@ -138,14 +124,6 @@
138
  from { opacity: 0; transform: translateY(14px); }
139
  to { opacity: 1; transform: translateY(0); }
140
  }
141
- @keyframes fadeIn {
142
- from { opacity: 0; }
143
- to { opacity: 1; }
144
- }
145
- @keyframes float {
146
- 0%, 100% { transform: translateY(0); }
147
- 50% { transform: translateY(-6px); }
148
- }
149
 
150
  .anim { opacity: 0; animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
151
  .anim-1 { animation-delay: .05s; }
@@ -157,40 +135,20 @@
157
  /* ---------- top mark ---------- */
158
  .top-mark {
159
  display: flex;
160
- flex-direction: column;
161
  align-items: center;
162
  justify-content: center;
163
- padding: 6px 0 0;
164
- gap: 8px;
165
  }
166
 
167
  .logo {
168
- width: 76px;
169
- height: 76px;
170
  display: block;
171
  object-fit: contain;
172
  background: transparent;
173
  }
174
 
175
- .top-eyebrow {
176
- display: flex;
177
- align-items: center;
178
- gap: 10px;
179
- color: var(--ink-faint);
180
- font-size: 9.5px;
181
- font-weight: 700;
182
- letter-spacing: .38em;
183
- text-transform: uppercase;
184
- }
185
- .top-eyebrow::before,
186
- .top-eyebrow::after {
187
- content: "";
188
- width: 22px;
189
- height: 1px;
190
- background: var(--hair);
191
- }
192
-
193
- /* ---------- hero ---------- */
194
  .hero {
195
  min-height: 0;
196
  display: flex;
@@ -198,17 +156,19 @@
198
  align-items: center;
199
  justify-content: center;
200
  text-align: center;
201
- padding: 0 0 4px;
 
202
  }
203
 
204
  .hero-tag {
205
- margin: 0 0 8px;
206
  color: var(--coral-deep);
207
  font-family: var(--font-serif);
208
  font-style: italic;
209
- font-size: 16px;
210
  font-weight: 400;
211
- letter-spacing: .02em;
 
212
  }
213
 
214
  .script-title {
@@ -226,82 +186,50 @@
226
  .script-title span:first-child { transform: translateX(-.04em); }
227
  .script-title span:last-child { transform: translateX(.05em); margin-top: -.02em; }
228
 
229
- /* ---------- coastline illustration ---------- */
230
- .coast {
231
- width: min(78vw, 320px);
232
- height: 158px;
233
- margin: clamp(14px, 3dvh, 26px) auto 0;
234
- animation: float 7s ease-in-out infinite;
235
  }
236
- .coast svg { width: 100%; height: 100%; display: block; overflow: visible; }
237
 
238
- .sea-wave {
239
- fill: none;
240
- stroke: var(--blue-soft);
241
- stroke-width: 1.1;
242
- stroke-linecap: round;
243
- opacity: .42;
244
- vector-effect: non-scaling-stroke;
245
- }
246
- .sea-wave-soft {
247
- fill: none;
248
- stroke: var(--sage);
249
- stroke-width: 1;
250
- stroke-linecap: round;
251
- opacity: .55;
252
- vector-effect: non-scaling-stroke;
253
- }
254
- .sun {
255
- fill: none;
256
- stroke: var(--coral);
257
- stroke-width: 1.4;
258
- opacity: .72;
259
- vector-effect: non-scaling-stroke;
260
- }
261
- .island-shape {
262
- fill: rgba(147, 150, 117, .10);
263
- stroke: var(--olive-deep);
264
- stroke-width: 1.6;
265
- stroke-linecap: round;
266
- stroke-linejoin: round;
267
- vector-effect: non-scaling-stroke;
268
- }
269
- .cypress {
270
- fill: var(--olive-deep);
271
- opacity: .82;
272
- }
273
- .cala-dot {
274
- fill: var(--coral);
275
- }
276
- .cala-ring {
277
- fill: none;
278
- stroke: var(--coral);
279
- stroke-width: 1.2;
280
- opacity: .35;
281
- vector-effect: non-scaling-stroke;
282
  }
 
 
 
283
 
284
- /* ---------- form ---------- */
285
- .form-area {
286
- padding-bottom: clamp(2px, 1.6dvh, 14px);
 
287
  }
288
 
289
  .field-label {
290
  display: flex;
291
  align-items: center;
292
  justify-content: center;
293
- gap: 10px;
294
- margin: 0 0 12px;
295
  color: var(--ink-soft);
296
- font-size: 10.5px;
297
- font-weight: 700;
298
- letter-spacing: .26em;
299
  text-transform: uppercase;
300
  }
301
  .field-label::before,
302
  .field-label::after {
303
  content: "";
304
- flex: 0 0 18px;
305
  height: 1px;
306
  background: var(--hair);
307
  }
@@ -310,114 +238,68 @@
310
  position: relative;
311
  }
312
 
313
- .input-wrap::before {
314
- content: "";
315
- position: absolute;
316
- left: 22px;
317
- top: 50%;
318
- width: 14px;
319
- height: 14px;
320
- transform: translateY(-50%);
321
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23254B6B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' opacity='0.42'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>");
322
- background-repeat: no-repeat;
323
- background-position: center;
324
- background-size: contain;
325
- pointer-events: none;
326
- }
327
-
328
  input {
329
  width: 100%;
330
- height: 60px;
331
  border: 1px solid rgba(147, 150, 117, .32);
332
  outline: 0;
333
  border-radius: 999px;
334
- padding: 0 22px 0 46px;
335
  color: var(--blue);
336
- background: rgba(255, 253, 248, .92);
337
  font-family: var(--font-main);
338
- font-size: 15.5px;
339
- font-weight: 600;
340
  letter-spacing: .005em;
341
- box-shadow: 0 8px 22px rgba(37, 75, 107, .06), inset 0 1px 0 rgba(255, 255, 255, .5);
 
342
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
343
  }
344
 
345
- input::placeholder { color: var(--ink-faint); font-weight: 500; font-style: italic; }
346
 
347
  input:focus {
348
- border-color: rgba(208, 138, 122, .65);
349
  background: var(--paper);
350
  box-shadow:
351
- 0 0 0 5px rgba(237, 211, 205, .32),
352
- 0 12px 28px rgba(37, 75, 107, .08),
353
  inset 0 1px 0 rgba(255, 255, 255, .6);
354
  }
355
 
356
  .discover {
357
  position: relative;
358
  width: 100%;
359
- height: 60px;
360
- margin-top: 12px;
361
  border: 0;
362
  border-radius: 999px;
363
  cursor: pointer;
364
  overflow: hidden;
365
  color: var(--paper);
366
- background: linear-gradient(180deg, #2a557a 0%, #1f405b 100%);
367
  font-family: var(--font-main);
368
- font-size: 13.5px;
369
- font-weight: 700;
370
- letter-spacing: .22em;
371
  text-transform: uppercase;
372
- box-shadow:
373
- 0 14px 30px rgba(37, 75, 107, .22),
374
- inset 0 1px 0 rgba(255, 255, 255, .12);
375
- transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
376
- }
377
-
378
- .discover-inner {
379
- display: inline-flex;
380
- align-items: center;
381
- gap: 14px;
382
- }
383
- .discover-inner::before,
384
- .discover-inner::after {
385
- content: "";
386
- width: 16px;
387
- height: 1px;
388
- background: rgba(237, 211, 205, .55);
389
- }
390
-
391
- .discover::after {
392
- content: "";
393
- position: absolute;
394
- left: 50%;
395
- bottom: 8px;
396
- width: 6px;
397
- height: 6px;
398
- border-radius: 999px;
399
- background: var(--coral);
400
- transform: translateX(-50%);
401
- box-shadow: 0 0 0 3px rgba(208, 138, 122, .22);
402
  }
403
 
404
  .discover:hover {
405
  transform: translateY(-1px);
406
- filter: brightness(1.04);
407
- box-shadow:
408
- 0 18px 36px rgba(37, 75, 107, .26),
409
- inset 0 1px 0 rgba(255, 255, 255, .14);
410
  }
411
  .discover:active {
412
- transform: translateY(2px);
413
- box-shadow:
414
- 0 8px 18px rgba(37, 75, 107, .14),
415
- inset 0 1px 0 rgba(255, 255, 255, .10);
416
  }
417
 
418
  .message {
419
  min-height: 0;
420
- margin-top: 12px;
421
  opacity: 0;
422
  transform: translateY(8px);
423
  transition: opacity .26s ease, transform .26s ease;
@@ -425,29 +307,16 @@
425
  .message.show { opacity: 1; transform: translateY(0); }
426
 
427
  .message-card {
428
- position: relative;
429
- border-radius: 16px;
430
- padding: 14px 16px;
431
  color: var(--ink);
432
- background: rgba(255, 253, 248, .92);
433
  border: 1px solid var(--hair);
434
  text-align: center;
435
  font-size: 12.5px;
436
  line-height: 1.42;
437
  font-weight: 500;
438
  letter-spacing: .005em;
439
- box-shadow: 0 10px 24px rgba(37, 75, 107, .05);
440
- }
441
- .message-card::before {
442
- content: "";
443
- position: absolute;
444
- top: -1px;
445
- left: 50%;
446
- width: 36px;
447
- height: 2px;
448
- background: var(--coral);
449
- border-radius: 999px;
450
- transform: translateX(-50%);
451
  }
452
 
453
  /* ---------- reveal screen ---------- */
@@ -701,211 +570,164 @@
701
 
702
  /* ---------- responsive tightening ---------- */
703
  @media (max-height: 720px) {
704
- .logo { width: 64px; height: 64px; }
705
- .coast { height: 134px; margin-top: 10px; }
706
  .script-title { font-size: clamp(54px, 14vw, 84px); }
 
 
707
  }
708
 
709
  @media (max-width: 380px) {
710
  .frame, .reveal-frame { inset: 12px; border-radius: 24px; }
711
- .corner { width: 52px; height: 52px; }
712
- .corner-tl, .corner-tr { top: 20px; }
713
- .corner-bl, .corner-br { bottom: 20px; }
714
- .corner-tl, .corner-bl { left: 20px; }
715
- .corner-tr, .corner-br { right: 20px; }
716
  .page { padding-left: 22px; padding-right: 22px; }
717
- .logo { width: 64px; height: 64px; }
718
  .script-title { font-size: clamp(50px, 14vw, 76px); }
719
- .coast { width: min(72vw, 270px); height: 130px; }
720
- input, .discover { height: 56px; }
 
721
  .table-name { font-size: clamp(64px, 21vw, 108px); }
722
  .table-name[data-long="true"] { font-size: clamp(48px, 16vw, 88px); }
723
  }
724
 
725
  @media (prefers-reduced-motion: reduce) {
726
  .anim, .reveal.show .reveal-step { animation: none; opacity: 1; transform: none; }
727
- .coast { animation: none; }
728
  }
729
  </style>
 
730
  </head>
731
  <body>
732
  <canvas id="confetti"></canvas>
733
 
734
- <!-- decorative frame & corner ornaments -->
735
- <div class="frame" aria-hidden="true"></div>
736
 
737
- <div class="corner corner-tl" aria-hidden="true">
738
- <svg viewBox="0 0 80 80">
739
- <path d="M8 8 L8 30 M8 8 L30 8" fill="none" stroke="currentColor" stroke-width="1" opacity=".55" stroke-linecap="round"/>
740
- <path d="M14 14 C 22 16, 30 22, 36 32" fill="none" stroke="currentColor" stroke-width="1.1" opacity=".7" stroke-linecap="round"/>
741
- <ellipse cx="20" cy="18" rx="3" ry="1.4" fill="currentColor" opacity=".75" transform="rotate(35 20 18)"/>
742
- <ellipse cx="26" cy="22" rx="3.4" ry="1.5" fill="currentColor" opacity=".6" transform="rotate(45 26 22)"/>
743
- <ellipse cx="31" cy="28" rx="3" ry="1.4" fill="currentColor" opacity=".75" transform="rotate(55 31 28)"/>
744
- <ellipse cx="34" cy="33" rx="2.4" ry="1.2" fill="currentColor" opacity=".55" transform="rotate(60 34 33)"/>
745
- </svg>
746
- </div>
747
- <div class="corner corner-tr" aria-hidden="true">
748
- <svg viewBox="0 0 80 80">
749
- <path d="M8 8 L8 30 M8 8 L30 8" fill="none" stroke="currentColor" stroke-width="1" opacity=".55" stroke-linecap="round"/>
750
- <path d="M14 14 C 22 16, 30 22, 36 32" fill="none" stroke="currentColor" stroke-width="1.1" opacity=".7" stroke-linecap="round"/>
751
- <ellipse cx="20" cy="18" rx="3" ry="1.4" fill="currentColor" opacity=".75" transform="rotate(35 20 18)"/>
752
- <ellipse cx="26" cy="22" rx="3.4" ry="1.5" fill="currentColor" opacity=".6" transform="rotate(45 26 22)"/>
753
- <ellipse cx="31" cy="28" rx="3" ry="1.4" fill="currentColor" opacity=".75" transform="rotate(55 31 28)"/>
754
- <ellipse cx="34" cy="33" rx="2.4" ry="1.2" fill="currentColor" opacity=".55" transform="rotate(60 34 33)"/>
755
- </svg>
756
- </div>
757
- <div class="corner corner-bl" aria-hidden="true">
758
- <svg viewBox="0 0 80 80">
759
- <path d="M8 8 L8 30 M8 8 L30 8" fill="none" stroke="currentColor" stroke-width="1" opacity=".55" stroke-linecap="round"/>
760
- <path d="M14 14 C 22 16, 30 22, 36 32" fill="none" stroke="currentColor" stroke-width="1.1" opacity=".7" stroke-linecap="round"/>
761
- <ellipse cx="20" cy="18" rx="3" ry="1.4" fill="currentColor" opacity=".75" transform="rotate(35 20 18)"/>
762
- <ellipse cx="26" cy="22" rx="3.4" ry="1.5" fill="currentColor" opacity=".6" transform="rotate(45 26 22)"/>
763
- <ellipse cx="31" cy="28" rx="3" ry="1.4" fill="currentColor" opacity=".75" transform="rotate(55 31 28)"/>
764
- <ellipse cx="34" cy="33" rx="2.4" ry="1.2" fill="currentColor" opacity=".55" transform="rotate(60 34 33)"/>
765
- </svg>
766
- </div>
767
- <div class="corner corner-br" aria-hidden="true">
768
- <svg viewBox="0 0 80 80">
769
- <path d="M8 8 L8 30 M8 8 L30 8" fill="none" stroke="currentColor" stroke-width="1" opacity=".55" stroke-linecap="round"/>
770
- <path d="M14 14 C 22 16, 30 22, 36 32" fill="none" stroke="currentColor" stroke-width="1.1" opacity=".7" stroke-linecap="round"/>
771
- <ellipse cx="20" cy="18" rx="3" ry="1.4" fill="currentColor" opacity=".75" transform="rotate(35 20 18)"/>
772
- <ellipse cx="26" cy="22" rx="3.4" ry="1.5" fill="currentColor" opacity=".6" transform="rotate(45 26 22)"/>
773
- <ellipse cx="31" cy="28" rx="3" ry="1.4" fill="currentColor" opacity=".75" transform="rotate(55 31 28)"/>
774
- <ellipse cx="34" cy="33" rx="2.4" ry="1.2" fill="currentColor" opacity=".55" transform="rotate(60 34 33)"/>
775
- </svg>
776
- </div>
777
 
778
  <main class="screen">
779
  <div class="page">
780
  <div class="top-mark anim anim-1">
781
  <img class="logo" src="logo.png" alt="Logo matrimonio" />
782
- <div class="top-eyebrow">Mise en place</div>
783
  </div>
784
 
785
- <section class="hero" aria-label="Trova la tua cala">
786
- <p class="hero-tag anim anim-2">a tavola, in riva al mare</p>
787
- <h1 class="script-title anim anim-3">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
788
  <span>Trova la</span>
789
  <span>tua Cala</span>
790
  </h1>
791
 
792
- <div class="coast anim anim-4" aria-hidden="true">
793
- <svg viewBox="0 0 420 220" role="img">
794
- <!-- soft sea waves behind -->
795
- <path class="sea-wave-soft" d="M30 168 Q 80 162 130 168 T 230 168 T 330 168 T 410 168" />
796
- <path class="sea-wave-soft" d="M30 184 Q 80 178 130 184 T 230 184 T 330 184 T 410 184" />
797
- <path class="sea-wave" d="M30 200 Q 80 194 130 200 T 230 200 T 330 200 T 410 200" />
798
-
799
- <!-- sun -->
800
- <circle class="sun" cx="338" cy="56" r="22" />
801
-
802
- <!-- island -->
803
- <path class="island-shape" d="M62 152
804
- C 78 130, 102 116, 134 116
805
- C 158 116, 178 124, 196 116
806
- C 218 106, 238 110, 256 122
807
- C 278 110, 304 114, 322 130
808
- C 340 144, 348 156, 354 162
809
- L 62 162 Z" />
810
-
811
- <!-- cypresses on island -->
812
- <path class="cypress" d="M148 116 q 1.6 -16 0 -28 q -1.6 12 0 28 z" />
813
- <path class="cypress" d="M210 110 q 1.4 -14 0 -24 q -1.4 10 0 24 z" />
814
- <path class="cypress" d="M278 116 q 1.5 -15 0 -26 q -1.5 11 0 26 z" />
815
-
816
- <!-- cala dots with rings -->
817
- <circle class="cala-ring" cx="96" cy="146" r="6" />
818
- <circle class="cala-dot" cx="96" cy="146" r="2.6" />
819
-
820
- <circle class="cala-ring" cx="178" cy="138" r="6" />
821
- <circle class="cala-dot" cx="178" cy="138" r="2.6" />
822
-
823
- <circle class="cala-ring" cx="244" cy="142" r="6" />
824
- <circle class="cala-dot" cx="244" cy="142" r="2.6" />
825
-
826
- <circle class="cala-ring" cx="316" cy="146" r="6" />
827
- <circle class="cala-dot" cx="316" cy="146" r="2.6" />
828
-
829
- <!-- sailboat -->
830
- <g opacity=".75">
831
- <path d="M70 188 L 88 188 L 84 194 L 74 194 Z" fill="#6F7257"/>
832
- <path d="M79 188 L 79 172 L 90 188 Z" fill="#6F7257"/>
833
- </g>
834
  </svg>
835
  </div>
836
- </section>
 
837
 
838
- <section class="form-area anim anim-5" aria-label="Ricerca invitato">
839
- <label class="field-label" for="guestName">Nome &amp; Cognome</label>
840
- <div class="input-wrap">
841
- <input id="guestName" autocomplete="name" inputmode="text" placeholder="Es. Gaia Pollastrini" />
842
- </div>
843
- <button class="discover" id="discover" type="button">
844
- <span class="discover-inner">Scopri il tavolo</span>
845
- </button>
846
- <div id="message" class="message" aria-live="polite"></div>
847
- <div id="status" class="status" aria-live="polite"></div>
848
- </section>
849
  </div>
 
 
 
 
850
  </main>
851
 
852
  <!-- ===================== REVEAL ===================== -->
 
853
  <section id="reveal" class="reveal" aria-live="assertive" aria-hidden="true">
854
  <div class="reveal-frame" aria-hidden="true"></div>
855
 
856
- <div class="reveal-page">
857
- <p class="hello reveal-step step-1" id="hello"></p>
858
- <div class="hello-divider reveal-step step-2" aria-hidden="true"></div>
859
-
860
- <p class="table-kicker reveal-step step-3"><span>Il tuo tavolo è</span></p>
861
-
862
- <div class="table-name-wrap reveal-step step-4">
863
- <!-- left olive branch -->
864
- <div class="branch branch-l" aria-hidden="true">
865
- <svg viewBox="0 0 60 120">
866
- <path class="branch-stem" d="M50 6 C 32 36, 22 70, 30 116" />
867
- <ellipse class="branch-leaf" cx="44" cy="20" rx="6" ry="2.4" transform="rotate(-25 44 20)"/>
868
- <ellipse class="branch-leaf-soft" cx="36" cy="32" rx="6.5" ry="2.6" transform="rotate(-30 36 32)"/>
869
- <ellipse class="branch-leaf" cx="32" cy="46" rx="7" ry="2.7" transform="rotate(-38 32 46)"/>
870
- <ellipse class="branch-leaf-soft" cx="28" cy="60" rx="7" ry="2.7" transform="rotate(-46 28 60)"/>
871
- <ellipse class="branch-leaf" cx="26" cy="74" rx="7" ry="2.7" transform="rotate(-54 26 74)"/>
872
- <ellipse class="branch-leaf-soft" cx="26" cy="88" rx="6.5" ry="2.6" transform="rotate(-62 26 88)"/>
873
- <ellipse class="branch-leaf" cx="28" cy="102" rx="5.6" ry="2.3" transform="rotate(-70 28 102)"/>
874
- <!-- tiny olives -->
875
- <circle cx="40" cy="26" r="1.6" fill="var(--olive-deep)" opacity=".75"/>
876
- <circle cx="30" cy="54" r="1.6" fill="var(--olive-deep)" opacity=".75"/>
877
- <circle cx="27" cy="82" r="1.6" fill="var(--olive-deep)" opacity=".75"/>
878
- </svg>
879
- </div>
 
880
 
881
- <h2 class="table-name" id="tableName"></h2>
882
-
883
- <!-- right olive branch (mirrored via CSS) -->
884
- <div class="branch branch-r" aria-hidden="true">
885
- <svg viewBox="0 0 60 120">
886
- <path class="branch-stem" d="M50 6 C 32 36, 22 70, 30 116" />
887
- <ellipse class="branch-leaf" cx="44" cy="20" rx="6" ry="2.4" transform="rotate(-25 44 20)"/>
888
- <ellipse class="branch-leaf-soft" cx="36" cy="32" rx="6.5" ry="2.6" transform="rotate(-30 36 32)"/>
889
- <ellipse class="branch-leaf" cx="32" cy="46" rx="7" ry="2.7" transform="rotate(-38 32 46)"/>
890
- <ellipse class="branch-leaf-soft" cx="28" cy="60" rx="7" ry="2.7" transform="rotate(-46 28 60)"/>
891
- <ellipse class="branch-leaf" cx="26" cy="74" rx="7" ry="2.7" transform="rotate(-54 26 74)"/>
892
- <ellipse class="branch-leaf-soft" cx="26" cy="88" rx="6.5" ry="2.6" transform="rotate(-62 26 88)"/>
893
- <ellipse class="branch-leaf" cx="28" cy="102" rx="5.6" ry="2.3" transform="rotate(-70 28 102)"/>
894
- <circle cx="40" cy="26" r="1.6" fill="var(--olive-deep)" opacity=".75"/>
895
- <circle cx="30" cy="54" r="1.6" fill="var(--olive-deep)" opacity=".75"/>
896
- <circle cx="27" cy="82" r="1.6" fill="var(--olive-deep)" opacity=".75"/>
897
- </svg>
898
- </div>
899
- </div>
900
 
901
- <div class="reveal-divider reveal-step step-5" aria-hidden="true">
902
- <span class="dot"></span>
903
- </div>
904
 
905
- <p class="reveal-note reveal-step step-5">In che cala cenerai? <br/>L'hai appena scoperto.</p>
 
 
 
 
906
 
907
- <button class="again reveal-step step-6" id="again" type="button">Cerca un altro nome</button>
908
- </div>
909
  </section>
910
 
911
  <script>
@@ -1170,5 +992,6 @@
1170
  window.addEventListener("resize", resizeCanvas);
1171
  loadGuests();
1172
  </script>
 
1173
  </body>
1174
  </html>
 
1
  <!doctype html>
2
+
3
  <html lang="it">
4
  <head>
5
  <meta charset="utf-8" />
 
86
 
87
  body.reveal-open { overflow: hidden; }
88
 
89
+ /* ---------- decorative frame ---------- */
90
  .frame {
91
  position: fixed;
92
  inset: 18px;
 
96
  z-index: 1;
97
  }
98
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
99
  /* ---------- screen layout ---------- */
100
  .screen {
101
  position: relative;
 
112
  position: relative;
113
  width: min(100%, 500px);
114
  height: 100dvh;
115
+ padding: max(24px, env(safe-area-inset-top)) 30px max(24px, env(safe-area-inset-bottom));
116
  display: grid;
117
+ grid-template-rows: auto 1fr;
118
+ gap: 0;
119
  overflow: hidden;
120
  }
121
 
 
124
  from { opacity: 0; transform: translateY(14px); }
125
  to { opacity: 1; transform: translateY(0); }
126
  }
 
 
 
 
 
 
 
 
127
 
128
  .anim { opacity: 0; animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
129
  .anim-1 { animation-delay: .05s; }
 
135
  /* ---------- top mark ---------- */
136
  .top-mark {
137
  display: flex;
 
138
  align-items: center;
139
  justify-content: center;
140
+ padding: 4px 0 0;
 
141
  }
142
 
143
  .logo {
144
+ width: 72px;
145
+ height: 72px;
146
  display: block;
147
  object-fit: contain;
148
  background: transparent;
149
  }
150
 
151
+ /* ---------- hero (unified centered block: tag + title + form) ---------- */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
152
  .hero {
153
  min-height: 0;
154
  display: flex;
 
156
  align-items: center;
157
  justify-content: center;
158
  text-align: center;
159
+ gap: clamp(48px, 8dvh, 80px);
160
+ padding: 0 0 clamp(8px, 2dvh, 18px);
161
  }
162
 
163
  .hero-tag {
164
+ margin: 0 0 clamp(26px, 5dvh, 40px);
165
  color: var(--coral-deep);
166
  font-family: var(--font-serif);
167
  font-style: italic;
168
+ font-size: 15px;
169
  font-weight: 400;
170
+ letter-spacing: .04em;
171
+ opacity: .88;
172
  }
173
 
174
  .script-title {
 
186
  .script-title span:first-child { transform: translateX(-.04em); }
187
  .script-title span:last-child { transform: translateX(.05em); margin-top: -.02em; }
188
 
189
+ /* ---------- title with olive branches (mirrors reveal) ---------- */
190
+ .title-frame {
191
+ position: relative;
192
+ display: inline-block;
193
+ margin: 0 auto;
194
+ padding: 0 clamp(34px, 9vw, 58px);
195
  }
 
196
 
197
+ .title-branch {
198
+ position: absolute;
199
+ top: 50%;
200
+ width: clamp(34px, 8.5vw, 50px);
201
+ height: clamp(120px, 28vw, 156px);
202
+ transform: translateY(-50%);
203
+ color: var(--olive);
204
+ opacity: .62;
205
+ pointer-events: none;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
206
  }
207
+ .title-branch svg { width: 100%; height: 100%; display: block; overflow: visible; }
208
+ .title-branch-l { left: -10px; }
209
+ .title-branch-r { right: -10px; transform: translateY(-50%) scaleX(-1); }
210
 
211
+ /* ---------- form block (lives inside the centered hero) ---------- */
212
+ .form-block {
213
+ width: 100%;
214
+ max-width: 380px;
215
  }
216
 
217
  .field-label {
218
  display: flex;
219
  align-items: center;
220
  justify-content: center;
221
+ gap: 14px;
222
+ margin: 0 0 16px;
223
  color: var(--ink-soft);
224
+ font-size: 10px;
225
+ font-weight: 600;
226
+ letter-spacing: .34em;
227
  text-transform: uppercase;
228
  }
229
  .field-label::before,
230
  .field-label::after {
231
  content: "";
232
+ flex: 0 0 24px;
233
  height: 1px;
234
  background: var(--hair);
235
  }
 
238
  position: relative;
239
  }
240
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
241
  input {
242
  width: 100%;
243
+ height: 56px;
244
  border: 1px solid rgba(147, 150, 117, .32);
245
  outline: 0;
246
  border-radius: 999px;
247
+ padding: 0 24px;
248
  color: var(--blue);
249
+ background: rgba(255, 253, 248, .78);
250
  font-family: var(--font-main);
251
+ font-size: 15px;
252
+ font-weight: 500;
253
  letter-spacing: .005em;
254
+ text-align: center;
255
+ box-shadow: 0 4px 14px rgba(37, 75, 107, .04), inset 0 1px 0 rgba(255, 255, 255, .5);
256
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
257
  }
258
 
259
+ input::placeholder { color: var(--ink-faint); font-weight: 400; font-style: italic; }
260
 
261
  input:focus {
262
+ border-color: rgba(147, 150, 117, .55);
263
  background: var(--paper);
264
  box-shadow:
265
+ 0 0 0 4px rgba(194, 197, 178, .22),
266
+ 0 8px 22px rgba(37, 75, 107, .06),
267
  inset 0 1px 0 rgba(255, 255, 255, .6);
268
  }
269
 
270
  .discover {
271
  position: relative;
272
  width: 100%;
273
+ height: 56px;
274
+ margin-top: 14px;
275
  border: 0;
276
  border-radius: 999px;
277
  cursor: pointer;
278
  overflow: hidden;
279
  color: var(--paper);
280
+ background: var(--blue);
281
  font-family: var(--font-main);
282
+ font-size: 11.5px;
283
+ font-weight: 600;
284
+ letter-spacing: .32em;
285
  text-transform: uppercase;
286
+ box-shadow: 0 6px 18px rgba(37, 75, 107, .14);
287
+ transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
288
  }
289
 
290
  .discover:hover {
291
  transform: translateY(-1px);
292
+ background: var(--blue-deep);
293
+ box-shadow: 0 10px 24px rgba(37, 75, 107, .18);
 
 
294
  }
295
  .discover:active {
296
+ transform: translateY(1px);
297
+ box-shadow: 0 4px 12px rgba(37, 75, 107, .12);
 
 
298
  }
299
 
300
  .message {
301
  min-height: 0;
302
+ margin-top: 14px;
303
  opacity: 0;
304
  transform: translateY(8px);
305
  transition: opacity .26s ease, transform .26s ease;
 
307
  .message.show { opacity: 1; transform: translateY(0); }
308
 
309
  .message-card {
310
+ border-radius: 14px;
311
+ padding: 12px 14px;
 
312
  color: var(--ink);
313
+ background: rgba(255, 253, 248, .85);
314
  border: 1px solid var(--hair);
315
  text-align: center;
316
  font-size: 12.5px;
317
  line-height: 1.42;
318
  font-weight: 500;
319
  letter-spacing: .005em;
 
 
 
 
 
 
 
 
 
 
 
 
320
  }
321
 
322
  /* ---------- reveal screen ---------- */
 
570
 
571
  /* ---------- responsive tightening ---------- */
572
  @media (max-height: 720px) {
573
+ .logo { width: 60px; height: 60px; }
 
574
  .script-title { font-size: clamp(54px, 14vw, 84px); }
575
+ .title-branch { height: clamp(108px, 26vw, 140px); }
576
+ .hero { gap: clamp(24px, 4dvh, 38px); }
577
  }
578
 
579
  @media (max-width: 380px) {
580
  .frame, .reveal-frame { inset: 12px; border-radius: 24px; }
 
 
 
 
 
581
  .page { padding-left: 22px; padding-right: 22px; }
582
+ .logo { width: 60px; height: 60px; }
583
  .script-title { font-size: clamp(50px, 14vw, 76px); }
584
+ .title-frame { padding: 0 clamp(28px, 7vw, 44px); }
585
+ .title-branch { width: clamp(28px, 7vw, 40px); height: clamp(100px, 24vw, 124px); }
586
+ input, .discover { height: 54px; }
587
  .table-name { font-size: clamp(64px, 21vw, 108px); }
588
  .table-name[data-long="true"] { font-size: clamp(48px, 16vw, 88px); }
589
  }
590
 
591
  @media (prefers-reduced-motion: reduce) {
592
  .anim, .reveal.show .reveal-step { animation: none; opacity: 1; transform: none; }
 
593
  }
594
  </style>
595
+
596
  </head>
597
  <body>
598
  <canvas id="confetti"></canvas>
599
 
600
+ <!-- decorative frame -->
 
601
 
602
+ <div class="frame" aria-hidden="true"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
603
 
604
  <main class="screen">
605
  <div class="page">
606
  <div class="top-mark anim anim-1">
607
  <img class="logo" src="logo.png" alt="Logo matrimonio" />
 
608
  </div>
609
 
610
+ ```
611
+ <section class="hero" aria-label="Trova la tua cala">
612
+ <div>
613
+ <p class="hero-tag anim anim-2">a tavola, in riva al mare</p>
614
+
615
+ <div class="title-frame anim anim-3">
616
+ <div class="title-branch title-branch-l" aria-hidden="true">
617
+ <svg viewBox="0 0 60 156">
618
+ <path class="branch-stem" d="M52 8 C 32 44, 22 92, 32 150" />
619
+ <ellipse class="branch-leaf" cx="46" cy="22" rx="6" ry="2.4" transform="rotate(-25 46 22)"/>
620
+ <ellipse class="branch-leaf-soft" cx="38" cy="38" rx="6.5" ry="2.6" transform="rotate(-30 38 38)"/>
621
+ <ellipse class="branch-leaf" cx="33" cy="56" rx="7" ry="2.7" transform="rotate(-38 33 56)"/>
622
+ <ellipse class="branch-leaf-soft" cx="29" cy="74" rx="7" ry="2.7" transform="rotate(-46 29 74)"/>
623
+ <ellipse class="branch-leaf" cx="27" cy="92" rx="7" ry="2.7" transform="rotate(-54 27 92)"/>
624
+ <ellipse class="branch-leaf-soft" cx="28" cy="110" rx="6.5" ry="2.6" transform="rotate(-62 28 110)"/>
625
+ <ellipse class="branch-leaf" cx="30" cy="128" rx="5.6" ry="2.3" transform="rotate(-70 30 128)"/>
626
+ <circle cx="42" cy="30" r="1.5" fill="var(--olive-deep)" opacity=".75"/>
627
+ <circle cx="31" cy="64" r="1.5" fill="var(--olive-deep)" opacity=".75"/>
628
+ <circle cx="28" cy="100" r="1.5" fill="var(--olive-deep)" opacity=".75"/>
629
+ </svg>
630
+ </div>
631
+
632
+ <h1 class="script-title">
633
  <span>Trova la</span>
634
  <span>tua Cala</span>
635
  </h1>
636
 
637
+ <div class="title-branch title-branch-r" aria-hidden="true">
638
+ <svg viewBox="0 0 60 156">
639
+ <path class="branch-stem" d="M52 8 C 32 44, 22 92, 32 150" />
640
+ <ellipse class="branch-leaf" cx="46" cy="22" rx="6" ry="2.4" transform="rotate(-25 46 22)"/>
641
+ <ellipse class="branch-leaf-soft" cx="38" cy="38" rx="6.5" ry="2.6" transform="rotate(-30 38 38)"/>
642
+ <ellipse class="branch-leaf" cx="33" cy="56" rx="7" ry="2.7" transform="rotate(-38 33 56)"/>
643
+ <ellipse class="branch-leaf-soft" cx="29" cy="74" rx="7" ry="2.7" transform="rotate(-46 29 74)"/>
644
+ <ellipse class="branch-leaf" cx="27" cy="92" rx="7" ry="2.7" transform="rotate(-54 27 92)"/>
645
+ <ellipse class="branch-leaf-soft" cx="28" cy="110" rx="6.5" ry="2.6" transform="rotate(-62 28 110)"/>
646
+ <ellipse class="branch-leaf" cx="30" cy="128" rx="5.6" ry="2.3" transform="rotate(-70 30 128)"/>
647
+ <circle cx="42" cy="30" r="1.5" fill="var(--olive-deep)" opacity=".75"/>
648
+ <circle cx="31" cy="64" r="1.5" fill="var(--olive-deep)" opacity=".75"/>
649
+ <circle cx="28" cy="100" r="1.5" fill="var(--olive-deep)" opacity=".75"/>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
650
  </svg>
651
  </div>
652
+ </div>
653
+ </div>
654
 
655
+ <div class="form-block anim anim-4">
656
+ <label class="field-label" for="guestName">Nome &amp; Cognome</label>
657
+ <div class="input-wrap">
658
+ <input id="guestName" autocomplete="name" inputmode="text" placeholder="Es. Gaia Pollastrini" />
659
+ </div>
660
+ <button class="discover" id="discover" type="button">Scopri il tavolo</button>
661
+ <div id="message" class="message" aria-live="polite"></div>
662
+ <div id="status" class="status" aria-live="polite"></div>
 
 
 
663
  </div>
664
+ </section>
665
+ </div>
666
+ ```
667
+
668
  </main>
669
 
670
  <!-- ===================== REVEAL ===================== -->
671
+
672
  <section id="reveal" class="reveal" aria-live="assertive" aria-hidden="true">
673
  <div class="reveal-frame" aria-hidden="true"></div>
674
 
675
+ ```
676
+ <div class="reveal-page">
677
+ <p class="hello reveal-step step-1" id="hello"></p>
678
+ <div class="hello-divider reveal-step step-2" aria-hidden="true"></div>
679
+
680
+ <p class="table-kicker reveal-step step-3"><span>Il tuo tavolo è</span></p>
681
+
682
+ <div class="table-name-wrap reveal-step step-4">
683
+ <!-- left olive branch -->
684
+ <div class="branch branch-l" aria-hidden="true">
685
+ <svg viewBox="0 0 60 120">
686
+ <path class="branch-stem" d="M50 6 C 32 36, 22 70, 30 116" />
687
+ <ellipse class="branch-leaf" cx="44" cy="20" rx="6" ry="2.4" transform="rotate(-25 44 20)"/>
688
+ <ellipse class="branch-leaf-soft" cx="36" cy="32" rx="6.5" ry="2.6" transform="rotate(-30 36 32)"/>
689
+ <ellipse class="branch-leaf" cx="32" cy="46" rx="7" ry="2.7" transform="rotate(-38 32 46)"/>
690
+ <ellipse class="branch-leaf-soft" cx="28" cy="60" rx="7" ry="2.7" transform="rotate(-46 28 60)"/>
691
+ <ellipse class="branch-leaf" cx="26" cy="74" rx="7" ry="2.7" transform="rotate(-54 26 74)"/>
692
+ <ellipse class="branch-leaf-soft" cx="26" cy="88" rx="6.5" ry="2.6" transform="rotate(-62 26 88)"/>
693
+ <ellipse class="branch-leaf" cx="28" cy="102" rx="5.6" ry="2.3" transform="rotate(-70 28 102)"/>
694
+ <!-- tiny olives -->
695
+ <circle cx="40" cy="26" r="1.6" fill="var(--olive-deep)" opacity=".75"/>
696
+ <circle cx="30" cy="54" r="1.6" fill="var(--olive-deep)" opacity=".75"/>
697
+ <circle cx="27" cy="82" r="1.6" fill="var(--olive-deep)" opacity=".75"/>
698
+ </svg>
699
+ </div>
700
 
701
+ <h2 class="table-name" id="tableName"></h2>
702
+
703
+ <!-- right olive branch (mirrored via CSS) -->
704
+ <div class="branch branch-r" aria-hidden="true">
705
+ <svg viewBox="0 0 60 120">
706
+ <path class="branch-stem" d="M50 6 C 32 36, 22 70, 30 116" />
707
+ <ellipse class="branch-leaf" cx="44" cy="20" rx="6" ry="2.4" transform="rotate(-25 44 20)"/>
708
+ <ellipse class="branch-leaf-soft" cx="36" cy="32" rx="6.5" ry="2.6" transform="rotate(-30 36 32)"/>
709
+ <ellipse class="branch-leaf" cx="32" cy="46" rx="7" ry="2.7" transform="rotate(-38 32 46)"/>
710
+ <ellipse class="branch-leaf-soft" cx="28" cy="60" rx="7" ry="2.7" transform="rotate(-46 28 60)"/>
711
+ <ellipse class="branch-leaf" cx="26" cy="74" rx="7" ry="2.7" transform="rotate(-54 26 74)"/>
712
+ <ellipse class="branch-leaf-soft" cx="26" cy="88" rx="6.5" ry="2.6" transform="rotate(-62 26 88)"/>
713
+ <ellipse class="branch-leaf" cx="28" cy="102" rx="5.6" ry="2.3" transform="rotate(-70 28 102)"/>
714
+ <circle cx="40" cy="26" r="1.6" fill="var(--olive-deep)" opacity=".75"/>
715
+ <circle cx="30" cy="54" r="1.6" fill="var(--olive-deep)" opacity=".75"/>
716
+ <circle cx="27" cy="82" r="1.6" fill="var(--olive-deep)" opacity=".75"/>
717
+ </svg>
718
+ </div>
719
+ </div>
720
 
721
+ <div class="reveal-divider reveal-step step-5" aria-hidden="true">
722
+ <span class="dot"></span>
723
+ </div>
724
 
725
+ <p class="reveal-note reveal-step step-5">In che cala cenerai? <br/>L'hai appena scoperto.</p>
726
+
727
+ <button class="again reveal-step step-6" id="again" type="button">Cerca un altro nome</button>
728
+ </div>
729
+ ```
730
 
 
 
731
  </section>
732
 
733
  <script>
 
992
  window.addEventListener("resize", resizeCanvas);
993
  loadGuests();
994
  </script>
995
+
996
  </body>
997
  </html>