-
+
+
+
-
\ No newline at end of file
+ }
+
diff --git a/src/components/GameItem.astro b/src/components/GameItem.astro
index a8d5f8f..10f3180 100644
--- a/src/components/GameItem.astro
+++ b/src/components/GameItem.astro
@@ -3,27 +3,30 @@ const { name, image, slugName } = Astro.props;
---
- 
-
+
\ No newline at end of file
+ }
+
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 40be545..6f15a67 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,29 +1,29 @@
---
- import { getLangFromUrl, useTranslations } from "../i18n/utils"
- const lang = getLangFromUrl(Astro.url);
- const t = useTranslations(lang);
+import { getLangFromUrl, useTranslations } from "../i18n/utils";
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
---
{name}
+{name}
-
diff --git a/src/components/SettingsTablist.astro b/src/components/SettingsTablist.astro
index b0d5c50..4b45795 100644
--- a/src/components/SettingsTablist.astro
+++ b/src/components/SettingsTablist.astro
@@ -2,7 +2,7 @@
import ProxyTab from "./SettingsContent/ProxyTab.astro";
import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
-import { getLangFromUrl, useTranslations } from "../i18n/utils"
+import { getLangFromUrl, useTranslations } from "../i18n/utils";
import CloakingTab from "./SettingsContent/CloakingTab.astro";
import CreditsTab from "./SettingsContent/CreditsTab.astro";
const lang = getLangFromUrl(Astro.url);
@@ -10,446 +10,562 @@ const t = useTranslations(lang);
---
-
\ No newline at end of file
+ }
+
diff --git a/src/components/Input.astro b/src/components/Input.astro
index c7b8099..0dee668 100644
--- a/src/components/Input.astro
+++ b/src/components/Input.astro
@@ -1,31 +1,34 @@
---
-const { type, inputName, defaultTextContent, height, placeholder } = Astro.props;
+const { inputName, defaultTextContent, height, placeholder } = Astro.props;
-// typescript brainrot
-type HTMLInputTypeAttribute = "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week";
interface Props {
- type?: HTMLInputTypeAttribute;
- inputName: string;
- defaultTextContent?: string;
- height: string;
- placeholder?: string;
+ inputName: string;
+ defaultTextContent?: string;
+ height: string;
+ placeholder?: string;
}
---
-
+
\ No newline at end of file
+ input {
+ width: 100%;
+ border: 2px solid var(--background-highlight);
+ border-radius: 10px;
+ background-color: var(--accent-color);
+ color: var(--text-color);
+ transition: 0.1s ease-in-out;
+ }
+ input:focus {
+ outline: none;
+ border: 2px solid var(--text-color);
+ }
+
diff --git a/src/components/SettingsContent/CloakingTab.astro b/src/components/SettingsContent/CloakingTab.astro
index 1bac17f..7520d76 100644
--- a/src/components/SettingsContent/CloakingTab.astro
+++ b/src/components/SettingsContent/CloakingTab.astro
@@ -1,91 +1,133 @@
---
-import Input from "../Input.astro"
-
-
- const presetCloaks = [
- {"cloakTitle": "None", "favicon": "/favicon.png"},
- {"cloakTitle": "Google", "favicon": "https://t1.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://google.com&size=128"},
- {"cloakTitle": "Instructure", "favicon": "https://du11hjcvx0uqb.cloudfront.net/dist/images/favicon-e10d657a73.ico"},
- {"cloakTitle": "Google Classroom", "favicon": "https://ssl.gstatic.com/classroom/ic_product_classroom_144.png"},
- {"cloakTitle": "Classlink", "favicon": "https://cdn.classlink.com/production/launchpad/resources/images/favicon/favicon-32x32.png"},
- {"cloakTitle": "Google Drive", "favicon": "https://ssl.gstatic.com/docs/doclist/images/drive_2022q3_32dp.png"},
- {"cloakTitle": "Schoology", "favicon": "https://asset-cdn.schoology.com/sites/all/themes/schoology_theme/favicon.ico"}
- ]
+import Input from "../Input.astro";
+const presetCloaks = [
+ { cloakTitle: "None", favicon: "/favicon.png" },
+ {
+ cloakTitle: "Google",
+ favicon:
+ "https://t1.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://google.com&size=128",
+ },
+ {
+ cloakTitle: "Instructure",
+ favicon:
+ "https://du11hjcvx0uqb.cloudfront.net/dist/images/favicon-e10d657a73.ico",
+ },
+ {
+ cloakTitle: "Google Classroom",
+ favicon: "https://ssl.gstatic.com/classroom/ic_product_classroom_144.png",
+ },
+ {
+ cloakTitle: "Classlink",
+ favicon:
+ "https://cdn.classlink.com/production/launchpad/resources/images/favicon/favicon-32x32.png",
+ },
+ {
+ cloakTitle: "Google Drive",
+ favicon:
+ "https://ssl.gstatic.com/docs/doclist/images/drive_2022q3_32dp.png",
+ },
+ {
+ cloakTitle: "Schoology",
+ favicon:
+ "https://asset-cdn.schoology.com/sites/all/themes/schoology_theme/favicon.ico",
+ },
+];
---
- {t("nav.brand")}
-
-
+
+
+
+
-
diff --git a/src/components/SettingsContent/ProxyTab.astro b/src/components/SettingsContent/ProxyTab.astro
index 3bc924b..db40a37 100644
--- a/src/components/SettingsContent/ProxyTab.astro
+++ b/src/components/SettingsContent/ProxyTab.astro
@@ -1,51 +1,74 @@
---
-import Input from "../Input.astro"
-import Dropdown from "../Dropdown.astro"
+import Input from "../Input.astro";
+import Dropdown from "../Dropdown.astro";
-import { getLangFromUrl, useTranslations } from "../../i18n/utils"
+import { getLangFromUrl, useTranslations } from "../../i18n/utils";
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
const proxyList = [
- { "name": t("settings.proxy.auto"), "value": "auto" },
- { "name": t("ultraviolet"), "value": "ultraviolet" },
- { "name": "Rammerhead", "value": "rammerhead" },
- { "name": "Dynamic", "value": "dynamic" }
-]
+ { name: t("settings.proxy.auto"), value: "auto" },
+ { name: t("ultraviolet"), value: "ultraviolet" },
+ { name: "Rammerhead", value: "rammerhead" },
+ { name: "Dynamic", value: "dynamic" },
+];
const searchEngineList = [
- { "name": "Google", "value": "google" },
- { "name": "Bing", "value": "bing" },
- { "name": "Brave", "value": "brave" },
- { "name": "Searx", "value": "searx" }
-]
+ { name: "Google", value: "google" },
+ { name: "Bing", value: "bing" },
+ { name: "Brave", value: "brave" },
+ { name: "Searx", value: "searx" },
+];
const openPageWith = [
- { "name": t("settings.proxy.openPageWith.embed"), "value": "embed" },
- { "name": "About:Blank", "value": "about:blank" },
- { "name": t("settings.proxy.openPageWith.newTab"), "value": "newTab" },
-]
+ { name: t("settings.proxy.openPageWith.embed"), value: "embed" },
+ { name: "About:Blank", value: "about:blank" },
+ { name: t("settings.proxy.openPageWith.newTab"), value: "newTab" },
+];
---
-
\ No newline at end of file
+ .cloak-custom-override {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 50%;
+ }
+ #cloak-custom-button {
+ margin-top: 6px;
+ height: 25px;
+ border-radius: 10px;
+ background-color: var(--accent-color-brighter);
+ border: 0;
+ color: var(--text-color);
+ cursor: pointer;
+ }
+ .cloak-custom-input {
+ height: 40px;
+ width: 100%;
+ border: 2px solid var(--accent-color-brighter);
+ border-radius: 10px;
+ background-color: #1b1b1b;
+ color: var(--text-color);
+ transition: 0.1s ease-in-out;
+ }
+ .cloak-custom-input:focus {
+ outline: none;
+ border: 2px solid var(--text-color);
+ }
+
diff --git a/src/components/SettingsContent/CreditsTab.astro b/src/components/SettingsContent/CreditsTab.astro
index 3d81f9e..edf56f4 100644
--- a/src/components/SettingsContent/CreditsTab.astro
+++ b/src/components/SettingsContent/CreditsTab.astro
@@ -1,27 +1,35 @@
---
-import { getLangFromUrl, useTranslations } from "../../i18n/utils"
+import { getLangFromUrl, useTranslations } from "../../i18n/utils";
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
-
---
- {presetCloaks.map((cloak: any) => {
- return 
- })}
-
-
-
-
-
-
+
+
+ {
+ presetCloaks.map((cloak: any) => {
+ return (
+
+
+
+
+ );
+ })
+ }
+
+
+
+
+
-
-
\ No newline at end of file
+ .credit-item {
+ color: var(--text-color);
+ font-size: 18px;
+ }
+ .credit-item > a {
+ color: var(--text-color);
+ font-weight: bold;
+ }
+
diff --git a/src/components/SettingsContent/CustomizationTab.astro b/src/components/SettingsContent/CustomizationTab.astro
index 91d3483..f690eef 100644
--- a/src/components/SettingsContent/CustomizationTab.astro
+++ b/src/components/SettingsContent/CustomizationTab.astro
@@ -1,30 +1,40 @@
---
-import Dropdown from "../Dropdown.astro"
+import Dropdown from "../Dropdown.astro";
-import { getLangFromUrl, useTranslations } from "../../i18n/utils"
+import { getLangFromUrl, useTranslations } from "../../i18n/utils";
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
const themeList = [
- {"name": t("settings.customization.theme.Alu"), "value": "alu"},
- {"name": t("settings.customization.theme.Macchiato"), "value": "macchiato"},
- {"name": t("settings.customization.theme.Mocha"), "value": "mocha"},
- {"name": "Rosé Pine", "value": "rose_pine"}
-]
+ { name: t("settings.customization.theme.Alu"), value: "alu" },
+ { name: t("settings.customization.theme.Macchiato"), value: "macchiato" },
+ { name: t("settings.customization.theme.Mocha"), value: "mocha" },
+ { name: "Rosé Pine", value: "rose_pine" },
+];
const languageList = [
- {"name": "English", "value": "en"},
- {"name": "日本語", "value": "jp"}
-]
+ { name: "English", value: "en" },
+ { name: "日本語", value: "jp" },
+];
---
-
-
+ {t("ultraviolet")} - Titanium Network
-{t("settings.credits.japaneseTranslations")} - wearr
-{t("settings.credits.mochaandmacchiatothemes")} - Catppuccin
-
+
+ {t("ultraviolet")} - Titanium Network +
++ {t("settings.credits.japaneseTranslations")} - wearr +
++ {t("settings.credits.mochaandmacchiatothemes")} - Catppuccin +
+
-
\ No newline at end of file
+
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
-
-
\ No newline at end of file
+
+
+
-
-
- {t("settings.proxy")}
-
-
- {t("settings.customization")}
-
-
- {t("settings.cloaking")}
-{t("settings.cloaking.subtext")}
-
-
+ {t("settings.credits")}
-
+
+ {t("settings.proxy")}
+
+
+ {t("settings.customization")}
+
+
+ {t("settings.cloaking")}
+{t("settings.cloaking.subtext")}
+
+
{t("settings.credits")}
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
\ No newline at end of file
+ .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: 98%;
+ height: 80%;
+ margin: 0 auto;
+ min-height: 400px;
+ max-height: 400px;
+ border-radius: 48px;
+ box-sizing: border-box;
+ background-color: var(--background-color);
+ overflow: hidden;
+ display: flex;
+ align-self: center;
+ }
+ .tabs {
+ width: 100%;
+ max-width: 240px;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ position: relative;
+ gap: 25px;
+ }
+ .marker {
+ position: absolute;
+ width: 100%;
+ height: 200%;
+ 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;
+ }
+ #setting-tab-proxy:checked ~ .marker {
+ transform: translateY(0%);
+ }
+ #setting-tab-customization:checked ~ .marker {
+ transform: translateY(13.5%);
+ }
+ #setting-tab-cloaking:checked ~ .marker {
+ transform: translateY(27%);
+ }
+ #setting-tab-credits:checked ~ .marker {
+ transform: translateY(41%);
+ }
+
diff --git a/src/components/Switch.astro b/src/components/Switch.astro
index 2850465..3101999 100644
--- a/src/components/Switch.astro
+++ b/src/components/Switch.astro
@@ -3,159 +3,193 @@ const { inputID } = Astro.props;
---
+
+