Template LOGIN Vidro LĂquido
<!--
Template desenvolvido para o site: https://saniju.com.br
Nome: Template LOGIN Vidro LĂquido
-->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Template LOGIN Vidro LĂquido</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>
:root{
--bg1: #07111f;
--bg2: #0b1d33;
--bg3: #11304f;
--glass: rgba(255,255,255,0.08);
--glass-border: rgba(255,255,255,0.16);
--glass-highlight: rgba(255,255,255,0.22);
--text: rgba(255,255,255,0.94);
--muted: rgba(255,255,255,0.68);
--shadow: rgba(0,0,0,0.35);
--accent: rgba(255,255,255,0.22);
--accent-2: rgba(173, 225, 255, 0.28);
}
*{
box-sizing: border-box;
}
html, body{
width:100%;
height:100%;
margin:0;
overflow:hidden;
font-family: "Segoe UI", Arial, sans-serif;
background:
radial-gradient(circle at 20% 20%, rgba(100,170,255,0.18), transparent 28%),
radial-gradient(circle at 80% 25%, rgba(160,220,255,0.10), transparent 22%),
radial-gradient(circle at 50% 85%, rgba(90,180,255,0.16), transparent 30%),
linear-gradient(135deg, var(--bg1), var(--bg2) 45%, var(--bg3));
color: var(--text);
}
body::before{
content:"";
position:fixed;
inset:-8%;
background:
radial-gradient(circle at 30% 35%, rgba(255,255,255,0.05), transparent 18%),
radial-gradient(circle at 70% 65%, rgba(255,255,255,0.04), transparent 16%),
radial-gradient(circle at 60% 20%, rgba(255,255,255,0.03), transparent 14%);
filter: blur(30px);
animation: floatFog 14s ease-in-out infinite alternate;
pointer-events:none;
z-index:0;
}
@keyframes floatFog{
0%{ transform: translate3d(-1.5%, -1%, 0) scale(1); }
100%{ transform: translate3d(1.5%, 1.2%, 0) scale(1.04); }
}
.scene{
position:relative;
width:100%;
height:100%;
isolation:isolate;
}
.liquid-layer{
position:absolute;
inset:auto;
border-radius:50%;
filter: blur(12px);
opacity:.85;
mix-blend-mode: screen;
pointer-events:none;
z-index:1;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.blob1{
width:36vw;
height:36vw;
min-width:320px;
min-height:320px;
left:-8vw;
top:-10vh;
background:
radial-gradient(circle at 35% 35%, rgba(190,235,255,0.34), rgba(120,180,255,0.12) 45%, rgba(255,255,255,0.02) 72%);
animation-name: blobMove1;
animation-duration: 11s;
}
.blob2{
width:34vw;
height:34vw;
min-width:300px;
min-height:300px;
right:-10vw;
top:8vh;
background:
radial-gradient(circle at 50% 45%, rgba(170,230,255,0.28), rgba(80,150,255,0.10) 44%, rgba(255,255,255,0.02) 72%);
animation-name: blobMove2;
animation-duration: 13s;
}
.blob3{
width:42vw;
height:42vw;
min-width:360px;
min-height:360px;
left:22vw;
bottom:-18vh;
background:
radial-gradient(circle at 55% 40%, rgba(180,240,255,0.24), rgba(90,160,255,0.10) 45%, rgba(255,255,255,0.01) 72%);
animation-name: blobMove3;
animation-duration: 15s;
}
@keyframes blobMove1{
0% { transform: translate(0,0) scale(1) rotate(0deg); }
100% { transform: translate(5vw, 4vh) scale(1.08) rotate(18deg); }
}
@keyframes blobMove2{
0% { transform: translate(0,0) scale(1) rotate(0deg); }
100% { transform: translate(-5vw, 6vh) scale(1.1) rotate(-16deg); }
}
@keyframes blobMove3{
0% { transform: translate(0,0) scale(1) rotate(0deg); }
100% { transform: translate(-3vw, -5vh) scale(1.07) rotate(14deg); }
}
.waves{
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
overflow:hidden;
}
.wave{
position:absolute;
left:-10%;
width:120%;
height:200px;
border-radius:45%;
background: radial-gradient(ellipse at center, rgba(255,255,255,0.08), rgba(255,255,255,0.01) 70%);
filter: blur(10px);
opacity:.5;
}
.wave.w1{
bottom:8%;
animation: waveMove1 9s ease-in-out infinite alternate;
}
.wave.w2{
bottom:2%;
opacity:.35;
animation: waveMove2 12s ease-in-out infinite alternate;
}
.wave.w3{
bottom:15%;
opacity:.22;
animation: waveMove3 14s ease-in-out infinite alternate;
}
@keyframes waveMove1{
0%{ transform: translateX(0) translateY(0) scaleX(1); }
100%{ transform: translateX(3%) translateY(-10px) scaleX(1.06); }
}
@keyframes waveMove2{
0%{ transform: translateX(0) translateY(0) scaleX(1); }
100%{ transform: translateX(-3%) translateY(8px) scaleX(1.08); }
}
@keyframes waveMove3{
0%{ transform: translateX(0) translateY(0) scaleX(1); }
100%{ transform: translateX(2%) translateY(-6px) scaleX(1.04); }
}
.grid-shine{
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background:
linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.03) 40%, transparent 55%),
linear-gradient(transparent 0%, rgba(255,255,255,0.015) 48%, transparent 100%);
opacity:.7;
mix-blend-mode:screen;
}
.auth-wrap{
position:relative;
z-index:3;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
perspective: 1800px;
}
.glass-card{
position:relative;
width:100%;
max-width:420px;
padding:30px 28px 26px;
border-radius:28px;
background:
linear-gradient(145deg, rgba(255,255,255,0.11), rgba(255,255,255,0.05));
border: 1px solid var(--glass-border);
box-shadow:
0 20px 80px rgba(0,0,0,0.38),
inset 0 1px 0 rgba(255,255,255,0.18),
inset 0 -1px 0 rgba(255,255,255,0.05);
backdrop-filter: blur(24px) saturate(135%);
-webkit-backdrop-filter: blur(24px) saturate(135%);
overflow:hidden;
transform-style: preserve-3d;
transition: transform .18s ease-out, box-shadow .22s ease-out, opacity .5s ease;
}
.glass-card::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.18), transparent 28%),
linear-gradient(135deg, rgba(255,255,255,0.08), transparent 35%, transparent 65%, rgba(255,255,255,0.05));
pointer-events:none;
opacity:.95;
}
.glass-card::after{
content:"";
position:absolute;
inset:1px;
border-radius:27px;
border:1px solid rgba(255,255,255,0.06);
pointer-events:none;
}
.liquid-ring{
position:absolute;
width:320px;
height:320px;
border-radius:50%;
top:50%;
left:50%;
transform:translate(-50%,-50%);
border:1px solid rgba(255,255,255,0.08);
box-shadow:
inset 0 0 40px rgba(255,255,255,0.05),
0 0 40px rgba(160,220,255,0.08);
z-index:-1;
animation: ringFloat 8s ease-in-out infinite alternate;
filter: blur(.2px);
}
@keyframes ringFloat{
0%{ transform: translate(-50%,-50%) scale(1) rotate(0deg); }
100%{ transform: translate(-50%,-50%) scale(1.06) rotate(10deg); }
}
.top-chip{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 14px;
border-radius:999px;
font-size:12px;
letter-spacing:.12em;
text-transform:uppercase;
color:rgba(255,255,255,0.86);
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.12);
margin-bottom:16px;
position:relative;
z-index:2;
}
.dot-live{
width:8px;
height:8px;
border-radius:50%;
background:rgba(200,245,255,0.95);
box-shadow:0 0 12px rgba(200,245,255,0.95);
animation:pulseDot 1.5s ease-in-out infinite;
}
@keyframes pulseDot{
0%,100%{ transform:scale(1); opacity:1; }
50%{ transform:scale(1.35); opacity:.72; }
}
.title{
font-size:34px;
line-height:1;
font-weight:700;
letter-spacing:-0.03em;
margin:0 0 10px;
position:relative;
z-index:2;
}
.subtitle{
color:var(--muted);
font-size:14px;
line-height:1.55;
margin-bottom:24px;
position:relative;
z-index:2;
}
.field-group{
position:relative;
z-index:2;
margin-bottom:16px;
}
.field-label{
display:block;
font-size:12px;
letter-spacing:.08em;
text-transform:uppercase;
margin-bottom:8px;
color:rgba(255,255,255,0.78);
}
.liquid-input{
width:100%;
border:none;
outline:none;
border-radius:18px;
padding:15px 16px;
color:var(--text);
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.10);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
inset 0 -1px 0 rgba(255,255,255,0.03);
transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.liquid-input::placeholder{
color:rgba(255,255,255,0.42);
}
.liquid-input:focus{
background:rgba(255,255,255,0.10);
border-color:rgba(190,235,255,0.32);
box-shadow:
0 0 0 4px rgba(170,225,255,0.08),
inset 0 1px 0 rgba(255,255,255,0.10);
transform:translateY(-1px);
}
.row-meta{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin:6px 0 18px;
font-size:13px;
color:var(--muted);
}
.check-wrap{
display:flex;
align-items:center;
gap:8px;
user-select:none;
}
.check-wrap input{
accent-color:#b8e6ff;
}
.meta-link{
color:rgba(220,245,255,0.88);
text-decoration:none;
}
.meta-link:hover{
color:#fff;
}
.btn-liquid{
position:relative;
z-index:2;
width:100%;
border:none;
border-radius:20px;
padding:15px 18px;
color:#07111f;
font-weight:700;
letter-spacing:.04em;
background:
linear-gradient(135deg, rgba(240,250,255,0.95), rgba(190,235,255,0.88));
box-shadow:
0 14px 34px rgba(130,210,255,0.20),
inset 0 1px 0 rgba(255,255,255,0.85);
overflow:hidden;
transition: transform .18s ease, box-shadow .22s ease, filter .22s ease;
}
.btn-liquid:hover{
transform:translateY(-1px);
box-shadow:
0 18px 40px rgba(130,210,255,0.26),
inset 0 1px 0 rgba(255,255,255,0.92);
filter:brightness(1.02);
}
.btn-liquid:active{
transform:scale(.992);
}
.btn-liquid .btn-gloss{
position:absolute;
inset:auto;
top:-40%;
left:-20%;
width:45%;
height:180%;
background:linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
transform:rotate(18deg);
animation:glossMove 3.8s linear infinite;
pointer-events:none;
}
@keyframes glossMove{
0%{ left:-30%; }
100%{ left:115%; }
}
.status-line{
position:relative;
z-index:2;
margin-top:16px;
min-height:20px;
text-align:center;
font-size:13px;
color:rgba(230,245,255,0.78);
letter-spacing:.03em;
}
.micro-orbits{
position:absolute;
inset:0;
pointer-events:none;
z-index:1;
}
.orbit{
position:absolute;
border-radius:50%;
border:1px solid rgba(255,255,255,0.05);
animation: spinOrbit linear infinite;
}
.orbit::before{
content:"";
position:absolute;
width:8px;
height:8px;
border-radius:50%;
background:rgba(220,245,255,0.85);
box-shadow:0 0 14px rgba(220,245,255,0.85);
top:50%;
left:-4px;
transform:translateY(-50%);
}
.orbit1{
width:520px;
height:520px;
top:50%;
left:50%;
margin-left:-260px;
margin-top:-260px;
animation-duration: 24s;
}
.orbit2{
width:620px;
height:620px;
top:50%;
left:50%;
margin-left:-310px;
margin-top:-310px;
animation-duration: 34s;
animation-direction: reverse;
}
.orbit3{
width:760px;
height:760px;
top:50%;
left:50%;
margin-left:-380px;
margin-top:-380px;
animation-duration: 46s;
}
@keyframes spinOrbit{
from{ transform:rotate(0deg); }
to{ transform:rotate(360deg); }
}
.ripple{
position:absolute;
border-radius:50%;
transform:translate(-50%, -50%);
pointer-events:none;
background:radial-gradient(circle, rgba(255,255,255,0.33), rgba(200,235,255,0.12), transparent 70%);
animation:rippleGrow .9s ease-out forwards;
mix-blend-mode:screen;
z-index:4;
}
@keyframes rippleGrow{
0%{
width:0;
height:0;
opacity:.9;
}
100%{
width:540px;
height:540px;
opacity:0;
}
}
.portal{
position:fixed;
top:50%;
left:50%;
width:26px;
height:26px;
border-radius:50%;
transform:translate(-50%,-50%) scale(1);
background:
radial-gradient(circle, rgba(255,255,255,0.95), rgba(195,235,255,0.55) 30%, rgba(130,190,255,0.18) 48%, transparent 60%);
box-shadow:
0 0 40px rgba(200,235,255,0.55),
0 0 120px rgba(140,205,255,0.18);
opacity:0;
z-index:999;
pointer-events:none;
}
.portal.open{
animation: portalExpand 1.15s ease-in forwards;
}
@keyframes portalExpand{
0%{
opacity:.95;
transform:translate(-50%,-50%) scale(1);
}
100%{
opacity:1;
transform:translate(-50%,-50%) scale(95);
}
}
.brand-note{
position:relative;
z-index:2;
margin-top:18px;
text-align:center;
font-size:12px;
color:rgba(255,255,255,0.45);
letter-spacing:.08em;
text-transform:uppercase;
}
.bubble{
position:absolute;
bottom:-120px;
border-radius:50%;
background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.24), rgba(255,255,255,0.04) 60%, rgba(255,255,255,0.01) 72%);
border:1px solid rgba(255,255,255,0.08);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
opacity:.42;
filter: blur(.2px);
animation: bubbleRise linear infinite;
pointer-events:none;
z-index:1;
}
@keyframes bubbleRise{
0%{
transform: translateY(0) translateX(0) scale(1);
opacity:0;
}
10%{
opacity:.35;
}
100%{
transform: translateY(-120vh) translateX(var(--drift, 0px)) scale(1.12);
opacity:0;
}
}
@media (max-width: 576px){
.glass-card{
max-width: 100%;
padding:24px 20px 22px;
border-radius:24px;
}
.title{
font-size:28px;
}
.orbit1,.orbit2,.orbit3{
transform:scale(.78);
}
}
</style>
</head>
<body>
<div class="scene" id="scene">
<div class="liquid-layer blob1"></div>
<div class="liquid-layer blob2"></div>
<div class="liquid-layer blob3"></div>
<div class="waves">
<div class="wave w1"></div>
<div class="wave w2"></div>
<div class="wave w3"></div>
</div>
<div class="grid-shine"></div>
<div class="micro-orbits">
<div class="orbit orbit1"></div>
<div class="orbit orbit2"></div>
<div class="orbit orbit3"></div>
</div>
<div id="bubbles"></div>
<div class="auth-wrap">
<div class="glass-card" id="glassCard">
<div class="liquid-ring"></div>
<div class="top-chip">
<span class="dot-live"></span>
interface lĂquida
</div>
<h1 class="title">Login</h1>
<div class="subtitle">
ExperiĂŞncia glass premium com blur, reflexos dinâmicos, ondas lĂquidas e transição suave.
</div>
<div class="field-group">
<label class="field-label">UsuĂĄrio</label>
<input type="text" id="usuario" class="liquid-input" placeholder="Digite seu usuĂĄrio">
</div>
<div class="field-group">
<label class="field-label">Senha</label>
<input type="password" id="senha" class="liquid-input" placeholder="Digite sua senha">
</div>
<div class="row-meta">
<label class="check-wrap">
<input type="checkbox">
<span>Manter conectado</span>
</label>
<a href="#" class="meta-link">Recuperar acesso</a>
</div>
<button class="btn-liquid" id="btnLogin" onclick="fazerLogin(event)">
Entrar
<span class="btn-gloss"></span>
</button>
<div class="status-line" id="statusLine"></div>
<div class="brand-note">Template no código-fonte ⢠saniju.com.br</div>
</div>
</div>
<div class="portal" id="portal"></div>
</div>
<script>
const scene = document.getElementById('scene');
const card = document.getElementById('glassCard');
const statusLine = document.getElementById('statusLine');
const portal = document.getElementById('portal');
const bubblesWrap = document.getElementById('bubbles');
function createBubble(){
const bubble = document.createElement('div');
bubble.className = 'bubble';
const size = Math.random() * 42 + 12;
bubble.style.width = size + 'px';
bubble.style.height = size + 'px';
bubble.style.left = (Math.random() * 100) + 'vw';
bubble.style.animationDuration = (Math.random() * 9 + 8) + 's';
bubble.style.animationDelay = (Math.random() * 2) + 's';
bubble.style.setProperty('--drift', ((Math.random() * 80) - 40) + 'px');
bubblesWrap.appendChild(bubble);
setTimeout(() => {
bubble.remove();
}, 18000);
}
for(let i = 0; i < 18; i++){
setTimeout(createBubble, i * 380);
}
setInterval(createBubble, 900);
document.addEventListener('mousemove', function(e){
const x = e.clientX / window.innerWidth;
const y = e.clientY / window.innerHeight;
const rotateY = (x - 0.5) * 14;
const rotateX = (0.5 - y) * 14;
const moveX = (x - 0.5) * 18;
const moveY = (y - 0.5) * 18;
card.style.transform = `
translate3d(${moveX}px, ${moveY}px, 0)
rotateX(${rotateX}deg)
rotateY(${rotateY}deg)
`;
card.style.setProperty('--mx', (x * 100) + '%');
card.style.setProperty('--my', (y * 100) + '%');
const blobs = document.querySelectorAll('.liquid-layer');
blobs[0].style.transform = `translate(${moveX * -0.55}px, ${moveY * -0.45}px) scale(1.05)`;
blobs[1].style.transform = `translate(${moveX * 0.45}px, ${moveY * -0.35}px) scale(1.08)`;
blobs[2].style.transform = `translate(${moveX * -0.25}px, ${moveY * 0.45}px) scale(1.04)`;
const waves = document.querySelectorAll('.wave');
waves[0].style.transform = `translateX(${moveX * 0.25}px) translateY(${moveY * 0.15}px)`;
waves[1].style.transform = `translateX(${moveX * -0.18}px) translateY(${moveY * 0.12}px)`;
waves[2].style.transform = `translateX(${moveX * 0.12}px) translateY(${moveY * -0.08}px)`;
});
function createRipple(x, y){
const ripple = document.createElement('div');
ripple.className = 'ripple';
ripple.style.left = x + 'px';
ripple.style.top = y + 'px';
scene.appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 950);
}
const rotatingMessages = [
'Sincronizando superfĂcie lĂquida...',
'Aguardando autenticação...',
'Reflexos dinâmicos ativos...',
'Sistema pronto.'
];
let msgIndex = 0;
setInterval(() => {
if(statusLine.dataset.locked === 'true') return;
statusLine.textContent = rotatingMessages[msgIndex];
msgIndex = (msgIndex + 1) % rotatingMessages.length;
}, 2200);
function fazerLogin(event){
const usuario = document.getElementById('usuario').value.trim();
const senha = document.getElementById('senha').value.trim();
if(!usuario || !senha){
statusLine.dataset.locked = 'true';
statusLine.textContent = 'Preencha usuĂĄrio e senha.';
return;
}
const x = event.clientX || (window.innerWidth / 2);
const y = event.clientY || (window.innerHeight / 2);
createRipple(x, y);
statusLine.dataset.locked = 'true';
statusLine.textContent = 'Verificando acesso...';
card.style.transition = 'transform .2s ease, box-shadow .25s ease, opacity .45s ease, filter .45s ease';
card.style.filter = 'brightness(1.08)';
card.style.boxShadow = '0 24px 90px rgba(120,210,255,0.24), inset 0 1px 0 rgba(255,255,255,0.18)';
setTimeout(() => {
statusLine.textContent = 'Preparando ambiente lĂquido...';
}, 700);
setTimeout(() => {
card.style.opacity = '0';
portal.classList.add('open');
}, 1200);
setTimeout(() => {
window.location.href = 'painel.php'; // altere aqui
}, 2100);
}
</script>
</body>
</html>