Professional Premium Dark design - FitPro Platform
This commit is contained in:
parent
7859dfed10
commit
eebb65e636
399
design_variants.html
Normal file
399
design_variants.html
Normal file
@ -0,0 +1,399 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Варианты дизайна — FitPro Platform</title>
|
||||
<style>
|
||||
* { margin: 0; box-sizing: border-box; }
|
||||
body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }
|
||||
.variant { padding: 40px 20px; border-bottom: 2px solid #e0e0e5; }
|
||||
.variant h2 { margin-bottom: 20px; }
|
||||
|
||||
/* VARIANT 1: Premium Dark */
|
||||
.premium-dark {
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||
min-height: 100vh;
|
||||
color: white;
|
||||
}
|
||||
.premium-dark .container { max-width: 1200px; margin: 0 auto; }
|
||||
.premium-dark header {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
background: url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=1920') center/cover;
|
||||
position: relative;
|
||||
}
|
||||
.premium-dark header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0,0,0,0.7);
|
||||
}
|
||||
.premium-dark header h1 {
|
||||
position: relative;
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
background: linear-gradient(90deg, #00d9ff, #00ff88);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.premium-dark .nav {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 30px 20px;
|
||||
}
|
||||
.premium-dark .nav button {
|
||||
padding: 15px 30px;
|
||||
border: 2px solid rgba(0,217,255,0.3);
|
||||
background: rgba(0,217,255,0.1);
|
||||
color: #00d9ff;
|
||||
border-radius: 30px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.premium-dark .nav button:hover,
|
||||
.premium-dark .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);
|
||||
}
|
||||
.premium-dark .card {
|
||||
background: rgba(255,255,255,0.05);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 20px;
|
||||
padding: 30px;
|
||||
margin: 20px;
|
||||
}
|
||||
.premium-dark .card h3 {
|
||||
color: #00ff88;
|
||||
margin-bottom: 15px;
|
||||
font-size: 24px;
|
||||
}
|
||||
.premium-dark .stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.premium-dark .stat-card {
|
||||
background: linear-gradient(135deg, rgba(0,217,255,0.2), rgba(0,255,136,0.2));
|
||||
border-radius: 15px;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
border: 1px solid rgba(0,217,255,0.3);
|
||||
}
|
||||
.premium-dark .stat-card .value {
|
||||
font-size: 42px;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(90deg, #00d9ff, #00ff88);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
/* VARIANT 2: Clean White */
|
||||
.clean-white {
|
||||
background: #f8f9fa;
|
||||
min-height: 100vh;
|
||||
color: #333;
|
||||
}
|
||||
.clean-white .container { max-width: 1200px; margin: 0 auto; }
|
||||
.clean-white header {
|
||||
background: white;
|
||||
padding: 40px 20px;
|
||||
box-shadow: 0 2px 20px rgba(0,0,0,0.08);
|
||||
text-align: center;
|
||||
}
|
||||
.clean-white header h1 {
|
||||
font-size: 42px;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.clean-white header p {
|
||||
color: #7f8c8d;
|
||||
font-size: 18px;
|
||||
}
|
||||
.clean-white .nav {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 30px 20px;
|
||||
}
|
||||
.clean-white .nav button {
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
background: white;
|
||||
color: #7f8c8d;
|
||||
border-radius: 12px;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||||
}
|
||||
.clean-white .nav button:hover,
|
||||
.clean-white .nav button.active {
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 20px rgba(102,126,234,0.4);
|
||||
}
|
||||
.clean-white .card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 30px;
|
||||
margin: 20px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
}
|
||||
.clean-white .card h3 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.clean-white .exercise-card {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
border: 1px solid #e0e0e5;
|
||||
border-radius: 12px;
|
||||
margin: 15px 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.clean-white .exercise-card:hover {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 4px 15px rgba(102,126,234,0.15);
|
||||
}
|
||||
.clean-white .exercise-card img {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* VARIANT 3: Energy Orange */
|
||||
.energy-orange {
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
|
||||
min-height: 100vh;
|
||||
color: white;
|
||||
}
|
||||
.energy-orange .container { max-width: 1200px; margin: 0 auto; }
|
||||
.energy-orange header {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
}
|
||||
.energy-orange header h1 {
|
||||
font-size: 48px;
|
||||
font-weight: 800;
|
||||
text-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.energy-orange .nav {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 30px 20px;
|
||||
}
|
||||
.energy-orange .nav button {
|
||||
padding: 15px 30px;
|
||||
border: none;
|
||||
background: rgba(255,255,255,0.2);
|
||||
color: white;
|
||||
border-radius: 25px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.energy-orange .nav button:hover,
|
||||
.energy-orange .nav button.active {
|
||||
background: white;
|
||||
color: #ff6b6b;
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 10px 30px rgba(255,255,255,0.3);
|
||||
}
|
||||
.energy-orange .card {
|
||||
background: rgba(255,255,255,0.15);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 20px;
|
||||
padding: 30px;
|
||||
margin: 20px;
|
||||
border: 2px solid rgba(255,255,255,0.3);
|
||||
}
|
||||
.energy-orange .workout-item {
|
||||
background: white;
|
||||
color: #333;
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
margin: 15px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
.energy-orange .workout-item .icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, #ff6b6b, #feca57);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
}
|
||||
.energy-orange .progress-bar {
|
||||
background: rgba(255,255,255,0.3);
|
||||
border-radius: 10px;
|
||||
height: 20px;
|
||||
margin: 20px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.energy-orange .progress-fill {
|
||||
background: linear-gradient(90deg, #fff, #feca57);
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
transition: width 0.5s;
|
||||
}
|
||||
|
||||
.label {
|
||||
background: #333;
|
||||
color: white;
|
||||
padding: 5px 15px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- VARIANT 1 -->
|
||||
<div class="variant premium-dark">
|
||||
<div class="container">
|
||||
<span class="label">ВАРИАНТ 1: Premium Dark</span>
|
||||
<header>
|
||||
<h1>💪 FitPro Platform</h1>
|
||||
<p>Профессиональная система тренировок</p>
|
||||
</header>
|
||||
<nav class="nav">
|
||||
<button class="active">📅 Сегодня</button>
|
||||
<button>🎬 Упражнения</button>
|
||||
<button>📆 Календарь</button>
|
||||
<button>📊 Прогресс</button>
|
||||
<button>🥗 Питание</button>
|
||||
</nav>
|
||||
<div class="card">
|
||||
<h3>🔥 Тренировка дня</h3>
|
||||
<p>Сегодня: Осанка + Пресс + Кардио</p>
|
||||
<div class="stat-grid">
|
||||
<div class="stat-card">
|
||||
<div class="value">12</div>
|
||||
<div>Тренировок</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="value">63.5</div>
|
||||
<div>Вес (кг)</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="value">-1.5</div>
|
||||
<div>Сброшено</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- VARIANT 2 -->
|
||||
<div class="variant clean-white">
|
||||
<div class="container">
|
||||
<span class="label" style="background: #667eea;">ВАРИАНТ 2: Clean White</span>
|
||||
<header>
|
||||
<h1>FitPro Platform</h1>
|
||||
<p>Твоя персональная программа трансформации</p>
|
||||
</header>
|
||||
<nav class="nav">
|
||||
<button class="active">📅 Сегодня</button>
|
||||
<button>🎬 Упражнения</button>
|
||||
<button>📆 Календарь</button>
|
||||
<button>📊 Прогресс</button>
|
||||
<button>🥗 Питание</button>
|
||||
</nav>
|
||||
<div class="card">
|
||||
<h3>📋 Программа на сегодня</h3>
|
||||
<div class="exercise-card">
|
||||
<img src="https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=400" alt="Workout">
|
||||
<div>
|
||||
<h4>Кошка-корова</h4>
|
||||
<p>Гибкость спины, гиперлордоз</p>
|
||||
<p style="color: #7f8c8d; font-size: 14px;">⏱ 2 мин • 10-12 повторений</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exercise-card">
|
||||
<img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400" alt="Workout">
|
||||
<div>
|
||||
<h4>Планка</h4>
|
||||
<p>Пресс, кор, осанка</p>
|
||||
<p style="color: #7f8c8d; font-size: 14px;">⏱ 60 сек • 3 подхода</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- VARIANT 3 -->
|
||||
<div class="variant energy-orange">
|
||||
<div class="container">
|
||||
<span class="label" style="background: #ff6b6b;">ВАРИАНТ 3: Energy Orange</span>
|
||||
<header>
|
||||
<h1>🔥 FitPro</h1>
|
||||
<p>Зарядись энергией тренировки!</p>
|
||||
</header>
|
||||
<nav class="nav">
|
||||
<button class="active">📅 Сегодня</button>
|
||||
<button>🎬 Упражнения</button>
|
||||
<button>📆 Календарь</button>
|
||||
<button>📊 Прогресс</button>
|
||||
<button>🥗 Питание</button>
|
||||
</nav>
|
||||
<div class="card">
|
||||
<h3>⚡ Твой прогресс</h3>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="width: 35%;"></div>
|
||||
</div>
|
||||
<p>35% пути к цели (8 недель)</p>
|
||||
<div class="workout-item">
|
||||
<div class="icon">🏃</div>
|
||||
<div>
|
||||
<h4>Кардио тренировка</h4>
|
||||
<p>Сжигание жира • 45 минут</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="workout-item">
|
||||
<div class="icon">🧘</div>
|
||||
<div>
|
||||
<h4>Растяжка</h4>
|
||||
<p>Гибкость • 15 минут</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Интерактивность для демо
|
||||
document.querySelectorAll('.nav button').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
this.parentElement.querySelectorAll('button').forEach(b => b.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
413
inbody_demo.html
Normal file
413
inbody_demo.html
Normal file
@ -0,0 +1,413 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>ИнБоди Калькулятор — Демо</title>
|
||||
<style>
|
||||
* { margin: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
.container { max-width: 1000px; margin: 0 auto; }
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 36px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
color: rgba(255,255,255,0.9);
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 15px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.form-group label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.form-group input, .form-group select {
|
||||
padding: 15px;
|
||||
border: 2px solid #e0e0e5;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.form-group input:focus, .form-group select:focus {
|
||||
border-color: #667eea;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 4px rgba(102,126,234,0.1);
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 18px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 30px rgba(102,126,234,0.4);
|
||||
}
|
||||
|
||||
.results-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.result-card {
|
||||
background: linear-gradient(135deg, #f8f9fc 0%, #e9ecef 100%);
|
||||
border-radius: 15px;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.result-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
}
|
||||
.result-card .icon {
|
||||
font-size: 42px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.result-card .value {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #667eea;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.result-card .label {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.result-card .norma {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.result-card.good .value { color: #00c853; }
|
||||
.result-card.warning .value { color: #ff9800; }
|
||||
.result-card.bad .value { color: #f44336; }
|
||||
|
||||
.body-type-section {
|
||||
background: #f8f9fc;
|
||||
border-radius: 15px;
|
||||
padding: 25px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.body-type-section h3 {
|
||||
color: #667eea;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.body-type-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 15px;
|
||||
}
|
||||
.body-type-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
border-left: 4px solid #667eea;
|
||||
}
|
||||
.body-type-card h4 {
|
||||
margin: 0 0 10px;
|
||||
color: #333;
|
||||
}
|
||||
.body-type-card p {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin: 5px 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.body-type-card .my-type {
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
color: white;
|
||||
padding: 5px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.recommendations {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-radius: 15px;
|
||||
padding: 25px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.recommendations h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.recommendations ul {
|
||||
padding-left: 20px;
|
||||
line-height: 2;
|
||||
}
|
||||
.recommendations li {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.hidden { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>📐 ИнБоди Калькулятор</h1>
|
||||
<p class="subtitle">Профессиональный анализ состава тела</p>
|
||||
|
||||
<div class="card">
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label>⚖️ Вес (кг)</label>
|
||||
<input type="number" id="weight" value="65" step="0.1">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>📏 Рост (см)</label>
|
||||
<input type="number" id="height" value="165">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>🎂 Возраст (лет)</label>
|
||||
<input type="number" id="age" value="37">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>👤 Пол</label>
|
||||
<select id="gender">
|
||||
<option value="female">Женский</option>
|
||||
<option value="male">Мужской</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>🍐 Талия (см)</label>
|
||||
<input type="number" id="waist" value="70">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>📊 Бёдра (см)</label>
|
||||
<input type="number" id="hips" value="95">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>🦒 Шея (см)</label>
|
||||
<input type="number" id="neck" value="32">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn" onclick="calculate()">🔍 Рассчитать состав тела</button>
|
||||
|
||||
<!-- Результаты -->
|
||||
<div id="results" class="results-grid hidden">
|
||||
<div class="result-card" id="card-bmi">
|
||||
<div class="icon">⚖️</div>
|
||||
<div class="value" id="bmi">24.5</div>
|
||||
<div class="label">ИМТ</div>
|
||||
<div class="norma" id="bmi-text">Норма</div>
|
||||
</div>
|
||||
<div class="result-card" id="card-bodyfat">
|
||||
<div class="icon">🥩</div>
|
||||
<div class="value" id="bodyfat">28%</div>
|
||||
<div class="label">% Жира</div>
|
||||
<div class="norma" id="bodyfat-text">Норма</div>
|
||||
</div>
|
||||
<div class="result-card">
|
||||
<div class="icon">💪</div>
|
||||
<div class="value" id="muscle">42 кг</div>
|
||||
<div class="label">Мышцы</div>
|
||||
<div class="norma">Средний уровень</div>
|
||||
</div>
|
||||
<div class="result-card">
|
||||
<div class="icon">🔥</div>
|
||||
<div class="value" id="bmr">1450</div>
|
||||
<div class="label">Калории (покой)</div>
|
||||
<div class="norma">Без движения</div>
|
||||
</div>
|
||||
<div class="result-card">
|
||||
<div class="icon">📊</div>
|
||||
<div class="value" id="tdee">2030</div>
|
||||
<div class="label">Калории (день)</div>
|
||||
<div class="norma">Поддержание</div>
|
||||
</div>
|
||||
<div class="result-card">
|
||||
<div class="icon">🎯</div>
|
||||
<div class="value" id="target">1530</div>
|
||||
<div class="label">Для похудения</div>
|
||||
<div class="norma">Дефицит 20%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Тип телосложения -->
|
||||
<div id="body-type" class="body-type-section hidden">
|
||||
<h3>🍐 Твой тип телосложения</h3>
|
||||
<div class="body-type-grid">
|
||||
<div class="body-type-card">
|
||||
<h4>🍎 Яблоко</h4>
|
||||
<p>Жир откладывается на животе</p>
|
||||
<p>Талия > Бёдер</p>
|
||||
<p>Риск: диабет, сердце</p>
|
||||
</div>
|
||||
<div class="body-type-card">
|
||||
<h4>🍐 Груша</h4>
|
||||
<p>Жир на бёдрах и ягодицах</p>
|
||||
<p>Бёдра > Талии</p>
|
||||
<p>Более здоровый тип</p>
|
||||
</div>
|
||||
<div class="body-type-card" style="border-left-color: #00c853;">
|
||||
<h4>⏳ Песочные часы</h4>
|
||||
<p>Пропорциональное тело</p>
|
||||
<p>Талия < Бёдер на 25 см</p>
|
||||
<p>Идеальный баланс</p>
|
||||
<span class="my-type">✨ Твой тип!</span>
|
||||
</div>
|
||||
<div class="body-type-card">
|
||||
<h4>📏 Прямоугольник</h4>
|
||||
<p>Равномерное распределение</p>
|
||||
<p>Талия ≈ Бёдра</p>
|
||||
<p>Спортивное телосложение</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Рекомендации -->
|
||||
<div id="recommendations" class="recommendations hidden">
|
||||
<h3>📋 Персональные рекомендации</h3>
|
||||
<ul>
|
||||
<li><strong>Калории:</strong> 1530 ккал/день для потери 0.5 кг/неделю</li>
|
||||
<li><strong>Белок:</strong> 98 г в день (1.5 г на кг веса)</li>
|
||||
<li><strong>Вода:</strong> 2.2 литра в день</li>
|
||||
<li><strong>Тренировки:</strong> 4-5 раз в неделю (силовые + кардио)</li>
|
||||
<li><strong>Сон:</strong> 7-8 часов для восстановления</li>
|
||||
<li><strong>Цель:</strong> 58 кг за 8 недель (реалистично!)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function calculate() {
|
||||
const weight = parseFloat(document.getElementById('weight').value);
|
||||
const height = parseFloat(document.getElementById('height').value) / 100;
|
||||
const age = parseInt(document.getElementById('age').value);
|
||||
const gender = document.getElementById('gender').value;
|
||||
const waist = parseFloat(document.getElementById('waist').value);
|
||||
const hips = parseFloat(document.getElementById('hips').value);
|
||||
const neck = parseFloat(document.getElementById('neck').value);
|
||||
|
||||
// ИМТ
|
||||
const bmi = (weight / (height * height)).toFixed(1);
|
||||
document.getElementById('bmi').textContent = bmi;
|
||||
|
||||
let bmiText = '';
|
||||
let bmiClass = '';
|
||||
if (bmi < 18.5) { bmiText = 'Недостаток'; bmiClass = 'warning'; }
|
||||
else if (bmi < 25) { bmiText = 'Норма'; bmiClass = 'good'; }
|
||||
else if (bmi < 30) { bmiText = 'Избыток'; bmiClass = 'warning'; }
|
||||
else { bmiText = 'Ожирение'; bmiClass = 'bad'; }
|
||||
|
||||
document.getElementById('bmi-text').textContent = bmiText;
|
||||
document.getElementById('card-bmi').className = 'result-card ' + bmiClass;
|
||||
|
||||
// % жира (формула ВМС США)
|
||||
let bodyFat;
|
||||
if (gender === 'female') {
|
||||
bodyFat = 495 / (1.29579 - 0.35004 * Math.log10(waist + hips - neck) + 0.22100 * Math.log10(height * 100)) - 450;
|
||||
} else {
|
||||
bodyFat = 495 / (1.0324 - 0.19077 * Math.log10(waist - neck) + 0.15456 * Math.log10(height * 100)) - 450;
|
||||
}
|
||||
bodyFat = bodyFat.toFixed(1);
|
||||
document.getElementById('bodyfat').textContent = bodyFat + '%';
|
||||
|
||||
let bfText = '';
|
||||
let bfClass = '';
|
||||
const bfNormMin = gender === 'female' ? 21 : 8;
|
||||
const bfNormMax = gender === 'female' ? 33 : 19;
|
||||
if (bodyFat < bfNormMin) { bfText = 'Низкий'; bfClass = 'warning'; }
|
||||
else if (bodyFat <= bfNormMax) { bfText = 'Норма'; bfClass = 'good'; }
|
||||
else { bfText = 'Высокий'; bfClass = 'bad'; }
|
||||
|
||||
document.getElementById('bodyfat-text').textContent = bfText;
|
||||
document.getElementById('card-bodyfat').className = 'result-card ' + bfClass;
|
||||
|
||||
// Мышечная масса
|
||||
const muscle = (weight * (100 - bodyFat) / 100).toFixed(1);
|
||||
document.getElementById('muscle').textContent = muscle + ' кг';
|
||||
|
||||
// BMR (Миффлин-Сан Жеор)
|
||||
let bmr;
|
||||
if (gender === 'female') {
|
||||
bmr = 10 * weight + 6.25 * (height * 100) - 5 * age - 161;
|
||||
} else {
|
||||
bmr = 10 * weight + 6.25 * (height * 100) - 5 * age + 5;
|
||||
}
|
||||
bmr = Math.round(bmr);
|
||||
document.getElementById('bmr').textContent = bmr;
|
||||
|
||||
// TDEE (средняя активность)
|
||||
const tdee = Math.round(bmr * 1.4);
|
||||
document.getElementById('tdee').textContent = tdee;
|
||||
|
||||
// Цель для похудения
|
||||
const target = Math.round(tdee * 0.75);
|
||||
document.getElementById('target').textContent = target;
|
||||
|
||||
// Показываем результаты
|
||||
document.getElementById('results').classList.remove('hidden');
|
||||
document.getElementById('body-type').classList.remove('hidden');
|
||||
document.getElementById('recommendations').classList.remove('hidden');
|
||||
|
||||
// Определяем тип телосложения
|
||||
const whr = waist / hips;
|
||||
let bodyType = '';
|
||||
if (whr > 0.85) {
|
||||
bodyType = 'apple'; // Яблоко
|
||||
} else if (whr < 0.75) {
|
||||
bodyType = 'pear'; // Груша
|
||||
} else {
|
||||
bodyType = 'hourglass'; // Песочные часы
|
||||
}
|
||||
|
||||
// Подсветка типа
|
||||
document.querySelectorAll('.body-type-card .my-type').forEach(el => el.remove());
|
||||
const types = { apple: 0, pear: 1, hourglass: 2, rectangle: 3 };
|
||||
const cards = document.querySelectorAll('.body-type-card');
|
||||
const myType = document.createElement('span');
|
||||
myType.className = 'my-type';
|
||||
myType.textContent = '✨ Твой тип!';
|
||||
|
||||
if (bodyType === 'apple') cards[0].appendChild(myType);
|
||||
else if (bodyType === 'pear') cards[1].appendChild(myType);
|
||||
else if (bodyType === 'hourglass') cards[2].appendChild(myType);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1866
index.html
1866
index.html
File diff suppressed because it is too large
Load Diff
784
pro_version.html
Normal file
784
pro_version.html
Normal file
@ -0,0 +1,784 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>FitPro Platform — Профессиональная версия</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 .video {
|
||||
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;
|
||||
cursor: pointer;
|
||||
}
|
||||
.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; }
|
||||
|
||||
/* 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; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>💪 FitPro Platform</h1>
|
||||
<p>Профессиональная система трансформации тела</p>
|
||||
</header>
|
||||
|
||||
<nav class="nav">
|
||||
<button class="active" 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 active">
|
||||
<h2>🔥 Тренировка на сегодня</h2>
|
||||
|
||||
<!-- Музыкальный плеер -->
|
||||
<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="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>
|
||||
|
||||
<script>
|
||||
// === ДАННЫЕ ===
|
||||
const exercises = [
|
||||
{ id: 1, name: "Кошка-корова", category: "posture", focus: "Гиперлордоз", time: "2 мин", video: "https://www.youtube.com/embed/2qhJb8SvHjM", desc: "Медленно прогибай спину вверх, затем вниз" },
|
||||
{ id: 2, name: "Стена у стены", category: "posture", focus: "Осанка", time: "1 мин", video: "https://www.youtube.com/embed/k_FZCvsL53w", desc: "Встань спиной к стене, прижми затылок и лопатки" },
|
||||
{ id: 3, name: "Планка", category: "abs", focus: "Пресс, кор", time: "60 сек", video: "https://www.youtube.com/embed/pSHjTRCQxIw", desc: "Держи тело ровно, не прогибай поясницу" },
|
||||
{ id: 4, name: "Велосипед", category: "abs", focus: "Косые мышцы", time: "2 мин", video: "https://www.youtube.com/embed/1obhK7pOwEw", desc: "Локтем касайся противоположного колена" },
|
||||
{ id: 5, name: "Приседания", category: "legs", focus: "Ноги, ягодицы", time: "3 мин", video: "https://www.youtube.com/embed/U0t2KK8vLzU", desc: "Спина ровная, колени не выходят за носки" },
|
||||
{ id: 6, name: "Отжимания", category: "arms", focus: "Руки, грудь", time: "2 мин", video: "https://www.youtube.com/embed/IODxDxX7oi4", desc: "От стены или от пола" }
|
||||
];
|
||||
|
||||
const workoutPlan = [
|
||||
{ type: "Осанка + Пресс", exercises: [1, 2, 3, 4] },
|
||||
{ type: "Руки + Кардио", exercises: [6, 5] },
|
||||
{ type: "Ноги + Ягодицы", exercises: [5, 3, 4] },
|
||||
{ type: "Полная тренировка", exercises: [1, 2, 3, 4, 5, 6] },
|
||||
{ type: "Осанка + Пресс", exercises: [1, 2, 3, 4] },
|
||||
{ type: "Руки + Кардио", exercises: [6, 5] },
|
||||
{ type: "Отдых", exercises: [] }
|
||||
];
|
||||
|
||||
let progressData = JSON.parse(localStorage.getItem('fitproProgress') || '{"entries":[],"completedDays":[],"water":[],"waterToday":0,"habits":{}}');
|
||||
|
||||
// === ИНИЦИАЛИЗАЦИЯ ===
|
||||
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="video" onclick="openVideo(' + ex.id + ')">▶</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="video" onclick="openVideo(' + ex.id + ')">▶</div>' +
|
||||
'<div class="info">' +
|
||||
'<h4>' + ex.name + '</h4>' +
|
||||
'<p>🎯 ' + ex.focus + ' • ⏱️ ' + ex.time + '</p>' +
|
||||
'<p>' + ex.desc + '</p>' +
|
||||
'</div></div>'
|
||||
).join('');
|
||||
}
|
||||
|
||||
function openVideo(id) {
|
||||
const ex = exercises.find(e => e.id === id);
|
||||
document.getElementById('modal-title').textContent = ex.name;
|
||||
document.getElementById('modal-video').innerHTML = '<iframe width="100%" height="400" src="' + ex.video + '" frameborder="0" allowfullscreen style="border-radius:12px;"></iframe>';
|
||||
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 = '';
|
||||
}
|
||||
|
||||
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();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user