фотоотчёт: этапы, прогресс, инструкции
This commit is contained in:
parent
12db484167
commit
25563ac8c6
162
index.html
162
index.html
@ -652,16 +652,162 @@ body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,s
|
||||
</div></section>
|
||||
|
||||
<section class="section"><div class="container">
|
||||
<h2 class="reveal">Что будет дальше</h2>
|
||||
<div class="card reveal">
|
||||
<ul style="list-style:none;padding-left:0">
|
||||
<li style="margin-bottom:16px">✅ <strong>Зонирование</strong> — 6 основных зон определены</li>
|
||||
<li style="margin-bottom:16px">✅ <strong>Электрика</strong> — щиток, розетки, освещение</li>
|
||||
<li style="margin-bottom:16px">✅ <strong>Вентиляция</strong> — приток, вытяжка, расчёт</li>
|
||||
<li style="margin-bottom:16px">✅ <strong>Стеллажи</strong> — размеры, чертежи, материалы</li>
|
||||
<li style="margin-bottom:16px">⬜ <strong>Фотоотчёт</strong> — процесс обустройства</li>
|
||||
<h2 class="reveal">Фотоотчёт</h2>
|
||||
<p class="reveal" style="color:var(--gray-500);margin-bottom:24px;max-width:700px">Здесь будет история обустройства гаража по этапам. Фото добавляются по мере выполнения работ.</p>
|
||||
|
||||
<div class="grid" style="margin-bottom:24px">
|
||||
<div class="card reveal" style="background:var(--ink);color:#fff">
|
||||
<h3 style="margin-bottom:16px;color:var(--cyan)">📍 Этап 1: Зонирование</h3>
|
||||
<p style="color:#9aa3b2;margin-bottom:16px">Разметка гаража, определение границ зон</p>
|
||||
<div style="background:#1a1f29;border-radius:8px;padding:16px;margin-bottom:12px">
|
||||
<p style="font-size:14px;color:#9aa3b2;margin-bottom:8px">Что сделано:</p>
|
||||
<ul style="color:#fff;line-height:1.8">
|
||||
<li>✅ Разметил границы зон</li>
|
||||
<li>✅ Определил место под верстак</li>
|
||||
<li>✅ Наметил проходы</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="background:#1a1f29;border-radius:8px;padding:16px">
|
||||
<p style="font-size:14px;color:#9aa3b2;margin-bottom:8px">Фото:</p>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
|
||||
<div style="background:#2a3441;border-radius:4px;height:120px;display:flex;align-items:center;justify-content:center;color:#5B6573;font-size:13px">Фото 1</div>
|
||||
<div style="background:#2a3441;border-radius:4px;height:120px;display:flex;align-items:center;justify-content:center;color:#5B6573;font-size:13px">Фото 2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card reveal" style="background:var(--cyan-50)">
|
||||
<h3 style="margin-bottom:16px">⚡ Этап 2: Электрика</h3>
|
||||
<p style="color:var(--gray-500);margin-bottom:16px">Прокладка кабеля, установка щитка, розеток, света</p>
|
||||
<div style="background:#fff;border-radius:8px;padding:16px;margin-bottom:12px">
|
||||
<p style="font-size:14px;color:var(--gray-500);margin-bottom:8px">Что сделано:</p>
|
||||
<ul style="color:var(--ink);line-height:1.8">
|
||||
<li>⬜ Разметка трасс кабеля</li>
|
||||
<li>⬜ Штробление / кабель-каналы</li>
|
||||
<li>⬜ Установка щитка</li>
|
||||
<li>⬜ Прокладка кабеля</li>
|
||||
<li>⬜ Монтаж розеток и выключателей</li>
|
||||
<li>⬜ Установка светильников</li>
|
||||
<li>⬜ Подключение и тест</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="background:#fff;border-radius:8px;padding:16px">
|
||||
<p style="font-size:14px;color:var(--gray-500);margin-bottom:8px">Фото (будет):</p>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
|
||||
<div style="background:#E8FCFF;border-radius:4px;height:120px;display:flex;align-items:center;justify-content:center;color:#008c9e;font-size:13px">Щиток</div>
|
||||
<div style="background:#E8FCFF;border-radius:4px;height:120px;display:flex;align-items:center;justify-content:center;color:#008c9e;font-size:13px">Трассы</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="margin-bottom:24px">
|
||||
<div class="card reveal">
|
||||
<h3 style="margin-bottom:16px">💨 Этап 3: Вентиляция</h3>
|
||||
<p style="color:var(--gray-500);margin-bottom:16px">Монтаж приточной и вытяжной вентиляции</p>
|
||||
<div style="background:#F2F4F7;border-radius:8px;padding:16px;margin-bottom:12px">
|
||||
<p style="font-size:14px;color:var(--gray-500);margin-bottom:8px">Что сделано:</p>
|
||||
<ul style="color:var(--ink);line-height:1.8">
|
||||
<li>⬜ Бурение отверстий</li>
|
||||
<li>⬜ Установка труб</li>
|
||||
<li>⬜ Монтаж вентилятора</li>
|
||||
<li>⬜ Герметизация</li>
|
||||
<li>⬜ Установка решёток</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="background:#F2F4F7;border-radius:8px;padding:16px">
|
||||
<p style="font-size:14px;color:var(--gray-500);margin-bottom:8px">Фото (будет):</p>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px">
|
||||
<div style="background:#fff;border:1px dashed #5B6573;border-radius:4px;height:100px;display:flex;align-items:center;justify-content:center;color:#5B6573;font-size:12px">Приток</div>
|
||||
<div style="background:#fff;border:1px dashed #5B6573;border-radius:4px;height:100px;display:flex;align-items:center;justify-content:center;color:#5B6573;font-size:12px">Вытяжка</div>
|
||||
<div style="background:#fff;border:1px dashed #5B6573;border-radius:4px;height:100px;display:flex;align-items:center;justify-content:center;color:#5B6573;font-size:12px">Тест</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card reveal" style="background:var(--ink);color:#fff">
|
||||
<h3 style="margin-bottom:16px;color:var(--cyan)">🔧 Этап 4: Стеллажи</h3>
|
||||
<p style="color:#9aa3b2;margin-bottom:16px">Изготовление и монтаж систем хранения</p>
|
||||
<div style="background:#1a1f29;border-radius:8px;padding:16px;margin-bottom:12px">
|
||||
<p style="font-size:14px;color:#9aa3b2;margin-bottom:8px">Что сделано:</p>
|
||||
<ul style="color:#fff;line-height:1.8">
|
||||
<li>⬜ Закупка материалов</li>
|
||||
<li>⬜ Резка профиля</li>
|
||||
<li>⬜ Сварка / сборка каркасов</li>
|
||||
<li>⬜ Монтаж полок</li>
|
||||
<li>⬜ Покраска</li>
|
||||
<li>⬜ Установка на место</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="background:#1a1f29;border-radius:8px;padding:16px">
|
||||
<p style="font-size:14px;color:#9aa3b2;margin-bottom:8px">Фото (будет):</p>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
|
||||
<div style="background:#2a3441;border-radius:4px;height:100px;display:flex;align-items:center;justify-content:center;color:#5B6573;font-size:12px">Каркас</div>
|
||||
<div style="background:#2a3441;border-radius:4px;height:100px;display:flex;align-items:center;justify-content:center;color:#5B6573;font-size:12px">Полки</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card reveal" style="margin-bottom:16px">
|
||||
<h3 style="margin-bottom:16px">📊 Прогресс проекта</h3>
|
||||
<div style="background:#F2F4F7;border-radius:8px;height:24px;overflow:hidden;margin-bottom:16px">
|
||||
<div style="background:linear-gradient(90deg,var(--cyan) 0%,#00b8cc 100%);width:20%;height:100%;border-radius:8px;transition:width .5s"></div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div style="text-align:center">
|
||||
<p style="font-size:24px;font-weight:700;color:var(--ink)">20%</p>
|
||||
<p style="font-size:13px;color:var(--gray-500)">Выполнено</p>
|
||||
</div>
|
||||
<div style="text-align:center">
|
||||
<p style="font-size:24px;font-weight:700;color:var(--ink)">1/5</p>
|
||||
<p style="font-size:13px;color:var(--gray-500)">Этапов</p>
|
||||
</div>
|
||||
<div style="text-align:center">
|
||||
<p style="font-size:24px;font-weight:700;color:var(--ink)">4</p>
|
||||
<p style="font-size:13px;color:var(--gray-500)">В плане</p>
|
||||
</div>
|
||||
<div style="text-align:center">
|
||||
<p style="font-size:24px;font-weight:700;color:var(--cyan)">~260 000 ₸</p>
|
||||
<p style="font-size:13px;color:var(--gray-500)">Бюджет</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card reveal" style="background:var(--cyan-50);border:2px solid var(--cyan)">
|
||||
<h3 style="margin-bottom:12px">📸 Как добавлять фото</h3>
|
||||
<p style="color:var(--gray-500);margin-bottom:16px">По завершении каждого этапа:</p>
|
||||
<ol style="line-height:2;color:var(--ink)">
|
||||
<li>Сделай фото выполненного этапа</li>
|
||||
<li>Сохрани файлы в папку проекта <code style="background:#fff;padding:2px 6px;border-radius:4px;font-size:13px">/photos/etap-N/</code></li>
|
||||
<li>Обнови этот раздел — вставь фото в нужную секцию</li>
|
||||
<li>Отметь галочками выполненные работы</li>
|
||||
<li>Обнови прогресс-бар (20% за каждый этап)</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div></section>
|
||||
|
||||
<section class="section" style="background:var(--ink);color:#fff"><div class="container">
|
||||
<h2 class="reveal" style="color:#fff">Гараж мечты — в процессе!</h2>
|
||||
<p class="reveal" style="color:#9aa3b2;margin-bottom:24px;max-width:600px">Это личный проект по обустройству гаража 4×12 метров. Все этапы документируются с фото и сметами.</p>
|
||||
<div class="grid reveal">
|
||||
<div>
|
||||
<p style="color:var(--cyan);font-size:32px;font-weight:700;margin-bottom:8px">48 м²</p>
|
||||
<p style="color:#9aa3b2">Площадь</p>
|
||||
</div>
|
||||
<div>
|
||||
<p style="color:var(--cyan);font-size:32px;font-weight:700;margin-bottom:8px">6 зон</p>
|
||||
<p style="color:#9aa3b2">Функциональных</p>
|
||||
</div>
|
||||
<div>
|
||||
<p style="color:var(--cyan);font-size:32px;font-weight:700;margin-bottom:8px">~260 000 ₸</p>
|
||||
<p style="color:#9aa3b2">План бюджета</p>
|
||||
</div>
|
||||
<div>
|
||||
<p style="color:var(--cyan);font-size:32px;font-weight:700;margin-bottom:8px">100%</p>
|
||||
<p style="color:#9aa3b2">Для себя</p>
|
||||
</div>
|
||||
</div>
|
||||
</div></section>
|
||||
|
||||
<section class="section" style="background:var(--ink);color:#fff"><div class="container">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user