style: Alarm Ui Widget

components/uiWidgets/AlarmIndicator.module.css

@@ -0,0 +1,62 @@
+.fastPulse {
+  animation: fast-pulse 0.5s infinite;
+}
+
+@keyframes fast-pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.15);
+  }
+}
+
+.shakeAlarm {
+  animation: shake-alarm 0.5s infinite cubic-bezier(0.36, 0.07, 0.19, 0.97);
+}
+
+@keyframes shake-alarm {
+  10%,
+  90% {
+    transform: translateX(-1px);
+  }
+  20%,
+  80% {
+    transform: translateX(2px);
+  }
+  30%,
+  50%,
+  70% {
+    transform: translateX(-4px);
+  }
+  40%,
+  60% {
+    transform: translateX(4px);
+  }
+}
+
+.rotateAlarm {
+  animation: rotate-alarm 1s linear infinite;
+}
+
+@keyframes rotate-alarm {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.blinkAlarm {
+  animation: blink-alarm 0.7s steps(2, start) infinite;
+}
+
+@keyframes blink-alarm {
+  to {
+    visibility: hidden;
+  }
+}