Add countdown progress

static/index.js

@@ -1,6 +1,20 @@
 const events = new EventSource("/");
 
-events.onmessage = (event) => {
+let animation = null;
+
+events.onmessage = async (event) => {
+  animation && animation.pause();
+  animation = document.querySelector(".counter").animate(
+    [
+      { transform: `scaleX(1)`, transformOrigin: "left" },
+      { transform: `scaleX(0)`, transformOrigin: "left" },
+    ],
+    {
+      duration: animation ? 30000 : Math.ceil(Date.now() / 30000) * 30000 - Date.now(),
+      iterations: 1,
+      easing: "linear",
+    }
+  );
   for (const { name, otp } of JSON.parse(event.data)) {
     document.querySelector(`#${name} .otp`).innerText = otp;
   }

static/style.css

@@ -44,6 +44,15 @@ body {
   display: none;
   font-family: "Material Icons";
 }
+.counter {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 4rem;
+  background-color: rgba(64, 64, 255, 0.5);
+}
+
 .nav {
   position: fixed;
   left: 0;
@@ -53,9 +62,9 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: rgba(64, 64, 255, 0.5);
-  backdrop-filter: blur(0.5rem) saturate(0);
-  -webkit-backdrop-filter: blur(0.5rem) saturate(0);
+  background-color: transparent;
+  backdrop-filter: blur(0.5rem);
+  -webkit-backdrop-filter: blur(0.5rem);
   border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.5);
   box-shadow: 0 0 0.25rem rgba(0, 0, 0, 1);
 }
@@ -75,11 +84,12 @@ body {
   width: 4rem;
   text-align: center;
   color: rgba(255, 255, 255, 1);
+  text-shadow: 0 0 0.25rem rgba(160, 160, 255, 1);
   cursor: pointer;
   transition: all 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
 }
 .nav .add:hover {
-  text-shadow: 0 0 0.25rem rgba(255, 255, 255, 1);
+  text-shadow: 0 0 0.25rem rgba(0, 0, 0, 1);
 }
 .nav .add:active {
   text-shadow: 0 0 0.25rem rgba(160, 160, 255, 1);

view/index.ejs

@@ -31,6 +31,7 @@
     <% }); %>
   </div>
 
+  <div class="counter"></div>
   <div class="nav">
     <div class="title">ソ瑠璃パス</div>
     <span class="add material-icons">add</span>