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 @@
+
+
+
+
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