diff --git a/index.html b/index.html index 678e4e7..af00e7c 100644 --- a/index.html +++ b/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 @@ -
+

🔥 Тренировка на сегодня

@@ -489,9 +556,37 @@
- + +
+

🎬 Тренировки с видео

+

Нажми на упражнение и видео откроется здесь же

+ + + +
+
+
+
▶
+

Выберите упражнение для просмотра видео

+
+

+

+
+ +
+
+
+ +
-

🎬 Каталог упражнений

+

📖 Все упражнения

@@ -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 => + '
' + + '
▶
' + + '
' + + '

' + ex.name + '

' + + '

🎯 ' + ex.focus + ' • ⏱️ ' + ex.time + '

' + + '
' + ).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 = + ''; + document.getElementById('current-exercise-name').textContent = ex.name; + document.getElementById('current-exercise-desc').innerHTML = '🎯 ' + ex.focus + ' • ⏱️ ' + ex.time + ' • ' + ex.reps + '

' + ex.desc + '

▶ Открыть на YouTube'; + + 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();