High Contrast Button

assets/css/highContrast.css

@@ -0,0 +1,24 @@
+.incorrect {
+    background-color: #e21143;
+    border-radius: 18%;
+}
+
+.previous {
+    background-color: #f9bd00;
+    border-radius: 18%;
+}
+
+.correct {
+    background-color: #88ea09;
+    border-radius: 18%;
+}
+
+.down {
+    background-color: #8a2df0;
+    border-radius: 0 0 36% 36%;
+}
+
+.up {
+    background-color: #f9bd00;
+    border-radius: 36% 36% 0 0;
+}

assets/css/main.css

@@ -131,10 +131,15 @@ input[type=text] {
 .info {
     color: #fff;
     font-size: 2em;
-    position: absolute;
-    right: 1em;
-    top: 1.3em;
     transition: all 0.2s;
+    text-align: right;
+    align-self: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: 20px;
+    margin: 0.5em;
+    flex: 1;
 }
 
 .info:hover {
@@ -250,7 +255,18 @@ p a:hover {
 
 .title {
     background-color: #171717;
-    padding: 0.3em;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
+.title h1 {
+    flex: 1;
+}
+
+.left {
+    flex: 1;
+    margin: 0.5em;
 }
 
 .tutorial {
@@ -529,9 +545,9 @@ p a:hover {
     }
 }
 
-@media(max-width:640px) {
+@media(max-width:820px) {
     h1 {
-        font-size: 3em;
+        font-size: 2.5em;
     }
 
     h2 {
@@ -546,10 +562,6 @@ p a:hover {
         font-size: 1em;
     }
 
-    .info {
-        display: none;
-    }
-
     .frame {
         height: 45px;
         width: 45px;
@@ -586,11 +598,26 @@ p a:hover {
     .tutorial .row {
         flex-direction: column;
     }
+
+    .title h1 {
+        text-align: left;
     }
 
-@media(max-width:400px) {
+    .info {
+        font-size: 1.5em;
+        gap: 10px;
+    }
+}
+
+@media(max-width:540px) {
+    .left {
+        display: none;
+    }
+}
+
+@media(max-width:430px) {
     h1 {
-        font-size: 2.5em;
+        font-size: 2em;
     }
 
     h2 {
@@ -629,6 +656,10 @@ p a:hover {
     .input {
         width: 280px;
     }
+
+    .info {
+        font-size: 1.25em;
+    }
 }
 
 @media(max-height:720px) {

assets/js/main.js

@@ -404,10 +404,21 @@ document.getElementsByClassName("closeShare")[0].onmousedown = () => {
     close(document.getElementsByClassName("shareScreen")[0])
 }
 
-document.getElementsByClassName("info")[0].onmousedown = () => {
+
+document.getElementById("tutorial").onmousedown = () => {
     open(document.getElementsByClassName("tutorial")[0])
 }
 
+document.getElementById("highContrast-btn").onmousedown = () => {
+    if (localStorage.getItem("highContrast") === null) {
+        localStorage.setItem("highContrast", "true")
+        document.getElementById("highContrast").disabled = false
+    } else {
+        localStorage.removeItem("highContrast")
+        document.getElementById("highContrast").disabled = true
+    }
+}
+
 document.getElementsByClassName("btn")[0].onmousedown = () => {
     pulse()
     copy()
@@ -467,6 +478,9 @@ function copy() {
 }
 
 document.addEventListener('DOMContentLoaded', () => {
+    if (localStorage.getItem("highContrast") === null) {
+        document.getElementById("highContrast").disabled = true
+    }
     fetch(`${window.location.href}/drivers.json`).then(res => {
         res.json().then(result => {
             driversObj = result

views/index.ejs

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta property="og:image" content="./stewardle.png" />
     <link rel="stylesheet" href="./css/main.css">
+    <link id="highContrast" rel="stylesheet" href="./css/highContrast.css">
     <script src="https://kit.fontawesome.com/134dd703dd.js" crossorigin="anonymous"></script>
     <title>Stewardle</title>
     <meta name="description" content="Test your F1 knowledge by guessing the driver of the day using the clues from your previous guesses! Inspired by Wordle, created by syhr.">
@@ -96,8 +97,13 @@
     </div>
     <div class="backdrop"></div>
     <div class="title">
+        <div class="left"></div>
         <h1>Stewardle</h1>
-        <div class="info"><i class="fa-solid fa-circle-info"></i></div>
+        <div class="info">
+            <i id="stats" class="fa-sharp fa-solid fa-chart-simple"></i>
+            <i id="highContrast-btn" class="fa-solid fa-palette"></i>
+            <i id="tutorial" class="fa-solid fa-circle-info"></i>
+        </div>
     </div>
     <div class="splitter"></div>
     <div class="board">