code halman loding

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<style>

* { margin: 0; padding: 0; box-sizing: border-box; }

#scene {

position: relative;

width: 100%;

min-height: 620px;

background: linear-gradient(135deg, #1a6b3a 0%, #0d4a28 40%, #2d8a50 100%);

display: flex;

align-items: center;

justify-content: center;

overflow: hidden;

border-radius: 16px;

cursor: none;

}

#magic-cursor {

position: absolute;

pointer-events: none;

z-index: 9999;

width: 40px;

height: 40px;

transform: translate(-50%, -50%);

transition: opacity 0.2s;

filter: drop-shadow(0 0 6px rgba(255,220,80,0.8));

}

.sparkle {

position: absolute;

pointer-events: none;

z-index: 9998;

border-radius: 50%;

background: #FFE066;

animation: sparkle-fade 0.6s ease-out forwards;

}

@keyframes sparkle-fade {

0% { transform: scale(1); opacity: 1; }

100% { transform: scale(0) translateY(-20px); opacity: 0; }

}

#card-wrap {

position: relative;

z-index: 10;

display: flex;

flex-direction: column;

align-items: center;

width: 360px;

}

#logo-ring {

width: 80px;

height: 80px;

border-radius: 50%;

background: #fff;

border: 3px solid #FFE066;

box-shadow: 0 0 0 4px rgba(255,224,102,0.3), 0 4px 20px rgba(0,0,0,0.3);

overflow: hidden;

display: flex;

align-items: center;

justify-content: center;

margin-bottom: 12px;

animation: ring-pulse 2.5s ease-in-out infinite;

}

@keyframes ring-pulse {

0%, 100% { box-shadow: 0 0 0 4px rgba(255,224,102,0.3), 0 4px 20px rgba(0,0,0,0.3); }

50% { box-shadow: 0 0 0 8px rgba(255,224,102,0.15), 0 4px 28px rgba(0,0,0,0.4); }

}

#logo-ring img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }

#site-title { font-family: 'Georgia', serif; text-align: center; margin-bottom: 20px; line-height: 1.3; }

#site-title .line1 { display: block; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #A8E6C0; font-family: sans-serif; font-weight: 400; }

#site-title .line2 {

display: block; font-size: 22px; font-weight: 700;

background: linear-gradient(90deg, #FFE066, #ffffff, #FFE066);

background-size: 200% auto;

-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;

animation: shimmer 3s linear infinite; letter-spacing: 1px;

}

#site-title .line3 { display: block; font-size: 13px; color: #c8f0d8; font-family: sans-serif; letter-spacing: 2px; font-weight: 400; }

@keyframes shimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }

#login-box {

width: 100%;

border-radius: 16px;

overflow: hidden;

transform-origin: top center;

transform: scaleY(0);

opacity: 0;

max-height: 0;

transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), opacity 0.4s ease, max-height 0.5s cubic-bezier(0.34,1.56,0.64,1);

position: relative;

}

#login-box.open { transform: scaleY(1); opacity: 1; max-height: 600px; }

/* Conic gradient rotating border for login box */

#login-box-glow {

position: absolute;

inset: -3px;

border-radius: 18px;

z-index: 0;

background: conic-gradient(from var(--angle, 0deg), #FFE066, #2d8a50, #fff, #1a6b3a, #FFE066);

animation: spin-conic 3s linear infinite;

filter: drop-shadow(0 0 8px rgba(255,224,102,0.6));

}

@property --angle {

syntax: '<angle>';

initial-value: 0deg;

inherits: false;

}

@keyframes spin-conic { to { --angle: 360deg; } }

#login-box-inner-bg {

position: absolute;

inset: 3px;

border-radius: 14px;

background: rgba(255,255,255,0.97);

z-index: 1;

}

#login-inner {

position: relative;

z-index: 2;

padding: 28px 32px 32px;

}

.form-group { margin-bottom: 18px; }

.form-group label {

display: block; font-size: 12px; font-weight: 600; color: #1a6b3a;

text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; font-family: sans-serif;

}

.input-icon-wrap { position: relative; }

