|
| 1 | +// ---------------- Background Bubbles ---------------- |
| 2 | +const canvas=document.getElementById('bg-canvas'); |
| 3 | +const ctx=canvas.getContext('2d'); |
| 4 | +let w,h; |
| 5 | +function resizeCanvas(){ w=canvas.width=window.innerWidth; h=canvas.height=window.innerHeight; } |
| 6 | +window.addEventListener('resize',resizeCanvas); resizeCanvas(); |
| 7 | + |
| 8 | +class Bubble{constructor(){this.x=Math.random()*w;this.y=h+Math.random()*100;this.radius=15+Math.random()*25; |
| 9 | +this.vx=(Math.random()-0.5)*0.5;this.vy=-0.6-Math.random();this.alpha=0.1+Math.random()*0.1; |
| 10 | +this.color=['#14fff1','#f75fff','#2afaff','#ff4fd7','#64ffe7'][Math.floor(Math.random()*5)];} |
| 11 | +update(){this.x+=this.vx;this.y+=this.vy;if(this.y+this.radius<0){this.y=h+Math.random()*100;this.x=Math.random()*w;}} |
| 12 | +draw(){ctx.save();ctx.globalAlpha=this.alpha;ctx.beginPath();ctx.arc(this.x,this.y,this.radius,0,Math.PI*2); |
| 13 | +ctx.fillStyle=this.color;ctx.shadowColor=this.color;ctx.shadowBlur=20;ctx.fill();ctx.restore();}} |
| 14 | + |
| 15 | +const bubbles=[]; |
| 16 | +for(let i=0;i<40;i++) bubbles.push(new Bubble()); |
| 17 | +function animate(){ ctx.clearRect(0,0,w,h); bubbles.forEach(b=>{b.update();b.draw();}); requestAnimationFrame(animate);} |
| 18 | +animate(); |
| 19 | + |
| 20 | +// ---------------- Login ---------------- |
| 21 | +const loginForm=document.getElementById("login-form"); |
| 22 | +const loginContainer=document.getElementById("loginContainer"); |
| 23 | +const welcomeContainer=document.getElementById("welcomeContainer"); |
| 24 | +const usernameInput=document.getElementById("username"); |
| 25 | +const passwordInput=document.getElementById("password"); |
| 26 | +const message=document.getElementById("message"); |
| 27 | +const neonBtn=document.querySelector(".neon-btn"); |
| 28 | +const btnText=neonBtn.querySelector(".btn-text"); |
| 29 | +const spinner=neonBtn.querySelector(".spinner"); |
| 30 | +const logoutBtn=document.getElementById("logoutBtn"); |
| 31 | +const welcomeMsg=document.getElementById("welcomeMessage"); |
| 32 | + |
| 33 | +const validUsername="admin"; |
| 34 | +const validPassword="12345"; |
| 35 | + |
| 36 | +// Check if already logged in |
| 37 | +const loggedUser=localStorage.getItem("loggedInUser"); |
| 38 | +if(loggedUser){ |
| 39 | + loginContainer.style.display="none"; |
| 40 | + welcomeContainer.style.display="block"; |
| 41 | + welcomeMsg.textContent=`Welcome, ${loggedUser}!`; |
| 42 | +} |
| 43 | + |
| 44 | +// Login submit |
| 45 | +loginForm.addEventListener("submit",(e)=>{ |
| 46 | + e.preventDefault(); |
| 47 | + const username=usernameInput.value.trim(); |
| 48 | + const password=passwordInput.value.trim(); |
| 49 | + |
| 50 | + message.style.opacity=0; |
| 51 | + loginForm.classList.remove("shake"); |
| 52 | + btnText.textContent=""; |
| 53 | + spinner.style.display="inline-block"; |
| 54 | + neonBtn.disabled=true; |
| 55 | + |
| 56 | + setTimeout(()=>{ |
| 57 | + spinner.style.display="none"; |
| 58 | + neonBtn.disabled=false; |
| 59 | + |
| 60 | + if(username===validUsername && password===validPassword){ |
| 61 | + btnText.textContent="Success!"; |
| 62 | + localStorage.setItem("loggedInUser",username); |
| 63 | + loginContainer.style.display="none"; |
| 64 | + welcomeContainer.style.display="block"; |
| 65 | + welcomeMsg.textContent=`Welcome, ${username}!`; |
| 66 | + } else { |
| 67 | + btnText.textContent="Login"; |
| 68 | + message.textContent="❌ Invalid Username or Password!"; |
| 69 | + message.style.color="#f75fff"; |
| 70 | + message.style.opacity=1; |
| 71 | + loginForm.classList.add("shake"); |
| 72 | + } |
| 73 | + |
| 74 | + setTimeout(()=>{ btnText.textContent="Login"; },1500); |
| 75 | + },1000); |
| 76 | +}); |
| 77 | + |
| 78 | +// Logout |
| 79 | +logoutBtn.addEventListener("click",()=>{ |
| 80 | + localStorage.removeItem("loggedInUser"); |
| 81 | + welcomeContainer.style.display="none"; |
| 82 | + loginContainer.style.display="block"; |
| 83 | + usernameInput.value=""; |
| 84 | + passwordInput.value=""; |
| 85 | + message.style.opacity=0; |
| 86 | +}); |
0 commit comments