Get a basic credits page set up, will expand more later

src/components/SettingsContent/CloakingTab.astro

@@ -22,8 +22,6 @@ import Input from "../Input.astro"
             })}
         </div>
         <div class="cloak-custom-override">
-            <!-- <input type="text" id="cloak-custom-name" class="cloak-custom-input" placeholder="Custom Name"/>
-            <input type="text" id="cloak-custom-favicon" class="cloak-custom-input" placeholder="Custom Favicon URL"/> -->
             <Input inputName="cloak-custom-name" placeholder="Custom Name" height="30px" />
             <Input inputName="cloak-custom-favicon" placeholder="Custom Favicon" height="30px" />
             <button id="cloak-custom-button">Update Cloak</button>

src/components/SettingsContent/CreditsTab.astro

@@ -0,0 +1,27 @@
+---
+import { getLangFromUrl, useTranslations } from "../../i18n/utils"
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+
+---
+
+<div class="settings-container">
+
+    <div class="credits-container">
+        <p class="credit-item">{t("ultraviolet")} - <a href="https://titaniumnetwork.org/">Titanium Network</a></p>
+        <p class="credit-item">{t("settings.credits.japaneseTranslations")} - <a href="https://wearr.dev">wearr</a></p>
+        <p class="credit-item">{t("settings.credits.mochaandmacchiatothemes")} - <a href="">Catppuccin</a></p>
+    </div>
+
+</div>
+
+<style>
+    .credit-item {
+        color: var(--text-color);
+        font-size: 18px;
+    }
+    .credit-item > a {
+        color: var(--text-color);
+        font-weight: bold;
+    }
+</style>

src/components/SettingsContent/ProxyTab.astro

@@ -8,7 +8,7 @@ const t = useTranslations(lang);
 
 const proxyList = [
   { "name": t("settings.proxy.auto"), "value": "auto" },
-  { "name": "Ultraviolet", "value": "ultraviolet" },
+  { "name": t("ultraviolet"), "value": "ultraviolet" },
   { "name": "Rammerhead", "value": "rammerhead" },
   { "name": "Dynamic", "value": "dynamic" }
 ]

src/components/SettingsTablist.astro

@@ -4,6 +4,7 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
 
 import { getLangFromUrl, useTranslations } from "../i18n/utils"
 import CloakingTab from "./SettingsContent/CloakingTab.astro";
+import CreditsTab from "./SettingsContent/CreditsTab.astro";
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
 ---
@@ -20,12 +21,12 @@ const t = useTranslations(lang);
     </div>
     <div id="content-setting-tab-cloaking">
         <h1 class="content-setting-header">{t("settings.cloaking")}</h1>
-        <p class="content-setting-subtext">Change how your tab looks...</p>
+        <p class="content-setting-subtext">{t("settings.cloaking.subtext")}</p>
         <CloakingTab />
     </div>
     <div id="content-setting-tab-credits">
-        <h1 class="content-setting-header">Credits</h1>
-        <p style="color: white;">Credits..</p>
+        <h1 class="content-setting-header">{t("settings.credits")}</h1>
+        <CreditsTab />
     </div>
 </div>
 

src/i18n/en.json

@@ -1,4 +1,6 @@
 {
+    "ultraviolet": "Ultraviolet",
+
     "pages.home": "Home | Alu",
     "pages.games": "Games | Alu",
     "pages.settings": "Settings | Alu",
@@ -37,5 +39,10 @@
     "settings.customization.theme.Mocha": "Mocha",
     "settings.customization.language": "Language",
 
-    "settings.cloaking": "Cloaking"
+    "settings.cloaking": "Cloaking",
+    "settings.cloaking.subtext": "Change how your tab looks...",
+
+    "settings.credits": "Credits",
+    "settings.credits.mochaandmacchiatothemes": "Mocha & Macchiato Themes",
+    "settings.credits.japaneseTranslations": "Japanese Translations"
 }

src/i18n/jp.json

@@ -1,4 +1,6 @@
 {
+    "ultraviolet": "ウルトラバイオレット",
+    
     "pages.home": "ホーム | アルー",
     "pages.games": "ゲーム | アルー",
     "pages.settings": "設定 | アルー",
@@ -35,5 +37,10 @@
     "settings.customization.theme.Mocha": "モカ",
     "settings.customization.language": "言語",
     
-    "settings.cloaking": "クローキング"
+    "settings.cloaking": "クローキング",
+    "settings.cloaking.subtext": "タブの外観を変更します...",
+
+    "settings.credits": "クレジット",
+    "settings.credits.mochaandmacchiatothemes": "モカとマキアートテーマ",
+    "settings.credits.japaneseTranslations": "日本語翻訳"
 }