new file: about.css

new file: about.html modified: header-image.png new file: images/Donatello.png new file: images/monobank.png new file: images/socials/bluesky.png new file: images/socials/mastodon.png new file: images/socials/telegram.png new file: images/socials/twitter.png modified: index.html new file: load.css new file: load.js modified: script.js modified: search.css modified: styles.css
MEGATREX4 · Sep 14, 2023 · 1c1680e · 1c1680e
1 parent 8162c4c
commit 1c1680e
Show file tree

Hide file tree

Showing 15 changed files with 363 additions and 48 deletions.
diff --git a/about.css b/about.css
@@ -0,0 +1,138 @@
+/* Стилі для великого екрану */
+.aboutcont {
+    display: flex;
+    flex-direction: row;
+    align-items: center; /* Вирівнюємо елементи по вертикалі по центру */
+}
+
+.socbut {
+    width: 40%;
+    display: flex;
+    flex-direction: column;
+    margin-right: 20px; /* Додайте бажаний відступ між стовбцями */
+}
+
+.textabout p {
+    flex: 1; /* Розширюємо textabout на всю доступну ширину */
+    color:#dbe1f8;
+}
+
+.aboutcont {
+    margin-top: 50px;
+}
+
+/* Стилі для екранів меншого розміру */
+@media (max-width: 768px) {
+    .aboutcont {
+        flex-direction: column; /* Міняємо на вертикальне розміщення */
+    }
+
+    .socbut {
+        width: 100%;
+        margin-right: 0; /* Знищуємо відступ для маленького екрану */
+    }
+}
+
+.soc-button {
+    margin: 10px 20px;
+    text-decoration: none;
+    flex: 1;
+    text-align: center;
+    background-color: #7e292a;
+    color: #dbe1f8;
+    padding: 20px 10px;
+    border-radius: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center; /* Додайте цей рядок для центрування тексту по горизонталі */
+}
+
+.soc-button:hover{
+    background-color: #c57976; /* Колір фону кнопки при наведенні */
+    color: #601216; /* Колір тексту кнопки при наведенні */
+}
+
+.smallsoc {
+    margin-top: 20px;
+    width: 100%;
+    align-items: center;
+    justify-content: center; /* Додайте цей рядок для центрування тексту по горизонталі */
+    display: flex;
+    flex: 1;
+}
+
+.smalll:hover{
+    background-color: #c57976; /* Колір фону кнопки при наведенні */
+    color: #601216; /* Колір тексту кнопки при наведенні */
+}
+
+.smalll {
+
+    width: 59px;
+    height: 59px;
+    margin-right: 10px;
+    text-decoration: none;
+    text-align: center;
+    background-color: #7e292a;
+    color: #dbe1f8;
+    border-radius: 20px;
+    cursor: pointer;
+}
+
+.addbuttonab {
+    width: 250px;
+    height: 59px;
+    margin-right: 20px;
+    background-color: rgba(126, 113, 41, 0.3);
+    color: white;
+}
+
+.addbuttonab:hover {
+    background-color: rgba(197, 186, 118, 0.3);
+    color: #ffff;
+}
+
+.textabout {
+    background-color: #2b2222;
+    margin: 20px;
+    padding: 20px;
+    border-radius: 20px;
+    color: #dbe1f8;
+}
+
+.contcont {
+    vertical-align: middle;
+    text-align: center;
+    height: 420px;
+}
+
+
+
+
+
+.dona{
+    background-image: url(images/Donatello.png);
+}
+
+.mono{
+    background-image: url(images/monobank.png);
+
+}
+
+.mas{
+    background-image: url(images/socials/mastodon.png);
+}
+.tel{
+    background-image: url(images/socials/telegram.png);
+}
+.sky{
+    background-image: url(images/socials/bluesky.png);
+}
+.twi{
+    background-image: url(images/socials/twitter.png);
+}
+
+.dona, .mono, .mas,.tel,.sky,.twi{
+    background-size: cover;
+}
diff --git a/about.html b/about.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="uk">
+<head>
+    <meta charset="UTF-8">
+    <title>Спільнота українізації модів</title>
+
+    <link rel="stylesheet" href="search.css">
+    <link rel="stylesheet" href="scrollbar.css">
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="about.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap" rel="stylesheet"></head>
+    <body>
+
+    <div class="header">
+        <div class="header-content">
+            <img src="header-image.png" alt="Спільнота українізації модів">
+            <h1 class="headertext">Спільнота українізації модів</h1>
+        </div>
+    </div>
+            <!-- Додайте поле пошуку -->
+            <div class="search-container">
+                <button class="addbuttonab" id="addbutton"><i class="fa fa-plus faadd faaddabout" aria-hidden="true">Додати свій переклад</i></button>
+            </div>
+    <div class="div">
+        <!-- Додайте вкладки -->
+        <div class="tabs" id="tabs">
+            <div class="tab" onclick="window.open ('/index.html', '_self')">Всі переклади</div>
+            <div class="tab" onclick="window.open ('/index.html', '_self')">Майнкрафт моди</div>
+            <div class="tab" onclick="window.open ('/index.html', '_self')">Переклади ігор</div>
+            <div class="tab active" onclick="showAboutPage()">Про нас</div>
+        </div>
+</div>
+
+<div class="container">
+<div class="aboutcont">
+    <div class="socbut">
+        <div class="soc-button mono">Mono</div>
+        <div class="soc-button dona">Donatello</div>
+        <div class="smallsoc">
+            <div href="" class="smalll mas"></div>
+            <div href="" class="smalll tel"></div>
+            <div href="" class="smalll sky"></div>
+            <div href="" class="smalll twi"></div>
+        </div>
+    </div>
+    <div class="textabout"><p>Ми - група аматорів, які захоплюються Minecraft та іншими іграми. Наша місія - зробити ці ігри доступними для української аудиторії шляхом перекладу різноманітних модифікацій та доповнень. Ми віримо, що українська мова має бути доступною для всіх гравців, тому ми віддаємо багато часу та зусиль на переклад, щоб зробити це можливим.</p>
+
+        <p>Ви можете слідкувати за нашим процесом у соціальних мережах спільноти, де ми публікуємо посилання на наш проект Crowdin. І найголовніше, ви можете долучитися до перекладу разом з нами! Приєднуйтесь до нашої спільноти і допоможіть нам зробити гри ще більш доступними для українців.</p>
+
+            <p>Разом ми робимо геймінг кращим для усіх! Долучайтеся до нас і допоможіть зробити ігри ще цікавішими та зрозумілішими для української геймерської спільноти.</p>
+    </div>
+</div>
+</div>
+    <div class="footer">
+        <p>&copy; 2023 Спільнота українізації модів</p>
+        <p>Створено в Україні для українців</p>
+    </div>
+    </body>
+</html>
diff --git a/header-image.png b/header-image.png
diff --git a/images/Donatello.png b/images/Donatello.png
diff --git a/images/monobank.png b/images/monobank.png
diff --git a/images/socials/bluesky.png b/images/socials/bluesky.png
diff --git a/images/socials/mastodon.png b/images/socials/mastodon.png
diff --git a/images/socials/telegram.png b/images/socials/telegram.png
diff --git a/images/socials/twitter.png b/images/socials/twitter.png
diff --git a/index.html b/index.html
@@ -1,18 +1,23 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="uk">
 <head>
     <meta charset="UTF-8">
     <title>Спільнота українізації модів</title>
