Login Page

I'll enhance the design with a more modern and visually appealing look. Here's the updated version with improved styling: Login Page Home

Main Page

🌟 You're doing great!

✨ Keep shining bright!

💪 You've got this!

🌈 Believe in yourself!

🎉 You're amazing!

:root { --primary: #6C63FF; --secondary: #FF6584; --light: #f8f9fa; --dark: #343a40; --gray: #6c757d; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%); min-height: 100vh; margin: 0; padding: 20px; } .login-container { background-color: white; padding: 40px; border-radius: 20px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); text-align: center; width: 100%; max-width: 400px; margin: 0 auto; } .logo { margin-bottom: 40px; } .logo svg { margin-bottom: 15px; } .logo h1 { color: var(--primary); font-size: 2rem; font-weight: 600; } .input-group { position: relative; margin-bottom: 25px; text-align: left; } .input-group input { width: 100%; padding: 15px; border: 2px solid #e9ecef; border-radius: 10px; font-size: 1rem; transition: all 0.3s ease; background-color: #f8f9fa; } .input-group input:focus { border-color: var(--primary); outline: none; background-color: white; box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2); } .input-group label { position: absolute; top: 15px; left: 15px; color: var(--gray); font-size: 1rem; transition: all 0.3s ease; pointer-events: none; background-color: #f8f9fa; padding: 0 5px; } .input-group input:focus + label, .input-group input:not(:placeholder-shown) + label { top: -10px; left: 10px; font-size: 0.8rem; color: var(--primary); background-color: white; } .btn-login { width: 100%; padding: 15px; background: linear-gradient(135deg, var(--primary) 0%, #8E85FF 100%); color: white; border: none; border-radius: 10px; cursor: pointer; font-size: 1rem; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.3s ease; margin-top: 10px; } .btn-login:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(108, 99, 255, 0.3); } .btn-login svg { transition: transform 0.3s ease; } .btn-login:hover svg { transform: translateX(5px); } document.getElementById('loginForm').addEventListener('submit', function(e) { e.preventDefault(); const username = document.getElementById('username').value; const password = document.getElementById('password').value; if (username === 'Home' && password === 'simpkasakin') { // Add loading animation const btn = document.querySelector('.btn-login'); btn.innerHTML = 'Loading...'; btn.disabled = true; // Simulate loading delay setTimeout(() => { window.location.href = 'home.html'; }, 1500); } else { // Shake animation for wrong credentials const loginContainer = document.querySelector('.login-container'); loginContainer.style.animation = 'shake 0.5s'; // Remove animation after it completes setTimeout(() => { loginContainer.style.animation = ''; }, 500); alert('Invalid username or password'); } }); // Add shake animation to styles const style = document.createElement('style'); style.textContent = ` @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } } `; document.head.appendChild(style); // Add click effect to envelopes document.addEventListener('DOMContentLoaded', function() { const envelopes = document.querySelectorAll('.envelope'); if (envelopes.length > 0) { envelopes.forEach(envelope => { envelope.addEventListener('click', function() { this.style.animation = 'none'; this.style.transform = 'scale(1.1) rotate(5deg)'; setTimeout(() => { this.style.transform = 'scale(1) rotate(0)'; this.style.animation = 'pop 1.5s ease-in-out infinite alternate'; }, 300); alert('You have a special message waiting!'); }); }); } });

Welcome Home

Your Messages