From e8aefa73e2130de341eac1ffceebb87b974745c1 Mon Sep 17 00:00:00 2001
From: brooke <brooke@myco.systems>
Date: Sat, 15 Mar 2025 14:25:56 -0400
Subject: [PATCH] update

---
 console/A2D1-KB21/index.html | 27 +++++++++++++++++++++++++--
 console/index.html           |  2 +-
 styles.css                   | 29 +++++++++++++++++++++++++++++
 3 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/console/A2D1-KB21/index.html b/console/A2D1-KB21/index.html
index 7708378..3747773 100644
--- a/console/A2D1-KB21/index.html
+++ b/console/A2D1-KB21/index.html
@@ -22,8 +22,10 @@
           Bronze Discipline<br /><small>A2D1-KB21</small>
         </div>
         <div class="console-right">
-          <button>Restart</button><button>Power Off</button
-          ><button class="alert">Reinstall</button>
+          <button id="loadButton">
+            <span id="restart">Restart</span>
+            <div class="loader" id="loader"></div></button
+          ><button>Power Off</button><button class="alert">Reinstall</button>
         </div>
         <div class="console-uname">
           Debian GNU/Linux 12 (bookworm)<br />
@@ -97,3 +99,24 @@
     </footer>
   </body>
 </html>
+<script>
+  const loadButton = document.getElementById("loadButton");
+  const loader = document.getElementById("loader");
+  const text = document.getElementById("restart");
+
+  loadButton.addEventListener("click", () => {
+    // Disable the button
+    // and prevent further clicks
+    loadButton.disabled = true;
+    loader.style.display = "inline-block";
+    text.style.display = "none";
+
+    setTimeout(() => {
+      // Restore the button state
+      //after the operation is done
+      loadButton.disabled = false;
+      loader.style.display = "none";
+      text.style.display = "inline-block";
+    }, 2000);
+  });
+</script>
diff --git a/console/index.html b/console/index.html
index 6b75fe0..234f55e 100644
--- a/console/index.html
+++ b/console/index.html
@@ -53,4 +53,4 @@
       <a href="https://myco.systems/">MycoSystems LLC</a>
     </footer>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 8fef001..71ea401 100644
--- a/styles.css
+++ b/styles.css
@@ -252,6 +252,9 @@ section {
   font-size: 0.9rem !important;
   font-weight: 600;
   text-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
 }
 
 .console-right button:hover {
@@ -362,3 +365,29 @@ tr a::after {
   margin-left: 0.5rem;
   vertical-align: middle;
 }
+
+.loader {
+  display: none;
+  border: 4px solid transparent;
+  border-top: 4px solid #241917;
+  border-radius: 50%;
+  width: 1.2rem;
+  height: 1.2rem;
+  animation: spin 1s linear infinite;
+  margin-left: 1.3rem;
+  margin-right: 1.3rem;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loading {
+  background-color: #ccc;
+  pointer-events: none;
+}