-    <script src="page.js"></script>
+
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="search.css">
     <link rel="stylesheet" href="scrollbar.css">
+    <link rel="stylesheet" href="load.css">
+
     <link rel="icon" type="image/x-icon" href="header-image.png">
+
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap" rel="stylesheet"></head>
 <body>
+
+
     <div class="header">
         <div class="header-content">
             <img src="header-image.png" alt="Спільнота українізації модів">
@@ -22,7 +27,7 @@ <h1 class="headertext">Спільнота українізації модів</h
     </div>
             <!-- Додайте поле пошуку -->
             <div class="search-container">
-                <button class="addbutton"><i class="fa fa-plus faadd" aria-hidden="true"></i></button>
+                <button class="addbutton" id="addbutton"><i class="fa fa-plus faadd" aria-hidden="true"></i></button>
                 <input type="text" id="search" placeholder="Пошук...">
                 <button onclick="performSearch()">Пошук</button>
             </div>
@@ -32,7 +37,7 @@ <h1 class="headertext">Спільнота українізації модів</h
                     <div class="tab" onclick="showAllTranslations()">Всі переклади</div>
                     <div class="tab" onclick="showMinecraftTranslations()">Майнкрафт моди</div>
                     <div class="tab" onclick="showGamesTranslations()">Переклади ігор</div>
-                    <div class="tab" onclick="showAboutPage()">Про нас</div>
+                    <div class="tab" onclick="window.open('/about.html','_self')">Про нас</div>
                 </div>
     </div>
     <div class="concon">
@@ -44,8 +49,7 @@ <h1 class="headertext">Спільнота українізації модів</h
             </div>
             <div class="button-container">
             <button id="show-more-button" class="show-more-button">Показати більше</button>
-            </div>
-</button>
+            </div></button>
         </div>
     </div>
     </div>
@@ -54,16 +58,21 @@ <h1 class="headertext">Спільнота українізації модів</h
         <div class="tooltip-content">
         </div>
     </div>
+
+    <div class="overlay">
+        <div class="spinner"></div>
+      </div>
 
 
     <div class="footer">
         <p>&copy; 2023 Спільнота українізації модів</p>
         <p>Створено в Україні для українців</p>
     </div>
 
-    <div class="popup" id="popup"></div>
 
 
+    <div class="popup" id="popup"></div>
+    <script src="load.js"></script>
     <script src="search.js"></script>
     <script src="script.js"></script>
 </body>

diff --git a/load.css b/load.css
@@ -0,0 +1,73 @@
+
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #1d1b1e;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+    opacity: 1;
+    animation: fadeOut 2s linear 2s forwards;
+  }
+
+  .spinner {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    border: 9px solid #7e292a;
+    animation: spinner-bulqg1 0.8s infinite linear alternate,
+      spinner-oaa3wk 1.6s infinite linear;
+  }
+
+  @keyframes spinner-bulqg1 {
+    0% {
+       clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
+    }
+
+    12.5% {
+       clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
+    }
+
+    25% {
+       clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
+    }
+
+    50% {
+       clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
+    }
+
+    62.5% {
+       clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
+    }
+
+    75% {
+       clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
+    }
+
+    100% {
+       clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
+    }
+ }
+
+ @keyframes spinner-oaa3wk {
+    0% {
+       transform: scaleY(1) rotate(0deg);
+    }
+
+    49.99% {
+       transform: scaleY(1) rotate(135deg);
+    }
+
+    50% {
+       transform: scaleY(-1) rotate(0deg);
+    }
+
+    100% {
+       transform: scaleY(-1) rotate(-135deg);
+    }
+ }
+
diff --git a/load.js b/load.js
@@ -0,0 +1,5 @@
+                // Отримуємо елементи DOM
+                const overlay = document.querySelector('.overlay');
+                // Через 2 секунди приховуємо overlay
+                setTimeout(() => {
+                  overlay.style.display = 'none';}, 800);