Nearly completely refactor how the settings UI looks, and ensure mobile responsiveness. Slightly clean up code and run prettier.

README.md

@@ -35,7 +35,7 @@ Deploying Alu is about as simple as it gets.
 Congrats! You should now be running your very own instance of Alu! 🎉
 
 > [!WARNING]
-> Recursing all submodules will install [alu-games](https://github.com/wearrrrr/alu-games) as well. This repo contains *all* games for Alu, and is quite large! If you wish to skip it, simply remove `--recurse-submodules` from your clone command.
+> Recursing all submodules will install [alu-games](https://github.com/wearrrrr/alu-games) as well. This repo contains _all_ games for Alu, and is quite large! If you wish to skip it, simply remove `--recurse-submodules` from your clone command.
 
 ## What about Docker?
 

public/sw.js

@@ -7,11 +7,16 @@ const ww = new WorkerWare({
   debug: false,
 });
 
-// uv.config.inject = [{
+async function getVencordJS() {
-//   "host": "discord.com",
+  const vencordJS = await fetch("/marketplace/vencord/browser.js");
-//   "html": `<script src="https://raw.githubusercontent.com/Vencord/builds/main/browser.js"></script><link rel="stylesheet" href="https://raw.githubusercontent.com/Vencord/builds/main/browser.css"></link>`,
+  self.vencordJS = await vencordJS.text();
-//   "injectTo": "head",
+  uv.config.inject = [{
-// }]
+    "host": "discord.com",
+    "html": `<script>${self.vencordJS}</script><link rel="stylesheet" href="https://raw.githubusercontent.com/Vencord/builds/main/browser.css"></link>`,
+    "injectTo": "head",
+  }];
+}
+getVencordJS();
 
 function loadExtensionScripts() {
   try {

src/alu.d.ts

@@ -5,11 +5,15 @@ export declare global {
     type DefaultKeys = {
       [key: string]: AluKey;
     };
-    type Key = Record<string?, string | {
+    type Key = Record<
-      name: string;
+      string?,
-      icon: string;
+      | string
-      isCustom: boolean;
+      | {
-    }>;
+          name: string;
+          icon: string;
+          isCustom: boolean;
+        }
+    >;
     type ValidStoreKeys = "proxy" | "search" | "openpage" | "wisp" | "bareUrl" | "transport" | "searxng" | "theme" | "lang" | "cloak";
   }
 }

src/components/ProxyRegistrar.astro

@@ -83,7 +83,6 @@
         }
       }
 
-
       const iframe = document.getElementById("proxy-frame") as HTMLIFrameElement;
       const topbar = document.getElementById("top-bar") as HTMLDivElement;
       const closeButton = document.getElementById("close-button") as HTMLButtonElement;

src/components/SettingsContent/CreditsTab.astro

@@ -1,4 +1,5 @@
 ---
+import Card from "@components/UI/Card.astro";
 import Link from "@components/UI/Link.astro";
 import { i18n } from "@i18n/utils";
 const t = i18n.inferLangUseTranslations(Astro.url);
@@ -6,36 +7,49 @@ const t = i18n.inferLangUseTranslations(Astro.url);
 
 <div class="settings-container">
   <div class="credits-container">
-    <p class="credit-item">
+    <Card title={t("ultraviolet")}>
-      {t("ultraviolet")} - <Link href="https://titaniumnetwork.org/" newTab>Titanium Network</Link>
+      <Link href="https://titaniumnetwork.org/" newTab>Titanium Network</Link>
-    </p>
+    </Card>
-    <p class="credit-item">
+    <Card title={t("settings.credits.esTranslations")}>
-      {t("settings.credits.jpTranslations")} - <Link href="https://wearr.dev" newTab>wearr</Link>
+      <Link href="https://github.com/builtbyvys/" newTab>vys</Link>
-    </p>
+    </Card>
-    <p class="credit-item">
+    <Card title={t("settings.credits.frTranslations")}>
-      {t("settings.credits.ruTranslations")} - <Link href="https://3kh0.net" newTab>Echo</Link>
+      <Link href="https://github.com/notboeing747">notboeing747</Link>
-    </p>
+    </Card>
-    <p class="credit-item">
+    <Card title={t("settings.credits.jpTranslations")}>
-      {t("settings.credits.zhTranslations")} - <Link href="https://3kh0.net" newTab>Echo</Link>
+      <Link href="https://wearr.dev" newTab>wearr</Link>
-    </p>
+    </Card>
-    <p class="credit-item">
+    <Card title={t("settings.credits.ptTranslations")}> kersosina_ </Card>
-      French Translations - <Link href="https://github.com/notboeing747" newTab>notboeing747</Link>
+    <Card title={t("settings.credits.ruTranslations")}>
-    </p>
+      <Link href="https://3kh0.net" newTab>Echo</Link>
-    <!-- todo: finish localization for this page -->
+    </Card>
-    <p class="credit-item">
+    <Card title={t("settings.credits.zhTranslations")}>
-      {t("settings.credits.mochaandmacchiatothemes")} - <Link href="https://github.com/catppuccin/catppuccin" newTab>Catppuccin</Link>
+      <Link href="https://3kh0.net" newTab>Echo</Link>
-    </p>
+    </Card>
-    <p class="credit-item">
+    <Card title={t("settings.credits.mochaandmacchiatothemes")}>
-      Wisp Server - <Link newTab href="https://github.com/MercuryWorkshop/wisp-server-node">Mercury Workshop</Link>
+      <Link href="https://github.com/catppuccin/catppuccin" newTab>Catppuccin</Link>
-    </p>
+    </Card>
-    <p class="credit-item">
+    <Card title="Wisp Server">
-      Rosé Pine Theme - <Link href="https://rosepinetheme.com/" newTab>Rosé Pine</Link>
+      <Link href="https://github.com/MercuryWorkshop/wisp-server-node" newTab>Wisp Server</Link>
-    </p>
+    </Card>
+    <Card title="Rosé Pine Theme">
+      <Link href="https://rosepinetheme.com/" newTab>Rosé Pine</Link>
+    </Card>
   </div>
 </div>
 
 <style>
+  .credits-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    width: 100%;
+    gap: 10px;
+  }
   .credit-item {
-    font-size: 18px;
+    font-size: 20px;
+    margin: 10px 0 10px;
+  }
+  .credit-name {
+    min-width: 150px;
   }
 </style>