.form-group input {

width: 100%; padding: 10px 38px 10px 14px;

border: 1.5px solid #c8e6d8; border-radius: 8px;

font-size: 14px; color: #1a3a28; background: #f8fffe;

outline: none; transition: border-color 0.2s, box-shadow 0.2s; font-family: sans-serif;

}

.form-group input:focus {

border-color: #1a6b3a;

box-shadow: 0 0 0 3px rgba(26,107,58,0.12);

}

.input-icon-wrap i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #5aaa7a; font-size: 16px; }

/* Conic gradient rotating border for button */

.btn-wrap {

position: relative;

border-radius: 12px;

padding: 3px;

background: conic-gradient(from var(--angle2, 0deg), #FFE066, #ffffff, #2d8a50, #FFD700, #FFE066);

animation: spin-conic2 2s linear infinite;

filter: drop-shadow(0 0 10px rgba(255,200,0,0.5)) drop-shadow(0 0 20px rgba(26,107,58,0.4));

margin-top: 6px;

}

@property --angle2 {

syntax: '<angle>';

initial-value: 0deg;

inherits: false;

}

@keyframes spin-conic2 { to { --angle2: 360deg; } }

#btn-login {

width: 100%;

padding: 12px;

background: linear-gradient(135deg, #1a6b3a, #2d8a50);

color: #fff;

border: none;

border-radius: 9px;

font-size: 15px; font-weight: 600; letter-spacing: 1px;

cursor: pointer; font-family: sans-serif;

transition: transform 0.15s, filter 0.15s;

display: block;

width: 100%;

}

#btn-login:hover {

transform: scale(1.01);

filter: brightness(1.1);

}

.login-footer { text-align: center; margin-top: 16px; font-size: 12px; color: #888; font-family: sans-serif; }

.login-footer a { color: #1a6b3a; text-decoration: none; font-weight: 600; }

.divider { display: flex; align-items: center; gap: 10px; margin: 18px 0; }

.divider hr { flex: 1; border: none; border-top: 1px solid #e0ede8; }

.divider span { font-size: 11px; color: #aac; font-family: sans-serif; }

#hint-text {

margin-top: 14px; font-size: 12px; color: rgba(200,240,216,0.8);

font-family: sans-serif; text-align: center; letter-spacing: 0.5px;

transition: opacity 0.3s;

}

#hint-text.hidden { opacity: 0; }

#msg-box {

display: none;

position: absolute;

inset: 0;

background: rgba(13,74,40,0.97);

border-radius: 16px;

z-index: 20;

flex-direction: column;

align-items: center;

justify-content: center;

gap: 12px;

animation: fade-in 0.4s ease;

}

@keyframes fade-in { from { opacity:0; transform: scale(0.9); } to { opacity:1; transform: scale(1); } }

#msg-box.show { display: flex; }

#msg-box .msg-icon { font-size: 48px; animation: bounce 0.6s ease; }

@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

#msg-box .msg-title { font-size: 18px; font-weight: 700; color: #FFE066; font-family: sans-serif; }

#msg-box .msg-sub { font-size: 13px; color: #c8f0d8; font-family: sans-serif; }

#msg-box .msg-redirect { font-size: 12px; color: #aae0c0; font-family: sans-serif; }

#error-msg {

display: none;

background: #fff0f0;

border: 1px solid #ffb0b0;

color: #c0392b;

padding: 8px 12px;

border-radius: 8px;

font-size: 12px;

font-family: sans-serif;

margin-bottom: 12px;

text-align: center;

animation: shake 0.4s ease;

}

@keyframes shake {

0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)}

}

