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
backslashxx · Jan 6, 2025 · 73cc160 · 73cc160
1 parent a002103
commit 73cc160
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 31 deletions.
diff --git a/module/webroot/index.html b/module/webroot/index.html
@@ -15,23 +15,32 @@
 </head>
 
 <body>
+    <!-- Header -->
 	<div class="cover"></div>
 	<div class="header-block"></div>
 	<div class="header">
 		<div id="title">bindhosts <span id="version-text"></span></div>
-		<div id="mode-btn" class="current-mode-text"><span data-i18n="mode.button"></span><span id="mode-text">X</span>
-		</div>
+		<button class="docs-btn" id="mode-btn" data-type="modes">
+		    <span data-i18n="mode.button"></span><span id="mode-text">X</span>
+		</button>
 	</div>
+
+	<!-- Start of box content -->
 	<div class="content">
+	    <!-- Action button -->
 		<div class="float">
 			<button id="actionButton" class="action-button">
 				<i class="fa fa-play"></i>
 			</button>
 		</div>
+
+		<!-- Status box -->
 		<div class="box" id="status-box">
 			<h2 id="status-header" data-i18n="status.title"></h2>
 			<p id="status-text">Initializing</p>
 		</div>
+
+        <!-- Control Panel box -->
 		<div class="box" id="control-panel">
 			<div>
 				<h2 data-i18n="control_panel.title"></h2>
@@ -75,6 +84,8 @@ <h2 data-i18n="control_panel.title"></h2>
 				</div>
 			</div>
 		</div>
+
+		<!-- Custom box -->
 		<div class="box">
 			<div>
 				<h2 data-i18n="custom.title"></h2>
@@ -90,6 +101,8 @@ <h2 data-i18n="custom.title"></h2>
 			</div>
 			<ul id="custom-list"></ul>
 		</div>
+
+        <!-- Source box -->
 		<div class="box">
 			<div>
 				<h2 data-i18n="source.title"></h2>
@@ -106,6 +119,8 @@ <h2 data-i18n="source.title"></h2>
 			</div>
 			<ul id="sources-list"></ul>
 		</div>
+
+        <!-- Blacklist box -->
 		<div class="box">
 			<div>
 				<h2 data-i18n="blacklist.title"></h2>
@@ -121,6 +136,8 @@ <h2 data-i18n="blacklist.title"></h2>
 			</div>
 			<ul id="blacklist-list"></ul>
 		</div>
+
+        <!-- Whitelist box -->
 		<div class="box">
 			<div>
 				<h2 data-i18n="whitelist.title"></h2>
@@ -137,6 +154,9 @@ <h2 data-i18n="whitelist.title"></h2>
 			<ul id="whitelist-list"></ul>
 		</div>
 	</div>
+    <!-- End of box content -->
+
+    <!-- Help overlay -->
 	<div id="language-help" class="overlay">
 		<div class="overlay-content">
 			<div>
@@ -197,34 +217,37 @@ <h2 data-i18n="whitelist.title"></h2>
 			</ul>
 		</div>
 	</div>
-
+
+	<!-- Docs overlay -->
 	<div id="source-docs" class="docs">
 		<div class="docs-content">
 			<button class="close-docs-btn" onclick="closeOverlay('source-docs')">&#x2715;</button>
 			<div class="documents">
 			    <div id="source-content">Loading...</div>
+			    <div class="credit-marked">Markdown Parser by markedjs/marked</div>
 			</div>
 		</div>
 	</div>
-
     <div id="translate-docs" class="docs">
 		<div class="docs-content">
 			<button class="close-docs-btn" onclick="closeOverlay('translate-docs')">&#x2715;</button>
 			<div class="documents">
 			    <div id="translate-content">Loading...</div>
+			    <div class="credit-marked">Markdown Parser by markedjs/marked</div>
 			</div>
 		</div>
 	</div>
-
 	<div id="modes-docs" class="docs">
 		<div class="docs-content">
 			<button class="close-docs-btn" onclick="closeOverlay('modes-docs')">&#x2715;</button>
 			<div class="documents">
 			    <div id="modes-content">Loading...</div>
+			    <div class="credit-marked">Markdown Parser by markedjs/marked</div>
 			</div>
 		</div>
 	</div>
 
+    <!-- Mode menu overlay -->
 	<div id="mode-menu" class="overlay">
 		<div class="overlay-content">
 			<button class="close-btn" onclick="closeOverlay('mode-menu')">&#x2715;</button>
@@ -290,7 +313,11 @@ <h2 data-i18n="mode.title"></h2>
 			</div>
 		</div>
 	</div>
+
+    <!-- Prompt -->
 	<div id="prompt" class="prompt"></div>
+
+    <!-- Footer -->
 	<div class="footer">
 		<div id="module">bindhosts</div>
 		<div id="webui">WebUI by KOWX712</div>

diff --git 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;
     }
 }
diff --git 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
@@ -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
@@ -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,