add debug mode for html

README.md

@@ -49,6 +49,7 @@
 
 ![](docs/images/0.jpg)
 
+> **提示:** 上图展示的部分不常用的功能现已默认隐藏，如需显示可点击页面底部的 `开发模式` 链接。
 
 ## 开发
 

html/css/main.css

@@ -3,12 +3,97 @@
     --primary-hover: #0b5ed7;
     --secondary-color: #6c757d;
     --secondary-hover: #5c636a;
+
+    --dark-bg: #121212;
+    --dark-text: #e0e0e0;
+    --dark-fieldset-bg: #1e1e1e;
+    --dark-border: #333;
+    --dark-code-bg: #2d2d2d;
+    --dark-log-bg: #2a2a2a;
+    --dark-input-bg: #2d2d2d;
+    --dark-input-text: #e0e0e0;
 }
 
 body {
     margin: 0;
     padding: 0;
     font-family: system-ui, -apple-system, sans-serif;
+    overflow-x: hidden;
+}
+
+.debug {
+    display: none !important;
+}
+
+body.debug-mode .debug {
+    display: flex !important;
+}
+
+body.debug-mode {
+    background-color: var(--dark-bg);
+    color: var(--dark-text);
+}
+
+body.debug-mode .main {
+    background-color: var(--dark-bg);
+    color: var(--dark-text);
+}
+
+body.debug-mode fieldset {
+    background-color: var(--dark-fieldset-bg);
+    box-shadow: 0 .5rem 0.5rem rgba(0, 0, 0, 0.5);
+}
+
+body.debug-mode h3 {
+    border-bottom: 1px solid var(--dark-border);
+    color: var(--dark-text);
+}
+
+body.debug-mode code {
+    background: var(--dark-code-bg);
+    color: #ff9800;
+}
+
+body.debug-mode #log {
+    background: var(--dark-log-bg);
+    border: 1px solid var(--dark-border);
+}
+
+body.debug-mode #log .time {
+    color: #8bc34a;
+}
+
+body.debug-mode #log .action {
+    color: #03a9f4;
+}
+
+body.debug-mode input[type=text],
+body.debug-mode input[type=number],
+body.debug-mode select {
+    background-color: var(--dark-input-bg);
+    color: var(--dark-input-text);
+    border-color: var(--dark-border);
+}
+
+body.debug-mode input[type=file] {
+    color: var(--dark-input-text);
+    background-color: transparent;
+    border-color: var(--dark-border);
+}
+
+body.debug-mode input[type=file]::file-selector-button {
+    background-color: var(--dark-fieldset-bg);
+    color: var(--dark-input-text);
+    border-color: var(--dark-border);
+}
+
+body.debug-mode input[type=file]::file-selector-button:hover {
+    background-color: #333;
+    border-color: #444;
+}
+
+body.debug-mode fieldset legend {
+    color: #64b5f6;
 }
 
 .main {
@@ -28,17 +113,31 @@ body {
     gap: 10px;
     font-size: 0.8rem;
     color: #666;
+    flex-wrap: wrap;
+    margin: 1rem 0;
 }
 
 .footer .links {
     display: flex;
-    gap: 5px;
     align-items: center;
 }
 
-.footer a {
+.footer .links a {
     color: #666;
     text-decoration: none;
+    position: relative;
+    padding: 0 8px;
+}
+
+.footer .links a:first-child {
+    padding-left: 0;
+}
+
+.footer .links a:not(:last-child)::after {
+    content: "•";
+    position: absolute;
+    right: -4px;
+    color: #999;
 }
 
 .footer a:hover {
@@ -46,6 +145,22 @@ body {
     text-decoration: underline;
 }
 
+body.debug-mode .footer .links a:not(:last-child)::after {
+    color: #666;
+}
+
+body.debug-mode .footer {
+    color: #999;
+}
+
+body.debug-mode .footer a {
+    color: #999;
+}
+
+body.debug-mode .footer a:hover {
+    color: #64b5f6;
+}
+
 h3 {
     padding-bottom: .3em;
     border-bottom: 1px solid #CCC;
@@ -75,25 +190,10 @@ code {
 }
 
 .flex-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    margin-bottom: 10px;
-}
-
-.left-controls {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
-    align-items: center;
+    margin-bottom: 8px;
-}
-
-.right-controls {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    align-items: center;
-    margin-left: auto;
 }
 
 .flex-group {
@@ -101,7 +201,6 @@ code {
     flex-wrap: wrap;
     gap: 8px;
     align-items: center;
-    margin-bottom: 8px;
 }
 
 #status {

html/js/main.js

@@ -377,10 +377,29 @@ function filterDitheringOptions() {
   dithering.value = '';
 }
 
+function checkDebugMode() {
+  const link = document.getElementById('debug-toggle');
+  const urlParams = new URLSearchParams(window.location.search);
+  const debugMode = urlParams.get('debug');
+  
+  if (debugMode === 'true') {
+      document.body.classList.add('debug-mode');
+      link.innerHTML = '正常模式';
+      link.setAttribute('href', window.location.pathname);
+      addLog("注意：开发模式功能已开启！不懂请不要随意修改，否则后果自负！");
+  } else {
+      document.body.classList.remove('debug-mode');
+      link.innerHTML = '开发模式';
+      link.setAttribute('href', window.location.pathname + '?debug=true');
+  }
+}
+
 document.body.onload = () => {
   canvas = document.getElementById('canvas');
 
   updateButtonStatus();
   update_image();
   filterDitheringOptions();
+
+  checkDebugMode();
 }