add: ReZygisk WebUI (#73)

This commit adds the ReZygisk WebUI to ReZygisk.

Signed-off-by: Emulond Argent <108662981+Emulond@users.noreply.github.com>
Signed-off-by: WinCS <94188592+Meltartica@users.noreply.github.com>
Signed-off-by: Pedro.js <pedroolimpioguerra@gmail.com>
Signed-off-by: unexpected unresolved <minh15052008@gmail.com>
Signed-off-by: SheepChef <50871867+SheepChef@users.noreply.github.com>
Signed-off-by: AJleKcAHgP68 <78802768+AJleKcAHgP68@users.noreply.github.com>
Signed-off-by: Blazzycrafter <39300111+Blazzycrafter@users.noreply.github.com>
Signed-off-by: Igor <sorocean.igor@gmail.com>
Signed-off-by: unexpected unresolved <xeondev@xeondex.onmicrosoft.com>
Signed-off-by: Kirill Kuznetsov <kdevlab@yandex.ru>
Signed-off-by: Lucky Kiddos <95188840+GuitarHeroStyles@users.noreply.github.com>
Signed-off-by: Kitty <73357005+Kittyskj@users.noreply.github.com>
Signed-off-by: GhostFRR <ghost.game.fr@gmail.com>
Signed-off-by: Alice w/🌧️ <rainyxeon@gmail.com>
Signed-off-by: ＺＧＸ０８９ッ <159061718+ZG089@users.noreply.github.com>
Signed-off-by: thasave14 <93542339+thasave14@users.noreply.github.com>
Co-authored-by: ThePedroo <pedroolimpioguerra@gmail.com>
Co-authored-by: ExtremeXT <75576145+ExtremeXT@users.noreply.github.com>
Co-authored-by: Emulond Argent <108662981+Emulond@users.noreply.github.com>
Co-authored-by: RainyXeon <xeondev@xeondex.onmicrosoft.com>
Co-authored-by: Fyphen <fyphensub@gmail.com>
Co-authored-by: WinCS <94188592+Meltartica@users.noreply.github.com>
Co-authored-by: CaptainThrowback <captainthrowback@hotmail.com>
Co-authored-by: Kirill Kuznetsov <kdevlab@yandex.ru>
Co-authored-by: SheepChef <50871867+SheepChef@users.noreply.github.com>
Co-authored-by: AJleKcAHgP68 <78802768+AJleKcAHgP68@users.noreply.github.com>
Co-authored-by: Blazzycrafter <39300111+Blazzycrafter@users.noreply.github.com>
Co-authored-by: Igor <sorocean.igor@gmail.com>
Co-authored-by: Berlian Panca <53902591+bpanca05@users.noreply.github.com>
Co-authored-by: Willow Hayley Lovelace <65596971+dyingwillow@users.noreply.github.com>
Co-authored-by: witch <witch@dyingwillow.dev>
Co-authored-by: Lucky Kiddos <95188840+GuitarHeroStyles@users.noreply.github.com>
Co-authored-by: Kitty <73357005+Kittyskj@users.noreply.github.com>
Co-authored-by: GhostFRR <ghost.game.fr@gmail.com>
Co-authored-by: ＺＧＸ０８９ッ <159061718+ZG089@users.noreply.github.com>
Co-authored-by: thasave14 <93542339+thasave14@users.noreply.github.com>
Co-authored-by: Flopster101 <nahuelgomez329@gmail.com>
Co-authored-by: Lxchoooo <155797099+Lxchoooo@users.noreply.github.com>

webroot/js/browserRedirect.js

@@ -0,0 +1,11 @@
+import { exec } from './kernelsu.js'
+
+document.addEventListener('click', async (event) => {
+  const getLink = event.target.getAttribute('credit-link')
+  if (!getLink || typeof getLink !== 'string') return;
+
+  const ptrace64Cmd = await exec(`am start -a android.intent.action.VIEW -d https://${getLink}`).catch(() => {
+    return window.open(`https://${getLink}`, "_blank", 'toolbar=0,location=0,menubar=0')
+  })
+  if (ptrace64Cmd.errno !== 0) return window.open(`https://${getLink}`, "_blank", 'toolbar=0,location=0,menubar=0')
+}, false)

webroot/js/errorCatcher.js

@@ -0,0 +1,16 @@
+function setError(place, issue) {
+  const fullErrorLog = setErrorData(`${place}: ${issue}`)
+  document.getElementById('errorh_panel').innerHTML = fullErrorLog
+}
+
+function setErrorData(errorLog) {
+  const getPrevious = localStorage.getItem('/system/error')
+  const finalLog = getPrevious && getPrevious.length !== 0 ? getPrevious + `\n` + errorLog : errorLog
+
+  localStorage.setItem('/system/error', finalLog)
+  return finalLog
+}
+
+if (window.onerror) window.onerror = (err) => { 
+  setError('WebUI', err.stack ? err.stack : err.message) 
+}

webroot/js/errorScreen.js

@@ -0,0 +1,6 @@
+const button = document.getElementById('esc-copy-button')
+const log = document.getElementById('esc-log')
+
+button.addEventListener('click', () => {
+  navigator.clipboard.writeText(log.innerHTML)
+})

webroot/js/kernelsu.js

@@ -0,0 +1,117 @@
+/* https://github.com/tiann/KernelSU/tree/main/js / https://www.npmjs.com/package/kernelsu */
+
+let callbackCounter = 0;
+function getUniqueCallbackName(prefix) {
+  return `${prefix}_callback_${Date.now()}_${callbackCounter++}`;
+}
+
+export function exec(command, options) {
+  if (typeof options === "undefined") {
+    options = {};
+  }
+
+  return new Promise((resolve, reject) => {
+    // Generate a unique callback function name
+    const callbackFuncName = getUniqueCallbackName("exec");
+
+    // Define the success callback function
+    window[callbackFuncName] = (errno, stdout, stderr) => {
+      resolve({ errno, stdout, stderr });
+      cleanup(callbackFuncName);
+    };
+
+    function cleanup(successName) {
+      delete window[successName];
+    }
+
+    try {
+      ksu.exec(command, JSON.stringify(options), callbackFuncName);
+    } catch (error) {
+      reject(error);
+      cleanup(callbackFuncName);
+    }
+  });
+}
+
+function Stdio() {
+    this.listeners = {};
+  }
+  
+  Stdio.prototype.on = function (event, listener) {
+    if (!this.listeners[event]) {
+      this.listeners[event] = [];
+    }
+    this.listeners[event].push(listener);
+  };
+  
+  Stdio.prototype.emit = function (event, ...args) {
+    if (this.listeners[event]) {
+      this.listeners[event].forEach((listener) => listener(...args));
+    }
+  };
+  
+  function ChildProcess() {
+    this.listeners = {};
+    this.stdin = new Stdio();
+    this.stdout = new Stdio();
+    this.stderr = new Stdio();
+  }
+  
+  ChildProcess.prototype.on = function (event, listener) {
+    if (!this.listeners[event]) {
+      this.listeners[event] = [];
+    }
+    this.listeners[event].push(listener);
+  };
+  
+  ChildProcess.prototype.emit = function (event, ...args) {
+    if (this.listeners[event]) {
+      this.listeners[event].forEach((listener) => listener(...args));
+    }
+  };
+  
+  export function spawn(command, args, options) {
+    if (typeof args === "undefined") {
+      args = [];
+    } else if (!(args instanceof Array)) {
+        // allow for (command, options) signature
+        options = args;
+    }
+    
+    if (typeof options === "undefined") {
+      options = {};
+    }
+  
+    const child = new ChildProcess();
+    const childCallbackName = getUniqueCallbackName("spawn");
+    window[childCallbackName] = child;
+  
+    function cleanup(name) {
+      delete window[name];
+    }
+
+    child.on("exit", code => {
+        cleanup(childCallbackName);
+    });
+
+    try {
+      ksu.spawn(
+        command,
+        JSON.stringify(args),
+        JSON.stringify(options),
+        childCallbackName
+      );
+    } catch (error) {
+      child.emit("error", error);
+      cleanup(childCallbackName);
+    }
+    return child;
+  }
+
+export function fullScreen(isFullScreen) {
+  ksu.fullScreen(isFullScreen);
+}
+
+export function toast(message) {
+  ksu.toast(message);
+}

webroot/js/language.js

@@ -0,0 +1,63 @@
+import { exec } from './kernelsu.js'
+
+import { setError } from './main.js'
+import { translateActionsPage } from './translate/actions.js'
+import { translateHomePage } from './translate/home.js'
+import { translateModulesPage } from './translate/modules.js'
+import { translateSettingsPage } from './translate/settings.js'
+
+export async function setNewLanguage(locate, initialize) {
+  const main_html = document.getElementById('main_html')
+  const old_translations = await getTranslations(initialize ? 'en_US' : localStorage.getItem('/system/language'))
+  const new_translations = await getTranslations(locate)
+
+  if (locate.includes('ar_')) main_html.setAttribute("dir", "rtl");
+  else main_html.setAttribute("dir", "none");
+
+  translateHomePage(old_translations, new_translations)
+  translateModulesPage(new_translations)
+  translateActionsPage(old_translations, new_translations)
+  translateSettingsPage(new_translations)
+
+  /* INFO: navbar info */
+  document.getElementById('nav_home_title').innerHTML = new_translations.page.home.header
+  document.getElementById('nav_modules_title').innerHTML = new_translations.page.modules.header
+  document.getElementById('nav_actions_title').innerHTML = new_translations.page.actions.header
+  document.getElementById('nav_settings_title').innerHTML = new_translations.page.settings.header
+
+  /* INFO: Language small page */
+  document.getElementById('small_panel_lang_title').innerHTML = new_translations.smallPage.language.header
+
+  /* INFO: Theme small page */
+  document.getElementById('small_panel_theme_title').innerHTML = new_translations.smallPage.theme.header
+  document.getElementById('small_panel_theme_dark_option').innerHTML = new_translations.smallPage.theme.dark
+  document.getElementById('small_panel_theme_light_option').innerHTML = new_translations.smallPage.theme.light
+  document.getElementById('small_panel_theme_system_option').innerHTML = new_translations.smallPage.theme.system
+
+  /* INFO: Error history small page */
+  document.getElementById('errorh_copy').innerHTML = new_translations.smallPage.errorh.buttons.copy
+  document.getElementById('errorh_clear_all').innerHTML = new_translations.smallPage.errorh.buttons.clear
+  document.getElementById('small_panel_errorh_title').innerHTML = new_translations.smallPage.errorh.header
+  document.getElementById('errorh_panel').placeholder = new_translations.smallPage.errorh.placeholder
+}
+
+export async function getTranslations(locate) {
+  const translateData = await fetch(`./lang/${locate}.json`)
+    .catch((err) => setError('WebUI', err.stack ? err.stack : err.message))
+
+  return translateData.json()
+}
+
+export async function getAvailableLanguages() {
+  const lsCmd = await exec('ls /data/adb/modules/zygisksu/webroot/lang')
+
+  if (lsCmd.errno !== 0) return setError('WebUI', lsCmd.stderr)
+
+  const languages = []
+  lsCmd.stdout.split('\n').forEach((lang) => {
+    if (lang.length !== 0)
+      languages.push(lang.replace('.json', ''))
+  })
+
+  return languages
+}

webroot/js/main.js

@@ -0,0 +1,258 @@
+import { fullScreen, exec, toast } from './kernelsu.js'
+
+import { setNewLanguage, getTranslations } from './language.js'
+
+export function setError(place, issue) {
+  const fullErrorLog = setErrorData(`${place}: ${issue}`)
+  document.getElementById('errorh_panel').innerHTML = fullErrorLog
+
+  toast(`${place}: ${issue}`)
+}
+
+export function setLangData(mode) {
+  localStorage.setItem('/system/language', mode)
+
+  return localStorage.getItem('/system/language')
+}
+
+export function setErrorData(errorLog) {
+  const getPrevious = localStorage.getItem('/system/error')
+  const finalLog = getPrevious && getPrevious.length !== 0 ? getPrevious + `\n` + errorLog : errorLog
+
+  localStorage.setItem('/system/error', finalLog)
+
+  return finalLog
+}
+
+async function getModuleNames(modules) {
+  const fullCommand = modules.map((mod) => {
+    let propPath = `/data/adb/modules/${mod.id}/module.prop`
+
+    return `printf % ; if test -f "${propPath}"; then /system/bin/grep '^name=' "${propPath}" | /system/bin/cut -d '=' -f 2- 2>/dev/null || true; else true; fi ; printf "\\n"`
+  }).join(' ; ')
+
+  const result = await exec(fullCommand)
+  if (result.errno !== 0) {
+    setError('getModuleNames', 'Failed to execute command to retrieve module list names')
+
+    return null
+  }
+
+  return result.stdout.split('\n\n')
+}
+
+(async () => {
+  /* INFO: Test ksu module availability */
+  exec('echo "Hello world!"')
+    .then(() => console.log('[kernelsu.js] Package is ready!'))
+    .catch(err => {
+      console.log('[kernelsu.js] Package is not ready! Below is error:')
+      console.error(err)
+    })
+
+  fullScreen(true)
+
+  let sys_lang = localStorage.getItem('/system/language')
+
+  if (!sys_lang) sys_lang = setLangData('en_US')
+  if (sys_lang !== 'en_US') await setNewLanguage(sys_lang, true)
+
+  const translations = await getTranslations(sys_lang)
+
+  const loading_screen = document.getElementById('loading_screen')
+  const bottom_nav = document.getElementById('navbar_support_div')
+
+  const rootCss = document.querySelector(':root')
+
+  const rezygisk_state = document.getElementById('rezygisk_state')
+  const rezygisk_icon_state = document.getElementById('rezygisk_icon_state')
+
+  const version = document.getElementById('version')
+  const root_impl = document.getElementById('root_impl')
+
+  const monitor_status = document.getElementById('monitor_status')
+
+  const zygote_divs = [
+    document.getElementById('zygote64'),
+    document.getElementById('zygote32')
+  ]
+
+  const zygote_status_divs = [
+    document.getElementById('zygote64_status'),
+    document.getElementById('zygote32_status')
+  ]
+
+  const androidVersionCmd = await exec('/system/bin/getprop ro.build.version.release')
+  if (androidVersionCmd.errno !== 0) return setError('WebUI', androidVersionCmd.stderr)
+
+  document.getElementById('android_version_div').innerHTML = androidVersionCmd.stdout
+  console.log('[rezygisk.js] Android version: ', androidVersionCmd.stdout)
+
+  const unameCmd = await exec('/system/bin/uname -r')
+  if (unameCmd.errno !== 0) return setError('WebUI', unameCmd.stderr)
+
+  document.getElementById('kernel_version_div').innerHTML = unameCmd.stdout
+  console.log('[rezygisk.js] Kernel version: ', unameCmd.stdout)
+
+  const catCmd = await exec('/system/bin/cat /data/adb/rezygisk/module.prop')
+  console.log(`[rezygisk.js] ReZygisk module infomation:\n${catCmd.stdout}`)
+
+  let expectedWorking = 0
+  let actuallyWorking = 0
+
+  const ReZygiskInfo = {
+    rootImpl: null,
+    monitor: null,
+    zygotes: [],
+    daemons: []
+  }
+
+  if (catCmd.errno === 0) {
+    /* INFO: Just ensure that they won't appear unless there's info */
+    zygote_divs.forEach((zygote_div) => {
+      zygote_div.style.display = 'none'
+    })
+
+    version.innerHTML = catCmd.stdout.split('\n').find((line) => line.startsWith('version=')).substring('version='.length).trim()
+
+    let moduleInfo = catCmd.stdout.split('\n').find((line) => line.startsWith('description=')).substring('description='.length).split('[')[1].split(']')[0]
+
+    const daemonModules = []
+    moduleInfo.match(/\(([^)]+)\)/g).forEach((area) => {
+      moduleInfo = moduleInfo.replace(area, ',')
+
+      const info = area.substring(1, area.length - 1).split(', ')
+      if (info.length === 1) return; /* INFO: undefined as object */
+
+      const rootImpl = info[0].substring('Root: '.length)
+
+      info[1] = info[1].substring('Modules: '.length)
+      const modules = info.slice(1, info.length)
+
+      ReZygiskInfo.rootImpl = rootImpl
+      if (modules[0] !== 'None') daemonModules.push(modules)
+    })
+
+    const infoArea = moduleInfo.split(', ')
+    infoArea.forEach((info) => {
+      if (info.startsWith('monitor:')) {
+        ReZygiskInfo.monitor = info.substring('monitor: X '.length).trim()
+      }
+
+      if (info.startsWith('zygote')) {
+        ReZygiskInfo.zygotes.push({
+          bits: info.substring('zygote'.length, 'zygote'.length + 'XX'.length),
+          state: info.substring('zygoteXX: X '.length).trim()
+        })
+      }
+
+      if (info.startsWith('daemon')) {
+        ReZygiskInfo.daemons.push({
+          bits: info.substring('daemon'.length, 'daemon'.length + 'XX'.length),
+          state: info.substring('daemonXX: X '.length).trim(),
+          modules: daemonModules[ReZygiskInfo.daemons.length] || []
+        })
+      }
+    })
+
+    switch (ReZygiskInfo.monitor) {
+      case 'tracing': monitor_status.innerHTML = translations.page.actions.status.tracing; break;
+      case 'stopping': monitor_status.innerHTML = translations.page.actions.status.stopping; break;
+      case 'stopped': monitor_status.innerHTML = translations.page.actions.status.stopped; break;
+      case 'exiting': monitor_status.innerHTML = translations.page.actions.status.exiting; break;
+      default: monitor_status.innerHTML = translations.page.actions.status.unknown;
+    }
+
+    expectedWorking = ReZygiskInfo.zygotes.length
+
+    for (let i = 0; i < ReZygiskInfo.zygotes.length; i++) {
+      const zygote = ReZygiskInfo.zygotes[i]
+      /* INFO: Not used ATM */
+      /* const daemon = ReZygiskInfo.daemons[i] */
+
+      const zygoteDiv = zygote_divs[zygote.bits === '64' ? 0 : 1]
+      const zygoteStatusDiv = zygote_status_divs[zygote.bits === '64' ? 0 : 1]
+
+      zygoteDiv.style.display = 'block'
+
+      switch (zygote.state) {
+        case 'injected': {
+          zygoteStatusDiv.innerHTML = translations.page.home.info.zygote.injected;
+
+          actuallyWorking++
+
+          break;
+        }
+        case 'not injected': zygoteStatusDiv.innerHTML = translations.page.home.info.zygote.notInjected; break;
+        default: zygoteStatusDiv.innerHTML = translations.page.home.info.zygote.unknown;
+      }
+    }
+  }
+
+  if (expectedWorking === 0 || actuallyWorking === 0) {
+    rezygisk_state.innerHTML = translations.page.home.status.notWorking
+  } else if (expectedWorking === actuallyWorking) {
+    rezygisk_state.innerHTML = translations.page.home.status.ok
+
+    rootCss.style.setProperty('--bright', '#3a4857')
+    rezygisk_icon_state.innerHTML = '<img class="brightc" src="assets/tick.svg">'
+  } else {
+    rezygisk_state.innerHTML = translations.page.home.status.partially
+
+    rootCss.style.setProperty('--bright', '#766000')
+    rezygisk_icon_state.innerHTML = '<img class="brightc" src="assets/warn.svg">'
+  }
+
+  if (ReZygiskInfo.rootImpl)
+    root_impl.innerHTML = ReZygiskInfo.rootImpl
+
+  const all_modules = []
+  ReZygiskInfo.daemons.forEach((daemon) => {
+    daemon.modules.forEach((module_id) => {
+      const module = all_modules.find((mod) => mod.id === module_id)
+
+      if (module) {
+        module.bitsUsed.push(daemon.bits)
+      } else {
+        all_modules.push({
+          id: module_id,
+          name: null,
+          bitsUsed: [ daemon.bits ]
+        })
+      }
+    })
+  })
+
+  if (all_modules.length !== 0) {
+    document.getElementById('modules_list_not_avaliable').style.display = 'none'
+
+    const module_names = await getModuleNames(all_modules)
+    module_names.forEach((module_name, i) => all_modules[i].name = module_name)
+
+    console.log(`[rezygisk.js] Module list:`)
+    console.log(all_modules)
+
+    const modules_list = document.getElementById('modules_list')
+
+    all_modules.forEach((module) => {
+      modules_list.innerHTML += 
+        `<div class="dim card" style="padding: 25px 15px; cursor: pointer;">
+          <div class="dimc" style="font-size: 1.1em;">${module.name}</div>
+          <div class="dimc desc" style="font-size: 0.9em; margin-top: 3px; white-space: nowrap; align-items: center; display: flex;">
+            <div class="dimc arch_desc">${translations.page.modules.arch}</div>
+            <div class="dimc" style="margin-left: 5px;">${module.bitsUsed.join(' / ')}</div>
+          </div>
+        </div>`
+    })
+  
+  }
+
+  /* INFO: This hides the throbber screen */
+  loading_screen.style.display = 'none'
+  bottom_nav.style.display = 'flex'
+
+
+  const start_time = Number(localStorage.getItem('/system/boot-time'))
+  console.log('[rezygisk.js] boot time: ', Date.now() - start_time, 'ms')
+  localStorage.removeItem('/system/boot_time')
+})().catch((err) => setError('WebUI', err.stack ? err.stack : err.message))