src/components/SettingsContent/CustomizationTab.astro

@@ -16,8 +16,9 @@ const languageList = [
   { name: "Español", value: "es" },
   { name: "Français", value: "fr" },
   { name: "日本語", value: "jp" },
-  { name: "中文", value: "zh" },
+  { name: "Português", value: "pt" },
   { name: "Русский", value: "ru" },
+  { name: "中文", value: "zh" },
 ];
 ---
 

src/components/UI/Card.astro

@@ -0,0 +1,34 @@
+---
+const { title } = Astro.props;
+
+interface Props {
+  title: string;
+}
+---
+
+<div class="card" id=`card-${title.toLowerCase()}`>
+  <h2 class="card-title">{title}</h2>
+  <slot />
+</div>
+
+<style>
+  .card {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 18px;
+    background-color: var(--background-highlight);
+    border-radius: 10px;
+    padding-bottom: 1rem;
+    transition: 250ms ease-in-out;
+    cursor: pointer;
+  }
+  .card:hover {
+    filter: brightness(0.8);
+  }
+  .card-title {
+    margin: 1rem;
+    text-align: center;
+  }
+</style>

src/i18n/locale/en.json

@@ -56,12 +56,15 @@
   "settings.customization.language": "Language",
 
   "settings.cloaking": "Cloaking",
-  "settings.cloaking.subtext": "Change how your tab looks...",
+  "settings.cloaking.subtext": "Change how your tab looks",
   "settings.cloaking.updateCloak": "Update Cloak",
 
   "settings.credits": "Credits",
   "settings.credits.mochaandmacchiatothemes": "Mocha & Macchiato Themes",
+  "settings.credits.esTranslations": "Spanish Translations",
+  "settings.credits.frTranslations": "French Translations",
   "settings.credits.jpTranslations": "Japanese Translations",
