add: lang list for lang modal

module/build.gradle.kts

@@ -170,6 +170,7 @@ androidComponents.onVariants { variant ->
 
                     set.add(Pair(root.file("webroot/js/list/module.js").asFile, null))
                     set.add(Pair(root.file("webroot/js/list/settings.js").asFile, null))
+                    set.add(Pair(root.file("webroot/js/list/lang.js").asFile, null))
 
                     set.add(Pair(root.file("webroot/js/lang/en_US.js").asFile, null))
                     set.add(Pair(root.file("webroot/js/lang/vi_VN.js").asFile, null))

module/src/customize.sh

@@ -121,6 +121,7 @@ extract "$ZIPFILE" 'webroot/js/theme.js' "$MODPATH/webroot/js" true
 
 extract "$ZIPFILE" 'webroot/js/list/module.js' "$MODPATH/webroot/js/list" true
 extract "$ZIPFILE" 'webroot/js/list/settings.js' "$MODPATH/webroot/js/list" true
+extract "$ZIPFILE" 'webroot/js/list/lang.js' "$MODPATH/webroot/js/list" true
 
 extract "$ZIPFILE" 'webroot/js/lang/en_US.js' "$MODPATH/webroot/js/lang" true
 extract "$ZIPFILE" 'webroot/js/lang/vi_VN.js' "$MODPATH/webroot/js/lang" true

webroot/index.html

@@ -8,6 +8,7 @@
     <script src="js/theme.js" type="module"></script>
     <script src="js/list/module.js" type="module"></script>
     <script src="js/list/settings.js" type="module"></script>
+    <script src="js/list/lang.js" type="module"></script>
     <script src="js/main.js" type="module"></script>
     <script src="js/modal/lang.js" type="module"></script>
     <link rel="stylesheet" href="css/fonts.css">
@@ -24,6 +25,12 @@
       <div id="lang_modal_close" class="close_icon" style="margin-top: 20px; margin-left: 20px;">
         <img src="assets/close.svg">
       </div>
+      <div style="padding-left: 25px;">
+        <h1>Choose your new language</h1>
+      </div>
+      <div id="lang_modal_list" style="padding-left: 25px; padding-right: 25px;">
+        <!-- N/A -->
+      </div>
     </div>
 
     <!-- INFO: Headers -->

webroot/js/lang/index.js

@@ -1,5 +1,6 @@
-import { vi_VN } from "./vi_VN"
+import { vi_VN } from "./vi_VN.js"
-
+import { en_US } from "./en_US.js"
-export {
+export const lang = {
-  vi_VN
+  vi_VN,
+  en_US
 }

webroot/js/list/lang.js

@@ -0,0 +1,23 @@
+import { lang } from "../lang/index.js";
+
+const lang_list = document.getElementById("lang_modal_list")
+const key_list = Object.keys(lang)
+let index = 0
+
+for (const lang_key of key_list) {
+  index += 1
+  const value = lang[lang_key]
+  lang_list.innerHTML += `
+    <div class="${index === key_list.length ? '' : 'spliter'}" style="padding-top: 25px; padding-bottom: 25px; font-size: 1.3em;">
+      ${value.langName}
+    </div>`
+}
+
+// for (let i = 0; i < arr_size; i++) {
+//   const key = key_list[i]
+//   const value = lang[key]
+//   lang_list.innerHTML += `
+//     <div class="spliter" style="padding-top: 25px; padding-bottom: 25px; font-size: 1.3em;">
+//       ${value}
+//     </div>`
+// }

webroot/js/theme.js

@@ -78,8 +78,8 @@ function setDark() {
 
 function setLight() {
   rootCss.style.setProperty('--background', '#eff1f6')
-  rootCss.style.setProperty('--font', '#2c2c2c')
+  rootCss.style.setProperty('--font', '#181c20')
-  rootCss.style.setProperty('--desc', '#444444')
+  rootCss.style.setProperty('--desc', '#484d53')
   rootCss.style.setProperty('--spliter', '#4f6069')
   rootCss.style.setProperty('--dim', '#e0e0e0')
   rootCss.style.setProperty('--icon', '#acacac')