Settings menu now works, although being unfinished

static/assets/css/style.css

@@ -53,7 +53,6 @@ button {
     font-optical-sizing: auto;
     font-weight: 400;
     font-style: normal;
-    user-select: none;
 
     transform: scale(1.2);
     filter: blur(10px);
@@ -83,4 +82,29 @@ body.history-open .calculator {
     transform: scale(0.8);
     filter: blur(10px);
     opacity: 0.4;
+}
+
+.settings-container {
+    position: absolute;
+    width: 100%;
+    height: 80%;
+    bottom: -80%;
+    left: 0;
+
+    font-family: "IBM Plex", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
+
+    z-index: 150;
+
+    transition: all 0.4s;
+}
+
+body.settings-open .settings-container {
+    bottom: 0;
+}
+
+body.settings-open .calculator {
+    transform: translateY(-80%);
 }

static/assets/js/calculator-logic.js

@@ -13,6 +13,8 @@ buttons.forEach(button => {
             resetCalculator();
         } else if (value === 'H') {
             toggleHistory();
+        } else if (value === '') {
+            toggleSettings();
         } else if (value === '=') {
             calculateResult();
         } else {
@@ -134,6 +136,10 @@ function toggleHistory() {
     }
 }
 
+function toggleSettings() {
+    $('body').toggleClass('settings-open');
+}
+
 $('#history').on('click', toggleHistory);
 
 function clearDisplay() {

static/index.html

@@ -50,6 +50,12 @@
         <button class="button">.</button>
         <button class="button operation">=</button>
     </div>
+    <div class="settings-container">
+        <span>Kolor tła: </span><input type="color" id="background"><br>
+        <span>Kolor tekstu: </span><input type="color" id="text"><br>
+        <span>Kolor podstawowy: </span><input type="color" id="primary"><br>
+        <span>Kolor alternatywny: </span><input type="color" id="secondary">
+    </div>
 
     <script src="./assets/js/calculator-logic.js"></script>
 </body>