From ba1519a5a5cf1017bc940173349e4e34e94ac4b8 Mon Sep 17 00:00:00 2001
From: BluePotato102 <bluepotato102@noreply.codeberg.org>
Date: Sun, 10 Sep 2023 16:24:55 -0500
Subject: [PATCH] 20% of a settings page

---
 css/style.css | 208 +++++++++++++++++++++++++++++++++++++++++++++++++-
 index.html    |  23 +++++-
 2 files changed, 229 insertions(+), 2 deletions(-)

diff --git a/css/style.css b/css/style.css
index 3317a503..f4757d89 100644
--- a/css/style.css
+++ b/css/style.css
@@ -11,6 +11,30 @@
     --scroll-track-color: #111;
     --font-color: #dcddde;
     --font-family: 'Assistant', sans-serif;
+
+
+	--displacement: -0.1rem;
+	--tremble: -10deg;
+	--trembleF: 5deg;
+
+	--iPos: 50%;
+	--bPos: -75%;
+	--fPos: -50%;
+
+	--time: 430ms;
+
+
+  --input-color: #99A3BA;
+  --input-border: #CDD9ED;
+  --input-background: #fff;
+  --input-placeholder: #CBD1DC;
+  --input-border-focus: #275EFE;
+  --group-color: var(--input-color);
+  --group-border: var(--input-border);
+  --group-background: #EEF4FF;
+  --group-color-focus: #fff;
+  --group-border-focus: var(--input-border-focus);
+  --group-background-focus: #678EFE;
 }
 
 ::-webkit-scrollbar {
@@ -99,6 +123,14 @@ body.noscript {
     top: 2.5%;
 }
 
+.setting-bg {
+    width: 75%;
+    background-color: var(--games-color);
+    height: 70vh;
+    overflow-y: scroll;
+    text-align: center;
+}
+
 #title {
     z-index: 50;
     position: relative;
@@ -169,6 +201,7 @@ body.noscript {
     width: 20%;
 }
 
+
 logo img {
     z-index: 50;
     position: fixed;
@@ -255,4 +288,177 @@ img[alt="Proxy Icon"] {
     margin: 0;
     padding: 0;
     border: 0;
-}
\ No newline at end of file
+}
+
+/*Toggle switch*/
+
+
+.switch {
+    margin: auto;
+    display: inline-block;
+  }
+  
+.switch__wrapper p {
+    display: inline-block;
+}
+
+.switch__wrapper {
+    text-align: center;
+    margin: 5%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 4rem;
+    height: 2rem;
+    border: 2px solid red;
+    border-radius: 99rem;
+    transform-origin: left center;
+    animation: checked__wrapper var(--time) ease-in forwards;
+    mix-blend-mode: lighten;
+  }
+.switch__wrapper::before, .switch__wrapper::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border: 2px solid #000;
+    border-radius: inherit;
+    transform-origin: inherit;
+    animation: inherit;
+    mix-blend-mode: inherit;
+  }
+.switch__wrapper::before {
+    --tremble: -12deg;
+    --trembleF: -7deg;
+    border-color: lime;
+    animation-delay: 50ms;
+  }
+.switch__wrapper::after {
+    --tremble: -8deg;
+    --trembleF: -4deg;
+    border-color: blue;
+    animation-delay: 75ms;
+  }
+.switch__toggle {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 99rem;
+    box-shadow: inset 0 0 0 2px #fff;
+    transform-origin: inherit;
+    animation: checked__toggle var(--time) ease-in forwards;
+  }
+input:active + .switch__wrapper .switch__toggle {
+    width: 1.6rem;
+  }
+input:checked + .switch__wrapper {
+    transform-origin: right center;
+    animation-name: checked__wrapper--r;
+  }
+input:checked + .switch__wrapper .switch__toggle {
+    background: #fff;
+    animation-name: checked__toggle--r;
+  }
+  @keyframes checked__wrapper {
+    0%, 45%, 100% {
+      transform: rotateY(0deg);
+    }
+    48% {
+      transform: translateX(var(--displacement));
+      filter: blur(0);
+    }
+    55% {
+      transform: rotateZ(var(--tremble));
+      filter: blur(1px);
+    }
+    65% {
+      transform: rotateZ(var(--trembleF));
+    }
+  }
+  @keyframes checked__wrapper--r {
+    0%, 45%, 100% {
+      transform: rotateY(0deg);
+    }
+    48% {
+      transform: translateX(calc(-1 * var(--displacement)));
+      filter: blur(0);
+    }
+    55% {
+      transform: rotateZ(calc(-1 * var(--tremble)));
+      filter: blur(1px);
+    }
+    65% {
+      transform: rotateZ(calc(-1 * var(--trembleF)));
+    }
+  }
+  @keyframes checked__toggle {
+    0% {
+      background: #fff;
+      transform: translateX(var(--iPos)) scale(1.25, 1);
+    }
+    45% {
+      background: #fff;
+      transform: translateX(var(--bPos)) scale(1, 1);
+    }
+    50% {
+      background: transparent;
+      transform: translateX(var(--bPos)) scale(0.5, 1.1);
+    }
+    65% {
+      transform: translateX(var(--bPos)) scale(1, 1);
+    }
+    100% {
+      transform: translateX(var(--fPos));
+    }
+  }
+  @keyframes checked__toggle--r {
+    0% {
+      background: transparent;
+      transform: translateX(calc(-1 * var(--iPos))) scale(1.25, 1);
+    }
+    45% {
+      background: transparent;
+      transform: translateX(calc(-1 * var(--bPos))) scale(1, 1);
+    }
+    50% {
+      background: #fff;
+      transform: translateX(calc(-1 * var(--bPos))) scale(0.5, 1.1);
+    }
+    65% {
+      transform: translateX(calc(-1 * var(--bPos))) scale(1, 1);
+    }
+    100% {
+      transform: translateX(calc(-1 * var(--fPos)));
+    }
+  }
+  
+
+  /*input*/
+
+  .text-field {
+      border: 1px solid var(--bg);
+      border-radius: 3px;
+      padding: 10px;
+      width: 50%;
+      margin-bottom: 10px;
+      font-size: 16px;
+      outline: none;
+      background-color: var(--games-color);
+      color: var(--font-color);
+  }
+
+  /* Submit button styles */
+  .submit-button {
+      background-color: var(--button-color);
+      color: var(--font-color);
+      border: none;
+      border-radius: 3px;
+      padding: 10px 20px;
+      font-size: 16px;
+      cursor: pointer;
+      width: 20%;
+  }
+
+  /* Hover effect for the button */
+  .submit-button:hover {
+      background-color: var(--hover-color);
+  }
\ No newline at end of file
diff --git a/index.html b/index.html
index 947df5aa..2afb6cd5 100644
--- a/index.html
+++ b/index.html
@@ -232,7 +232,28 @@
             </div>
             <ul id="gamesList"></ul>
         </div>
-    </section>
+        <div class="settings">
+            <div class="setting-bg">
+                <h1>Settings</h1>
+                <p>a dum description (add a better font later)</p>
+
+                <label class="switch">
+                    <p>toggle switch??</p>
+                    <input type="checkbox" id="toggle-1" hidden>
+                    <div class="switch__wrapper">
+                        <div class="switch__toggle"></div>
+                    </div>
+                    <p>input field??</p>
+                </label>
+
+                <br><!--bad practice will fix in css later-->
+
+                <input class="text-field" type="text" placeholder="placeholder">
+                <button class="submit-button">sumbmit</button>
+                
+            </div>
+        </div>
+    </section>  
 
     <section id="page-loader">
         <iframe></iframe>