diff --git a/login.css b/login.css deleted file mode 100644 index 01c44d2..0000000 --- a/login.css +++ /dev/null @@ -1,256 +0,0 @@ -body { - margin: 0; - font-family: Arial, sans-serif; - background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd); - min-height: 100vh; - overflow-y: auto; - overflow-x: hidden; - display: flex; - justify-content: center; - align-items: center; -} - -.container, .login-card { - background: rgba(255,255,255,0.7); - backdrop-filter: blur(10px); - padding: 40px; - border-radius: 25px; - width: 350px; - z-index: 10; - box-shadow: 0 10px 28px rgba(0,0,0,0.2); - position: relative; -} - -.icon-wrapper { - display: flex; - justify-content: center; - margin-bottom: 20px; - position: relative; -} - -.icon-bg { - width: 90px; height: 90px; - background: linear-gradient(45deg, purple, hotpink); - border-radius: 50%; - filter: blur(12px); - position: absolute; - animation: glow 3s infinite alternate; -} - -.icon { - width: 70px; height: 70px; - border-radius: 50%; - background: linear-gradient(45deg, purple, hotpink); - display: flex; - justify-content: center; - align-items: center; -} - -.title { - text-align: center; - font-size: 22px; - margin-bottom: 10px; - background: linear-gradient(45deg, purple, hotpink); - -webkit-background-clip: text; - background-clip: text; - color: transparent; -} - -.subtitle { - text-align: center; - color: gray; - margin-bottom: 20px; - animation:appear 3s ease-out; -} - -label { - font-size: 14px; - color: #444; -} - -input { - width: 100%; - padding: 12px; - border-radius: 12px; - border: 2px solid #ccc; - background: #fafafa; - margin-bottom: 15px; -} - - -input:focus { - outline: none; - border-color: purple; -} - -#errorBox { - color: red; - background: #ffe5e5; - padding: 10px; - border-radius: 10px; - margin-bottom: 10px; - display: none; -} - -.btn { - width: 100%; - padding: 14px; - background: linear-gradient(45deg, purple, hotpink); - color: white; - border-radius: 15px; - border: none; - cursor: pointer; - font-size: 16px; - transition: 0.2s; -} - -.btn:hover { - transform: scale(1.02); - box-shadow: 0 4px 15px rgba(0,0,0,0.3); -} - -.btn-login { - width: 100%; - padding: 14px; - background: linear-gradient(45deg, purple, hotpink); - color: white; - border-radius: 15px; - border: none; - cursor: pointer; - font-size: 16px; - transition: 0.25s ease; -} - -.btn-login:hover { - transform: scale(1.03); - box-shadow: 0 4px 15px rgba(0,0,0,0.25); -} - -.login-container { - max-height: none; - height: auto; - overflow: visible; /* Penting */ - padding-bottom: 40px; /* Biar bagian bawah tidak kepotong */ -} - -.login-link { - text-align: center; - margin-top: 15px; -} - -.login-link a { - color: purple; - text-decoration: underline; -} - -.glitter { - position: absolute; - width: 4px; - height: 4px; - background: purple; - border-radius: 50%; - opacity: 0; - animation: glitter-burst 2s infinite ease-out; - pointer-events: none; -} - -/* Tombol Toggle Demo */ -.demo-toggle { - margin-top: 10px; - width: 100%; - padding: 10px; - border: none; - border-radius: 12px; - background: rgba(255,255,255,0.6); - cursor: pointer; - font-size: 15px; - transition: 0.3s; -} - -.demo-section { - margin-top: 20px; - padding-bottom: 20px; - overflow: visible; -} - -.demo-toggle:hover { - background: rgba(255,255,255,0.85); -} - -.demo-box { - overflow: hidden; - max-height: 0; - opacity: 0; - transition: max-height 0.5s ease, opacity 0.4s ease; - background: rgba(255, 255, 255, 0.6); - padding: 15px; - border-radius: 12px; - line-height: 1.6; -} - -.demo-box.show { - max-height: 1000px; - opacity: 1; -} - -.hidden { - display: none !important; -} - - - -@keyframes glitter-burst { - 0% { - transform: scale(0.4) translate(0,0); - opacity: 0.9; - } - 50% { - opacity: 1; - } - 100% { - transform: scale(1) translate(var(--x), var(--y)); - opacity: 0; - } -} -@keyframes glow { - 0% { opacity: 0.2; } - 100% { opacity: 0.55; } -} - -.fruit { - position: absolute; - width: 95px; - opacity: .85; - animation: float 6s infinite ease-in-out, drift 15s infinite linear; - pointer-events: none; -} - -.f1 { top: 8%; left: 10%; animation-delay: .3s; } -.f2 { top: 65%; right: 12%; animation-delay: .7s; } -.f3 { top: 22%; right: 55%; animation-delay: 1.1s; } -.f4 { bottom: 15%; left: 28%; animation-delay: .9s; } -.f5 { bottom: 10%; right: 30%; animation-delay: 1.4s; } -.f6 { top: 40%; left: 50%; animation-delay: .5s; } -.f7 { bottom: 30%; left: 15%; animation-delay: 1.2s; } -.f8 { top: 75%; right: 40%; animation-delay: .8s; } -.f9 { top: 50%; left: 80%; animation-delay: 1s; } -.f10 { bottom: 20%; right: 5%; animation-delay: 1.3s; } - -@keyframes float { - 0% { transform: translateY(0) rotate(0deg); } - 50% { transform: translateY(-20px) rotate(6deg); } - 100% { transform: translateY(0) rotate(0deg); } -} - -@keyframes drift { - 0% { transform: translateX(0); } - 50% { transform: translateX(15px); } - 100% { transform: translateX(0); } -} - -.login-card, .container { - transition: transform .4s ease; -} -.login-card:hover, .container:hover { - transform: scale(1.012); -} diff --git a/login.html b/login.html index 691fcfb..96b971c 100644 --- a/login.html +++ b/login.html @@ -4,11 +4,268 @@ Login - + + + -
@@ -55,6 +312,103 @@ Daftar Sekarang

- + \ No newline at end of file diff --git a/login.js b/login.js deleted file mode 100644 index e41d77a..0000000 --- a/login.js +++ /dev/null @@ -1,95 +0,0 @@ -/*LOGIN VALIDATION*/ -document.getElementById("loginForm").addEventListener("submit", function(e) { - e.preventDefault(); - - const username = document.getElementById("username").value.trim(); - const password = document.getElementById("password").value.trim(); - const errorBox = document.getElementById("errorBox"); - - errorBox.style.display = "none"; - errorBox.innerText = ""; - - if (!username || !password) { - showError("Username dan password harus diisi"); - return; - } - - if (password.length < 6) { - showError("Password minimal 6 karakter"); - return; - } - - const usersData = localStorage.getItem("users"); - const users = usersData ? JSON.parse(usersData) : []; - - const user = users.find(u => u.username === username); - - if (!user) { - showError("Username tidak ditemukan"); - return; - } - - if (user.password !== password) { - showError("Password salah"); - return; - } - - // Login sukses - localStorage.setItem("loggedInUser", JSON.stringify(user)); - window.location.href = "mainboard.html"; -}); - -function showError(msg) { - const errorBox = document.getElementById("errorBox"); - errorBox.innerText = msg; - errorBox.style.display = "block"; -} - -function toggleDemo() { - const box = document.getElementById("demoBox"); - const btn = document.querySelector(".demo-toggle"); - - box.classList.toggle("show"); - - // Ubah teks tombol - if (box.classList.contains("show")) { - btn.textContent = "Sembunyikan Demo Akun ▲"; - } else { - btn.textContent = "Lihat Demo Akun ▼"; - } -} - - -/* GLITTER EFFECT*/ - -document.addEventListener("DOMContentLoaded", function () { - const card = document.querySelector(".login-card"); - - if (!card) return; - - // Tambah glitter 20x - for (let i = 0; i < 20; i++) { - const g = document.createElement("div"); - g.className = "glitter"; - - // Random posisi ledakan glitter - g.style.setProperty("--x", (Math.random() * 200 - 100) + "px"); - g.style.setProperty("--y", (Math.random() * 200 - 100) + "px"); - - g.style.left = (Math.random() * 100) + "%"; - g.style.top = (Math.random() * 100) + "%"; - - g.style.animationDelay = (Math.random() * 2) + "s"; - - card.appendChild(g); - } -}); - -setInterval(() => { - document.querySelectorAll(".glitter").forEach(g => { - g.style.setProperty("--x", (Math.random() * 200 - 100) + "px"); - g.style.setProperty("--y", (Math.random() * 200 - 100) + "px"); - g.style.left = Math.random() * window.innerWidth + "px"; - g.style.top = Math.random() * window.innerHeight + "px"; - }); -}, 900);