Added a options menu with working sliders and buttons

cards.css

@@ -93,7 +93,33 @@ body {
     text-shadow: -5px 14px 20px rgb(0, 0, 0);
     cursor: pointer;
 }
-
+#options-window {
+    position: absolute;
+    background-color: #000000d4;
+    height: 100%;
+    width: 100%;
+    z-index: 99999;
+    top: 0px;
+    right: 0px;
+    /* display: flex; */
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    /* font-weight: 900; */
+    font-size: 1vw;
+    font-family: "8-bit-pusab";
+    /* -webkit-text-stroke: 1px rgb(10, 10, 10); */
+    text-shadow: -3px 5px 20px rgb(0, 0, 0);
+    cursor: pointer;
+    display: none;
+}
+.shownumbers-button{
+    display: flex;
+}
+#button-text-01{
+    width: 21vw;
+}
 .printid:after {
     content: attr(id);
     position: absolute;
@@ -122,9 +148,54 @@ body {
 .settings{
     font-size: 50%;
 }
+.cardspeed{
+
+    display: flex;
+    align-items: center;
+    width: fit-content;
+}
+#range-value{
+    margin: 0 7px;
+}
 #start-the-game *:hover::before {
     content:'> ';
 }
+#options-window div{
+    margin: 1vh 0;
+}
+/* Menu button */
+.menu-nav-button{
+    font-family: "8-bit-pusab";
+    background-color: #ff0000;
+    border: none;
+    color: white;
+    padding: 5px 19px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 11px;
+}
+/* Slider style */
+.slider {
+    -webkit-appearance: none;
+    width: 25%;
+    height: 15px;
+    background: #d3d3d3;
+    outline: none;
+    opacity: 0.7;
+    -webkit-transition: .2s;
+    transition: opacity .2s;
+    margin: 6;
+}
+  .slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    background: #ff0000;
+    cursor: pointer;
+  }
+  /* slider ends */
 @media screen and (max-width: 513px) {
     .stats {
         font-size: 64%;

index.php

@@ -58,9 +58,25 @@
     <div id="alerted"></div>
     <div id="start-the-game">
         <div onmouseover="menu_clicks();" onclick="initiate()">Start</div>
-        <div onmouseover="menu_clicks();" class="settings">Options</div>
+        <div onmouseover="menu_clicks();" onclick="when_clicked()" class="settings">Options</div>
+    </div>
+    <div id="options-window">
+    <div class="cardspeed">
+        <div>Card speed:</div>
+        <div id="range-value">500</div>
+        <input type="range" class="slider" onchange="cardspeed()" id="card-speed-number-value" min="10" max="2000">
+    </div>
+     <div class="shownumbers-button">
+            <div class="button-icon">
+                <img src="assets/textures/button_off.png" onclick="menu_clicks();check();document.getElementById('btn-off').style.display = 'none';document.getElementById('btn-on').style.display = 'block';" id="btn-off" alt="off">
+                <img src="assets/textures/button_on.png" onclick="menu_clicks();uncheck();document.getElementById('btn-on').style.display = 'none';document.getElementById('btn-off').style.display = 'block';" style="display: none;" id="btn-on" alt="off">
+            </div>
+            <div id="button-text-01">
+                Turn on card numbers
+            </div>
+     </div>
+     <button onclick="menu_clicks();when_clicked_back();" class="menu-nav-button">Back</button>
     </div>
-
     <div class="overlay">
         <div class="narrator">
 
@@ -69,6 +85,7 @@
     
     <script src="scripts/gameboard.js"></script>
     <script src="scripts/sound.js"></script>
+    <script src="scripts/options.js"></script>
     <!-- particles.js library -->
     <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
     <script src="scripts/particles.js"></script>

scripts/blockamount.js

@@ -1,4 +0,0 @@
-
-
-$("<h1>Include this using jquery</h1>").appendTo("body");
-console.log($("body").html());

scripts/gameboard.js

@@ -134,7 +134,7 @@ function make_playground() {
 function clear_playground() { //When called, makes the playground empty
     document.getElementById("test-group").innerHTML = "";
     clear_values();
-} //hello
+}
 
 function randomized() { // Fills the array with random numbers. Max number determines by level
     while (play_array.length < difficulty) {
@@ -167,7 +167,7 @@ function reply_click(clicked_id) { // Grabs the value from the id on the div/car
                     } else {
                         document.getElementById("score").innerHTML = parseInt(x) * 2 + 30;
                     }
-                    alert("You survived this round!");
+                    // alert("You survived this round!");
                     nextRound();
                 }
             }

scripts/options.js

@@ -0,0 +1,25 @@
+// gameboard.js required
+
+
+function when_clicked(){
+    document.getElementById("particles-js").style.backgroundImage = "url(assets/textures/options.png)";
+    document.getElementById("start-the-game").style.display = "none";
+    document.getElementById("options-window").style.display = "flex";
+}
+function when_clicked_back(){
+    document.getElementById("particles-js").style.backgroundImage = "url(assets/textures/bg.png)";
+    document.getElementById("start-the-game").style.display = "flex";
+    document.getElementById("options-window").style.display = "none";
+}
+function check() {
+    showcontent = true;
+    document.getElementById("button-text-01").innerHTML = "Turn off card numbers";
+  }
+function uncheck() {
+    showcontent = false;
+    document.getElementById("button-text-01").innerHTML = "Turn on card numbers";
+}
+function cardspeed(){
+       viewspeed = document.getElementById("card-speed-number-value").value;
+       document.getElementById("range-value").innerText = document.getElementById("card-speed-number-value").value;
+}