modified: about.html

	new file:   about.js
	modified:   index.html
	new file:   index.js
	deleted:    notcompleted.js
	deleted:    official.js
	modified:   script.js
	new file:   tabs.js

about.html

@@ -5,7 +5,8 @@
     <title>Спільнота українізації модів</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-
+    <script src="script.js"></script>
+    <script src="about.js"></script>
     <meta property="og:title" content="Спільнота українізації модів">
     <meta property="og:description" content="Тут ви зможете зайти переклади модів для майнкрафту, або перелкди інших ігор, також можна запропонувати свій переклад(виключно моди майнкрафт)">
     <meta property="og:image" content="images/icon.png">
@@ -49,12 +50,21 @@ <h1 class="headertext">Спільнота українізації модів</h
     <div class="div">
         <!-- Додайте вкладки -->
         <div class="tabs container" 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="NotCompletedTab tab" onclick="window.open ('/index.html', '_self')">В роботі</div>
+            <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" onclick="redirectToIndex('notcompleted')">В роботі</div>
+            <div class="tab" data-tab="official" onclick="redirectToIndex('official')">Офіційні</div>
             <div class="tab active" onclick="showAboutPage()">Про нас</div>
         </div>
+
+
+
+        <script>
+            function redirectToIndex(tabName) {
+              window.location.href = `/index.html?tab=${tabName}`;
+            }
+            </script>
 </div>
 
 <div class="container">

about.js

@@ -0,0 +1,64 @@
+// Додайте цей код у функцію changeTabAbout
+function changeTabAbout(tabName) {
+    // Змініть активну вкладку
+    const tabs = document.querySelectorAll('.tab');
+    tabs.forEach(tab => {
+        tab.classList.remove('active');
+    });
+
+    const selectedTab = document.querySelector(`[data-tab="${tabName}"]`);
+    selectedTab.classList.add('active');
+
+    // Виконайте автоматичне відкриття вкладки
+    autoOpenTab(tabName);
+
+    // Зберегти активну вкладку в локальному сховищі браузера
+    localStorage.setItem('activeTab', tabName);
+
+    // Перенаправити користувача на потрібну сторінку
+    window.location.href = '/index.html?tab=' + tabName;
+}
+
+
+function changeTabAbout(tabName) {
+    // Змініть активну вкладку
+    const tabs = document.querySelectorAll('.tab');
+    tabs.forEach(tab => {
+        tab.classList.remove('active');
+    });
+
+    const selectedTab = document.querySelector(`[data-tab="${tabName}"]`);
+    selectedTab.classList.add('active');
+
+    // Виконайте автоматичне відкриття вкладки
+    autoOpenTab(tabName);
+
+    // Зберегти активну вкладку в локальному сховищі браузера
+    localStorage.setItem('activeTab', tabName);
+
+    // Перенаправити користувача на потрібну сторінку
+    window.location.href = '/index.html?tab=' + tabName;
+}
+
+function autoOpenTab(tabName) {
+    switch (tabName) {
+        case 'all':
+            showAllTranslations();
+            break;
+        case 'minecraft':
+            showMinecraftTranslations();
+            break;
+        case 'games':
+            showGamesTranslations();
+            break;
+        case 'notcompleted':
+            showNotCompletedTranslations();
+            break;
+        case 'official':
+            showOfficialTranslations();
+            break;
+        default:
+            // Виконати дії за замовчуванням, якщо вкладка не відома
+            break;
+    }
+}

index.html

@@ -56,13 +56,16 @@ <h1 class="headertext">Спільнота українізації модів</h
     <div class="div">
                 <!-- Додайте вкладки -->
                 <div class="tabs container" id="tabs">
-                    <div class="tab" onclick="showAllTranslations()">Всі переклади</div>
-                    <div class="tab" onclick="showMinecraftTranslations()">Майнкрафт моди</div>
-                    <div class="tab" onclick="showGamesTranslations()">Переклади ігор</div>
-                    <div class="tab NotCompletedTab" onclick="showNotCompletedTranslations()">В процесі</div>
-                    <div class="tab" onclick="showOfficialTranslations()">Офіційні</div>
-                    <div class="tab" onclick="window.open('/about.html','_self')">Про нас</div>
+                    <div class="tab" data-tab="all">Всі переклади</div>
+                    <div class="tab" data-tab="minecraft">Майнкрафт моди</div>
+                    <div class="tab"  data-tab="games" >Переклади ігор</div>
+                    <div class="tab NotCompletedTab" data-tab="notcompleted">В процесі</div>
+                    <div class="tab" data-tab="official">Офіційні</div>
+                    <div class="tab" onclick="window.open('/about.html', '_self')">Про нас</div>
                 </div>
+
+                <script type="module" src="tabs.js"></script>
+
     </div>
     <div class="concon">
     <div class="container">
@@ -99,6 +102,7 @@ <h1 class="headertext">Спільнота українізації модів</h
 
     <div class="popup" id="popup"></div>
 
+    <script src="index.js"></script>
     <script src="official.js"></script>
     <script src="notcompleted.js"></script>
     <script src="load.js"></script>

index.js

