From cbe104b86ecc3ef2b2377225d322f8c47125d507 Mon Sep 17 00:00:00 2001
From: Michael Kapelko <kornerr@gmail.com>
Date: Tue, 17 Sep 2019 12:21:10 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D1=82?=
 =?UTF-8?q?=D1=8C=20=D1=84=D0=B0=D0=B9=D0=BB=20=D0=B8=D0=BD=D1=82=D0=B5?=
 =?UTF-8?q?=D1=80=D1=84=D0=B5=D0=B9=D1=81=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 интерфейс/2019-09-17.js | 134 +++++++++++++++++++++++++++++++
 1 file changed, 134 insertions(+)
 create mode 100644 интерфейс/2019-09-17.js

diff --git a/интерфейс/2019-09-17.js b/интерфейс/2019-09-17.js
new file mode 100644
index 0000000..501a503
--- /dev/null
+++ b/интерфейс/2019-09-17.js
@@ -0,0 +1,134 @@
+мж.создатьЭкран = function()
+{
+    var экран = document.createElement("div");
+    экран.style.cssText = `
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        pointer-events: none;
+    `;
+    return экран;
+};
+
+мж.создатьОсновуИнтерфейса = function()
+{
+    мж.иф = мж.создатьЭкран();
+    document.body.appendChild(мж.иф);
+    
+    мж.стиль = document.createElement("style");
+    document.head.appendChild(мж.стиль);
+};
+
+мж.показалиНазвание = new Уведомитель();
+мж.скрываемНазвание = new Уведомитель();
+мж.показатьНазвание = function()
+{
+    var html = `
+<div id="bg" class="fade-out-3">
+    <div class="center">
+        <center>
+            <h1 class="begin-transparent fade-in-1">Маджонг</h1>
+            <p class="nowrap begin-transparent fade-in-2">открытая игра</p>
+        </center>
+    </div>
+</div>
+    `;
+
+    var css = `
+#bg
+{
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: white;
+}
+
+.begin-transparent
+{
+    opacity: 0;
+}
+
+.center
+{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+}
+
+
+.fade-in-1
+{
+    animation: fadeIn 2.5s ease;
+    animation-delay: 0.5s;
+    animation-fill-mode: forwards;
+}
+
+.fade-in-2
+{
+    animation: fadeIn 1s ease;
+    animation-delay: 1.5s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes fadeIn
+{
+    from
+    {
+        opacity: 0;
+    }
+    to
+    {
+        opacity: 1;
+    }
+}
+
+.fade-out-3
+{
+    animation: fadeOut 1s ease;
+    animation-delay: 3s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes fadeOut
+{
+    from
+    {
+        opacity: 1;
+    }
+    to
+    {
+        opacity: 0;
+    }
+}
+
+    `;
+    
+    var заставка = мж.создатьЭкран();
+    заставка.innerHTML = html;
+    мж.стиль.innerHTML += css;
+    document.body.appendChild(заставка);
+    
+    var фон = document.getElementById("bg");
+    var колво = 0;
+    фон.addEventListener(
+        "animationend",
+        function()
+        {
+            ++колво;
+            if (колво == 2)
+            {
+                мж.скрываемНазвание.уведомить();
+            }
+            else if (колво == 3)
+            {
+                мж.показалиНазвание.уведомить();
+                document.body.removeChild(заставка);
+            }
+        }
+    );
+};