EVOLUTION-NINJA
Edit File: login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Medusys | Dashboard</title> <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@600&display=swap" rel="stylesheet"> <style> * { box-sizing: border-box; } body { margin: 0; font-family: 'Nunito', sans-serif; background: #e0f7fa; color: #333; min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } .container { background: #ffffff; border-radius: 16px; padding: 40px 30px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); width: 100%; max-width: 600px; text-align: center; } h2 { margin-bottom: 20px; color: #0077b6; } input { width: 100%; padding: 12px; margin: 10px 0; border-radius: 8px; border: 1px solid #ccc; font-size: 16px; } button { background: #0077b6; color: white; border: none; padding: 12px; font-size: 16px; font-weight: bold; border-radius: 8px; width: 100%; cursor: pointer; transition: background 0.3s; } button:hover { background: #005f86; } .toggle-link { margin-top: 15px; font-size: 14px; } img.icon { width: 80px; margin-bottom: 20px; } /* Dashboard Styles */ #dashboard { display: none; flex-direction: column; gap: 20px; } .nav { display: flex; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; } .nav button { padding: 8px 16px; border-radius: 8px; font-size: 14px; border: none; background: #90e0ef; color: #03045e; font-weight: bold; cursor: pointer; } .nav button:hover { background: #00b4d8; } .section { display: none; } .active-section { display: block; } .card { background: #caf0f8; border-radius: 12px; padding: 20px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); } .card img { width: 100px; margin-bottom: 15px; } </style> </head> <body> <div class="container" id="authContainer"></div> <script> const container = document.getElementById('authContainer'); const currentUser = localStorage.getItem('currentUser'); if (currentUser) { showDashboard(currentUser); } else if (localStorage.getItem("signupUsername")) { showLoginForm(); } else { showSignupForm(); } function showSignupForm() { container.innerHTML = ` <img class="icon" src="https://cdn-icons-png.flaticon.com/512/6075/6075699.png" alt="Doctor Icon" /> <h2>Sign Up - Medusys</h2> <input type="text" id="signupUsername" placeholder="Enter your username" required /> <input type="password" id="signupPassword" placeholder="Create a password" required /> <button onclick="signup()">Sign Up</button> <p class="toggle-link">Already registered? <a href="#" onclick="showLoginForm()">Login here</a></p> `; } function showLoginForm() { container.innerHTML = ` <img class="icon" src="https://cdn-icons-png.flaticon.com/512/3062/3062634.png" alt="Login Icon" /> <h2>Login - Medusys</h2> <input type="text" id="loginUsername" placeholder="Username" required /> <input type="password" id="loginPassword" placeholder="Password" required /> <button onclick="login()">Login</button> <p class="toggle-link">Don't have an account? <a href="#" onclick="showSignupForm()">Sign up here</a></p> `; } function showDashboard(name) { container.innerHTML = ` <h2>Welcome Dr. ${name}</h2> <div class="nav"> <button onclick="switchSection('home')">🏠 Home</button> <button onclick="switchSection('patients')">🧑🤝🧑 Patients</button> <button onclick="switchSection('appointments')">📅 Appointments</button> <button onclick="switchSection('reports')">📊 Reports</button> <button onclick="logout()">Logout</button> </div> <div id="dashboard"> <div id="home" class="section active-section card"> <img src="https://cdn-icons-png.flaticon.com/512/2462/2462719.png" alt="Home"> <h3>Home</h3> <p>Your Medusys dashboard at a glance.</p> </div> <div id="patients" class="section card"> <img src="https://cdn-icons-png.flaticon.com/512/4320/4320337.png" alt="Patients"> <h3>Patient Records</h3> <p>Access and manage your patients here.</p> </div> <div id="appointments" class="section card"> <img src="https://cdn-icons-png.flaticon.com/512/747/747310.png" alt="Appointments"> <h3>Appointments</h3> <p>Schedule and track patient appointments.</p> </div> <div id="reports" class="section card"> <img src="https://cdn-icons-png.flaticon.com/512/1828/1828919.png" alt="Reports"> <h3>Reports</h3> <p>View medical data, trends and statistics.</p> </div> </div> `; document.getElementById("dashboard").style.display = "flex"; } function switchSection(sectionId) { const sections = document.querySelectorAll('.section'); sections.forEach(section => section.classList.remove('active-section')); document.getElementById(sectionId).classList.add('active-section'); } function signup() { const username = document.getElementById('signupUsername').value; const password = document.getElementById('signupPassword').value; if (!username || !password) { alert("Please fill all fields"); return; } localStorage.setItem("signupUsername", username); localStorage.setItem("signupPassword", password); alert("Signup successful! Please login."); showLoginForm(); } function login() { const username = document.getElementById('loginUsername').value; const password = document.getElementById('loginPassword').value; const savedUser = localStorage.getItem("signupUsername"); const savedPass = localStorage.getItem("signupPassword"); if (username === savedUser && password === savedPass) { localStorage.setItem("currentUser", username); showDashboard(username); } else { alert("Invalid username or password."); } } function logout() { localStorage.removeItem("currentUser"); showLoginForm(); } </script> </body> </html>