added warning animation if temp is above 90c

epicX67 · Jul 17, 2021 · 5b552a5 · 5b552a5
1 parent 1aca5cf
commit 5b552a5
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 3 deletions.
diff --git a/src/css/style.css b/src/css/style.css
diff --git a/src/css/style.css.map b/src/css/style.css.map
diff --git a/src/css/style.scss b/src/css/style.scss
@@ -59,6 +59,33 @@
   background: var(--yellow);
 }
 
+@keyframes blink {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.warning {
+  position: relative;
+  &::after {
+    position: absolute;
+    content: "";
+    inset: 0;
+    background: radial-gradient(#ff002225, #ff00228e);
+    border-radius: 10px;
+    z-index: 0;
+    animation: blink 3000ms ease 0ms infinite;
+  }
+}
+
 * {
   box-sizing: border-box;
   padding: 0;
@@ -127,7 +154,6 @@ header {
     animation: come 500ms ease 200ms 1 forwards;
 
     .type {
-      background: red;
       border-radius: 999px;
       border: 1vmin solid var(--sbg);
       background: var(--bg);
@@ -137,6 +163,7 @@ header {
       justify-content: center;
       gap: 0.5rem;
       padding: 1.2vmin 3vmin;
+      z-index: 2;
 
       position: absolute;
       top: -4vmin;
@@ -155,6 +182,7 @@ header {
 
     .pill {
       //width: 10rem;
+      z-index: 2;
       width: fit-content;
       height: 4vmin;
       background: var(--bg);
@@ -186,6 +214,7 @@ header {
     }
 
     .load {
+      z-index: 2;
       font-size: 14vmin;
       font-family: "productSans";
       font-weight: 900;
@@ -204,6 +233,7 @@ header {
     }
 
     .pillDown {
+      z-index: 2;
       //width: 10rem;
       width: fit-content;
       height: 4vmin;

diff --git a/src/js/script.js b/src/js/script.js
@@ -228,6 +228,13 @@ function onCPU_Temp() {
   document.getElementById(
     "cpu_temp"
   ).innerHTML = `${Hardware.CPU.temperature.current.value}<span> ${Hardware.CPU.temperature.unit.value}</span>`;
+
+  const c = document.getElementById("cpu");
+  if (Hardware.CPU.temperature.current.value > 90) {
+    c.classList.add("warning");
+  } else {
+    c.classList.remove("warning");
+  }
 }
 function onCPU_Fan() {
   const speed = 100 - (Hardware.CPU.fan.current.value / 3000) * 100;
@@ -250,6 +257,13 @@ function onGPU_Temp() {
   document.getElementById(
     "gpu_temp"
   ).innerHTML = `${Hardware.GPU.temperature.current.value}<span> ${Hardware.GPU.temperature.unit.value}</span>`;
+
+  const g = document.getElementById("gpu");
+  if (Hardware.GPU.temperature.current.value > 90) {
+    g.classList.add("warning");
+  } else {
+    g.classList.remove("warning");
+  }
 }
 function onGPU_Usage() {
   document.getElementById(