From 42a977ea7dea2be4d054f41ca778d73c08e4a467 Mon Sep 17 00:00:00 2001
From: Anatoly Kopyl <akopyl@radner.ru>
Date: Tue, 1 Sep 2020 16:06:47 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=BE=D0=B2=D1=8B=D0=B9=20=D0=B4=D0=B8?=
 =?UTF-8?q?=D0=B7=D0=B0=D0=B9=D0=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 favicon.ico  | Bin 0 -> 15406 bytes
 index.html   |  21 +++++++++++--
 main.js      |  13 ++++++++
 package.json |   2 +-
 style.css    |  83 +++++++++++++++++++++++++++++++++++++++++++++++----
 5 files changed, 110 insertions(+), 9 deletions(-)
 create mode 100644 favicon.ico
 create mode 100644 main.js

diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..7f115d9383b175673791095455567df18d5d6612
GIT binary patch
literal 15406
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
DTkv^=

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index d7d9b86..73c193a 100644
--- a/index.html
+++ b/index.html
@@ -4,10 +4,27 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Статус</title>
-    <link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
     <link href="style.css" rel="stylesheet">
 </head>
 <body>
-    <a href="http://status.anatolykopyl.ru/update">Обнови мой эмодзи статус!</a>
+    <a class="big" href="http://status.anatolykopyl.ru:5001/update">Обновить Толин эмодзи статус!</a>
+    <div class="links-container">
+        <p>Другие мои сайты:</p>
+        <div class="links">
+            <a href="https://anatolykopyl.ru">Обо мне</a>
+            <a href="https://atolchek.anatolykopyl.ru">Булочная</a>
+            <a href="https://groupanal.ru">Анализ Групп</a>
+        </div>
+    </div>
+
+    <a id="hint-link" onclick="showHint()">Что это?</a>
+    <div id="hint-div">
+        При каждом нажатии на большую кнопку мне дается новый случайно выбранный эмодзи статус. 
+        Открой <a href="https://vk.com/akopyl" target="_blank">vk.com/akopyl</a>, нажми на кнопку на этом сайте и обнови мою страницу!
+    </div>
+
+    <script src="main.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..e315716
--- /dev/null
+++ b/main.js
@@ -0,0 +1,13 @@
+function showHint() {
+    console.log(document.getElementById("hint-div").style.display);
+
+    if (document.getElementById("hint-div").style.display == "block") {
+        document.getElementById("hint-div").style.display = "none";
+        document.getElementById("hint-link").innerHTML = "Что это?";
+        document.getElementById("hint-link").style.color = "#dddddd";
+    } else {
+        document.getElementById("hint-div").style.display = "block";
+        document.getElementById("hint-link").innerHTML = "Понял";
+        document.getElementById("hint-link").style.color = "black";
+    }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index a5bf104..2540db2 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "covid",
+  "name": "emoji-status",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
diff --git a/style.css b/style.css
index 35ead8a..df42db1 100644
--- a/style.css
+++ b/style.css
@@ -1,20 +1,91 @@
 * {
-    font-family: 'Russo One', sans-serif;
-    color: lightgray;
-    background-color: #597da3;
+    font-family: 'Open Sans', sans-serif;
+}
+html {
+    height: 100%;
 }
 
 body {
     height: 100%;
+    margin: 0px;
     text-align: center;
-    margin-top: 20%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #597da3;
 }
 
 a {
     text-decoration: none;
-    font-size: xx-large;
 }
 
-a:hover {
+a.big {
+    margin: 20vh;
+    font-size: xx-large;
+    transition: transform .2s;
     color: white;
+    font-weight: 600;
+}
+
+a.big:hover {
+    transform: scale(1.04);
+}
+
+div.links-container {
+    margin-top: 10vh;
+    margin-bottom: 10vh;
+    color: #dddddd;
+    text-align: left;
+}
+
+div.links-container p {
+    font-weight: lighter;
+    margin-bottom: 5px;
+}
+
+div.links {
+    background-color: white;
+    padding: 10px;
+    border-radius: 8px;
+    filter: drop-shadow(2px 2px 4px rgb(0, 0, 0, 0.4));
+}
+
+div.links a {
+    margin-left: 10px;
+    margin-right: 10px;
+    color: black;
+    border-width: 0px 0px 1px 0px;
+    border-style: solid;
+    border-color: transparent;
+}
+
+div.links a:hover {
+    border-width: 0px 0px 2px 0px;
+    border-color: #597da390;
+    padding-bottom: 8px;
+}
+
+#hint-link {
+    position: absolute;
+    bottom: 2vh;
+    right: 2vh;
+    font-weight: lighter;
+    color: #dddddd;
+    font-size: small;
+    text-decoration: underline;
+    z-index: 10;
+}
+
+#hint-div {
+    display: none;
+    position: absolute;
+    bottom: 0px;
+    background-color: white;
+    font-weight: lighter;
+    width: 60%;
+    padding-left: 40%;
+    padding-right: 40%;
+    padding-top: 1vh;
+    padding-bottom: 1vh;
 }
\ No newline at end of file