webroot/js/monitorActions.js

@@ -0,0 +1,38 @@
+import { exec, toast } from './kernelsu.js'
+
+import { getTranslations } from './language.js'
+
+const monitor_start = document.getElementById('monitor_start_button')
+const monitor_stop = document.getElementById('monitor_stop_button')
+const monitor_pause = document.getElementById('monitor_pause_button')
+
+const monitor_status = document.getElementById('monitor_status');
+
+(async () => {
+  const sys_lang = localStorage.getItem('/system/language')
+  const translations = await getTranslations(sys_lang || 'en_US')
+
+  if (monitor_start) {
+    monitor_start.addEventListener('click', () => {
+      if (![ translations.page.actions.status.tracing, translations.page.actions.status.stopping, translations.page.actions.status.stopped ].includes(monitor_status.innerHTML)) return;
+
+      monitor_status.innerHTML = translations.page.actions.status.tracing
+
+      exec('/data/adb/modules/zygisksu/bin/zygisk-ptrace64 ctl start')
+    })
+
+    monitor_stop.addEventListener('click', () => {
+      monitor_status.innerHTML = translations.page.actions.status.exiting
+
+      exec('/data/adb/modules/zygisksu/bin/zygisk-ptrace64 ctl exit')
+    })
+
+    monitor_pause.addEventListener('click', () => {
+      if (![ translations.page.actions.status.tracing, translations.page.actions.status.stopping, translations.page.actions.status.stopped ].includes(monitor_status.innerHTML)) return;
+
+      monitor_status.innerHTML = translations.page.actions.status.stopped
+
+      exec('/data/adb/modules/zygisksu/bin/zygisk-ptrace64 ctl stop')
+    })
+  }
+})()

