Make settings look decent, could be better.

src/components/Switch.astro

@@ -0,0 +1,161 @@
+---
+const { inputID } = Astro.props;
+---
+
+<label class="switch">
+    <input id={inputID} checked="" type="checkbox">
+    <div class="slider">
+        <div class="circle">
+            <svg class="cross" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 365.696 365.696" y="0" x="0" height="6" width="6" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                <g>
+                    <path data-original="#000000" fill="currentColor" d="M243.188 182.86 356.32 69.726c12.5-12.5 12.5-32.766 0-45.247L341.238 9.398c-12.504-12.503-32.77-12.503-45.25 0L182.86 122.528 69.727 9.374c-12.5-12.5-32.766-12.5-45.247 0L9.375 24.457c-12.5 12.504-12.5 32.77 0 45.25l113.152 113.152L9.398 295.99c-12.503 12.503-12.503 32.769 0 45.25L24.48 356.32c12.5 12.5 32.766 12.5 45.247 0l113.132-113.132L295.99 356.32c12.503 12.5 32.769 12.5 45.25 0l15.081-15.082c12.5-12.504 12.5-32.77 0-45.25zm0 0"></path>
+                </g>
+            </svg>
+            <svg class="checkmark" xml:space="preserve" style="enable-background:new 0 0 512 512" viewBox="0 0 24 24" y="0" x="0" height="10" width="10" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                <g>
+                    <path class="" data-original="#000000" fill="currentColor" d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"></path>
+                </g>
+            </svg>
+        </div>
+    </div>
+</label>
+
+<style>
+.switch {
+  --switch-width: 46px;
+  --switch-height: 24px;
+  --switch-bg: rgb(131, 131, 131);
+  --switch-checked-bg: rgb(0, 218, 80);
+  --switch-offset: calc((var(--switch-height) - var(--circle-diameter)) / 2);
+  --switch-transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
+  --circle-diameter: 18px;
+  --circle-bg: #fff;
+  --circle-shadow: 1px 1px 2px rgba(146, 146, 146, 0.45);
+  --circle-checked-shadow: -1px 1px 2px rgba(163, 163, 163, 0.45);
+  --circle-transition: var(--switch-transition);
+  --icon-transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
+  --icon-cross-color: var(--switch-bg);
+  --icon-cross-size: 6px;
+  --icon-checkmark-color: var(--switch-checked-bg);
+  --icon-checkmark-size: 10px;
+  --effect-width: calc(var(--circle-diameter) / 2);
+  --effect-height: calc(var(--effect-width) / 2 - 1px);
+  --effect-bg: var(--circle-bg);
+  --effect-border-radius: 1px;
+  --effect-transition: all .2s ease-in-out;
+}
+
+.switch input {
+  display: none;
+}
+
+.switch {
+  display: inline-block;
+}
+
+.switch svg {
+  -webkit-transition: var(--icon-transition);
+  -o-transition: var(--icon-transition);
+  transition: var(--icon-transition);
+  position: absolute;
+  height: auto;
+}
+
+.switch .checkmark {
+  width: var(--icon-checkmark-size);
+  color: var(--icon-checkmark-color);
+  -webkit-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+}
+
+.switch .cross {
+  width: var(--icon-cross-size);
+  color: var(--icon-cross-color);
+}
+
+.slider {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  width: var(--switch-width);
+  height: var(--switch-height);
+  background: var(--switch-bg);
+  border-radius: 999px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  -webkit-transition: var(--switch-transition);
+  -o-transition: var(--switch-transition);
+  transition: var(--switch-transition);
+  cursor: pointer;
+}
+
+.circle {
+  width: var(--circle-diameter);
+  height: var(--circle-diameter);
+  background: var(--circle-bg);
+  border-radius: inherit;
+  -webkit-box-shadow: var(--circle-shadow);
+  box-shadow: var(--circle-shadow);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-transition: var(--circle-transition);
+  -o-transition: var(--circle-transition);
+  transition: var(--circle-transition);
+  z-index: 1;
+  position: absolute;
+  left: var(--switch-offset);
+}
+
+.slider::before {
+  content: "";
+  position: absolute;
+  width: var(--effect-width);
+  height: var(--effect-height);
+  left: calc(var(--switch-offset) + (var(--effect-width) / 2));
+  background: var(--effect-bg);
+  border-radius: var(--effect-border-radius);
+  -webkit-transition: var(--effect-transition);
+  -o-transition: var(--effect-transition);
+  transition: var(--effect-transition);
+}
+
+/* actions */
+
+.switch input:checked+.slider {
+  background: var(--switch-checked-bg);
+}
+
+.switch input:checked+.slider .checkmark {
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+
+.switch input:checked+.slider .cross {
+  -webkit-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+}
+
+.switch input:checked+.slider::before {
+  left: calc(100% - var(--effect-width) - (var(--effect-width) / 2) - var(--switch-offset));
+}
+
+.switch input:checked+.slider .circle {
+  left: calc(100% - var(--circle-diameter) - var(--switch-offset));
+  -webkit-box-shadow: var(--circle-checked-shadow);
+  box-shadow: var(--circle-checked-shadow);
+}
+</style>

src/components/TabList.astro

@@ -0,0 +1,90 @@
+<div class="popup">
+    <div class="tabs">
+          <input type="radio" id="tab1" name="tab" checked="true">        
+        <label for="tab1">Proxy</label>
+          <input type="radio" id="tab2" name="tab">
+        <label for="tab2">Customization</label>
+          <input type="radio" id="tab3" name="tab">
+        <label for="tab3">Cloaking</label>
+          <input type="radio" id="tab4" name="tab">
+        <label for="tab4">Credits</label>
+        <div class="marker">
+           <div id="top"></div>
+           <div id="bottom"></div>
+        </div>
+    </div>
+    
+  </div>
+
+<style>
+label{
+  font-size: 24px;
+  font-weight: 700; 
+  cursor: pointer; 
+  color: #d8d8d8; 
+  opacity: .4; 
+  transition: opacity .4s ease-in-out;
+  display: block; 
+  width: calc(100% - 48px) ;
+  text-align: right; 
+  z-index: 100; 
+  user-select: none;
+}
+input[type="radio"]{
+  display: none;
+  width: 0;
+}
+label:hover, input[type="radio"]:checked+label {
+  opacity: 1; 
+}
+.popup{
+  width: 80%;
+  height: 80%;
+  min-height: 400px; 
+  max-height: 400px; 
+  border-radius: 48px;
+  box-sizing: border-box; 
+  border: 16px solid #2b2b2b;
+  background-color: #1b1b1b;
+  overflow: hidden;
+  box-shadow: 16px 16px 48px #2e364330;
+  display: flex;
+  align-self: center;
+}
+.tabs{
+  width: 100%;
+  max-width: 240px;
+  height: 100%;
+  display: flex;
+  flex-direction: column; 
+  justify-content: space-around; 
+  position: relative;
+}
+.marker{
+  position: absolute; 
+  width: 100%;
+  height: 200%;
+  display: flex; 
+  flex-direction: column;
+  top: calc(-100% );
+  left: 0;
+  transition: transform .2s ease-in-out; 
+}
+.marker #bottom, .marker #top{
+  background-color: #383838;
+  box-shadow: 32px 32px 48px #2e364315; 
+}
+.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; 
+}
+#tab1:checked ~ .marker{transform: translateY(calc(calc(7% / 6) * 1));}
+#tab2:checked ~ .marker{transform: translateY(calc(calc(80% / 6) * 1));}
+#tab3:checked ~ .marker{transform: translateY(calc(calc(78% / 6) * 2));}
+#tab4:checked ~ .marker{transform: translateY(calc(calc(77% / 6) * 3));}
+</style>

src/layouts/Layout.astro

@@ -1,5 +1,4 @@
 ---
-import { fade } from 'astro/virtual-modules/transitions.js';
 import { ViewTransitions } from 'astro:transitions';
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';

src/pages/settings.astro

@@ -0,0 +1,29 @@
+---
+import Switch from "../components/Switch.astro";
+import TabList from "../components/TabList.astro";
+import Layout from "../layouts/Layout.astro";
+
+---
+
+<Layout title="Settings | Alu">
+    <h1 class="title-text">Settings</h1>
+    <TabList></TabList>
+
+</Layout>
+
+<style>
+    .switch-group {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .switch-group-item {
+        display: flex;
+        justify-items: center;
+        align-items: center;
+        gap: 10px;
+    }
+    .switch-title {
+        color: white;
+    }
+</style>