.bg-leaf { position: absolute; opacity: 0.06; font-size: 120px; color: #fff; pointer-events: none; user-select: none; }

.bg-leaf.l1 { top: 10px; left: 10px; transform: rotate(-30deg); }

.bg-leaf.l2 { bottom: 20px; right: 20px; transform: rotate(40deg); }

</style>

</head>

<body>

</svg>

</div>

<span class="line1">Selamat Datang di</span>

<span class="line2">DB Online Test</span>

<span class="line3">— Halaman Login —</span>

</div>

<div class="msg-title">Login Berhasil!</div>

<div class="msg-sub">Selamat datang, <strong>David Boy</strong></div>

<div class="msg-redirect">Mengalihkan ke Google...</div>

</div>

<div id="error-msg">❌ Username atau password salah!</div>

<label>Username</label>

</div>

<label>Password</label>

</div>

<button id="btn-login" onclick="doLogin()">🔑 Masuk</button>

</div>

Belum punya akun? <a href="#">Daftar sekarang</a>

</div>

<div id="hint-text">✨ Arahkan kursor ke area ini untuk membuka login</div>

</div>

(function() {

const scene = document.getElementById('scene');

const cursor = document.getElementById('magic-cursor');

const loginBox = document.getElementById('login-box');

const hintText = document.getElementById('hint-text');

let mx = -9999, my = -9999;

let isOpen = false;

let closeTimer = null;

scene.addEventListener('mousemove', (e) => {

const rect = scene.getBoundingClientRect();

mx = e.clientX - rect.left;

my = e.clientY - rect.top;

cursor.style.left = mx + 'px';

cursor.style.top = my + 'px';

cursor.style.opacity = '1';

spawnSparkle(mx, my);

checkProximity();

});

scene.addEventListener('mouseleave', () => {

cursor.style.opacity = '0';

mx = -9999; my = -9999;

closeLoginBox();

});

function checkProximity() {

const cardWrap = document.getElementById('card-wrap');

const rect = cardWrap.getBoundingClientRect();

const sceneRect = scene.getBoundingClientRect();

const cardCx = rect.left - sceneRect.left + rect.width / 2;

const cardCy = rect.top - sceneRect.top + rect.height / 2;

const dist = Math.sqrt((mx - cardCx)**2 + (my - cardCy)**2);

const threshold = Math.max(rect.width, rect.height) * 0.75;

if (dist < threshold) {

openLoginBox();

} else {

if (closeTimer) clearTimeout(closeTimer);

closeTimer = setTimeout(closeLoginBox, 300);

}

function openLoginBox() {

if (closeTimer) { clearTimeout(closeTimer); closeTimer = null; }

if (!isOpen) {

isOpen = true;

loginBox.classList.add('open');

hintText.classList.add('hidden');

}

function closeLoginBox() {

if (isOpen) {

isOpen = false;

loginBox.classList.remove('open');

setTimeout(() => { hintText.classList.remove('hidden'); }, 400);

}

let sparkleCount = 0;

function spawnSparkle(x, y) {

sparkleCount++;

if (sparkleCount % 2 !== 0) return;

const s = document.createElement('div');

s.className = 'sparkle';

const ox = (Math.random() - 0.5) * 30;

const oy = (Math.random() - 0.5) * 30;

s.style.left = (x + ox) + 'px';

s.style.top = (y + oy) + 'px';

const colors = ['#FFE066','#A8F0C8','#ffffff','#FFB347'];

s.style.background = colors[Math.floor(Math.random()*colors.length)];

const sz = (4 + Math.random() * 6) + 'px';

s.style.width = sz; s.style.height = sz;

scene.appendChild(s);

setTimeout(() => s.remove(), 600);

}

window.doLogin = function() {

const user = document.getElementById('inp-user').value.trim().toLowerCase();

const pass = document.getElementById('inp-pass').value.trim();

const errBox = document.getElementById('error-msg');

const msgBox = document.getElementById('msg-box');

const validUsers = ['david boy', 'davidboy', 'david'];

const validPass = '12345';

if (validUsers.includes(user) && pass === validPass) {

errBox.style.display = 'none';

msgBox.classList.add('show');

setTimeout(() => {

window.open('https://www.google.com', '_self');

}, 1800);

} else {

errBox.style.display = 'block';

errBox.style.animation = 'none';

void errBox.offsetWidth;

errBox.style.animation = 'shake 0.4s ease';

}

};

document.addEventListener('keydown', (e) => {

if (e.key === 'Enter') window.doLogin();

});

})();

</script>

</body>

</html>

Cari Blog Ini

GAME EDUKASI BOI

code halman loding

Komentar

Posting Komentar

Postingan populer dari blog ini

game petualangan monyet-protozoa bagian 1

Game Petualangan Kelinci-5 Kingdom

logo kemenag ri