827 lines
40 KiB
HTML
827 lines
40 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Гараж 4×12 — Мой проект</title>
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🏠</text></svg>">
|
||
<style>
|
||
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
|
||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||
.hero{background:var(--ink);color:var(--white);padding:100px 24px}
|
||
.hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:24px}
|
||
.hero p{font-size:20px;color:#9aa3b2;max-width:600px;margin-bottom:32px}
|
||
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none}
|
||
.section h2{font-size:36px;font-weight:700;margin-bottom:24px}
|
||
.card{background:var(--gray-100);border-radius:16px;padding:32px;margin-bottom:16px}
|
||
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
|
||
.zone{background:#fff;border:2px solid var(--gray-100);border-radius:16px;overflow:hidden}
|
||
.zone img{width:100%;height:200px;object-fit:cover}
|
||
.zone-content{padding:24px}
|
||
.zone h3{font-size:22px;font-weight:700;margin-bottom:12px}
|
||
.zone p{color:var(--gray-500);margin-bottom:16px}
|
||
.tag{display:inline-block;background:var(--cyan-50);color:#008c9e;padding:4px 12px;border-radius:20px;font-size:13px;font-weight:600;margin-right:8px;margin-bottom:8px}
|
||
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:40px}
|
||
.stat{background:var(--ink);color:#fff;border-radius:12px;padding:24px;text-align:center}
|
||
.stat .num{font-size:42px;font-weight:800;color:var(--cyan);line-height:1}
|
||
.stat .lbl{font-size:14px;color:#9aa3b2;margin-top:8px}
|
||
.plan{background:var(--ink);color:#fff;border-radius:16px;padding:40px;margin:40px 0}
|
||
.plan-svg{width:100%;max-width:800px;margin:0 auto;display:block}
|
||
@media (max-width:640px){.hero h1{font-size:36px}.section h2{font-size:28px}.container{padding:48px 20px}.hero{padding:60px 20px}}
|
||
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
|
||
.reveal.in{opacity:1;transform:none}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1>Гараж 4×12 м</h1>
|
||
<p>Личное пространство для машины, инструментов и проектов. Зонирование, хранение, верстак.</p>
|
||
<a class="btn" href="#plan">Смотреть планировку</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section"><div class="container">
|
||
<h2 class="reveal">Параметры проекта</h2>
|
||
<div class="stats reveal">
|
||
<div class="stat"><div class="num">48 м²</div><div class="lbl">Общая площадь</div></div>
|
||
<div class="stat"><div class="num">4×12 м</div><div class="lbl">Размеры</div></div>
|
||
<div class="stat"><div class="num">6 зон</div><div class="lbl">Функциональных</div></div>
|
||
<div class="stat"><div class="num">100%</div><div class="lbl">Для себя</div></div>
|
||
</div>
|
||
</div></section>
|
||
|
||
<section class="section"><div class="container" id="plan">
|
||
<h2 class="reveal">Планировка</h2>
|
||
<div class="plan reveal">
|
||
<svg class="plan-svg" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
|
||
<rect x="0" y="0" width="800" height="400" fill="#1a1f29" rx="8"/>
|
||
<rect x="20" y="20" width="760" height="360" fill="none" stroke="#00E5FF" stroke-width="3" rx="4"/>
|
||
|
||
<!-- Зона 1: Въезд -->
|
||
<rect x="20" y="20" width="200" height="360" fill="#2a3441" stroke="#5B6573" stroke-width="1"/>
|
||
<text x="120" y="200" fill="#9aa3b2" font-size="16" text-anchor="middle">Въезд</text>
|
||
|
||
<!-- Зона 2: Авто -->
|
||
<rect x="220" y="20" width="300" height="360" fill="#1e2530" stroke="#00E5FF" stroke-width="2"/>
|
||
<text x="370" y="190" fill="#00E5FF" font-size="18" font-weight="700" text-anchor="middle">АВТО</text>
|
||
<text x="370" y="220" fill="#5B6573" font-size="14" text-anchor="middle">3.5×6 м</text>
|
||
|
||
<!-- Зона 3: Верстак -->
|
||
<rect x="520" y="20" width="130" height="170" fill="#2a3441" stroke="#5B6573" stroke-width="1"/>
|
||
<text x="585" y="100" fill="#fff" font-size="14" font-weight="700" text-anchor="middle">ВЕРСТАК</text>
|
||
|
||
<!-- Зона 4: Инструменты -->
|
||
<rect x="650" y="20" width="130" height="170" fill="#2a3441" stroke="#5B6573" stroke-width="1"/>
|
||
<text x="715" y="100" fill="#fff" font-size="14" font-weight="700" text-anchor="middle">ИНСТРУМЕНТЫ</text>
|
||
|
||
<!-- Зона 5: Склад -->
|
||
<rect x="520" y="200" width="130" height="180" fill="#2a3441" stroke="#5B6573" stroke-width="1"/>
|
||
<text x="585" y="290" fill="#fff" font-size="14" font-weight="700" text-anchor="middle">СКЛАД</text>
|
||
|
||
<!-- Зона 6: Шины -->
|
||
<rect x="650" y="200" width="130" height="180" fill="#2a3441" stroke="#5B6573" stroke-width="1"/>
|
||
<text x="715" y="290" fill="#fff" font-size="14" font-weight="700" text-anchor="middle">ШИНЫ</text>
|
||
|
||
<!-- Ворота -->
|
||
<rect x="20" y="150" width="30" height="100" fill="#00E5FF" opacity="0.6"/>
|
||
</svg>
|
||
</div>
|
||
</div></section>
|
||
|
||
<section class="section"><div class="container">
|
||
<h2 class="reveal">Зоны гаража</h2>
|
||
<div class="grid">
|
||
<div class="zone reveal">
|
||
<img src="https://loremflickr.com/800/600/garage,car" alt="Парковка">
|
||
<div class="zone-content">
|
||
<h3>🚗 Парковка</h3>
|
||
<p>Основное место для авто. Размер 3.5×6 м — достаточно для любой легковушки + открыть двери.</p>
|
||
<span class="tag">Центр гаража</span>
|
||
<span class="tag">3.5×6 м</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zone reveal">
|
||
<img src="https://loremflickr.com/800/600/workshop,tools" alt="Верстак">
|
||
<div class="zone-content">
|
||
<h3>🔧 Верстак</h3>
|
||
<p>Рабочая зона для ремонта и проектов. Тиски, освещение, розетки 220В.</p>
|
||
<span class="tag">Ремонт</span>
|
||
<span class="tag">2 м²</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zone reveal">
|
||
<img src="https://loremflickr.com/800/600/tools,organization" alt="Инструменты">
|
||
<div class="zone-content">
|
||
<h3>🛠 Инструменты</h3>
|
||
<p>Стеллажи и стенды для ручного инструмента. Всё на виду и под рукой.</p>
|
||
<span class="tag">Хранение</span>
|
||
<span class="tag">2 м²</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zone reveal">
|
||
<img src="https://loremflickr.com/800/600/storage,shelves" alt="Склад">
|
||
<div class="zone-content">
|
||
<h3>📦 Склад</h3>
|
||
<p>Запчасти, расходники, автохимия. Закрытые шкафы и открытые стеллажи.</p>
|
||
<span class="tag">Запасы</span>
|
||
<span class="tag">2 м²</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zone reveal">
|
||
<img src="https://loremflickr.com/800/600/tires,wheels" alt="Шины">
|
||
<div class="zone-content">
|
||
<h3>🔘 Шины</h3>
|
||
<p>Сезонное хранение колёс. Стеллаж или подвесная система.</p>
|
||
<span class="tag">4 колеса</span>
|
||
<span class="tag">1 м²</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zone reveal">
|
||
<img src="https://loremflickr.com/800/600/garage,entrance" alt="Въезд">
|
||
<div class="zone-content">
|
||
<h3>🚪 Въездная зона</h3>
|
||
<p>Ворота, место для манёвра. Коврик для грязи, освещение.</p>
|
||
<span class="tag">Въезд</span>
|
||
<span class="tag">6 м²</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div></section>
|
||
|
||
<section class="section"><div class="container">
|
||
<h2 class="reveal">Электрика</h2>
|
||
<div class="grid" style="margin-bottom:24px">
|
||
<div class="card reveal" style="background:var(--ink);color:#fff">
|
||
<h3 style="color:var(--cyan);margin-bottom:16px">⚡ Щиток</h3>
|
||
<ul style="list-style:none;line-height:2">
|
||
<li><strong>Ввод:</strong> 220В, 3×6 мм²</li>
|
||
<li><strong>Автомат общий:</strong> 25А</li>
|
||
<li><strong>УЗО:</strong> 30мА</li>
|
||
<li><strong>Групп:</strong> 6 штук</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card reveal" style="background:var(--cyan-50)">
|
||
<h3 style="margin-bottom:16px">📊 Группы</h3>
|
||
<ul style="list-style:none;line-height:2">
|
||
<li><strong>1:</strong> Розетки верстак (16А)</li>
|
||
<li><strong>2:</strong> Розетки потолок (10А)</li>
|
||
<li><strong>3:</strong> Освещение (6А)</li>
|
||
<li><strong>4:</strong> Компрессор (16А)</li>
|
||
<li><strong>5:</strong> Зарядка АКБ (10А)</li>
|
||
<li><strong>6:</strong> Улица/ворота (16А)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card reveal" style="margin-bottom:16px">
|
||
<h3 style="margin-bottom:16px">🔌 Розетки</h3>
|
||
<div class="grid">
|
||
<div>
|
||
<h4 style="margin-bottom:8px">Верстак (4 шт)</h4>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li>2× двойные над столом</li>
|
||
<li>1× для паяльника</li>
|
||
<li>1× резерв</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 style="margin-bottom:8px">Потолок (2 шт)</h4>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li>1× для переноски</li>
|
||
<li>1× для зарядки</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 style="margin-bottom:8px">Улица (2 шт)</h4>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li>1× влагозащита IP54</li>
|
||
<li>1× для ворот</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card reveal" style="margin-bottom:16px">
|
||
<h3 style="margin-bottom:16px">💡 Освещение</h3>
|
||
<div class="grid">
|
||
<div>
|
||
<h4 style="margin-bottom:8px">Основное</h4>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li>LED-панели 4 шт × 40Вт</li>
|
||
<li>Потолок, равномерно</li>
|
||
<li>~500 Люкс</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 style="margin-bottom:8px">Локальное</h4>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li>Бра над верстаком</li>
|
||
<li>Переносная лампа 12В</li>
|
||
<li>Смотровая яма (если будет)</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 style="margin-bottom:8px">Автоматика</h4>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li>Датчик движения у входа</li>
|
||
<li>Проходной выключатель</li>
|
||
<li>Отдельно улица</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card reveal">
|
||
<h3 style="margin-bottom:16px">📐 Кабель и материалы</h3>
|
||
<div class="grid">
|
||
<div>
|
||
<h4 style="margin-bottom:8px">Кабель</h4>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li>Ввод: ВВГ-нг 3×6</li>
|
||
<li>Розетки: ВВГ-нг 3×2.5</li>
|
||
<li>Свет: ВВГ-нг 3×1.5</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 style="margin-bottom:8px">Кабель-каналы</h4>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li>40×25 мм (основные)</li>
|
||
<li>25×16 мм (спуски)</li>
|
||
<li>Углы, тройники, заглушки</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 style="margin-bottom:8px">Примерная смета</h4>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li>Щиток + автоматы: 15 000 ₸</li>
|
||
<li>Кабель: 25 000 ₸</li>
|
||
<li>Розетки/выключатели: 20 000 ₸</li>
|
||
<li>Свет: 40 000 ₸</li>
|
||
<li><strong>Итого: ~100 000 ₸</strong></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div></section>
|
||
|
||
<section class="section"><div class="container">
|
||
<h2 class="reveal">Вентиляция</h2>
|
||
<div class="card reveal" style="margin-bottom:16px;background:var(--cyan-50)">
|
||
<h3 style="margin-bottom:12px">💨 Зачем нужна</h3>
|
||
<ul style="line-height:1.8">
|
||
<li>Удаление выхлопных газов при запуске авто</li>
|
||
<li>Снижение влажности (защита от коррозии)</li>
|
||
<li>Удаление запахов ГСМ, краски, сварки</li>
|
||
<li>Свежий воздух при работе в гараже</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="grid" style="margin-bottom:24px">
|
||
<div class="card reveal">
|
||
<h3 style="margin-bottom:12px">🌬 Приточная</h3>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li><strong>Диаметр:</strong> 150-200 мм</li>
|
||
<li><strong>Высота:</strong> 30 см от пола</li>
|
||
<li><strong>Защита:</strong> решётка + сетка</li>
|
||
<li><strong>Расход:</strong> 150-200 м³/час</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card reveal">
|
||
<h3 style="margin-bottom:12px">🌀 Вытяжная</h3>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li><strong>Диаметр:</strong> 150-200 мм</li>
|
||
<li><strong>Высота:</strong> под потолком</li>
|
||
<li><strong>Тяга:</strong> естественная + вентилятор</li>
|
||
<li><strong>Расход:</strong> 200-300 м³/час</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card reveal" style="margin-bottom:16px">
|
||
<h3 style="margin-bottom:16px">📐 Схема естественной вентиляции</h3>
|
||
<svg viewBox="0 0 800 300" style="width:100%;max-width:700px;display:block;margin:0 auto" xmlns="http://www.w3.org/2000/svg">
|
||
<rect x="50" y="50" width="700" height="200" fill="#F2F4F7" stroke="#5B6573" stroke-width="2" rx="8"/>
|
||
<text x="400" y="30" fill="#0F1218" font-size="16" text-anchor="middle" font-weight="700">Гараж 4×12 м</text>
|
||
|
||
<!-- Приток -->
|
||
<circle cx="100" cy="220" r="25" fill="#00E5FF" opacity="0.3"/>
|
||
<circle cx="100" cy="220" r="15" fill="#00E5FF"/>
|
||
<text x="100" y="225" fill="#0F1218" font-size="12" text-anchor="middle" font-weight="700">П</text>
|
||
<text x="100" y="260" fill="#008c9e" font-size="14" text-anchor="middle">Приток</text>
|
||
<text x="100" y="280" fill="#5B6573" font-size="12" text-anchor="middle">30 см от пола</text>
|
||
|
||
<!-- Вытяжка -->
|
||
<circle cx="700" cy="80" r="25" fill="#FF6B6B" opacity="0.3"/>
|
||
<circle cx="700" cy="80" r="15" fill="#FF6B6B"/>
|
||
<text x="700" y="85" fill="#fff" font-size="12" text-anchor="middle" font-weight="700">В</text>
|
||
<text x="700" y="50" fill="#c92a2a" font-size="14" text-anchor="middle">Вытяжка</text>
|
||
<text x="700" y="30" fill="#5B6573" font-size="12" text-anchor="middle">под потолком</text>
|
||
|
||
<!-- Поток воздуха -->
|
||
<path d="M 130 220 Q 300 200 400 150 T 670 80" fill="none" stroke="#00E5FF" stroke-width="4" stroke-dasharray="8,4" marker-end="url(#arrow)"/>
|
||
<defs>
|
||
<marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
|
||
<path d="M0,0 L0,6 L9,3 z" fill="#00E5FF"/>
|
||
</marker>
|
||
</defs>
|
||
|
||
<!-- Авто -->
|
||
<rect x="250" y="140" width="200" height="70" fill="#1a1f29" rx="8"/>
|
||
<text x="350" y="180" fill="#fff" font-size="14" text-anchor="middle">АВТО</text>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="card reveal" style="margin-bottom:16px">
|
||
<h3 style="margin-bottom:16px">🔧 Варианты исполнения</h3>
|
||
<div class="grid">
|
||
<div>
|
||
<h4 style="margin-bottom:8px">Бюджетный</h4>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li>Две трубы Ø150 мм</li>
|
||
<li>Естественная тяга</li>
|
||
<li>Решётки с сеткой</li>
|
||
<li><strong>~30 000 ₸</strong></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 style="margin-bottom:8px">Оптимальный</h4>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li>Приток: труба Ø200 мм</li>
|
||
<li>Вытяжка: вентилятор 150 мм</li>
|
||
<li>Задвижки на трубы</li>
|
||
<li><strong>~80 000 ₸</strong></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 style="margin-bottom:8px">Продвинутый</h4>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li>Приточно-вытяжная установка</li>
|
||
<li>Рекуператор тепла</li>
|
||
<li>Автоматика, датчики</li>
|
||
<li><strong>~250 000 ₸</strong></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card reveal" style="margin-bottom:16px;background:var(--ink);color:#fff">
|
||
<h3 style="margin-bottom:16px;color:var(--cyan)">📊 Расчёт воздухообмена</h3>
|
||
<div class="grid">
|
||
<div>
|
||
<p style="margin-bottom:8px"><strong>Объём гаража:</strong></p>
|
||
<p style="font-size:24px;color:var(--cyan)">4 × 12 × 3 = 144 м³</p>
|
||
</div>
|
||
<div>
|
||
<p style="margin-bottom:8px"><strong>Норма для гаража:</strong></p>
|
||
<p style="font-size:24px;color:var(--cyan)">6-10 крат в час</p>
|
||
</div>
|
||
<div>
|
||
<p style="margin-bottom:8px"><strong>Итого расход:</strong></p>
|
||
<p style="font-size:24px;color:var(--cyan)">900-1 400 м³/час</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid">
|
||
<div class="card reveal">
|
||
<h3 style="margin-bottom:12px">✅ Монтаж</h3>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li>Разметить отверстия</li>
|
||
<li>Пробурить стены алмазкой</li>
|
||
<li>Установить трубы с уклоном</li>
|
||
<li>Загерметизировать</li>
|
||
<li>Поставить решётки</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card reveal">
|
||
<h3 style="margin-bottom:12px">⚠️ Важно</h3>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li>Приток ниже вытяжки</li>
|
||
<li>Разнести по диагонали</li>
|
||
<li>Утеплить трубу (конденсат)</li>
|
||
<li>Дефлектор на вытяжку</li>
|
||
<li>Задвижки на зиму</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div></section>
|
||
|
||
<section class="section"><div class="container">
|
||
<h2 class="reveal">Стеллажи и хранение</h2>
|
||
|
||
<div class="grid" style="margin-bottom:24px">
|
||
<div class="card reveal" style="background:var(--cyan-50)">
|
||
<h3 style="margin-bottom:12px">📏 Общие принципы</h3>
|
||
<ul style="line-height:1.8">
|
||
<li>Глубина полок: 30-50 см</li>
|
||
<li>Высота между полками: 25-40 см</li>
|
||
<li>Нагрузка на полку: 50-150 кг</li>
|
||
<li>Проход между стеллажами: ≥80 см</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card reveal" style="background:var(--ink);color:#fff">
|
||
<h3 style="margin-bottom:12px;color:var(--cyan)">📐 Зоны хранения</h3>
|
||
<ul style="line-height:1.8">
|
||
<li>Верстак: инструмент под рукой</li>
|
||
<li>Инструменты: стенды + ящики</li>
|
||
<li>Склад: запчасти, химия</li>
|
||
<li>Шины: вертикально/подвес</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card reveal" style="margin-bottom:16px">
|
||
<h3 style="margin-bottom:16px">🔧 Стеллаж над верстаком</h3>
|
||
<svg viewBox="0 0 700 280" style="width:100%;max-width:650px;display:block;margin:0 auto" xmlns="http://www.w3.org/2000/svg">
|
||
<rect x="0" y="0" width="700" height="280" fill="#F2F4F7" rx="8"/>
|
||
|
||
<!-- Стойки -->
|
||
<rect x="50" y="40" width="12" height="200" fill="#5B6573"/>
|
||
<rect x="638" y="40" width="12" height="200" fill="#5B6573"/>
|
||
|
||
<!-- Полки -->
|
||
<rect x="50" y="80" width="600" height="12" fill="#00E5FF"/>
|
||
<rect x="50" y="140" width="600" height="12" fill="#00E5FF"/>
|
||
<rect x="50" y="200" width="600" height="12" fill="#00E5FF"/>
|
||
|
||
<!-- Верстак -->
|
||
<rect x="100" y="240" width="500" height="40" fill="#1a1f29" rx="4"/>
|
||
<text x="350" y="265" fill="#fff" font-size="14" text-anchor="middle">ВЕРСТАК</text>
|
||
|
||
<!-- Размеры -->
|
||
<line x1="50" y1="20" x2="650" y2="20" stroke="#0F1218" stroke-width="2"/>
|
||
<line x1="50" y1="15" x2="50" y2="25" stroke="#0F1218" stroke-width="2"/>
|
||
<line x1="650" y1="15" x2="650" y2="25" stroke="#0F1218" stroke-width="2"/>
|
||
<text x="350" y="15" fill="#0F1218" font-size="12" text-anchor="middle">1800 мм</text>
|
||
|
||
<line x1="670" y1="80" x2="670" y2="240" stroke="#0F1218" stroke-width="2"/>
|
||
<line x1="665" y1="80" x2="675" y2="80" stroke="#0F1218" stroke-width="2"/>
|
||
<line x1="665" y1="240" x2="675" y2="240" stroke="#0F1218" stroke-width="2"/>
|
||
<text x="690" y="160" fill="#0F1218" font-size="12" text-anchor="middle">1600</text>
|
||
|
||
<text x="350" y="275" fill="#5B6573" font-size="11" text-anchor="middle">Глубина полок: 400 мм</text>
|
||
</svg>
|
||
<div class="grid" style="margin-top:16px">
|
||
<div>
|
||
<h4 style="margin-bottom:8px">Размеры</h4>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li>Ширина: 1800 мм</li>
|
||
<li>Высота: 1600 мм (3 яруса)</li>
|
||
<li>Глубина: 400 мм</li>
|
||
<li>Шаг стоек: 600 мм</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 style="margin-bottom:8px">Материалы</h4>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li>Стойки: профиль 40×40×2 мм</li>
|
||
<li>Полки: уголок 30×30×3 мм</li>
|
||
<li>Настил: фанера 18 мм</li>
|
||
<li>Крепёж: болты М8</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 style="margin-bottom:8px">Что хранить</h4>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li>Верх: лёгкое, редко используемое</li>
|
||
<li>Средняя: основной инструмент</li>
|
||
<li>Низ: тяжёлое, габаритное</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card reveal" style="margin-bottom:16px">
|
||
<h3 style="margin-bottom:16px">🛠 Стеллаж для инструментов (угловой)</h3>
|
||
<svg viewBox="0 0 500 300" style="width:100%;max-width:500px;display:block;margin:0 auto" xmlns="http://www.w3.org/2000/svg">
|
||
<rect x="0" y="0" width="500" height="300" fill="#F2F4F7" rx="8"/>
|
||
|
||
<!-- Угловые стойки -->
|
||
<rect x="40" y="40" width="10" height="220" fill="#5B6573"/>
|
||
<rect x="450" y="40" width="10" height="220" fill="#5B6573"/>
|
||
<rect x="40" y="40" width="420" height="10" fill="#5B6573"/>
|
||
|
||
<!-- Полки -->
|
||
<rect x="40" y="100" width="420" height="10" fill="#00E5FF"/>
|
||
<rect x="40" y="160" width="420" height="10" fill="#00E5FF"/>
|
||
<rect x="40" y="220" width="420" height="10" fill="#00E5FF"/>
|
||
|
||
<!-- Ящики/органайзеры -->
|
||
<rect x="60" y="115" width="80" height="30" fill="#1a1f29" opacity="0.7"/>
|
||
<rect x="150" y="115" width="80" height="30" fill="#1a1f29" opacity="0.7"/>
|
||
<rect x="240" y="115" width="80" height="30" fill="#1a1f29" opacity="0.7"/>
|
||
<rect x="330" y="115" width="110" height="30" fill="#1a1f29" opacity="0.7"/>
|
||
|
||
<!-- Размеры -->
|
||
<text x="250" y="30" fill="#0F1218" font-size="12" text-anchor="middle">1200 мм</text>
|
||
<text x="470" y="150" fill="#0F1218" font-size="12" text-anchor="middle">1800</text>
|
||
<text x="250" y="280" fill="#5B6573" font-size="11" text-anchor="middle">Глубина: 300 мм</text>
|
||
</svg>
|
||
<div class="grid" style="margin-top:16px">
|
||
<div>
|
||
<h4 style="margin-bottom:8px">Размеры</h4>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li>Ширина: 1200 мм</li>
|
||
<li>Высота: 1800 мм (4 яруса)</li>
|
||
<li>Глубина: 300 мм</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 style="margin-bottom:8px">Организация</h4>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li>Перфорированная панель сзади</li>
|
||
<li>Контейнеры для мелочёвки</li>
|
||
<li>Магнитные держатели</li>
|
||
<li>Подписанные ящики</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 style="margin-bottom:8px">Смета</h4>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li>Металлопрокат: 25 000 ₸</li>
|
||
<li>Фанера/ЛДСП: 15 000 ₸</li>
|
||
<li>Крепёж: 5 000 ₸</li>
|
||
<li><strong>~45 000 ₸</strong></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card reveal" style="margin-bottom:16px">
|
||
<h3 style="margin-bottom:16px">📦 Складской стеллаж (для запчастей)</h3>
|
||
<div class="grid">
|
||
<div>
|
||
<h4 style="margin-bottom:8px">Размеры</h4>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li>Ширина: 1500 мм</li>
|
||
<li>Высота: 2000 мм (5 ярусов)</li>
|
||
<li>Глубина: 500 мм</li>
|
||
<li>Нагрузка: до 200 кг/полка</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 style="margin-bottom:8px">Что хранить</h4>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li>Масла, фильтры</li>
|
||
<li>Запчасти в коробках</li>
|
||
<li>Автохимия</li>
|
||
<li>Расходники</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 style="margin-bottom:8px">Смета</h4>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li>Готовый стеллаж: 60 000 ₸</li>
|
||
<li>Или самодельный: ~40 000 ₸</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card reveal" style="margin-bottom:16px">
|
||
<h3 style="margin-bottom:16px">🔘 Хранение шин и колёс</h3>
|
||
<div class="grid">
|
||
<div class="card" style="background:var(--cyan-50)">
|
||
<h4 style="margin-bottom:8px">Вариант 1: Вертикальный стеллаж</h4>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li>4 слота по ширине колеса</li>
|
||
<li>Расстояние: 300 мм</li>
|
||
<li>Высота: 1200 мм</li>
|
||
<li><strong>~15 000 ₸</strong></li>
|
||
</ul>
|
||
</div>
|
||
<div class="card" style="background:var(--ink);color:#fff">
|
||
<h4 style="margin-bottom:8px;color:var(--cyan)">Вариант 2: Подвес на потолок</h4>
|
||
<ul style="line-height:1.8">
|
||
<li>Кронштейны с крюками</li>
|
||
<li>Экономия места на полу</li>
|
||
<li>Удобно менять сезон</li>
|
||
<li><strong>~10 000 ₸</strong></li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<h4 style="margin-bottom:8px">Вариант 3: Стойка-стойка</h4>
|
||
<ul style="line-height:1.8;color:var(--gray-500)">
|
||
<li>Две вертикальные стойки</li>
|
||
<li>Колёса между ними</li>
|
||
<li>Компактно</li>
|
||
<li><strong>~8 000 ₸</strong></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card reveal" style="margin-bottom:16px;background:var(--ink);color:#fff">
|
||
<h3 style="margin-bottom:16px;color:var(--cyan)">📊 Итоговая смета на все стеллажи</h3>
|
||
<div class="grid">
|
||
<div>
|
||
<p style="color:#9aa3b2;margin-bottom:8px">Над верстаком</p>
|
||
<p style="font-size:24px;color:var(--cyan)">~45 000 ₸</p>
|
||
</div>
|
||
<div>
|
||
<p style="color:#9aa3b2;margin-bottom:8px">Инструменты</p>
|
||
<p style="font-size:24px;color:var(--cyan)">~45 000 ₸</p>
|
||
</div>
|
||
<div>
|
||
<p style="color:#9aa3b2;margin-bottom:8px">Склад</p>
|
||
<p style="font-size:24px;color:var(--cyan)">~40 000 ₸</p>
|
||
</div>
|
||
<div>
|
||
<p style="color:#9aa3b2;margin-bottom:8px">Шины</p>
|
||
<p style="font-size:24px;color:var(--cyan)">~15 000 ₸</p>
|
||
</div>
|
||
<div>
|
||
<p style="color:#9aa3b2;margin-bottom:8px">Крепёж, фурнитура</p>
|
||
<p style="font-size:24px;color:var(--cyan)">~15 000 ₸</p>
|
||
</div>
|
||
<div>
|
||
<p style="color:#9aa3b2;margin-bottom:8px;font-weight:700">ИТОГО</p>
|
||
<p style="font-size:28px;color:var(--cyan);font-weight:700">~160 000 ₸</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div></section>
|
||
|
||
<section class="section"><div class="container">
|
||
<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">
|
||
<h2 class="reveal" style="color:#fff">Готов начать обустраивать</h2>
|
||
<p class="reveal" style="color:#9aa3b2;margin-bottom:24px;max-width:600px">Это личный проект — здесь будет история обустройства гаража, чертежи и фотоотчёт.</p>
|
||
</div></section>
|
||
|
||
<script>
|
||
var io=new IntersectionObserver(function(entries){
|
||
entries.forEach(function(e){ if(e.isIntersecting) e.target.classList.add('in'); });
|
||
},{threshold:.15});
|
||
document.querySelectorAll('.reveal').forEach(function(el){ io.observe(el); });
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|