webroot/js/navbar.js

@@ -0,0 +1,52 @@
+const navbar_data_tag = document.getElementById('cache-navbar-previous')
+const small_panel_data_tag = document.getElementById('cache-page-small-previous')
+
+setData('home', navbar_data_tag)
+
+document.getElementById('panel_home').classList.toggle('show')
+document.getElementById(`nibg_home`).classList.toggle('show')
+
+document.querySelectorAll('[name=navbutton]').forEach((element) => {
+  element.addEventListener('click', (event) => {
+    let smallPagePass = false
+
+    const value = event.target.value
+    const previous = !navbar_data_tag.getAttribute('content') 
+      ? setData('home', navbar_data_tag) 
+      : navbar_data_tag.getAttribute('content')
+
+    const small_panel = small_panel_data_tag.getAttribute('content')
+
+    if (small_panel && small_panel.length !== 0) {
+      document.getElementById(`small_panel_${small_panel}`).classList.remove('show')
+      small_panel_data_tag.removeAttribute('content')
+      smallPagePass = true
+    }
+
+    if (previous === value && !smallPagePass) return;
+
+    /* INFO: Disable icon on old state */
+    const pre_input = document.getElementById(`n_${previous}`)
+    const pre_background = document.getElementById(`nibg_${previous}`)
+
+    document.getElementById(`panel_${previous}`).classList.remove('show')
+    pre_input.removeAttribute('checked')
+    pre_background.classList.remove('show')
+
+    /* INFO: Enable icon on new state */
+    const curr_input = document.getElementById(`n_${value}`)
+    const i_background = document.getElementById(`nibg_${value}`)
+
+    document.getElementById(`panel_${value}`).classList.toggle('show')
+    curr_input.setAttribute('checked', '')
+    i_background.classList.toggle('show')
+
+    setData(value, navbar_data_tag)
+  })
+})
+
+function setData(data, tag) {
+  tag.setAttribute('content', data)
+
+  return data
+}

