LOGIN SCANNER
<!--
Template desenvolvido para o site: https://saniju.com.br
Nome: Template LOGIN SCANNER NÍVEL 5 (VERSÃO ESCURA)
-->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>LOGIN SCANNER</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
margin: 0;
overflow: hidden;
background: radial-gradient(circle at center, #010203, #000000);
font-family: 'Segoe UI', sans-serif;
color: #0ff;
}
/* PARTÍCULAS */
canvas {
position: fixed;
top: 0;
left: 0;
}
/* GRID HUD */
.grid {
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(#00ffff08 1px, transparent 1px),
linear-gradient(90deg, #00ffff08 1px, transparent 1px);
background-size: 40px 40px;
}
/* CONTAINER LOGIN */
.login-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 360px;
padding: 30px;
border-radius: 20px;
background: rgba(0, 255, 255, 0.04);
backdrop-filter: blur(15px);
border: 1px solid #00ffff30;
box-shadow: 0 0 40px #00ffff20;
}
/* SCANNER */
.scanner {
position: absolute;
width: 100%;
height: 3px;
background: linear-gradient(90deg, transparent, #00ffff, transparent);
animation: scan 2s infinite;
}
@keyframes scan {
0% { top: 0; opacity: 0; }
50% { opacity: 1; }
100% { top: 100%; opacity: 0; }
}
/* INPUT */
.form-control {
background: transparent;
border: 1px solid #00ffff30;
color: #0ff;
border-radius: 10px;
}
.form-control::placeholder {
color: #0ff6;
}
/* BOTÃO */
.btn-login {
background: transparent;
border: 1px solid #0ff;
color: #0ff;
border-radius: 10px;
transition: 0.3s;
}
.btn-login:hover {
background: #0ff;
color: #000;
}
/* STATUS */
.status {
text-align: center;
margin-bottom: 10px;
font-size: 14px;
color: #0ff;
}
/* TEXTO CENTRAL */
.authorized {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.8);
font-size: 28px;
color: #00ffcc;
opacity: 0;
text-shadow: 0 0 20px #00ffcc;
transition: 0.5s;
}
.show-auth {
transform: translate(-50%, -50%) scale(1.2);
opacity: 1;
}
</style>
</head>
<body>
<canvas id="particles"></canvas>
<div class="grid"></div>
<div class="login-box" id="box">
<div class="scanner"></div>
<div class="status" id="status">Inicializando sistema...</div>
<input type="text" id="user" class="form-control mb-3" placeholder="Usuário">
<input type="password" id="pass" class="form-control mb-3" placeholder="Senha">
<button class="btn btn-login w-100" onclick="login()">ACESSAR SISTEMA</button>
</div>
<div class="authorized" id="auth">⏳ VERIFICANDO ACESSO...</div>
<script>
/* PARTICULAS */
const canvas = document.getElementById("particles");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let particles = [];
for(let i=0;i<80;i++){
particles.push({
x: Math.random()*canvas.width,
y: Math.random()*canvas.height,
vx: Math.random()*1-0.5,
vy: Math.random()*1-0.5
});
}
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillStyle = "#00ffff";
particles.forEach(p=>{
p.x += p.vx;
p.y += p.vy;
if(p.x<0||p.x>canvas.width) p.vx *= -1;
if(p.y<0||p.y>canvas.height) p.vy *= -1;
ctx.fillRect(p.x, p.y, 2, 2);
});
requestAnimationFrame(draw);
}
draw();
/* STATUS ROTATIVO */
let mensagens = [
"Inicializando sistema...",
"Verificando integridade...",
"Aguardando autenticação...",
"Sistema pronto"
];
let i = 0;
setInterval(()=>{
document.getElementById("status").innerText = mensagens[i];
i = (i+1) % mensagens.length;
}, 2000);
/* PARALLAX */
document.addEventListener("mousemove", e=>{
let x = (window.innerWidth/2 - e.clientX)/50;
let y = (window.innerHeight/2 - e.clientY)/50;
document.getElementById("box").style.transform =
`translate(-50%, -50%) rotateX(${y}deg) rotateY(${x}deg)`;
});
/* LOGIN */
function login(){
let u = document.getElementById("user").value;
let p = document.getElementById("pass").value;
if(!u || !p){
alert("Preencha os dados!");
return;
}
document.getElementById("status").innerText = "Verificando acesso...";
document.querySelector(".scanner").style.animation = "scan 1s infinite";
setTimeout(()=>{
document.getElementById("auth").classList.add("show-auth");
setTimeout(()=>{
window.location.href = "painel.php"; // ALTERAR
}, 1200);
}, 1500);
}
</script>
</body>
</html>