diff --git a/README.md b/README.md index be2e175..9c68f40 100644 --- a/README.md +++ b/README.md @@ -49,6 +49,7 @@ ![](docs/images/0.jpg) +> **提示:** 上图展示的部分不常用的功能现已默认隐藏，如需显示可点击页面底部的 `开发模式` 链接。 ## 开发 diff --git a/docs/images/0.jpg b/docs/images/0.jpg index 5d9e3ed..46cec5b 100644 Binary files a/docs/images/0.jpg and b/docs/images/0.jpg differ diff --git a/html/css/main.css b/html/css/main.css index b379b1d..e6e4441 100644 --- a/html/css/main.css +++ b/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; -} - -.right-controls { - display: flex; - flex-wrap: wrap; - gap: 8px; - align-items: center; - margin-left: auto; + margin-bottom: 8px; } .flex-group { @@ -101,7 +201,6 @@ code { flex-wrap: wrap; gap: 8px; align-items: center; - margin-bottom: 8px; } #status { diff --git a/html/index.html b/html/index.html index b79792d..17ed4fb 100644 --- a/html/index.html +++ b/html/index.html @@ -4,7 +4,7 @@ 4.2 寸电子墨水屏蓝牙控制器 - + @@ -13,48 +13,39 @@
蓝牙连接
-
+
-
-
- - -
-
- - -
-
- -
+
+ + +
+
+ + + +
+
+ + + +
+
+ +
-
- 屏幕控制 -
-
- - - -
-
- - -
-
-
蓝牙传图
@@ -82,6 +73,8 @@
+
+
@@ -101,14 +94,14 @@ © 2025 tsl0922. Github - • 交流群 + 开发模式
- + \ No newline at end of file diff --git a/html/js/main.js b/html/js/main.js index e73e71a..0e5356e 100644 --- a/html/js/main.js +++ b/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(); } \ No newline at end of file