Spaces:

MatteoScript
/

TableauDuMariage

Running

App Files Files Community

MatteoScript commited on 21 days ago

Commit

b228270

verified ·

1 Parent(s): d893522

Update index.html

Browse files

Files changed (1) hide show

index.html +771 -17

index.html CHANGED Viewed

@@ -1,19 +1,773 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

 <!doctype html>
+<html lang="it">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+  <meta name="theme-color" content="#0d6b7d" />
+  <title>Scopri il tuo Tavolo</title>
+  <style>
+    :root {
+      --navy: #073348;
+      --blue: #0a6f89;
+      --aqua: #9de7df;
+      --foam: #f3fffb;
+      --sand: #ffe2a3;
+      --gold: #f7ba56;
+      --coral: #ff9b86;
+      --white: rgba(255, 255, 255, .92);
+      --shadow: 0 30px 90px rgba(3, 45, 64, .34);
+    }
+    * { box-sizing: border-box; }
+    html,
+    body {
+      width: 100%;
+      min-height: 100%;
+      margin: 0;
+      font-family: ui-rounded, "SF Pro Rounded", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      color: var(--navy);
+      background: #0d6b7d;
+      overflow-x: hidden;
+    }
+    body {
+      min-height: 100svh;
+      background:
+        radial-gradient(circle at 18% 10%, rgba(255,255,255,.92) 0 7%, transparent 24%),
+        radial-gradient(circle at 88% 13%, rgba(255,226,163,.9) 0 8%, transparent 25%),
+        radial-gradient(circle at 50% 96%, rgba(255,255,255,.32) 0 12%, transparent 42%),
+        linear-gradient(145deg, #d7fff6 0%, #8be5e2 26%, #1e98b1 61%, #064a66 100%);
+    }
+    body::before,
+    body::after {
+      content: "";
+      position: fixed;
+      left: -20vw;
+      right: -20vw;
+      bottom: -10vh;
+      height: 33vh;
+      pointer-events: none;
+      z-index: 0;
+      background:
+        radial-gradient(70% 90% at 50% 0%, rgba(255,255,255,.92) 0 12%, transparent 13%),
+        radial-gradient(70% 90% at 16% 8%, rgba(255,255,255,.70) 0 12%, transparent 13%),
+        radial-gradient(70% 90% at 84% 5%, rgba(255,255,255,.66) 0 12%, transparent 13%);
+      filter: blur(1px);
+      opacity: .75;
+      animation: wave 7s ease-in-out infinite alternate;
+    }
+    body::after {
+      bottom: -4vh;
+      height: 26vh;
+      opacity: .35;
+      animation-duration: 11s;
+      animation-direction: alternate-reverse;
+    }
+    @keyframes wave {
+      from { transform: translateX(-4vw) translateY(0) rotate(-2deg); }
+      to { transform: translateX(4vw) translateY(-1.5vh) rotate(1deg); }
+    }
+    .app {
+      position: relative;
+      z-index: 1;
+      min-height: 100svh;
+      display: grid;
+      place-items: center;
+      padding: max(18px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
+    }
+    .card {
+      width: min(100%, 460px);
+      border-radius: 36px;
+      overflow: hidden;
+      border: 1px solid rgba(255,255,255,.56);
+      background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
+      box-shadow: var(--shadow);
+      backdrop-filter: blur(26px);
+      -webkit-backdrop-filter: blur(26px);
+      animation: enter .72s cubic-bezier(.2,.9,.2,1.12) both;
+    }
+    @keyframes enter {
+      from { opacity: 0; transform: translateY(24px) scale(.97); }
+      to { opacity: 1; transform: translateY(0) scale(1); }
+    }
+    .hero {
+      position: relative;
+      padding: 32px 24px 22px;
+      text-align: center;
+      isolation: isolate;
+    }
+    .hero::before {
+      content: "";
+      position: absolute;
+      top: 8px;
+      left: 50%;
+      width: 184px;
+      height: 184px;
+      border-radius: 50%;
+      transform: translateX(-50%);
+      z-index: -1;
+      background: radial-gradient(circle, rgba(255,246,194,.96) 0 27%, rgba(255,212,122,.58) 28% 45%, transparent 46%);
+      animation: sunPulse 4s ease-in-out infinite alternate;
+    }
+    @keyframes sunPulse {
+      from { opacity: .72; transform: translateX(-50%) scale(.95); }
+      to { opacity: 1; transform: translateX(-50%) scale(1.06); }
+    }
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 9px 13px;
+      border-radius: 999px;
+      color: #06425a;
+      background: rgba(255,255,255,.68);
+      box-shadow: 0 10px 24px rgba(5, 48, 68, .10);
+      font-size: 12px;
+      font-weight: 950;
+      letter-spacing: .12em;
+      text-transform: uppercase;
+    }
+    h1 {
+      margin: 22px auto 10px;
+      max-width: 8ch;
+      font-size: clamp(43px, 13vw, 64px);
+      line-height: .86;
+      letter-spacing: -.07em;
+      color: #063a52;
+      text-wrap: balance;
+    }
+    .subtitle {
+      margin: 0 auto;
+      max-width: 28ch;
+      color: rgba(7, 51, 72, .72);
+      font-size: 16px;
+      line-height: 1.42;
+      font-weight: 720;
+    }
+    .islands {
+      display: flex;
+      justify-content: center;
+      align-items: end;
+      gap: 7px;
+      height: 40px;
+      margin-top: 22px;
+    }
+    .island {
+      display: block;
+      border-radius: 999px 999px 22px 22px;
+      background: linear-gradient(180deg, #ffeeb7, #ecae47);
+      box-shadow: inset 0 -8px 0 rgba(129, 76, 23, .12);
+      animation: bob 3.2s ease-in-out infinite;
+    }
+    .island:nth-child(1) { width: 42px; height: 15px; animation-delay: -.15s; }
+    .island:nth-child(2) { width: 82px; height: 28px; animation-delay: -.55s; }
+    .island:nth-child(3) { width: 35px; height: 13px; animation-delay: -.9s; }
+    @keyframes bob {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-5px); }
+    }
+    .form {
+      padding: 6px 24px 28px;
+    }
+    label {
+      display: block;
+      margin: 0 0 10px;
+      color: rgba(7, 51, 72, .70);
+      font-size: 12px;
+      font-weight: 950;
+      letter-spacing: .11em;
+      text-transform: uppercase;
+    }
+    input {
+      width: 100%;
+      min-height: 64px;
+      border: 0;
+      outline: none;
+      border-radius: 24px;
+      padding: 0 18px;
+      color: var(--navy);
+      background: rgba(255,255,255,.91);
+      font-size: 18px;
+      font-weight: 860;
+      box-shadow:
+        inset 0 0 0 1px rgba(7, 51, 72, .09),
+        0 16px 32px rgba(3, 45, 64, .14);
+      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
+    }
+    input::placeholder {
+      color: rgba(7, 51, 72, .35);
+      font-weight: 760;
+    }
+    input:focus {
+      transform: translateY(-1px);
+      background: #fff;
+      box-shadow:
+        inset 0 0 0 2px rgba(10,111,137,.34),
+        0 18px 36px rgba(3, 45, 64, .18);
+    }
+    .discover {
+      position: relative;
+      width: 100%;
+      min-height: 66px;
+      margin-top: 14px;
+      border: 0;
+      border-radius: 24px;
+      overflow: hidden;
+      cursor: pointer;
+      color: #063a52;
+      background:
+        linear-gradient(115deg, rgba(255,255,255,.72), transparent 30% 68%, rgba(255,255,255,.70)),
+        linear-gradient(135deg, #ffe5a6, #fff0b8 45%, #ff9b86);
+      box-shadow: 0 20px 38px rgba(140, 82, 24, .27), inset 0 -3px 0 rgba(109, 59, 18, .14);
+      font-size: 18px;
+      font-weight: 1000;
+      letter-spacing: -.02em;
+      transition: transform .16s ease, filter .16s ease;
+    }
+    .discover::after {
+      content: "";
+      position: absolute;
+      top: -90%;
+      left: -46%;
+      width: 35%;
+      height: 280%;
+      background: rgba(255,255,255,.74);
+      transform: rotate(23deg);
+      animation: shine 3.15s ease-in-out infinite;
+    }
+    @keyframes shine {
+      0%, 54% { left: -52%; }
+      100% { left: 122%; }
+    }
+    .discover:active {
+      transform: translateY(2px) scale(.99);
+      filter: saturate(1.05);
+    }
+    .message {
+      min-height: 0;
+      margin-top: 14px;
+      opacity: 0;
+      transform: translateY(8px);
+      transition: opacity .24s ease, transform .24s ease;
+    }
+    .message.show {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    .message-card {
+      border-radius: 24px;
+      padding: 18px 16px;
+      text-align: center;
+      color: rgba(7, 51, 72, .78);
+      background: rgba(255,255,255,.62);
+      border: 1px solid rgba(255,255,255,.6);
+      box-shadow: 0 14px 30px rgba(3, 45, 64, .12);
+      font-size: 14px;
+      font-weight: 800;
+      line-height: 1.35;
+    }
+    .reveal {
+      position: fixed;
+      inset: 0;
+      z-index: 20;
+      display: grid;
+      place-items: center;
+      padding: max(20px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom));
+      color: #fff;
+      background:
+        radial-gradient(circle at 50% 21%, rgba(255,236,169,.95) 0 8%, rgba(255,206,109,.45) 9% 18%, transparent 34%),
+        radial-gradient(circle at 22% 78%, rgba(157,231,223,.42), transparent 31%),
+        radial-gradient(circle at 86% 75%, rgba(255,155,134,.36), transparent 28%),
+        linear-gradient(145deg, #0a87a3 0%, #075f7d 45%, #042d46 100%);
+      opacity: 0;
+      pointer-events: none;
+      transform: scale(1.03);
+      transition: opacity .42s ease, transform .42s ease;
+      overflow: hidden;
+    }
+    .reveal.show {
+      opacity: 1;
+      pointer-events: auto;
+      transform: scale(1);
+    }
+    .reveal::before,
+    .reveal::after {
+      content: "";
+      position: absolute;
+      left: -25vw;
+      right: -25vw;
+      bottom: -6vh;
+      height: 30vh;
+      background:
+        radial-gradient(70% 90% at 50% 0%, rgba(255,255,255,.88) 0 12%, transparent 13%),
+        radial-gradient(70% 90% at 15% 6%, rgba(255,255,255,.58) 0 12%, transparent 13%),
+        radial-gradient(70% 90% at 84% 7%, rgba(255,255,255,.52) 0 12%, transparent 13%);
+      opacity: .56;
+      animation: revealWave 6s ease-in-out infinite alternate;
+    }
+    .reveal::after {
+      bottom: -1vh;
+      opacity: .28;
+      animation-duration: 9s;
+      animation-direction: alternate-reverse;
+    }
+    @keyframes revealWave {
+      from { transform: translateX(-4vw) rotate(-2deg); }
+      to { transform: translateX(4vw) translateY(-1vh) rotate(1deg); }
+    }
+    .reveal-content {
+      position: relative;
+      z-index: 2;
+      width: min(100%, 560px);
+      min-height: min(76svh, 720px);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      border-radius: 38px;
+      padding: 32px 22px;
+      background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
+      border: 1px solid rgba(255,255,255,.26);
+      box-shadow: 0 40px 110px rgba(0,0,0,.28);
+      backdrop-filter: blur(18px);
+      -webkit-backdrop-filter: blur(18px);
+      animation: revealPop .7s cubic-bezier(.2,.9,.16,1.22) both;
+    }
+    .reveal.show .reveal-content {
+      animation: revealPop .7s cubic-bezier(.2,.9,.16,1.22) both;
+    }
+    @keyframes revealPop {
+      from { opacity: 0; transform: translateY(32px) scale(.86) rotate(-1.5deg); filter: blur(8px); }
+      60% { opacity: 1; transform: translateY(-4px) scale(1.03) rotate(.5deg); filter: blur(0); }
+      to { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: blur(0); }
+    }
+    .hello {
+      margin: 0 0 18px;
+      color: rgba(255,255,255,.86);
+      font-size: clamp(18px, 5vw, 24px);
+      font-weight: 900;
+      letter-spacing: .02em;
+    }
+    .small-title {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      margin-bottom: 16px;
+      padding: 10px 14px;
+      border-radius: 999px;
+      color: #063a52;
+      background: rgba(255,255,255,.86);
+      box-shadow: 0 14px 34px rgba(0,0,0,.12);
+      font-size: 13px;
+      font-weight: 1000;
+      letter-spacing: .14em;
+      text-transform: uppercase;
+    }
+    .table-name {
+      margin: 0;
+      max-width: 9ch;
+      color: #fff7c8;
+      font-size: clamp(58px, 18vw, 118px);
+      line-height: .82;
+      letter-spacing: -.08em;
+      font-weight: 1000;
+      text-shadow:
+        0 8px 0 rgba(0,0,0,.10),
+        0 24px 52px rgba(0,0,0,.28);
+      text-wrap: balance;
+    }
+    .reveal-note {
+      margin: 24px auto 0;
+      max-width: 26ch;
+      color: rgba(255,255,255,.86);
+      font-size: 16px;
+      line-height: 1.35;
+      font-weight: 800;
+    }
+    .again {
+      min-height: 52px;
+      margin-top: 30px;
+      border: 0;
+      border-radius: 999px;
+      padding: 0 22px;
+      color: #063a52;
+      background: rgba(255,255,255,.92);
+      box-shadow: 0 18px 42px rgba(0,0,0,.18);
+      font-size: 15px;
+      font-weight: 950;
+      cursor: pointer;
+    }
+    .status {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      white-space: nowrap;
+    }
+    #confetti {
+      position: fixed;
+      inset: 0;
+      z-index: 40;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
+    @media (max-width: 380px) {
+      .app { padding-left: 12px; padding-right: 12px; }
+      .hero { padding: 28px 18px 20px; }
+      .form { padding-left: 18px; padding-right: 18px; }
+      input, .discover { min-height: 60px; border-radius: 22px; }
+      .reveal-content { border-radius: 32px; padding-left: 16px; padding-right: 16px; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      *, *::before, *::after {
+        animation-duration: .001ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: .001ms !important;
+        scroll-behavior: auto !important;
+      }
+    }
+  </style>
+</head>
+<body>
+  <canvas id="confetti"></canvas>
+  <main class="app">
+    <section class="card" aria-label="Scopri il tavolo">
+      <div class="hero">
+        <div class="badge">💍 Tableau de Mariage</div>
+        <h1>Trova la tua Cala</h1>
+        <p class="subtitle">Inserisci nome e cognome e lasciati guidare dalle Tremiti.</p>
+        <div class="islands" aria-hidden="true">
+          <span class="island"></span>
+          <span class="island"></span>
+          <span class="island"></span>
+        </div>
+      </div>
+      <div class="form">
+        <label for="guestName">Nome e cognome</label>
+        <input id="guestName" autocomplete="name" inputmode="text" placeholder="Es. Gaia Pollastrini" />
+        <button class="discover" id="discover" type="button">Scopri il Tavolo ✨</button>
+        <div id="message" class="message" aria-live="polite"></div>
+        <div id="status" class="status" aria-live="polite"></div>
+      </div>
+    </section>
+  </main>
+  <section id="reveal" class="reveal" aria-live="assertive" aria-hidden="true">
+    <div class="reveal-content">
+      <p class="hello" id="hello"></p>
+      <div class="small-title">🌊 Il tuo tavolo è</div>
+      <h2 class="table-name" id="tableName"></h2>
+      <p class="reveal-note">Brinda, sorridi e goditi la serata.</p>
+      <button class="again" id="again" type="button">Cerca un altro nome</button>
+    </div>
+  </section>
+  <script>
+    const DATA_URL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vTfZi-c3ZoLv0pHDNqK64NzBISDsNy3cF2qf-ZD02yYuURljcDVNPNXsvfWcN5oGQ/pub?output=csv";
+    const SAMPLE_CSV = `
+Nome Cognome,Nome del tavolo
+Gaia Pollastrini,Cala Matano
+Luca Bianchi,Cala Tramontana
+Sara Conti,Cala Spido
+Marco De Santis,Cala Zio Cesare
+Elena Ferri,Cala degli Inglesi
+Davide Greco,Cala Tonda
+Chiara Romano,Cala dei Benedettini
+Alessandro Rinaldi,Cala Pietre di Fucile
+Martina Esposito,Cala Sorrentino
+`;
+    const els = {
+      input: document.getElementById("guestName"),
+      discover: document.getElementById("discover"),
+      message: document.getElementById("message"),
+      status: document.getElementById("status"),
+      reveal: document.getElementById("reveal"),
+      hello: document.getElementById("hello"),
+      tableName: document.getElementById("tableName"),
+      again: document.getElementById("again"),
+      canvas: document.getElementById("confetti")
+    };
+    let guests = [];
+    function normalizeName(value) {
+      return String(value || "")
+        .normalize("NFD")
+        .replace(/[\u0300-\u036f]/g, "")
+        .toLowerCase()
+        .replace(/[^\p{L}\p{N}\s'-]/gu, " ")
+        .replace(/\s+/g, " ")
+        .trim();
+    }
+    function firstName(fullName) {
+      return String(fullName || "").trim().split(/\s+/)[0] || "ospite";
+    }
+    function parseCSV(text) {
+      const rows = [];
+      let row = [];
+      let cell = "";
+      let quoted = false;
+      for (let i = 0; i < text.length; i++) {
+        const char = text[i];
+        const next = text[i + 1];
+        if (char === '"' && quoted && next === '"') {
+          cell += '"';
+          i++;
+        } else if (char === '"') {
+          quoted = !quoted;
+        } else if (char === "," && !quoted) {
+          row.push(cell.trim());
+          cell = "";
+        } else if ((char === "\n" || char === "\r") && !quoted) {
+          if (char === "\r" && next === "\n") i++;
+          row.push(cell.trim());
+          if (row.some(Boolean)) rows.push(row);
+          row = [];
+          cell = "";
+        } else {
+          cell += char;
+        }
+      }
+      row.push(cell.trim());
+      if (row.some(Boolean)) rows.push(row);
+      return rows;
+    }
+    function tableFromCSV(csvText) {
+      const rows = parseCSV(csvText);
+      const headerIndex = rows.findIndex(row =>
+        normalizeName(row[0]) === "nome cognome" &&
+        normalizeName(row[1]) === "nome del tavolo"
+      );
+      const start = headerIndex >= 0 ? headerIndex + 1 : 1;
+      return rows
+        .slice(start)
+        .map(row => ({
+          fullName: row[0] || "",
+          tableName: row[1] || "",
+          key: normalizeName(row[0] || "")
+        }))
+        .filter(item => item.fullName && item.tableName);
+    }
+    async function loadGuests() {
+      const params = new URLSearchParams(window.location.search);
+      const url = params.get("data") || DATA_URL;
+      try {
+        if (url && url.trim()) {
+          const response = await fetch(url.trim(), { cache: "no-store" });
+          if (!response.ok) throw new Error("Lista non disponibile");
+          guests = tableFromCSV(await response.text());
+        } else {
+          guests = tableFromCSV(SAMPLE_CSV);
+        }
+        els.status.textContent = "Lista invitati pronta.";
+      } catch (error) {
+        guests = tableFromCSV(SAMPLE_CSV);
+        els.status.textContent = "Lista invitati pronta.";
+      }
+    }
+    function findGuest(query) {
+      const key = normalizeName(query);
+      if (!key) return null;
+      const exact = guests.find(guest => guest.key === key);
+      if (exact) return exact;
+      const partials = guests.filter(guest => guest.key.includes(key) || key.includes(guest.key));
+      return partials.length === 1 ? partials[0] : null;
+    }
+    function showMessage(text) {
+      els.message.classList.remove("show");
+      window.setTimeout(() => {
+        els.message.innerHTML = `<div class="message-card">${escapeHTML(text)}</div>`;
+        els.message.classList.add("show");
+      }, 60);
+    }
+    function showReveal(guest) {
+      els.hello.textContent = `Ciao ${firstName(guest.fullName)} ✨`;
+      els.tableName.textContent = guest.tableName;
+      els.reveal.classList.add("show");
+      els.reveal.setAttribute("aria-hidden", "false");
+      celebrate();
+    }
+    function hideReveal() {
+      els.reveal.classList.remove("show");
+      els.reveal.setAttribute("aria-hidden", "true");
+      els.input.value = "";
+      els.message.classList.remove("show");
+      els.input.focus();
+    }
+    function discoverTable() {
+      const typed = els.input.value;
+      const normalized = normalizeName(typed);
+      if (!normalized) {
+        showMessage("Scrivi nome e cognome per scoprire il tuo tavolo.");
+        els.input.focus();
+        return;
+      }
+      const guest = findGuest(typed);
+      if (!guest) {
+        showMessage("Nome non trovato. Controlla di aver scritto nome e cognome corretti.");
+        return;
+      }
+      showReveal(guest);
+    }
+    function escapeHTML(value) {
+      return String(value)
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("'", "&#039;");
+    }
+    els.discover.addEventListener("click", discoverTable);
+    els.again.addEventListener("click", hideReveal);
+    els.input.addEventListener("keydown", event => {
+      if (event.key === "Enter") discoverTable();
+    });
+    const ctx = els.canvas.getContext("2d");
+    let confetti = [];
+    let rafId = null;
+    function resizeCanvas() {
+      const ratio = Math.min(window.devicePixelRatio || 1, 2);
+      els.canvas.width = Math.floor(window.innerWidth * ratio);
+      els.canvas.height = Math.floor(window.innerHeight * ratio);
+      ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
+    }
+    function celebrate() {
+      resizeCanvas();
+      const colors = ["#fff7c8", "#ffe2a3", "#ff9b86", "#9de7df", "#ffffff"];
+      const centerX = window.innerWidth / 2;
+      const centerY = window.innerHeight * .42;
+      confetti = Array.from({ length: 190 }, () => {
+        const angle = Math.random() * Math.PI * 2;
+        const speed = 4 + Math.random() * 9;
+        return {
+          x: centerX,
+          y: centerY,
+          size: 5 + Math.random() * 10,
+          vx: Math.cos(angle) * speed,
+          vy: Math.sin(angle) * speed - 5,
+          gravity: .18 + Math.random() * .14,
+          rotation: Math.random() * Math.PI,
+          spin: (Math.random() - .5) * .34,
+          color: colors[Math.floor(Math.random() * colors.length)],
+          life: 105 + Math.random() * 55
+        };
+      });
+      if (rafId) cancelAnimationFrame(rafId);
+      animateConfetti();
+    }
+    function animateConfetti() {
+      ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
+      confetti.forEach(piece => {
+        piece.x += piece.vx;
+        piece.y += piece.vy;
+        piece.vy += piece.gravity;
+        piece.vx *= .988;
+        piece.rotation += piece.spin;
+        piece.life -= 1;
+        ctx.save();
+        ctx.translate(piece.x, piece.y);
+        ctx.rotate(piece.rotation);
+        ctx.globalAlpha = Math.max(piece.life / 120, 0);
+        ctx.fillStyle = piece.color;
+        ctx.fillRect(-piece.size / 2, -piece.size / 2, piece.size, piece.size * .62);
+        ctx.restore();
+      });
+      confetti = confetti.filter(piece => piece.life > 0 && piece.y < window.innerHeight + 90);
+      if (confetti.length) {
+        rafId = requestAnimationFrame(animateConfetti);
+      } else {
+        ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
+      }
+    }
+    window.addEventListener("resize", resizeCanvas);
+    loadGuests();
+  </script>
+</body>
 </html>