LOGIN 2
<!--
Template desenvolvido para o site: https://saniju.com.br
Nome: Template LOGIN ICM2
-->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>LOGIN 2</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;
height: 100vh;
overflow: hidden;
background: radial-gradient(circle at center, #02040a, #000000);
font-family: 'Segoe UI', sans-serif;
}
/* FUNDO ESTRELAS */
.stars {
position: absolute;
width: 100%;
height: 100%;
background: url('https://www.transparenttextures.com/patterns/stardust.png');
opacity: 0.3;
}
/* LOGO PIXEL */
.pixel-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: grid;
grid-template-columns: repeat(20, 6px);
grid-gap: 2px;
transition: transform 0.2s;
}
/* PIXEL */
.pixel {
width: 6px;
height: 6px;
background: #ffffff;
opacity: 0.8;
box-shadow: 0 0 8px #fff;
}
/* FORM LOGIN */
.login-box {
position: relative;
z-index: 2;
width: 350px;
margin: auto;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,0.05);
backdrop-filter: blur(15px);
padding: 30px;
border-radius: 20px;
box-shadow: 0 0 40px rgba(255,255,255,0.1);
}
/* INPUT */
.form-control {
background: rgba(255,255,255,0.08);
border: none;
color: #fff;
border-radius: 12px;
}
.form-control::placeholder {
color: #ccc;
}
/* BOTÃO */
.btn-login {
background: linear-gradient(45deg, #ffffff, #bbbbbb);
border: none;
border-radius: 12px;
color: #000;
font-weight: bold;
}
/* ANIMAÇÃO SOL */
.sun-effect {
position: fixed;
width: 50px;
height: 50px;
background: radial-gradient(circle, #fff, transparent);
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
z-index: 999;
animation: expandSun 1s forwards;
}
@keyframes expandSun {
to {
transform: translate(-50%, -50%) scale(40);
opacity: 0;
}
}
/* TITULO */
.title {
color: #fff;
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="stars"></div>
<!-- LOGO PIXEL (SIMBOLO SIMPLES RECRIADO) -->
<div class="pixel-logo" id="logo">
<!-- Forma curva simulando o símbolo -->
<!-- linha 1 -->
<div class="pixel" style="grid-column:5"></div>
<div class="pixel" style="grid-column:6"></div>
<!-- linha 2 -->
<div class="pixel" style="grid-column:6"></div>
<div class="pixel" style="grid-column:7"></div>
<!-- linha 3 -->
<div class="pixel" style="grid-column:7"></div>
<div class="pixel" style="grid-column:8"></div>
<!-- linha 4 -->
<div class="pixel" style="grid-column:8"></div>
<div class="pixel" style="grid-column:9"></div>
<!-- linha 5 -->
<div class="pixel" style="grid-column:9"></div>
<div class="pixel" style="grid-column:10"></div>
<!-- linha 6 -->
<div class="pixel" style="grid-column:10"></div>
<div class="pixel" style="grid-column:11"></div>
<!-- linha 7 -->
<div class="pixel" style="grid-column:11"></div>
<div class="pixel" style="grid-column:12"></div>
</div>
<!-- LOGIN -->
<div class="login-box">
<h4 class="title">LOGIN</h4>
<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>
<script>
/* PARALLAX MOUSE */
document.addEventListener("mousemove", function(e) {
var logo = document.getElementById("logo");
var x = (window.innerWidth / 2 - e.clientX) / 25;
var y = (window.innerHeight / 2 - e.clientY) / 25;
logo.style.transform = "translate(-50%, -50%) translate(" + x + "px," + y + "px) rotate(" + x + "deg)";
});
/* LOGIN */
function login() {
var u = document.getElementById("user").value;
var p = document.getElementById("pass").value;
if(u === "" || p === "") {
alert("Preencha os dados!");
return;
}
// CRIA SOL
var sun = document.createElement("div");
sun.className = "sun-effect";
document.body.appendChild(sun);
setTimeout(function(){
window.location.href = "painel.php"; // ALTERAR
}, 800);
}
</script>
</body>
</html>