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>

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>