+  "settings.credits.ptTranslations": "Portuguese Translations",
   "settings.credits.ruTranslations": "Russian Translations",
   "settings.credits.zhTranslations": "Chinese Translations"
 }

src/i18n/locale/es.json

@@ -56,12 +56,15 @@
   "settings.customization.language": "Idioma",
 
   "settings.cloaking": "Encubrimiento",
-  "settings.cloaking.subtext": "Cambia el aspecto de tu pestaña...",
+  "settings.cloaking.subtext": "Cambia el aspecto de tu pestaña",
   "settings.cloaking.updateCloak": "Capa de actualización",
 
   "settings.credits": "Créditos",
   "settings.credits.mochaandmacchiatothemes": "Temas de Mocha y Macchiato",
+  "settings.credits.esTranslations": "Traducciones al español",
+  "settings.credits.frTranslations": "Traducciones al francés",
   "settings.credits.jpTranslations": "Traducciones al japonés",
+  "settings.credits.ptTranslations": "Traducciones al portugués",
   "settings.credits.ruTranslations": "Traducciones al ruso",
   "settings.credits.zhTranslations": "Traducciones al chino"
 }

src/i18n/locale/fr.json

@@ -56,12 +56,14 @@
   "settings.customization.language": "Langue",
 
   "settings.cloaking": "Déguiser",
-  "settings.cloaking.subtext": "Changez l'apparence de votre fenêtre...",
+  "settings.cloaking.subtext": "Changez l'apparence de votre fenêtre",
   "settings.cloaking.updateCloak": "Mettre à jour le déguise",
-
   "settings.credits": "Crédits",
   "settings.credits.mochaandmacchiatothemes": "Thème Moka & Macchiato",
+  "settings.credits.esTranslations": "Traductions Espagnoles",
+  "settings.credits.frTranslations": "Traductions Françaises",
   "settings.credits.jpTranslations": "Traductions Japonais",
+  "settings.credits.ptTranslations": "Traductions Portugaises",
   "settings.credits.ruTranslations": "Traductions Russes",
   "settings.credits.zhTranslations": "Traductions Chinoises"
 }

src/i18n/locale/jp.json

@@ -56,12 +56,15 @@
   "settings.customization.language": "言語",
 
   "settings.cloaking": "クローキング",
-  "settings.cloaking.subtext": "タブの見た目を変更します...",
+  "settings.cloaking.subtext": "タブの見た目を変更します",
   "settings.cloaking.updateCloak": "クロークを更新",
 
   "settings.credits": "クレジット",
   "settings.credits.mochaandmacchiatothemes": "モカとマキアートテーマ",
+  "settings.credits.esTranslations": "スペイン語翻訳",
+  "settings.credits.frTranslations": "フランス語翻訳",
   "settings.credits.jpTranslations": "日本語翻訳",
+  "settings.credits.ptTranslations": "ポルトガル語翻訳",
   "settings.credits.ruTranslations": "ロシア語翻訳",
   "settings.credits.zhTranslations": "中国語翻訳"
 }

src/i18n/locale/pt.json

