feat: add Settings Modal with Reset and Image Size controls

Author: vuquan2005

index.html

@@ -12,9 +12,9 @@
     <div class="header-compact">
         <h2>TestOpenCVjs <span id="status" title="Waiting for OpenCV...">🟠</span></h2>
         <div class="header-buttons">
-            <button id="btnResetProject" class="btn-primary" title="Reset Project to Default">
-                <span class="label-text">Reset</span>
-                <span class="icon-mobile">⚠️</span>
+            <button id="btnSettings" class="btn-primary" title="Settings">
+                <span class="label-text">Settings</span>
+                <span class="icon-mobile">⚙️</span>
             </button>
             <button id="btnProcess" class="btn-primary" title="Rerun">▶️</button>
         </div>
@@ -82,6 +82,39 @@ <h2 id="editorTitle">Edit Step</h2>
         </div>
     </div>
 
+    <!-- Settings Modal -->
+    <div id="settingsModal" class="modal">
+        <div class="modal-content about-content">
+            <div class="modal-header">
+                <h2>Settings</h2>
+                <span class="close-modal">&times;</span>
+            </div>
+            <div class="modal-body" style="padding: 20px; display: flex; flex-direction: column; gap: 15px;">
+                <p style="margin: 0; font-weight: 600;">Application Settings</p>
+                
+                <div style="padding-bottom: 15px;">
+                    <label for="itemSizeSlider" style="font-weight: 500; display: block; margin-bottom: 8px; color: #374151;">
+                        Image Size: <span id="itemSizeValue">120px</span>
+                    </label>
+                    <div style="display: flex; align-items: center; gap: 10px;">
+                        <span style="font-size: 0.8em; color: #666;">Small</span>
+                        <input type="range" id="itemSizeSlider" min="50" max="500" value="120" style="flex: 1;">
+                        <span style="font-size: 0.8em; color: #666;">Large</span>
+                    </div>
+                </div>
+
+                <div style="border-top: 1px solid #eee; padding-top: 15px;">
+                    <button id="btnResetProject" class="btn-primary btn-danger" style="width: 100%; justify-content: center;">
+                        ⚠️ Reset Project to Default
+                    </button>
+                    <p style="font-size: 0.85em; color: #666; margin-top: 5px; text-align: center;">
+                        This will delete all custom steps and restore the default pipeline.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- About Modal -->
     <div id="aboutModal" class="modal">
         <div class="modal-content about-content">

js/main.js

@@ -164,6 +164,55 @@ if (btnAbout && aboutModal) {
     });
 }
 
+// Settings Modal Logic
+const btnSettings = document.getElementById("btnSettings");
+const settingsModal = document.getElementById("settingsModal");
+const closeSettings = settingsModal ? settingsModal.querySelector(".close-modal") : null;
+
+if (btnSettings && settingsModal) {
+    // Image Size Slider Logic
+    const itemSizeSlider = document.getElementById("itemSizeSlider");
+    const itemSizeValue = document.getElementById("itemSizeValue");
+    
+    // Load saved size or default
+    const savedSize = localStorage.getItem("itemHeight");
+    if (savedSize) {
+        document.documentElement.style.setProperty("--item-height", savedSize + "px");
+        if (itemSizeSlider) itemSizeSlider.value = savedSize;
+        if (itemSizeValue) itemSizeValue.innerText = savedSize + "px";
+    } else {
+        // Initialize with default slider value
+        if (itemSizeSlider) {
+            document.documentElement.style.setProperty("--item-height", itemSizeSlider.value + "px");
+        }
+    }
+
+    if (itemSizeSlider && itemSizeValue) {
+        itemSizeSlider.addEventListener("input", (e) => {
+            const val = e.target.value;
+            document.documentElement.style.setProperty("--item-height", val + "px");
+            itemSizeValue.innerText = val + "px";
+            localStorage.setItem("itemHeight", val);
+        });
+    }
+
+    btnSettings.addEventListener("click", () => {
+        ModalManager.open(settingsModal);
+    });
+
+    if (closeSettings) {
+        closeSettings.addEventListener("click", () => {
+            ModalManager.close(settingsModal);
+        });
+    }
+
+    window.addEventListener("click", (event) => {
+        if (event.target === settingsModal) {
+            ModalManager.close(settingsModal);
+        }
+    });
+}
+
 const btnAddNewStepMain = document.getElementById("btnAddNewStepMain");
 if (btnAddNewStepMain) {
     btnAddNewStepMain.addEventListener("click", () => {

style.css

@@ -171,6 +171,20 @@ body.modal-open #master-scrollbar-container {
     border-color: transparent;
 }
 
+.btn-danger {
+    background-color: #dc3545;
+    color: white;
+}
+
+.btn-danger:hover {
+    background-color: #c82333;
+    transform: translateY(-1px);
+}
+
+.btn-danger:active {
+    transform: translateY(0);
+}
+
 @keyframes spin {
     from {
         transform: rotate(0deg);
@@ -508,7 +522,7 @@ body.modal-open #master-scrollbar-container {
 
 .image-item canvas,
 .image-item img {
-    max-height: 120px;
+    height: var(--item-height, 120px);
     width: auto;
     border: 1px solid #eee;
     background: #fff;
@@ -733,7 +747,7 @@ body.modal-open #master-scrollbar-container {
 
     .image-item canvas,
     .image-item img {
-        max-height: 80px;
+        height: var(--item-height, 80px);
     }
 
     .modal-content,
@@ -776,13 +790,11 @@ body.modal-open #master-scrollbar-container {
             font-size: 14px;
         }
 
-        #btnResetProject .label-text,
-        #btnViewResult .label-text {
+        .header-compact .label-text {
             display: none;
         }
 
-        #btnResetProject .icon-mobile,
-        #btnViewResult .icon-mobile {
+        .header-compact .icon-mobile {
             display: inline;
             font-size: 1.4em;
         }