webroot/js/restoreError.js

@@ -0,0 +1,10 @@
+const errorh_panel = document.getElementById('errorh_panel')
+let sys_error = localStorage.getItem('/system/error')
+
+if (!sys_error) {
+  localStorage.setItem('/system/error', '')
+
+  sys_error = localStorage.getItem('/system/error')
+}
+
+if (sys_error.length !== 0) errorh_panel.innerHTML = sys_error

webroot/js/smallPage/errorHistory.js

@@ -0,0 +1,47 @@
+import { smallPageDisabler } from '../smallPageDesabler.js'
+const panel = document.getElementById('errorh_panel')
+
+/* INFO: Event setup */
+const navbar_data_tag = document.getElementById('cache-navbar-previous')
+const small_panel_data_tag = document.getElementById('cache-page-small-previous')
+const fallback_open = document.getElementById('cache-fallback-open')
+
+document.getElementById('errorh_page_toggle').addEventListener('click', () => {
+  const previous = !navbar_data_tag.getAttribute('content') ? setData('home', small_panel_data_tag) : navbar_data_tag.getAttribute('content')
+  document.getElementById(`panel_${previous}`).classList.remove('show')
+  document.getElementById('small_panel_errorh').classList.toggle('show')
+  small_panel_data_tag.setAttribute('content', 'errorh')
+})
+
+document.getElementById('backport_errorh').addEventListener('click', () => {
+  const previous = !navbar_data_tag.getAttribute('content') ? setData('home', small_panel_data_tag) : navbar_data_tag.getAttribute('content')
+  document.getElementById(`panel_${previous}`).classList.remove('show')
+  document.getElementById('loading_screen').style.display = 'none'
+  document.getElementById('small_panel_errorh').classList.toggle('show')
+  document.getElementById('errorh_panel').style.bottom = '1em'
+  fallback_open.setAttribute('content', 'opened')
+  small_panel_data_tag.setAttribute('content', 'errorh')
+})
+
+document.getElementById('sp_errorh_close').addEventListener('click', () => {
+  const is_fallback = fallback_open.getAttribute('content')
+  if (is_fallback) {
+    document.getElementById('errorh_panel').style.bottom = '1em'
+    document.getElementById('loading_screen').style.display = 'flex'
+  }
+  smallPageDisabler('errorh', is_fallback ? 'home' : 'settings', is_fallback ? 'home' : null)
+})
+document.getElementById('errorh_copy').addEventListener('click', () => {
+  navigator.clipboard.writeText(panel.innerHTML)
+})
+
+document.getElementById('errorh_clear_all').addEventListener('click', () => {
+  panel.innerHTML = ''
+  localStorage.setItem('/system/error', '')
+})
+
+function setData(mode, tag) {
+  tag.setAttribute('content', mode)
+
+  return mode
+}

