Updated 7 files and added 4 files (automated)

author: RaindropsSys <contact@minteck.org> 2023-06-19 10:53:24 +0200
committer: RaindropsSys <contact@minteck.org> 2023-06-19 10:53:24 +0200
commit: d837341ee359afbe40ee0732584704e488de2900 (patch)
tree: f77c337beec9a5a6d7ff13e18b35cb780d99ba7c /core
parent: 4480e889a967e571e89eb312b7ead883b827ed28 (diff)
download: kirinos-d837341ee359afbe40ee0732584704e488de2900.tar.gz
kirinos-d837341ee359afbe40ee0732584704e488de2900.tar.bz2
kirinos-d837341ee359afbe40ee0732584704e488de2900.zip
2 files changed, 79 insertions, 21 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";
         }
diff --git a/core/startup/index.html b/core/startup/index.html
index 50f65ac..eb5a346 100644
--- a/core/startup/index.html
+++ b/core/startup/index.html
@@ -13,16 +13,26 @@
             outline: none;
         }
 
+        #bg {
+            position: fixed;
+            inset: 0;
+            z-index: -1;
+            background-color: #ed9464;
+            background-size: cover;
+            background-position: center;
+        }
+
         html, body {
-            background-color: cornflowerblue;
+            background-color: #ed9464;
             color: black;
             margin: 0;
         }
     </style>
 </head>
 <body>
+    <div id="bg"></div>
     <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;">
+        <div style="background: rgba(255, 255, 255, .75); backdrop-filter: blur(20px); padding: 50px; width: 512px; height: 256px; border-radius: 10px;">
             <div style="height: calc(100% - 48px + 50px); display: flex; align-items: center; justify-content: center;">
                 <div>
                     <img src="../../logo.svg" style="width: 96px; display: block; margin-left: auto; margin-right: auto;">
@@ -85,6 +95,10 @@
                 command: "systemctl start polkit.service"
             },
             {
+                title: "Starting audio subsystem...",
+                command: "systemctl start moaudio.service"
+            },
+            {
                 title: "Configuring encryption...",
                 command: "modprobe ecryptfs && /mango/core/startup/encryption.sh"
             }
@@ -112,23 +126,28 @@
             });
         }
 
-        setTimeout(async () => {
-            for (let step of steps) {
-                document.getElementById("loading-message").innerText = step.title;
-                await sleep(100);
+        setTimeout(() => {
+            document.getElementById("loading-message").innerText = "Setting wallpaper...";
+            document.getElementById("bg").style.backgroundImage = 'url("../../wallpaper.jpg")';
 
-                try {
-                    await exec(step.command);
+            setTimeout(async () => {
+                for (let step of steps) {
+                    document.getElementById("loading-message").innerText = step.title;
                     await sleep(100);
-                } catch (e) {
-                    console.error(e);
+
+                    try {
+                        await exec(step.command);
+                        await sleep(100);
+                    } catch (e) {
+                        console.error(e);
+                    }
                 }
-            }
 
-            document.getElementById("loading-message").innerText = "Initialising login screen...";
-            document.body.style.opacity = "0";
-            document.body.style.pointerEvents = "none";
-            location.href = "../login/index.html";
+                document.getElementById("loading-message").innerText = "Initialising login screen...";
+                document.body.style.opacity = "0";
+                document.body.style.pointerEvents = "none";
+                location.href = "../login/index.html";
+            }, 1000)
         }, 3000);
     </script>
 </body>
author	RaindropsSys <contact@minteck.org>	2023-06-19 10:53:24 +0200
committer	RaindropsSys <contact@minteck.org>	2023-06-19 10:53:24 +0200
commit	d837341ee359afbe40ee0732584704e488de2900 (patch)
tree	f77c337beec9a5a6d7ff13e18b35cb780d99ba7c /core
parent	4480e889a967e571e89eb312b7ead883b827ed28 (diff)
download	kirinos-d837341ee359afbe40ee0732584704e488de2900.tar.gz kirinos-d837341ee359afbe40ee0732584704e488de2900.tar.bz2 kirinos-d837341ee359afbe40ee0732584704e488de2900.zip