Revela-v4/src/pages/[lang]/settings.astro

---
import ProxyTab from "@components/SettingsContent/ProxyTab.astro";
import CustomizationTab from "@components/SettingsContent/CustomizationTab.astro";
import CloakingTab from "@components/SettingsContent/CloakingTab.astro";
import CreditsTab from "@components/SettingsContent/CreditsTab.astro";
import Layout from "src/layouts/Layout.astro";
import { STATIC_PATHS, i18n } from "@i18n/utils";

const lang = i18n.getLangFromUrl(Astro.url);
const t = i18n.useTranslations(lang);

export function getStaticPaths() {
  return STATIC_PATHS;
}
---

<Layout title={t("pages.settings")} optionalStylesheets={["https://site-assets.fontawesome.com/releases/v6.6.0/css/all.css"]}>
  <main id="main-content">
    <h1 class="title-text">{t("settings.title")}</h1>
    <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">
        <h1 class="content-setting-header">{t("settings.cloaking")}</h1>
        <p class="content-setting-subtext">{t("settings.cloaking.subtext")}</p>
        <CloakingTab />
      </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>

    <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"><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"><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"><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"><i class="fa-solid fa-party-horn"></i> {t("settings.credits")}</label>
        <div class="marker"></div>
      </div>
      <div id="current-content"></div>
    </div>
  </main>
  <script src="@components/ts/settings.ts"></script>
  <style is:global lang="scss">
    .content-hidden{
      display: none;
    }
    #current-content {
      transition: opacity 250ms ease-in-out;
      height: 100%;
      min-height: 600px;
      padding: 20px;
    }
    .settings-container {
      display: flex;
      gap: 20px;
      position: relative;
      z-index: 2;
      flex-wrap: wrap;
      row-gap: 5px;
    }

    .content-setting-header {
      color: var(--text-color);
      font-weight: 400;
      margin: 1rem 0 0;
      text-decoration: underline;
    }
    .content-setting-subtext {
      font-size: 20px;
      color: var(--text-color-accent);
    }

    .setting-label {
      color: var(--text-color);
      font-size: 18px;
      font-weight: 400;
      /* annoying stuff with label elements. */
      display: block;
      opacity: 1;
      margin-block: 1em;
      margin-inline: 0;
      user-select: none;
      width: 100%;
      cursor: auto;
      margin-bottom: 5px;
    }

    .setting__searxng-url {
      margin-top: 10px;
      opacity: 0;
      transition: opacity 250ms ease-in-out;
    }
    label {
      font-size: 24px;
      font-weight: 700;
      cursor: pointer;
      color: #d8d8d8;
      opacity: 0.6;
      transition: opacity 0.4s ease-in-out;
      display: block;
      width: calc(100% - 48px);
      text-align: right;
      z-index: 100;
      user-select: none;
      text-align: start;
      margin-left: 20px;
    }
    input[type="radio"] {
      display: none;
      width: 0;
    }
    label:hover,
    input[type="radio"]:checked + label {
      opacity: 1;
    }
    .popup {
      width: 95%;
      margin: 0 auto;
      border-radius: 15px;
      box-sizing: border-box;
      background-color: var(--background-color);
      filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
      overflow: hidden;
      display: flex;
      align-self: center;
    }
    .tabs {
      width: 100%;
      max-width: 240px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      position: relative;
      gap: 5rem;
    }
    .popup {
      flex-direction: column;
      min-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: 625px) {
      label {
        font-size: 20px;
      }
    }
    @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: 100%;
      display: flex;
      flex-direction: column;
      transition: transform 0.2s ease-in-out;
      background-color: var(--accent-color);
    }
  </style>
</Layout>