webroot/js/smallPage/language.js

@@ -0,0 +1,54 @@
+import { 
+  getTranslations, 
+  setNewLanguage,
+  getAvailableLanguages
+} from '../language.js'
+import { smallPageDisabler } from '../smallPageDesabler.js'
+
+/* INFO: Initial setup */
+let index = 0
+
+async function setAvailableLanguage() {
+  const availableLanguages = await getAvailableLanguages()
+
+  for (index; index < availableLanguages.length; index++) {
+    const langCode = availableLanguages[index]
+    const langData = await getTranslations(langCode)
+
+    document.getElementById('lang_modal_list').innerHTML += `
+    <div lang-data="${langCode}" class="dim card card_animation" style="padding: 25px 15px; cursor: pointer;">
+      <div lang-data="${langCode}" class="dimc" style="font-size: 1.1em;">${langData.langName}</div>
+    </div>
+    `
+  }
+}
+setAvailableLanguage()
+
+/* INFO: Event setup */
+const navbar_data_tag = document.getElementById('cache-navbar-previous')
+const small_panel_data_tag = document.getElementById('cache-page-small-previous')
+
+document.getElementById('lang_page_toggle').addEventListener('click', () => {
+  const previous = !navbar_data_tag.getAttribute('content') ? setData('home', small_panel_data_tag) : navbar_data_tag.getAttribute('content')
+  document.getElementById(`panel_${previous}`).classList.remove('show')
+  document.getElementById('small_panel_language').classList.toggle('show')
+  small_panel_data_tag.setAttribute('content', 'language')
+})
+
+document.getElementById('sp_lang_close').addEventListener('click', () => smallPageDisabler('language', 'settings'))
+
+document.addEventListener('click', async (event) => {
+  const getLangLocate = event.target.getAttribute('lang-data')
+  if (!getLangLocate || typeof getLangLocate !== 'string') return
+
+  smallPageDisabler('language', 'settings')
+  await setNewLanguage(getLangLocate)
+
+  localStorage.setItem('/system/language', getLangLocate)
+}, false)
+
+function setData(data, tag) {
+  tag.setAttribute('content', data)
+
+  return data
+}

webroot/js/smallPage/theme.js

@@ -0,0 +1,75 @@
+import { smallPageDisabler } from '../smallPageDesabler.js'
+import { setAmoled } from '../themes/amoled.js'
+import { setDark } from '../themes/dark.js'
+import { setLight } from '../themes/light.js'
+import { setMonochrome } from '../themes/monochrome.js'
+
+// INFO: requirement variables
+let sys_theme
+const page_toggle = document.getElementById('theme_page_toggle')
+const themeList = {
+  amoled: () => setAmoled(true),
+  dark: () => setDark(true),
+  light: () => setLight(true),
+  monochrome: () => setMonochrome(true),
+  system: (unavaliable) => {
+    const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+    if (isDark && unavaliable) setDark() 
+    else setLight()
+  },
+}
+const setData = (mode) => {
+  localStorage.setItem('/system/theme', mode)
+  return mode
+}
+
+// INFO: Initial open logic
+sys_theme = localStorage.getItem('/system/theme')
+if (!sys_theme) sys_theme = setData('dark')
+themeList[sys_theme](true)
+
+// INFO: Event logic
+const navbar_data_tag = document.getElementById('cache-navbar-previous')
+const small_panel_data_tag = document.getElementById('cache-page-small-previous')
+
+document.getElementById('sp_theme_close').addEventListener('click', () => smallPageDisabler('theme', 'settings'))
+
+document.addEventListener('click', async (event) => {
+  const themeListKey = Object.keys(themeList)
+  const getThemeMode = event.target.getAttribute('theme-data')
+
+  if (!getThemeMode || typeof getThemeMode !== 'string' || !themeListKey.includes(getThemeMode)) return
+
+  themeList[getThemeMode](true)
+
+  smallPageDisabler('theme', 'settings')
+
+  sys_theme = setData(getThemeMode)
+}, false)
+
+page_toggle.addEventListener('click', () => {
+  const previous = !navbar_data_tag.getAttribute('content') ? setTagData('home', small_panel_data_tag) : navbar_data_tag.getAttribute('content')
+  document.getElementById(`panel_${previous}`).classList.remove('show')
+  document.getElementById('small_panel_theme').classList.toggle('show')
+    small_panel_data_tag.setAttribute('content', 'theme')
+})
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+  if (sys_theme !== "system") return
+  const newColorScheme = event.matches ? "dark" : "light";
+
+  switch (newColorScheme) {
+    case 'dark':
+      setDark()
+      break
+    case 'light':
+      setLight()
+      break
+  }
+});
+
+function setTagData(data, tag) {
+  tag.setAttribute('content', data)
+
+  return data
+}