@@ -0,0 +1,70 @@
+{
+  "ultraviolet": "Ultraviolet",
+
+  "pages.home": "Página principal | Alu",
+  "pages.games": "Jogos | Alu",
+  "pages.settings": "Definições | Alu",
+
+  "nav.brand": "Alu",
+  "nav.games": "Jogos",
+  "nav.settings": "Definições",
+
+  "menu.welcome": "Bem-vindo ao Alu",
+  "menu.search": "Pesquisar na internet...",
+
+  "faq.title": "Perguntas frequentes",
+
+  "faq.whatIsAProxy": "O que é um proxy?",
+  "faq.whatIsAProxy.answer": "Um proxy é um método de anonimizar o seu tráfego, enviando o seu pedido para um servidor (o proxy), o qual faz o pedido por si e envia-to de volta! Isto permite um nível de segurança muito mais elevado, como também permite contornar restrições sobre sites em redes públicas e a censura.",
+
+  "faq.noBareClients": "O que significa \"there are no bare clients\"?",
+  "faq.noBareClients.answer": "Existem alguns motivos pelos quais este erro ocorre, mas geralmente deve-se a uma falha ao carregar o proxy. Tente recarregar a página e, caso o problema persiste, abra uma issue no GitHub!",
+
+  "faq.contributeToAlu": "Como posso contribuir para Alu?",
+  "faq.contributeToAlu.answer.segment1": "Divulgar Alu é suficiente, mas, se gostares bastante do Alu e quiseres links privados, considera apoiar-me pelo Patreon!",
+  "faq.contributeToAlu.answer.patreonLinkText": "Podes apoiar-me aqui!",
+  "faq.contributeToAlu.answer.segment2": "Obrigado por ajudar a tornar o Alu excelente!",
+
+  "footer.brand": "Alu",
+  "footer.madeWithLove": "Feito com ❤️ por wearr",
+  "footer.poweredBy": "Titanium Network",
+  "footer.services": "Serviços",
+  "footer.socials": "Redes sociais",
+  "footer.aluProject": "Projeto Alu",
+
+  "games.title": "Jogos",
+  "games.search": "Pesquisa...",
+
+  "settings.title": "Definições",
+  "settings.proxy": "Proxy",
+  "settings.proxy.auto": "Auto",
+  "settings.proxy.selectedProxy": "Proxy selecionado",
+  "settings.proxy.searchEngine": "Motor de busca",
+  "settings.proxy.openPageWith": "Abrir com",
+  "settings.proxy.openPageWith.embed": "Incorporar",
+  "settings.proxy.openPageWith.newTab": "Nova aba",
+  "settings.proxy.searxngURL": "Searx URL",
+  "settings.proxy.transport": "Transporte",
+  "settings.proxy.wispURL": "Wisp URL",
+  "settings.proxy.bareURL": "Bare URL",
+
+  "settings.customization": "Customização",
+  "settings.customization.theme": "Tema",
+  "settings.customization.theme.Alu": "Alu",
+  "settings.customization.theme.Macchiato": "Macchiato",
+  "settings.customization.theme.Mocha": "Mocha",
+  "settings.customization.language": "Idioma",
+
+  "settings.cloaking": "Camuflagem",
+  "settings.cloaking.subtext": "Alterar a aparência da sua aba",
+  "settings.cloaking.updateCloak": "Alterar camuflagem",
+
+  "settings.credits": "Créditos",
+  "settings.credits.mochaandmacchiatothemes": "Temas Mocha & Macchiato",
+  "settings.credits.esTranslations": "Traduções espanholas",
+  "settings.credits.frTranslations": "Traduções francesas",
+  "settings.credits.jpTranslations": "Traduções japonesas",
+  "settings.credits.ptTranslations": "Traduções portuguesas",
+  "settings.credits.ruTranslations": "Traduções russas",
+  "settings.credits.zhTranslations": "Traduções chinesas"
+}

src/i18n/locale/ru.json

@@ -56,12 +56,15 @@
   "settings.customization.language": "Язык",
 
   "settings.cloaking": "Маскировка",
-  "settings.cloaking.subtext": "Измените внешний вид своей вкладки...",
+  "settings.cloaking.subtext": "Измените внешний вид своей вкладки",
   "settings.cloaking.updateCloak": "Обновить плащ",
 
   "settings.credits": "Кредиты",
   "settings.credits.mochaandmacchiatothemes": "Mocha и Macchiato Темы",
+  "settings.credits.esTranslations": "Испанские переводы",
+  "settings.credits.frTranslations": "Французские переводы",
   "settings.credits.jpTranslations": "Японские переводы",
+  "settings.credits.ptTranslations": "Португальские переводы",
   "settings.credits.ruTranslations": "Русские переводы",
   "settings.credits.zhTranslations": "Китайские переводы"
 }

src/i18n/locale/zh.json

@@ -56,12 +56,15 @@
   "settings.customization.language": "语言",
 
   "settings.cloaking": "隐形",
