Template LOGIN Galáxia
<!--
Template desenvolvido para o site: https://saniju.com.br
Nome: Template LOGIN Galáxia Interativa
-->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Template LOGIN Galáxia</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;
color:#fff;
}
/* CANVAS */
canvas{
position:fixed;
top:0;
left:0;
}
/* LOGIN */
.login-box{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:360px;
padding:30px;
border-radius:20px;
background:rgba(255,255,255,0.05);
backdrop-filter:blur(15px);
border:1px solid rgba(255,255,255,0.1);
box-shadow:0 0 40px rgba(255,255,255,0.08);
}
/* INPUT */
.form-control{
background:transparent;
border:1px solid rgba(255,255,255,0.2);
color:#fff;
}
.form-control::placeholder{
color:#aaa;
}
/* BOTÃO */
.btn-login{
background:#fff;
color:#000;
border:none;
font-weight:bold;
}
/* STATUS */
.status{
text-align:center;
font-size:13px;
margin-bottom:10px;
color:#ccc;
}
/* WARP */
.warp{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
background:radial-gradient(circle, white, transparent);
opacity:0;
z-index:999;
}
.warp.active{
animation:warpAnim 1.2s forwards;
}
@keyframes warpAnim{
0%{ opacity:0; transform:scale(0.2);}
100%{ opacity:1; transform:scale(8);}
}
</style>
</head>
<body>
<canvas id="stars"></canvas>
<div class="login-box" id="box">
<div class="status" id="status">Conectando ao universo...</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()">Entrar</button>
</div>
<div class="warp" id="warp"></div>
<script>
/* CANVAS */
const canvas = document.getElementById("stars");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let mouse = {x:canvas.width/2, y:canvas.height/2};
document.addEventListener("mousemove", e=>{
mouse.x = e.clientX;
mouse.y = e.clientY;
});
/* ESTRELAS */
let stars = [];
for(let i=0;i<300;i++){
stars.push({
x:Math.random()*canvas.width,
y:Math.random()*canvas.height,
vx:(Math.random()-0.5)*0.5,
vy:(Math.random()-0.5)*0.5,
size:Math.random()*2
});
}
/* LOOP */
function draw(){
ctx.fillStyle = "rgba(0,0,0,0.4)";
ctx.fillRect(0,0,canvas.width,canvas.height);
stars.forEach(s=>{
// gravidade do mouse
let dx = mouse.x - s.x;
let dy = mouse.y - s.y;
let dist = Math.sqrt(dx*dx + dy*dy);
if(dist < 150){
s.vx += dx * 0.0005;
s.vy += dy * 0.0005;
}
s.x += s.vx;
s.y += s.vy;
// limites
if(s.x<0||s.x>canvas.width) s.vx *= -1;
if(s.y<0||s.y>canvas.height) s.vy *= -1;
// desenhar estrela
ctx.fillStyle = "#fff";
ctx.fillRect(s.x, s.y, s.size, s.size);
// conexões
stars.forEach(o=>{
let dx2 = s.x - o.x;
let dy2 = s.y - o.y;
let d = Math.sqrt(dx2*dx2 + dy2*dy2);
if(d < 80){
ctx.strokeStyle = "rgba(255,255,255,0.05)";
ctx.beginPath();
ctx.moveTo(s.x,s.y);
ctx.lineTo(o.x,o.y);
ctx.stroke();
}
});
});
requestAnimationFrame(draw);
}
draw();
/* STATUS */
let msgs = [
"Conectando ao universo...",
"Sincronizando estrelas...",
"Aguardando autenticação...",
"Sistema pronto"
];
let i=0;
setInterval(()=>{
document.getElementById("status").innerText = msgs[i];
i = (i+1)%msgs.length;
},2000);
/* PARALLAX */
document.addEventListener("mousemove", e=>{
let x = (window.innerWidth/2 - e.clientX)/40;
let y = (window.innerHeight/2 - e.clientY)/40;
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 = "Entrando em hiper espaço...";
// efeito warp
document.getElementById("warp").classList.add("active");
// acelerar estrelas
stars.forEach(s=>{
s.vx *= 8;
s.vy *= 8;
});
setTimeout(()=>{
window.location.href = "painel.php"; // ALTERAR
},1200);
}
</script>
</body>
</html>