webroot/js/smallPageDesabler.js

@@ -0,0 +1,26 @@
+export function smallPageDisabler(page_name, new_page, custom_page) {
+  const navbar_data_tag = document.getElementById('cache-navbar-previous')
+  const small_panel_data_tag = document.getElementById('cache-page-small-previous')
+
+  document.getElementById(`small_panel_${page_name}`).classList.remove('show')
+  small_panel_data_tag.removeAttribute('content')
+
+  const previous = navbar_data_tag.getAttribute('content')
+
+  /* INFO: Disable icon on old state */
+  const pre_input = document.getElementById(`n_${previous}`)
+  const pre_background = document.getElementById(`nibg_${previous}`)
+
+  pre_input.removeAttribute('checked')
+  pre_background.classList.remove('show')
+
+  /* INFO: Enable icon on new state */
+  const curr_input = document.getElementById(`n_${new_page}`)
+  const i_background = document.getElementById(`nibg_${new_page}`)
+
+  document.getElementById(`panel_${new_page}`).classList.toggle('show')
+  curr_input.setAttribute('checked', '')
+  i_background.classList.toggle('show')
+
+  navbar_data_tag.setAttribute('content', custom_page ? custom_page : 'settings')
+}

webroot/js/switcher/fontChanger.js

@@ -0,0 +1,34 @@
+const switcher = document.getElementById('font_switcher')
+const rootCss = document.querySelector(':root')
+
+let sys_font = localStorage.getItem('/system/font')
+if (!sys_font) sys_font = setData('false')
+if (sys_font === 'true') {
+  switcher.setAttribute('checked', '')
+
+  setSystemFont()
+}
+
+switcher.addEventListener('click', () => {
+  sys_font = setData(String(switcher.checked))
+
+  switcher.checked ? setSystemFont() : document.getElementById('font-tag').remove()
+})
+
+function setSystemFont() {
+  const headTag = document.getElementsByTagName('head')[0]
+  const styleTag = document.createElement('style')
+
+  styleTag.id = 'font-tag'
+  headTag.appendChild(styleTag)
+  styleTag.innerHTML = `
+    :root {
+      --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
+    }`
+}
+
+function setData(mode) {
+  localStorage.setItem('/system/font', mode)
+
+  return mode
+}

webroot/js/themes/amoled.js

@@ -0,0 +1,41 @@
+import { setDarkNav } from './darkNavbar.js'
+
+const rootCss = document.querySelector(':root')
+
+/* INFO: Changes the icons to match the theme */
+const close_icons = document.getElementsByClassName('close_icon')
+const expand_icons = document.getElementsByClassName('expander')
+const sp_lang_close = document.getElementById('sp_lang_close')
+const sp_theme_close = document.getElementById('sp_theme_close')
+
+export function setAmoled(chooseSet) {
+  rootCss.style.setProperty('--background', '#000000')
+  rootCss.style.setProperty('--font', '#d9d9d9')
+  rootCss.style.setProperty('--desc', '#a9a9a9')
+  rootCss.style.setProperty('--dim', '#0b0d0f')
+  rootCss.style.setProperty('--icon', '#22292d')
+  rootCss.style.setProperty('--icon-bc', '#171b1d')
+  rootCss.style.setProperty('--desktop-navbar', '#111417')
+  rootCss.style.setProperty('--desktop-navicon', '#1c2225')
+  rootCss.style.setProperty('--button', 'var(--background)')
+
+  if (chooseSet) setData('amoled')
+
+  for (const close_icon of close_icons) {
+    close_icon.innerHTML = '<img src="assets/close.svg">'
+  }
+
+  for (const expand_icon of expand_icons) {
+    expand_icon.innerHTML = '<img class="dimc" src="assets/expand.svg">'
+  }
+
+  sp_lang_close.innerHTML = '<img src="./assets/back.svg"/>'
+  sp_theme_close.innerHTML = '<img src="./assets/back.svg"/>'
+  setDarkNav()
+}
+
+function setData(mode) {
+  localStorage.setItem('/system/theme', mode)
+
+  return mode
+}

webroot/js/themes/dark.js

@@ -0,0 +1,43 @@
+import { setDarkNav } from './darkNavbar.js'
+
+const rootCss = document.querySelector(':root')
+
+/* INFO: Changes the icons to match the theme */
+const close_icons = document.getElementsByClassName('close_icon')
+const expand_icons = document.getElementsByClassName('expander')
+const sp_lang_close = document.getElementById('sp_lang_close')
+const sp_theme_close = document.getElementById('sp_theme_close')
+const sp_errorh_close = document.getElementById('sp_errorh_close')
+
+export function setDark(chooseSet) {
+  rootCss.style.setProperty('--background', '#181c20')
+  rootCss.style.setProperty('--font', '#ffffff')
+  rootCss.style.setProperty('--desc', '#c9c9c9')
+  rootCss.style.setProperty('--dim', '#1d2327')
+  rootCss.style.setProperty('--icon', '#48565e')
+  rootCss.style.setProperty('--icon-bc', '#313a3f')
+  rootCss.style.setProperty('--desktop-navbar', '#252b31')
+  rootCss.style.setProperty('--desktop-navicon', '#333d42')
+  rootCss.style.setProperty('--button', 'var(--background)')
+
+  if (chooseSet) setData('dark')
+
+  for (const close_icon of close_icons) {
+    close_icon.innerHTML = '<img src="assets/close.svg">'
+  }
+
+  for (const expand_icon of expand_icons) {
+    expand_icon.innerHTML = '<img class="dimc" src="assets/expand.svg">'
+  }
+
+  sp_lang_close.innerHTML = '<img src="./assets/back.svg"/>'
+  sp_theme_close.innerHTML = '<img src="./assets/back.svg"/>'
+  sp_errorh_close.innerHTML = '<img src="./assets/back.svg"/>'
+  setDarkNav()
+}
+
+function setData(mode) {
+  localStorage.setItem('/system/theme', mode)
+
+  return mode
+}

