Nearly completely refactor how the settings UI looks, and ensure mobile responsiveness. Slightly clean up code and run prettier.
This commit is contained in:
wearrrrr
parent
92f23fb7c6
commit
8332c191d2
24 changed files with 2082 additions and 1957 deletions
|
|
@ -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?
|
||||
|
||||
|
|
|
|||
3629
pnpm-lock.yaml
generated
3629
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
15
public/sw.js
15
public/sw.js
|
|
@ -7,11 +7,16 @@ const ww = new WorkerWare({
|
|||
debug: false,
|
||||
});
|
||||
|
||||
// uv.config.inject = [{
|
||||
// "host": "discord.com",
|
||||
// "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>`,
|
||||
// "injectTo": "head",
|
||||
// }]
|
||||
async function getVencordJS() {
|
||||
const vencordJS = await fetch("/marketplace/vencord/browser.js");
|
||||
self.vencordJS = await vencordJS.text();
|
||||
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 {
|
||||
|
|
|
|||
14
src/alu.d.ts
vendored
14
src/alu.d.ts
vendored
|
|
@ -5,11 +5,15 @@ export declare global {
|
|||
type DefaultKeys = {
|
||||
[key: string]: AluKey;
|
||||
};
|
||||
type Key = Record<string?, string | {
|
||||
name: string;
|
||||
icon: string;
|
||||
isCustom: boolean;
|
||||
}>;
|
||||
type Key = Record<
|
||||
string?,
|
||||
| string
|
||||
| {
|
||||
name: string;
|
||||
icon: string;
|
||||
isCustom: boolean;
|
||||
}
|
||||
>;
|
||||
type ValidStoreKeys = "proxy" | "search" | "openpage" | "wisp" | "bareUrl" | "transport" | "searxng" | "theme" | "lang" | "cloak";
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
{t("ultraviolet")} - <Link href="https://titaniumnetwork.org/" newTab>Titanium Network</Link>
|
||||
</p>
|
||||
<p class="credit-item">
|
||||
{t("settings.credits.jpTranslations")} - <Link href="https://wearr.dev" newTab>wearr</Link>
|
||||
</p>
|
||||
<p class="credit-item">
|
||||
{t("settings.credits.ruTranslations")} - <Link href="https://3kh0.net" newTab>Echo</Link>
|
||||
</p>
|
||||
<p class="credit-item">
|
||||
{t("settings.credits.zhTranslations")} - <Link href="https://3kh0.net" newTab>Echo</Link>
|
||||
</p>
|
||||
<p class="credit-item">
|
||||
French Translations - <Link href="https://github.com/notboeing747" newTab>notboeing747</Link>
|
||||
</p>
|
||||
<!-- todo: finish localization for this page -->
|
||||
<p class="credit-item">
|
||||
{t("settings.credits.mochaandmacchiatothemes")} - <Link href="https://github.com/catppuccin/catppuccin" newTab>Catppuccin</Link>
|
||||
</p>
|
||||
<p class="credit-item">
|
||||
Wisp Server - <Link newTab href="https://github.com/MercuryWorkshop/wisp-server-node">Mercury Workshop</Link>
|
||||
</p>
|
||||
<p class="credit-item">
|
||||
Rosé Pine Theme - <Link href="https://rosepinetheme.com/" newTab>Rosé Pine</Link>
|
||||
</p>
|
||||
<Card title={t("ultraviolet")}>
|
||||
<Link href="https://titaniumnetwork.org/" newTab>Titanium Network</Link>
|
||||
</Card>
|
||||
<Card title={t("settings.credits.esTranslations")}>
|
||||
<Link href="https://github.com/builtbyvys/" newTab>vys</Link>
|
||||
</Card>
|
||||
<Card title={t("settings.credits.frTranslations")}>
|
||||
<Link href="https://github.com/notboeing747">notboeing747</Link>
|
||||
</Card>
|
||||
<Card title={t("settings.credits.jpTranslations")}>
|
||||
<Link href="https://wearr.dev" newTab>wearr</Link>
|
||||
</Card>
|
||||
<Card title={t("settings.credits.ptTranslations")}> kersosina_ </Card>
|
||||
<Card title={t("settings.credits.ruTranslations")}>
|
||||
<Link href="https://3kh0.net" newTab>Echo</Link>
|
||||
</Card>
|
||||
<Card title={t("settings.credits.zhTranslations")}>
|
||||
<Link href="https://3kh0.net" newTab>Echo</Link>
|
||||
</Card>
|
||||
<Card title={t("settings.credits.mochaandmacchiatothemes")}>
|
||||
<Link href="https://github.com/catppuccin/catppuccin" newTab>Catppuccin</Link>
|
||||
</Card>
|
||||
<Card title="Wisp Server">
|
||||
<Link href="https://github.com/MercuryWorkshop/wisp-server-node" newTab>Wisp Server</Link>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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" },
|
||||
];
|
||||
---
|
||||
|
||||
|
|
|
|||
34
src/components/UI/Card.astro
Normal file
34
src/components/UI/Card.astro
Normal file
|
|
@ -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>
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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": "中国語翻訳"
|
||||
}
|
||||
|
|
|
|||
70
src/i18n/locale/pt.json
Normal file
70
src/i18n/locale/pt.json
Normal file
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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": "Китайские переводы"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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": "中文翻译"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -62,9 +62,6 @@ export function getStaticPaths() {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.title-text {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.search {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<div class="marker">
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
</div>
|
||||
<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>
|
||||
|
|
@ -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();
|
||||
}, 200);
|
||||
settingsLoad();
|
||||
loadContent("setting-tab-proxy");
|
||||
});
|
||||
settingsLoad();
|
||||
</script>
|
||||
|
|
@ -391,8 +381,9 @@ export function getStaticPaths() {
|
|||
}
|
||||
#current-content {
|
||||
transition: opacity 250ms ease-in-out;
|
||||
margin-left: 20px;
|
||||
height: 700px;
|
||||
height: 100%;
|
||||
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%;
|
||||
height: 80%;
|
||||
width: 95%;
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
.popup {
|
||||
flex-direction: column;
|
||||
min-height: 80%;
|
||||
max-height: 80%;
|
||||
}
|
||||
@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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue