From 76a11bebdefc5947755af3e4eab66a177c4ebfd9 Mon Sep 17 00:00:00 2001
From: Kramarovskyi Danylo <Danylo.Kramarovskyi@infiz.khpi.edu.ua>
Date: Tue, 22 Oct 2024 04:34:12 +0300
Subject: [PATCH] add ukrainian versions

---
 html/about_en.html        |   2 +-
 html/about_ua.html        | 129 +++++++++---
 html/downloads_en.html    |   8 +-
 html/downloads_ua.html    | 129 ++++++++++--
 html/home_ua.html         | 198 ++++++++++++-------
 html/instructions_en.html | 398 +++++++++++++++++---------------------
 html/instructions_ua.html | 198 +++++++++++++++++--
 html/publications_en.html |  11 +-
 html/publications_ua.html | 129 ++++++++++--
 9 files changed, 820 insertions(+), 382 deletions(-)
diff --git a/html/about_en.html b/html/about_en.html
index 212c34f..5dfeb1e 100644
--- a/html/about_en.html
+++ b/html/about_en.html
@@ -70,7 +70,7 @@
               </button>
               <ul class="dropdown-menu " aria-labelledby="dropdownMenuButton">
                 <li class="dropdown-item">
-                  <a class="dropdown-item first enable" href="#">EN</a>
+                  <a class="dropdown-item first enable" href="../html/about_en.html">EN</a>
                 </li>
                 <li class="dropdown-item">
                   <a class="dropdown-item" href="about_ua.html">UA</a>
diff --git a/html/about_ua.html b/html/about_ua.html
index 6829611..9e02c20 100644
--- a/html/about_ua.html
+++ b/html/about_ua.html
@@ -1,22 +1,28 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>About us</title>
 
-    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
+<html lang="uk">
 
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-  </head>
-  <body style=" color: white; background-color: #EAF5FF; height: 100vh;"
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <title>Про проєкт</title>
+
+  <link href="../css/header_footer.css" rel="stylesheet" />
+  <link href="../css/about.css" rel="stylesheet" />
+  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
+
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+</head>
+
+<body style=" color: white; background-color: #EAF5FF; height: 100vh;"
   class="ink-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">
   <header>
     <nav class="navbar navbar-expand-xl navbar-dark bg-header pl-5 pr-5 pt-3 pb-3 border-bottom border-dark">
-      <a class="navbar-brand " href="../home_en.html">
+      <a class="navbar-brand " href="../html/home_ua.html">
         <img src="../img/matico.png" alt="" width="35" height="35" class="d-inline-block align-text-top"> MatViz3D
       </a>
       <li class="language-button-mobile nav-item ml-auto mr-3 ">
@@ -27,10 +33,10 @@
           </button>
           <ul class="dropdown-menu " aria-labelledby="dropdownMenuButton">
             <li class="dropdown-item">
-              <a class="dropdown-item first enable" href="../home_en.html">EN</a>
+              <a class="dropdown-item first " href="../home_en.html">EN</a>
             </li>
             <li class="dropdown-item">
-              <a class="dropdown-item" href="html/home_ua.html">UA</a>
+              <a class="dropdown-item enable" href="html/home_ua.html">UA</a>
             </li>
           </ul>
         </div>
@@ -42,19 +48,19 @@
       <div class="collapse navbar-collapse" id="navbarNav">
         <ul class="navbar-nav ml-auto">
           <li class="nav-item ml-1 mr-1 ">
-            <a class="nav-link hovering" href="../home_en.html">Home</a>
+            <a class="nav-link hovering" href="../html/home_ua.html">Головна</a>
           </li>
           <li class="nav-item ml-1 mr-1">
-            <a class="nav-link hovering active" href="about_en.html">About</a>
+            <a class="nav-link hovering active" href="about_ua.html">Про проєкт</a>
           </li>
           <li class="nav-item ml-1 mr-1">
-            <a class="nav-link hovering" href="instructions_en.html">How To Use</a>
+            <a class="nav-link hovering" href="instructions_ua.html">Як користуватися</a>
           </li>
           <li class="nav-item  ml-1 mr-1">
-            <a class="nav-link hovering" href="downloads_en.html">Versions & Installation</a>
+            <a class="nav-link hovering" href="downloads_ua.html">Версії та Завантаження</a>
           </li>
           <li class="nav-item  ml-1 mr-1">
-            <a class="nav-link hovering" href="publications_en.html">Scientific Publications</a>
+            <a class="nav-link hovering" href="publications_ua.html">Наукові публікації</a>
           </li>
           <li class="language-button nav-item  ml-1 mr-1">
             <div class="dropdown">
@@ -64,10 +70,10 @@
               </button>
               <ul class="dropdown-menu " aria-labelledby="dropdownMenuButton">
                 <li class="dropdown-item">
-                  <a class="dropdown-item first enable" href="#">EN</a>
+                  <a class="dropdown-item first" href="../html/about_en.html">EN</a>
                 </li>
                 <li class="dropdown-item">
-                  <a class="dropdown-item" href="about_ua.html">UA</a>
+                  <a class="dropdown-item enable" href="about_ua.html">UA</a>
                 </li>
               </ul>
             </div>
@@ -76,7 +82,73 @@
       </div>
     </nav>
   </header>
-  
+  <div class="content">
+    <div class="main-heading-cont">
+      <p class="main-heading">
+        MatViz3D — це інструмент для моделювання та візуалізації мікроструктур матеріалів з використанням клітинних автоматів. Проєкт був розроблений кафедрою математичного моделювання та інтелектуальних обчислень НТУ "ХПІ" і доступний на GitHub.
+      </p>
+    </div>
+    <div class="infopole">
+      <div class="left-container">
+        <div class="gif-cont">
+          <img src="../img/3d.gif" class="zd-gif">
+        </div>
+        <p class="key-features">
+          Основні можливості
+        </p>
+        <div class="list-cont">
+          <ol>
+            <li>
+              <span class="list-point">Візуалізація мікроструктур у форматі 3D для детального аналізу.</span>
+            </li>
+            <li>
+              <span class="list-point">Можливість збільшення та повороту куба матеріалу для огляду.</span>
+            </li>
+            <li>
+              <span class="list-point">Збереження зображень у різних форматах для документації.</span>
+            </li>
+            <li>
+              <span class="list-point">Перегляд гістограми розподілу об'єму зерен.</span>
+            </li>
+            <li>
+              <span class="list-point">Анімації генерації мікроструктур.</span>
+            </li>
+            <li>
+              <span class="list-point">Вибір алгоритмів для аналізу мікроструктури матеріалів.</span>
+            </li>
+          </ol>
+        </div>
+      </div>
+      <div class="right-container">
+        <div class="gif-cont">
+          <img src="../img/people.gif" class="zd-gif">
+        </div>
+        <p class="key-features">
+          Цільова аудиторія
+        </p>
+        <div class="qwe">
+          <div class="textcent">
+            <div class="list-cont">
+              <ol>
+                <li>
+                  <span class="list-point">Матеріалознавці та інженери — дослідники мікроструктур матеріалів для покращення їх властивостей.</span>
+                </li>
+                <li>
+                  <span class="list-point">Академіки — професори, аспіранти та науковці технічних університетів.</span>
+                </li>
+                <li>
+                  <span class="list-point">Механіки — професіонали, що аналізують поведінку матеріалів під навантаженням.</span>
+                </li>
+                <li>
+                  <span class="list-point">Спеціалісти з комп'ютерного моделювання — для 3D-візуалізації та аналізу складних структур.</span>
+                </li>
+              </ol>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
   <footer class="border-top border-dark">
     <div class="left-footer-cont">
       <div class="footer-content ml-5">
@@ -84,9 +156,7 @@
           MatViz3D
         </a>
         <p>
-          Department of Mathematical Modeling and Intelligent Computing in Engineering (MMI), NTU "KhPI", st. 2
-          Kyrpychova
-          Ave., c. Kharkiv, Ukraine, 61002
+          Кафедра математичного моделювання та інтелектуальних обчислень у інженерії (ММІ), НТУ "ХПІ", вул. 2 Кирпичова, м. Харків, Україна, 61002
         </p>
         <p>
           post.matviz3d@gmail.com
@@ -96,16 +166,17 @@
     <div class="right-footer-cont">
       <div class="footer-links mr-5">
         <a href="https://web.kpi.kharkov.ua/dpm/uk/istoriya-kafedri/">
-          About the Department
+          Про кафедру
         </a>
         <a href="#">
-          Team
+          Команда
         </a>
         <a href="https://web.kpi.kharkov.ua/dpm/uk/kontaktna-informatsiya-kafedri/">
-          Contact
+          Контакти
         </a>
       </div>
     </div>
   </footer>
 </body>
+
 </html>
diff --git a/html/downloads_en.html b/html/downloads_en.html
index c8694e9..17355bb 100644
--- a/html/downloads_en.html
+++ b/html/downloads_en.html
@@ -33,10 +33,10 @@
           </button>
           <ul class="dropdown-menu " aria-labelledby="dropdownMenuButton">
             <li class="dropdown-item">
-              <a class="dropdown-item first enable" href="../home_en.html">EN</a>
+              <a class="dropdown-item first enable" href="../html/downloads_en.html">EN</a>
             </li>
             <li class="dropdown-item">
-              <a class="dropdown-item" href="html/home_ua.html">UA</a>
+              <a class="dropdown-item" href="../html/downloads_ua.html">UA</a>
             </li>
           </ul>
         </div>
@@ -70,10 +70,10 @@
               </button>
               <ul class="dropdown-menu " aria-labelledby="dropdownMenuButton">
                 <li class="dropdown-item">
-                  <a class="dropdown-item first enable" href="#">EN</a>
+                  <a class="dropdown-item first enable" href="downloads_en.html">EN</a>
                 </li>
                 <li class="dropdown-item">
-                  <a class="dropdown-item" href="about_ua.html">UA</a>
+                  <a class="dropdown-item" href="downloads_ua.html">UA</a>
                 </li>
               </ul>
             </div>
diff --git a/html/downloads_ua.html b/html/downloads_ua.html
index 5946a68..29e011e 100644
--- a/html/downloads_ua.html
+++ b/html/downloads_ua.html
@@ -1,21 +1,118 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Downloads</title>
 
-    <link
-      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
-      rel="stylesheet"
-    />
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <title>Завантаження</title>
+
+  <link href="../css/header_footer.css" rel="stylesheet" />
+  <link href="../css/downloads.css" rel="stylesheet" />
+  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
+
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+</head>
+
+<body style="background-color: #EAF5FF; height: 100vh;"
+  class="ink-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">
+  <header>
+    <nav class="navbar navbar-expand-xl navbar-dark bg-header pl-5 pr-5 pt-3 pb-3 border-bottom border-dark">
+      <a class="navbar-brand " href="../html/home_ua.html">
+        <img src="../img/matico.png" alt="" width="35" height="35" class="d-inline-block align-text-top"> MatViz3D
+      </a>
+      <li class="language-button-mobile nav-item ml-auto mr-3 ">
+        <div class="dropdown">
+          <button class="btn d-flex align-items-center" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"
+            aria-expanded="false">
+            <img src="../img/globe-icon.png" alt="" class="globe-icon">
+          </button>
+          <ul class="dropdown-menu " aria-labelledby="dropdownMenuButton">
+            <li class="dropdown-item">
+              <a class="dropdown-item first enable" href="../html/downloads_en.html">EN</a>
+            </li>
+            <li class="dropdown-item">
+              <a class="dropdown-item" href="../html/downloads_ua.html">UA</a>
+            </li>
+          </ul>
+        </div>
+      </li>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
+        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav ml-auto">
+          <li class="nav-item ml-1 mr-1 ">
+            <a class="nav-link hovering" href="../html/home_ua.html">Головна</a>
+          </li>
+          <li class="nav-item ml-1 mr-1">
+            <a class="nav-link hovering " href="about_ua.html">Про проєкт</a>
+          </li>
+          <li class="nav-item ml-1 mr-1">
+            <a class="nav-link hovering" href="instructions_ua.html">Як користуватися</a>
+          </li>
+          <li class="nav-item  ml-1 mr-1">
+            <a class="nav-link hovering active" href="downloads_ua.html">Версії та встановлення</a>
+          </li>
+          <li class="nav-item  ml-1 mr-1">
+            <a class="nav-link hovering" href="publications_ua.html">Наукові публікації</a>
+          </li>
+          <li class="language-button nav-item  ml-1 mr-1">
+            <div class="dropdown">
+              <button class="btn d-flex align-items-center" type="button" id="dropdownMenuButton"
+                data-bs-toggle="dropdown" aria-expanded="false">
+                <img src="../img/globe-icon.png" alt="" class="globe-icon">
+              </button>
+              <ul class="dropdown-menu " aria-labelledby="dropdownMenuButton">
+                <li class="dropdown-item">
+                  <a class="dropdown-item first " href="../html/downloads_en.html">EN</a>
+                </li>
+                <li class="dropdown-item">
+                  <a class="dropdown-item enable" href="../html/downloads_ua.html">UA</a>
+                </li>
+              </ul>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  </header>
+<div class="content">
+  
+</div>
+  <footer class="border-top border-dark">
+    <div class="left-footer-cont">
+      <div class="footer-content ml-5">
+        <a href="https://github.com/MME-NTU-KhPI/MatViz3D" target="_blank">
+          MatViz3D
+        </a>
+        <p>
+          Кафедра математичного моделювання та інтелектуальних обчислень в інженерії (ММІ), НТУ "ХПІ", вул. Кирпичова,
+          2, м. Харків, Україна, 61002
+        </p>
+        <p>
+          post.matviz3d@gmail.com
+        </p>
+      </div>
+    </div>
+    <div class="right-footer-cont">
+      <div class="footer-links mr-5">
+        <a href="https://web.kpi.kharkov.ua/dpm/uk/istoriya-kafedri/">
+          Про кафедру
+        </a>
+        <a href="#">
+          Команда
+        </a>
+        <a href="https://web.kpi.kharkov.ua/dpm/uk/kontaktna-informatsiya-kafedri/">
+          Контакти
+        </a>
+      </div>
+    </div>
+  </footer>
+</body>
 
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-  </head>
-  <body>
-   <h2>DOWNLOAD AND VERSIONS PAGE</h2>
-  </body>
 </html>
diff --git a/html/home_ua.html b/html/home_ua.html
index 23aad9e..8d1bd26 100644
--- a/html/home_ua.html
+++ b/html/home_ua.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 
-<html lang="ua">
+<html lang="uk">
 
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>Головна</title>
-  
+
   <link href="../css/header_footer.css" rel="stylesheet" />
   <link href="../css/home.css" rel="stylesheet" />
   <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
@@ -18,87 +18,145 @@
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
 </head>
 
-<body style=" color: white; background: linear-gradient(126deg, #0A0B14 50%, #171C27 70%, #2E3B4B 100%); height: 100vh;"
-  class="ink-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">
+<body style="
+      color: white;
+      background: linear-gradient(
+        126deg,
+        #0a0b14 50%,
+        #171c27 70%,
+        #2e3b4b 100%
+      );
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      min-height: 100vh;
+      margin: 0;
+      padding: 0;
+    " class="ink-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">
   <header>
-  <nav class="navbar navbar-expand-xl navbar-dark bg-header pl-5 pr-5 pt-3 pb-3 border-bottom border-dark">
-    <a class="navbar-brand " href="home_ua.html">
-      <img src="../img/matico.png" alt="" width="35" height="35" class="d-inline-block align-text-top"> MatViz3D
-    </a>
-    <li class="language-button-mobile nav-item ml-auto mr-3">
-      <div class="dropdown">
-        <button class="btn d-flex align-items-center" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
-          <img src="../img/globe-icon.png" alt="" class="globe-icon">
-        </button>
-        <ul class="dropdown-menu " aria-labelledby="dropdownMenuButton">
-          <li class="dropdown-item">
-            <a class="dropdown-item first" href="../home_en.html">EN</a>
+    <nav class="navbar navbar-expand-xl navbar-dark bg-header pl-5 pr-5 pt-3 pb-3 border-bottom border-dark">
+      <a class="navbar-brand" href="home_ua.html">
+        <img src="../img/matico.png" alt="" width="35" height="35" class="d-inline-block align-text-top" />
+        MatViz3D
+      </a>
+      <li class="language-button-mobile nav-item ml-auto mr-3">
+        <div class="dropdown">
+          <button class="btn d-flex align-items-center" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"
+            aria-expanded="false">
+            <img src="../img/globe-icon.png" alt="" class="globe-icon" />
+          </button>
+          <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+            <li class="dropdown-item">
+              <a class="dropdown-item first" href="../home_en.html">EN</a>
+            </li>
+            <li class="dropdown-item">
+              <a class="dropdown-item enable" href="../html/home_ua.html">UA</a>
+            </li>
+          </ul>
+        </div>
+      </li>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
+        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav ml-auto">
+          <li class="nav-item active ml-1 mr-1">
+            <a class="nav-link hovering" href="../home_ua.html">Головна</a>
           </li>
-          <li class="dropdown-item">
-            <a class="dropdown-item enable" href="#">UA</a>
+          <li class="nav-item ml-1 mr-1">
+            <a class="nav-link hovering" href="../html/about_ua.html">Про проєкт</a>
           </li>
-        </ul>
-      </div>
-    </li>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
-      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarNav">
-      <ul class="navbar-nav ml-auto">
-        <li class="nav-item active ml-1 mr-1 ">
-          <a class="nav-link hovering" href="#">Головна</a>
-        </li>
-        <li class="nav-item ml-1 mr-1">
-          <a class="nav-link hovering" href="#">Про нас</a>
-        </li>
-        <li class="nav-item ml-1 mr-1">
-          <a class="nav-link hovering" href="#">Як користуватись</a>
-        </li>
-        <li class="nav-item  ml-1 mr-1">
-          <a class="nav-link hovering" href="#">Версії та Встановлення</a>
-        </li>
-        <li class="nav-item  ml-1 mr-1">
-          <a class="nav-link hovering" href="#">Наукові публікації</a>
-        </li>
-        <li class="language-button nav-item  ml-1 mr-1">
+          <li class="nav-item ml-1 mr-1">
+            <a class="nav-link hovering" href="../html/instructions_ua.html">Як користуватися</a>
+          </li>
+          <li class="nav-item ml-1 mr-1">
+            <a class="nav-link hovering" href="../html/downloads_ua.html">Версії та Завантаження</a>
+          </li>
+          <li class="nav-item ml-1 mr-1">
+            <a class="nav-link hovering" href="../html/publications_ua.html">Наукові публікації</a>
+          </li>
+          <li class="language-button nav-item ml-1 mr-1">
             <div class="dropdown">
-              <button class="btn d-flex align-items-center" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
-                <img src="../img/globe-icon.png" alt="" class="globe-icon">
+              <button class="btn d-flex align-items-center" type="button" id="dropdownMenuButton"
+                data-bs-toggle="dropdown" aria-expanded="false">
+                <img src="../img/globe-icon.png" alt="" class="globe-icon" />
               </button>
-              <ul class="dropdown-menu " aria-labelledby="dropdownMenuButton">
+              <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                 <li class="dropdown-item">
                   <a class="dropdown-item first" href="../home_en.html">EN</a>
                 </li>
                 <li class="dropdown-item">
-                  <a class="dropdown-item enable" href="#">UA</a>
+                  <a class="dropdown-item enable" href="../html/home_ua.html">UA</a>
                 </li>
               </ul>
             </div>
-        </li>
-      </ul>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  </header>
+  <div class="content">
+    <div class="heading-cont">
+      <h3 class="h3 ml-5 mt-5 mr-5">
+        Інструмент для 3D моделювання та візуалізації мікроструктур
+      </h3>
+      <br />
+    </div>
+    <div class="cont">
+      <div class="main-left">
+        <br />
+        <div class="text-cont">
+          <p class="ml-5">
+            Це потужне програмне забезпечення для створення та візуалізації
+            мікроструктур за допомогою клітинних автоматів. Інструмент дозволяє
+            моделювати складні структури матеріалів, анімацію процесу їх
+            утворення та детальний аналіз.
+          </p>
+        </div>
+        <div class="main-right-mobile">
+          <div class="cube-pic-cont">
+            <img src="../img/cube-pic.png" alt="" class="cube-pic" />
+          </div>
+        </div>
+        <div class="button-cont">
+          <a target="_blank" href="https://github.com/MME-NTU-KhPI/MatViz3D">
+            <button class="download-button-ua ml-5"></button>
+          </a>
+        </div>
+      </div>
+      <div class="main-right">
+        <div class="cube-pic-cont">
+          <img src="../img/cube-pic.png" alt="" class="cube-pic" />
+        </div>
+      </div>
     </div>
-  </nav>
-</header>
-<div class="heading-cont">
-  <h3 class="h3 ml-5 mt-5">Інструмент для 3D моделювання та візуалізації мікроструктур</h3><br>
-</div>
-<div class="cont">
-  <div class="main-left">
-    <br>
-    <p class="ml-5 ">Це потужне програмне забезпечення для створення і візуалізації мікроструктур за допомогою клітинних автоматів. Інструмент дозволяє моделювати складні структури матеріалів, анімацію процесу їх формування та детальний аналіз.</p>
-    <div class="button-cont">
-      <button class="download-button-ua ml-5">
-      </button>
-  </div>
-    
-  </div>
-  <div class="main-right">
-    <img src="../img/cube-pic.png" alt="" class="cube-pic">
   </div>
-</div>
-<footer class="border-top border-dark">
-
-</footer>
+  <footer class="border-top border-dark">
+    <div class="left-footer-cont">
+      <div class="footer-content ml-5">
+        <a href="https://github.com/MME-NTU-KhPI/MatViz3D" target="_blank">
+          MatViz3D
+        </a>
+        <p>
+          Кафедра математичного моделювання та інтелектуальних обчислень в
+          інженерії (ММІ), НТУ "ХПІ", вул. Кирпичова, 2, м. Харків, Україна, 61002
+        </p>
+        <p>post.matviz3d@gmail.com</p>
+      </div>
+    </div>
+    <div class="right-footer-cont">
+      <div class="footer-links mr-5">
+        <a href="https://web.kpi.kharkov.ua/dpm/uk/istoriya-kafedri/">
+          Про кафедру
+        </a>
+        <a href="#"> Команда </a>
+        <a href="https://web.kpi.kharkov.ua/dpm/uk/kontaktna-informatsiya-kafedri/">
+          Контакти
+        </a>
+      </div>
+    </div>
+  </footer>
 </body>
+
 </html>
diff --git a/html/instructions_en.html b/html/instructions_en.html
index e0ad790..fa9c653 100644
--- a/html/instructions_en.html
+++ b/html/instructions_en.html
@@ -1,244 +1,194 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>How To Use</title>
 
-    <link href="../css/header_footer.css" rel="stylesheet" />
-    <link href="../css/instructions.css" rel="stylesheet" />
-    <link
-      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
-      rel="stylesheet"
-    />
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <title>How To Use</title>
 
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
-  </head>
-  <body
-    style="background-color: #eaf5ff; height: 100vh"
-    class="ink-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover"
-  >
-    <header>
-      <nav
-        class="navbar navbar-expand-xl navbar-dark bg-header pl-5 pr-5 pt-3 pb-3 border-bottom border-dark"
-      >
-        <a class="navbar-brand" href="../home_en.html">
-          <img
-            src="../img/matico.png"
-            alt=""
-            width="35"
-            height="35"
-            class="d-inline-block align-text-top"
-          />
-          MatViz3D
-        </a>
-        <li class="language-button-mobile nav-item ml-auto mr-3">
-          <div class="dropdown">
-            <button
-              class="btn d-flex align-items-center"
-              type="button"
-              id="dropdownMenuButton"
-              data-bs-toggle="dropdown"
-              aria-expanded="false"
-            >
-              <img src="../img/globe-icon.png" alt="" class="globe-icon" />
-            </button>
-            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-              <li class="dropdown-item">
-                <a class="dropdown-item first enable" href="../home_en.html"
-                  >EN</a
-                >
-              </li>
-              <li class="dropdown-item">
-                <a class="dropdown-item" href="html/home_ua.html">UA</a>
-              </li>
-            </ul>
-          </div>
-        </li>
-        <button
-          class="navbar-toggler"
-          type="button"
-          data-toggle="collapse"
-          data-target="#navbarNav"
-          aria-controls="navbarNav"
-          aria-expanded="false"
-          aria-label="Toggle navigation"
-        >
-          <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarNav">
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item ml-1 mr-1">
-              <a class="nav-link hovering" href="../home_en.html">Home</a>
+  <link href="../css/header_footer.css" rel="stylesheet" />
+  <link href="../css/instructions.css" rel="stylesheet" />
+  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
+
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+</head>
+
+<body style="background-color: #eaf5ff; height: 100vh"
+  class="ink-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">
+  <header>
+    <nav class="navbar navbar-expand-xl navbar-dark bg-header pl-5 pr-5 pt-3 pb-3 border-bottom border-dark">
+      <a class="navbar-brand" href="../home_en.html">
+        <img src="../img/matico.png" alt="" width="35" height="35" class="d-inline-block align-text-top" />
+        MatViz3D
+      </a>
+      <li class="language-button-mobile nav-item ml-auto mr-3">
+        <div class="dropdown">
+          <button class="btn d-flex align-items-center" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"
+            aria-expanded="false">
+            <img src="../img/globe-icon.png" alt="" class="globe-icon" />
+          </button>
+          <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+            <li class="dropdown-item">
+              <a class="dropdown-item first enable" href="../html/instructions_en.html">EN</a>
             </li>
