From 01dde14ed7dea52bea48aecbdf2ad28e6496ff08 Mon Sep 17 00:00:00 2001
From: prachishelke1312 <prachishelake2905@gmail.com>
Date: Wed, 3 Jun 2026 23:03:58 +0530
Subject: [PATCH] Add lamp indicator toggle for login and signup forms

---
 login.css    | 29 +++++++++++++++++++++++++++++
 login.html   |  4 ++++
 login.js     | 34 ++++++++++++++++++++++++++++++++++
 register.css | 29 +++++++++++++++++++++++++++++
 register.js  | 34 ++++++++++++++++++++++++++++++++++
 5 files changed, 130 insertions(+)

diff --git a/login.css b/login.css
index a358a98e..27183d8f 100644
--- a/login.css
+++ b/login.css
@@ -643,4 +643,33 @@ input::-webkit-reveal {
   .forgot-password {
     margin-bottom: 15px;
   }
+}
+/* Lamp Toggle */
+.lamp-container {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+#lampToggle {
+  padding: 10px 18px;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  background: #ffd54f;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+/* Dark Overlay */
+#darkOverlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 20px;
+  z-index: 5;
+  transition: opacity 0.4s ease;
+}
+
+.hidden {
+  display: none;
 }
\ No newline at end of file
diff --git a/login.html b/login.html
index 607f3847..37d825da 100644
--- a/login.html
+++ b/login.html
@@ -50,7 +50,11 @@
           </svg>
         </button>
       </div>
+      <div class="lamp-container">
+        <button id="lampToggle" type="button">💡 ON</button>
+    </div>
 
+      <div id="darkOverlay" class="hidden"></div>
       <!-- Brand section -->
       <div class="brand-section">
         <a href="./index.html" class="brand-icon">
diff --git a/login.js b/login.js
index adbf78e8..dbdc4494 100644
--- a/login.js
+++ b/login.js
@@ -108,3 +108,37 @@ function togglePassword() {
     eyeIcon.className  = "fas fa-eye";
   }
 }
+// Lamp Toggle Feature
+document.addEventListener("DOMContentLoaded", () => {
+  const lampToggle = document.getElementById("lampToggle");
+  const darkOverlay = document.getElementById("darkOverlay");
+
+  if (!lampToggle || !darkOverlay) return;
+
+  const inputs = document.querySelectorAll(
+    'input, button[type="submit"]'
+  );
+
+  let lampOn = true;
+
+  lampToggle.addEventListener("click", () => {
+    lampOn = !lampOn;
+
+    if (lampOn) {
+      lampToggle.textContent = "💡 ON";
+      darkOverlay.classList.add("hidden");
+
+      inputs.forEach(input => {
+        input.disabled = false;
+      });
+
+    } else {
+      lampToggle.textContent = "💡 OFF";
+      darkOverlay.classList.remove("hidden");
+
+      inputs.forEach(input => {
+        input.disabled = true;
+      });
+    }
+  });
+});
\ No newline at end of file
diff --git a/register.css b/register.css
index ff9aaa0f..57215415 100644
--- a/register.css
+++ b/register.css
@@ -547,3 +547,32 @@ input::-webkit-reveal {
 .form-container a:hover {
   color: #0f3d1e;
 }
+/* Lamp Toggle */
+.lamp-container {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+#lampToggle {
+  padding: 10px 18px;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  background: #ffd54f;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+/* Dark Overlay */
+#darkOverlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 20px;
+  z-index: 5;
+  transition: opacity 0.4s ease;
+}
+
+.hidden {
+  display: none;
+}
\ No newline at end of file
diff --git a/register.js b/register.js
index df82de8e..79773753 100644
--- a/register.js
+++ b/register.js
@@ -262,3 +262,37 @@ document.addEventListener("keydown", function (e) {
 
 document.addEventListener("DOMContentLoaded", updateProgress);
 document.getElementById("password").addEventListener("input", checkPasswordStrength);
+// Lamp Toggle Feature
+document.addEventListener("DOMContentLoaded", () => {
+  const lampToggle = document.getElementById("lampToggle");
+  const darkOverlay = document.getElementById("darkOverlay");
+
+  if (!lampToggle || !darkOverlay) return;
+
+  const formInputs = document.querySelectorAll(
+    "#role, #fullname, #email, #password, #confirmPassword, #register-btn"
+  );
+
+  let lampOn = true;
+
+  lampToggle.addEventListener("click", () => {
+    lampOn = !lampOn;
+
+    if (lampOn) {
+      lampToggle.textContent = "💡 ON";
+      darkOverlay.classList.add("hidden");
+
+      formInputs.forEach(input => {
+        input.disabled = false;
+      });
+
+    } else {
+      lampToggle.textContent = "💡 OFF";
+      darkOverlay.classList.remove("hidden");
+
+      formInputs.forEach(input => {
+        input.disabled = true;
+      });
+    }
+  });
+});
\ No newline at end of file