@kaikybrofc/omnizap-system 2.3.1 → 2.3.3

package/public/login/index.html

@@ -25,21 +25,25 @@
     </script>
     <style>
       :root {
-        --bg: #0f172a;
-        --bg-2: #111827;
-        --card: #1e293bcf;
-        --line: rgba(255, 255, 255, 0.05);
+        --bg: #070f20;
+        --bg-2: #0b1730;
+        --card: #10213dcc;
+        --line: rgba(148, 163, 184, 0.28);
         --text: #f8fafc;
-        --muted: #94a3b8;
+        --muted: #9eb1cf;
         --primary: #22c55e;
         --error: #f87171;
-        --radius: 18px;
+        --radius: 20px;
       }
 
       * {
         box-sizing: border-box;
       }
 
+      [hidden] {
+        display: none !important;
+      }
+
       html,
       body {
         margin: 0;
@@ -50,28 +54,28 @@
       body {
         color: var(--text);
         font-family: 'Manrope', system-ui, sans-serif;
-        background: radial-gradient(55rem 22rem at -10% -10%, #2563eb30, transparent 60%), radial-gradient(55rem 22rem at 110% -8%, #7c3aed22, transparent 56%), linear-gradient(160deg, var(--bg), var(--bg-2));
+        background: radial-gradient(56rem 25rem at -8% -16%, #2563eb2f, transparent 62%), radial-gradient(54rem 22rem at 108% -8%, #22c55e1f, transparent 60%), linear-gradient(165deg, var(--bg), var(--bg-2));
         min-height: 100vh;
         display: flex;
         align-items: center;
         justify-content: center;
-        padding: 24px 14px;
+        padding: 28px 14px;
       }
 
       .page {
-        width: min(760px, 100%);
-        border: 1px solid rgba(255, 255, 255, 0.05);
-        border-radius: 24px;
-        background: linear-gradient(150deg, #111827e8, #1e293bee);
+        width: min(780px, 100%);
+        border: 1px solid rgba(148, 163, 184, 0.18);
+        border-radius: 26px;
+        background: linear-gradient(150deg, #0a1429f0, #0f1f3ce8);
         box-shadow:
-          0 18px 44px #0209166e,
-          inset 0 1px 0 #95c1ff1a;
+          0 24px 52px #02091682,
+          inset 0 1px 0 #95c1ff1c;
         overflow: hidden;
       }
 
       .head {
-        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-        padding: 20px 22px;
+        border-bottom: 1px solid rgba(148, 163, 184, 0.16);
+        padding: 18px 24px;
         display: flex;
         align-items: center;
         justify-content: flex-start;
@@ -94,56 +98,79 @@
         width: 30px;
         height: 30px;
         border-radius: 50%;
-        border: 1px solid rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(148, 163, 184, 0.24);
         object-fit: cover;
       }
 
       .btn {
-        border: 1px solid var(--line);
-        border-radius: 12px;
-        background: #101a2f;
-        color: var(--text);
+        border: 1px solid #385180;
+        border-radius: 13px;
+        background: #122446;
+        color: #d6e8ff;
         text-decoration: none;
-        padding: 9px 12px;
+        padding: 11px 14px;
         font-size: 14px;
-        font-weight: 600;
+        font-weight: 700;
+        text-align: center;
         transition:
           transform 0.2s ease,
           border-color 0.2s ease,
-          box-shadow 0.2s ease;
+          box-shadow 0.2s ease,
+          background-color 0.2s ease;
         cursor: pointer;
       }
 
       .btn:hover {
-        transform: translateY(-1px);
-        border-color: #2563eb;
-        box-shadow: 0 10px 20px #02091650;
+        transform: translateY(-2px);
+        border-color: #60a5fa;
+        box-shadow: 0 14px 28px #02091666;
       }
 
       .btn.primary {
-        border-color: transparent;
-        background: #22c55e;
-        color: #0f172a;
-        box-shadow: 0 10px 22px #22c55e30;
+        border-color: #2fdc74;
+        background: linear-gradient(98deg, #22c55e, #1ea853);
+        color: #0a1a11;
+        box-shadow:
+          0 0 0 1px #6ee7b733 inset,
+          0 14px 26px #22c55e42,
+          0 0 22px #2563eb2f;
       }
 
       .btn.primary:hover {
-        background: #16a34a;
+        background: linear-gradient(98deg, #2ad668, #1fa857);
+        box-shadow:
+          0 0 0 1px #86efac44 inset,
+          0 18px 30px #22c55e4f,
+          0 0 24px #2563eb40;
       }
 
       .content {
-        padding: 24px 22px;
+        padding: 30px 24px 26px;
         display: grid;
-        gap: 14px;
+        gap: 16px;
+      }
+
+      .eyebrow {
+        margin: 0;
+        width: fit-content;
+        border: 1px solid #315486;
+        border-radius: 999px;
+        padding: 6px 11px;
+        background: #10264a;
+        color: #c0d9ff;
+        font-size: 12px;
+        font-weight: 700;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
       }
 
       h1 {
         margin: 0;
         font-family: 'Sora', sans-serif;
-        font-size: clamp(26px, 3.6vw, 36px);
-        line-height: 1.08;
+        font-size: clamp(30px, 4vw, 40px);
+        line-height: 1.04;
         letter-spacing: -0.02em;
-        background: linear-gradient(90deg, #eef5ff 0%, #60a5fa 46%, #a78bfa 100%);
+        background: linear-gradient(90deg, #f5f9ff 0%, #9cc8ff 46%, #bbd8ff 100%);
         -webkit-background-clip: text;
         background-clip: text;
         color: transparent;
@@ -151,26 +178,47 @@
 
       .lead {
         margin: 0;
-        color: #bfd1ea;
-        line-height: 1.6;
-        font-size: 16px;
+        color: #c8d9f4;
+        line-height: 1.55;
+        font-size: 17px;
       }
 
       .card {
-        border: 1px solid #334f7bc7;
+        border: 1px solid #365584c4;
         border-radius: var(--radius);
-        background: var(--card);
-        padding: 16px;
+        background: linear-gradient(150deg, var(--card), #0d1c37d9);
+        padding: 20px;
         display: grid;
-        gap: 10px;
-        backdrop-filter: blur(8px);
+        gap: 12px;
+        backdrop-filter: blur(12px);
+        box-shadow:
+          0 16px 32px #02091652,
+          inset 0 1px 0 #9cc8ff1c;
       }
 
       .status {
         margin: 0;
-        color: #dce8fa;
-        font-size: 15px;
+        width: fit-content;
+        border: 1px solid #4170aa;
+        border-radius: 999px;
+        background: #0f274b;
+        color: #e6f1ff;
+        padding: 8px 12px;
+        font-size: 14px;
+        font-weight: 700;
         line-height: 1.5;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .status::before {
+        content: '';
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #60a5fa;
+        box-shadow: 0 0 0 4px #60a5fa24;
       }
 
       .hint {
@@ -182,57 +230,196 @@
 
       .error {
         margin: 0;
-        border: 1px solid #a74949;
+        border: 1px solid #b15050;
         border-radius: 12px;
-        background: #3b181899;
+        background: #411b1b9e;
         color: #ffd7d7;
-        padding: 9px 10px;
+        padding: 10px 12px;
+        font-size: 14px;
+      }
+
+      .already-logged {
+        border: 1px solid #2f9461bf;
+        border-radius: 14px;
+        background: linear-gradient(150deg, #0f2f21cc, #103126d9);
+        padding: 14px;
+        display: grid;
+        gap: 6px;
+        box-shadow:
+          0 14px 26px #22c55e1e,
+          inset 0 1px 0 #7af3ab33;
+      }
+
+      .already-logged-title {
+        margin: 0;
+        font-family: 'Sora', sans-serif;
+        font-size: clamp(20px, 2.4vw, 24px);
+        line-height: 1.15;
+        color: #e7fff1;
+        letter-spacing: -0.01em;
+      }
+
+      .already-logged-detail {
+        margin: 0;
+        color: #c5f5d9;
         font-size: 14px;
+        line-height: 1.5;
       }
 
       .google-area {
-        border: 1px dashed #3c5b8d;
+        border: 1px dashed #456da4;
         border-radius: 14px;
-        background: #111827a3;
-        padding: 12px;
+        background: #0d1b34cc;
+        padding: 14px;
         display: grid;
-        gap: 10px;
+        gap: 12px;
         align-items: stretch;
       }
 
-      html:not([data-login-has-wa='1']) #google-login-area {
-        display: none !important;
+      .google-button-shell {
+        border: 1px solid #bfd5ff6b;
+        border-radius: 14px;
+        background: #ffffff;
+        padding: 8px;
+        overflow: hidden;
+        box-shadow:
+          0 8px 18px #02091624,
+          inset 0 1px 0 #ffffff;
+        transition:
+          transform 0.2s ease,
+          box-shadow 0.2s ease;
+      }
+
+      .google-button-shell:hover {
+        transform: translateY(-1px);
+        box-shadow:
+          0 12px 22px #0209163b,
+          inset 0 1px 0 #ffffff;
       }
 
       [data-google-login-button] {
         width: 100%;
-        min-height: 40px;
+        max-width: 100%;
+        min-height: 44px;
+        overflow: hidden;
+      }
+
+      [data-google-login-button] > div,
+      [data-google-login-button] iframe {
+        max-width: 100% !important;
       }
 
       .google-state {
         margin: 0;
-        color: var(--muted);
-        font-size: 13px;
+        color: #9db6d9;
+        font-size: 12px;
       }
 
-      .summary {
-        border: 1px solid #2b8b5d9c;
+      .consent {
+        border: 1px solid #3d5b87;
         border-radius: 12px;
-        background: #11302294;
-        padding: 10px;
+        background: #0f213fcf;
+        padding: 12px;
         display: grid;
         gap: 6px;
-        color: #dfffe8;
+        transition:
+          border-color 0.2s ease,
+          box-shadow 0.2s ease,
+          background-color 0.2s ease;
+      }
+
+      .consent:hover {
+        border-color: #6ea4ef;
+      }
+
+      .consent.is-checked {
+        border-color: #22c55e;
+        background: #102f21d4;
+        box-shadow: inset 0 0 0 1px #22c55e33;
+      }
+
+      .consent-row {
+        display: grid;
+        grid-template-columns: 22px 1fr;
+        align-items: start;
+        gap: 10px;
+        margin: 0;
+        color: #deebff;
         font-size: 14px;
+        line-height: 1.5;
+        cursor: pointer;
+      }
+
+      .consent-row input {
+        margin: 0;
+        width: 18px;
+        height: 18px;
+        accent-color: #22c55e;
+        margin-top: 1px;
+      }
+
+      .consent-row a {
+        color: #a7ccff;
+        font-weight: 600;
+      }
+
+      .consent-row a:hover {
+        color: #d5e7ff;
+      }
+
+      .consent-error {
+        margin: 0;
+        color: #fecaca;
+        font-size: 12px;
+      }
+
+      html:not([data-login-has-wa='1']) #google-login-area {
+        display: none !important;
+      }
+
+      .summary {
+        border: 1px solid #2f9461bf;
+        border-radius: 12px;
+        background: linear-gradient(150deg, #113223cf, #0f2c1fd4);
+        padding: 12px;
+        display: grid;
+        gap: 4px;
+        color: #dcffe9;
+        font-size: 14px;
+      }
+
+      .summary-title {
+        margin: 0;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 13px;
+        font-weight: 700;
+        letter-spacing: 0.02em;
+        color: #b8f7d1;
+      }
+
+      .summary-title::before {
+        content: '';
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #22c55e;
+        box-shadow: 0 0 0 4px #22c55e2b;
+      }
+
+      .summary[data-state='pending'] .summary-title::before {
+        background: #facc15;
+        box-shadow: 0 0 0 4px #facc152b;
       }
 
       .whatsapp-cta {
-        border: 1px solid #2d7d57a8;
+        border: 1px solid #355d90bf;
         border-radius: 14px;
-        background: #1130228f;
-        padding: 12px;
+        background: linear-gradient(150deg, #0d1f3bcc, #12223fa8);
+        padding: 13px;
         display: grid;
-        gap: 10px;
+        gap: 11px;
       }
 
       html[data-login-has-wa='1'] #whatsapp-cta {
@@ -241,28 +428,135 @@
 
       .whatsapp-cta p {
         margin: 0;
-        color: #d5ffdf;
+        color: #d5e6ff;
         font-size: 14px;
         line-height: 1.5;
       }
 
       .btn.whatsapp {
-        border-color: #1e9a5f;
-        background: linear-gradient(90deg, #22c55e, #16a34a);
-        color: #04230f;
+        border-color: #3a67a6;
+        background: #16315a;
+        color: #d9ebff;
         text-align: center;
       }
 
       .whatsapp-meta {
         margin: 0;
-        color: #b7e9ca;
+        color: #9eb5d8;
         font-size: 13px;
       }
 
       .actions {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 8px;
+        display: grid;
+        gap: 10px;
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      }
+
+      .success-celebration {
+        position: fixed;
+        inset: 0;
+        z-index: 80;
+        display: grid;
+        place-items: center;
+        padding: 16px;
+        pointer-events: none;
+        opacity: 0;
+        visibility: hidden;
+        transition:
+          opacity 0.25s ease,
+          visibility 0.25s ease;
+      }
+
+      .success-celebration::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(circle at center, #22c55e24 0%, #0b152bcc 52%, #070f20eb 100%);
+        backdrop-filter: blur(2px);
+      }
+
+      .success-celebration.is-visible {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      .success-card {
+        position: relative;
+        width: min(360px, 100%);
+        border: 1px solid #4a76b4;
+        border-radius: 18px;
+        background: linear-gradient(155deg, #112241f0, #102238e8);
+        box-shadow:
+          0 22px 40px #02091675,
+          inset 0 1px 0 #8cb8ff36;
+        padding: 18px 16px;
+        display: grid;
+        justify-items: center;
+        gap: 10px;
+        transform: translateY(18px) scale(0.95);
+        opacity: 0;
+        transition:
+          transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
+          opacity 0.35s ease;
+      }
+
+      .success-celebration.is-visible .success-card {
+        transform: translateY(0) scale(1);
+        opacity: 1;
+      }
+
+      .success-icon {
+        width: 76px;
+        height: 76px;
+        border-radius: 50%;
+        border: 1px solid #44c97a;
+        background: linear-gradient(140deg, #0e3122, #12492f);
+        display: grid;
+        place-items: center;
+        box-shadow:
+          0 0 0 10px #22c55e14,
+          0 10px 22px #22c55e3b;
+      }
+
+      .success-check-svg {
+        width: 34px;
+        height: 34px;
+      }
+
+      .success-check {
+        fill: none;
+        stroke: #ecfff3;
+        stroke-width: 2.6;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-dasharray: 40;
+        stroke-dashoffset: 40;
+      }
+
+      .success-celebration.is-visible .success-check {
+        animation: loginSuccessDraw 0.48s ease 0.12s forwards;
+      }
+
+      .success-title {
+        margin: 0;
+        font-family: 'Sora', sans-serif;
+        font-size: 20px;
+        font-weight: 700;
+        color: #effaf3;
+        letter-spacing: -0.02em;
+      }
+
+      .success-subtitle {
+        margin: 0;
+        font-size: 14px;
+        color: #c0d4f2;
+        text-align: center;
+      }
+
+      @keyframes loginSuccessDraw {
+        to {
+          stroke-dashoffset: 0;
+        }
       }
 
       @media (max-width: 620px) {
@@ -271,12 +565,27 @@
         }
 
         .content {
-          padding: 18px 16px;
+          padding: 22px 16px 18px;
+        }
+
+        .card {
+          padding: 16px;
+        }
+
+        .actions {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .success-celebration,
+        .success-card {
+          transition: none;
         }
 
-        .actions .btn {
-          width: 100%;
-          text-align: center;
+        .success-celebration.is-visible .success-check {
+          animation: none;
+          stroke-dashoffset: 0;
         }
       }
     </style>
@@ -291,37 +600,64 @@
       </header>
 
       <section class="content">
-        <h1>Login da Plataforma</h1>
-        <p class="lead">Entre com Google para vincular sua conta ao seu numero do WhatsApp e liberar os recursos web do OmniZap.</p>
+        <p class="eyebrow">Login seguro OmniZap</p>
+        <h1>Acesse sua conta</h1>
+        <p class="lead">Vincule seu WhatsApp e libere os recursos do OmniZap.</p>
 
-        <article class="card">
-          <p id="login-status" class="status">Carregando estado de login...</p>
+        <article id="login-main-card" class="card">
+          <p id="login-status" class="status">Verificando conta Google...</p>
           <p id="login-hint" class="hint"></p>
           <p id="login-error" class="error" hidden></p>
+          <div id="already-logged-banner" class="already-logged" hidden aria-live="polite" aria-atomic="true">
+            <p id="already-logged-title" class="already-logged-title">Voce ja esta logado neste navegador.</p>
+            <p id="already-logged-detail" class="already-logged-detail">Nao e necessario fazer login novamente. Escolha uma opcao abaixo.</p>
+          </div>
 
           <div id="google-login-area" class="google-area" hidden>
-            <div data-google-login-button></div>
+            <div id="google-login-button-shell" class="google-button-shell" hidden>
+              <div data-google-login-button></div>
+            </div>
             <p id="google-login-state" class="google-state">Carregando login Google...</p>
-          </div>
-
-          <div id="login-summary" class="summary" hidden>
-            <div id="login-summary-owner">WhatsApp vinculado:</div>
-          </div>
-
-          <div id="whatsapp-cta" class="whatsapp-cta" hidden>
-            <p>Abriu esta página direto? Inicie a conversa no WhatsApp para gerar o link com seu número automaticamente.</p>
-            <a id="whatsapp-cta-link" class="btn whatsapp" href="https://wa.me/?text=iniciar" target="_blank" rel="noreferrer noopener"> Abrir WhatsApp e enviar "iniciar" </a>
-            <p id="whatsapp-cta-meta" class="whatsapp-meta"></p>
-          </div>
-
-          <div id="login-success-actions" class="actions" hidden>
-            <a id="login-success-chat" class="btn primary" href="https://wa.me/?text=%2Fmenu" target="_blank" rel="noreferrer noopener"> Voltar ao chat do bot (/menu) </a>
-            <a id="login-success-home" class="btn" href="/">Voltar para Home</a>
+            <div id="login-consent-box" class="consent">
+              <label class="consent-row" for="login-consent-checkbox">
+                <input id="login-consent-checkbox" type="checkbox" />
+                <span> Li e aceito os <a href="/termos-de-uso/" target="_blank" rel="noreferrer noopener">Termos de Uso</a> e a <a href="/termos-de-uso/#politica-de-privacidade" target="_blank" rel="noreferrer noopener">Politica de Privacidade</a>. </span>
+              </label>
+              <p id="login-consent-error" class="consent-error" hidden></p>
+            </div>
           </div>
         </article>
+
+        <div id="login-summary" class="summary" hidden>
+          <p id="login-summary-title" class="summary-title">WhatsApp conectado</p>
+          <div id="login-summary-owner"></div>
+        </div>
+
+        <div id="whatsapp-cta" class="whatsapp-cta" hidden>
+          <p>Para liberar o login neste navegador, inicie no WhatsApp e gere seu link seguro.</p>
+          <a id="whatsapp-cta-link" class="btn whatsapp" href="https://wa.me/?text=iniciar" target="_blank" rel="noreferrer noopener"> Gerar link de login no WhatsApp </a>
+          <p id="whatsapp-cta-meta" class="whatsapp-meta"></p>
+        </div>
+
+        <div id="login-success-actions" class="actions" hidden>
+          <a id="login-success-home" class="btn primary" href="/user/">Ir para o painel</a>
+          <a id="login-success-chat" class="btn" href="https://wa.me/?text=%2Fmenu" target="_blank" rel="noreferrer noopener">Abrir WhatsApp do bot</a>
+        </div>
       </section>
     </main>
 
-    <script type="module" src="/js/apps/loginApp.js?v=20260228f"></script>
+    <div id="login-success-celebration" class="success-celebration" hidden aria-live="polite" aria-atomic="true">
+      <div class="success-card" role="status">
+        <div class="success-icon" aria-hidden="true">
+          <svg class="success-check-svg" viewBox="0 0 24 24" focusable="false">
+            <path class="success-check" d="M5 12.5l4.2 4.2L19 7.3" />
+          </svg>
+        </div>
+        <p class="success-title">Login concluido</p>
+        <p class="success-subtitle">Sua conta foi vinculada com sucesso.</p>
+      </div>
+    </div>
+
+    <script type="module" src="/js/apps/loginApp.js?v=20260301j"></script>
   </body>
 </html>