-            <li class="nav-item ml-1 mr-1">
-              <a class="nav-link hovering" href="about_en.html">About</a>
+            <li class="dropdown-item">
+              <a class="dropdown-item" href="../html/instructions_ua.html">UA</a>
+            </li>
+          </ul>
+        </div>
+      </li>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
+        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav ml-auto">
+          <li class="nav-item ml-1 mr-1">
+            <a class="nav-link hovering" href="../home_en.html">Home</a>
+          </li>
+          <li class="nav-item ml-1 mr-1">
+            <a class="nav-link hovering" href="about_en.html">About</a>
+          </li>
+          <li class="nav-item ml-1 mr-1">
+            <a class="nav-link hovering active" href="instructions_en.html">How To Use</a>
+          </li>
+          <li class="nav-item ml-1 mr-1">
+            <a class="nav-link hovering" href="downloads_en.html">Versions & Installation</a>
+          </li>
+          <li class="nav-item ml-1 mr-1">
+            <a class="nav-link hovering" href="publications_en.html">Scientific Publications</a>
+          </li>
+          <li class="language-button nav-item ml-1 mr-1">
+            <div class="dropdown">
+              <button class="btn d-flex align-items-center" type="button" id="dropdownMenuButton"
+                data-bs-toggle="dropdown" aria-expanded="false">
+                <img src="../img/globe-icon.png" alt="" class="globe-icon" />
+              </button>
+              <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                <li class="dropdown-item">
+                  <a class="dropdown-item first enable" href="#">EN</a>
+                </li>
+                <li class="dropdown-item">
+                  <a class="dropdown-item" href="about_ua.html">UA</a>
+                </li>
+              </ul>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  </header>
+  <div class="content">
+    <div class="main-heading-cont">
+      <p class="main-heading">
+        A special MatViz3D application was developed for computer modeling of
+        the process of crystallization and generation of microstructures. The
+        main advantages of the application are: three-dimensional generation
+        of microstructures, which allows researchers to obtain detailed and
+        realistic images of the structure of the material, the selection of
+        the neighborhood of cells for the variety of generation, and the
+        possibility of following the step-by-step process of crystallization.
+        Overall, MatViz3D is a powerful tool for modeling, analyzing and
+        visualizing the microstructures of materials using a variety of
+        approaches and techniques.
+      </p>
+    </div>
+    <div class="heading-cont">
+      <p class="heading">Instructions for using the program</p>
+    </div>
+    <div class="main-cont">
+      <div class="left-cont">
+        <div class="list-cont">
+          <ol>
+            <li>
+              <span class="instruction-text">Launch the application</span>
             </li>
-            <li class="nav-item ml-1 mr-1">
-              <a class="nav-link hovering active" href="instructions_en.html"
-                >How To Use</a
-              >
+            <li>
+              <span class="instruction-text">Enter the size of the cube and the number of initial
+                points</span>
             </li>
-            <li class="nav-item ml-1 mr-1">
-              <a class="nav-link hovering" href="downloads_en.html"
-                >Versions & Installation</a
-              >
+            <li>
+              <span class="instruction-text">Select an algorithm for analyzing material microstructure and
+                press the START button</span>
             </li>
-            <li class="nav-item ml-1 mr-1">
-              <a class="nav-link hovering" href="publications_en.html"
-                >Scientific Publications</a
-              >
+            <li>
+              <span class="instruction-text">Explore the 3D microstructure visualization. Zoom and rotate
+                for a detailed view</span>
             </li>
-            <li class="language-button nav-item ml-1 mr-1">
-              <div class="dropdown">
-                <button
-                  class="btn d-flex align-items-center"
-                  type="button"
-                  id="dropdownMenuButton"
-                  data-bs-toggle="dropdown"
-                  aria-expanded="false"
-                >
-                  <img src="../img/globe-icon.png" alt="" class="globe-icon" />
-                </button>
-                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                  <li class="dropdown-item">
-                    <a class="dropdown-item first enable" href="#">EN</a>
-                  </li>
-                  <li class="dropdown-item">
-                    <a class="dropdown-item" href="about_ua.html">UA</a>
-                  </li>
-                </ul>
-              </div>
+            <li>
+              <span class="instruction-text">Save images for documentation</span>
             </li>
-          </ul>
+          </ol>
         </div>
-      </nav>
-    </header>
-    <div class="content">
-      <div class="main-heading-cont">
-        <p class="main-heading">
-          A special MatViz3D application was developed for computer modeling of
-          the process of crystallization and generation of microstructures. The
-          main advantages of the application are: three-dimensional generation
-          of microstructures, which allows researchers to obtain detailed and
-          realistic images of the structure of the material, the selection of
-          the neighborhood of cells for the variety of generation, and the
-          possibility of following the step-by-step process of crystallization.
-          Overall, MatViz3D is a powerful tool for modeling, analyzing and
-          visualizing the microstructures of materials using a variety of
-          approaches and techniques.
-        </p>
       </div>
