Madina/privet-menya-zovut-madina-mn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: заменены видео упражнений на фото

Browse Source
This commit is contained in:
Madina 2026-08-10 10:05:23 +00:00
parent 93ad68c78e
commit 1a07519235
1 changed files with 41 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
index.html
View File

@ -205,17 +205,25 @@
transform: translateY(-5px); transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,217,255,0.2); box-shadow: 0 15px 40px rgba(0,217,255,0.2);
} }
.exercise-card .video { .exercise-card .exercise-image {
width: 100%; width: 100%;
aspect-ratio: 16/9; aspect-ratio: 16/9;
background: linear-gradient(135deg, #00d9ff, #00ff88); background: linear-gradient(135deg, #00d9ff, #00ff88);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #1a1a2e; overflow: hidden;
font-size: 48px;
cursor: pointer; 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 .info { padding: 20px; }
.exercise-card h4 { color: #00ff88; margin-bottom: 10px; } .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; } .exercise-card p { color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.6; }
@ -573,8 +581,8 @@
<div class="workout-video-container"> <div class="workout-video-container">
<div class="video-section"> <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 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> <div style="font-size: 64px; opacity: 0.5;">📷</div>
<p style="margin-top: 20px; opacity: 0.7;">Выберите упражнение для просмотра видео</p> <p style="margin-top: 20px; opacity: 0.7;">Выберите упражнение для просмотра фото</p>
</div> </div>
<h3 id="current-exercise-name" style="margin-top: 20px; color: #00ff88;"></h3> <h3 id="current-exercise-name" style="margin-top: 20px; color: #00ff88;"></h3>
<p id="current-exercise-desc" style="opacity: 0.8;"></p> <p id="current-exercise-desc" style="opacity: 0.8;"></p>
@ -690,27 +698,27 @@
// === ДАННЫЕ === // === ДАННЫЕ ===
const exercises = [ const exercises = [
// Осанка и спина (4 упражнения) // Осанка и спина (4 упражнения)
{ id: 1, name: "Кошка-корова", category: "posture", focus: "Гиперлордоз, гибкость спины", time: "2 мин", reps: "10-12 повторений", video: "https://www.youtube.com/embed/y0nD3pgq_28", 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 подхода", video: "https://www.youtube.com/embed/3p5l8J9rF5o", 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 повторений", video: "https://www.youtube.com/embed/2gJrJdF8h7M", 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 повторений", video: "https://www.youtube.com/embed/4K0e1EjwRnM", 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 подхода", video: "https://www.youtube.com/embed/pSHjTRCQxIw", 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 сек", video: "https://www.youtube.com/embed/8QcXlB6kXhE", 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 повторений", video: "https://www.youtube.com/embed/1obhK7pOwEw", 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 повторений", video: "https://www.youtube.com/embed/Xyd_fa5zoEU", 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 подхода на сторону", video: "https://www.youtube.com/embed/3wVknM4sLgM", 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 повторений", video: "https://www.youtube.com/embed/U0t2KK8vLzU", 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 на ногу", video: "https://www.youtube.com/embed/QOVaTkbz9fA", 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 повторений", video: "https://www.youtube.com/embed/7iI4oVXQkXQ", 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 на ногу", video: "https://www.youtube.com/embed/4vA8R0eXzQY", 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 повторений", video: "https://www.youtube.com/embed/IobKv5VXEhI", 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 повторений", video: "https://www.youtube.com/embed/6pS5E1y5_7E", 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 назад", video: "https://www.youtube.com/embed/qX9YfKzIwHs", 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 ударов", video: "https://www.youtube.com/embed/hP2uH4XnJdM", 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 повторений", video: "https://www.youtube.com/embed/c4DAnljDykF", 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: "Высоко поднимай колени", video: "https://www.youtube.com/embed/2qTF3S1Qh8M", 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 повторений", video: "https://www.youtube.com/embed/auBL5Jk54gw", 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 подхода", video: "https://www.youtube.com/embed/02eKNa3NOOo", desc: "Лёжа на спине, скрещивай ноги в воздухе." } { id: 21, name: "Ножницы", category: "abs", focus: "Нижний пресс", time: "1 мин", reps: "3 подхода", image: "https://images.unsplash.com/photo-1566241440091-ec10de8db2d1?w=800", desc: "Лёжа на спине, скрещивай ноги в воздухе." }
]; ];
const workoutPlan = [ const workoutPlan = [
@ -774,7 +782,7 @@
container.innerHTML = today.exercises.map(exId => { container.innerHTML = today.exercises.map(exId => {
const ex = exercises.find(e => e.id === exId); const ex = exercises.find(e => e.id === exId);
return '<div class="exercise-card">' + return '<div class="exercise-card">' +
'<div class="video" onclick="openVideo(' + ex.id + ')">▶</div>' + '<div class="exercise-image" onclick="openExercise(' + ex.id + ')"><img src="' + ex.image + '" alt="' + ex.name + '" style="width:100%;height:100%;object-fit:cover;"></div>' +
'<div class="info">' + '<div class="info">' +
'<h4>' + ex.name + '</h4>' + '<h4>' + ex.name + '</h4>' +
'<p>🎯 ' + ex.focus + ' • ⏱️ ' + ex.time + '</p>' + '<p>🎯 ' + ex.focus + ' • ⏱️ ' + ex.time + '</p>' +
@ -786,7 +794,7 @@
function renderCatalog() { function renderCatalog() {
document.getElementById('exercise-catalog').innerHTML = exercises.map(ex => document.getElementById('exercise-catalog').innerHTML = exercises.map(ex =>
'<div class="exercise-card">' + '<div class="exercise-card">' +
'<div class="video" onclick="openVideo(' + ex.id + ')">▶</div>' + '<div class="exercise-image" onclick="openExercise(' + ex.id + ')"><img src="' + ex.image + '" alt="' + ex.name + '" style="width:100%;height:100%;object-fit:cover;"></div>' +
'<div class="info">' + '<div class="info">' +
'<h4>' + ex.name + '</h4>' + '<h4>' + ex.name + '</h4>' +
'<p>🎯 ' + ex.focus + ' • ⏱️ ' + ex.time + '</p>' + '<p>🎯 ' + ex.focus + ' • ⏱️ ' + ex.time + '</p>' +
@ -795,15 +803,12 @@
).join(''); ).join('');
} }
function openVideo(id) { function openExercise(id) {
const ex = exercises.find(e => e.id === 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-title').textContent = ex.name;
document.getElementById('modal-video').innerHTML = document.getElementById('modal-video').innerHTML =
'<div style="text-align:center;">' + '<div style="text-align:center;">' +
'<iframe width="100%" height="400" src="' + ex.video + '?rel=0&modestbranding=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="border-radius:12px;"></iframe>' + '<img src="' + ex.image + '" alt="' + ex.name + '" style="width:100%;border-radius:12px;object-fit:cover;">' +
'<p style="margin-top:15px; font-size:14px; opacity:0.8;">Если видео не загружается, открой на YouTube:</p>' +
'<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>' +
'</div>'; '</div>';
document.getElementById('modal-desc').textContent = ex.desc; document.getElementById('modal-desc').textContent = ex.desc;
document.getElementById('video-modal').classList.add('active'); document.getElementById('video-modal').classList.add('active');
@ -830,7 +835,7 @@
list.innerHTML = filtered.map(ex => list.innerHTML = filtered.map(ex =>
'<div class="exercise-item" onclick="playVideo(' + ex.id + ')">' + '<div class="exercise-item" onclick="playVideo(' + ex.id + ')">' +
'<div class="exercise-item-icon">▶</div>' + '<div class="exercise-item-icon">📷</div>' +
'<div class="exercise-item-info">' + '<div class="exercise-item-info">' +
'<h4>' + ex.name + '</h4>' + '<h4>' + ex.name + '</h4>' +
'<p>🎯 ' + ex.focus + ' • ⏱️ ' + ex.time + '</p>' + '<p>🎯 ' + ex.focus + ' • ⏱️ ' + ex.time + '</p>' +
@ -840,12 +845,11 @@
function playVideo(id) { function playVideo(id) {
const ex = exercises.find(e => e.id === 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('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>'; '<img src="' + ex.image + '" alt="' + ex.name + '" style="width:100%;border-radius:12px;object-fit:cover;">';
document.getElementById('current-exercise-name').textContent = ex.name; 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.getElementById('current-exercise-desc').innerHTML = '<strong>🎯 ' + ex.focus + '</strong> • ⏱️ ' + ex.time + ' • ' + ex.reps + '<br><br>' + ex.desc;
document.querySelectorAll('.exercise-item').forEach(item => item.classList.remove('active')); document.querySelectorAll('.exercise-item').forEach(item => item.classList.remove('active'));
event.currentTarget.classList.add('active'); event.currentTarget.classList.add('active');