feat: implement force reset functionality to clear local data and storage

css/main.css

@@ -1433,3 +1433,137 @@ h2:has(+ #exam-list:empty),  h2:has(+ #packet-list:empty){
     cursor: pointer;
     z-index: 10000;
 }
+
+/* Options and Cache Tidy Up */
+.options-details, .cache-details-box {
+    background: #181818;
+    border: 1px solid #333;
+    border-radius: 6px;
+    margin-bottom: 15px;
+    padding: 12px 18px;
+    font-family: sans-serif;
+}
+
+.options-details summary, .cache-details-box summary {
+    font-weight: bold;
+    cursor: pointer;
+    font-size: 15px;
+    outline: none;
+    color: #e0e0e0;
+}
+
+.options-details summary:hover, .cache-details-box summary:hover {
+    color: #fff;
+}
+
+.options-details[open], .cache-details-box[open] {
+    border-color: #444;
+}
+
+.options-details[open] summary, .cache-details-box[open] summary {
+    border-bottom: 1px solid #333;
+    padding-bottom: 8px;
+    margin-bottom: 12px;
+}
+
+.database-btn-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 15px;
+}
+
+.database-btn-group input[type="button"] {
+    background: #2a2a2a;
+    color: #eee;
+    border: 1px solid #444;
+    padding: 8px 14px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: bold;
+    transition: background-color 0.2s, border-color 0.2s;
+}
+
+.database-btn-group input[type="button"]:hover {
+    background: #3a3a3a;
+    border-color: #666;
+}
+
+.database-btn-group input#btn-delete-answer-databases {
+    background: #5f0909;
+    border-color: #8c0d0d;
+    color: #ffcdd2;
+}
+
+.database-btn-group input#btn-delete-answer-databases:hover {
+    background: #8c0d0d;
+    border-color: #b71c1c;
+}
+
+.database-btn-group input#btn-reset-local {
+    background: #5d2e00;
+    border-color: #8c4600;
+    color: #ffe0b2;
+}
+
+.database-btn-group input#btn-reset-local:hover {
+    background: #8c4600;
+    border-color: #e65100;
+}
+
+.local-loader-field {
+    border: 1px solid #333;
+    padding: 15px;
+    border-radius: 6px;
+    background: #111;
+    margin-bottom: 15px;
+}
+
+.local-loader-field h2 {
+    margin-top: 0;
+    font-size: 14px;
+    color: #ccc;
+    margin-bottom: 10px;
+}
+
+.local-loader-field input[type="file"] {
+    background: #222;
+    border: 1px solid #333;
+    color: #eee;
+    padding: 4px;
+    border-radius: 4px;
+    font-size: 12px;
+}
+
+.local-loader-field input[type="button"] {
+    background: #311B92;
+    color: #fff;
+    border: none;
+    padding: 6px 12px;
+    border-radius: 4px;
+    font-weight: bold;
+    cursor: pointer;
+    font-size: 12px;
+    margin-left: 5px;
+}
+
+.local-loader-field input[type="button"]:hover {
+    background: #4527A0;
+}
+
+.view-answers-btn {
+    background: #2e7d32;
+    color: white;
+    border: none;
+    padding: 10px 16px;
+    border-radius: 4px;
+    font-size: 13px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.view-answers-btn:hover {
+    background: #388e3c;
+}

index.html

@@ -210,16 +210,16 @@
             </span>
           </div>
           <div id="options-link"></div>
-          <div id="storage-details"></div>
+          <div id="storage-details" style="font-family: sans-serif; font-size: 13px; color: #aaa; margin: 15px 0 10px 0; padding-left: 5px;"></div>
           <div id="cache-details">
-            <details>
+            <details class="cache-details-box">
-              <summary></summary>
+              <summary>Cached Exams / Questions</summary>
-              <ul></ul>
+              <ul style="margin: 10px 0 0 15px; padding: 0; font-size: 13px; color: #ccc;"></ul>
             </details>
           </div>
-          <details>
+          <details class="options-details">
             <summary>Options</summary>
-            <div id="database-buttons">
+            <div id="database-buttons" class="database-btn-group">
               <input
                 type="button"
                 id="btn-delete-answer-databases"
@@ -236,28 +236,28 @@
                 value="Clear all local data"
               />
             </div>
-            <div id="local-fileloader">
+            <div id="local-fileloader" class="local-loader-field">
               <form
                 id="jsonFile"
                 name="jsonFile"
                 enctype="multipart/form-data"
                 method="post"
               >
-                <fieldset>
+                <fieldset style="border: none; padding: 0; margin: 0;">
                   <h2>Load local question set</h2>
                   <input type="file" id="fileinput" />
                   <input type="button" id="btn-local-file-load" value="Load" />
                 </fieldset>
               </form>
             </div>
-            <p>
+            <p style="margin: 15px 0;">
-              <button id="btn-view-local-answers">
+              <button id="btn-view-local-answers" class="view-answers-btn">
                 View local saved answers
               </button>
             </p>
-            <div id="logging-controls" style="margin-top: 15px; border-top: 1px solid #444; padding-top: 10px; font-family: sans-serif; font-size: 13px;">
+            <div id="logging-controls" style="margin-top: 15px; border-top: 1px solid #333; padding-top: 15px; font-family: sans-serif; font-size: 13px;">
-              <label for="select-log-level" style="font-weight: bold; color: #fff;">Logging Level:</label>
+              <label for="select-log-level" style="font-weight: bold; color: #ccc;">Logging Level:</label>
-              <select id="select-log-level" style="background:#222; color:#fff; border:1px solid #555; padding: 2px 5px; border-radius: 3px; font-size: 13px; margin-left: 5px; cursor: pointer;">
+              <select id="select-log-level" style="background:#222; color:#fff; border:1px solid #555; padding: 4px 8px; border-radius: 4px; font-size: 13px; margin-left: 5px; cursor: pointer; outline: none;">
                 <option value="silent">Disabled (Silent)</option>
                 <option value="error">Error</option>
                 <option value="warn">Warn</option>

js/main.js

@@ -44,6 +44,36 @@ function initLogging() {
 
 initLogging();
 
+function checkForceReset() {
+  try {
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get("reset") === "1" || urlParams.get("reset") === "true") {
+      log.info("Force reset parameter detected. Resetting all local data...");
+      
+      // Clear databases
+      try {
+        window.indexedDB.deleteDatabase("answers_database");
+        window.indexedDB.deleteDatabase("questions_database");
+      } catch (dbErr) {
+        log.error("Failed to delete indexedDB databases:", dbErr);
+      }
+      
+      // Clear storage
+      localStorage.clear();
+      sessionStorage.clear();
+      
+      // Clean query parameter from URL to prevent infinite loops, notify and reload
+      const cleanUrl = window.location.protocol + "//" + window.location.host + window.location.pathname;
+      alert("The application has been completely reset. All local data, storage, and databases have been cleared. Click OK to reload.");
+      window.location.href = cleanUrl;
+    }
+  } catch (e) {
+    log.error("Error during force reset:", e);
+  }
+}
+
+checkForceReset();
+
 
 let URLS = {};