1 files changed, 45 insertions, 6 deletions
diff --git a/core/login/index.html b/core/login/index.html
index 3d647d1..912464a 100644
--- a/core/login/index.html
+++ b/core/login/index.html
@@ -12,11 +12,21 @@
         }
 
         html, body {
-            background-color: cornflowerblue;
+            background-color: #ed9464;
             color: black;
             margin: 0;
         }
 
+        #bg {
+            position: fixed;
+            inset: 0;
+            z-index: -1;
+            background-color: #ed9464;
+            background-image: url("../../wallpaper.jpg");
+            background-size: cover;
+            background-position: center;
+        }
+
         ::-webkit-scrollbar {
             width: 7px;
         }
@@ -105,11 +115,29 @@
             border-radius: 999px;
             background: rgba(0, 0, 0, .025);
         }
+
+        #login-card-password.shake {
+            animation-name: shake;
+            animation-iteration-count: 6;
+            animation-timing-function: linear;
+            animation-duration: .1s;
+            animation-fill-mode: both;
+        }
+
+        @keyframes shake {
+            33% {
+                margin-left: -10px;
+            }
+            66% {
+                margin-right: -10px;
+            }
+        }
     </style>
 </head>
-<body style="opacity: 0; pointer-events: none;">
-    <div style="display: flex; align-items: center; justify-content: center; position: fixed; inset: 0;">
-        <div style="background: rgba(255, 255, 255, .75); backdrop-filter: blur(10px); padding: 50px; width: 512px; height: 256px; border-radius: 10px;">
+<body>
+    <div id="bg"></div>
+    <div id="content" style="display: flex; align-items: center; justify-content: center; position: fixed; inset: 0;">
+        <div style="background: rgba(255, 255, 255, .75); backdrop-filter: blur(20px); padding: 50px; width: 512px; height: 256px; border-radius: 10px;">
             <div style="background: rgba(0, 0, 0, .1); margin: -50px -50px 0; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom: 1px solid rgba(0, 0, 0, .1); height: 80px;">
                 <div style="display: inline-flex; align-items: center;margin: 0 10px; height: 100%; width: max-content;">
                     <img src="../../logo.svg" style="width: 64px;">
@@ -119,6 +147,13 @@
                             hour: 'numeric',
                             minute: '2-digit'
                         })).format(new Date());
+
+                        setInterval(() => {
+                            document.getElementById("clock").innerText = (new Intl.DateTimeFormat('en-IE', {
+                                hour: 'numeric',
+                                minute: '2-digit'
+                            })).format(new Date());
+                        }, 1000);
                     </script>
                 </div>
                 <div style="float: right; display: flex; align-items: center; height: 100%; margin: 0 25px;" id="power-actions">
@@ -184,8 +219,8 @@
         }
 
         window.onload = () => {
-            document.body.style.opacity = "";
-            document.body.style.pointerEvents = "";
+            document.getElementById("content").style.opacity = "";
+            document.getElementById("content").style.pointerEvents = "";
         }
 
         window.currentUser = null;
@@ -209,6 +244,7 @@
         }
 
         function confirmLogin() {
+            document.getElementById("login-card-password").classList.remove("shake");
             document.getElementById("login-back").style.opacity = "0";
             document.getElementById("login-back").style.pointerEvents = "none";
             document.getElementById("login-card-password").style.display = "none";
@@ -246,12 +282,15 @@
                     document.getElementById("power-actions").style.opacity = "1";
                     document.getElementById("power-actions").style.pointerEvents = "";
                     document.getElementById("login-card-password").focus();
+                    document.getElementById("login-card-password").classList.add("shake");
+                    document.body.style.cursor = "";
                 }
             })
         }
 
         function cancelLogin() {
             window.currentUser = null;
+            document.getElementById("login-card-password").classList.remove("shake");
             document.getElementById("users").style.display = "";
             document.getElementById("login").style.display = "none";
         }