edit page_gamer

AndreiExtr · May 11, 2024 · a2ea80c · a2ea80c
1 parent a995e51
commit a2ea80c
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 78 deletions.
diff --git a/global.js b/global.js
@@ -2,8 +2,12 @@
 window.onload = function() {
   const firstItem = document.querySelector('.nav-item');
   firstItem.classList.add('active');
+
+  // Активируем раздел "Игроки" по умолчанию
+  togglePage('page1');
 };
 
+
 // ПЕРЕКЛЮЧЕНИЯ ПО ВКЛАДКАМ В SIDEBAR
 function togglePage(pageId) {
   var pages = document.querySelectorAll('.page');
@@ -20,10 +24,13 @@ function togglePage(pageId) {
 const items = document.querySelectorAll('.nav-item');
 items.forEach(item => {
   item.addEventListener('click', () => {
+    // Удаляем класс 'active' у всех других элементов
     items.forEach(otherItem => {
       otherItem.classList.remove('active');
     });
+    // Добавляем класс 'active' к текущему элементу
     item.classList.add('active');
   });
 });
 
+
diff --git a/index.html b/index.html
@@ -75,7 +75,7 @@
                 </svg>      
             </div>
 
-            <div id="page1" class="page">
+            <div id="page1" hidden class="page">
                 <div class="title">
                     <h1>Ближайший матч</h1>
                     <div class="tabs">

diff --git a/page_gamer.html b/page_gamer.html
@@ -73,7 +73,7 @@
                 <path d="M18 13.18V10C17.9986 8.58312 17.4958 7.21247 16.5806 6.13077C15.6655 5.04908 14.3971 4.32615 13 4.09V3C13 2.73478 12.8946 2.48043 12.7071 2.29289C12.5196 2.10536 12.2652 2 12 2C11.7348 2 11.4804 2.10536 11.2929 2.29289C11.1054 2.48043 11 2.73478 11 3V4.09C9.60294 4.32615 8.33452 5.04908 7.41939 6.13077C6.50425 7.21247 6.00144 8.58312 6 10V13.18C5.41645 13.3863 4.911 13.7681 4.55294 14.2729C4.19488 14.7778 4.00174 15.3811 4 16V18C4 18.2652 4.10536 18.5196 4.29289 18.7071C4.48043 18.8946 4.73478 19 5 19H8.14C8.37028 19.8474 8.873 20.5954 9.5706 21.1287C10.2682 21.6621 11.1219 21.951 12 21.951C12.8781 21.951 13.7318 21.6621 14.4294 21.1287C15.127 20.5954 15.6297 19.8474 15.86 19H19C19.2652 19 19.5196 18.8946 19.7071 18.7071C19.8946 18.5196 20 18.2652 20 18V16C19.9983 15.3811 19.8051 14.7778 19.4471 14.2729C19.089 13.7681 18.5835 13.3863 18 13.18ZM8 10C8 8.93913 8.42143 7.92172 9.17157 7.17157C9.92172 6.42143 10.9391 6 12 6C13.0609 6 14.0783 6.42143 14.8284 7.17157C15.5786 7.92172 16 8.93913 16 10V13H8V10ZM12 20C11.651 19.9979 11.3086 19.9045 11.0068 19.7291C10.7051 19.5536 10.4545 19.3023 10.28 19H13.72C13.5455 19.3023 13.2949 19.5536 12.9932 19.7291C12.6914 19.9045 12.349 19.9979 12 20ZM18 17H6V16C6 15.7348 6.10536 15.4804 6.29289 15.2929C6.48043 15.1054 6.73478 15 7 15H17C17.2652 15 17.5196 15.1054 17.7071 15.2929C17.8946 15.4804 18 15.7348 18 16V17Z"/>
             </svg>      
         </div>
-        <div id="page2.1" hidden class="page">
+        <div id="page2.1" class="page">
             <div class="p_title">
                 <button class ="button_back" onclick="goBack()">
                     <svg  class="icon_left" xmlns="http://www.w3.org/2000/svg"  width="32" height="32" viewBox="0 0 24 24">
@@ -363,7 +363,7 @@ <h1 class="page_title">Игрок</h1>
         </div>
     </div>
 </div>
-<script src="global.js" ></script>
-<script src="script.js" ></script>
+
+<script src="page_gamer.js" ></script>
 </body>
 </html>
diff --git a/page_gamer.js b/page_gamer.js
@@ -0,0 +1,68 @@
+// Устанавливаем вкладку "Игроки" в фокусе после перехода на страницу игрока
+const playersTab = document.getElementById('item2');
+playersTab.classList.add('active');
+
+
+// СКРОЛЛ ДЛЯ БЛОКА ВИДЕО, ДРУЗЬЯ И МАТЧИ
+let currentIndexV = 0;
+const slidesV = document.querySelectorAll('.slidV');
+const totalSlidesV = slidesV.length;
+
+let currentIndexF = 0;
+const slidesF = document.querySelectorAll('.slidF');
+const totalSlidesF = slidesF.length;
+
+function scrollSliderV(direction) {
+  currentIndexV = (currentIndexV + direction + totalSlidesV) % totalSlidesV;
+  const offset = -currentIndexV * slidesV[0].offsetWidth;
+  document.querySelector('.sliderV').style.transform = `translateX(${offset}px)`;
+}
+
+function scrollSliderF(direction) {
+  currentIndexF = (currentIndexF + direction + totalSlidesF) % totalSlidesF;
+  const offset = -currentIndexF * slidesF[0].offsetWidth;
+  document.querySelector('.sliderF').style.transform = `translateX(${offset}px)`;
+}
+
+// ==========================
+
+//ДИАГРАММА
+var options = {
+  series: [22, 78, 67, 83],
+  chart: {
+    height: 220,
+    type: "radialBar",
+  },
+  series: [67, 84, 97, 61],
+  plotOptions: {
+    radialBar: {
+      track: {
+        background: '#1f1f1f', // Укажите желаемый цвет контуров здесь
+      },
+      dataLabels: {
+        total: {
+          show: true,
+          label: 'Рейтинг',
+          color: '#DDDDDD'
+        },
+        name: {
+          fontSize: '12px',
+        },
+        value: {
+          fontSize: '12px',
+          color: '#DDDDDD',
+        },
+      }
+    },
+    track: {
+          background: '#1f1f1f', // Укажите желаемый цвет контуров здесь
+    },      
+  },
+  stroke: {
+      lineCap: 'round',
+    },  
+  labels: ['Скорость', 'Точность', 'Ловкость', 'Сила']
+};
+
+var chart = new ApexCharts(document.querySelector("#chart"), options);
+  chart.render();
diff --git a/script.js b/script.js
@@ -133,97 +133,61 @@ document.addEventListener('DOMContentLoaded', function () {
 
 // ==========================
 
-// ПЕРЕХОД ИЗ СПИСКА КАРТОЧЕК НА СТРАНИЦУ ИГРОКА
+
+
+// // ПЕРЕХОД ИЗ СПИСКА КАРТОЧЕК НА СТРАНИЦУ ИГРОКА
 document.addEventListener('DOMContentLoaded', function() {
   // Получаем все карточки игроков
   const cardGamers = document.querySelectorAll('.cards_row_gamer');
 
+  // Получаем текущий активный раздел в боковой панели
+  const currentActiveSection = document.querySelector('.sidebar .nav-item.active');
+
   // Для каждой карточки игрока добавляем обработчик события клика
   cardGamers.forEach(function(cardGamer) {
     cardGamer.addEventListener('click', function() {
-      // Переходим на страницу игрока с id="page2.1"
-      togglePage('page2.1');
+      // Переходим на страницу игрока
+      window.location.href = `page_gamer.html`;
 
-      // Добавляем/удаляем классы активности для визуального отображения текущей страницы в навигации
-      const items = document.querySelectorAll('.nav-item');
-      items.forEach(item => {
-        if (item.id === 'item2.1') {
-          item.classList.add('active');
-        } else {
-          item.classList.remove('active');
-        }
-      });
 
       // Устанавливаем вкладку "Игроки" в фокусе после перехода на страницу игрока
       const playersTab = document.getElementById('item2');
       playersTab.classList.add('active');
     });
   });
-});
-
-// ==========================
-
-// СКРОЛЛ ДЛЯ БЛОКА ВИДЕО, ДРУЗЬЯ И МАТЧИ
-let currentIndexV = 0;
-const slidesV = document.querySelectorAll('.slidV');
-const totalSlidesV = slidesV.length;
 
-let currentIndexF = 0;
-const slidesF = document.querySelectorAll('.slidF');
-const totalSlidesF = slidesF.length;
+  // Если текущий активный раздел в боковой панели был "Игроки", активируем его снова
+  if (currentActiveSection && currentActiveSection.id === 'item2') {
+    currentActiveSection.classList.add('active');
+  }
+});
 
-function scrollSliderV(direction) {
-  currentIndexV = (currentIndexV + direction + totalSlidesV) % totalSlidesV;
-  const offset = -currentIndexV * slidesV[0].offsetWidth;
-  document.querySelector('.sliderV').style.transform = `translateX(${offset}px)`;
-}
 
-function scrollSliderF(direction) {
-  currentIndexF = (currentIndexF + direction + totalSlidesF) % totalSlidesF;
-  const offset = -currentIndexF * slidesF[0].offsetWidth;
-  document.querySelector('.sliderF').style.transform = `translateX(${offset}px)`;
-}
+// document.addEventListener('DOMContentLoaded', function() {
+//   // Получаем все карточки игроков
+//   const cardGamers = document.querySelectorAll('.cards_row_gamer');
 
-// ==========================
+//   // Для каждой карточки игрока добавляем обработчик события клика
+//   cardGamers.forEach(function(cardGamer) {
+//     cardGamer.addEventListener('click', function() {
+//       // // Переходим на страницу игрока с id="page2.1"
+//       window.location.href = `page_gamer.html`;
+
+//       // Добавляем/удаляем классы активности для визуального отображения текущей страницы в навигации
+//       const items = document.querySelectorAll('.nav-item');
+//       items.forEach(item => {
+//         if (item.id === 'item2.1') {
+//           item.classList.add('active');
+//         } else {
+//           item.classList.remove('active');
+//         }
+//       });
+
+//       // Устанавливаем вкладку "Игроки" в фокусе после перехода на страницу игрока
+//       const playersTab = document.getElementById('item2');
+//       playersTab.classList.add('active');
+//     });
+//   });
+// });
 
-//ДИАГРАММА
-var options = {
-  series: [22, 78, 67, 83],
-  chart: {
-    height: 200,
-    type: "radialBar",
-  },
-  series: [67, 84, 97, 61],
-  plotOptions: {
-    radialBar: {
-      track: {
-        background: '#1f1f1f', // Укажите желаемый цвет контуров здесь
-      },
-      dataLabels: {
-        total: {
-          show: true,
-          label: 'Рейтинг',
-          color: '#DDDDDD'
-        },
-        name: {
-          fontSize: '12px',
-        },
-        value: {
-          fontSize: '18px',
-          color: '#DDDDDD',
-        },
-      }
-    },
-    track: {
-          background: '#1f1f1f', // Укажите желаемый цвет контуров здесь
-    },      
-  },
-  stroke: {
-      lineCap: 'round',
-    },  
-  labels: ['Скорость', 'Точность', 'Ловкость', 'Сила']
-};
-
-var chart = new ApexCharts(document.querySelector("#chart"), options);
-  chart.render();