From 39a7dccafcfd4966b3dec6f8471cd72a2c9810da Mon Sep 17 00:00:00 2001
From: Eugene <59817721+SKZGx@users.noreply.github.com>
Date: Sat, 16 Sep 2023 01:58:35 +0300
Subject: [PATCH] 	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      | 20 ++++++++++----
 about.js        | 64 +++++++++++++++++++++++++++++++++++++++++++
 index.html      | 16 +++++++----
 index.js        | 64 +++++++++++++++++++++++++++++++++++++++++++
 notcompleted.js | 64 -------------------------------------------
 official.js     | 32 ----------------------
 script.js       | 73 ++++++++++++++++++++++++++++++++++++++-----------
 tabs.js         | 43 +++++++++++++++++++++++++++++
 8 files changed, 253 insertions(+), 123 deletions(-)
 create mode 100644 about.js
 create mode 100644 index.js
 delete mode 100644 notcompleted.js
 delete mode 100644 official.js
 create mode 100644 tabs.js

diff --git a/about.html b/about.html
index 2a9326c..3308738 100644
--- a/about.html
+++ b/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">
diff --git a/about.js b/about.js
new file mode 100644
index 0000000..cfadf68
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/index.html b/index.html
index 6c08285..d69c013 100644
--- a/index.html
+++ b/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>
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..e59b2de
--- /dev/null
+++ b/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();
+        }
+    }
+});
diff --git a/notcompleted.js b/notcompleted.js
deleted file mode 100644
index 2a3f2f7..0000000
--- a/notcompleted.js
+++ /dev/null
@@ -1,64 +0,0 @@
-function showNotCompletedTranslations() {
-    currentTab = 'notcompleted'; // Встановлюємо поточну вкладку в 'notcompleted'
-    displayedItems = 15; // Встановлюємо кількість відображених елементів
-    loadAndDisplayNotCompletedData(); // Завантажуємо та відображаємо невиконані переклади
-    setActiveTab(document.querySelector('.tab:nth-child(4)')); // Позначаємо вкладку "В роботі" як активну
-}
-
-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);
-}
-
-function showNotCompleted() {
-    currentTab = 'notcompleted'; // Встановлюємо поточну вкладку в 'notcompleted'
-    displayedItems = 15; // Встановлюємо кількість відображених елементів
-
-    // Отримуємо невиконані переклади
-    const notCompletedData = minecraftData.concat(gamesData).filter(item => item.completed === false);
-
-    // Викликаємо функцію для додавання класу .NotCompletedTab
-    addNotCompletedTabClass();
-
-    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);
-
-    // Додамо клас .NotCompletedActive до вкладки "В роботі" при обранні
-    const notCompletedTab = document.querySelector('.tab:nth-child(4)');
-    if (notCompletedTab) {
-        setActiveTab(notCompletedTab); // Позначаємо вкладку "В роботі" як активну
-        notCompletedTab.classList.add('NotCompletedActive'); // Додаємо клас .NotCompletedActive
-    }
-}
-
-
-
diff --git a/official.js b/official.js
deleted file mode 100644
index 72a7599..0000000
--- a/official.js
+++ /dev/null
@@ -1,32 +0,0 @@
-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);
-    }
-}
-
-
-
-
diff --git a/script.js b/script.js
index c95675d..cb1e863 100644
--- a/script.js
+++ b/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();
diff --git a/tabs.js b/tabs.js
new file mode 100644
index 0000000..62cd679
--- /dev/null
+++ b/tabs.js
@@ -0,0 +1,43 @@
+function changeTab(tabName) {
+    // Змініть активну вкладку
+    const tabs = document.querySelectorAll('.tab');
+    tabs.forEach(tab => {
+        tab.classList.remove('active');
+    });
+
+    const selectedTab = document.querySelector(`[data-tab="${tabName}"]`);
+    selectedTab.classList.add('active');
+
+    // Зберегти активну вкладку в локальному сховищі браузера
+    localStorage.setItem('activeTab', tabName);
+
+    // Змініть активну вкладку на потрібну
+    changeTab(activeTab);
+}
+
+// Отримати всі елементи вкладок
+const tabs = document.querySelectorAll('.tab');
+
+// Отримати активну вкладку з локального сховища браузера або встановити значення "all" за замовчуванням
+let activeTab = localStorage.getItem('activeTab') || 'all';
+
+// Функція для зміни активної вкладки та переадресації користувача
+function changeTab(tabName) {
+    // Змініть активну вкладку
+    activeTab = tabName;
+
+    // Зберегти активну вкладку в локальному сховищі браузера
+    localStorage.setItem('activeTab', activeTab);
+
+    // Встановити активну вкладку на сторінці
+    tabs.forEach(tab => {
+        tab.classList.remove('active');
+    });
+    const selectedTab = document.querySelector(`[data-tab="${activeTab}"]`);
+    selectedTab.classList.add('active');
+
+    // Тут ви можете викликати функції для відображення відповідного вмісту
+}
+
+// Викликати функцію для зміни активної вкладки
+changeTab(activeTab);