Template LOGIN ICM
<!--
Template desenvolvido para o site: https://saniju.com.br
Nome: Template LOGIN ICM
-->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Template LOGIN ICM</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;
font-family: 'Segoe UI', sans-serif;
overflow: hidden;
background: linear-gradient(#1c2b4a, #0b1a2e);
}
/* FUNDO TIJOLINHO */
.bg-brick {
position: absolute;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
0deg,
#8c3b1e,
#8c3b1e 20px,
#7a3218 20px,
#7a3218 22px
),
repeating-linear-gradient(
90deg,
#8c3b1e,
#8c3b1e 40px,
#7a3218 40px,
#7a3218 42px
);
z-index: 1;
}
/* JANELAS VERTICAIS */
.window {
position: absolute;
width: 60px;
height: 220px;
background: linear-gradient(#eaffea, #b5ffb5);
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,255,0,0.3);
border: 3px solid #fff;
z-index: 2;
}
.w1 { left: 10%; top: 20%; }
.w2 { left: 20%; top: 25%; }
.w3 { left: 30%; top: 20%; }
/* CARD LOGIN */
.login-container {
position: relative;
z-index: 3;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.login-card {
width: 350px;
padding: 30px;
background: rgba(255,255,255,0.95);
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
transition: transform 1s ease;
}
/* ANIMAÇÃO PORTA */
.open-door {
transform: perspective(1000px) rotateY(-90deg);
}
/* INPUTS */
.form-control {
border-radius: 12px;
padding: 10px;
}
/* BOTÃO */
.btn-login {
background: #dc3545;
color: #fff;
border-radius: 12px;
transition: 0.3s;
}
.btn-login:hover {
background: #b02a37;
}
/* TITULO */
.title {
text-align: center;
font-weight: bold;
margin-bottom: 20px;
color: #333;
}
/* RODAPÉ */
.footer {
text-align: center;
font-size: 12px;
margin-top: 15px;
color: #777;
}
</style>
</head>
<body>
<div class="bg-brick"></div>
<div class="window w1"></div>
<div class="window w2"></div>
<div class="window w3"></div>
<div class="login-container">
<div class="login-card" id="cardLogin">
<h4 class="title">🔐 LOGIN DO SISTEMA</h4>
<input type="text" id="usuario" class="form-control mb-3" placeholder="Usuário">
<input type="password" id="senha" class="form-control mb-3" placeholder="Senha">
<button class="btn btn-login w-100" onclick="fazerLogin()">Entrar</button>
<div class="footer">
Template SANIJU
</div>
</div>
</div>
<script>
function fazerLogin() {
var user = document.getElementById('usuario').value;
var pass = document.getElementById('senha').value;
if(user === "" || pass === "") {
alert("Preencha usuário e senha!");
return;
}
// ANIMAÇÃO DE PORTA
var card = document.getElementById('cardLogin');
card.classList.add("open-door");
// REDIRECIONAMENTO (AJUSTE AQUI)
setTimeout(function(){
window.location.href = "painel.php"; // << MUDE PARA SUA PÁGINA
}, 1000);
}
</script>
</body>
</html>