From 73cc16018848a403677530913157d68eb3684922 Mon Sep 17 00:00:00 2001 From: KOWX712 Date: Mon, 6 Jan 2025 18:20:57 +0800 Subject: [PATCH] webui: add docs trigger on mode button - js: add modes.md trigger on mode button before enabling developer option - css: adjust UI - html: add some remark for better readability --- module/webroot/index.html | 37 +++++++++++++++++++++++++++----- module/webroot/markdown.css | 30 +++++++++++++++----------- module/webroot/scripts/docs.js | 3 ++- module/webroot/scripts/index.js | 10 ++++++--- module/webroot/styles.css | 38 +++++++++++++++++++++++++-------- 5 files changed, 87 insertions(+), 31 deletions(-) diff --git a/module/webroot/index.html b/module/webroot/index.html index 511fd6f..4c200f1 100644 --- a/module/webroot/index.html +++ b/module/webroot/index.html @@ -15,23 +15,32 @@ +
bindhosts
-
X -
+
+ +
+
+ +

Initializing

+ +

@@ -75,6 +84,8 @@

+ +

@@ -90,6 +101,8 @@

+ +

@@ -106,6 +119,8 @@

+ +

@@ -121,6 +136,8 @@

+ +

@@ -137,6 +154,9 @@

    + + +
    @@ -197,34 +217,37 @@

    - + +
    Loading...
    +
    Markdown Parser by markedjs/marked
    -
    Loading...
    +
    Markdown Parser by markedjs/marked
    -
    Loading...
    +
    Markdown Parser by markedjs/marked
    +
    @@ -290,7 +313,11 @@

    + +
    + +
    bindhosts
    WebUI by KOWX712
    diff --git a/module/webroot/markdown.css b/module/webroot/markdown.css index 7745c4b..7b9d87f 100644 --- a/module/webroot/markdown.css +++ b/module/webroot/markdown.css @@ -12,20 +12,15 @@ user-select: none; } -.documents h1 { - margin-bottom: 5px; -} - -.documents h2 { - margin-bottom: 5px; -} - -.documents h3 { +.documents h1, +.documents h2, +.documents h3, +.documents h4 { margin-bottom: 5px; } -.documents h4 { - margin-bottom: 5px; +.documents h1 { + margin-top: 0; } .documents ul { @@ -43,10 +38,11 @@ .documents a { color: black; cursor: none; + transition: color 0.1s ease-out; } .documents a:active { - color: blue; + color: #2079CF; } .documents pre { @@ -59,6 +55,9 @@ .documents code { font-family: monospace; color: #333; + background-color: #f4f4f4; + border-radius: 5px; + padding: 1px; user-select: auto; } @@ -72,11 +71,16 @@ background-color: #343434; } + .documents a:active { + color: #339BFF; + } + .documents pre { background-color: #6E6E6E; } .documents code { - color: #eee; + color: #fff; + background-color: #6E6E6E; } } \ No newline at end of file diff --git a/module/webroot/scripts/docs.js b/module/webroot/scripts/docs.js index 8237b0f..7f467b2 100644 --- a/module/webroot/scripts/docs.js +++ b/module/webroot/scripts/docs.js @@ -1,4 +1,4 @@ -import { linkRedirect, applyRippleEffect, toast } from './index.js'; +import { linkRedirect, applyRippleEffect, toast, developerOption, learnMore } from './index.js'; // Function to fetch documents function getDocuments(link, element) { @@ -75,6 +75,7 @@ export function setupDocsMenu() { button.addEventListener("click", () => { const type = button.dataset.type; const overlay = document.getElementById(`${type}-docs`); + if (type === 'modes' && developerOption && !learnMore) return; if (overlay) { openOverlay(overlay); const { link, element } = docsData[type] || {}; diff --git a/module/webroot/scripts/index.js b/module/webroot/scripts/index.js index e9addcd..e5608c5 100644 --- a/module/webroot/scripts/index.js +++ b/module/webroot/scripts/index.js @@ -27,8 +27,9 @@ const rippleClasses = ['#mode-btn', '.action-button', '#status-box', '.input-box let clickCount = 0; let timeout; let clickTimeout; -let developerOption = false; let disableTimeout; +export let developerOption = false; +export let learnMore = false; // Function to add material design style ripple effect export function applyRippleEffect() { @@ -313,6 +314,9 @@ function setupHelpMenu() { overlay.classList.remove("active"); document.body.style.overflow = ""; activeOverlay = null; + setTimeout(() => { + learnMore = false; + }, 50); } } @@ -363,8 +367,7 @@ document.getElementById("mode-btn").addEventListener("click", async () => { await checkDevOption(); if (developerOption) { openOverlay(document.getElementById("mode-menu")); - } else { - linkRedirect('https://github.com/backslashxx/bindhosts/blob/master/Documentation/modes.md#bindhosts-operating-modes'); + learnMore = true; } }); @@ -407,6 +410,7 @@ async function saveModeSelection(mode) { if (mode === "reset") { await execCommand("rm -f /data/adb/bindhosts/mode_override.sh"); closeOverlay("mode-menu"); + learnMore = false; } else { await execCommand(`echo "mode=${mode}" > /data/adb/bindhosts/mode_override.sh`); } diff --git a/module/webroot/styles.css b/module/webroot/styles.css index 9145730..ec9336a 100644 --- a/module/webroot/styles.css +++ b/module/webroot/styles.css @@ -55,10 +55,12 @@ body.input-focused { font-size: 16px; } -.current-mode-text { +#mode-btn { font-size: 16px; + font-weight: bold; color: #fff; background-color: #007bff; + border: none; border-radius: 8px; padding: 5px 10px; text-decoration: none; @@ -435,6 +437,7 @@ button.delete-btn { } #source-btn { + color: #333; left: 50%; transform: translateX(-50%); border: 1px solid #9e9e9e; @@ -474,6 +477,7 @@ button.delete-btn { .overlay-content { background: white; padding: 20px; + padding-top: 40px; border-radius: 15px; max-width: 600px; width: 75vw; @@ -483,28 +487,43 @@ button.delete-btn { overflow-wrap: anywhere; } +.overlay-content h2 { + margin-top: 0; +} + .docs-content { background: white; - padding: 20px 30px; + padding-top: 40px; + padding-bottom: 20px; border-radius: 15px; - width: 80vw; + width: 95vw; max-width: 850px; position: relative; - overflow-wrap: anywhere; overflow: hidden; } .documents { - max-height: calc(90vh - 40px); - white-space: nowarp; + color: #333; + padding: 0 25px; + max-height: calc(80vh - 40px); overflow-y: auto; user-select: none; + white-space: normal; + overflow-wrap: break-word; +} + +.credit-marked { + text-align: center; + font-size: 14px; + padding-top: 15px; + width: 100%; + color: #ccc; } #language-help .overlay-content { display: flex; width: fit-content; - padding: 25px 40px; + padding: 25px 10px; max-width: 90vw; flex-direction: column; align-items: center; @@ -532,8 +551,8 @@ button.delete-btn { content: ""; position: absolute; bottom: 0; - left: 20px; - width: calc(100% - 40px); + left: 30px; + width: calc(100% - 60px); height: 1px; background-color: #ccc; } @@ -651,6 +670,7 @@ button.delete-btn { border-bottom: 1px solid #6E6E6E; } + #source-btn, .language-option, .toggle-list, .overlay-content,