added option to hide top header

epicX67 · Jul 12, 2021 · 4edcf00 · 4edcf00
1 parent bbaf2c1
commit 4edcf00
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -166,7 +166,7 @@
         </tr>
     </table>
 
-    <header>One <span>Ui</span></header>
+    <header id="header" class="hide">One <span>Ui</span></header>
     <div id="main" class="container">
         <div style="display: none;" id="cpu" class="card">
             <div class="type">
@@ -251,6 +251,9 @@ <h1>Settings</h1>
 
 
         <div class="sContainer">
+            <input onchange="showhideHeader();" type="checkbox" name="show_header" id="show_header">
+            <label for="show_header">Show Header</label>
+
             <h2>CPU</h2>
             <input onchange="set_visibility('show_cpu');update();" type="checkbox" name="show_cpu" id="show_cpu">
             <label for="show_cpu">Show CPU</label>

diff --git a/src/js/script.js b/src/js/script.js
@@ -18,7 +18,22 @@ function updateColor(str, colorStr) {
 }
 window.updateColor = updateColor;
 
+function showhideHeader() {
+  const checked = document.getElementById("show_header").checked;
+  if (checked) {
+    document.getElementById("header").classList.remove("hide");
+  } else {
+    document.getElementById("header").classList.add("hide");
+  }
+  localStorage.setItem("show_header", JSON.stringify(checked));
+}
+window.showhideHeader = showhideHeader;
+
 function update() {
+  const showHeader = localStorage.getItem("show_header")
+    ? JSON.parse(localStorage.getItem("show_header"))
+    : true;
+
   const showCPU = localStorage.getItem("show_cpu")
     ? JSON.parse(localStorage.getItem("show_cpu"))
     : true;
@@ -37,6 +52,13 @@ function update() {
   const gpu_color = localStorage.getItem("gpu_color");
   const vram_color = localStorage.getItem("vram_color");
 
+  if (showHeader) {
+    document.getElementById("header").classList.remove("hide");
+  } else {
+    document.getElementById("header").classList.add("hide");
+  }
+  document.getElementById("show_header").checked = showHeader;
+
   updateColor("cpu", cpu_color ? cpu_color : "blue");
   document.getElementById("show_cpu").checked = showCPU;
   if (showCPU) {