Login Page

I'll create a modern login page with the specified credentials and animated homepage. Here's the complete implementation: Login Page * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; color: #333; } .login-container { width: 100%; max-width: 400px; padding: 2rem; } .login-box { background: white; border-radius: 10px; padding: 2rem; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); transform: translateY(0); transition: transform 0.3s ease; } .login-box:hover { transform: translateY(-5px); } h1 { text-align: center; margin-bottom: 2rem; color: #764ba2; } .input-group { position: relative; margin-bottom: 1.5rem; } .input-group input { width: 100%; padding: 1rem; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; transition: all 0.3s; } .input-group input:focus { outline: none; border-color: #764ba2; } .input-group label { position: absolute; top: 1rem; left: 1rem; color: #999; transition: all 0.3s; pointer-events: none; } .input-group input:focus + label, .input-group input:valid + label { top: -0.5rem; left: 0.8rem; font-size: 0.8rem; background: white; padding: 0 0.2rem; color: #764ba2; } button { width: 100%; padding: 1rem; background: linear-gradient(to right, #667eea, #764ba2); color: white; border: none; border-radius: 5px; font-size: 1rem; cursor: pointer; transition: all 0.3s; } button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .homepage { width: 100%; max-width: 800px; padding: 2rem; text-align: center; } .envelopes-container { display: flex; justify-content: center; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; } .envelope { width: 120px; height: 80px; background: #fff; border-radius: 5px; display: flex; justify-content: center; align-items: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transform: scale(0); animation: pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; animation-delay: var(--delay); } @keyframes pop { 0% { transform: scale(0); } 80% { transform: scale(1.1); } 100% { transform: scale(1); } } .letter { padding: 0.5rem; font-size: 0.9rem; color: #764ba2; } .main-btn { margin-top: 2rem; max-width: 300px; } .main-page { width: 100%; max-width: 800px; padding: 2rem; text-align: center; } .messages { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 2rem; } .message { background: white; padding: 1.5rem; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s; } .message:hover { transform: translateY(-5px); background: #f8f9fa; } document.getElementById('login-form').addEventListener('submit', function(e) { e.preventDefault(); const username = document.getElementById('username').value; const password = document.getElementById('password').value; if (username === 'Home' && password === 'simpkasakin') { document.getElementById('login-container').style.display = 'none'; document.getElementById('homepage').style.display = 'flex'; } else { alert('Invalid credentials. Please try again.'); } }); document.getElementById('main-btn').addEventListener('click', function() { document.getElementById('homepage').style.display = 'none'; document.getElementById('main-page').style.display = 'flex'; });

Welcome Back