diff --git a/index.html b/index.html index af00e7c..9af7b62 100644 --- a/index.html +++ b/index.html @@ -205,17 +205,25 @@ transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,217,255,0.2); } - .exercise-card .video { + .exercise-card .exercise-image { width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, #00d9ff, #00ff88); display: flex; align-items: center; justify-content: center; - color: #1a1a2e; - font-size: 48px; + overflow: hidden; cursor: pointer; } + .exercise-card .exercise-image:hover img { + transform: scale(1.1); + } + .exercise-card .exercise-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s; + } .exercise-card .info { padding: 20px; } .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; } @@ -573,8 +581,8 @@
-
▶
-

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

+
📷
+

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

@@ -690,27 +698,27 @@ // === ДАННЫЕ === const exercises = [ // Осанка и спина (4 упражнения) - { id: 1, name: "Кошка-корова", category: "posture", focus: "Гиперлордоз, гибкость спины", time: "2 мин", reps: "10-12 повторений", video: "https://www.youtube.com/embed/y0nD3pgq_28", desc: "Медленно прогибай спину вверх, затем вниз. Дыхание ровное." }, - { id: 2, name: "Стена у стены", category: "posture", focus: "Осанка", time: "1 мин", reps: "3 подхода", video: "https://www.youtube.com/embed/3p5l8J9rF5o", desc: "Встань спиной к стене, прижми затылок, лопатки, ягодицы и пятки." }, - { id: 3, name: "Лодочка", category: "posture", focus: "Спина, осанка", time: "1 мин", reps: "10 повторений", video: "https://www.youtube.com/embed/2gJrJdF8h7M", desc: "Лёжа на животе, одновременно поднимай руки и ноги." }, - { id: 4, name: "Тяга к стене", category: "posture", focus: "Осанка, плечи", time: "2 мин", reps: "15 повторений", video: "https://www.youtube.com/embed/4K0e1EjwRnM", desc: "Стоя у стены, своди лопатки и тянись руками вверх." }, - { id: 5, name: "Планка на предплечьях", category: "abs", focus: "Кор, осанка", time: "60 сек", reps: "3 подхода", video: "https://www.youtube.com/embed/pSHjTRCQxIw", desc: "Держи тело ровно, не прогибай поясницу." }, - { id: 6, name: "Вакуум", category: "abs", focus: "Плоский живот", time: "2 мин", reps: "5 подходов по 15 сек", video: "https://www.youtube.com/embed/8QcXlB6kXhE", desc: "Выдохни весь воздух, втяни живот под рёбра, держи." }, - { id: 7, name: "Велосипед", category: "abs", focus: "Косые мышцы, бока", time: "2 мин", reps: "20 повторений", video: "https://www.youtube.com/embed/1obhK7pOwEw", desc: "Лёжа на спине, крути педали, касайся локтем противоположного колена." }, - { id: 8, name: "Скручивания", category: "abs", focus: "Пресс", time: "2 мин", reps: "15-20 повторений", video: "https://www.youtube.com/embed/Xyd_fa5zoEU", desc: "Поднимай только лопатки, поясница прижата." }, - { id: 9, name: "Боковая планка", category: "abs", focus: "Бока, косые", time: "30 сек", reps: "3 подхода на сторону", video: "https://www.youtube.com/embed/3wVknM4sLgM", desc: "Держи тело в линию, не опускай таз." }, - { id: 10, name: "Приседания", category: "legs", focus: "Ноги, ягодицы", time: "3 мин", reps: "20 повторений", video: "https://www.youtube.com/embed/U0t2KK8vLzU", desc: "Спина ровная, колени не выходят за носки." }, - { id: 11, name: "Выпады", category: "legs", focus: "Ноги, ягодицы", time: "3 мин", reps: "12 на ногу", video: "https://www.youtube.com/embed/QOVaTkbz9fA", desc: "Шагай вперёд, опускай колено почти до пола." }, - { id: 12, name: "Ягодичный мост", category: "legs", focus: "Ягодицы", time: "2 мин", reps: "20 повторений", video: "https://www.youtube.com/embed/7iI4oVXQkXQ", desc: "Лёжа на спине, поднимай таз, сжимай ягодицы." }, - { id: 13, name: "Махи ногой", category: "legs", focus: "Ягодицы, бока", time: "2 мин", reps: "15 на ногу", video: "https://www.youtube.com/embed/4vA8R0eXzQY", desc: "Стоя на четвереньках, поднимай ногу в сторону." }, - { id: 14, name: "Отжимания от стены", category: "arms", focus: "Трицепс, грудь", time: "2 мин", reps: "15 повторений", video: "https://www.youtube.com/embed/IobKv5VXEhI", desc: "Чем дальше ноги от стены, тем сложнее." }, - { id: 15, name: "Обратные отжимания", category: "arms", focus: "Трицепс", time: "2 мин", reps: "12 повторений", video: "https://www.youtube.com/embed/6pS5E1y5_7E", desc: "Сидя на полу, руки сзади на стуле, опускай таз." }, - { id: 16, name: "Круговые вращения", category: "arms", focus: "Плечи", time: "1 мин", reps: "20 вперёд, 20 назад", video: "https://www.youtube.com/embed/qX9YfKzIwHs", desc: "Руки в стороны, делай маленькие круги." }, - { id: 17, name: "Боксирование", category: "arms", focus: "Руки, кардио", time: "2 мин", reps: "50 ударов", video: "https://www.youtube.com/embed/hP2uH4XnJdM", desc: "Быстро боксируй в воздухе, держи темп." }, - { id: 18, name: "Джампинг Джек", category: "cardio", focus: "Сжигание жира", time: "2 мин", reps: "40 повторений", video: "https://www.youtube.com/embed/c4DAnljDykF", desc: "Прыжки с хлопком над головой." }, - { id: 19, name: "Бег на месте", category: "cardio", focus: "Кардио", time: "3 мин", reps: "Высоко поднимай колени", video: "https://www.youtube.com/embed/2qTF3S1Qh8M", desc: "Быстрый темп, руки работают." }, - { id: 20, name: "Бёрпи (облегчённый)", category: "cardio", focus: "Всё тело", time: "2 мин", reps: "10 повторений", video: "https://www.youtube.com/embed/auBL5Jk54gw", desc: "Присядь, шаг назад в планку, шаг вперёд, прыжок." }, - { id: 21, name: "Ножницы", category: "abs", focus: "Нижний пресс", time: "1 мин", reps: "3 подхода", video: "https://www.youtube.com/embed/02eKNa3NOOo", desc: "Лёжа на спине, скрещивай ноги в воздухе." } + { id: 1, name: "Кошка-корова", category: "posture", focus: "Гиперлордоз, гибкость спины", time: "2 мин", reps: "10-12 повторений", image: "https://images.unsplash.com/photo-1544367563-12123d8965cd?w=800", desc: "Медленно прогибай спину вверх, затем вниз. Дыхание ровное." }, + { id: 2, name: "Стена у стены", category: "posture", focus: "Осанка", time: "1 мин", reps: "3 подхода", image: "https://images.unsplash.com/photo-1518611012118-696072aa579a?w=800", desc: "Встань спиной к стене, прижми затылок, лопатки, ягодицы и пятки." }, + { id: 3, name: "Лодочка", category: "posture", focus: "Спина, осанка", time: "1 мин", reps: "10 повторений", image: "https://images.unsplash.com/photo-1599447421405-0c1a11438018?w=800", desc: "Лёжа на животе, одновременно поднимай руки и ноги." }, + { id: 4, name: "Тяга к стене", category: "posture", focus: "Осанка, плечи", time: "2 мин", reps: "15 повторений", image: "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=800", desc: "Стоя у стены, своди лопатки и тянись руками вверх." }, + { id: 5, name: "Планка на предплечьях", category: "abs", focus: "Кор, осанка", time: "60 сек", reps: "3 подхода", image: "https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=800", desc: "Держи тело ровно, не прогибай поясницу." }, + { id: 6, name: "Вакуум", category: "abs", focus: "Плоский живот", time: "2 мин", reps: "5 подходов по 15 сек", image: "https://images.unsplash.com/photo-1574680096141-1cddd32e04ca?w=800", desc: "Выдохни весь воздух, втяни живот под рёбра, держи." }, + { id: 7, name: "Велосипед", category: "abs", focus: "Косые мышцы, бока", time: "2 мин", reps: "20 повторений", image: "https://images.unsplash.com/photo-1434596922112-19c288801c94?w=800", desc: "Лёжа на спине, крути педали, касайся локтем противоположного колена." }, + { id: 8, name: "Скручивания", category: "abs", focus: "Пресс", time: "2 мин", reps: "15-20 повторений", image: "https://images.unsplash.com/photo-1598289431512-b97b0917affc?w=800", desc: "Поднимай только лопатки, поясница прижата." }, + { id: 9, name: "Боковая планка", category: "abs", focus: "Бока, косые", time: "30 сек", reps: "3 подхода на сторону", image: "https://images.unsplash.com/photo-1520218206969-345ace7298a3?w=800", desc: "Держи тело в линию, не опускай таз." }, + { id: 10, name: "Приседания", category: "legs", focus: "Ноги, ягодицы", time: "3 мин", reps: "20 повторений", image: "https://images.unsplash.com/photo-1434608519344-49d77a699ded?w=800", desc: "Спина ровная, колени не выходят за носки." }, + { id: 11, name: "Выпады", category: "legs", focus: "Ноги, ягодицы", time: "3 мин", reps: "12 на ногу", image: "https://images.unsplash.com/photo-1438029071396-1e831a7fa6d8?w=800", desc: "Шагай вперёд, опускай колено почти до пола." }, + { id: 12, name: "Ягодичный мост", category: "legs", focus: "Ягодицы", time: "2 мин", reps: "20 повторений", image: "https://images.unsplash.com/photo-1598971639058-211a73287138?w=800", desc: "Лёжа на спине, поднимай таз, сжимай ягодицы." }, + { id: 13, name: "Махи ногой", category: "legs", focus: "Ягодицы, бока", time: "2 мин", reps: "15 на ногу", image: "https://images.unsplash.com/photo-1518310383802-640c2de396b2?w=800", desc: "Стоя на четвереньках, поднимай ногу в сторону." }, + { id: 14, name: "Отжимания от стены", category: "arms", focus: "Трицепс, грудь", time: "2 мин", reps: "15 повторений", image: "https://images.unsplash.com/photo-1581009137042-c552e485697a?w=800", desc: "Чем дальше ноги от стены, тем сложнее." }, + { id: 15, name: "Обратные отжимания", category: "arms", focus: "Трицепс", time: "2 мин", reps: "12 повторений", image: "https://images.unsplash.com/photo-1581009146145-b5ef050c2e1e?w=800", desc: "Сидя на полу, руки сзади на стуле, опускай таз." }, + { id: 16, name: "Круговые вращения", category: "arms", focus: "Плечи", time: "1 мин", reps: "20 вперёд, 20 назад", image: "https://images.unsplash.com/photo-1599058945522-28d584b6f0ff?w=800", desc: "Руки в стороны, делай маленькие круги." }, + { id: 17, name: "Боксирование", category: "arms", focus: "Руки, кардио", time: "2 мин", reps: "50 ударов", image: "https://images.unsplash.com/photo-1549719386-74dfcbf7dbed?w=800", desc: "Быстро боксируй в воздухе, держи темп." }, + { id: 18, name: "Джампинг Джек", category: "cardio", focus: "Сжигание жира", time: "2 мин", reps: "40 повторений", image: "https://images.unsplash.com/photo-1452626038306-3aae55aa3582?w=800", desc: "Прыжки с хлопком над головой." }, + { id: 19, name: "Бег на месте", category: "cardio", focus: "Кардио", time: "3 мин", reps: "Высоко поднимай колени", image: "https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?w=800", desc: "Быстрый темп, руки работают." }, + { id: 20, name: "Бёрпи (облегчённый)", category: "cardio", focus: "Всё тело", time: "2 мин", reps: "10 повторений", image: "https://images.unsplash.com/photo-1459908676235-d5f4719680b8?w=800", desc: "Присядь, шаг назад в планку, шаг вперёд, прыжок." }, + { id: 21, name: "Ножницы", category: "abs", focus: "Нижний пресс", time: "1 мин", reps: "3 подхода", image: "https://images.unsplash.com/photo-1566241440091-ec10de8db2d1?w=800", desc: "Лёжа на спине, скрещивай ноги в воздухе." } ]; const workoutPlan = [ @@ -774,7 +782,7 @@ container.innerHTML = today.exercises.map(exId => { const ex = exercises.find(e => e.id === exId); return '
' + - '
▶
' + + '
' + ex.name + '
' + '
' + '

' + ex.name + '

' + '

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

' + @@ -786,7 +794,7 @@ function renderCatalog() { document.getElementById('exercise-catalog').innerHTML = exercises.map(ex => '
' + - '
▶
' + + '
' + ex.name + '
' + '
' + '

' + ex.name + '

' + '

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

' + @@ -795,15 +803,12 @@ ).join(''); } - function openVideo(id) { + function openExercise(id) { const ex = exercises.find(e => e.id === id); - const videoUrl = ex.video.replace('/embed/', '/watch?v='); document.getElementById('modal-title').textContent = ex.name; document.getElementById('modal-video').innerHTML = '
' + - '' + - '

Если видео не загружается, открой на YouTube:

' + - '▶ Открыть на YouTube' + + '' + ex.name + '' + '
'; document.getElementById('modal-desc').textContent = ex.desc; document.getElementById('video-modal').classList.add('active'); @@ -830,7 +835,7 @@ list.innerHTML = filtered.map(ex => '
' + - '
▶
' + + '
📷
' + '
' + '

' + ex.name + '

' + '

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

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

' + ex.desc + '

▶ Открыть на YouTube'; + document.getElementById('current-exercise-desc').innerHTML = '🎯 ' + ex.focus + ' • ⏱️ ' + ex.time + ' • ' + ex.reps + '

' + ex.desc; document.querySelectorAll('.exercise-item').forEach(item => item.classList.remove('active')); event.currentTarget.classList.add('active');