Implement two buttons, pt.2

Signed-off-by: mctaylors <cantsendmails@mctaylors.ru>

assets/css/keyframes.css

@@ -25,14 +25,14 @@
 @keyframes onload-dialog {
     from {
         opacity: 0;
-        width: var(--keyframe-dialog-width);
-        height: var(--keyframe-dialog-height);
+        width: var(--keyframe-show-dialog-width);
+        height: var(--keyframe-show-dialog-height);
     }
 
     80% {
         opacity: 0;
-        width: var(--keyframe-dialog-width);
-        height: var(--keyframe-dialog-height);
+        width: var(--keyframe-show-dialog-width);
+        height: var(--keyframe-show-dialog-height);
     }
 
     to {

assets/css/style.css

@@ -9,9 +9,13 @@
     --dark-blue: #10bfc7;
     --dialog-width: 770px;
     --dialog-height: 335px;
+    --details-button-width: 395px;
+    --details-button-height: 65px;
     --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));
+    --keyframe-show-dialog-width: calc(var(--dialog-width) - var(--dialog-width) / var(--keyframe-dialog-size-divider));
+    --keyframe-hide-dialog-width: calc(var(--dialog-width) + var(--dialog-width) / var(--keyframe-dialog-size-divider));
+    --keyframe-show-dialog-height: calc(var(--dialog-height) - var(--dialog-height) / var(--keyframe-dialog-size-divider));
+    --keyframe-hide-dialog-height: calc(var(--dialog-height) + var(--dialog-height) / var(--keyframe-dialog-size-divider));
 }
 
 .background-image {
@@ -36,6 +40,11 @@ p, button {
     letter-spacing: -0.025em;
 }
 
+.error-code {
+    color: lightgray;
+    font-size: 16px;
+}
+
 .dialog {
     position: absolute;
     animation: 1250ms forwards ease-out onload-dialog;
@@ -48,21 +57,19 @@ p, button {
     border-radius: 4px;
 }
 
-.dialog > .error-code {
+.dialog-content {
+    animation: 1300ms forwards onload-visibility;
+}
+
+.dialog .error-code {
     margin-top: 40px;
     margin-left: 60px;
-    color: lightgray;
-    font-size: 16px;
 }
 
 .dialog .description > p {
     margin: 12px 32px 0 64px;
 }
 
-.dialog p, .dialog button > span {
-    animation: 1300ms forwards onload-visibility;
-}
-
 .dialog button {
     position: absolute;
     bottom: 0;
@@ -86,7 +93,7 @@ p, button {
     left: 50%;
 }
 
-.dialog button:hover {
+.dialog button:hover, .details button:hover {
     background-color: var(--background-active);
     border-radius: 4px;
     outline: 5px solid;
@@ -108,3 +115,31 @@ p, button {
     transition: none;
     background-color: #274747cf;
 }
+
+.details {
+    display: none;
+    opacity: 0;
+}
+
+.details-content {
+    margin: 65px 15% 0;
+    height: calc(100vh - var(--details-button-height) * 3.75);
+    overflow-y: scroll;
+}
+
+.details .description > p {
+    font-size: 20px;
+    line-height: 36px;
+}
+
+.details button {
+    position: absolute;
+    background-color: var(--background);
+    width: var(--details-button-width);
+    height: var(--details-button-height);
+    left: 50%;
+    top: calc(100% - var(--details-button-height) * 1.25);
+    transform: translate(-50%, -50%);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+}

assets/js/main.js

@@ -4,6 +4,8 @@ window.onload = function() {
     }, 1000)
 }
 
+const getStyleProperty = (s, p) => getComputedStyle(s).getPropertyValue(p);
+
 function play(audioId) {
     let audioElement = document.getElementById(audioId);
     audioElement.play();
@@ -16,5 +18,35 @@ function close_button(href) {
 
 function details_button() {
     play("click");
-    // TODO: this button does nothing for now :)
+
+    document.getElementById('dialog-content').style.display = 'none';
+    let root = document.documentElement;
+    let dialogElement = document.getElementById('dialog');
+    dialogElement.animate([
+        {
+            opacity: 0,
+            width: getStyleProperty(root, '--keyframe-hide-dialog-width'),
+            height: getStyleProperty(root, '--keyframe-hide-dialog-height'),
+        }
+    ], {
+        fill: 'forwards',
+        easing: 'ease-out',
+        duration: 250
+    });
+    dialogElement.style.display = 'none';
+
+    let detailsElement = document.getElementById('details');
+    detailsElement.style.display = 'inline-block';
+    detailsElement.animate([
+        {
+            opacity: 0, offset: 0.95
+        },
+        {
+            opacity: 1
+        }
+    ], {
+        fill: 'forwards',
+        easing: 'ease-out',
+        duration: 1000
+    })
 }

multiple-buttons.html

@@ -10,19 +10,35 @@
 </head>
 <body>
     <div class="background-image"></div>
-    <div class="dialog">
-        <p class="error-code">
-            Error Code: 404
-        </p>
-        <div class="description">
-            <p>Not Found.</p>
-            <p>Server cannot find the requested resource. Make sure the link is spelled correctly.</p>
+    <div class="dialog" id="dialog">
+        <div class="dialog-content" id="dialog-content">
+            <p class="error-code">
+                Error Code: 404
+            </p>
+            <div class="description">
+                <p>Not Found.</p>
+                <p>Server cannot find the requested resource. Make sure the link is spelled correctly.</p>
+            </div>
+            <button class="left" onclick="close_button('https://github.com/mctaylors/NXInspired')">
+                <span>Close</span>
+            </button>
+            <button class="right" onclick="details_button()">
+                <span>Details</span>
+            </button>
         </div>
-        <button class="left" onclick="close_button('https://github.com/mctaylors/NXInspired')">
-            <span>Close</span>
-        </button>
-        <button class="right" onclick="details_button()">
-            <span>Details</span>
+    </div>
+    <div class="details" id="details">
+        <div class="details-content">
+            <p class="error-code">
+                Error Code: 404
+            </p>
+            <div class="description">
+                <p>In computer network communications, the HTTP 404, 404 not found, 404, 404 error, page not found, or file not found error message is a hypertext transfer protocol (HTTP) standard response code, to indicate that the browser was able to communicate with a given server, but the server could not find what was requested. The error may also be used when a server does not wish to disclose whether it has the requested information.</p>
+                <p>The website hosting server will typically generate a "404 Not Found" web page when a user attempts to follow a broken or dead link; hence the 404 error is one of the most recognizable errors encountered on the World Wide Web.</p>
+            </div>
+        </div>
+        <button onclick="close_button('https://github.com/mctaylors/NXInspired')">
+            <span>OK</span>
         </button>
     </div>
 </body>

single-button.html

@@ -10,17 +10,19 @@
 </head>
 <body>
     <div class="background-image"></div>
-    <div class="dialog">
-        <p class="error-code">
-            Error Code: 404
-        </p>
-        <div class="description">
-            <p>Not Found.</p>
-            <p>Server cannot find the requested resource. Make sure the link is spelled correctly.</p>
+    <div class="dialog" id="dialog">
+        <div class="dialog-content" id="dialog-content">
+            <p class="error-code">
+                Error Code: 404
+            </p>
+            <div class="description">
+                <p>Not Found.</p>
+                <p>Server cannot find the requested resource. Make sure the link is spelled correctly.</p>
+            </div>
+            <button onclick="close_button('https://github.com/mctaylors/NXInspired')">
+                <span>OK</span>
+            </button>
         </div>
-        <button onclick="close_button('https://github.com/mctaylors/NXInspired')">
-            <span>Close</span>
-        </button>
     </div>
 </body>
 </html>