feat: добавлена секция Тренировки с видео - видео показываются на странице сразу

index.html

@@ -220,6 +220,72 @@
     .exercise-card h4 { color: #00ff88; margin-bottom: 10px; }
     .exercise-card p { color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.6; }
     
+    /* Workout Video Section */
+    .workout-video-container {
+      display: grid;
+      grid-template-columns: 1fr 350px;
+      gap: 30px;
+      margin-top: 30px;
+    }
+    @media (max-width: 900px) {
+      .workout-video-container { grid-template-columns: 1fr; }
+    }
+    .video-section {
+      background: rgba(255,255,255,0.05);
+      border-radius: 16px;
+      padding: 30px;
+      border: 1px solid rgba(255,255,255,0.1);
+    }
+    .exercise-list {
+      background: rgba(255,255,255,0.05);
+      border-radius: 16px;
+      padding: 20px;
+      border: 1px solid rgba(255,255,255,0.1);
+      max-height: 600px;
+      overflow-y: auto;
+    }
+    .exercise-item {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+      padding: 15px;
+      margin-bottom: 10px;
+      background: rgba(255,255,255,0.08);
+      border-radius: 12px;
+      cursor: pointer;
+      transition: 0.3s;
+      border: 2px solid transparent;
+    }
+    .exercise-item:hover {
+      background: rgba(255,255,255,0.12);
+      transform: translateX(5px);
+    }
+    .exercise-item.active {
+      border-color: #00ff88;
+      background: rgba(0,255,136,0.1);
+    }
+    .exercise-item-icon {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #00d9ff, #00ff88);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      flex-shrink: 0;
+    }
+    .exercise-item-info h4 {
+      color: #00ff88;
+      margin: 0 0 5px 0;
+      font-size: 16px;
+    }
+    .exercise-item-info p {
+      color: rgba(255,255,255,0.6);
+      font-size: 13px;
+      margin: 0;
+    }
+    
     /* Music Player */
     .music-player {
       background: linear-gradient(135deg, rgba(0,217,255,0.2), rgba(0,255,136,0.2));
@@ -412,8 +478,9 @@
     </header>
     
     <nav class="nav">
-      <button class="active" onclick="showSection('today')">📅 Сегодня</button>
+      <button class="active" onclick="showSection('workouts')">🎬 Тренировки</button>
-      <button onclick="showSection('catalog')">🎬 Упражнения</button>
+      <button onclick="showSection('today')">📅 Сегодня</button>
+      <button onclick="showSection('catalog')">📖 Все упражнения</button>
       <button onclick="showSection('calendar')">📆 Календарь</button>
       <button onclick="showSection('tracker')">📊 Прогресс</button>
       <button onclick="showSection('nutrition')">🥗 Питание</button>
@@ -422,7 +489,7 @@
     </nav>
     
     <!-- СЕКЦИЯ: СЕГОДНЯ -->
-    <div id="today" class="section active">
+    <div id="today" class="section">
       <h2>🔥 Тренировка на сегодня</h2>
       
       <!-- Будильник -->
@@ -489,9 +556,37 @@
       <button class="btn btn-block" onclick="markTodayDone()">✅ Отметить тренировку выполненной</button>
     </div>
     
-    <!-- СЕКЦИЯ: УПРАЖНЕНИЯ -->
+    <!-- СЕКЦИЯ: ТРЕНИРОВКИ С ВИДЕО -->
+    <div id="workouts" class="section active">
+      <h2>🎬 Тренировки с видео</h2>
+      <p style="margin-bottom: 20px; opacity: 0.8;">Нажми на упражнение и видео откроется здесь же</p>
+      
+      <div class="nav" style="margin-bottom: 20px;">
+        <button class="active" onclick="filterWorkout('all')">Все</button>
+        <button onclick="filterWorkout('posture')">🧘 Осанка</button>
+        <button onclick="filterWorkout('abs')">🔥 Пресс</button>
+        <button onclick="filterWorkout('legs')">🦵 Ноги</button>
+        <button onclick="filterWorkout('arms')">💪 Руки</button>
+        <button onclick="filterWorkout('cardio')">❤️ Кардио</button>
+      </div>
+      
+      <div class="workout-video-container">
+        <div class="video-section">
+          <div id="main-video-player" style="background: rgba(0,0,0,0.3); border-radius: 16px; padding: 20px; text-align: center;">
+            <div style="font-size: 64px; opacity: 0.5;">▶</div>
+            <p style="margin-top: 20px; opacity: 0.7;">Выберите упражнение для просмотра видео</p>
+          </div>
+          <h3 id="current-exercise-name" style="margin-top: 20px; color: #00ff88;"></h3>
+          <p id="current-exercise-desc" style="opacity: 0.8;"></p>
+        </div>
+        
+        <div class="exercise-list" id="workout-exercise-list"></div>
+      </div>
+    </div>
+    
+    <!-- СЕКЦИЯ: КАТАЛОГ -->
     <div id="catalog" class="section">
-      <h2>🎬 Каталог упражнений</h2>
+      <h2>📖 Все упражнения</h2>
       <div class="exercise-grid" id="exercise-catalog"></div>
     </div>
     
@@ -719,6 +814,43 @@
       document.getElementById('modal-video').innerHTML = '';
     }
     
+    // === ТРЕНИРОВКИ С ВИДЕО ===
+    let currentFilter = 'all';
+    
+    function filterWorkout(category) {
+      currentFilter = category;
+      document.querySelectorAll('.nav button').forEach(btn => btn.classList.remove('active'));
+      event.target.classList.add('active');
+      renderWorkoutList();
+    }
+    
+    function renderWorkoutList() {
+      const list = document.getElementById('workout-exercise-list');
+      const filtered = currentFilter === 'all' ? exercises : exercises.filter(ex => ex.category === currentFilter);
+      
+      list.innerHTML = filtered.map(ex => 
+        '<div class="exercise-item" onclick="playVideo(' + ex.id + ')">' +
+        '<div class="exercise-item-icon">▶</div>' +
+        '<div class="exercise-item-info">' +
+        '<h4>' + ex.name + '</h4>' +
+        '<p>🎯 ' + ex.focus + ' • ⏱️ ' + ex.time + '</p>' +
+        '</div></div>'
+      ).join('');
+    }
+    
+    function playVideo(id) {
+      const ex = exercises.find(e => e.id === id);
+      const videoUrl = ex.video.replace('/embed/', '/watch?v=');
+      
+      document.getElementById('main-video-player').innerHTML = 
+        '<iframe width="100%" height="450" src="' + ex.video + '?autoplay=1&rel=0&modestbranding=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="border-radius:12px;"></iframe>';
+      document.getElementById('current-exercise-name').textContent = ex.name;
+      document.getElementById('current-exercise-desc').innerHTML = '<strong>🎯 ' + ex.focus + '</strong> • ⏱️ ' + ex.time + ' • ' + ex.reps + '<br><br>' + ex.desc + '<br><br><a href="' + videoUrl + '" target="_blank" style="display:inline-block; margin-top:10px; padding:12px 24px; background:linear-gradient(135deg, #00d9ff, #00ff88); color:#1a1a2e; text-decoration:none; border-radius:30px; font-weight:600;">▶ Открыть на YouTube</a>';
+      
+      document.querySelectorAll('.exercise-item').forEach(item => item.classList.remove('active'));
+      event.currentTarget.classList.add('active');
+    }
+    
     function markTodayDone() {
       const todayStr = new Date().toDateString();
       if (!progressData.completedDays.includes(todayStr)) {
@@ -927,6 +1059,9 @@
     
     // Проверка каждую минуту
     setInterval(checkAlarm, 60000);
+    
+    // Инициализация тренировки с видео при загрузке
+    renderWorkoutList();
   </script>
 </body>
 </html>