-      <div class="heading-cont">
-        <p class="heading">Instructions for using the program</p>
+      <div class="right-cont">
+        <div class="gif-cont">
+          <img src="../img/how-to-use.gif " class="how-to-use-gif" />
+        </div>
       </div>
-      <div class="main-cont">
-        <div class="left-cont">
-          <div class="list-cont">
-            <ol>
-              <li>
-                <span class="instruction-text">Launch the application</span>
-              </li>
-              <li>
-                <span class="instruction-text"
-                  >Enter the size of the cube and the number of initial
-                  points</span
-                >
-              </li>
-              <li>
-                <span class="instruction-text"
-                  >Select an algorithm for analyzing material microstructure and
-                  press the START button</span
-                >
-              </li>
-              <li>
-                <span class="instruction-text"
-                  >Explore the 3D microstructure visualization. Zoom and rotate
-                  for a detailed view</span
-                >
-              </li>
-              <li>
-                <span class="instruction-text"
-                  >Save images for documentation</span
-                >
-              </li>
-            </ol>
-          </div>
+    </div>
+    <div class="heading-cont">
+      <p class="heading">Examples</p>
+    </div>
+    <div class="heading-cont">
+      <p class="subtitle">Analyzing Material Structure Using Algorithms</p>
+    </div>
+    <div class="show-button-cont">
+      <button class="show-button" id="show-button"></button>
+      <label for="show-button" class="show-button-arrow" id="show-button-arrow">^</label>
+    </div>
+    <div class="gifs-cont">
+      <div class="methods-gifs-cont" id="methods-gifs-cont">
+        <div class="method-cont">
+          <img class="method-gif" src="../img/von Neumann.gif" />
+          <p>von Neumann</p>
         </div>
-        <div class="right-cont">
-          <div class="gif-cont">
-            <img src="../img/how-to-use.gif " class="how-to-use-gif" />
-          </div>
+        <div class="method-cont">
+          <img class="method-gif" src="../img/Probability Circle.gif" />
+          <p>Probability Circle</p>
         </div>
-      </div>
-      <div class="heading-cont">
-        <p class="heading">Examples</p>
-      </div>
-      <div class="heading-cont">
-        <p class="subtitle">Analyzing Material Structure Using Algorithms</p>
-      </div>
-      <div class="show-button-cont">
-        <button class="show-button" id="show-button"></button>
-        <label
-          for="show-button"
-          class="show-button-arrow"
-          id="show-button-arrow"
-          >^</label
-        >
-      </div>
-      <div class="gifs-cont">
-        <div class="methods-gifs-cont" id="methods-gifs-cont">
-          <div class="method-cont">
-            <img class="method-gif" src="../img/von Neumann.gif" />
-            <p>von Neumann</p>
-          </div>
-          <div class="method-cont">
-            <img class="method-gif" src="../img/Probability Circle.gif" />
-            <p>Probability Circle</p>
-          </div>
-          <div class="method-cont">
-            <img class="method-gif" src="../img/Probability Ellipse.gif" />
-            <p>Probability Ellipse</p>
-          </div>
-          <div class="method-cont">
-            <img class="method-gif" src="../img/Moore.gif" />
-            <p>Moore</p>
-          </div>
+        <div class="method-cont">
+          <img class="method-gif" src="../img/Probability Ellipse.gif" />
+          <p>Probability Ellipse</p>
+        </div>
+        <div class="method-cont">
+          <img class="method-gif" src="../img/Moore.gif" />
+          <p>Moore</p>
         </div>
       </div>
     </div>
-    <footer class="border-top border-dark">
-      <div class="left-footer-cont">
-        <div class="footer-content ml-5">
-          <a href="https://github.com/MME-NTU-KhPI/MatViz3D" target="_blank">
-            MatViz3D
-          </a>
-          <p>
-            Department of Mathematical Modeling and Intelligent Computing in
-            Engineering (MMI), NTU "KhPI", st. 2 Kyrpychova Ave., c. Kharkiv,
-            Ukraine, 61002
-          </p>
-          <p>post.matviz3d@gmail.com</p>
-        </div>
+  </div>
+  <footer class="border-top border-dark">
+    <div class="left-footer-cont">
+      <div class="footer-content ml-5">
+        <a href="https://github.com/MME-NTU-KhPI/MatViz3D" target="_blank">
+          MatViz3D
+        </a>
+        <p>
+          Department of Mathematical Modeling and Intelligent Computing in
+          Engineering (MMI), NTU "KhPI", st. 2 Kyrpychova Ave., c. Kharkiv,
+          Ukraine, 61002
+        </p>
+        <p>post.matviz3d@gmail.com</p>
       </div>
-      <div class="right-footer-cont">
-        <div class="footer-links mr-5">
-          <a href="https://web.kpi.kharkov.ua/dpm/uk/istoriya-kafedri/">
-            About the Department
-          </a>
-          <a href="#"> Team </a>
-          <a
-            href="https://web.kpi.kharkov.ua/dpm/uk/kontaktna-informatsiya-kafedri/"
-          >
-            Contact
-          </a>
-        </div>
+    </div>
+    <div class="right-footer-cont">
+      <div class="footer-links mr-5">
+        <a href="https://web.kpi.kharkov.ua/dpm/uk/istoriya-kafedri/">
+          About the Department
+        </a>
+        <a href="#"> Team </a>
+        <a href="https://web.kpi.kharkov.ua/dpm/uk/kontaktna-informatsiya-kafedri/">
+          Contact
+        </a>
       </div>
-    </footer>
-  </body>
-  <script src="../js/show-button.js"></script>
-</html>
+    </div>
+  </footer>
+</body>
+<script src="../js/show-button.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/html/instructions_ua.html b/html/instructions_ua.html
index f519659..ea02ba4 100644
--- a/html/instructions_ua.html
+++ b/html/instructions_ua.html
@@ -1,21 +1,185 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Instructions</title>
+<html lang="uk">
 