@@ -0,0 +1,64 @@
+// Отримати всі елементи вкладок
+const tabs = document.querySelectorAll('.tab');
+
+// Отримати активну вкладку з локального сховища браузера або встановити значення "all" за замовчуванням
+let activeTab = localStorage.getItem('activeTab') || 'all';
+
+// Функція для зміни активної вкладки та переадресації користувача
+function changeTab(tabName) {
+    // Змініть активну вкладку
+    activeTab = tabName;
+
+    // Зберегти активну вкладку в локальному сховищі браузера
+    localStorage.setItem('activeTab', activeTab);
+
+    // Перенаправити користувача на потрібну сторінку
+    if (activeTab === 'all') {
+        showAllTranslations();
+    } else if (activeTab === 'minecraft') {
+        showMinecraftTranslations();
+    } else if (activeTab === 'games') {
+        showGamesTranslations();
+    } else if (activeTab === 'notcompleted') {
+        showNotCompletedTranslations();
+    } else if (activeTab === 'official') {
+        showOfficialTranslations();
+    } else if (activeTab === 'about') {
+        redirectToAboutPage();
+    }
+}
+
+// Функція для перенаправлення на сторінку "Про нас"
+function redirectToAboutPage() {
+    // Змініть активну вкладку на "about"
+    changeTab('about');
+
+    // Перенаправити користувача на сторінку "about.html"
+    window.location.href = '/about.html';
+}
+
+// Додайте обробник кліку для кожної вкладки
+tabs.forEach(tab => {
+    tab.addEventListener('click', () => {
+        // Отримати значення атрибуту data-tab
+        const tabName = tab.getAttribute('data-tab');
+
+        // Змініть активну вкладку та перенаправте користувача
+        changeTab(tabName);
+    });
+});
+
+// Змініть активну вкладку на потрібну
+changeTab(activeTab);
+
+document.addEventListener('DOMContentLoaded', function () {
+    const urlParams = new URLSearchParams(window.location.search);
+    const tabParam = urlParams.get('tab');
+
+    if (tabParam) {
+        const tabToActivate = document.querySelector(`.tab[data-tab="${tabParam}"]`);
+        if (tabToActivate) {
+            tabToActivate.click();
+        }
+    }
+});

script.js

@@ -129,22 +129,6 @@ function displayTranslations(data, currentPage, itemsPerPage) {
     }
 }
 
-
-
-
-function setActiveTab(tabElement) {
-    // Знайти всі вкладки
-    const tabs = document.querySelectorAll('.tab');
-
-    // Перебрати всі вкладки і видалити клас 'active'
-    tabs.forEach(tab => {
-        tab.classList.remove('active');
-    });
-
-    // Додати клас 'active' до вибраної вкладки
-    tabElement.classList.add('active');
-}
-
 function loadTranslationsFromFile(fileName, currentPage, itemsPerPage) {
     fetch(fileName)
         .then(response => response.json())
@@ -157,6 +141,26 @@ function loadTranslationsFromFile(fileName, currentPage, itemsPerPage) {
         });
 }
 
+function loadAndDisplayNotCompletedData() {
+    const notCompletedData = minecraftData.concat(gamesData).filter(item => item.completed === false);
+    const startIndex = 0;
+    const endIndex = displayedItems;
+
+    const showMoreButton = document.getElementById('show-more-button');
+
+    if (endIndex >= notCompletedData.length) {
+        if (showMoreButton) {
+            showMoreButton.style.display = 'none';
+        }
+    } else {
+        if (showMoreButton) {
+            showMoreButton.style.display = 'block';
+        }
+    }
+
+    displayTranslations(notCompletedData.slice(startIndex, endIndex), 1, displayedItems);
+}
+
 // Оголосіть змінні для зберігання кількості відображених елементів і загальної кількості елементів
 let displayedItems = 15;
 let minecraftData = [];
@@ -184,6 +188,42 @@ function showMinecraftTranslations() {
     setActiveTab(document.querySelector('.tab:nth-child(2)'));
 }
 
+function showNotCompletedTranslations() {
+    currentTab = 'notcompleted'; // Встановлюємо поточну вкладку в 'notcompleted'
+    displayedItems = 15; // Встановлюємо кількість відображених елементів
+    loadAndDisplayNotCompletedData(); // Завантажуємо та відображаємо невиконані переклади
+    setActiveTab(document.querySelector('.tab:nth-child(4)')); // Позначаємо вкладку "В роботі" як активну
+}
+
+function showOfficialTranslations() {
+    currentTab = 'official'; // Встановлюємо поточну вкладку в 'official'
+    displayedItems = 15; // Встановлюємо кількість відображених елементів
+    // Отримуємо офіційні переклади з позначкою "verified": true
+    const officialData = minecraftData.concat(gamesData).filter(item => item.verified === true);
+    const startIndex = 0;
+    const endIndex = displayedItems;
+
+    const showMoreButton = document.getElementById('show-more-button');
+
+    if (endIndex >= officialData.length) {
+        if (showMoreButton) {
+            showMoreButton.style.display = 'none';
+        }
+    } else {
+        if (showMoreButton) {
+            showMoreButton.style.display = 'block';
+        }
+    }
+
+    displayTranslations(officialData.slice(startIndex, endIndex), 1, displayedItems);
+
+    // Позначаємо вкладку "Офіційні" як активну
+    const officialTab = document.querySelector('.tab:nth-child(5)');
+    if (officialTab) {
+        setActiveTab(officialTab);
+    }
+}
+
 
 
 // Відображення всіх перекладів за замовчуванням при завантаженні сторінки
@@ -268,5 +308,6 @@ loadTranslationsFromFile('mods.json', 1, displayedItems);
 
 
 
+
 // Відображення всіх перекладів за замовчуванням при завантаженні сторінки
 showAllTranslations();