br0kenpixel/ReZygisk
1
0
Fork 0
mirror of https://github.com/PerformanC/ReZygisk.git synced 2025-09-06 06:37:01 +00:00
Code Issues Packages Projects Releases 1 Wiki Activity

add: small page internal API and system based theme

Browse Source 
yandev code style on webroot/js/smallPage/theme.js, need to be cleaned
This commit is contained in:
RainyXeon
2024-07-24 12:53:23 +07:00
committed by ThePedroo
parent 90de86a5c7
commit 26b60fce11
26 changed files with 385 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
module/build.gradle.kts
View File

@@ -166,7 +166,6 @@ 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/language.js").asFile, null))
set.add(Pair(root.file("webroot/js/restoreError.js").asFile, null))
set.add(Pair(root.file("webroot/js/navbar.js").asFile, null))
@@ -174,6 +173,7 @@ androidComponents.onVariants { variant ->
set.add(Pair(root.file("webroot/js/errorCatcher.js").asFile, null))
set.add(Pair(root.file("webroot/js/browserRedirect.js").asFile, null))
set.add(Pair(root.file("webroot/js/errorScreen.js").asFile, null))
set.add(Pair(root.file("webroot/js/smallPageDesabler.js").asFile, null))
set.add(Pair(root.file("webroot/js/translate/action.js").asFile, null))
set.add(Pair(root.file("webroot/js/translate/home.js").asFile, null))
@@ -186,8 +186,6 @@ androidComponents.onVariants { variant ->
set.add(Pair(root.file("webroot/js/themes/lightNavbar.js").asFile, null))
set.add(Pair(root.file("webroot/js/themes/lightIcon.js").asFile, null))
set.add(Pair(root.file("webroot/js/list/language.js").asFile, null))
set.add(Pair(root.file("webroot/js/switcher/fontChanger.js").asFile, null))
set.add(Pair(root.file("webroot/lang/en_US.json").asFile, null))
@@ -199,7 +197,9 @@ androidComponents.onVariants { variant ->
set.add(Pair(root.file("webroot/lang/zh_CN.json").asFile, null))
set.add(Pair(root.file("webroot/lang/zh_TW.json").asFile, null))
set.add(Pair(root.file("webroot/js/modal/language.js").asFile, null))
set.add(Pair(root.file("webroot/js/smallPage/language.js").asFile, null))
set.add(Pair(root.file("webroot/js/smallPage/theme.js").asFile, null))
set.add(Pair(root.file("webroot/js/modal/errorHistory.js").asFile, null))
set.add(Pair(root.file("webroot/css/index.css").asFile, null))
@@ -223,6 +223,7 @@ androidComponents.onVariants { variant ->
set.add(Pair(root.file("webroot/assets/home.svg").asFile, null))
set.add(Pair(root.file("webroot/assets/delete.svg").asFile, null))
set.add(Pair(root.file("webroot/assets/ec-icon.svg").asFile, null))
set.add(Pair(root.file("webroot/assets/back.svg").asFile, null))
set.add(Pair(root.file("webroot/assets_light/action.svg").asFile, null))
set.add(Pair(root.file("webroot/assets_light/home.svg").asFile, null))

18
module/src/customize.sh
View File

@@ -117,7 +117,6 @@ 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/language.js' "$MODPATH/webroot/js" true
extract "$ZIPFILE" 'webroot/js/navbar.js' "$MODPATH/webroot/js" true
extract "$ZIPFILE" 'webroot/js/restoreError.js' "$MODPATH/webroot/js" true
@@ -125,6 +124,7 @@ extract "$ZIPFILE" 'webroot/js/daemonActions.js' "$MODPATH/webroot/js" true
extract "$ZIPFILE" 'webroot/js/errorCatcher.js' "$MODPATH/webroot/js" true
extract "$ZIPFILE" 'webroot/js/browserRedirect.js' "$MODPATH/webroot/js" true
extract "$ZIPFILE" 'webroot/js/errorScreen.js' "$MODPATH/webroot/js" true
extract "$ZIPFILE" 'webroot/js/smallPageDesabler.js' "$MODPATH/webroot/js" true
extract "$ZIPFILE" 'webroot/js/translate/home.js' "$MODPATH/webroot/js/translate" true
extract "$ZIPFILE" 'webroot/js/translate/action.js' "$MODPATH/webroot/js/translate" true
@@ -137,15 +137,11 @@ extract "$ZIPFILE" 'webroot/js/themes/light.js' "$MODPATH/webroot/js/themes" tru
extract "$ZIPFILE" 'webroot/js/themes/lightNavbar.js' "$MODPATH/webroot/js/themes" true
extract "$ZIPFILE" 'webroot/js/themes/lightIcon.js' "$MODPATH/webroot/js/themes" true
extract "$ZIPFILE" 'webroot/js/list/language.js' "$MODPATH/webroot/js/list" true
for lang in en_US ja_JP pt_BR ro_RO ru_RU vi_VN zh_CN zh_TW; do
extract "$ZIPFILE" "webroot/lang/${lang}.json" "$MODPATH/webroot/lang" true
done
extract "$ZIPFILE" 'webroot/js/modal/language.js' "$MODPATH/webroot/js/modal" true
extract "$ZIPFILE" 'webroot/js/modal/errorHistory.js' "$MODPATH/webroot/js/modal" true
extract "$ZIPFILE" 'webroot/js/smallPage/language.js' "$MODPATH/webroot/js/smallPage" true
extract "$ZIPFILE" 'webroot/js/smallPage/theme.js' "$MODPATH/webroot/js/smallPage" true
extract "$ZIPFILE" 'webroot/js/switcher/fontChanger.js' "$MODPATH/webroot/js/switcher" true
extract "$ZIPFILE" 'webroot/css/index.css' "$MODPATH/webroot/css" true
@@ -156,7 +152,11 @@ extract "$ZIPFILE" 'webroot/css/error.css' "$MODPATH/webroot/css" true
extract "$ZIPFILE" 'webroot/fonts/ProductSans-Italic.ttf' "$MODPATH/webroot/fonts" true
extract "$ZIPFILE" 'webroot/fonts/ProductSans-Regular.ttf' "$MODPATH/webroot/fonts" true
for svg in mark tick warn module expand settings close content error action home delete ec-icon; do
for lang in en_US ja_JP pt_BR ro_RO ru_RU vi_VN zh_CN zh_TW; do
extract "$ZIPFILE" "webroot/lang/${lang}.json" "$MODPATH/webroot/lang" true
done
for svg in mark tick warn module expand settings close content error action home delete ec-icon back; do
extract "$ZIPFILE" "webroot/assets/${svg}.svg" "$MODPATH/webroot/assets" true
done

1
webroot/assets/back.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="36px" viewBox="0 -960 960 960" width="36px" fill="#e8eaed"><path d="m287-446.67 240 240L480-160 160-480l320-320 47 46.67-240 240h513v66.66H287Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 200 B

83
webroot/index.html
View File

@@ -14,13 +14,14 @@
<script src="js/errorCatcher.js" type="module"></script>
<script src="js/errorScreen.js" type="module"></script>
<script src="js/browserRedirect.js" type="module"></script>
<script src="js/theme.js" type="module"></script>
<script src="js/smallPage/theme.js" type="module"></script>
<script src="js/restoreError.js" type="module"></script>
<script src="js/navbar.js" type="module"></script>
<script src="js/daemonActions.js" type="module"></script>
<script src="js/list/language.js" type="module"></script>
<!-- <script src="js/list/language.js" type="module"></script> -->
<script src="js/switcher/fontChanger.js" type="module"></script>
<script src="js/modal/language.js" type="module"></script>
<!-- <script src="js/modal/language.js" type="module"></script> -->
<script src="js/smallPage/language.js" type="module"></script>
<script src="js/modal/errorHistory.js" type="module"></script>
<script src="js/main.js" type="module"></script>
</head>
@@ -50,22 +51,6 @@
<div id="loading_screen" class="load_screen">
<div id="backport_errorh" class="loader"></div>
</div>
<!-- INFO: Language Modal -->
<div id="lang_modal" class="full_screen" style="top: 100%;">
<div class="liste" style="margin-top: 20px; margin-left: 20px;">
<div style="margin-left: 20px;"></div>
<div id="lang_modal_close" class="close_icon icon_animation" style="margin-right: 20px; width: 40px; height: 40px;">
<img src="assets/close.svg">
</div>
</div>
<div style="padding-left: 25px;">
<h1 id="lang_modal_title">Choose your new language</h1>
</div>
<div id="lang_modal_list" style="padding-left: 25px; padding-right: 25px;">
<!-- N/A -->
</div>
</div>
<!-- INFO: Error History Modal -->
<div id="errorh_modal" class="full_screen" style="top: 100%;">
@@ -129,6 +114,7 @@
</div>
</div>
<!-- INFO: Module page -->
<div id="panel_modules" class="panel">
<div id="panel_modules_header" class="header">Modules</div>
<div style="padding: 40px 0px;"></div>
@@ -144,7 +130,7 @@
<!-- INFO: Settings card body (Daemon32) -->
<div id="daemon32" class="dimc" style="display: block; margin: 0 15px 0 15px; border-radius: 20px;">
<div class="dimc liste" style="padding: 30px 22px 30px; border-radius: 20px;">
<div class="dimc" style="font-size: 1.22em;">Daemon (32 bit)</div>
<div id="daemon32_title" class="dimc" style="font-size: 1.22em;">Monitor (32 bit)</div>
<div id="daemon32_status" class="dimc" style="font-size: 1.1em;">Unknown</div>
</div>
@@ -152,14 +138,14 @@
<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 id="daemon32_pause_button" class="center button">Pause</div>
</div>
</div>
</div>
<!-- INFO: Settings card body (Daemon64) -->
<div id="daemon64" class="dimc" style="display: block; margin: 15px 15px 0 15px; border-radius: 20px;">
<div class="dimc liste" style="padding: 30px 22px 30px; border-radius: 20px;">
<div class="dimc" style="font-size: 1.22em;">Daemon (64 bit)</div>
<div id="daemon64_title" class="dimc" style="font-size: 1.22em;">Monitor (64 bit)</div>
<div id="daemon64_status" class="dimc" style="font-size: 1.1em;">Unknown</div>
</div>
@@ -167,7 +153,7 @@
<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 id="daemon64_pause_button" class="center button">Pause</div>
</div>
</div>
</div>
@@ -195,24 +181,19 @@
</div>
<!-- INFO: Enable light theme option -->
<div class="small_card dimc" style="margin-top: 15px; justify-content: space-between; display: flex; align-items: center;">
<div class="dimc" style="display: inline-block; width: 80%;">
<div id="theme_page_toggle" class="small_card dimc card_animation" style="margin-top: 15px; justify-content: space-between; display: flex; align-items: center;">
<div class="dimc" style="display: inline-block;">
<div id="sys_theme_option_title" class="dimc content" style="font-size: 1.1em; padding-left: 5px; padding-top: 6px; padding-bottom: 2px;">
Enable light theme
System theme
</div>
<div id="sys_theme_option_desc" class="dimc desc" style="font-size: 0.9em; padding-left: 5px; padding-bottom: 6px;">
This option will enable light theme for WebUI
Choose your system theme for current WebUI
</div>
</div>
<label class="switch dimc">
<input id="theme_switcher" type="checkbox">
<span class="slider round"></span>
</label>
</div>
<!-- INFO: Change language -->
<div id="lang_switcher" class="small_card dimc card_animation" style="margin-top: 15px; justify-content: space-between; display: flex; align-items: center;">
<div id="lang_page_toggle" class="small_card dimc card_animation" style="margin-top: 15px; justify-content: space-between; display: flex; align-items: center;">
<div class="dimc" style="display: inline-block;">
<div id="sys_lang_option_title" class="dimc content" style="font-size: 1.1em; padding-left: 5px; padding-top: 6px; padding-bottom: 2px;">
Change language
@@ -280,6 +261,42 @@
</div>
<!-- INFO: System theme small page -->
<div id="small_panel_theme" class="panel">
<div class="header" style="display: flex; align-items: center; justify-content: initial;">
<div id="sp_theme_close" style="width: 36px; height: 36px; margin-right: 6px;">
<img src="./assets/back.svg"/>
</div>
<div id="small_panel_theme_title">Theme</div>
</div>
<div style="padding: 47px 0px;"></div>
<div style="width: 100%; height: fit-content;">
<div theme-data="dark" class="dim card card_animation" style="padding: 25px 15px; cursor: pointer;">
<div theme-data="dark" id="small_panel_theme_dark_option" class="dimc" style="font-size: 1.1em;">Dark</div>
</div>
<div theme-data="light" class="dim card card_animation" style="padding: 25px 15px; cursor: pointer;">
<div theme-data="light" id="small_panel_theme_light_option" class="dimc" style="font-size: 1.1em;">Light</div>
</div>
<div theme-data="system" class="dim card card_animation" style="padding: 25px 15px; cursor: pointer;">
<div theme-data="system" id="small_panel_theme_system_option" class="dimc" style="font-size: 1.1em;">System Based</div>
</div>
</div>
</div>
<!-- INFO: Language small page -->
<div id="small_panel_language" class="panel">
<div class="header" style="display: flex; align-items: center; justify-content: initial;">
<div id="sp_lang_close" style="width: 36px; height: 36px; margin-right: 6px;">
<img src="./assets/back.svg"/>
</div>
<div id="small_panel_lang_title">Choose your new language</div>
</div>
<div style="padding: 47px 0px;"></div>
<div id="lang_modal_list" style="width: 100%; height: fit-content;">
<!-- N/A -->
</div>
</div>
<!-- INFO: Bottom navbar -->
<div id="navbar" class="navbar radios">
<div class="dimc">

18
webroot/js/daemonActions.js
View File

@@ -2,7 +2,7 @@ import { exec } from './kernelsu.js'
const daemon64_start = document.getElementById('daemon64_start_button')
const daemon64_stop = document.getElementById('daemon64_stop_button')
const daemon64_exit = document.getElementById('daemon64_exit_button')
const daemon64_pause = document.getElementById('daemon64_pause_button')
if (daemon64_start) {
daemon64_start.addEventListener('click', () => {
@@ -10,17 +10,17 @@ if (daemon64_start) {
})
daemon64_stop.addEventListener('click', () => {
exec('/data/adb/modules/zygisksu/bin/zygisk-ptrace64 ctl stop')
exec('/data/adb/modules/zygisksu/bin/zygisk-ptrace64 ctl exit')
})
daemon64_exit.addEventListener('click', () => {
exec('/data/adb/modules/zygisksu/bin/zygisk-ptrace64 ctl exit')
daemon64_pause.addEventListener('click', () => {
exec('/data/adb/modules/zygisksu/bin/zygisk-ptrace64 ctl stop')
})
}
const daemon32_start = document.getElementById('daemon32_start_button')
const daemon32_stop = document.getElementById('daemon32_stop_button')
const daemon32_exit = document.getElementById('daemon32_exit_button')
const daemon32_pause = document.getElementById('daemon32_pause_button')
if (daemon32_start) {
daemon32_start.addEventListener('click', () => {
@@ -28,10 +28,10 @@ if (daemon32_start) {
})
daemon32_stop.addEventListener('click', () => {
exec('/data/adb/modules/zygisksu/bin/zygisk-ptrace32 ctl stop')
})
daemon32_exit.addEventListener('click', () => {
exec('/data/adb/modules/zygisksu/bin/zygisk-ptrace32 ctl exit')
})
daemon32_pause.addEventListener('click', () => {
exec('/data/adb/modules/zygisksu/bin/zygisk-ptrace32 ctl stop')
})
}

11
webroot/js/language.js
View File

@@ -13,8 +13,6 @@ export async function setNewLanguage(locate, initialize) {
translateActionPage(old_translations, new_translations)
translateSettingsPage(new_translations)
/* INFO: lang modal */
document.getElementById('lang_modal_title').innerHTML = new_translations.modal.language.header
/* INFO: error history modal */
document.getElementById('errorh_modal_title').innerHTML = new_translations.modal.logs.header
@@ -25,6 +23,15 @@ export async function setNewLanguage(locate, initialize) {
document.getElementById('nav_modules_title').innerHTML = new_translations.page.modules.header
document.getElementById('nav_actions_title').innerHTML = new_translations.page.action.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
}
export async function getTranslations(locate) {

38
webroot/js/list/language.js
View File

@@ -1,38 +0,0 @@
import {
avaliableLanguages,
getTranslations,
setNewLanguage
} from '../language.js'
const lang_list = document.getElementById('lang_modal_list')
const target = document.getElementById('lang_modal')
let index = 0
function setAvaliableLanguage() {
const langKey = avaliableLanguages[index]
index += 1
getTranslations(langKey).then((data) => {
lang_list.innerHTML += `
<div lang-data="${langKey}" class="${index === avaliableLanguages.length ? '' : 'spliter'}" style="padding-top: 25px; padding-bottom: 25px; font-size: 1.3em;">
<div lang-data="${langKey}" class="element_animation">${data.langName}</div>
</div>`
})
.finally(() => {
if (index !== avaliableLanguages.length) setAvaliableLanguage()
})
}
setAvaliableLanguage()
document.addEventListener('click', async (event) => {
const getLangLocate = event.target.getAttribute('lang-data')
if (!getLangLocate || typeof getLangLocate !== 'string') return;
await setNewLanguage(getLangLocate)
target.style.top = '100%'
localStorage.setItem('/cache/modal/language/state', 'closed')
localStorage.setItem('/system/language', getLangLocate)
}, false)

3
webroot/js/main.js
View File

@@ -129,7 +129,6 @@ export function setErrorData(errorLog) {
if (findModulesCmd.errno === 0) {
const modules = findModulesCmd.stdout.split('\n')
modules.pop()
if (modules.length === 0) return;
@@ -154,7 +153,7 @@ export function setErrorData(errorLog) {
const name = lines.find(line => line.includes('name=')).split('=')[1]
modules_list.innerHTML +=
`<div class="dim card" style="padding: 25px 15px;">
`<div class="dim card" style="padding: 25px 15px; cursor: pointer;">
<div class="dimc" style="font-size: 1.1em;">${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>

24
webroot/js/modal/language.js
View File

@@ -1,24 +0,0 @@
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('/cache/modal/language/state')
sys_module_mode = setData('closed')
button.addEventListener('click', () => {
target.style.top = '0%'
sys_module_mode = setData('opened')
})
close_button.addEventListener('click', () => {
target.style.top = '100%'
sys_module_mode = setData('closed')
})
function setData(mode) {
localStorage.setItem('/cache/modal/language/state', mode)
return mode
}

12
webroot/js/navbar.js
View File

@@ -5,9 +5,19 @@ 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 = !localStorage.getItem('/cache/navbar/previous') ? setData('home') : localStorage.getItem('/cache/navbar/previous')
if (previous === value) return;
const small_panel = localStorage.getItem('/cache/page/small/previous')
if (small_panel && small_panel.length !== 0) {
document.getElementById(`small_panel_${small_panel}`).classList.remove('show')
localStorage.removeItem('/cache/page/small/previous')
smallPagePass = true
}
if (previous === value && !smallPagePass) return;
/* INFO: Disable icon on old state */
const pre_input = document.getElementById(`n_${previous}`)

49
webroot/js/smallPage/language.js Normal file
View File

@@ -0,0 +1,49 @@
import {
avaliableLanguages,
getTranslations,
setNewLanguage
} from '../language.js'
import { smallPageDisabler } from '../smallPageDesabler.js'
const lang_list = document.getElementById('lang_modal_list')
const page_toggle = document.getElementById('lang_page_toggle')
const page_close = document.getElementById('sp_lang_close')
page_toggle.addEventListener('click', () => {
const previous = !localStorage.getItem('/cache/navbar/previous') ? setData('home') : localStorage.getItem('/cache/navbar/previous')
document.getElementById(`panel_${previous}`).classList.remove('show')
document.getElementById('small_panel_language').classList.toggle('show')
localStorage.setItem('/cache/page/small/previous', 'language')
})
page_close.addEventListener('click', () => smallPageDisabler('language', 'settings'))
let index = 0
function setAvaliableLanguage() {
const langKey = avaliableLanguages[index]
index += 1
getTranslations(langKey).then((data) => {
lang_list.innerHTML += `
<div lang-data="${langKey}" class="dim card card_animation" style="padding: 25px 15px; cursor: pointer;">
<div lang-data="${langKey}" class="dimc" style="font-size: 1.1em;">${data.langName}</div>
</div>
`
})
.finally(() => {
if (index !== avaliableLanguages.length) setAvaliableLanguage()
})
}
setAvaliableLanguage()
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)

65
webroot/js/smallPage/theme.js Normal file
View File

@@ -0,0 +1,65 @@
import { smallPageDisabler } from '../smallPageDesabler.js'
import { setDark } from '../themes/dark.js'
import { setLight } from '../themes/light.js'
const page_toggle = document.getElementById('theme_page_toggle')
let sys_theme = localStorage.getItem('/system/theme')
if (!sys_theme) sys_theme = setData('dark')
if (sys_theme == "system") {
const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
if (!isDark) setLight()
} else if (sys_theme === 'light') setLight(true)
document.getElementById('sp_theme_close').addEventListener('click', () => smallPageDisabler('theme', 'settings'))
page_toggle.addEventListener('click', () => {
const previous = !localStorage.getItem('/cache/navbar/previous') ? setData('home') : localStorage.getItem('/cache/navbar/previous')
document.getElementById(`panel_${previous}`).classList.remove('show')
document.getElementById('small_panel_theme').classList.toggle('show')
localStorage.setItem('/cache/page/small/previous', 'theme')
})
document.addEventListener('click', async (event) => {
const getSystemTheme = event.target.getAttribute('theme-data')
if (!getSystemTheme || typeof getSystemTheme !== 'string') return
switch (getSystemTheme) {
case 'dark':
setDark(true)
break
case 'light':
setLight(true)
break
case 'system':
const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
if (isDark) setDark()
else setLight()
break
}
smallPageDisabler('theme', 'settings')
localStorage.setItem('/system/theme', getSystemTheme)
}, false)
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 setData(mode) {
localStorage.setItem('/system/theme', mode)
return mode
}

23
webroot/js/smallPageDesabler.js Normal file
View File

@@ -0,0 +1,23 @@
export function smallPageDisabler(page_name, new_page) {
document.getElementById(`small_panel_${page_name}`).classList.remove('show')
localStorage.removeItem('/cache/page/small/previous')
const previous = localStorage.getItem('/cache/navbar/previous')
/* 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')
localStorage.setItem('/cache/navbar/previous', 'settings')
}

23
webroot/js/theme.js
View File

@@ -1,23 +0,0 @@
import { setDark } from './themes/dark.js'
import { setLight } from './themes/light.js'
const button = document.getElementById('theme_switcher')
let sys_theme = localStorage.getItem('/system/theme')
if (!sys_theme) sys_theme = setData('dark')
if (sys_theme === 'light') {
button.setAttribute('checked', '')
setLight()
}
button.addEventListener('click', () => {
button.checked ? setLight() : setDark()
})
function setData(mode) {
localStorage.setItem('/system/theme', mode)
return mode
}

8
webroot/js/themes/dark.js
View File

@@ -7,8 +7,10 @@ const close_icons = document.getElementsByClassName('close_icon')
const expand_icons = document.getElementsByClassName('expander')
const copy_button = document.getElementById('errorh_copy')
const clearall_button = document.getElementById('errorh_clear_all')
const sp_lang_close = document.getElementById('sp_lang_close')
const sp_theme_close = document.getElementById('sp_theme_close')
export function setDark() {
export function setDark(chooseSet) {
rootCss.style.setProperty('--background', '#181c20')
rootCss.style.setProperty('--font', '#ffffff')
rootCss.style.setProperty('--desc', '#c9c9c9')
@@ -18,7 +20,7 @@ export function setDark() {
rootCss.style.setProperty('--icon-bc', '#313a3f')
rootCss.style.setProperty('--button', 'var(--background)')
setData('dark')
if (chooseSet) setData('dark')
for (const close_icon of close_icons) {
close_icon.innerHTML = '<img src="assets/close.svg">'
@@ -30,6 +32,8 @@ export function setDark() {
copy_button.innerHTML = '<img src="assets/content.svg">'
clearall_button.innerHTML = '<img src="assets/delete.svg">'
sp_lang_close.innerHTML = '<img src="./assets/back.svg"/>'
sp_theme_close.innerHTML = '<img src="./assets/back.svg"/>'
setDarkNav()
}

9
webroot/js/themes/light.js
View File

@@ -3,6 +3,7 @@ import {
light_expand_icon,
light_copy_icon,
light_clear_icon,
light_page_exit_icon,
} from './lightIcon.js'
import { setLightNav } from './lightNavbar.js'
@@ -13,8 +14,10 @@ const close_icons = document.getElementsByClassName('close_icon')
const expand_icons = document.getElementsByClassName('expander')
const copy_button = document.getElementById('errorh_copy')
const clearall_button = document.getElementById('errorh_clear_all')
const sp_lang_close = document.getElementById('sp_lang_close')
const sp_theme_close = document.getElementById('sp_theme_close')
export function setLight() {
export function setLight(chooseSet) {
rootCss.style.setProperty('--background', '#eff1f6')
rootCss.style.setProperty('--font', '#181c20')
rootCss.style.setProperty('--desc', '#484d53')
@@ -24,7 +27,7 @@ export function setLight() {
rootCss.style.setProperty('--icon-bc', '#c9c9c9')
rootCss.style.setProperty('--button', '#b3b3b3')
setData('light')
if (chooseSet) setData('light')
for (const close_icon of close_icons) {
close_icon.innerHTML = light_close_icon
@@ -36,6 +39,8 @@ export function setLight() {
copy_button.innerHTML = light_copy_icon
clearall_button.innerHTML = light_clear_icon
sp_lang_close.innerHTML = light_page_exit_icon
sp_theme_close.innerHTML = light_page_exit_icon
setLightNav()
}

5
webroot/js/themes/lightIcon.js
View File

@@ -22,4 +22,9 @@ export const light_clear_icon = `
<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#2c2c2c">
<path d="M267.33-120q-27.5 0-47.08-19.58-19.58-19.59-19.58-47.09V-740H160v-66.67h192V-840h256v33.33h192V-740h-40.67v553.33q0 27-19.83 46.84Q719.67-120 692.67-120H267.33Zm425.34-620H267.33v553.33h425.34V-740Zm-328 469.33h66.66v-386h-66.66v386Zm164 0h66.66v-386h-66.66v386ZM267.33-740v553.33V-740Z"/>
</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>
`

6
webroot/js/translate/action.js
View File

@@ -3,17 +3,19 @@ export function translateActionPage(old_translations, new_translations) {
document.getElementById('panel_actions_header').innerHTML = new_translations.page.action.header
/* INFO: daemon32 small card */
document.getElementById('daemon32_title').innerHTML = new_translations.page.action.monitor["32"]
if (document.getElementById('daemon32_stop_button')) { /* INFO: Not all devices have 32-bit support */
document.getElementById('daemon32_stop_button').innerHTML = new_translations.page.action.daemonButton.stop
document.getElementById('daemon32_start_button').innerHTML = new_translations.page.action.daemonButton.start
document.getElementById('daemon32_exit_button').innerHTML = new_translations.page.action.daemonButton.exit
document.getElementById('daemon32_pause_button').innerHTML = new_translations.page.action.daemonButton.pause
}
/* INFO: daemon64 small card */
document.getElementById('daemon64_title').innerHTML = new_translations.page.action.monitor["64"]
if (document.getElementById('daemon64_stop_button')) { /* INFO: Not all devices have 64-bit support */
document.getElementById('daemon64_stop_button').innerHTML = new_translations.page.action.daemonButton.stop
document.getElementById('daemon64_start_button').innerHTML = new_translations.page.action.daemonButton.start
document.getElementById('daemon64_exit_button').innerHTML = new_translations.page.action.daemonButton.exit
document.getElementById('daemon64_pause_button').innerHTML = new_translations.page.action.daemonButton.pause
}
/* INFO: daemon32 status card */

21
webroot/lang/en_US.json
View File

@@ -12,6 +12,17 @@
"header": "Choose your new language"
}
},
"smallPage": {
"language": {
"header": "Choose your new language"
},
"theme": {
"header": "Choose your new theme",
"dark": "Dark",
"light": "Light",
"system": "System Based"
}
},
"page": {
"home": {
"header": "Home",
@@ -40,7 +51,11 @@
"daemonButton": {
"start": "Start",
"stop": "Stop",
"exit": "Exit"
"pause": "Pause"
},
"monitor": {
"32": "Monitor (32 bit)",
"64": "Monitor (64 bit)"
},
"status": {
"unknown": "Unknown",
@@ -55,8 +70,8 @@
"description": "This option will enable system font in current WebUI. NOTE: May not be compatible with FlipFont"
},
"theme": {
"header": "Enable light theme",
"description": "This option will enable light theme for WebUI"
"header": "System theme",
"description": "Choose your system theme for current WebUI"
},
"language": {
"header": "Change language",

20
webroot/lang/ja_JP.json
View File

@@ -7,9 +7,17 @@
"logs": {
"header": "Error History",
"placeholder": "No error log recorded here!"
},
}
},
"smallPage": {
"language": {
"header": "言語を選択してください"
},
"theme": {
"header": "Choose your new theme",
"dark": "Dark",
"light": "Light",
"system": "System Based"
}
},
"page": {
@@ -40,7 +48,11 @@
"daemonButton": {
"start": "スタート",
"stop": "ストップ",
"exit": "終了"
"pause": "Pause"
},
"monitor": {
"32": "Monitor (32 bit)",
"64": "Monitor (64 bit)"
},
"status": {
"unknown": "Unknown",
@@ -55,8 +67,8 @@
"description": "This option will enable system font in current WebUI. NOTE: May not be compatible with FlipFont"
},
"theme": {
"header": "Enable light theme",
"description": "This option will enable light theme for WebUI"
"header": "System theme",
"description": "Choose your system theme for current WebUI"
},
"language": {
"header": "Change language",

22
webroot/lang/pt_BR.json
View File

@@ -1,5 +1,5 @@
{
"langName": "Português (Brasil)",
"langName": "🇧🇷 Português (Brasil)",
"global": {
"unknown": "Desconhecido"
},
@@ -7,9 +7,17 @@
"logs": {
"header": "Histórico de erros",
"placeholder": "Nenhum erro foi salvo aqui!"
},
}
},
"smallPage": {
"language": {
"header": "Escolha sua nova língua"
},
"theme": {
"header": "Choose your new theme",
"dark": "Dark",
"light": "Light",
"system": "System Based"
}
},
"page": {
@@ -40,7 +48,11 @@
"daemonButton": {
"start": "Iniciar",
"stop": "Parar",
"exit": "Sair"
"pause": "Pausar"
},
"monitor": {
"32": "Monitor (32 bit)",
"64": "Monitor (64 bit)"
},
"status": {
"unknown": "Desconhecido",
@@ -55,8 +67,8 @@
"description": "Esta opção irá usar a fonte do sistema na atual WebUI. Observação: Talvez não seja compatível com o FlipFont"
},
"theme": {
"header": "Usar o tema claro",
"description": "Esta opção ira abilitar o tema claro para a WebUI"
"header": "System theme",
"description": "Choose your system theme for current WebUI"
},
"language": {
"header": "Alterar a língua",

20
webroot/lang/ro_RO.json
View File

@@ -7,9 +7,17 @@
"logs": {
"header": "Error History",
"placeholder": "No error log recorded here!"
},
}
},
"smallPage": {
"language": {
"header": "Alegeți limba prestabilită"
},
"theme": {
"header": "Choose your new theme",
"dark": "Dark",
"light": "Light",
"system": "System Based"
}
},
"page": {
@@ -40,7 +48,11 @@
"daemonButton": {
"start": "Start",
"stop": "Stop",
"exit": "Ieșire"
"pause": "Pause"
},
"monitor": {
"32": "Monitor (32 bit)",
"64": "Monitor (64 bit)"
},
"status": {
"unknown": "Unknown",
@@ -55,8 +67,8 @@
"description": "This option will enable system font in current WebUI. NOTE: May not be compatible with FlipFont"
},
"theme": {
"header": "Enable light theme",
"description": "This option will enable light theme for WebUI"
"header": "System theme",
"description": "Choose your system theme for current WebUI"
},
"language": {
"header": "Change language",

20
webroot/lang/ru_RU.json
View File

@@ -7,9 +7,17 @@
"logs": {
"header": "Error History",
"placeholder": "No error log recorded here!"
},
}
},
"smallPage": {
"language": {
"header": "Выберите Ваш новый язык"
},
"theme": {
"header": "Choose your new theme",
"dark": "Dark",
"light": "Light",
"system": "System Based"
}
},
"page": {
@@ -40,7 +48,11 @@
"daemonButton": {
"start": "Старт",
"stop": "Пауза",
"exit": "Стоп"
"pause": "Pause"
},
"monitor": {
"32": "Monitor (32 bit)",
"64": "Monitor (64 bit)"
},
"status": {
"unknown": "Unknown",
@@ -55,8 +67,8 @@
"description": "This option will enable system font in current WebUI. NOTE: May not be compatible with FlipFont"
},
"theme": {
"header": "Enable light theme",
"description": "This option will enable light theme for WebUI"
"header": "System theme",
"description": "Choose your system theme for current WebUI"
},
"language": {
"header": "Change language",

20
webroot/lang/vi_VN.json
View File

@@ -7,9 +7,17 @@
"logs": {
"header": "Lịch sử lỗi",
"placeholder": "Không có lỗi nào đã được ghi lại ở đây!"
},
}
},
"smallPage": {
"language": {
"header": "Chọn ngôn ngữ mới của bạn"
},
"theme": {
"header": "Chọn giao diện mới của bạn",
"dark": "Tối",
"light": "Sáng",
"system": "Theo hệ thống"
}
},
"page": {
@@ -40,7 +48,11 @@
"daemonButton": {
"start": "Chạy",
"stop": "Dừng",
"exit": "Thoát"
"pause": "Tạm Dừng"
},
"monitor": {
"32": "Trình chạy (32 bit)",
"64": "Trình chạy (64 bit)"
},
"status": {
"unknown": "Không xác định",
@@ -55,8 +67,8 @@
"description": "Tuỳ chọn này sẽ cho phép người dùng sử dụng phông chữ của hệ thống. LƯU Ý: Có thể sẽ không tương thích với FlipFont"
},
"theme": {
"header": "Sử dụng chế độ sáng",
"description": "Tuỳ chọn này sẽ bật chế độ sáng cho WebUI"
"header": "Giao diện hệ thống",
"description": "Chọn giao diện cho WebUI hiện tại của bạn"
},
"language": {
"header": "Thay đổi ngôn ngữ",

20
webroot/lang/zh_CN.json
View File

@@ -7,9 +7,17 @@
"logs": {
"header": "Error History",
"placeholder": "No error log recorded here!"
},
}
},
"smallPage": {
"language": {
"header": "选择你的语言"
},
"theme": {
"header": "Choose your new theme",
"dark": "Dark",
"light": "Light",
"system": "System Based"
}
},
"page": {
@@ -40,7 +48,11 @@
"daemonButton": {
"start": "启动",
"stop": "停止",
"exit": "退出"
"pause": "Pause"
},
"monitor": {
"32": "Monitor (32 bit)",
"64": "Monitor (64 bit)"
},
"status": {
"unknown": "Unknown",
@@ -55,8 +67,8 @@
"description": "This option will enable system font in current WebUI. NOTE: May not be compatible with FlipFont"
},
"theme": {
"header": "Enable light theme",
"description": "This option will enable light theme for WebUI"
"header": "System theme",
"description": "Choose your system theme for current WebUI"
},
"language": {
"header": "Change language",

20
webroot/lang/zh_TW.json
View File

@@ -7,9 +7,17 @@
"logs": {
"header": "Error History",
"placeholder": "No error log recorded here!"
},
}
},
"smallPage": {
"language": {
"header": "選擇你的語言"
},
"theme": {
"header": "Choose your new theme",
"dark": "Dark",
"light": "Light",
"system": "System Based"
}
},
"page": {
@@ -40,7 +48,11 @@
"daemonButton": {
"start": "啟動",
"stop": "停止",
"exit": "退出"
"pause": "Pause"
},
"monitor": {
"32": "Monitor (32 bit)",
"64": "Monitor (64 bit)"
},
"status": {
"unknown": "Unknown",
@@ -55,8 +67,8 @@
"description": "This option will enable system font in current WebUI. NOTE: May not be compatible with FlipFont"
},
"theme": {
"header": "Enable light theme",
"description": "This option will enable light theme for WebUI"
"header": "System theme",
"description": "Choose your system theme for current WebUI"
},
"language": {
"header": "Change language",