From 510dfa41ebd4bc4c39c6a26ff4d84207bd057d60 Mon Sep 17 00:00:00 2001
From: Chathumi-Kasthuriarachchi <kasthuriarachchikacb.23@uom.lk>
Date: Fri, 24 Oct 2025 22:33:32 +0530
Subject: [PATCH] loginbranch_amal log.html

---
 log.html | 109 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 109 insertions(+)
 create mode 100644 log.html
diff --git a/log.html b/log.html
new file mode 100644
index 0000000..e221945
--- /dev/null
+++ b/log.html
@@ -0,0 +1,109 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>Log In</title>
+  <style>
+    :root{--bg:#f4f7fb;--card:#fff;--accent:#0b66ff;--muted:#6b7280}
+    body{font-family:Segoe UI,Roboto,Arial;display:flex;min-height:100vh;align-items:center;justify-content:center;background:var(--bg);margin:0}
+    .card{background:var(--card);padding:28px;border-radius:10px;box-shadow:0 6px 20px rgba(12,24,40,.08);width:360px}
+    h1{margin:0 0 12px;font-size:20px}
+    label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
+    input[type="text"],input[type="password"],input[type="email"]{width:100%;padding:10px 12px;border:1px solid #e6e9ef;border-radius:6px;margin-bottom:12px;box-sizing:border-box}
+    .row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
+    .actions{display:flex;gap:8px}
+    button{background:var(--accent);color:#fff;border:none;padding:10px 14px;border-radius:6px;cursor:pointer}
+    .btn-ghost{background:transparent;border:1px solid #d6d9df;color:var(--muted)}
+    .note{font-size:13px;color:var(--muted);text-align:center;margin-top:12px}
+    .error{color:#b00020;font-size:13px;margin-top:-8px;margin-bottom:10px;display:none}
+    small.link{color:var(--accent);cursor:pointer}
+  </style>
+</head>
+<body>
+  <main class="card" aria-labelledby="loginTitle">
+    <h1 id="loginTitle">Sign in to your account</h1>
+    <form id="loginForm" novalidate>
+      <label for="email">Email</label>
+      <input id="email" name="email" type="email" placeholder="you@example.com" required />
+      <div id="emailErr" class="error">Please enter a valid email.</div>
+
+      <label for="password">Password</label>
+      <input id="password" name="password" type="password" placeholder="••••••••" required minlength="6" />
+      <div id="passErr" class="error">Password must be at least 6 characters.</div>
+
+      <div class="row">
+        <label><input id="remember" name="remember" type="checkbox" /> Remember me</label>
+        <small class="link" onclick="togglePassword()">Show</small>
+      </div>
+
+      <div class="actions">
+        <button type="submit">Log in</button>
+        <button type="button" class="btn-ghost" id="demoBtn">Demo</button>
+      </div>
+
+      <p class="note">New here? <small class="link" onclick="alert('Register flow not implemented')">Create an account</small></p>
+    </form>
+  </main>
+
+  <script>
+    const form = document.getElementById('loginForm');
+    const email = document.getElementById('email');
+    const password = document.getElementById('password');
+    const emailErr = document.getElementById('emailErr');
+    const passErr = document.getElementById('passErr');
+    const demoBtn = document.getElementById('demoBtn');
+
+    function showError(el, show) { el.style.display = show ? 'block' : 'none'; }
+
+    function validate() {
+      let ok = true;
+      // simple HTML5 validation plus extra checks
+      if (!email.value || !email.checkValidity()) { showError(emailErr, true); ok = false; } else showError(emailErr, false);
+      if (!password.value || password.value.length < 6) { showError(passErr, true); ok = false; } else showError(passErr, false);
+      return ok;
+    }
+
+    form.addEventListener('submit', (e) => {
+      e.preventDefault();
+      if (!validate()) return;
+      // Simulate authentication: store user info in sessionStorage (for demo only)
+      const payload = { email: email.value, remember: document.getElementById('remember').checked, ts: Date.now() };
+      sessionStorage.setItem('authDemo', JSON.stringify(payload));
+      console.log('Login payload:', payload);
+      // Provide feedback to user
+      alert('Logged in (demo). Check sessionStorage or console.');
+      // Redirect simulation:
+      // location.href = '/dashboard.html';
+    });
+
+    demoBtn.addEventListener('click', () => {
+      email.value = 'demo@example.com';
+      password.value = 'password';
+    });
+
+    function togglePassword() {
+      password.type = password.type === 'password' ? 'text' : 'password';
+      // update small text
+      document.querySelector('.link').textContent = password.type === 'password' ? 'Show' : 'Hide';
+    }
+
+    // optional: prefill if "remember" was set previously
+    (function loadRemember() {
+      try {
+        const saved = JSON.parse(localStorage.getItem('remembered'));
+        if (saved && saved.email) {
+          email.value = saved.email;
+          document.getElementById('remember').checked = true;
+        }
+      } catch {}
+    })();
+
+    // Save remembered email on change
+    document.getElementById('remember').addEventListener('change', (ev) => {
+      if (ev.target.checked) localStorage.setItem('remembered', JSON.stringify({ email: email.value || '' }));
+      else localStorage.removeItem('remembered');
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
