more Codebase cleanup and refactoring on files mathe.view.php and nav.php

2023-01-07 11:50:51 +01:00 · 2023-01-07 11:50:51 +01:00 · 3c2dc70254
commit 3c2dc70254
parent cbabe10ee9
5 changed files with 233 additions and 256 deletions
--- a/styles/mathe.css
+++ b/styles/mathe.css
@ -0,0 +1,132 @@
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    font-family: "Poppins", sans-serif;
+  }
+
+  body {
+    background-color: #33adee;
+  }
+
+  .container {
+    background-color: #ffffff;
+    width: 90%;
+    max-width: 31.25em;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    top: 50%;
+    left: 50%;
+    padding: 5em 3em;
+    border-radius: 0.5em;
+  }
+
+  .container h3 {
+    font-size: 1.2em;
+    color: #23234c;
+    text-align: center;
+    font-weight: 500;
+    line-height: 1.8em;
+  }
+
+  .container #submit-btn {
+    font-size: 1.2em;
+    font-weight: 500;
+    display: block;
+    margin: 0 auto;
+    background-color: #33adee;
+    border-radius: 0.3em;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    color: #1d1d20;
+    padding: 0.6em 2em;
+  }
+
+  #error-msg {
+    text-align: center;
+    margin-top: 1em;
+    background-color: #ffdde0;
+    color: #d62f2f;
+    padding: 0.2em 0;
+  }
+
+  .container #question {
+    background-color: #eeedf1;
+    font-size: 2em;
+    font-weight: 600;
+    color: #23234c;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 1.4em 0 1em 0;
+    padding: 1em 0;
+  }
+
+  .container input {
+    font-size: 1em;
+    font-weight: 600;
+    width: 2.35em;
+    color: #23234c;
+    text-align: center;
+    padding: 0 0.2em;
+    border: none;
+    background-color: transparent;
+    border-bottom: 0.12em solid #23234c;
+    margin: 0 0.25em;
+  }
+
+  .container input:focus {
+    border-color: #33adee;
+    outline: none;
+  }
+
+  /*Hide Number Arrows*/
+  .container input[type="number"] {
+    -moz-appearance: textfield;
+  }
+
+  .container input[type="number"]::-webkit-outer-spin-button,
+  .container input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  .controls-container {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    background-color: #33adee;
+    height: 100%;
+    width: 100%;
+    top: 0;
+  }
+
+  #start-btn {
+    font-size: 1.2em;
+    font-weight: 500;
+    background-color: #ffffff;
+    color: #23234c;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 0.8em 1.8em;
+    border-radius: 0.3em;
+  }
+
+  #result {
+    margin-bottom: 1em;
+    font-size: 1.5em;
+    color: #23234c;
+  }
+
+  #result span {
+    font-weight: 600;
+  }
+
+  .hide {
+    display: none;
+  }