-  "settings.cloaking.subtext": "更改标签的外观...",
+  "settings.cloaking.subtext": "更改标签的外观",
   "settings.cloaking.updateCloak": "更新斗篷",
 
   "settings.credits": "致谢",
   "settings.credits.mochaandmacchiatothemes": "Mocha 和 Macchiato 主题",
+  "settings.credits.esTranslations": "西班牙语翻译",
+  "settings.credits.frTranslations": "法语翻译",
   "settings.credits.jpTranslations": "日语翻译",
+  "settings.credits.ptTranslations": "葡萄牙语翻译",
   "settings.credits.ruTranslations": "俄语翻译",
   "settings.credits.zhTranslations": "中文翻译"
 }

src/i18n/ui.ts

@@ -1,9 +1,10 @@
 import en from "./locale/en.json";
 import es from "./locale/es.json";
 import fr from "./locale/fr.json";
-import zh from "./locale/zh.json";
 import jp from "./locale/jp.json";
+import pt from "./locale/pt.json";
 import ru from "./locale/ru.json";
+import zh from "./locale/zh.json";
 
 export const defaultLang = "en";
 
@@ -11,7 +12,8 @@ export const ui = {
   en,
   es,
   fr,
-  zh,
   jp,
+  pt,
   ru,
+  zh,
 };

src/i18n/utils.ts

@@ -9,9 +9,8 @@ for (const lang in ui) {
   STATIC_PATHS.push({ params: { lang } });
 }
 
-
 function getLangFromUrl(url: URL) {
-  const [,lang] = url.pathname.split("/");
+  const [, lang] = url.pathname.split("/");
   if (lang in ui) return lang as keyof typeof ui;
   return defaultLang;
 }

src/layouts/Layout.astro

@@ -41,6 +41,7 @@ const { title, optionalPreloads } = Astro.props;
     <meta property="twitter:image" content="/favicon.svg" />
     <link rel="canonical" href={Astro.url.href} />
     <link rel="sitemap" href="/sitemap-index.xml" />
