modified: css/styles.css

modified: index.html modified: js/index.js modified: js/script.js modified: js/search.js modified: js/tabs.js deleted: js/tabsindex.js modified: mods.json modified: static/script.js modified: static/style.css modified: templates/editor.html
MEGATREX4 · Oct 21, 2023 · be9680d · be9680d
1 parent a68cdaa
commit be9680d
Show file tree

Hide file tree

Showing 11 changed files with 385 additions and 250 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -74,6 +74,10 @@ background-size: cover!important;
     margin: 0px!important;
 }
 
+.tabslayer2{
+    display: flex!important;
+}
+
 .mobile-only {
     display: none;
     }
@@ -137,15 +141,15 @@ body {
     background-color: #2b2222;
     border-radius: 30px;
     position: relative;
-    min-height: 0px;
+    min-height: 520px;
     box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.28);
     -webkit-box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.28);
     -moz-box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.28);
 
 
 }
 #verified{
-    border: 3px solid #297e4c;
+    box-shadow:0px 0px 0px 3px #297e4c inset;
 }
 
 
@@ -193,6 +197,7 @@ body {
     cursor: default;
     display: inline-block;
     max-width: 250px;
+    max-height: 125px;
     text-align: end;
 }
 
@@ -204,14 +209,14 @@ body {
     background-color: #7e292a;
     color: #dbe1f8;
     padding: 20px;
-    border-radius: 15px;
+    border-radius: 15px 15px 20px 20px;
     z-index: 2;
     width: 210px;
     max-height: none; /* Змінено на "none" замість "0" */
     overflow: hidden;
     white-space: normal;
     transition: max-height 0.3s, padding 0.3s;
-    bottom: calc(21% + 3px);
+    bottom: calc(23% + 2px);
     font-family: 'Ubuntu', sans-serif;
     font-size: 16px;
 }
