add: base code for modal/lang support [W.I.P]

module/build.gradle.kts

@@ -167,9 +167,16 @@ androidComponents.onVariants { variant ->
                     set.add(Pair(root.file("webroot/js/main.js").asFile, null))
                     set.add(Pair(root.file("webroot/js/kernelsu.js").asFile, null))
                     set.add(Pair(root.file("webroot/js/theme.js").asFile, null))
+
                     set.add(Pair(root.file("webroot/js/list/module.js").asFile, null))
                     set.add(Pair(root.file("webroot/js/list/settings.js").asFile, null))
 
+                    set.add(Pair(root.file("webroot/js/lang/en_US.js").asFile, null))
+                    set.add(Pair(root.file("webroot/js/lang/vi_VN.js").asFile, null))
+                    set.add(Pair(root.file("webroot/js/lang/index.js").asFile, null))
+
+                    set.add(Pair(root.file("webroot/js/modal/lang.js").asFile, null))
+
                     set.add(Pair(root.file("webroot/fonts/ProductSans-Regular.ttf").asFile, null))
                     set.add(Pair(root.file("webroot/fonts/ProductSans-Italic.ttf").asFile, null))
 
@@ -184,6 +191,8 @@ androidComponents.onVariants { variant ->
                     set.add(Pair(root.file("webroot/assets/module.svg").asFile, null))
                     set.add(Pair(root.file("webroot/assets/expand.svg").asFile, null))
                     set.add(Pair(root.file("webroot/assets/settings.svg").asFile, null))
+                    set.add(Pair(root.file("webroot/assets/close.svg").asFile, null))
+                    set.add(Pair(root.file("webroot/assets/lang.svg").asFile, null))
                     sig.initSign(privKey)
                     set.forEach { it.first.sha(it.second) }
                     val signFile = root.file(name).asFile

module/src/customize.sh

@@ -118,9 +118,16 @@ extract "$ZIPFILE" 'webroot/index.html' "$MODPATH/webroot" true
 extract "$ZIPFILE" 'webroot/js/main.js' "$MODPATH/webroot/js" true
 extract "$ZIPFILE" 'webroot/js/kernelsu.js' "$MODPATH/webroot/js" true
 extract "$ZIPFILE" 'webroot/js/theme.js' "$MODPATH/webroot/js" true
+
 extract "$ZIPFILE" 'webroot/js/list/module.js' "$MODPATH/webroot/js/list" true
 extract "$ZIPFILE" 'webroot/js/list/settings.js' "$MODPATH/webroot/js/list" true
 
+extract "$ZIPFILE" 'webroot/js/lang/en_US.js' "$MODPATH/webroot/js/lang" true
+extract "$ZIPFILE" 'webroot/js/lang/vi_VN.js' "$MODPATH/webroot/js/lang" true
+extract "$ZIPFILE" 'webroot/js/lang/index.js' "$MODPATH/webroot/js/lang" true
+
+extract "$ZIPFILE" 'webroot/js/modal/lang.js' "$MODPATH/webroot/js/modal" true
+
 extract "$ZIPFILE" 'webroot/fonts/ProductSans-Regular.ttf' "$MODPATH/webroot/fonts" true
 extract "$ZIPFILE" 'webroot/fonts/ProductSans-Italic.ttf' "$MODPATH/webroot/fonts" true
 
@@ -135,6 +142,8 @@ extract "$ZIPFILE" 'webroot/assets/dark.svg' "$MODPATH/webroot/assets" true
 extract "$ZIPFILE" 'webroot/assets/module.svg' "$MODPATH/webroot/assets" true
 extract "$ZIPFILE" 'webroot/assets/expand.svg' "$MODPATH/webroot/assets" true
 extract "$ZIPFILE" 'webroot/assets/settings.svg' "$MODPATH/webroot/assets" true
+extract "$ZIPFILE" 'webroot/assets/close.svg' "$MODPATH/webroot/assets" true
+extract "$ZIPFILE" 'webroot/assets/lang.svg' "$MODPATH/webroot/assets" true
 
 if [ "$ARCH" = "x86" ] || [ "$ARCH" = "x64" ]; then
   ui_print "- Extracting x86 libraries"

webroot/assets/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e8eaed"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>

webroot/assets/lang.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q83 0 155.5 31.5t127 86q54.5 54.5 86 127T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Zm0-82q26-36 45-75t31-83H404q12 44 31 83t45 75Zm-104-16q-18-33-31.5-68.5T322-320H204q29 50 72.5 87t99.5 55Zm208 0q56-18 99.5-55t72.5-87H638q-9 38-22.5 73.5T584-178ZM170-400h136q-3-20-4.5-39.5T300-480q0-21 1.5-40.5T306-560H170q-5 20-7.5 39.5T160-480q0 21 2.5 40.5T170-400Zm216 0h188q3-20 4.5-39.5T580-480q0-21-1.5-40.5T574-560H386q-3 20-4.5 39.5T380-480q0 21 1.5 40.5T386-400Zm268 0h136q5-20 7.5-39.5T800-480q0-21-2.5-40.5T790-560H654q3 20 4.5 39.5T660-480q0 21-1.5 40.5T654-400Zm-16-240h118q-29-50-72.5-87T584-782q18 33 31.5 68.5T638-640Zm-234 0h152q-12-44-31-83t-45-75q-26 36-45 75t-31 83Zm-200 0h118q9-38 22.5-73.5T376-782q-56 18-99.5 55T204-640Z"/></svg>

webroot/css/index.css

@@ -29,7 +29,7 @@ a {
   text-decoration: none !important;
 }
 
-.loading_screen {
+.full_screen {
   position: fixed;
   width: 100%;
   height: 100%;

webroot/index.html

@@ -9,25 +9,39 @@
     <script src="js/list/module.js" type="module"></script>
     <script src="js/list/settings.js" type="module"></script>
     <script src="js/main.js" type="module"></script>
+    <script src="js/modal/lang.js" type="module"></script>
     <link rel="stylesheet" href="css/fonts.css">
     <link rel="stylesheet" href="css/index.css">
   </head>
-  <body>
-    <!-- Loading screen -->
-    <div class="loading_screen">
+  <body id="main_body">
+    <!-- INFO: Loading screen -->
+    <div id="loading_screen" class="full_screen">
       <div class="loader"></div>
     </div>
-
-    <!-- Headers -->
-    <div class="header">
-      <div>ReZygisk</div>
-      <div id="theme-switcher" style="color: black;">
-        <img src="assets/dark.svg">
+    
+    <!-- INFO: Modal list -->
+    <div id="lang_modal" class="full_screen" style="display: none;">
+      <div id="lang_modal_close" class="close_icon" style="margin-top: 20px; margin-left: 20px;">
+        <img src="assets/close.svg">
       </div>
     </div>
+
+    <!-- INFO: Headers -->
+    <div class="header">
+      <div>ReZygisk</div>
+      <div style="display: flex; align-items: center;">
+        <div id="lang_switcher">
+          <img src="assets/lang.svg">
+        </div>
+        <div id="theme_switcher" style="margin-left: 10px;">
+          <img src="assets/dark.svg">
+        </div>
+      </div>
+    </div>
+
     <div style="padding: 40px 0px;"></div>
 
-    <!-- Info card -->
+    <!-- INFO: Info card -->
     <div id="info_card" class="bright card">
       <div class="brightc content" style="display: flex; align-items: center;">
         <div id="rezygisk_icon_state" class="brightc">
@@ -55,10 +69,10 @@
       </div>
     </div>
 
-    <!-- Module list card -->
+    <!-- INFO: Module list card -->
     <div id="modules_card" class="dim card list" style="display: none;">
-      <!-- Module list card header -->
-      <div class="dimc liste">
+      <!-- INFO: Module list card header -->
+      <div id="modules_header" class="dimc liste">
         <div class="dimc" style="font-size: 1.2em; display: flex; align-items: center;">
           <div id="modules_list_icon" class="dimc">
             <img class="dimc" src="assets/module.svg">
@@ -73,16 +87,16 @@
         </div>
       </div>
 
-      <!-- Module list card body -->
+      <!-- INFO: Module list card body -->
       <div id="modules_list" class="dimc" style="width: 100%;">
         <!-- N/A -->
       </div>
     </div>
 
-    <!-- Settings card -->
+    <!-- INFO: Settings card -->
     <div id="rezygisk_settings" class="dim card list" style="display: none;">
-      <!-- Settings card header -->
-      <div class="dimc" style="align-items: center; display: flex; justify-content: space-between; padding-bottom: 10px;">
+      <!-- INFO: Settings card header -->
+      <div id="settings_header" class="dimc" style="align-items: center; display: flex; justify-content: space-between; padding-bottom: 10px;">
         <div class="dimc" style="align-items: center; display: flex;">
           <div class="dimc" id="setting_icon">
             <img class="dimc" src="assets/settings.svg">
@@ -98,22 +112,22 @@
           </div>
         </div>
       </div>
-      <!-- Settings card body (Daemon32) -->
+      <!-- INFO: Settings card body (Daemon32) -->
       <div class="small_card">
         <div class="small_card_bg content" style="font-size: 1.1em; padding-left: 5px; padding-top: 6px; padding-bottom: 14px;">Daemon (32 bit)</div>
         <div class="small_card_bg content button_list">
           <div class="center button">Stop</div>
           <div class="center button">Start</div>
-          <div class="center button">Restart</div>
+          <div class="center button">Exit</div>
         </div>
       </div>
-      <!-- Settings card body (Daemon64) -->
+      <!-- INFO: Settings card body (Daemon64) -->
       <div class="small_card" style="margin-top: 15px;">
         <div class="small_card_bg content" style="font-size: 1.1em; padding-left: 5px; padding-top: 6px; padding-bottom: 14px;">Daemon (64 bit)</div>
         <div class="small_card_bg content button_list">
           <div class="center button">Stop</div>
           <div class="center button">Start</div>
-          <div class="center button">Restart</div>
+          <div class="center button">Exit</div>
         </div>
       </div>
     </div>

webroot/js/lang/en_US.js

@@ -0,0 +1,29 @@
+export const en_US = {
+  langName: "English (United States)",
+  infoCard: {
+    status: {
+      unknown: "ReZygisk is at an unknown state!",
+      notWorking: "ReZygisk is not functioning!",
+      ok: "ReZygisk is fully functioning!",
+      partially: "ReZygisk is partially functioning!"
+    },
+    version: "Version",
+    root: "Root Implementation",
+    zygote: {
+      injected: "Injected",
+      notInjected: "Not Injected",
+      unknown: "Unknown"
+    }
+  },
+  moduleCard: {
+    header: "Modules",
+    arch: "Arch: "
+  },
+  settings: {
+    daemonButton: {
+      start: "Start",
+      stop: "Stop",
+      exit: "Exit"
+    }
+  }
+}

webroot/js/lang/index.js

@@ -0,0 +1,5 @@
+import { vi_VN } from "./vi_VN"
+
+export {
+  vi_VN
+}

webroot/js/lang/vi_VN.js

@@ -0,0 +1,29 @@
+export const vi_VN = {
+  langName: "Tiếng Việt",
+  infoCard: {
+    status: {
+      unknown: "ReZygisk đang ở trạng thái không xác định!",
+      notWorking: "ReZygisk không hoạt động!",
+      ok: "ReZygisk đang hoạt động!",
+      partially: "ReZygisk đang hoạt động một phần!"
+    },
+    version: "Phiên bản",
+    root: "Hệ thống root",
+    zygote: {
+      injected: "Đã can thiệp",
+      notInjected: "Chưa can thiệp",
+      unknown: "Không xác định"
+    }
+  },
+  moduleCard: {
+    header: "Mô Đun",
+    arch: "Loại: "
+  },
+  settings: {
+    daemonButton: {
+      start: "Chạy",
+      stop: "Dừng",
+      exit: "Thoát"
+    }
+  }
+}

webroot/js/list/module.js

@@ -1,13 +1,13 @@
-const button = document.getElementById('modules_card')
+const button = document.getElementById('modules_header')
 const icon = document.getElementById('module_expand_icon')
 const card = document.getElementById('modules_card')
 
 let sys_module_mode = localStorage.getItem('system-module-mode')
-if (!sys_module_mode) sys_module_mode = setData('closed')
+sys_module_mode = setData('closed')
 
 button.addEventListener("click", () => {
   if (sys_module_mode == "closed") {
-    sys_module_mode = setData('opend')
+    sys_module_mode = setData('opened')
     icon.style.transform = 'rotate(180deg)'
     card.style.maxHeight = `${card.scrollHeight}px`
 

webroot/js/list/settings.js

@@ -1,13 +1,13 @@
-const button = document.getElementById('rezygisk_settings')
+const button = document.getElementById('settings_header')
 const icon = document.getElementById('settings_expand_icon')
 const card = document.getElementById('rezygisk_settings')
 
 let sys_module_mode = localStorage.getItem('system-settings-expand-mode')
-if (!sys_module_mode) sys_module_mode = setData('closed')
+setData('closed')
 
 button.addEventListener("click", () => {
   if (sys_module_mode == "closed") {
-    sys_module_mode = setData('opend')
+    sys_module_mode = setData('opened')
     icon.style.transform = 'rotate(180deg)'
     card.style.maxHeight = `${card.scrollHeight}px`
 

webroot/js/main.js

@@ -1,7 +1,7 @@
 import { fullScreen, exec, toast } from './kernelsu.js';
 
 (async () => {
-  const loading_screen = document.getElementsByClassName('loading_screen')[0]
+  const loading_screen = document.getElementById('loading_screen')
 
   fullScreen(true)
 
@@ -97,7 +97,7 @@ import { fullScreen, exec, toast } from './kernelsu.js';
         modules_list.innerHTML += 
         `<div class="dimc ${index !== modules.length ? 'spliter' : ''}" style="padding-top: 13px; padding-bottom: 13px;">
           <div class="dimc" style="font-size: 1.1em;">${name}</div>
-          <div class="dimc" style="font-size: 0.9em;">Arch: ${bitsUsed.join(' / ')}</div>
+          <div class="dimc desc" style="font-size: 0.9em; margin-top: 3px;">Arch: ${bitsUsed.join(' / ')}</div>
         </div>`
       } else {
         toast(`cat ${module} error (${catCmd.errno}): ${catCmd.stderr}`)

webroot/js/modal/lang.js

@@ -0,0 +1,21 @@
+const button = document.getElementById('lang_switcher')
+const target = document.getElementById('lang_modal')
+const close_button = document.getElementById('lang_modal_close')
+
+let sys_module_mode = localStorage.getItem('lang-modal')
+sys_module_mode = setData('closed')
+
+button.addEventListener('click', () => {
+  target.style.display = 'block'
+  sys_module_mode = setData('opened')
+})
+
+close_button.addEventListener('click', () => {
+  target.style.display = 'none'
+  sys_module_mode = setData('closed')
+})
+
+function setData(mode) {
+  localStorage.setItem('lang-modal', mode)
+  return localStorage.getItem('lang-modal')
+}

webroot/js/theme.js

@@ -18,15 +18,27 @@ const light_settings_icon = `
     <path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/>
   </svg>
 `
+const light_lang_icon = `
+  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#2c2c2c">
+    <path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q83 0 155.5 31.5t127 86q54.5 54.5 86 127T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Zm0-82q26-36 45-75t31-83H404q12 44 31 83t45 75Zm-104-16q-18-33-31.5-68.5T322-320H204q29 50 72.5 87t99.5 55Zm208 0q56-18 99.5-55t72.5-87H638q-9 38-22.5 73.5T584-178ZM170-400h136q-3-20-4.5-39.5T300-480q0-21 1.5-40.5T306-560H170q-5 20-7.5 39.5T160-480q0 21 2.5 40.5T170-400Zm216 0h188q3-20 4.5-39.5T580-480q0-21-1.5-40.5T574-560H386q-3 20-4.5 39.5T380-480q0 21 1.5 40.5T386-400Zm268 0h136q5-20 7.5-39.5T800-480q0-21-2.5-40.5T790-560H654q3 20 4.5 39.5T660-480q0 21-1.5 40.5T654-400Zm-16-240h118q-29-50-72.5-87T584-782q18 33 31.5 68.5T638-640Zm-234 0h152q-12-44-31-83t-45-75q-26 36-45 75t-31 83Zm-200 0h118q9-38 22.5-73.5T376-782q-56 18-99.5 55T204-640Z"/>
+  </svg>
+`
+const light_close_icon = `
+  <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#2c2c2c">
+    <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/>
+  </svg>
+`
 
 const rootCss = document.querySelector(':root')
-const button = document.getElementById('theme-switcher')
+const button = document.getElementById('theme_switcher')
 
 /* INFO: Changes the icons to match the theme */
 const module_list_icon = document.getElementById('modules_list_icon')
 const module_expand = document.getElementById('module_expand_icon')
 const settings_expand = document.getElementById('settings_expand_icon')
 const settings_icon = document.getElementById('setting_icon')
+const lang_switcher = document.getElementById('lang_switcher')
+const close_icons = document.getElementsByClassName('close_icon')
 
 let sys_theme = localStorage.getItem('system-theme')
 if (!sys_theme) sys_theme = setData('dark')
@@ -52,11 +64,16 @@ function setDark() {
 
   sys_theme = setData('dark')
 
+  for (const close_icon of close_icons) {
+    close_icon.innerHTML = '<img src="assets/close.svg">'
+  }
+
   settings_icon.innerHTML = '<img class="dimc" src="assets/settings.svg">'
   module_expand.innerHTML = '<img class="dimc" src="assets/expand.svg">'
   settings_expand.innerHTML = '<img class="dimc" src="assets/expand.svg">'
   button.innerHTML = '<img src="assets/dark.svg">'
   module_list_icon.innerHTML = '<img class="dimc" src="assets/module.svg">'
+  lang_switcher.innerHTML = '<img src="assets/lang.svg">'
 }
 
 function setLight() {
@@ -71,11 +88,16 @@ function setLight() {
 
   sys_theme = setData('light')
 
+  for (const close_icon of close_icons) {
+    close_icon.innerHTML = light_close_icon
+  }
+
   settings_icon.innerHTML = light_settings_icon
   module_expand.innerHTML = light_expand_icon
   settings_expand.innerHTML = light_expand_icon
   button.innerHTML = light_icon
   module_list_icon.innerHTML = light_module_icon
+  lang_switcher.innerHTML = light_lang_icon
 }
 
 function setData(mode) {