+    <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.6.0/css/all.css" />
     {
       optionalPreloads?.map((item) => {
         return <link rel="preload" href={item.href} as={item.as} />;
@@ -176,7 +177,7 @@ const { title, optionalPreloads } = Astro.props;
         text-align: center;
         font-weight: 400;
         font-size: 2.5rem;
-        margin-bottom: 0;
+        margin-bottom: 5px;
       }
       .title-desc {
         color: var(--text-color);

src/pages/[lang]/games.astro

@@ -62,9 +62,6 @@ export function getStaticPaths() {
 </script>
 
 <style>
-  .title-text {
-    margin-bottom: 5px;
-  }
   .search {
     display: flex;
     justify-content: center;

src/pages/[lang]/index.astro

@@ -177,7 +177,7 @@ export function getStaticPaths() {
     padding: 8px;
     position: relative;
     opacity: 0;
-    transition: .25s ease-in-out;
+    transition: 0.25s ease-in-out;
     text-align: center;
     font-size: 20px;
   }

src/pages/[lang]/marketplace.astro

@@ -21,7 +21,9 @@ export const getStaticPaths = () => {
           return (
             <div class="marketplace-item" data-slug={slug}>
               <img class="marketplace-item-image" src={item.image} alt={`${item.title} Logo`} />
-              <div class="marketplace-item-title">{item.title} v{item.version}</div>
+              <div class="marketplace-item-title">
+                {item.title} v{item.version}
+              </div>
               <div class="marketplace-item-desc">{item.description}</div>
               <button class="marketplace-btn btn-install" data-slug={slug} data-title={item.title}>
                 Install

src/pages/[lang]/settings.astro

@@ -20,10 +20,12 @@ export function getStaticPaths() {
     <div class="content-hidden">
       <div id="content-setting-tab-proxy">
         <h1 class="content-setting-header">{t("settings.proxy")}</h1>
+        <p class="content-setting-subtext">Change how the proxy behaves</p>
         <ProxyTab />
       </div>
       <div id="content-setting-tab-customization">
         <h1 class="content-setting-header">{t("settings.customization")}</h1>
+        <p class="content-setting-subtext">Customize your experience</p>
         <CustomizationTab />
       </div>
       <div id="content-setting-tab-cloaking">
@@ -33,6 +35,7 @@ export function getStaticPaths() {
       </div>
       <div id="content-setting-tab-credits">
         <h1 class="content-setting-header">{t("settings.credits")}</h1>
+        <p class="content-setting-subtext">Thank you to everyone who has contributed to Alu!</p>
         <CreditsTab />
       </div>
     </div>
@@ -40,17 +43,14 @@ export function getStaticPaths() {
     <div class="popup">
       <div class="tabs">
         <input type="radio" id="setting-tab-proxy" class="setting-tab" name="tab" checked="true" />
-        <label for="setting-tab-proxy">Proxy</label>
+        <label for="setting-tab-proxy"><i class="fa-solid fa-globe"></i> {t("settings.proxy")}</label>
         <input type="radio" id="setting-tab-customization" class="setting-tab" name="tab" />
-        <label for="setting-tab-customization">Customization</label>
+        <label for="setting-tab-customization"><i class="fa-solid fa-palette"></i> {t("settings.customization")}</label>
         <input type="radio" id="setting-tab-cloaking" class="setting-tab" name="tab" />
-        <label for="setting-tab-cloaking">Cloaking</label>
+        <label for="setting-tab-cloaking"><i class="fa-solid fa-hood-cloak"></i> {t("settings.cloaking")}</label>
         <input type="radio" id="setting-tab-credits" class="setting-tab" name="tab" />
-        <label for="setting-tab-credits">Credits</label>
+        <label for="setting-tab-credits"><i class="fa-solid fa-party-horn"></i> {t("settings.credits")}</label>
-        <div class="marker">
+        <div class="marker"></div>
-          <div id="top"></div>
-          <div id="bottom"></div>
-        </div>
       </div>
       <div id="current-content"></div>
     </div>
@@ -58,10 +58,10 @@ export function getStaticPaths() {
   <script>
     window.loadedContentStorage = {};
     window.currentlySelectedTab;
+    document.addEventListener("astro:before-swap", () => {
+      window.currentlySelectedTab = "";
+    });
     function settingsLoad() {
-      document.addEventListener("astro:before-swap", () => {
-        window.currentlySelectedTab = "";
-      });
       Array.from(document.getElementsByClassName("setting-tab")).forEach((tab) => {
         const contentToLoad = document.getElementById("content-" + tab.id);
         if (contentToLoad) {
@@ -112,15 +112,6 @@ export function getStaticPaths() {
       }
     }
 
-    // This should be taking in CustomEvent, but it's not working for some reason.
-    function determineListener(event: any) {
-      if (event.detail == "setting-tab-proxy") {
-        addDropdownListener();
-      } else if (event.detail == "setting-tab-customization") {
-        addDropdownListener();
-      }
-    }
-
     function closeOtherDropdowns(dropdownIDToExclude: string) {
       const dropdowns = document.getElementsByClassName("dropdown-menu") as HTMLCollectionOf<HTMLElement>;
       Array.from(dropdowns).forEach((dropdown) => {
@@ -214,7 +205,7 @@ export function getStaticPaths() {
       }
     }
 
-    document.addEventListener("setting-tabLoad", determineListener);
+    document.addEventListener("setting-tabLoad", addDropdownListener);
 
     loadContent("setting-tab-proxy");
 
@@ -253,8 +244,8 @@ export function getStaticPaths() {
               name: cloakName,
               icon: cloakIcon,
               isCustom: false,
-            }
+            },
-          // eeyikes, make this better later.
+            // eeyikes, make this better later.
           } as unknown as Alu.Key;
           Alu.store.set("cloak", cloakItem);
 
@@ -379,9 +370,8 @@ export function getStaticPaths() {
       window.location.href = `/${value}/settings`;
     }
     document.addEventListener("astro:after-swap", () => {
-      setTimeout(() => {
+      settingsLoad();
-        settingsLoad();
+      loadContent("setting-tab-proxy");
-      }, 200);
     });
     settingsLoad();
   </script>
@@ -391,8 +381,9 @@ export function getStaticPaths() {
     }
     #current-content {
       transition: opacity 250ms ease-in-out;
-      margin-left: 20px;
+      height: 100%;
-      height: 700px;
+      min-height: 600px;
+      padding: 20px;
     }
     .settings-container {
       display: flex;
@@ -406,6 +397,8 @@ export function getStaticPaths() {
     .content-setting-header {
       color: var(--text-color);
       font-weight: 400;
+      margin: 1rem 0 0;
+      text-decoration: underline;
     }
     .content-setting-subtext {
       font-size: 20px;
@@ -456,10 +449,8 @@ export function getStaticPaths() {
       opacity: 1;
     }
     .popup {
-      width: 98%;
+      width: 95%;
-      height: 80%;
       margin: 0 auto;
-      max-height: 500px;
       border-radius: 15px;
       box-sizing: border-box;
       background-color: var(--background-color);
@@ -474,77 +465,57 @@ export function getStaticPaths() {
       flex-direction: column;
       justify-content: space-around;
       position: relative;
-      gap: 40px;
+      gap: 5rem;
     }
-    @media (max-width: 1116px) {
+    .popup {
-      .popup {
+      flex-direction: column;
-        flex-direction: column;
+      min-height: 80%;
-        min-height: 80%;
+      max-height: 80%;
-        max-height: 80%;
-      }
-      .tabs {
-        flex-direction: row;
-        max-width: 100%;
-        max-height: 70px;
-        min-height: 70px;
-        gap: 0;
-        align-items: center;
-      }
-      label {
-        width: auto;
-        margin-left: 0;
-      }
     }
-    @media (max-width: 500px) {
+    .tabs {
+      flex-direction: row;
+      max-width: 100%;
+      max-height: 70px;
+      min-height: 70px;
+      gap: 0;
+      align-items: center;
+    }
+    label {
+      width: auto;
+      margin-left: 0;
+    }
+    @media (max-width: 625px) {
       label {
         font-size: 20px;
       }
     }
-    @media (max-width: 375px) {
+    @media (max-width: 500px) {
       label {
         font-size: 18px;
       }
     }
+    @media (max-width: 440px) {
+      label {
+        font-size: 16px;
+      }
+    }
+
+    @media (max-width: 400px) {
+      .fa-solid {
+        display: none;
+      }
+    }
     .setting {
       width: 140px;
     }
     .marker {
       position: absolute;
       width: 100%;
-      height: 200%;
+      height: 100%;
       display: flex;
       flex-direction: column;
-      top: calc(-100%);
-      left: 0;
       transition: transform 0.2s ease-in-out;
       background-color: var(--accent-color);
     }
-    .marker #bottom,
-    .marker #top {
-      background-color: var(--background-highlight);
-    }
-    .marker #top {
-      height: calc(50%);
-      margin-bottom: auto;
-      border-radius: 0 0 32px 0;
-    }
-    .marker #bottom {
-      height: calc(50% - 72px);
-      border-radius: 0 32px 0 0;
-    }
-    @media (min-width: 1116px) {
-      #setting-tab-proxy:checked ~ .marker {
-        transform: translateY(0%);
-      }
-      #setting-tab-customization:checked ~ .marker {
-        transform: translateY(14%);
-      }
-      #setting-tab-cloaking:checked ~ .marker {
-        transform: translateY(28%);
-      }
-      #setting-tab-credits:checked ~ .marker {
-        transform: translateY(42.5%);
-      }
-    }
   </style>
 </Layout>

src/pages/index.astro

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -47,6 +47,18 @@
         } else if (lang.includes("fr")) {
           Alu.store.set("lang", { value: "es" });
           redirect("/es/");
+        } else if (lang.includes("pt")) {
+          Alu.store.set("lang", { value: "pt" });
+          redirect("/pt/");
+        } else if (lang.includes("ru")) {
+          Alu.store.set("lang", { value: "ru" });
+          redirect("/ru/");
+        } else if (lang.includes("zh")) {
+          Alu.store.set("lang", { value: "zh" });
+          redirect("/zh/");
+        } else {
+          Alu.store.set("lang", { value: "en" });
+          redirect("/en/");
         }
       }
     </script>