webroot/js/themes/darkNavbar.js

@@ -0,0 +1,6 @@
+export function setDarkNav() {
+  document.getElementById('ni_home').classList.remove('light')
+  document.getElementById('ni_modules').classList.remove('light')
+  document.getElementById('ni_actions').classList.remove('light')
+  document.getElementById('ni_settings').classList.remove('light')
+}

webroot/js/themes/light.js

@@ -0,0 +1,48 @@
+import { 
+  light_close_icon,
+  light_expand_icon,
+  light_page_exit_icon,
+} from './lightIcon.js'
+import { setLightNav } from './lightNavbar.js'
+
+const rootCss = document.querySelector(':root')
+
+/* INFO: Changes the icons to match the theme */
+const close_icons = document.getElementsByClassName('close_icon')
+const expand_icons = document.getElementsByClassName('expander')
+const sp_lang_close = document.getElementById('sp_lang_close')
+const sp_theme_close = document.getElementById('sp_theme_close')
+const sp_errorh_close = document.getElementById('sp_errorh_close')
+
+export function setLight(chooseSet) {
+  rootCss.style.setProperty('--background', '#f2f2f2')
+  rootCss.style.setProperty('--font', '#181c20')
+  rootCss.style.setProperty('--desc', '#484d53')
+  rootCss.style.setProperty('--dim', '#e0e0e0')
+  rootCss.style.setProperty('--icon', '#acacac')
+  rootCss.style.setProperty('--desktop-navbar', '#fefefe')
+  rootCss.style.setProperty('--desktop-navicon', '#eeeeee')
+  rootCss.style.setProperty('--icon-bc', '#c9c9c9')
+  rootCss.style.setProperty('--button', '#b3b3b3')
+
+  if (chooseSet) setData('light')
+
+  for (const close_icon of close_icons) {
+    close_icon.innerHTML = light_close_icon
+  }
+
+  for (const expand_icon of expand_icons) {
+    expand_icon.innerHTML = light_expand_icon
+  }
+
+  sp_lang_close.innerHTML = light_page_exit_icon
+  sp_theme_close.innerHTML = light_page_exit_icon
+  sp_errorh_close.innerHTML = light_page_exit_icon
+  setLightNav()
+}
+
+function setData(mode) {
+  localStorage.setItem('/system/theme', mode)
+
+  return mode
+}

webroot/js/themes/lightIcon.js