-    <link
-      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
-      rel="stylesheet"
-    />
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <title>Як користуватися</title>
+
+  <link href="../css/header_footer.css" rel="stylesheet" />
+  <link href="../css/instructions.css" rel="stylesheet" />
+  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
+
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+</head>
+
+<body style="background-color: #eaf5ff; height: 100vh"
+  class="ink-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">
+  <header>
+    <nav class="navbar navbar-expand-xl navbar-dark bg-header pl-5 pr-5 pt-3 pb-3 border-bottom border-dark">
+      <a class="navbar-brand" href="../html/home_ua.html">
+        <img src="../img/matico.png" alt="" width="35" height="35" class="d-inline-block align-text-top" />
+        MatViz3D
+      </a>
+      <li class="language-button-mobile nav-item ml-auto mr-3">
+        <div class="dropdown">
+          <button class="btn d-flex align-items-center" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"
+            aria-expanded="false">
+            <img src="../img/globe-icon.png" alt="" class="globe-icon" />
+          </button>
+          <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+            <li class="dropdown-item">
+              <a class="dropdown-item first enable" href="../html/instructions_en.html">EN</a>
+            </li>
+            <li class="dropdown-item">
+              <a class="dropdown-item" href="../html/instructions_ua.html">UA</a>
+            </li>
+          </ul>
+        </div>
+      </li>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
+        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav ml-auto">
+          <li class="nav-item ml-1 mr-1">
+            <a class="nav-link hovering" href="../html/home_ua.html">Головна</a>
+          </li>
+          <li class="nav-item ml-1 mr-1">
+            <a class="nav-link hovering" href="about_ua.html">Про проєкт</a>
+          </li>
+          <li class="nav-item ml-1 mr-1">
+            <a class="nav-link hovering active" href="instructions_ua.html">Як користуватися</a>
+          </li>
+          <li class="nav-item ml-1 mr-1">
+            <a class="nav-link hovering" href="downloads_ua.html">Версії та встановлення</a>
+          </li>
+          <li class="nav-item ml-1 mr-1">
+            <a class="nav-link hovering" href="publications_ua.html">Наукові публікації</a>
+          </li>
+          <li class="language-button nav-item ml-1 mr-1">
+            <div class="dropdown">
+              <button class="btn d-flex align-items-center" type="button" id="dropdownMenuButton"
+                data-bs-toggle="dropdown" aria-expanded="false">
+                <img src="../img/globe-icon.png" alt="" class="globe-icon" />
+              </button>
+              <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                <li class="dropdown-item">
+                  <a class="dropdown-item first" href="instructions_en.html">EN</a>
+                </li>
+                <li class="dropdown-item">
+                  <a class="dropdown-item enable" href="instructions_ua.html">UA</a>
+                </li>
+              </ul>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  </header>
+  <div class="content">
+    <div class="main-heading-cont">
+      <p class="main-heading">
+        Спеціальний додаток MatViz3D був розроблений для комп'ютерного моделювання процесу кристалізації та генерації
+        мікроструктур. Основні переваги додатку: тривимірна генерація мікроструктур, що дозволяє дослідникам отримувати
+        детальні та реалістичні зображення структури матеріалу, вибір сусідства клітин для різноманітності генерації та
+        можливість спостереження за поетапним процесом кристалізації. Загалом, MatViz3D є потужним інструментом для
+        моделювання, аналізу та візуалізації мікроструктур матеріалів, використовуючи різноманітні підходи та техніки.
+      </p>
+    </div>
+    <div class="heading-cont">
+      <p class="heading">Інструкції з використання програми</p>
+    </div>
+    <div class="main-cont">
+      <div class="left-cont">
+        <div class="list-cont">
+          <ol>
+            <li>
+              <span class="instruction-text">Запустіть додаток</span>
+            </li>
+            <li>
+              <span class="instruction-text">Введіть розмір куба та кількість початкових точок</span>
+            </li>
+            <li>
+              <span class="instruction-text">Виберіть алгоритм для аналізу мікроструктури матеріалу та натисніть кнопку "START"</span>
+            </li>
+            <li>
+              <span class="instruction-text">Ознайомтеся з тривимірною візуалізацією мікроструктури. Збільшуйте та обертайте для детального перегляду</span>
+            </li>
+            <li>
+              <span class="instruction-text">Зберігайте зображення для документації</span>
+            </li>
+          </ol>
+        </div>
+      </div>
+      <div class="right-cont">
+        <div class="gif-cont">
+          <img src="../img/how-to-use.gif " class="how-to-use-gif" />
+        </div>
+      </div>
+    </div>
+    <div class="heading-cont">
+      <p class="heading">Приклади</p>
+    </div>
+    <div class="heading-cont">
+      <p class="subtitle">Аналіз структури матеріалу за допомогою алгоритмів</p>
+    </div>
+    <div class="show-button-cont">
+      <button class="show-button" id="show-button"></button>
+      <label for="show-button" class="show-button-arrow" id="show-button-arrow">^</label>
+    </div>
+    <div class="gifs-cont">
+      <div class="methods-gifs-cont" id="methods-gifs-cont">
+        <div class="method-cont">
+          <img class="method-gif" src="../img/von Neumann.gif" />
+          <p>фон Нейман</p>
+        </div>
+        <div class="method-cont">
+          <img class="method-gif" src="../img/Probability Circle.gif" />
+          <p>Ймовірнісне коло</p>
+        </div>
+        <div class="method-cont">
+          <img class="method-gif" src="../img/Probability Ellipse.gif" />
+          <p>Ймовірнісний еліпс</p>
+        </div>
+        <div class="method-cont">
+          <img class="method-gif" src="../img/Moore.gif" />
+          <p>Мур</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <footer class="border-top border-dark">
+    <div class="left-footer-cont">
+      <div class="footer-content ml-5">
+        <a href="https://github.com/MME-NTU-KhPI/MatViz3D" target="_blank">
+          MatViz3D
+        </a>
+        <p>
+          Кафедра математичного моделювання та інтелектуальних обчислень у
+          інженерії (ММІ), НТУ "ХПІ", вул. 2 Кирпичова, м. Харків, Україна, 61002
+        </p>
+        <p>post.matviz3d@gmail.com</p>
+      </div>
+    </div>
+    <div class="right-footer-cont">
+      <div class="footer-links mr-5">
+        <a href="https://web.kpi.kharkov.ua/dpm/uk/istoriya-kafedri/">
+          Про кафедру
+        </a>
+        <a href="#"> Команда </a>
+        <a href="https://web.kpi.kharkov.ua/dpm/uk/kontaktna-informatsiya-kafedri/">
+          Контакти
+        </a>
+      </div>
+    </div>
+  </footer>
+</body>
+<script src="../js/show-button.js"></script>
 
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-  </head>
-  <body>
-   <h2>INSTRUCTIONS PAGE</h2>
-  </body>
 </html>
