Update index.html

index.html

@@ -32,9 +32,8 @@
       --rose: #EDD3CD;
       --cream: #F3EFE9;
       --paper: #FFFDF8;
-      --line: rgba(37, 75, 107, .13);
-      --line-soft: rgba(147, 150, 117, .24);
-      --shadow: 0 18px 46px rgba(37, 75, 107, .10);
+      --border: rgba(147, 150, 117, .22);
+      --shadow: 0 16px 38px rgba(37, 75, 107, .10);
       --font-main: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
       --font-script: "Amsterdam One", "Great Vibes", "Snell Roundhand", cursive;
     }
@@ -44,104 +43,87 @@
     html,
     body {
       width: 100%;
-      min-height: 100%;
+      height: 100%;
       margin: 0;
+      overflow: hidden;
       font-family: var(--font-main);
       color: var(--blue);
       background: var(--cream);
-      overflow-x: hidden;
     }
 
     body {
-      height: 100svh;
-      min-height: 100svh;
-      overflow: hidden;
-      background:
-        linear-gradient(180deg, #fffdf8 0%, #f8f4ee 54%, #f3efe9 100%);
-    }
-
-    body.reveal-open {
-      overflow: hidden;
+      min-height: 100dvh;
+      background: linear-gradient(180deg, #fffdf8 0%, #f7f2ec 100%);
     }
 
     .screen {
       position: relative;
-      height: 100svh;
-      min-height: 100svh;
+      width: 100%;
+      height: 100dvh;
+      min-height: 100dvh;
       display: flex;
       justify-content: center;
       overflow: hidden;
     }
 
-    .screen::before {
+    .screen::before,
+    .reveal::before {
       content: "";
       position: fixed;
-      inset: 18px;
-      border: 1px solid rgba(147, 150, 117, .22);
+      inset: 16px;
+      border: 1px solid var(--border);
       border-radius: 28px;
       pointer-events: none;
-    }
-
-    .screen::after {
-      content: "";
-      position: fixed;
-      left: 50%;
-      top: 52%;
-      width: min(78vw, 420px);
-      height: min(78vw, 420px);
-      border-radius: 999px;
-      transform: translate(-50%, -50%);
-      background: rgba(237, 211, 205, .18);
-      pointer-events: none;
-      filter: blur(.2px);
+      z-index: 0;
     }
 
     .page {
       position: relative;
       z-index: 1;
       width: min(100%, 500px);
-      height: 100svh;
-      min-height: 100svh;
-      padding: max(22px, env(safe-area-inset-top)) 28px max(20px, env(safe-area-inset-bottom));
+      height: 100dvh;
+      padding: max(20px, env(safe-area-inset-top)) 28px max(18px, env(safe-area-inset-bottom));
       display: grid;
-      grid-template-rows: auto 1fr auto;
+      grid-template-rows: 58px minmax(0, 1fr) auto;
+      gap: 10px;
       overflow: hidden;
     }
 
     .top-mark {
       display: flex;
-      justify-content: center;
       align-items: center;
-      min-height: 38px;
-      background: transparent;
+      justify-content: center;
     }
 
     .logo {
-      width: 50px;
-      height: 50px;
+      width: 54px;
+      height: 54px;
       display: block;
       object-fit: contain;
       background: transparent;
-      opacity: .86;
-      mix-blend-mode: multiply;
-      filter: contrast(1.08) saturate(.92);
+      opacity: .96;
+      mix-blend-mode: normal;
+      filter: none;
     }
 
     .hero {
-      align-self: center;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
       text-align: center;
-      padding: 4px 0 14px;
+      padding: 2px 0 8px;
     }
 
     .script-title {
       margin: 0 auto;
-      max-width: 390px;
       color: var(--blue);
       font-family: var(--font-script);
-      font-size: clamp(54px, 15.5vw, 92px);
+      font-size: clamp(50px, 13vw, 78px);
       font-weight: 400;
-      line-height: .76;
-      letter-spacing: -.035em;
+      line-height: .82;
+      letter-spacing: -.025em;
       text-wrap: balance;
     }
 
@@ -150,37 +132,42 @@
     }
 
     .script-title span:first-child {
-      transform: translateX(-.06em);
+      transform: translateX(-.04em);
     }
 
     .script-title span:last-child {
+      transform: translateX(.05em);
       margin-top: -.02em;
-      transform: translateX(.08em);
     }
 
     .island-line {
-      width: min(48vw, 220px);
-      max-height: 150px;
-      margin: clamp(18px, 3.5svh, 30px) auto 0;
+      width: min(34vw, 150px);
+      max-width: 150px;
+      height: 118px;
+      margin: clamp(16px, 3dvh, 26px) auto 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       overflow: hidden;
     }
 
     .island-img {
-      width: 100%;
-      max-height: 150px;
+      max-width: 100%;
+      max-height: 100%;
+      width: auto;
       height: auto;
       display: block;
       object-fit: contain;
       opacity: 1;
+      background: transparent;
+      mix-blend-mode: normal;
       filter: none;
-      animation: none;
       transform: none;
-      mix-blend-mode: multiply;
+      animation: none;
     }
 
     .form-area {
-      align-self: end;
-      padding-bottom: clamp(6px, 2.4svh, 26px);
+      padding-bottom: clamp(2px, 1.6dvh, 16px);
     }
 
     .field-label {
@@ -193,14 +180,10 @@
       text-transform: uppercase;
     }
 
-    .input-panel {
-      padding: 0;
-    }
-
     input {
       width: 100%;
-      min-height: 62px;
-      border: 1px solid var(--line-soft);
+      height: 60px;
+      border: 1px solid rgba(147, 150, 117, .30);
       outline: 0;
       border-radius: 999px;
       padding: 0 22px;
@@ -209,7 +192,7 @@
       font-family: var(--font-main);
       font-size: 16px;
       font-weight: 600;
-      box-shadow: 0 10px 28px rgba(37, 75, 107, .07);
+      box-shadow: 0 10px 26px rgba(37, 75, 107, .07);
       transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
     }
 
@@ -219,27 +202,27 @@
     }
 
     input:focus {
-      border-color: rgba(208, 138, 122, .72);
-      background: #fffdf8;
+      border-color: rgba(208, 138, 122, .70);
+      background: var(--paper);
       box-shadow: 0 0 0 5px rgba(237, 211, 205, .28), 0 12px 30px rgba(37, 75, 107, .08);
     }
 
     .discover {
       position: relative;
       width: 100%;
-      min-height: 62px;
+      height: 60px;
       margin-top: 12px;
       border: 0;
       border-radius: 999px;
-      overflow: hidden;
       cursor: pointer;
+      overflow: hidden;
       color: var(--paper);
       background: var(--blue);
       font-family: var(--font-main);
       font-size: 15px;
       font-weight: 800;
       letter-spacing: .02em;
-      box-shadow: 0 14px 32px rgba(37, 75, 107, .18);
+      box-shadow: 0 14px 32px rgba(37, 75, 107, .17);
       transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
     }
 
@@ -247,8 +230,8 @@
       content: "";
       position: absolute;
       left: 50%;
-      bottom: 10px;
-      width: 56px;
+      bottom: 9px;
+      width: 54px;
       height: 2px;
       border-radius: 999px;
       background: var(--coral);
@@ -258,15 +241,15 @@
     .discover:active {
       transform: translateY(2px);
       background: #1f405b;
-      box-shadow: 0 8px 22px rgba(37, 75, 107, .16);
+      box-shadow: 0 8px 22px rgba(37, 75, 107, .14);
     }
 
     .message {
       min-height: 0;
-      margin-top: 12px;
+      margin-top: 10px;
       opacity: 0;
       transform: translateY(8px);
-      transition: opacity .24s ease, transform .24s ease;
+      transition: opacity .22s ease, transform .22s ease;
     }
 
     .message.show {
@@ -276,9 +259,9 @@
 
     .message-card {
       border-radius: 18px;
-      padding: 14px 16px;
+      padding: 13px 15px;
       color: rgba(37, 75, 107, .78);
-      background: rgba(255, 253, 248, .86);
+      background: rgba(255, 253, 248, .90);
       border: 1px solid rgba(147, 150, 117, .22);
       text-align: center;
       font-size: 13px;
@@ -293,71 +276,39 @@
       z-index: 20;
       display: grid;
       place-items: center;
-      padding: max(28px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
+      padding: max(24px, env(safe-area-inset-top)) 24px max(22px, env(safe-area-inset-bottom));
       color: var(--blue);
-      background:
-        linear-gradient(180deg, #fffdf8 0%, #f8f4ee 54%, #f3efe9 100%);
+      background: linear-gradient(180deg, #fffdf8 0%, #f7f2ec 100%);
       opacity: 0;
       visibility: hidden;
       pointer-events: none;
-      transform: scale(1.012);
-      transition: opacity .34s ease, transform .34s ease, visibility 0s linear .34s;
+      transform: scale(1.01);
+      transition: opacity .30s ease, transform .30s ease, visibility 0s linear .30s;
       overflow: hidden;
     }
 
-    .reveal::before {
-      content: "";
-      position: fixed;
-      inset: 18px;
-      border: 1px solid rgba(147, 150, 117, .22);
-      border-radius: 28px;
-      pointer-events: none;
-    }
-
-    .reveal::after {
-      content: "";
-      position: absolute;
-      left: 50%;
-      top: 45%;
-      width: min(82vw, 430px);
-      height: min(82vw, 430px);
-      border-radius: 999px;
-      transform: translate(-50%, -50%);
-      background: rgba(237, 211, 205, .18);
-      pointer-events: none;
-    }
-
     .reveal.show {
       opacity: 1;
       visibility: visible;
       pointer-events: auto;
       transform: scale(1);
-      transition: opacity .34s ease, transform .34s ease, visibility 0s;
+      transition: opacity .30s ease, transform .30s ease, visibility 0s;
     }
 
     .reveal-page {
       position: relative;
-      z-index: 2;
+      z-index: 1;
       width: min(100%, 560px);
-      min-height: min(86svh, 780px);
+      height: 100%;
       display: flex;
       flex-direction: column;
       justify-content: center;
       text-align: center;
-      animation: revealIn .56s cubic-bezier(.2,.9,.18,1.08) both;
-    }
-
-    .reveal.show .reveal-page {
-      animation: revealIn .56s cubic-bezier(.2,.9,.18,1.08) both;
-    }
-
-    @keyframes revealIn {
-      from { opacity: 0; transform: translateY(18px); }
-      to { opacity: 1; transform: translateY(0); }
+      overflow: hidden;
     }
 
     .hello {
-      margin: 0 0 clamp(22px, 5svh, 38px);
+      margin: 0 0 clamp(20px, 4dvh, 34px);
       color: rgba(37, 75, 107, .66);
       font-size: clamp(15px, 4vw, 19px);
       font-weight: 500;
@@ -378,41 +329,36 @@
       max-width: 11ch;
       color: var(--blue);
       font-family: var(--font-script);
-      font-size: clamp(76px, 23vw, 146px);
+      font-size: clamp(72px, 22vw, 138px);
       font-weight: 400;
-      line-height: .74;
+      line-height: .76;
       letter-spacing: -.035em;
       text-wrap: balance;
     }
 
     .table-name[data-long="true"] {
       max-width: 12ch;
-      font-size: clamp(58px, 18vw, 112px);
+      font-size: clamp(54px, 17vw, 104px);
     }
 
     .reveal-island {
-      width: min(42vw, 180px);
-      max-height: 120px;
-      margin: clamp(18px, 3.5svh, 28px) auto 0;
+      width: min(30vw, 132px);
+      height: 100px;
+      margin: clamp(18px, 3.2dvh, 26px) auto 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       overflow: hidden;
-    }
-
-    .reveal-island .island-img {
-      max-height: 120px;
-      opacity: .22;
-      filter: none;
-      animation: none;
-      transform: none;
-      mix-blend-mode: multiply;
+      opacity: .34;
     }
 
     .reveal-line {
-      width: 88px;
+      width: 82px;
       height: 2px;
-      margin: clamp(18px, 3.5svh, 28px) auto 0;
+      margin: clamp(14px, 2.8dvh, 24px) auto 0;
       border-radius: 999px;
       background: var(--olive);
-      opacity: .68;
+      opacity: .58;
     }
 
     .reveal-note {
@@ -426,14 +372,14 @@
 
     .again {
       align-self: center;
-      min-height: 52px;
-      margin-top: clamp(20px, 4svh, 30px);
+      height: 52px;
+      margin-top: clamp(20px, 4dvh, 30px);
       border: 1px solid rgba(37, 75, 107, .14);
       border-radius: 999px;
       padding: 0 24px;
       color: var(--blue);
-      background: rgba(255, 253, 248, .88);
-      box-shadow: 0 14px 32px rgba(37, 75, 107, .09);
+      background: rgba(255, 253, 248, .90);
+      box-shadow: 0 14px 32px rgba(37, 75, 107, .08);
       font-family: var(--font-main);
       font-size: 13px;
       font-weight: 800;
@@ -461,23 +407,14 @@
 
     @media (max-width: 380px) {
       .screen::before, .reveal::before { inset: 12px; border-radius: 24px; }
-      .page { padding-left: 22px; padding-right: 22px; padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
-      .logo { width: 44px; height: 44px; }
-      .script-title { font-size: clamp(50px, 15vw, 78px); }
-      .island-line { width: min(44vw, 180px); max-height: 120px; margin-top: 18px; }
-      .island-img { max-height: 120px; }
-      input, .discover { min-height: 56px; }
-      .table-name { font-size: clamp(62px, 20vw, 104px); }
-      .table-name[data-long="true"] { font-size: clamp(52px, 17vw, 94px); }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      *, *::before, *::after {
-        animation-duration: .001ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: .001ms !important;
-        scroll-behavior: auto !important;
-      }
+      .page { padding-left: 22px; padding-right: 22px; grid-template-rows: 52px minmax(0, 1fr) auto; }
+      .logo { width: 48px; height: 48px; }
+      .script-title { font-size: clamp(48px, 14vw, 70px); }
+      .island-line { width: min(32vw, 125px); height: 96px; margin-top: 14px; }
+      input, .discover { height: 56px; }
+      .table-name { font-size: clamp(62px, 20vw, 106px); }
+      .table-name[data-long="true"] { font-size: clamp(50px, 16vw, 88px); }
+      .reveal-island { width: min(28vw, 112px); height: 84px; }
     }
   </style>
 </head>
@@ -487,7 +424,7 @@
   <main class="screen">
     <div class="page">
       <div class="top-mark">
-        <img class="logo" src="logo.png" alt="Logo matrimonio" />
+        <img class="logo clean-bg" src="logo.png" alt="Logo matrimonio" />
       </div>
 
       <section class="hero" aria-label="Trova la tua cala">
@@ -497,16 +434,14 @@
         </h1>
 
         <div class="island-line" aria-hidden="true">
-          <img class="island-img" src="isola_.png" alt="" />
+          <img class="island-img clean-bg" src="isola.png" alt="" />
         </div>
       </section>
 
       <section class="form-area" aria-label="Ricerca invitato">
         <label class="field-label" for="guestName">Nome e cognome</label>
-        <div class="input-panel">
-          <input id="guestName" autocomplete="name" inputmode="text" placeholder="Es. Gaia Pollastrini" />
-          <button class="discover" id="discover" type="button">Scopri il Tavolo</button>
-        </div>
+        <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>
       </section>
@@ -519,7 +454,7 @@
       <p class="table-kicker">Il tuo tavolo è</p>
       <h2 class="table-name" id="tableName"></h2>
       <div class="reveal-island" aria-hidden="true">
-        <img class="island-img" src="isola.png" alt="" />
+        <img class="island-img clean-bg" src="isola.png" alt="" />
       </div>
       <div class="reveal-line" aria-hidden="true"></div>
       <p class="reveal-note">In che cala cenerai? L’hai appena scoperto.</p>
@@ -528,10 +463,20 @@
   </section>
 
   <script>
-    const DATA_URL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vSlb-0cSIFaGN_BWrn_S9tQoQsdqGH7qYRYQGC3_3wRB-rGzwZoPoxIBNr9l6NmxW9Ont82YKIdGKIR/pub?output=csv";
+    const DATA_URL = "";
 
     const SAMPLE_CSV = `
-
+Nome Cognome,Nome del tavolo
+Gaia Pollastrini,Cala Matano
+Matteo Bergamelli,Cala delle Arene
+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 = {
@@ -674,7 +619,7 @@
       hideTimer = window.setTimeout(() => {
         els.input.value = "";
         els.message.classList.remove("show");
-      }, 360);
+      }, 330);
     }
 
     function discoverTable() {
@@ -704,6 +649,86 @@
         .replaceAll("'", "&#039;");
     }
 
+    // Rimuove fondi bianchi/grigi/quadrettati collegati ai bordi del PNG.
+    // Serve quando un file sembra trasparente ma nel browser mostra ancora il checkerboard.
+    function cleanTransparentImage(img) {
+      if (img.dataset.cleaned === "true" || !img.complete || !img.naturalWidth) return;
+      img.dataset.cleaned = "true";
+
+      const width = img.naturalWidth;
+      const height = img.naturalHeight;
+      const canvas = document.createElement("canvas");
+      const context = canvas.getContext("2d");
+      canvas.width = width;
+      canvas.height = height;
+
+      try {
+        context.drawImage(img, 0, 0);
+        const imageData = context.getImageData(0, 0, width, height);
+        const data = imageData.data;
+        const visited = new Uint8Array(width * height);
+        const queue = [];
+
+        function indexOf(x, y) { return y * width + x; }
+
+        function isBackgroundPixel(i) {
+          const p = i * 4;
+          const r = data[p];
+          const g = data[p + 1];
+          const b = data[p + 2];
+          const a = data[p + 3];
+          if (a < 20) return true;
+
+          const max = Math.max(r, g, b);
+          const min = Math.min(r, g, b);
+          const avg = (r + g + b) / 3;
+          const lowColor = (max - min) < 34;
+
+          return lowColor && avg > 202;
+        }
+
+        function addIfBackground(x, y) {
+          if (x < 0 || y < 0 || x >= width || y >= height) return;
+          const i = indexOf(x, y);
+          if (visited[i] || !isBackgroundPixel(i)) return;
+          visited[i] = 1;
+          queue.push(i);
+        }
+
+        for (let x = 0; x < width; x++) {
+          addIfBackground(x, 0);
+          addIfBackground(x, height - 1);
+        }
+        for (let y = 0; y < height; y++) {
+          addIfBackground(0, y);
+          addIfBackground(width - 1, y);
+        }
+
+        for (let q = 0; q < queue.length; q++) {
+          const i = queue[q];
+          const x = i % width;
+          const y = Math.floor(i / width);
+          data[i * 4 + 3] = 0;
+          addIfBackground(x + 1, y);
+          addIfBackground(x - 1, y);
+          addIfBackground(x, y + 1);
+          addIfBackground(x, y - 1);
+        }
+
+        context.putImageData(imageData, 0, 0);
+        img.src = canvas.toDataURL("image/png");
+      } catch (error) {
+        // Se il browser blocca il canvas per sicurezza, lasciamo l'immagine originale.
+      }
+    }
+
+    function cleanAllImages() {
+      document.querySelectorAll("img.clean-bg").forEach(img => {
+        if (img.complete) cleanTransparentImage(img);
+        else img.addEventListener("load", () => cleanTransparentImage(img), { once: true });
+      });
+    }
+
     els.discover.addEventListener("click", discoverTable);
     els.again.addEventListener("click", hideReveal);
     els.input.addEventListener("keydown", event => {
@@ -730,7 +755,7 @@
       const centerX = window.innerWidth / 2;
       const centerY = window.innerHeight * .36;
 
-      confetti = Array.from({ length: 90 }, () => {
+      confetti = Array.from({ length: 80 }, () => {
         const angle = Math.random() * Math.PI * 2;
         const speed = 3 + Math.random() * 6;
         return {
@@ -743,7 +768,7 @@
           rotation: Math.random() * Math.PI,
           spin: (Math.random() - .5) * .24,
           color: colors[Math.floor(Math.random() * colors.length)],
-          life: 86 + Math.random() * 36
+          life: 82 + Math.random() * 34
         };
       });
 
@@ -789,6 +814,7 @@
     }
 
     window.addEventListener("resize", resizeCanvas);
+    cleanAllImages();
     loadGuests();
   </script>
 </body>