303 lines
14 KiB
HTML
303 lines
14 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">
|
||
<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>
|
||
</ul>
|
||
</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>
|