Implement two buttons, pt.2

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

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
+    })
 }