@@ -0,0 +1,20 @@
+export const light_expand_icon = `
+  <svg class="dimc" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#2c2c2c">
+    <path d="m480-340 180-180-57-56-123 123-123-123-57 56 180 180Zm0 260q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
+  </svg>
+`
+export 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>
+`
+export const light_logs_icon = `
+  <svg class="dimc" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#2c2c2c">
+    <path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
+  </svg>
+`
+export const light_page_exit_icon = `
+  <svg xmlns="http://www.w3.org/2000/svg" height="36px" viewBox="0 -960 960 960" width="36px" fill="#2c2c2c">
+    <path d="m287-446.67 240 240L480-160 160-480l320-320 47 46.67-240 240h513v66.66H287Z"/>
+  </svg>
+`

webroot/js/themes/lightNavbar.js

@@ -0,0 +1,6 @@
+export function setLightNav() {
+  document.getElementById('ni_home').classList.add('light')
+  document.getElementById('ni_modules').classList.add('light')
+  document.getElementById('ni_actions').classList.add('light')
+  document.getElementById('ni_settings').classList.add('light')
+}

webroot/js/themes/monochrome.js

@@ -0,0 +1,41 @@
+import { setDarkNav } from './darkNavbar.js'
+
+const rootCss = document.querySelector(':root')
+
+/* INFO: Changes the icons to match the theme */
+const close_icons = document.getElementsByClassName('close_icon')
+const expand_icons = document.getElementsByClassName('expander')
+const sp_lang_close = document.getElementById('sp_lang_close')
+const sp_theme_close = document.getElementById('sp_theme_close')
+
+export function setMonochrome(chooseSet) {
+  rootCss.style.setProperty('--background', '#141414')
+  rootCss.style.setProperty('--font', '#ffffff')
+  rootCss.style.setProperty('--desc', '#c9c9c9')
+  rootCss.style.setProperty('--dim', '#1c1c1c')
+  rootCss.style.setProperty('--icon', '#494949')
+  rootCss.style.setProperty('--icon-bc', '#292929')
+  rootCss.style.setProperty('--desktop-navbar', '#252525')
+  rootCss.style.setProperty('--desktop-navicon', '#3a3a3a')
+  rootCss.style.setProperty('--button', 'var(--background)')
+
+  if (chooseSet) setData('monochrome')
+
+  for (const close_icon of close_icons) {
+    close_icon.innerHTML = '<img src="assets/close.svg">'
+  }
+
+  for (const expand_icon of expand_icons) {
+    expand_icon.innerHTML = '<img class="dimc" src="assets/expand.svg">'
+  }
+
+  sp_lang_close.innerHTML = '<img src="./assets/back.svg"/>'
+  sp_theme_close.innerHTML = '<img src="./assets/back.svg"/>'
+  setDarkNav()
+}
+
+function setData(mode) {
+  localStorage.setItem('/system/theme', mode)
+
+  return mode
+}

webroot/js/translate/actions.js

@@ -0,0 +1,38 @@
+export function translateActionsPage(old_translations, new_translations) {
+  /* INFO: actions card */
+  document.getElementById('panel_actions_header').innerHTML = new_translations.page.actions.header
+
+  /* INFO: monitor small card */
+  document.getElementById('monitor_title').innerHTML = new_translations.page.actions.monitor
+  if (document.getElementById('monitor_stop_button')) { /* INFO: Not all devices have 32-bit support */
+    document.getElementById('monitor_stop_button').innerHTML = new_translations.page.actions.monitorButton.stop
+    document.getElementById('monitor_start_button').innerHTML = new_translations.page.actions.monitorButton.start
+    document.getElementById('monitor_pause_button').innerHTML = new_translations.page.actions.monitorButton.pause
+  }
+
+  /* INFO: monitor status card */
+  const monitor_status = document.getElementById('monitor_status')
+  switch (monitor_status.innerHTML.replace(/(\r\n|\n|\r)/gm, '').trim()) {
+    case old_translations.page.actions.status.tracing: {
+      monitor_status.innerHTML = new_translations.page.actions.status.tracing
+
+      break
+    }
+    case old_translations.page.actions.status.stopping: {
+      monitor_status.innerHTML = new_translations.page.actions.status.stopping
+
+      break
+    }
+    case old_translations.page.actions.status.stopped: {
+      monitor_status.innerHTML = new_translations.page.actions.status.stopped
+
+      break
+    }
+    case old_translations.page.actions.status.exiting: {
+      monitor_status.innerHTML = new_translations.page.actions.status.exiting
+
+      break
+    }
+    default: monitor_status.innerHTML = new_translations.page.actions.status.unknown
+  }
+}

webroot/js/translate/home.js

@@ -0,0 +1,90 @@
+export function translateHomePage(old_translations, new_translations) {
+  /* INFO: Translate variables */
+  const rezygisk_state = document.getElementById('rezygisk_state')
+  const zygote32_status_div = document.getElementById('zygote32_status')
+  const zygote64_status_div = document.getElementById('zygote64_status')
+
+  switch (rezygisk_state.innerHTML.replace(/(\r\n|\n|\r)/gm, '').trim()) {
+    case old_translations.page.home.status.ok: {
+      rezygisk_state.innerHTML = new_translations.page.home.status.ok
+
+      break
+    }
+    case old_translations.page.home.status.partially: {
+      rezygisk_state.innerHTML = new_translations.page.home.status.partially
+
+      break
+    }
+    case old_translations.page.home.status.notWorking: {
+      rezygisk_state.innerHTML = new_translations.page.home.status.notWorking
+
+      break
+    }
+    case old_translations.page.home.status.unknown: {
+      rezygisk_state.innerHTML = new_translations.global.unknown
+
+      break
+    }
+  }
+
+  if (zygote32_status_div) {
+    switch (zygote32_status_div.innerHTML.replace(/(\r\n|\n|\r)/gm, '').trim()) {
+      case old_translations.page.home.info.zygote.injected: {
+        zygote32_status_div.innerHTML = new_translations.page.home.info.zygote.injected
+
+        break
+      }
+      case old_translations.page.home.info.zygote.notInjected: {
+        zygote32_status_div.innerHTML = new_translations.page.home.info.zygote.notInjected
+
+        break
+      }
+      case old_translations.page.home.info.zygote.unknown: {
+        zygote32_status_div.innerHTML = new_translations.global.unknown
+
+        break
+      }
+    }
+  }
+
+  if (zygote64_status_div) {
+    switch (zygote64_status_div.innerHTML.replace(/(\r\n|\n|\r)/gm, '').trim()) {
+      case old_translations.page.home.info.zygote.injected: {
+        zygote64_status_div.innerHTML = new_translations.page.home.info.zygote.injected
+
+        break
+      }
+      case old_translations.page.home.info.zygote.notInjected: {
+        zygote64_status_div.innerHTML = new_translations.page.home.info.zygote.notInjected
+
+        break
+      }
+      case old_translations.page.home.info.zygote.unknown: {
+        zygote64_status_div.innerHTML = new_translations.global.unknown
+
+        break
+      }
+    }
+  }
+
+  const android_version_div = document.getElementById('android_version_div')
+  if (android_version_div.innerHTML === old_translations.global.unknown) 
+    android_version_div.innerHTML = new_translations.global.unknown
+
+  const kernel_version_div = document.getElementById('kernel_version_div')
+  if (kernel_version_div.innerHTML === old_translations.global.unknown) 
+    kernel_version_div.innerHTML = new_translations.global.unknown
+
+  /* INFO: info card */
+  document.getElementById('version_info_title').innerHTML = new_translations.page.home.info.version
+  document.getElementById('root_info_title').innerHTML = new_translations.page.home.info.root
+
+  // const version_code = document.getElementById('version_code')
+  // const root_impl = document.getElementById('root_impl')
+
+  // if (version_code.innerHTML.replace(/(\r\n|\n|\r)/gm, '').trim() === old_translations.global.unknown)
+  //   version_code.innerHTML = new_translations.global.unknown
+
+  // if (root_impl.innerHTML.replace(/(\r\n|\n|\r)/gm, '').trim() === old_translations.global.unknown)
+  //   root_impl.innerHTML = new_translations.global.unknown
+}

webroot/js/translate/modules.js

@@ -0,0 +1,10 @@
+export function translateModulesPage(new_translations) {
+  document.getElementById('panel_modules_header').innerHTML = new_translations.page.modules.header
+  document.getElementById('modules_list_not_avaliable').innerHTML = new_translations.page.modules.notAvaliable
+
+  /* INFO: arch type */
+  const module_element_arch = document.getElementsByClassName('arch_desc')
+  for (const module of module_element_arch) {
+    module.innerHTML = new_translations.page.modules.arch
+  }
+}

webroot/js/translate/settings.js

@@ -0,0 +1,27 @@
+export function translateSettingsPage(new_translations) {
+  document.getElementById('panel_settings_header').innerHTML = new_translations.page.settings.header
+
+  /* INFO: Change font option */
+  document.getElementById('sys_font_option_title').innerHTML = new_translations.page.settings.font.header
+  document.getElementById('sys_font_option_desc').innerHTML = new_translations.page.settings.font.description
+  
+  /* INFO: Change font option */
+  document.getElementById('sys_theme_option_title').innerHTML = new_translations.page.settings.theme.header
+  document.getElementById('sys_theme_option_desc').innerHTML = new_translations.page.settings.theme.description
+
+  /* INFO: Change font option */
+  document.getElementById('sys_lang_option_title').innerHTML = new_translations.page.settings.language.header
+  document.getElementById('sys_lang_option_desc').innerHTML = new_translations.page.settings.language.description
+
+  /* INFO: Change font option */
+  document.getElementById('sys_errorh_title').innerHTML = new_translations.page.settings.logs.header
+  document.getElementById('sys_errorh_desc').innerHTML = new_translations.page.settings.logs.description
+
+  /* INFO: Credit card */
+  document.getElementById('mcre_title').innerHTML = new_translations.page.settings.credits.module
+  document.getElementById('omcre_title').innerHTML = new_translations.page.settings.credits.original
+  document.getElementById('webcre_title').innerHTML = new_translations.page.settings.credits.web
+  /* INFO: License card */
+  document.getElementById('mlic_title').innerHTML = new_translations.page.settings.license.module
+  document.getElementById('mweb_title').innerHTML = new_translations.page.settings.license.web
+}