diff --git a/html/publications_en.html b/html/publications_en.html
index a2db6d9..1e3f2a0 100644
--- a/html/publications_en.html
+++ b/html/publications_en.html
@@ -12,8 +12,9 @@
   <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
 
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
 </head>
 
 <body style=" color: white; background-color: #EAF5FF; height: 100vh;"
@@ -31,10 +32,10 @@
           </button>
           <ul class="dropdown-menu " aria-labelledby="dropdownMenuButton">
             <li class="dropdown-item">
-              <a class="dropdown-item first enable" href="../home_en.html">EN</a>
+              <a class="dropdown-item first enable" href="../html/publications_en.html">EN</a>
             </li>
             <li class="dropdown-item">
-              <a class="dropdown-item" href="html/home_ua.html">UA</a>
+              <a class="dropdown-item" href="../html/publications_ua.html">UA</a>
             </li>
           </ul>
         </div>
@@ -68,10 +69,10 @@
               </button>
               <ul class="dropdown-menu " aria-labelledby="dropdownMenuButton">
                 <li class="dropdown-item">
-                  <a class="dropdown-item first enable" href="#">EN</a>
+                  <a class="dropdown-item first enable" href="publications_en.html">EN</a>
                 </li>
                 <li class="dropdown-item">
-                  <a class="dropdown-item" href="about_ua.html">UA</a>
+                  <a class="dropdown-item" href="publications_ua.html">UA</a>
                 </li>
               </ul>
             </div>
diff --git a/html/publications_ua.html b/html/publications_ua.html
index 6c444fc..9454754 100644
--- a/html/publications_ua.html
+++ b/html/publications_ua.html
@@ -1,21 +1,118 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Scientific publications</title>
 
-    <link
-      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
-      rel="stylesheet"
-    />
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <title>Наукові публікації</title>
+
+  <link href="../css/header_footer.css" rel="stylesheet" />
+  <link href="../css/publications.css" rel="stylesheet" />
+  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
+
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+</head>
+
+<body style="background-color: #EAF5FF; height: 100vh;"
+  class="ink-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">
+  <header>
+    <nav class="navbar navbar-expand-xl navbar-dark bg-header pl-5 pr-5 pt-3 pb-3 border-bottom border-dark">
+      <a class="navbar-brand " href="../html/home_ua.html">
+        <img src="../img/matico.png" alt="" width="35" height="35" class="d-inline-block align-text-top"> MatViz3D
+      </a>
+      <li class="language-button-mobile nav-item ml-auto mr-3 ">
+        <div class="dropdown">
+          <button class="btn d-flex align-items-center" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"
+            aria-expanded="false">
+            <img src="../img/globe-icon.png" alt="" class="globe-icon">
+          </button>
+          <ul class="dropdown-menu " aria-labelledby="dropdownMenuButton">
+            <li class="dropdown-item">
+              <a class="dropdown-item first enable" href="../html/downloads_en.html">EN</a>
+            </li>
+            <li class="dropdown-item">
+              <a class="dropdown-item" href="../html/downloads_ua.html">UA</a>
+            </li>
+          </ul>
+        </div>
+      </li>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
+        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav ml-auto">
+          <li class="nav-item ml-1 mr-1 ">
+            <a class="nav-link hovering" href="../html/home_ua.html">Головна</a>
+          </li>
+          <li class="nav-item ml-1 mr-1">
+            <a class="nav-link hovering " href="about_ua.html">Про проєкт</a>
+          </li>
+          <li class="nav-item ml-1 mr-1">
+            <a class="nav-link hovering" href="instructions_ua.html">Як користуватися</a>
+          </li>
+          <li class="nav-item  ml-1 mr-1">
+            <a class="nav-link hovering " href="downloads_ua.html">Версії та встановлення</a>
+          </li>
+          <li class="nav-item  ml-1 mr-1">
+            <a class="nav-link hovering active" href="publications_ua.html">Наукові публікації</a>
+          </li>
+          <li class="language-button nav-item  ml-1 mr-1">
+            <div class="dropdown">
+              <button class="btn d-flex align-items-center" type="button" id="dropdownMenuButton"
+                data-bs-toggle="dropdown" aria-expanded="false">
+                <img src="../img/globe-icon.png" alt="" class="globe-icon">
+              </button>
+              <ul class="dropdown-menu " aria-labelledby="dropdownMenuButton">
+                <li class="dropdown-item">
+                  <a class="dropdown-item first " href="publications_en.html">EN</a>
+                </li>
+                <li class="dropdown-item">
+                  <a class="dropdown-item enable" href="publications_ua.html">UA</a>
+                </li>
+              </ul>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  </header>
+<div class="content">
+  
+</div>
+  <footer class="border-top border-dark">
+    <div class="left-footer-cont">
+      <div class="footer-content ml-5">
+        <a href="https://github.com/MME-NTU-KhPI/MatViz3D" target="_blank">
+          MatViz3D
+        </a>
+        <p>
+          Кафедра математичного моделювання та інтелектуальних обчислень в інженерії (ММІ), НТУ "ХПІ", вул. Кирпичова,
+          2, м. Харків, Україна, 61002
+        </p>
+        <p>
+          post.matviz3d@gmail.com
+        </p>
+      </div>
+    </div>
+    <div class="right-footer-cont">
+      <div class="footer-links mr-5">
+        <a href="https://web.kpi.kharkov.ua/dpm/uk/istoriya-kafedri/">
+          Про кафедру
+        </a>
+        <a href="#">
+          Команда
+        </a>
+        <a href="https://web.kpi.kharkov.ua/dpm/uk/kontaktna-informatsiya-kafedri/">
+          Контакти
+        </a>
+      </div>
+    </div>
+  </footer>
+</body>
 
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-  </head>
-  <body>
-   <h2>PUBLICATIONS PAGE</h2>
-  </body>
 </html>