@@ -223,6 +228,7 @@ body {
 
 
 
+
 .tabs {
     display: flex;
     justify-content: center; /* Ця властивість центрує елементи горизонтально */
@@ -264,6 +270,14 @@ body {
     font-size: 17px;
     font-family: 'Rubik', sans-serif!important;
     font-weight: 200!important;
+
+}
+
+.tab{
+    min-width: 180px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .translation-button {
@@ -410,3 +424,14 @@ body, html {
     flex-wrap: wrap; /* Змінюємо розміщення на згорнуту обгортку */
     justify-content: center;
 }
+
+.div2{
+    display:inline-block;
+}
+
+.divindiv {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: center;
+}
diff --git a/index.html b/index.html
@@ -17,6 +17,7 @@
     <meta property="og:description" content="Тут ви зможете зайти переклади модів для майнкрафту, або перелкди інших ігор, також можна запропонувати свій переклад(виключно моди майнкрафт)">
     <meta property="og:image" content="images/icon.png">
     <meta property="og:url" content="https://sumtranslate.netlify.app/">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
 
     <meta name="keywords" content="геймінг, Minecraft, переклад модів, геймерська спільнота, українська мова, Crowdin, аматорський переклад, СУМ, Спільнота Українізації Модів, українські гравці, онлайн-ігри, грейдерське спільнота, модифікації для гри">
@@ -41,8 +42,7 @@
 <body>
 
 
-    <script type="module" src="js/tabs.js"></script>
-    <script type="module" src="js/tabsindex.js"></script>
+    <script src="js/tabs.js"></script>
 
 
     <div class="header">
@@ -60,30 +60,24 @@ <h1 class="headertext">Спільнота українізації модів</h
 
             </div>
 
-
-
     <div class="div">
-                <!-- Додайте вкладки -->
-                <div class="tabs container" id="tabs">
+                <div class="tabs container " id="tabs">
                     <div class="tab" data-tab="all" onclick="redirectToIndex('all')">Всі переклади</div>
                     <div class="tab" data-tab="minecraft" onclick="redirectToIndex('minecraft')">Майнкрафт моди</div>
                     <div class="tab" data-tab="games" onclick="redirectToIndex('games')">Переклади ігор</div>
-                    <div class="tab NotCompletedTab" data-tab="notcompleted">В роботі</div>
-                    <div id="tab-official" class="tab" data-tab="official">Офіційні</div>
                     <div class="tab" onclick="window.open('/about.html', '_self')">Про нас</div>
-                </div>
-
-                <script>
-                    function redirectToIndex(tabName) {
-                        window.location.href = `/index.html?tab=${tabName}`;
-                    }
-                </script>
+                    <div class="tab NotCompletedTab" data-tab="notcompleted" onclick="redirectToIndex('notcompleted')" id="notcompleted-tab">В роботі</div>
+                    <div class="tab" data-tab="official" onclick="redirectToIndex('official')" id="official-tab">Офіційні</div>
+    </div>
+</div>
 
-
 
-    </div>
+<script>
+    function redirectToIndex(tabName) {
+      window.location.href = `/index.html?tab=${tabName}`;
+    }
+    </script>
     <div class="concon">
-
     <div class="container">
         <div class="mobile-only"> </div>
         <div class="container-content">
@@ -120,11 +114,12 @@ <h1 class="headertext">Спільнота українізації модів</h
 
 
     <div class="popup" id="popup"></div>
-
-    <script src="js/index.js"></script>
-    <script src="load.js"></script>
     <script src="js/search.js"></script>
-    <script src="js/script.js"></script>
+    <script src="js/index.js"></script>
+
+
+
 
+    <script src="/js/script.js"></script>
 </body>
 </html>
diff --git a/js/index.js b/js/index.js
@@ -1,64 +1,63 @@
-// Отримати всі елементи вкладок
+// index.js
 const tabs = document.querySelectorAll('.tab');
 
-// Отримати активну вкладку з локального сховища браузера або встановити значення "all" за замовчуванням
+// Get the active tab from the URL parameter or set it to "all" by default
 let activeTab = localStorage.getItem('activeTab') || 'all';
 
-// Функція для зміни активної вкладки та переадресації користувача
+// Function to change the active tab and redirect the user
 function changeTab(tabName) {
-    // Змініть активну вкладку
+    // Change the active tab
     activeTab = tabName;
 
-    // Зберегти активну вкладку в локальному сховищі браузера
+    // Save the active tab in the local browser storage
     localStorage.setItem('activeTab', activeTab);
 
-    // Перенаправити користувача на потрібну сторінку
-    if (activeTab === 'all') {
+    // Redirect the user to the appropriate page
+    if (tabName === 'all') {
+        console.log('Loading all data');
         showAllTranslations();
-    } else if (activeTab === 'minecraft') {
+    } else if (tabName === 'minecraft') {
+        console.log('Loading minecraft data');
         showMinecraftTranslations();
-    } else if (activeTab === 'games') {
+    } else if (tabName === 'games') {
+        console.log('Loading games data');
         showGamesTranslations();
-    } else if (activeTab === 'notcompleted') {
-        showNotCompletedTranslations();
-    } else if (activeTab === 'official') {
-        showOfficialTranslations();
-    } else if (activeTab === 'about') {
-        redirectToAboutPage();
-    }
-
-    // Додати виклики функцій завантаження даних тут
-    if (activeTab === 'notcompleted') {
+    } else if (tabName === 'notcompleted') {
+        console.log('Loading notcompleted data');
         loadAndDisplayNotCompletedData();
-    } else if (activeTab === 'official') {
-        loadOfficialData(); // Додайте функцію завантаження офіційних даних
+    } else if (tabName === 'official') {
+        console.log('Loading official data');
+        loadOfficialData();
+    } else if (tabName === 'about') {
+        console.log('Loading about data');
+        redirectToAboutPage();
     }
 }
 
-
-// Функція для перенаправлення на сторінку "Про нас"
+// Function to redirect to the "About" page
 function redirectToAboutPage() {
-    // Змініть активну вкладку на "about"
+    // Change the active tab to "about"
     changeTab('about');
 
-    // Перенаправити користувача на сторінку "about.html"
+    // Redirect the user to the "about.html" page
     window.location.href = '/about.html';
 }
 
-// Додайте обробник кліку для кожної вкладки
+// Add click event listeners to each tab
 tabs.forEach(tab => {
     tab.addEventListener('click', () => {
-        // Отримати значення атрибуту data-tab
+        // Get the data-tab attribute value
         const tabName = tab.getAttribute('data-tab');
 
-        // Змініть активну вкладку та перенаправте користувача
+        // Change the active tab and redirect the user
         changeTab(tabName);
     });
 });
 
-// Змініть активну вкладку на потрібну
+// Change the active tab to the appropriate one
 changeTab(activeTab);
 
+// Automatically change the active tab to "Official" or "Not Completed" if specified in the URL
 document.addEventListener('DOMContentLoaded', function () {
     const urlParams = new URLSearchParams(window.location.search);
     const tabParam = urlParams.get('tab');
@@ -70,7 +69,3 @@ document.addEventListener('DOMContentLoaded', function () {
         }
     }
 });
-
-
-
-