Entrar — INOVERS//DADOS <div class="flex min-h-[80vh] items-center justify-center px-4"> <div class="w-full max-w-sm"> <div class="card font-mono"> <div class="relative overflow-hidden rounded-t-xl border-b border-zinc-200 dark:border-zinc-800"> <canvas id="chuva" aria-hidden="true" class="pointer-events-none absolute inset-0 h-full w-full opacity-[.22] dark:opacity-30"></canvas> <div class="relative flex items-center gap-2.5 px-6 py-5"> <img src="/static/brand/inove-mark.png" alt="" class="h-7 w-7 shrink-0"> <span class="text-lg font-bold tracking-tight">inovers <span class="text-accent-600 dark:text-accent-400">4.1</span></span> </div> </div> <form method="post" class="space-y-4 px-6 py-6" onsubmit="entrando()"> <input type="hidden" name="csrfmiddlewaretoken" value="g8RDnB75Bz32QiO9Y5jap4cayNbd2dmegMzoFcDlirLFUlGljYYrCVmyh6ghKBfl"> <label class="block"> <span class="text-2xs font-semibold uppercase tracking-wide text-zinc-500">E-mail</span> <input name="username" autofocus required autocomplete="email" placeholder="voce@inove.com.br" class="input mt-1 w-full font-mono"> </label> <label class="block"> <span class="text-2xs font-semibold uppercase tracking-wide text-zinc-500">Senha</span> <input type="password" name="password" required autocomplete="current-password" class="input mt-1 w-full font-mono"> </label> <div class="flex items-center justify-between gap-3 text-2xs"> <label class="flex cursor-pointer items-center gap-1.5 text-zinc-600 dark:text-zinc-400"> <input type="checkbox" name="remember" value="1" class="rounded border-zinc-300 dark:border-zinc-600"> lembrar de mim </label> <a href="/senha/" class="text-zinc-500 underline hover:text-brand-700 dark:hover:text-brand-300"> esqueci a senha </a> </div> <input type="hidden" name="next" value="/"> <button class="btn btn-primary w-full justify-center py-2.5 font-mono"> <i data-lucide="log-in" class="ico"></i> entrar </button> </form> </div> <p class="mt-4 text-center text-2xs text-zinc-400">INOVERS//DADOS · 4.1</p> </div> </div> <div id="entrando" class="fixed inset-0 z-50 hidden items-center justify-center bg-white/95 backdrop-blur dark:bg-zinc-950/95"> <div class="w-full max-w-xs px-6 font-mono"> <div class="flex items-center gap-2.5"> <img src="/static/brand/inove-mark.png" alt="" class="h-6 w-6 animate-pulse"> <span class="text-sm font-bold tracking-tight">inovers <span class="text-accent-600 dark:text-accent-400">4.1</span></span> </div> <div class="mt-4 h-1 overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-800"> <div id="entrando-barra" class="h-full w-0 bg-brand-800 transition-all duration-300 dark:bg-brand-400"></div> </div> <p id="entrando-msg" class="mt-3 text-2xs text-zinc-500">autenticando…</p> </div> </div> <script> (function () { var reduz = window.matchMedia("(prefers-reduced-motion: reduce)").matches; // ---------------------------------------------------------------- chuva // Decorativa e barata: roda só no cabeçalho do card, a ~12 quadros por // segundo, e para quando a aba sai de foco — animação de fundo não pode // gastar bateria de quem nem está olhando. var cv = document.getElementById("chuva"); if (cv && !reduz) { var ctx = cv.getContext("2d"); var LETRAS = "01ABCDEFXPINOVERS//4.1{}[]<>=+-*$".split(""); var col = 12, quedas = [], larg = 0, alt = 0; function medir() { var r = cv.getBoundingClientRect(); larg = cv.width = Math.max(r.width, 1); alt = cv.height = Math.max(r.height, 1); quedas = new Array(Math.ceil(larg / col)).fill(0).map(function () { return Math.random() * -20; }); } medir(); window.addEventListener("resize", medir); // a cor vem do tema, não fica cravada: o card é claro ou escuro function cor() { return document.documentElement.classList.contains("dark") ? "rgba(129,178,255,.9)" : "rgba(23,58,120,.9)"; } var timer = setInterval(function () { if (document.hidden) return; ctx.clearRect(0, 0, larg, alt); ctx.fillStyle = cor(); ctx.font = "11px ui-monospace, monospace"; for (var i = 0; i < quedas.length; i++) { ctx.fillText(LETRAS[Math.floor(Math.random() * LETRAS.length)], i * col, quedas[i] * 13); quedas[i] = quedas[i] * 13 > alt && Math.random() > .95 ? 0 : quedas[i] + 1; } }, 80); window.addEventListener("pagehide", function () { clearInterval(timer); }); } // ----------------------------------------------------------- carregando // Aparece no submit e fica até o browser navegar. As mensagens são a // ORDEM real do que a tela inicial monta — não é texto decorativo, é o // motivo de a espera existir. var PASSOS = [ ["autenticando…", 15], ["abrindo sessão…", 30], ["carregando camadas: bronze · silver · gold", 50], ["montando custódia e captação…", 70], ["aplicando de-para…", 85], ["quase lá…", 95], ]; window.entrando = function () { var tela = document.getElementById("entrando"); var barra = document.getElementById("entrando-barra"); var msg = document.getElementById("entrando-msg"); if (!tela) return; tela.classList.remove("hidden"); tela.classList.add("flex"); if (reduz) { barra.style.width = "100%"; return; } var i = 0; (function passo() { if (i >= PASSOS.length) return; msg.textContent = PASSOS[i][0]; barra.style.width = PASSOS[i][1] + "%"; i++; setTimeout(passo, 320); })(); }; })(); </script>