LOGIN FOGO DIGITAL
<!--
Template desenvolvido para o site: https://saniju.com.br
Nome: Template LOGIN FOGO DIGITAL NÍVEL 5
-->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>LOGIN FOGO DIGITAL</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:#000;
font-family:'Segoe UI', sans-serif;
}
/* CANVAS */
canvas{
position:fixed;
top:0;
left:0;
}
/* HEAT OVERLAY */
.heat{
position:fixed;
width:100%;
height:100%;
background: radial-gradient(circle at center, rgba(255,80,0,0.15), transparent);
mix-blend-mode:screen;
animation:heatWave 3s infinite alternate;
}
@keyframes heatWave{
0%{ transform:scale(1); }
100%{ transform:scale(1.03); }
}
/* LOGIN */
.login-box{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:360px;
padding:30px;
border-radius:20px;
background:rgba(255,50,0,0.05);
backdrop-filter:blur(10px);
border:1px solid rgba(255,80,0,0.3);
box-shadow:0 0 60px rgba(255,80,0,0.3);
}
/* INPUT */
.form-control{
background:transparent;
border:1px solid rgba(255,80,0,0.5);
color:#fff;
}
.form-control::placeholder{
color:#ffb199;
}
/* BOTÃO */
.btn-fire{
background:linear-gradient(45deg,#ff2a00,#ff8000);
border:none;
color:#fff;
font-weight:bold;
box-shadow:0 0 20px #ff3300;
animation:glow 1.5s infinite alternate;
}
@keyframes glow{
0%{ box-shadow:0 0 10px #ff3300; }
100%{ box-shadow:0 0 40px #ff5500; }
}
/* STATUS */
.status{
text-align:center;
color:#ffb199;
margin-bottom:10px;
}
/* EXPLOSÃO */
.explosion{
position:fixed;
width:20px;
height:20px;
background:radial-gradient(circle, #fff, #ff4000, transparent);
border-radius:50%;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(1);
opacity:0;
}
.explosion.active{
animation:explode 1s forwards;
}
@keyframes explode{
0%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
100%{ opacity:0; transform:translate(-50%,-50%) scale(40); }
}
</style>
</head>
<body>
<canvas id="fire"></canvas>
<div class="heat"></div>
<div class="login-box">
<div class="status" id="status">Sistema térmico ativo...</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-fire w-100" onclick="login()">ENTRAR</button>
</div>
<div class="explosion" id="boom"></div>
<script>
/* CANVAS FOGO */
const canvas = document.getElementById("fire");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let particles = [];
document.addEventListener("mousemove", e=>{
for(let i=0;i<5;i++){
particles.push({
x:e.clientX,
y:e.clientY,
vx:(Math.random()-0.5)*2,
vy:-Math.random()*3,
size:Math.random()*4+2,
life:60
});
}
});
/* LOOP */
function draw(){
ctx.fillStyle = "rgba(0,0,0,0.2)";
ctx.fillRect(0,0,canvas.width,canvas.height);
particles.forEach((p,i)=>{
p.x += p.vx;
p.y += p.vy;
p.life--;
let gradient = ctx.createRadialGradient(p.x,p.y,0,p.x,p.y,p.size);
gradient.addColorStop(0,"#fff");
gradient.addColorStop(0.2,"#ff6600");
gradient.addColorStop(1,"transparent");
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(p.x,p.y,p.size,0,Math.PI*2);
ctx.fill();
if(p.life <= 0){
particles.splice(i,1);
}
});
requestAnimationFrame(draw);
}
draw();
/* STATUS */
let msgs = [
"Sistema térmico ativo...",
"Monitorando energia...",
"Aguardando autenticação..."
];
let i=0;
setInterval(()=>{
document.getElementById("status").innerText = msgs[i];
i = (i+1)%msgs.length;
},2000);
/* 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 = "Liberando energia...";
// explosão
document.getElementById("boom").classList.add("active");
// multiplicar partículas
for(let i=0;i<200;i++){
particles.push({
x:window.innerWidth/2,
y:window.innerHeight/2,
vx:(Math.random()-0.5)*10,
vy:(Math.random()-0.5)*10,
size:Math.random()*6+2,
life:80
});
}
setTimeout(()=>{
window.location.href = "painel.php"; // ALTERAR
},1000);
}
</script>
</body>
</html>