improve: action page design; add: daemon status

webroot/css/index.css

@@ -14,7 +14,6 @@
   --lock-desc: #c9c9c9;
   --lock: #fff;
   --font-family: 'ProductSans Regular', 'ProductSans Italic', sans-serif;
-  /* --font-system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif */
 }
 
 .radios input[type=radio] {
@@ -196,7 +195,7 @@ a {
 .button {
   padding: 1em 0 1em 0;
   border-radius: 30px;
-  transition: transform 0.05s ease-in-out;
+  transition: transform 0.15s ease-in-out;
   background-color: var(--button);
 }
 
@@ -339,4 +338,20 @@ input:checked + .slider:before {
 
 .slider.round:before {
   border-radius: 50%;
-}
+}
+
+/* Responsive CSS */
+@media only screen and (max-width: 600px) {
+  .button_list {
+    display: grid;
+    grid-template-columns: 1fr;
+    column-gap: 20px;
+  }
+  .button {
+    padding: 1em 0 1em 0;
+    border-radius: 30px;
+    margin: 0.6em 0 0.6em;
+    transition: transform 0.15s ease-in-out;
+    background-color: var(--button);
+  }
+}

webroot/index.html

@@ -117,21 +117,33 @@
       <div id="panel_actions_header" class="header">Actions</div>
       <div style="padding: 40px 0px;"></div>
       <!-- INFO: Settings card body (Daemon32) -->
-      <div id="daemon32" class="dim card" style="margin: 0 15px 0 15px;">
+      <div id="daemon32" class="dimc" style="display: block; margin: 0 15px 0 15px; border-radius: 20px;">
-        <div class="dimc content" style="font-size: 1.1em; padding-left: 5px; padding-top: 6px; padding-bottom: 14px;">Daemon (32 bit)</div>
+        <div class="dimc liste" style="padding: 30px 22px 30px; border-radius: 20px;">
-        <div class="dimc content button_list">
+          <div class="dimc" style="font-size: 1.22em;">Daemon (32 bit)</div>
-          <div id="daemon32_stop_button" class="center button">Stop</div>
+          <div id="daemon32_status" class="dimc" style="font-size: 1.1em;">Unknown</div>
-          <div id="daemon32_start_button" class="center button">Start</div>
+        </div>
-          <div id="daemon32_exit_button" class="center button">Exit</div>
+
+        <div class="small_card_bg" style="padding: 25px 20px 25px 20px; border-radius: 20px;">
+          <div class="small_card_bg button_list">
+            <div id="daemon32_stop_button" class="center button">Stop</div>
+            <div id="daemon32_start_button" class="center button">Start</div>
+            <div id="daemon32_exit_button" class="center button">Exit</div>
+          </div>
         </div>
       </div>
       <!-- INFO: Settings card body (Daemon64) -->
-      <div id="daemon64" class="dim card" style="margin: 15px 15px 0 15px;">
+      <div id="daemon64" class="dimc" style="display: block; margin: 15px 15px 0 15px; border-radius: 20px;">
-        <div class="dimc content" style="font-size: 1.1em; padding-left: 5px; padding-top: 6px; padding-bottom: 22px;">Daemon (64 bit)</div>
+        <div class="dimc liste" style="padding: 30px 22px 30px; border-radius: 20px;">
-        <div class="dimc content button_list">
+          <div class="dimc" style="font-size: 1.22em;">Daemon (64 bit)</div>
-          <div id="daemon64_stop_button" class="center button">Stop</div>
+          <div id="daemon64_status" class="dimc" style="font-size: 1.1em;">Unknown</div>
-          <div id="daemon64_start_button" class="center button">Start</div>
+        </div>
-          <div id="daemon64_exit_button" class="center button">Exit</div>
+
+        <div class="small_card_bg" style="padding: 25px 20px 25px 20px; border-radius: 20px;">
+          <div class="small_card_bg button_list">
+            <div id="daemon64_stop_button" class="center button">Stop</div>
+            <div id="daemon64_start_button" class="center button">Start</div>
+            <div id="daemon64_exit_button" class="center button">Exit</div>
+          </div>
         </div>
       </div>
     </div>

webroot/js/language.js

@@ -1,3 +1,4 @@
+import { setError } from './main.js'
 import { translateActionPage } from './translate/action.js'
 import { translateHomePage } from './translate/home.js'
 import { translateModulesPage } from './translate/modules.js'
@@ -9,7 +10,7 @@ export async function setNewLanguage(locate, initialize) {
 
   translateHomePage(old_translations, new_translations)
   translateModulesPage(new_translations)
-  translateActionPage(new_translations)
+  translateActionPage(old_translations, new_translations)
   translateSettingsPage(new_translations)
 
   /* INFO: lang modal */
@@ -27,7 +28,8 @@ export async function setNewLanguage(locate, initialize) {
 }
 
 export async function getTranslations(locate) {
-  const translateData = await fetch(`./lang/${locate}.json`).catch(() => { /* INFO: noop */ })
+  const translateData = await fetch(`./lang/${locate}.json`)
+    .catch((err) => setError('WebUI', err.stack ? err.stack : err.message))
 
   return translateData.json()
 }

webroot/js/main.js

@@ -1,19 +1,19 @@
 import { fullScreen, exec, toast } from './kernelsu.js'
 import { setNewLanguage, getTranslations } from './language.js'
 
-function setError(place, issue) {
+export function setError(place, issue) {
   const fullErrorLog = setErrorData(`${place}: ${issue}`)
   document.getElementById('errorh_panel').innerHTML = fullErrorLog
   toast(`${place}: ${issue}`)
 }
 
-function setLangData(mode) {
+export function setLangData(mode) {
   localStorage.setItem('/system/language', mode)
 
   return localStorage.getItem('/system/language')
 }
 
-function setErrorData(errorLog) {
+export function setErrorData(errorLog) {
   const getPrevious = localStorage.getItem('/system/error')
   const finalLog = getPrevious && getPrevious.length !== 0 ? getPrevious + `\n` + errorLog : errorLog
 

webroot/js/translate/action.js

@@ -1,4 +1,4 @@
-export function translateActionPage(new_translations) {
+export function translateActionPage(old_translations, new_translations) {
   /* INFO: action card */
   document.getElementById('panel_actions_header').innerHTML = new_translations.page.action.header
 
@@ -15,4 +15,44 @@ export function translateActionPage(new_translations) {
     document.getElementById('daemon64_start_button').innerHTML = new_translations.page.action.daemonButton.start
     document.getElementById('daemon64_exit_button').innerHTML = new_translations.page.action.daemonButton.exit
   }
+
+  /* INFO: daemon32 status card */
+  const daemon32_status = document.getElementById('daemon32_status')
+  switch (daemon32_status.innerHTML.replace(/(\r\n|\n|\r)/gm, '').trim()) {
+    case old_translations.page.action.status.unknown: {
+      daemon32_status.innerHTML = new_translations.page.action.status.unknown
+
+      break
+    }
+    case old_translations.page.action.status.notWorking: {
+      daemon32_status.innerHTML = new_translations.page.action.status.notWorking
+
+      break
+    }
+    case old_translations.page.action.status.ok: {
+      daemon32_status.innerHTML = new_translations.page.action.status.ok
+
+      break
+    }
+  }
+
+  /* INFO: daemon64 status card */
+  const daemon64_status = document.getElementById('daemon64_status')
+  switch (daemon64_status.innerHTML.replace(/(\r\n|\n|\r)/gm, '').trim()) {
+    case old_translations.page.action.status.unknown: {
+      daemon64_status.innerHTML = new_translations.page.action.status.unknown
+
+      break
+    }
+    case old_translations.page.action.status.notWorking: {
+      daemon64_status.innerHTML = new_translations.page.action.status.notWorking
+
+      break
+    }
+    case old_translations.page.action.status.ok: {
+      daemon64_status.innerHTML = new_translations.page.action.status.ok
+
+      break
+    }
+  }
 }

webroot/lang/en_US.json

@@ -41,6 +41,11 @@
         "start": "Start",
         "stop": "Stop",
         "exit": "Exit"
+      },
+      "status": {
+        "unknown": "Unknown",
+        "notWorking": "Not Working",
+        "ok": "Working"
       }
     },
     "settings": {

webroot/lang/ja_JP.json

@@ -41,6 +41,11 @@
         "start": "スタート",
         "stop": "ストップ",
         "exit": "終了"
+      },
+      "status": {
+        "unknown": "Unknown",
+        "notWorking": "Not Working",
+        "ok": "Working"
       }
     },
     "settings": {

webroot/lang/pt_BR.json

@@ -41,6 +41,11 @@
         "start": "Iniciar",
         "stop": "Parar",
         "exit": "Sair"
+      },
+      "status": {
+        "unknown": "Desconhecido",
+        "notWorking": "Não funcionando",
+        "ok": "Funcionando"
       }
     },
     "settings": {

webroot/lang/ro_RO.json

@@ -41,6 +41,11 @@
         "start": "Start",
         "stop": "Stop",
         "exit": "Ieșire"
+      },
+      "status": {
+        "unknown": "Unknown",
+        "notWorking": "Not Working",
+        "ok": "Working"
       }
     },
     "settings": {

webroot/lang/ru_RU.json

@@ -41,6 +41,11 @@
         "start": "Старт",
         "stop": "Пауза",
         "exit": "Стоп"
+      },
+      "status": {
+        "unknown": "Unknown",
+        "notWorking": "Not Working",
+        "ok": "Working"
       }
     },
     "settings": {

webroot/lang/vi_VN.json

@@ -41,6 +41,11 @@
         "start": "Chạy",
         "stop": "Dừng",
         "exit": "Thoát"
+      },
+      "status": {
+        "unknown": "Không xác định",
+        "notWorking": "Không hoạt động",
+        "ok": "Đang hoạt động"
       }
     },
     "settings": {

webroot/lang/zh_CN.json

@@ -41,6 +41,11 @@
         "start": "启动",
         "stop": "停止",
         "exit": "退出"
+      },
+      "status": {
+        "unknown": "Unknown",
+        "notWorking": "Not Working",
+        "ok": "Working"
       }
     },
     "settings": {

webroot/lang/zh_TW.json

@@ -41,6 +41,11 @@
         "start": "啟動",
         "stop": "停止",
         "exit": "退出"
+      },
+      "status": {
+        "unknown": "Unknown",
+        "notWorking": "Not Working",
+        "ok": "Working"
       }
     },
     "settings": {