From 6cb8ce8951ada32a5812c7abb1c228126ff69080 Mon Sep 17 00:00:00 2001
From: mctaylors <cantsendmails@mctaylors.ru>
Date: Thu, 2 May 2024 19:41:41 +0500
Subject: [PATCH] Implement an appearance animation

Signed-off-by: mctaylors <cantsendmails@mctaylors.ru>
---
 assets/css/keyframes.css | 48 ++++++++++++++++++++++++++++++++++++++++
 assets/css/style.css     | 17 ++++++++------
 assets/js/main.js        |  5 ++++-
 index.html               |  7 +++---
 4 files changed, 66 insertions(+), 11 deletions(-)

diff --git a/assets/css/keyframes.css b/assets/css/keyframes.css
index 1d421b3..2caf649 100644
--- a/assets/css/keyframes.css
+++ b/assets/css/keyframes.css
@@ -6,4 +6,52 @@
     to {
         outline-color: var(--dark-blue);
     }
+}
+
+@keyframes onload-background-blur {
+    from {
+        filter: blur(0) brightness(1);
+    }
+
+    99% {
+        filter: blur(0) brightness(1);
+    }
+
+    to {
+        filter: blur(16px) brightness(0.5);
+    }
+}
+
+@keyframes onload-dialog {
+    from {
+        opacity: 0;
+        width: var(--keyframe-dialog-width);
+        height: var(--keyframe-dialog-height);
+    }
+
+    80% {
+        opacity: 0;
+        width: var(--keyframe-dialog-width);
+        height: var(--keyframe-dialog-height);
+    }
+
+    to {
+        opacity: 1;
+        width: var(--dialog-width);
+        height: var(--dialog-height);
+    }
+}
+
+@keyframes onload-visibility {
+    from {
+        visibility: hidden;
+    }
+
+    99% {
+        visibility: hidden;
+    }
+
+    to {
+        visibility: visible;
+    }
 }
\ No newline at end of file
diff --git a/assets/css/style.css b/assets/css/style.css
index 9cc1552..ca5102d 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -7,6 +7,11 @@
     --border: #3f3f3f;
     --light-blue: #60f7df;
     --dark-blue: #10bfc7;
+    --dialog-width: 770px;
+    --dialog-height: 335px;
+    --keyframe-dialog-size-divider: 20;
+    --keyframe-dialog-width: calc(var(--dialog-width) - var(--dialog-width) / var(--keyframe-dialog-size-divider));
+    --keyframe-dialog-height: calc(var(--dialog-height) - var(--dialog-height) / var(--keyframe-dialog-size-divider));
 }
 
 .background-image {
@@ -17,7 +22,7 @@
     margin-left: -8px;
     background: url(/assets/jpg/Urchin_Underpass.jpg);
     background-size: cover;
-    filter: blur(16px) brightness(0.5);
+    animation: 750ms forwards ease-out onload-background-blur;
     transform: scale(1.1);
     z-index: -1;
 }
@@ -33,8 +38,7 @@ p, button {
 
 .dialog {
     position: absolute;
-    width: 770px;
-    height: 355px;
+    animation: 1250ms forwards ease-out onload-dialog;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
@@ -52,12 +56,11 @@ p, button {
 }
 
 .dialog > .description {
-    margin-left: 68px;
-    margin-right: 32px;
+    margin: 12px 32px 0 64px;
 }
 
-.dialog > p > br {
-    margin-bottom: 0.75em;
+.dialog > p, .dialog button > span {
+    animation: 1300ms forwards onload-visibility;
 }
 
 .dialog button {
diff --git a/assets/js/main.js b/assets/js/main.js
index 94e8488..e2d46cd 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -4,7 +4,10 @@ window.onload = function() {
 
 function play(audioId) {
     let audioElement = document.getElementById(audioId);
-    audioElement.play();
+    setTimeout(function() {
+            audioElement.play();
+        }, 1000
+    )
 }
 
 function close_button(href) {
diff --git a/index.html b/index.html
index c615b74..d499d37 100644
--- a/index.html
+++ b/index.html
@@ -16,14 +16,15 @@
         </p>
         <p class="description">
             Not Found.
-            <br/>
+        </p>
+        <p class="description">
             Server cannot find the requested resource. Make sure the link is spelled correctly.
         </p>
         <button class="left" onclick="close_button('https://github.com/mctaylors/NXInspired')">
-            Close
+            <span>Close</span>
         </button>
         <button class="right" onclick="details_button()">
-            Details
+            <span>Details</span>
         </button>
     </div>
 </body>