add: builtin ProductSans font and option to toggle

module/build.gradle.kts

@@ -175,17 +175,25 @@ androidComponents.onVariants { variant ->
                     set.add(Pair(root.file("webroot/js/list/settings.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))
                     set.add(Pair(root.file("webroot/lang/ja_JP.json").asFile, null))
                     set.add(Pair(root.file("webroot/lang/pt_BR.json").asFile, null))
                     set.add(Pair(root.file("webroot/lang/ro_RO.json").asFile, null))
                     set.add(Pair(root.file("webroot/lang/ru_RU.json").asFile, null))
                     set.add(Pair(root.file("webroot/lang/vi_VN.json").asFile, null))
+                    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/modal/errorHistory.js").asFile, null))
 
                     set.add(Pair(root.file("webroot/css/index.css").asFile, null))
+                    set.add(Pair(root.file("webroot/css/fonts.css").asFile, null))
+
+                    set.add(Pair(root.file("webroot/fonts/ProductSans-Italic.ttf").asFile, null))
+                    set.add(Pair(root.file("webroot/fonts/ProductSans-Regular.ttf").asFile, null))
                     
                     set.add(Pair(root.file("webroot/assets/mark.svg").asFile, null))
                     set.add(Pair(root.file("webroot/assets/tick.svg").asFile, null))

module/src/customize.sh

@@ -132,11 +132,19 @@ extract "$ZIPFILE" 'webroot/lang/pt_BR.json' "$MODPATH/webroot/lang" true
 extract "$ZIPFILE" 'webroot/lang/ro_RO.json' "$MODPATH/webroot/lang" true
 extract "$ZIPFILE" 'webroot/lang/ru_RU.json' "$MODPATH/webroot/lang" true
 extract "$ZIPFILE" 'webroot/lang/vi_VN.json' "$MODPATH/webroot/lang" true
+extract "$ZIPFILE" 'webroot/lang/zh_CN.json' "$MODPATH/webroot/lang" true
+extract "$ZIPFILE" 'webroot/lang/zh_TW.json' "$MODPATH/webroot/lang" true
 
 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/switcher/fontChanger.js' "$MODPATH/webroot/js/switcher" true
+
 extract "$ZIPFILE" 'webroot/css/index.css' "$MODPATH/webroot/css" true
+extract "$ZIPFILE" 'webroot/css/fonts.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
 
 extract "$ZIPFILE" 'webroot/assets/mark.svg' "$MODPATH/webroot/assets" true
 extract "$ZIPFILE" 'webroot/assets/tick.svg' "$MODPATH/webroot/assets" true

webroot/css/fonts.css

@@ -0,0 +1,9 @@
+@font-face {
+  font-family: "ProductSans Regular";
+  src: url("../fonts/ProductSans-Regular.ttf");
+}
+
+@font-face {
+  font-family: "ProductSans Italic";
+  src: url("../fonts/ProductSans-Regular.ttf");
+}

webroot/css/index.css

@@ -13,12 +13,14 @@
   /* Locked Color */
   --lock-desc: #c9c9c9;
   --lock: #fff;
+  --font-family: 'ProductSans Regular', 'ProductSans Italic', sans-serif;
+  /* --font-system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif */
 }
 
 * {
   background-color: var(--background);
   color: var(--font);
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
+  font-family: var(--font-family)
 }
 
 body {
@@ -133,7 +135,6 @@ a {
 }
 
 .button {
-  /* width: 2em; */
   padding-top: 1em;
   padding-bottom: 1em;
   border-radius: 30px;
@@ -226,4 +227,72 @@ a {
 
 .lockd {
   color: var(--lock-desc);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+  margin-left: 10px;
+}
+
+.switch input { 
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--button);
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: var(--desc);
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(100%);
+  -ms-transform: translateX(100%);
+  transform: translateX(100%);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
 }

webroot/index.html

@@ -9,10 +9,12 @@
     <script src="js/list/module.js" type="module"></script>
     <script src="js/list/settings.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/main.js" type="module"></script>
     <script src="js/modal/language.js" type="module"></script>
     <script src="js/modal/errorHistory.js" type="module"></script>
     <script src="js/restoreError.js" type="module"></script>
+    <link rel="stylesheet" href="css/fonts.css">
     <link rel="stylesheet" href="css/index.css">
   </head>
   <body id="main_body">
@@ -160,6 +162,21 @@
           <div id="daemon64_exit_button" class="center button">Exit</div>
         </div>
       </div>
+
+      <div class="small_card" style="margin-top: 15px; justify-content: space-between; display: flex; align-items: center;">
+        <div class="small_card_bg" style="display: inline-block; width: 80%;">
+          <div id="sys_font_option_title" class="small_card_bg content" style="font-size: 1.1em; padding-left: 5px; padding-top: 6px; padding-bottom: 2px;">Enable system font</div>
+          <div id="sys_font_option_desc" class="small_card_bg desc" style="font-size: 0.9em; padding-left: 5px; padding-bottom: 6px;">
+            This option will enable system font in current WebUI. NOTE: May not be compatible with FlipFont
+          </div>
+        </div>
+
+        <label class="switch small_card_bg">
+          <input id="font_switcher" type="checkbox">
+          <span class="slider round"></span>
+        </label>
+        
+      </div>
     </div>
 
     <!-- INFO: Get error logs button card -->

webroot/js/language.js

@@ -23,9 +23,11 @@ const errorh_modal_title = document.getElementById('errorh_modal_title')
 const errorh_panel = document.getElementById('errorh_panel')
 /* INFO: lang modal */
 const lang_modal_title = document.getElementById('lang_modal_title')
+/* INFO: lang modal */
+const sys_font_option_title = document.getElementById('sys_font_option_title')
+const sys_font_option_desc = document.getElementById('sys_font_option_desc')
 /* INFO: Variable fields */
 const rezygisk_state = document.getElementById('rezygisk_state')
-
 const zygote32_status_div = document.getElementById('zygote32_status')
 const zygote64_status_div = document.getElementById('zygote64_status')
 
@@ -67,6 +69,10 @@ export async function setNewLanguage(locate, initialize) {
   errorh_modal_title.innerHTML = new_lang.errorHistory.header
   errorh_panel.placeholder = new_lang.errorHistory.placeholder
 
+  /* INFO: lang modal */
+  sys_font_option_title.innerHTML = new_lang.switcher.font.header
+  sys_font_option_desc.innerHTML = new_lang.switcher.font.description
+
   /* INFO: Translate variables */
   switch (rezygisk_state.innerHTML.replace(/(\r\n|\n|\r)/gm,"").trim()) {
     case old_translations.infoCard.status.ok: {

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 localStorage.getItem('/system/font')
+}

webroot/lang/en_US.json

@@ -43,5 +43,11 @@
   "errorHistory": {
     "header": "Error History",
     "placeholder": "No error log recorded here!"
+  },
+  "switcher": {
+    "font": {
+      "header": "Enable system font",
+      "description": "This option will enable system font in current WebUI. NOTE: May not be compatible with FlipFont"
+    }
   }
 }

webroot/lang/ja_JP.json

@@ -43,5 +43,11 @@
   "errorHistory": {
     "header": "Error History",
     "placeholder": "No error log recorded here!"
+  },
+  "switcher": {
+    "font": {
+      "header": "Enable system font",
+      "description": "This option will enable system font in current WebUI. NOTE: May not be compatible with FlipFont"
+    }
   }
 }

webroot/lang/pt_BR.json

@@ -43,5 +43,11 @@
   "errorHistory": {
     "header": "Error History",
     "placeholder": "No error log recorded here!"
+  },
+  "switcher": {
+    "font": {
+      "header": "Enable system font",
+      "description": "This option will enable system font in current WebUI. NOTE: May not be compatible with FlipFont"
+    }
   }
 }

webroot/lang/ro_RO.json

@@ -43,5 +43,11 @@
   "errorHistory": {
     "header": "Error History",
     "placeholder": "No error log recorded here!"
+  },
+  "switcher": {
+    "font": {
+      "header": "Enable system font",
+      "description": "This option will enable system font in current WebUI. NOTE: May not be compatible with FlipFont"
+    }
   }
 }

webroot/lang/ru_RU.json

@@ -43,5 +43,11 @@
   "errorHistory": {
     "header": "Error History",
     "placeholder": "No error log recorded here!"
+  },
+  "switcher": {
+    "font": {
+      "header": "Enable system font",
+      "description": "This option will enable system font in current WebUI. NOTE: May not be compatible with FlipFont"
+    }
   }
 }

webroot/lang/vi_VN.json

@@ -43,5 +43,11 @@
   "errorHistory": {
     "header": "Lịch sử lỗi",
     "placeholder": "Không có lỗi nào đã được ghi lại ở đây!"
+  },
+  "switcher": {
+    "font": {
+      "header": "Sử dụng phông chữ hệ thống",
+      "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"
+    }
   }
 }

webroot/lang/zh_CN.json

@@ -44,5 +44,11 @@
   "errorHistory": {
     "header": "错误记录",
     "placeholder": "未发现任何错误！"
+  },
+  "switcher": {
+    "font": {
+      "header": "Enable system font",
+      "description": "This option will enable system font in current WebUI. NOTE: May not be compatible with FlipFont"
+    }
   }
 }

webroot/lang/zh_TW.json

@@ -45,5 +45,11 @@
   "errorHistory": {
     "header": "錯誤記錄",
     "placeholder": "未發現任何錯誤！"
+  },
+  "switcher": {
+    "font": {
+      "header": "Enable system font",
+      "description": "This option will enable system font in current WebUI. NOTE: May not be compatible with FlipFont"
+    }
   }
 }