500 lines
18 KiB
HTML
500 lines
18 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>План похудения на 3 месяца</title>
|
||
<style>
|
||
:root {
|
||
--primary: #10b981;
|
||
--primary-dark: #059669;
|
||
--bg: #f0fdf4;
|
||
--card: #ffffff;
|
||
--text: #1f2937;
|
||
--text-light: #6b7280;
|
||
--border: #e5e7eb;
|
||
}
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
line-height: 1.6;
|
||
}
|
||
.container { max-width: 900px; margin: 0 auto; padding: 20px; }
|
||
header {
|
||
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
|
||
color: white;
|
||
padding: 40px 20px;
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
border-radius: 12px;
|
||
}
|
||
header h1 { font-size: 2.2rem; margin-bottom: 10px; }
|
||
header p { font-size: 1.1rem; opacity: 0.95; }
|
||
.stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||
gap: 15px;
|
||
margin: 20px 0;
|
||
}
|
||
.stat-card {
|
||
background: var(--card);
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
text-align: center;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||
}
|
||
.stat-card .value { font-size: 1.8rem; font-weight: bold; color: var(--primary); }
|
||
.stat-card .label { font-size: 0.9rem; color: var(--text-light); }
|
||
h2 {
|
||
color: var(--primary-dark);
|
||
margin: 30px 0 15px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 2px solid var(--primary);
|
||
}
|
||
.section {
|
||
background: var(--card);
|
||
padding: 25px;
|
||
border-radius: 10px;
|
||
margin-bottom: 20px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||
}
|
||
.day-menu {
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin-bottom: 15px;
|
||
}
|
||
.day-menu h3 { color: var(--primary-dark); margin-bottom: 15px; }
|
||
.meal {
|
||
margin-bottom: 12px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 1px dashed var(--border);
|
||
}
|
||
.meal:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
|
||
.meal .type { font-weight: bold; color: var(--primary); font-size: 0.9rem; }
|
||
.meal .name { margin: 5px 0; }
|
||
.meal .calories { font-size: 0.85rem; color: var(--text-light); }
|
||
.tips {
|
||
background: #fef3c7;
|
||
border-left: 4px solid #f59e0b;
|
||
padding: 15px 20px;
|
||
margin: 20px 0;
|
||
border-radius: 0 8px 8px 0;
|
||
}
|
||
.tips h3 { color: #92400e; margin-bottom: 10px; }
|
||
.tips ul { margin-left: 20px; }
|
||
.tips li { margin-bottom: 8px; }
|
||
.rules-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 15px;
|
||
}
|
||
.rule-card {
|
||
background: var(--bg);
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
border-left: 3px solid var(--primary);
|
||
}
|
||
.rule-card h4 { color: var(--primary-dark); margin-bottom: 8px; }
|
||
.products-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 15px;
|
||
}
|
||
.product-category {
|
||
background: var(--bg);
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
}
|
||
.product-category h4 { color: var(--primary-dark); margin-bottom: 10px; }
|
||
.product-category ul { margin-left: 20px; }
|
||
.product-category li { margin-bottom: 5px; }
|
||
.progress-tracker {
|
||
background: linear-gradient(135deg, #10b981, #059669);
|
||
color: white;
|
||
padding: 25px;
|
||
border-radius: 10px;
|
||
margin: 20px 0;
|
||
}
|
||
.progress-tracker h3 { margin-bottom: 15px; }
|
||
.progress-inputs {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr auto;
|
||
gap: 10px;
|
||
margin-bottom: 15px;
|
||
}
|
||
.progress-inputs input {
|
||
padding: 10px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-size: 1rem;
|
||
}
|
||
.progress-inputs button {
|
||
background: white;
|
||
color: var(--primary-dark);
|
||
border: none;
|
||
padding: 10px 20px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-weight: bold;
|
||
}
|
||
.progress-inputs button:hover { background: #f0fdf4; }
|
||
#progressLog { margin-top: 15px; }
|
||
.log-entry {
|
||
background: rgba(255,255,255,0.2);
|
||
padding: 10px;
|
||
border-radius: 6px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.water-tracker {
|
||
text-align: center;
|
||
padding: 20px;
|
||
}
|
||
.water-glasses {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin: 15px 0;
|
||
}
|
||
.glass {
|
||
width: 40px;
|
||
height: 50px;
|
||
border: 2px solid var(--primary);
|
||
border-radius: 0 0 20px 20px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
.glass.filled {
|
||
background: var(--primary);
|
||
}
|
||
.glass:hover { transform: scale(1.1); }
|
||
.water-count { font-size: 1.5rem; font-weight: bold; color: var(--primary); }
|
||
@media (max-width: 600px) {
|
||
header h1 { font-size: 1.6rem; }
|
||
.progress-inputs { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>🌿 План похудения на 3 месяца</h1>
|
||
<p>Персональная программа для веса 69 кг → 59 кг</p>
|
||
</header>
|
||
|
||
<div class="stats">
|
||
<div class="stat-card">
|
||
<div class="value">69 кг</div>
|
||
<div class="label">Текущий вес</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="value">59 кг</div>
|
||
<div class="label">Цель</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="value">10 кг</div>
|
||
<div class="label">Сбросить</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="value">90 дней</div>
|
||
<div class="label">Срок</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>📊 Твои показатели</h2>
|
||
<div class="rules-grid">
|
||
<div class="rule-card">
|
||
<h4>ИМТ сейчас</h4>
|
||
<p>22.8 — норма (18.5-25)</p>
|
||
</div>
|
||
<div class="rule-card">
|
||
<h4>Калории в день</h4>
|
||
<p>1600-1700 ккал для похудения</p>
|
||
</div>
|
||
<div class="rule-card">
|
||
<h4>Белки/Жиры/Углеводы</h4>
|
||
<p>90г / 50г / 160г</p>
|
||
</div>
|
||
<div class="rule-card">
|
||
<h4>Темп</h4>
|
||
<p>0.7-0.8 кг в неделю</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>✅ Основные правила</h2>
|
||
<div class="rules-grid">
|
||
<div class="rule-card">
|
||
<h4>🍽 Питание</h4>
|
||
<p>3 основных приёма + 1-2 перекуса. Не пропускай завтрак!</p>
|
||
</div>
|
||
<div class="rule-card">
|
||
<h4>💧 Вода</h4>
|
||
<p>1.5-2 литра в день. Стакан воды за 20 мин до еды.</p>
|
||
</div>
|
||
<div class="rule-card">
|
||
<h4>🏃 Активность</h4>
|
||
<p>30-40 мин ходьбы ежедневно + 2-3 тренировки в неделю</p>
|
||
</div>
|
||
<div class="rule-card">
|
||
<h4>😴 Сон</h4>
|
||
<p>7-8 часов. Ложись до 23:00.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>🥗 Меню на 7 дней</h2>
|
||
<div id="menuContainer"></div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>🛒 Список продуктов</h2>
|
||
<div class="products-grid">
|
||
<div class="product-category">
|
||
<h4>Белки</h4>
|
||
<ul>
|
||
<li>Куриная грудка</li>
|
||
<li>Индейка</li>
|
||
<li>Рыба (минтай, треска)</li>
|
||
<li>Яйца</li>
|
||
<li>Творог 2-5%</li>
|
||
<li>Греческий йогурт</li>
|
||
</ul>
|
||
</div>
|
||
<div class="product-category">
|
||
<h4>Углеводы</h4>
|
||
<ul>
|
||
<li>Гречка</li>
|
||
<li>Овсянка</li>
|
||
<li>Бурый рис</li>
|
||
<li>Киноа</li>
|
||
<li>Цельнозерновой хлеб</li>
|
||
<li>Батат</li>
|
||
</ul>
|
||
</div>
|
||
<div class="product-category">
|
||
<h4>Овощи</h4>
|
||
<ul>
|
||
<li>Огурцы</li>
|
||
<li>Помидоры</li>
|
||
<li>Капуста</li>
|
||
<li>Кабачки</li>
|
||
<li>Перец</li>
|
||
<li>Зелень</li>
|
||
</ul>
|
||
</div>
|
||
<div class="product-category">
|
||
<h4>Фрукты</h4>
|
||
<ul>
|
||
<li>Яблоки</li>
|
||
<li>Грейпфрут</li>
|
||
<li>Апельсины</li>
|
||
<li>Ягоды</li>
|
||
<li>Бананы (1-2 в неделю)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>🚫 Что исключить</h2>
|
||
<div class="tips">
|
||
<h3>Нельзя:</h3>
|
||
<ul>
|
||
<li>Сахар и сладости (конфеты, торты, печенье)</li>
|
||
<li>Белый хлеб и выпечка</li>
|
||
<li>Фастфуд и полуфабрикаты</li>
|
||
<li>Сладкие напитки и пакетированные соки</li>
|
||
<li>Майонез и жирные соусы</li>
|
||
<li>Алкоголь (высокая калорийность)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>💧 Трекер воды</h2>
|
||
<div class="water-tracker">
|
||
<p>Выпито стаканов сегодня:</p>
|
||
<div class="water-count" id="waterCount">0 / 8</div>
|
||
<div class="water-glasses" id="waterGlasses"></div>
|
||
<button onclick="resetWater()" style="margin-top: 15px; padding: 8px 16px; background: var(--primary); color: white; border: none; border-radius: 6px; cursor: pointer;">Сбросить</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>📈 Трекер веса</h2>
|
||
<div class="progress-tracker">
|
||
<h3>Записывай вес каждое утро натощак</h3>
|
||
<div class="progress-inputs">
|
||
<input type="date" id="weightDate">
|
||
<input type="number" id="weightValue" placeholder="Вес в кг" step="0.1">
|
||
<button onclick="addWeight()">Записать</button>
|
||
</div>
|
||
<div id="progressLog"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>💪 Примерный план тренировок</h2>
|
||
<div class="rules-grid">
|
||
<div class="rule-card">
|
||
<h4>Понедельник</h4>
|
||
<p>Кардио 30 мин + пресс</p>
|
||
</div>
|
||
<div class="rule-card">
|
||
<h4>Среда</h4>
|
||
<p>Силовая (присед, отжимания, планка)</p>
|
||
</div>
|
||
<div class="rule-card">
|
||
<h4>Пятница</h4>
|
||
<p>Кардио 40 мин + растяжка</p>
|
||
</div>
|
||
<div class="rule-card">
|
||
<h4>Выходные</h4>
|
||
<p>Прогулка 60 мин</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const menuData = [
|
||
{
|
||
day: "День 1 (Понедельник)",
|
||
meals: [
|
||
{ type: "Завтрак (350 ккал)", name: "Овсянка на воде с яблоком и корицей, 1 яйцо всмятку, зелёный чай" },
|
||
{ type: "Перекус (100 ккал)", name: "Яблоко среднее" },
|
||
{ type: "Обед (450 ккал)", name: "Гречка (100г готовой), куриная грудка на пару (120г), салат из огурцов и помидоров (150г)" },
|
||
{ type: "Перекус (100 ккал)", name: "Греческий йогурт (100г)" },
|
||
{ type: "Ужин (350 ккал)", name: "Запечённая рыба (150г), тушёные овощи (200г)" }
|
||
]
|
||
},
|
||
{
|
||
day: "День 2 (Вторник)",
|
||
meals: [
|
||
{ type: "Завтрак (380 ккал)", name: "Омлет из 2 яиц с помидорами, цельнозерновой тост, кофе без сахара" },
|
||
{ type: "Перекус (120 ккал)", name: "Грейпфрут" },
|
||
{ type: "Обед (480 ккал)", name: "Бурый рис (100г), индейка (120г), салат из капусты и моркови (150г)" },
|
||
{ type: "Перекус (100 ккал)", name: "Творог 2% (100г)" },
|
||
{ type: "Ужин (370 ккал)", name: "Куриное филе гриль (130г), брокколи на пару (200г)" }
|
||
]
|
||
},
|
||
{
|
||
day: "День 3 (Среда)",
|
||
meals: [
|
||
{ type: "Завтрак (360 ккал)", name: "Сырники запечённые (2 шт), ягоды (100г), чай" },
|
||
{ type: "Перекус (100 ккал)", name: "Апельсин" },
|
||
{ type: "Обед (470 ккал)", name: "Киноа (100г), запечённая курица (120г), овощной салат (150г)" },
|
||
{ type: "Перекус (100 ккал)", name: "Кефир 1% (стакан)" },
|
||
{ type: "Ужин (380 ккал)", name: "Минтай на пару (150г), кабачки тушёные (200г)" }
|
||
]
|
||
},
|
||
{
|
||
day: "День 4 (Четверг)",
|
||
meals: [
|
||
{ type: "Завтрак (370 ккал)", name: "Гречневая каша (100г), 1 варёное яйцо, огурец" },
|
||
{ type: "Перекус (110 ккал)", name: "Яблоко запечённое с корицей" },
|
||
{ type: "Обед (460 ккал)", name: "Суп овощной с курицей (300мл), хлеб цельнозерновой (30г)" },
|
||
{ type: "Перекус (100 ккал)", name: "Йогурт натуральный (120г)" },
|
||
{ type: "Ужин (360 ккал)", name: "Творог 2% (150г), овощи свежие (150г)" }
|
||
]
|
||
},
|
||
{
|
||
day: "День 5 (Пятница)",
|
||
meals: [
|
||
{ type: "Завтрак (350 ккал)", name: "Овсяноблин с творогом и зеленью, чай" },
|
||
{ type: "Перекус (100 ккал)", name: "Горсть ягод (100г)" },
|
||
{ type: "Обед (480 ккал)", name: "Паста из твёрдых сортов (80г сухой), фарш индейки (100г), томатный соус" },
|
||
{ type: "Перекус (100 ккал)", name: "Творог 2% (100г)" },
|
||
{ type: "Ужин (370 ккал)", name: "Запечённая куриная грудка (130г), салат из свёклы (150г)" }
|
||
]
|
||
},
|
||
{
|
||
day: "День 6 (Суббота)",
|
||
meals: [
|
||
{ type: "Завтрак (380 ккал)", name: "Скрэмбл из 2 яиц, авокадо (30г), тост" },
|
||
{ type: "Перекус (120 ккал)", name: "Груша" },
|
||
{ type: "Обед (470 ккал)", name: "Запечённая рыба (150г), бурый рис (80г), овощи гриль (150г)" },
|
||
{ type: "Перекус (100 ккал)", name: "Кефир 1% (стакан)" },
|
||
{ type: "Ужин (350 ккал)", name: "Салат с тунцом (тунец в с/с 100г, яйца, овощи)" }
|
||
]
|
||
},
|
||
{
|
||
day: "День 7 (Воскресенье)",
|
||
meals: [
|
||
{ type: "Завтрак (370 ккал)", name: "Сырники (2 шт), сметана 10% (30г), чай" },
|
||
{ type: "Перекус (100 ккал)", name: "Яблоко" },
|
||
{ type: "Обед (460 ккал)", name: "Куриный бульон (300мл), яйцо, зелень, хлеб (30г)" },
|
||
{ type: "Перекус (100 ккал)", name: "Йогурт греческий (100г)" },
|
||
{ type: "Ужин (380 ккал)", name: "Индейка запечённая (130г), цветная капуста (200г)" }
|
||
]
|
||
}
|
||
];
|
||
|
||
function renderMenu() {
|
||
const container = document.getElementById('menuContainer');
|
||
container.innerHTML = menuData.map(day => `
|
||
<div class="day-menu">
|
||
<h3>${day.day}</h3>
|
||
${day.meals.map(meal => `
|
||
<div class="meal">
|
||
<div class="type">${meal.type}</div>
|
||
<div class="name">${meal.name}</div>
|
||
</div>
|
||
`).join('')}
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
// Water tracker
|
||
let waterGlasses = 0;
|
||
function renderWater() {
|
||
const container = document.getElementById('waterGlasses');
|
||
container.innerHTML = Array(8).fill(0).map((_, i) =>
|
||
`<div class="glass ${i < waterGlasses ? 'filled' : ''}" onclick="toggleGlass(${i})"></div>`
|
||
).join('');
|
||
document.getElementById('waterCount').textContent = `${waterGlasses} / 8`;
|
||
localStorage.setItem('waterGlasses', waterGlasses);
|
||
}
|
||
function toggleGlass(index) {
|
||
waterGlasses = index + 1;
|
||
if (waterGlasses > 8) waterGlasses = 0;
|
||
renderWater();
|
||
}
|
||
function resetWater() {
|
||
waterGlasses = 0;
|
||
renderWater();
|
||
}
|
||
waterGlasses = parseInt(localStorage.getItem('waterGlasses') || '0');
|
||
renderWater();
|
||
|
||
// Weight tracker
|
||
let weights = JSON.parse(localStorage.getItem('weights') || '[]');
|
||
function renderWeights() {
|
||
const log = document.getElementById('progressLog');
|
||
log.innerHTML = weights.sort((a,b) => new Date(b.date) - new Date(a.date)).map(w =>
|
||
`<div class="log-entry">${new Date(w.date).toLocaleDateString('ru-RU')}: <strong>${w.weight} кг</strong></div>`
|
||
).join('');
|
||
}
|
||
function addWeight() {
|
||
const date = document.getElementById('weightDate').value;
|
||
const weight = parseFloat(document.getElementById('weightValue').value);
|
||
if (date && weight) {
|
||
weights.push({ date, weight });
|
||
localStorage.setItem('weights', JSON.stringify(weights));
|
||
renderWeights();
|
||
document.getElementById('weightValue').value = '';
|
||
}
|
||
}
|
||
renderWeights();
|
||
renderMenu();
|
||
</script>
|
||
</body>
|
||
</html>
|