1139 lines
50 KiB
HTML
1139 lines
50 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>FitMadina — Платформа трансформации тела</title>
|
||
<style>
|
||
* { margin: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
|
||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||
min-height: 100vh;
|
||
color: white;
|
||
}
|
||
.container { max-width: 1400px; margin: 0 auto; padding: 20px; }
|
||
|
||
/* Header */
|
||
header {
|
||
text-align: center;
|
||
padding: 60px 20px;
|
||
background: linear-gradient(rgba(26,26,46,0.8), rgba(26,26,46,0.9)),
|
||
url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=1920') center/cover;
|
||
border-radius: 20px;
|
||
margin-bottom: 30px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
header::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background: linear-gradient(135deg, rgba(0,217,255,0.1), rgba(0,255,136,0.1));
|
||
}
|
||
header h1 {
|
||
position: relative;
|
||
font-size: clamp(32px, 6vw, 56px);
|
||
font-weight: 800;
|
||
margin-bottom: 10px;
|
||
background: linear-gradient(90deg, #00d9ff, #00ff88);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
header p {
|
||
position: relative;
|
||
font-size: 18px;
|
||
color: rgba(255,255,255,0.8);
|
||
}
|
||
|
||
/* Navigation */
|
||
.nav {
|
||
display: flex;
|
||
gap: 12px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 40px;
|
||
padding: 20px;
|
||
background: rgba(255,255,255,0.05);
|
||
backdrop-filter: blur(20px);
|
||
border-radius: 20px;
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
}
|
||
.nav button {
|
||
padding: 14px 28px;
|
||
border: 2px solid rgba(0,217,255,0.3);
|
||
background: rgba(0,217,255,0.1);
|
||
color: #00d9ff;
|
||
border-radius: 30px;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
.nav button:hover,
|
||
.nav button.active {
|
||
background: linear-gradient(135deg, #00d9ff, #00ff88);
|
||
color: #1a1a2e;
|
||
border-color: transparent;
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 10px 30px rgba(0,217,255,0.4);
|
||
}
|
||
|
||
/* Sections */
|
||
.section {
|
||
background: rgba(255,255,255,0.05);
|
||
backdrop-filter: blur(20px);
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
border-radius: 20px;
|
||
padding: 40px;
|
||
margin-bottom: 30px;
|
||
display: none;
|
||
}
|
||
.section.active { display: block; }
|
||
|
||
h2 {
|
||
font-size: 32px;
|
||
margin-bottom: 10px;
|
||
background: linear-gradient(90deg, #00d9ff, #00ff88);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
h3 {
|
||
font-size: 22px;
|
||
color: #00ff88;
|
||
margin: 30px 0 20px;
|
||
}
|
||
|
||
/* Stats Grid */
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 20px;
|
||
margin: 30px 0;
|
||
}
|
||
.stat-card {
|
||
background: linear-gradient(135deg, rgba(0,217,255,0.15), rgba(0,255,136,0.15));
|
||
border: 1px solid rgba(0,217,255,0.3);
|
||
border-radius: 16px;
|
||
padding: 30px;
|
||
text-align: center;
|
||
transition: 0.3s;
|
||
}
|
||
.stat-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 15px 40px rgba(0,217,255,0.3);
|
||
}
|
||
.stat-card .icon { font-size: 40px; margin-bottom: 10px; }
|
||
.stat-card .value {
|
||
font-size: 42px;
|
||
font-weight: bold;
|
||
background: linear-gradient(90deg, #00d9ff, #00ff88);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
margin: 10px 0;
|
||
}
|
||
.stat-card .label { color: rgba(255,255,255,0.7); font-size: 14px; }
|
||
|
||
/* Buttons */
|
||
.btn {
|
||
padding: 16px 32px;
|
||
background: linear-gradient(135deg, #00d9ff, #00ff88);
|
||
color: #1a1a2e;
|
||
border: none;
|
||
border-radius: 12px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: 0.3s;
|
||
display: inline-block;
|
||
}
|
||
.btn:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 10px 30px rgba(0,217,255,0.4);
|
||
}
|
||
.btn-block { width: 100%; }
|
||
.btn-secondary {
|
||
background: rgba(255,255,255,0.1);
|
||
color: white;
|
||
border: 2px solid rgba(255,255,255,0.3);
|
||
}
|
||
|
||
/* Forms */
|
||
.form-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 15px;
|
||
margin: 20px 0;
|
||
}
|
||
.form-group input, .form-group select {
|
||
width: 100%;
|
||
padding: 15px;
|
||
background: rgba(255,255,255,0.08);
|
||
border: 2px solid rgba(255,255,255,0.2);
|
||
border-radius: 12px;
|
||
color: white;
|
||
font-size: 16px;
|
||
}
|
||
.form-group input:focus, .form-group select:focus {
|
||
border-color: #00d9ff;
|
||
outline: none;
|
||
box-shadow: 0 0 0 4px rgba(0,217,255,0.1);
|
||
}
|
||
.form-group input::placeholder { color: rgba(255,255,255,0.5); }
|
||
.form-group select option { background: #1a1a2e; color: white; }
|
||
|
||
/* Exercise Cards */
|
||
.exercise-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||
gap: 20px;
|
||
margin: 20px 0;
|
||
}
|
||
.exercise-card {
|
||
background: rgba(255,255,255,0.08);
|
||
border: 1px solid rgba(255,255,255,0.15);
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
transition: 0.3s;
|
||
}
|
||
.exercise-card:hover {
|
||
border-color: #00d9ff;
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 15px 40px rgba(0,217,255,0.2);
|
||
}
|
||
.exercise-card .exercise-image {
|
||
width: 100%;
|
||
aspect-ratio: 16/9;
|
||
background: linear-gradient(135deg, #00d9ff, #00ff88);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
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; }
|
||
|
||
/* 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));
|
||
border: 2px solid rgba(0,217,255,0.3);
|
||
border-radius: 16px;
|
||
padding: 25px;
|
||
margin: 20px 0;
|
||
}
|
||
.player-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
flex-wrap: wrap;
|
||
margin: 15px 0;
|
||
}
|
||
.player-btn {
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 50%;
|
||
border: none;
|
||
background: white;
|
||
color: #00d9ff;
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
transition: 0.3s;
|
||
}
|
||
.player-btn:hover { transform: scale(1.1); }
|
||
.player-btn.big {
|
||
width: 60px;
|
||
height: 60px;
|
||
font-size: 28px;
|
||
}
|
||
.playlist-select {
|
||
flex: 1;
|
||
min-width: 200px;
|
||
padding: 12px;
|
||
border-radius: 10px;
|
||
border: none;
|
||
background: rgba(255,255,255,0.9);
|
||
color: #1a1a2e;
|
||
font-size: 14px;
|
||
}
|
||
.now-playing {
|
||
margin-top: 15px;
|
||
font-size: 14px;
|
||
color: rgba(255,255,255,0.9);
|
||
}
|
||
|
||
/* Progress Bar */
|
||
.progress-bar {
|
||
background: rgba(255,255,255,0.1);
|
||
border-radius: 10px;
|
||
height: 24px;
|
||
margin: 20px 0;
|
||
overflow: hidden;
|
||
}
|
||
.progress-fill {
|
||
background: linear-gradient(90deg, #00d9ff, #00ff88);
|
||
height: 100%;
|
||
border-radius: 10px;
|
||
transition: width 0.5s;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
padding-right: 15px;
|
||
color: #1a1a2e;
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* Calendar */
|
||
.calendar-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(7, 1fr);
|
||
gap: 10px;
|
||
margin: 20px 0;
|
||
}
|
||
.calendar-day {
|
||
background: rgba(255,255,255,0.08);
|
||
border-radius: 12px;
|
||
padding: 15px 10px;
|
||
text-align: center;
|
||
min-height: 100px;
|
||
cursor: pointer;
|
||
transition: 0.3s;
|
||
border: 2px solid transparent;
|
||
}
|
||
.calendar-day:hover { border-color: #00d9ff; }
|
||
.calendar-day.today {
|
||
background: linear-gradient(135deg, #00d9ff, #00ff88);
|
||
color: #1a1a2e;
|
||
}
|
||
.calendar-day.done {
|
||
background: rgba(0,255,136,0.3);
|
||
border-color: #00ff88;
|
||
}
|
||
.calendar-day .day-num {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
}
|
||
.calendar-day .workout-type {
|
||
font-size: 11px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* Habits */
|
||
.habit-item {
|
||
background: rgba(255,255,255,0.08);
|
||
border: 1px solid rgba(255,255,255,0.15);
|
||
border-radius: 12px;
|
||
padding: 15px;
|
||
margin: 10px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
cursor: pointer;
|
||
transition: 0.3s;
|
||
}
|
||
.habit-item:hover {
|
||
border-color: #00ff88;
|
||
background: rgba(0,255,136,0.1);
|
||
}
|
||
.habit-item.done {
|
||
background: linear-gradient(135deg, rgba(0,255,136,0.2), rgba(0,217,255,0.2));
|
||
border-color: #00ff88;
|
||
}
|
||
.habit-item input[type="checkbox"] {
|
||
width: 24px;
|
||
height: 24px;
|
||
cursor: pointer;
|
||
}
|
||
.habit-item .icon { font-size: 28px; }
|
||
.habit-item .name { flex: 1; font-size: 16px; }
|
||
|
||
/* Modal */
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0; left: 0;
|
||
width: 100%; height: 100%;
|
||
background: rgba(0,0,0,0.9);
|
||
z-index: 1000;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.modal.active { display: flex; }
|
||
.modal-content {
|
||
background: #1a1a2e;
|
||
border: 2px solid #00d9ff;
|
||
border-radius: 20px;
|
||
padding: 40px;
|
||
max-width: 900px;
|
||
width: 90%;
|
||
max-height: 90vh;
|
||
overflow-y: auto;
|
||
}
|
||
.modal-close {
|
||
float: right;
|
||
font-size: 32px;
|
||
cursor: pointer;
|
||
color: #00d9ff;
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
.section { padding: 25px; }
|
||
.stats-grid { grid-template-columns: repeat(2, 1fr); }
|
||
.calendar-grid { grid-template-columns: repeat(7, 1fr); gap: 5px; }
|
||
.calendar-day { min-height: 70px; padding: 10px 5px; }
|
||
}
|
||
|
||
/* WhatsApp Floating Button */
|
||
.whatsapp-float {
|
||
position: fixed;
|
||
bottom: 25px;
|
||
right: 25px;
|
||
width: 60px;
|
||
height: 60px;
|
||
background: linear-gradient(135deg, #25D366, #128C7E);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4px 20px rgba(37,211,102,0.4);
|
||
transition: all 0.3s;
|
||
z-index: 999;
|
||
cursor: pointer;
|
||
}
|
||
.whatsapp-float:hover {
|
||
transform: scale(1.1);
|
||
box-shadow: 0 6px 30px rgba(37,211,102,0.6);
|
||
}
|
||
.whatsapp-float svg {
|
||
width: 35px;
|
||
height: 35px;
|
||
}
|
||
@media (max-width: 768px) {
|
||
.whatsapp-float {
|
||
bottom: 20px;
|
||
right: 20px;
|
||
width: 55px;
|
||
height: 55px;
|
||
}
|
||
.whatsapp-float svg {
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<div style="display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 15px;">
|
||
<div style="font-size: 64px; font-weight: 900; background: linear-gradient(135deg, #00d9ff, #00ff88); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 3px;">
|
||
FITMADINA
|
||
</div>
|
||
</div>
|
||
<p style="font-size: 18px; color: rgba(255,255,255,0.9); margin-top: 10px;">
|
||
💪 Платформа трансформации тела за 8 недель
|
||
</p>
|
||
<div style="display: flex; gap: 20px; justify-content: center; margin-top: 20px; flex-wrap: wrap;">
|
||
<span style="background: rgba(0,217,255,0.2); padding: 8px 16px; border-radius: 20px; font-size: 14px;">🎯 Минус 5-10 кг</span>
|
||
<span style="background: rgba(0,255,136,0.2); padding: 8px 16px; border-radius: 20px; font-size: 14px;">🏠 Дома</span>
|
||
<span style="background: rgba(254,202,87,0.2); padding: 8px 16px; border-radius: 20px; font-size: 14px;">⏱️ 45 мин/день</span>
|
||
</div>
|
||
</header>
|
||
|
||
<nav class="nav">
|
||
<button class="active" onclick="showSection('workouts')">🎬 Тренировки</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>
|
||
<button onclick="showSection('habits')">✨ Привычки</button>
|
||
<button onclick="showSection('inbody')">📐 ИнБоди</button>
|
||
</nav>
|
||
|
||
<!-- СЕКЦИЯ: СЕГОДНЯ -->
|
||
<div id="today" class="section">
|
||
<h2>🔥 Тренировка на сегодня</h2>
|
||
|
||
<!-- Будильник -->
|
||
<div style="background: linear-gradient(135deg, rgba(255,107,107,0.2), rgba(254,202,87,0.2)); border: 2px solid rgba(255,107,107,0.4); border-radius: 16px; padding: 25px; margin: 20px 0;">
|
||
<h3 style="margin-top: 0; color: #feca57;">🔔 Будильник на тренировку</h3>
|
||
<div style="display: flex; gap: 15px; align-items: center; flex-wrap: wrap;">
|
||
<input type="time" id="alarm-time" value="09:00" style="padding: 12px; border-radius: 10px; border: none; font-size: 18px; background: rgba(255,255,255,0.9); color: #1a1a2e;">
|
||
<button class="btn" onclick="setAlarm()">⏰ Поставить будильник</button>
|
||
<button class="btn btn-secondary" onclick="cancelAlarm()">❌ Отмена</button>
|
||
<span id="alarm-status" style="margin-left: auto; color: #00ff88; font-weight: 600;"></span>
|
||
</div>
|
||
<p style="margin-top: 15px; font-size: 14px; opacity: 0.8;">💡 Браузер покажет уведомление в заданное время (разреши уведомления при первом запуске)</p>
|
||
</div>
|
||
|
||
<!-- Музыкальный плеер -->
|
||
<div class="music-player">
|
||
<h3 style="margin-top:0; color: #00ff88;">🎵 Мотивационная музыка</h3>
|
||
<div class="player-controls">
|
||
<button class="player-btn" onclick="prevTrack()">⏮</button>
|
||
<button class="player-btn big" onclick="togglePlay()" id="play-btn">▶</button>
|
||
<button class="player-btn" onclick="nextTrack()">⏭</button>
|
||
<select class="playlist-select" id="playlist-select" onchange="changePlaylist()">
|
||
<option value="workout">💪 Для тренировки</option>
|
||
<option value="cardio">🏃 Кардио</option>
|
||
<option value="hits2000">🎤 Хиты 2000-х</option>
|
||
<option value="taylor">🎵 Taylor Swift</option>
|
||
<option value="brunomars">🎤 Bruno Mars</option>
|
||
<option value="eminem">🎤 Eminem</option>
|
||
<option value="kazakh">🇰🇿 Казахские</option>
|
||
<option value="russian">🇷🇺 Русские</option>
|
||
<option value="yoga">🧘 Релакс</option>
|
||
<option value="motivation">🔥 Мотивация</option>
|
||
<option value="my">🎵 Моя музыка</option>
|
||
</select>
|
||
</div>
|
||
<div class="now-playing" id="now-playing">Выберите плейлист и нажмите ▶</div>
|
||
</div>
|
||
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="icon">🎯</div>
|
||
<div class="value">День 1</div>
|
||
<div class="label">Тренировка</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="icon">⏱️</div>
|
||
<div class="value">45 мин</div>
|
||
<div class="label">Длительность</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="icon">🔥</div>
|
||
<div class="value">350</div>
|
||
<div class="label">Ккал сожжётся</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="icon">💪</div>
|
||
<div class="value">Осанка + Пресс</div>
|
||
<div class="label">Фокус</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="exercise-grid" id="today-exercises"></div>
|
||
|
||
<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>
|
||
<div class="exercise-grid" id="exercise-catalog"></div>
|
||
</div>
|
||
|
||
<!-- СЕКЦИЯ: КАЛЕНДАРЬ -->
|
||
<div id="calendar" class="section">
|
||
<h2>📆 Календарь на 8 недель</h2>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" id="week-progress" style="width: 12%;">Неделя 1</div>
|
||
</div>
|
||
<div class="calendar-grid" id="calendar-grid"></div>
|
||
</div>
|
||
|
||
<!-- СЕКЦИЯ: ПРОГРЕСС -->
|
||
<div id="tracker" class="section">
|
||
<h2>📊 Трекер прогресса</h2>
|
||
<div class="form-grid">
|
||
<div class="form-group"><input type="number" id="weight" placeholder="Вес (кг)" step="0.1"></div>
|
||
<div class="form-group"><input type="number" id="waist" placeholder="Талия (см)"></div>
|
||
<div class="form-group"><input type="number" id="hips" placeholder="Бёдра (см)"></div>
|
||
<div class="form-group"><input type="number" id="arms" placeholder="Руки (см)"></div>
|
||
<div class="form-group"><button class="btn btn-block" onclick="addProgress()">Записать</button></div>
|
||
</div>
|
||
<div class="stats-grid" id="progress-stats"></div>
|
||
<div id="progress-history"></div>
|
||
</div>
|
||
|
||
<!-- СЕКЦИЯ: ПИТАНИЕ -->
|
||
<div id="nutrition" class="section">
|
||
<h2>🥗 Питание</h2>
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="icon">🎯</div>
|
||
<div class="value">1530</div>
|
||
<div class="label">Ккал в день</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="icon">💧</div>
|
||
<div class="value" id="water-count">0/8</div>
|
||
<div class="label">Стаканов воды</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="icon">🥩</div>
|
||
<div class="value">98 г</div>
|
||
<div class="label">Белок</div>
|
||
</div>
|
||
</div>
|
||
<button class="btn" onclick="addWater()">💧 + Стакан воды</button>
|
||
</div>
|
||
|
||
<!-- СЕКЦИЯ: ПРИВЫЧКИ -->
|
||
<div id="habits" class="section">
|
||
<h2>✨ Полезные привычки</h2>
|
||
<div id="habits-list"></div>
|
||
<div class="stats-grid" style="margin-top: 30px;">
|
||
<div class="stat-card">
|
||
<div class="icon">🔥</div>
|
||
<div class="value" id="habits-streak">0</div>
|
||
<div class="label">Дней подряд</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="icon">✅</div>
|
||
<div class="value" id="habits-total">0</div>
|
||
<div class="label">Всего выполнено</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- СЕКЦИЯ: ИНБОДИ -->
|
||
<div id="inbody" class="section">
|
||
<h2>📐 ИнБоди — Анализ тела</h2>
|
||
<div class="form-grid">
|
||
<div class="form-group"><input type="number" id="inbody-weight" placeholder="Вес (кг)" value="65"></div>
|
||
<div class="form-group"><input type="number" id="inbody-height" placeholder="Рост (см)" value="165"></div>
|
||
<div class="form-group"><input type="number" id="inbody-age" placeholder="Возраст" value="37"></div>
|
||
<div class="form-group">
|
||
<select id="inbody-gender">
|
||
<option value="female">Женский</option>
|
||
<option value="male">Мужской</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group"><input type="number" id="inbody-waist" placeholder="Талия (см)" value="70"></div>
|
||
<div class="form-group"><input type="number" id="inbody-hips" placeholder="Бёдра (см)" value="95"></div>
|
||
<div class="form-group"><input type="number" id="inbody-neck" placeholder="Шея (см)" value="32"></div>
|
||
<div class="form-group"><button class="btn btn-block" onclick="calculateInBody()">🔍 Рассчитать</button></div>
|
||
</div>
|
||
<div class="stats-grid" id="inbody-results" style="display: none;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Модальное окно для видео -->
|
||
<div class="modal" id="video-modal">
|
||
<div class="modal-content">
|
||
<span class="modal-close" onclick="closeModal()">×</span>
|
||
<h3 id="modal-title" style="color: #00ff88;"></h3>
|
||
<div id="modal-video" style="margin: 20px 0;"></div>
|
||
<p id="modal-desc" style="color: rgba(255,255,255,0.8); line-height: 1.6;"></p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- WhatsApp кнопка -->
|
||
<a href="https://wa.me/77755084131?text=Привет!%20Хочу%20записаться%20на%20трансформацию%20тела!" class="whatsapp-float" target="_blank">
|
||
<svg viewBox="0 0 32 32" width="32" height="32" fill="white">
|
||
<path d="M16 0c-8.837 0-16 7.163-16 16 0 2.825 0.737 5.607 2.137 8.048l-2.137 7.952 7.933-2.127c2.42 1.37 5.173 2.127 8.067 2.127 8.837 0 16-7.163 16-16s-7.163-16-16-16zM16 29.467c-2.482 0-4.908-0.646-7.07-1.87l-0.507-0.292-4.713 1.262 1.262-4.669-0.292-0.508c-1.207-2.100-1.847-4.507-1.847-6.924 0-7.435 6.065-13.5 13.5-13.5s13.5 6.065 13.5 13.5-6.065 13.5-13.5 13.5z"/>
|
||
<path d="M22.756 18.297c-0.228-0.114-1.347-0.664-1.554-0.741-0.207-0.076-0.357-0.114-0.507 0.114-0.15 0.228-0.581 0.741-0.712 0.892-0.132 0.151-0.263 0.17-0.491 0.056-0.228-0.114-0.963-0.355-1.835-1.133-0.677-0.605-1.137-1.354-1.268-1.582-0.132-0.228-0.014-0.351 0.099-0.464 0.103-0.102 0.228-0.265 0.341-0.398 0.113-0.132 0.151-0.227 0.227-0.379 0.076-0.151 0.038-0.284-0.019-0.398-0.057-0.114-0.507-1.222-0.695-1.675-0.183-0.439-0.369-0.379-0.507-0.386-0.131-0.006-0.283-0.007-0.434-0.007s-0.397 0.057-0.606 0.284c-0.208 0.227-0.796 0.777-0.796 1.894s0.815 2.193 0.927 2.344c0.113 0.151 1.603 2.447 3.885 3.431 0.542 0.234 0.964 0.373 1.294 0.478 0.546 0.174 1.044 0.149 1.437 0.091 0.439-0.066 1.347-0.549 1.537-1.081 0.19-0.532 0.19-0.988 0.133-1.082-0.057-0.094-0.208-0.151-0.436-0.265z"/>
|
||
</svg>
|
||
</a>
|
||
|
||
<script>
|
||
// === ДАННЫЕ ===
|
||
const exercises = [
|
||
// Осанка и спина (4 упражнения)
|
||
{ 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 = [
|
||
// Неделя 1-2: Адаптация
|
||
{ type: "Осанка + Пресс", exercises: [1, 2, 5, 6, 7, 8] },
|
||
{ type: "Руки + Кардио", exercises: [14, 15, 16, 17, 18, 19] },
|
||
{ type: "Ноги + Ягодицы", exercises: [10, 11, 12, 13] },
|
||
{ type: "Осанка + Пресс", exercises: [1, 3, 4, 6, 9, 21] },
|
||
{ type: "Руки + Кардио", exercises: [14, 15, 16, 17, 18] },
|
||
{ type: "Полная тренировка", exercises: [2, 5, 7, 10, 12, 19] },
|
||
{ type: "Отдых / Растяжка", exercises: [] },
|
||
|
||
// Неделя 3-4: Интенсив
|
||
{ type: "Осанка + Пресс", exercises: [1, 2, 3, 6, 7, 8, 9] },
|
||
{ type: "Руки + Кардио", exercises: [14, 15, 16, 17, 18, 19, 20] },
|
||
{ type: "Ноги + Ягодицы", exercises: [10, 11, 12, 13] },
|
||
{ type: "Осанка + Пресс", exercises: [1, 4, 5, 6, 8, 21] },
|
||
{ type: "Руки + Кардио", exercises: [14, 15, 16, 17, 18, 19] },
|
||
{ type: "Полная тренировка", exercises: [2, 3, 7, 10, 12, 20] },
|
||
{ type: "Отдых / Растяжка", exercises: [] },
|
||
|
||
// Неделя 5-6: Максимум
|
||
{ type: "Осанка + Пресс", exercises: [1, 2, 3, 4, 6, 7, 8, 9] },
|
||
{ type: "Руки + Кардио", exercises: [14, 15, 16, 17, 18, 19, 20] },
|
||
{ type: "Ноги + Ягодицы", exercises: [10, 11, 12, 13] },
|
||
{ type: "Осанка + Пресс", exercises: [1, 3, 5, 6, 8, 9, 21] },
|
||
{ type: "Руки + Кардио", exercises: [14, 15, 16, 17, 18, 19, 20] },
|
||
{ type: "Полная тренировка", exercises: [2, 4, 7, 10, 11, 12, 13, 20] },
|
||
{ type: "Отдых / Растяжка", exercises: [] }
|
||
];
|
||
|
||
let progressData = JSON.parse(localStorage.getItem('fitproProgress') || '{"entries":[],"completedDays":[],"water":[],"waterToday":0,"habits":{},"alarm":null}');
|
||
let alarmTimeout = null;
|
||
|
||
// === ИНИЦИАЛИЗАЦИЯ ===
|
||
function init() {
|
||
renderTodayWorkout();
|
||
renderCatalog();
|
||
renderCalendar();
|
||
renderProgress();
|
||
renderHabits();
|
||
}
|
||
|
||
function showSection(id) {
|
||
document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
|
||
document.querySelectorAll('.nav button').forEach(b => b.classList.remove('active'));
|
||
document.getElementById(id).classList.add('active');
|
||
event.target.classList.add('active');
|
||
}
|
||
|
||
// === ТРЕНИРОВКА ДНЯ ===
|
||
function renderTodayWorkout() {
|
||
const today = workoutPlan[new Date().getDay() === 0 ? 6 : new Date().getDay() - 1];
|
||
const container = document.getElementById('today-exercises');
|
||
|
||
if (today.exercises.length === 0) {
|
||
container.innerHTML = '<div class="exercise-card" style="grid-column: 1/-1; text-align: center; padding: 40px;"><h3 style="color: #00ff88;">🧘 Сегодня день отдыха!</h3><p>Сделай лёгкую растяжку или прогулку.</p></div>';
|
||
return;
|
||
}
|
||
|
||
container.innerHTML = today.exercises.map(exId => {
|
||
const ex = exercises.find(e => e.id === exId);
|
||
return '<div class="exercise-card">' +
|
||
'<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">' +
|
||
'<h4>' + ex.name + '</h4>' +
|
||
'<p>🎯 ' + ex.focus + ' • ⏱️ ' + ex.time + '</p>' +
|
||
'<p>' + ex.desc + '</p>' +
|
||
'</div></div>';
|
||
}).join('');
|
||
}
|
||
|
||
function renderCatalog() {
|
||
document.getElementById('exercise-catalog').innerHTML = exercises.map(ex =>
|
||
'<div class="exercise-card">' +
|
||
'<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">' +
|
||
'<h4>' + ex.name + '</h4>' +
|
||
'<p>🎯 ' + ex.focus + ' • ⏱️ ' + ex.time + '</p>' +
|
||
'<p>' + ex.desc + '</p>' +
|
||
'</div></div>'
|
||
).join('');
|
||
}
|
||
|
||
function openExercise(id) {
|
||
const ex = exercises.find(e => e.id === id);
|
||
document.getElementById('modal-title').textContent = ex.name;
|
||
document.getElementById('modal-video').innerHTML =
|
||
'<div style="text-align:center;">' +
|
||
'<img src="' + ex.image + '" alt="' + ex.name + '" style="width:100%;border-radius:12px;object-fit:cover;">' +
|
||
'<br><br>' +
|
||
'<button onclick="playAudio(' + id + ')" style="background:linear-gradient(135deg,#00d9ff,#00ff88);border:none;border-radius:30px;padding:14px 32px;font-size:18px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:10px;box-shadow:0 4px 15px rgba(0,217,255,0.4);transition:0.3s;" onmouseover="this.style.transform=\'scale(1.05\')" onmouseout="this.style.transform=\'scale(1)\'">🔊 Слушать инструкцию</button>' +
|
||
'</div>';
|
||
document.getElementById('modal-desc').textContent = ex.desc;
|
||
document.getElementById('video-modal').classList.add('active');
|
||
}
|
||
|
||
function closeModal() {
|
||
document.getElementById('video-modal').classList.remove('active');
|
||
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);
|
||
|
||
document.getElementById('main-video-player').innerHTML =
|
||
'<div style="position:relative;">' +
|
||
'<img src="' + ex.image + '" alt="' + ex.name + '" style="width:100%;border-radius:12px;object-fit:cover;">' +
|
||
'<button onclick="playAudio(' + id + ')" style="position:absolute;bottom:20px;right:20px;background:linear-gradient(135deg,#00d9ff,#00ff88);border:none;border-radius:30px;padding:12px 24px;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:8px;box-shadow:0 4px 15px rgba(0,217,255,0.4);transition:0.3s;" onmouseover="this.style.transform=\'scale(1.05\')" onmouseout="this.style.transform=\'scale(1)\'">🔊 Слушать</button>' +
|
||
'</div>';
|
||
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;
|
||
|
||
document.querySelectorAll('.exercise-item').forEach(item => item.classList.remove('active'));
|
||
event.currentTarget.classList.add('active');
|
||
}
|
||
|
||
function playAudio(id) {
|
||
const ex = exercises.find(e => e.id === id);
|
||
const text = ex.name + '. ' + ex.desc + '. Повторы: ' + ex.reps + '. Время: ' + ex.time;
|
||
|
||
if ('speechSynthesis' in window) {
|
||
window.speechSynthesis.cancel();
|
||
const utterance = new SpeechSynthesisUtterance(text);
|
||
utterance.lang = 'ru-RU';
|
||
utterance.rate = 0.9;
|
||
utterance.pitch = 1;
|
||
window.speechSynthesis.speak(utterance);
|
||
} else {
|
||
alert('Ваш браузер не поддерживает синтез речи');
|
||
}
|
||
}
|
||
|
||
function markTodayDone() {
|
||
const todayStr = new Date().toDateString();
|
||
if (!progressData.completedDays.includes(todayStr)) {
|
||
progressData.completedDays.push(todayStr);
|
||
localStorage.setItem('fitproProgress', JSON.stringify(progressData));
|
||
alert('🎉 Молодец! Тренировка отмечена!');
|
||
renderCalendar();
|
||
}
|
||
}
|
||
|
||
// === КАЛЕНДАРЬ ===
|
||
function renderCalendar() {
|
||
const grid = document.getElementById('calendar-grid');
|
||
const today = new Date();
|
||
|
||
grid.innerHTML = workoutPlan.map((day, i) => {
|
||
const dayNum = i + 1;
|
||
const isToday = (today.getDay() === 0 ? 6 : today.getDay() - 1) === i;
|
||
const isDone = progressData.completedDays.some(d => new Date(d).getDay() === i + 1);
|
||
|
||
return '<div class="calendar-day' + (isToday ? ' today' : '') + (isDone ? ' done' : '') + '">' +
|
||
'<div class="day-num">' + dayNum + '</div>' +
|
||
'<div class="workout-type">' + day.type + '</div>' +
|
||
(isDone ? '<div style="margin-top:5px; font-size:20px;">✅</div>' : '') +
|
||
'</div>';
|
||
}).join('');
|
||
}
|
||
|
||
// === ПРОГРЕСС ===
|
||
function addProgress() {
|
||
const weight = document.getElementById('weight').value;
|
||
if (!weight) return alert('Введи вес!');
|
||
|
||
progressData.entries.push({
|
||
date: new Date().toISOString(),
|
||
weight,
|
||
waist: document.getElementById('waist').value,
|
||
hips: document.getElementById('hips').value,
|
||
arms: document.getElementById('arms').value
|
||
});
|
||
localStorage.setItem('fitproProgress', JSON.stringify(progressData));
|
||
renderProgress();
|
||
alert('✅ Прогресс записан!');
|
||
}
|
||
|
||
function renderProgress() {
|
||
const entries = progressData.entries;
|
||
const currentWeight = entries[entries.length - 1]?.weight || 65;
|
||
const startWeight = entries[0]?.weight || 65;
|
||
const lost = (startWeight - currentWeight).toFixed(1);
|
||
|
||
document.getElementById('progress-stats').innerHTML =
|
||
'<div class="stat-card"><div class="icon">⚖️</div><div class="value">' + currentWeight + '</div><div class="label">Текущий вес</div></div>' +
|
||
'<div class="stat-card"><div class="icon">📉</div><div class="value">' + lost + '</div><div class="label">Сброшено (кг)</div></div>' +
|
||
'<div class="stat-card"><div class="icon">✅</div><div class="value">' + progressData.completedDays.length + '</div><div class="label">Тренировок</div></div>';
|
||
}
|
||
|
||
// === ПРИВЫЧКИ ===
|
||
const habitsList = [
|
||
{ id: 'water', icon: '💧', name: '8 стаканов воды' },
|
||
{ id: 'workout', icon: '💪', name: 'Тренировка' },
|
||
{ id: 'breakfast', icon: '🍳', name: 'Здоровый завтрак' },
|
||
{ id: 'no_sugar', icon: '🚫', name: 'Без сахара' },
|
||
{ id: 'sleep', icon: '😴', name: 'Сон 7-8 часов' },
|
||
{ id: 'walk', icon: '🚶', name: 'Прогулка 30 мин' }
|
||
];
|
||
|
||
function renderHabits() {
|
||
const todayStr = new Date().toDateString();
|
||
if (!progressData.habits[todayStr]) progressData.habits[todayStr] = {};
|
||
|
||
document.getElementById('habits-list').innerHTML = habitsList.map(h => {
|
||
const done = progressData.habits[todayStr][h.id];
|
||
return '<div class="habit-item' + (done ? ' done' : '') + '" onclick="toggleHabit(\'' + h.id + '\')">' +
|
||
'<input type="checkbox" ' + (done ? 'checked' : '') + '>' +
|
||
'<span class="icon">' + h.icon + '</span>' +
|
||
'<span class="name">' + h.name + '</span>' +
|
||
(done ? '<span style="color:#00ff88;">✓</span>' : '') +
|
||
'</div>';
|
||
}).join('');
|
||
|
||
const doneCount = Object.values(progressData.habits[todayStr]).filter(v => v).length;
|
||
document.getElementById('habits-streak').textContent = progressData.completedDays.length;
|
||
document.getElementById('habits-total').textContent = doneCount;
|
||
}
|
||
|
||
function toggleHabit(id) {
|
||
const todayStr = new Date().toDateString();
|
||
if (!progressData.habits[todayStr]) progressData.habits[todayStr] = {};
|
||
progressData.habits[todayStr][id] = !progressData.habits[todayStr][id];
|
||
localStorage.setItem('fitproProgress', JSON.stringify(progressData));
|
||
renderHabits();
|
||
}
|
||
|
||
// === ВОДА ===
|
||
function addWater() {
|
||
progressData.waterToday = (progressData.waterToday || 0) + 1;
|
||
document.getElementById('water-count').textContent = progressData.waterToday + '/8';
|
||
localStorage.setItem('fitproProgress', JSON.stringify(progressData));
|
||
}
|
||
|
||
// === ИНБОДИ ===
|
||
function calculateInBody() {
|
||
const weight = parseFloat(document.getElementById('inbody-weight').value);
|
||
const height = parseFloat(document.getElementById('inbody-height').value) / 100;
|
||
const age = parseInt(document.getElementById('inbody-age').value);
|
||
const waist = parseFloat(document.getElementById('inbody-waist').value);
|
||
const hips = parseFloat(document.getElementById('inbody-hips').value);
|
||
|
||
const bmi = (weight / (height * height)).toFixed(1);
|
||
const bodyFat = (495 / (1.29579 - 0.35004 * Math.log10(waist + hips - 32) + 0.22100 * Math.log10(height * 100)) - 450).toFixed(1);
|
||
const bmr = Math.round(10 * weight + 6.25 * (height * 100) - 5 * age - 161);
|
||
const tdee = Math.round(bmr * 1.4);
|
||
const target = Math.round(tdee * 0.75);
|
||
|
||
document.getElementById('inbody-results').style.display = 'grid';
|
||
document.getElementById('inbody-results').innerHTML =
|
||
'<div class="stat-card"><div class="icon">⚖️</div><div class="value">' + bmi + '</div><div class="label">ИМТ</div></div>' +
|
||
'<div class="stat-card"><div class="icon">🥩</div><div class="value">' + bodyFat + '%</div><div class="label">% Жира</div></div>' +
|
||
'<div class="stat-card"><div class="icon">🔥</div><div class="value">' + bmr + '</div><div class="label">Калории (покой)</div></div>' +
|
||
'<div class="stat-card"><div class="icon">📊</div><div class="value">' + tdee + '</div><div class="label">Калории (день)</div></div>' +
|
||
'<div class="stat-card"><div class="icon">🎯</div><div class="value">' + target + '</div><div class="label">Для похудения</div></div>';
|
||
}
|
||
|
||
init();
|
||
|
||
// === БУДИЛЬНИК ===
|
||
function setAlarm() {
|
||
const time = document.getElementById('alarm-time').value;
|
||
if (!time) return alert('Выбери время!');
|
||
|
||
progressData.alarm = time;
|
||
localStorage.setItem('fitproProgress', JSON.stringify(progressData));
|
||
|
||
// Запрос разрешений на уведомления
|
||
if ('Notification' in window && Notification.permission === 'default') {
|
||
Notification.requestPermission();
|
||
}
|
||
|
||
checkAlarm();
|
||
alert('⏰ Будильник установлен на ' + time + '!');
|
||
}
|
||
|
||
function cancelAlarm() {
|
||
progressData.alarm = null;
|
||
localStorage.setItem('fitproProgress', JSON.stringify(progressData));
|
||
if (alarmTimeout) clearTimeout(alarmTimeout);
|
||
document.getElementById('alarm-status').textContent = '';
|
||
alert('Будильник отменён');
|
||
}
|
||
|
||
function checkAlarm() {
|
||
if (!progressData.alarm) return;
|
||
|
||
const now = new Date();
|
||
const alarmTime = progressData.alarm;
|
||
const [hours, minutes] = alarmTime.split(':').map(Number);
|
||
|
||
const alarmDate = new Date();
|
||
alarmDate.setHours(hours, minutes, 0, 0);
|
||
|
||
// Если время уже прошло сегодня, ставим на завтра
|
||
if (alarmDate <= now) {
|
||
alarmDate.setDate(alarmDate.getDate() + 1);
|
||
}
|
||
|
||
const msUntilAlarm = alarmDate - now;
|
||
|
||
document.getElementById('alarm-status').textContent = '⏰ Будильник на ' + alarmTime + ' (через ' + Math.round(msUntilAlarm / 60000) + ' мин)';
|
||
|
||
if (alarmTimeout) clearTimeout(alarmTimeout);
|
||
|
||
alarmTimeout = setTimeout(() => {
|
||
triggerAlarm();
|
||
// Переставить на завтра
|
||
setTimeout(checkAlarm, 1000);
|
||
}, msUntilAlarm);
|
||
}
|
||
|
||
function triggerAlarm() {
|
||
// Звук
|
||
const audio = new Audio('https://actions.google.com/sounds/v1/alarms/beep_short.ogg');
|
||
audio.play();
|
||
|
||
// Уведомление
|
||
if ('Notification' in window && Notification.permission === 'granted') {
|
||
new Notification('💪 Пора на тренировку!', {
|
||
body: 'Твоя тренировка началась! Вперёд к цели! 🔥',
|
||
icon: 'https://cdn-icons-png.flaticon.com/512/2964/2964536.png'
|
||
});
|
||
} else {
|
||
alert('💪 ПОРА НА ТРЕНИРОВКУ! 🔥');
|
||
}
|
||
|
||
// Воспроизвести звук ещё раз через 5 минут
|
||
setTimeout(() => {
|
||
audio.play();
|
||
}, 300000);
|
||
}
|
||
|
||
// Проверка будильника при загрузке
|
||
if (progressData.alarm) {
|
||
document.getElementById('alarm-time').value = progressData.alarm;
|
||
checkAlarm();
|
||
}
|
||
|
||
// Проверка каждую минуту
|
||
setInterval(checkAlarm, 60000);
|
||
|
||
// Инициализация тренировки с видео при загрузке
|
||
renderWorkoutList();
|
||
</script>
|
||
</body>
|
||
</html>
|