progress

www/css/style.css

@@ -23,7 +23,7 @@ body {
     background: black;
 }
 
-#connForm, #pinValForm, #streamForm, #idleScreen, #pinScreen {
+#connForm, #pinValForm, #streamForm {
     width: 25em;
     position: absolute;
     left: 50%;
@@ -130,10 +130,37 @@ h1 {
     text-align: center;
 }
 
-#dispIDLabel, #pinLabel {
+#idleScreen {
+    width: fit-content;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.otp-container {
+    width: fit-content;
+}
+
+#dispIDLabel, #otpLabel {
     font-size: 30pt;
 }
 
-#dispID, #pin {
+#dispID, #otp {
     font-size: 80pt;
+}
+
+.lifespan-container {
+    padding: 0;
+    background-color: #797979;
+    width: 100%;
+    height: 1em;
+    border-radius: 0.25em;
+}
+
+.lifespan {
+    background-color: #1080FF;
+    height: 100%;
+    animation-timing-function: linear;
+    border-radius: 0.25em;
 }