Add prediction comparison feature

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;
 }

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">

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;
+      });
+    }
+  });
+});

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;
+}

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;
+      });
+    }
+  });
+});

src/frontend/components/RecentPredictions.js

@@ -1,4 +1,8 @@
-import { getPredictions, clearPredictions } from "../js/predictionStorage.js";
+import {
+  getPredictions,
+  clearPredictions,
+  comparePredictions
+} from "../js/predictionStorage.js";
 
 export default function RecentPredictions() {
   const history = getPredictions();
@@ -11,16 +15,35 @@ export default function RecentPredictions() {
   container.appendChild(title);
 
   history.forEach((item, i) => {
-    const div = document.createElement("div");
-    div.className = "prediction-item";
-    div.innerHTML = `
-      <p><strong>${item.timestamp}</strong></p>
-      <p>Input: ${item.input}</p>
-      <p>Output: ${item.output}</p>
-    `;
-    container.appendChild(div);
-  });
+  const div = document.createElement("div");
+  div.className = "prediction-item";
 
+  div.innerHTML = `
+    <p><strong>${item.timestamp}</strong></p>
+    <p>Input: ${item.input}</p>
+    <p>Output: ${item.output}</p>
+  `;
+
+  const compareBtn = document.createElement("button");
+  compareBtn.textContent = "Compare";
+
+  compareBtn.onclick = () => {
+    if (i + 1 < history.length) {
+      const result = comparePredictions(i + 1, i);
+
+      alert(
+        `Previous Output: ${result.previous.output}
+        Latest Output: ${result.latest.output}`
+      );
+    } else {
+      alert("No previous prediction available");
+    }
+  };
+
+  div.appendChild(compareBtn);
+
+  container.appendChild(div);
+});
   if (history.length > 0) {
     const clearBtn = document.createElement("button");
     clearBtn.textContent = "Clear History";

src/frontend/js/predictionStorage.js

@@ -12,3 +12,11 @@ export function getPredictions() {
 export function clearPredictions() {
   localStorage.removeItem("predictions");
 }
+export function comparePredictions(index1, index2) {
+  const history = getPredictions();
+
+  return {
+    previous: history[index1],
+    latest: history[index2]
+  };
+}