139 lines
18 KiB
HTML
139 lines
18 KiB
HTML
<!-- no-design-system -->
|
||
<!DOCTYPE html>
|
||
<html lang="ru" data-theme="auto">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Дизайн комнаты для девушки</title>
|
||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||
<link rel="icon" href="design-system/brand/kt-ai-logo.png">
|
||
<style>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
.hero-interior {
|
||
background: linear-gradient(135deg, var(--kt-ai-bg-soft), var(--kt-ai-bg)), url('https://images.unsplash.com/photo-1595514020180-8c240562a585?w=1920&q=80') center/cover fixed;
|
||
padding: var(--kt-ai-space-12) 0;
|
||
min-height: 80vh;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
.style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--kt-ai-space-6); margin-top: var(--kt-ai-space-9); }
|
||
.style-card { background: var(--kt-ai-card-bg); border-radius: var(--kt-ai-radius-2xl); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; }
|
||
.style-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px rgba(255,182,193,0.3); }
|
||
.style-card img { width: 100%; height: 280px; object-fit: cover; }
|
||
.style-card-content { padding: var(--kt-ai-space-5); }
|
||
.color-palette { display: flex; gap: var(--kt-ai-space-2); margin-top: var(--kt-ai-space-3); }
|
||
.color-swatch { width: 36px; height: 36px; border-radius: var(--kt-ai-radius-full); border: 2px solid var(--kt-ai-bg); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
|
||
.decorative-flower { position: absolute; width: 100px; height: 100px; opacity: 0.7; pointer-events: none; }
|
||
.flower-tl { top: -30px; left: -30px; } .flower-tr { top: -30px; right: -30px; }
|
||
.flower-bl { bottom: -30px; left: -30px; } .flower-br { bottom: -30px; right: -30px; }
|
||
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
|
||
.reveal.in { opacity: 1; transform: none; }
|
||
.tip-card { background: var(--kt-ai-bg-soft); border-left: 4px solid var(--kt-ai-primary); padding: var(--kt-ai-space-4); border-radius: var(--kt-ai-radius-lg); margin-top: var(--kt-ai-space-3); }
|
||
.zone-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--kt-ai-space-5); margin-top: var(--kt-ai-space-8); }
|
||
.zone-card { text-align: center; padding: var(--kt-ai-space-5); background: var(--kt-ai-card-bg); border-radius: var(--kt-ai-radius-2xl); }
|
||
.zone-icon { width: 70px; height: 70px; background: var(--kt-ai-bg-soft); border-radius: var(--kt-ai-radius-full); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--kt-ai-space-3); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<strong>🌸 Интерьер комнаты</strong>
|
||
<span class="kt-ai-spacer"></span>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#styles">Стили</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#colors">Цвета</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#zones">Зоны</a>
|
||
<a class="kt-ai-btn" data-variant="primary" href="#decor">Декор</a>
|
||
</div>
|
||
</header>
|
||
<section class="hero-interior kt-ai-hero" data-align="center">
|
||
<div class="kt-ai-wrap" style="position: relative;">
|
||
<svg class="decorative-flower flower-tl" viewBox="0 0 100 100" fill="var(--kt-ai-primary)" opacity="0.2"><circle cx="50" cy="50" r="40"/><circle cx="50" cy="20" r="10"/><circle cx="80" cy="50" r="10"/><circle cx="50" cy="80" r="10"/><circle cx="20" cy="50" r="10"/></svg>
|
||
<svg class="decorative-flower flower-tr" viewBox="0 0 100 100" fill="var(--kt-ai-primary)" opacity="0.2"><circle cx="50" cy="50" r="40"/><circle cx="50" cy="20" r="10"/><circle cx="80" cy="50" r="10"/><circle cx="50" cy="80" r="10"/><circle cx="20" cy="50" r="10"/></svg>
|
||
<h1>Дизайн комнаты для девушки</h1>
|
||
<p class="kt-ai-hero-sub">Создай уютное пространство, которое отражает твою индивидуальность</p>
|
||
<div class="kt-ai-hero-actions" style="margin-top: var(--kt-ai-space-6)">
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#styles">Выбрать стиль</a>
|
||
<a class="kt-ai-btn" data-size="lg" href="#decor">Идеи декора</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="styles" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap" data-width="wide">
|
||
<div class="kt-ai-section-head" style="text-align: center;">
|
||
<h2>Популярные стили</h2>
|
||
<p>Выбери направление, которое ближе тебе по настроению</p>
|
||
</div>
|
||
<div class="style-grid">
|
||
<div class="style-card reveal"><img src="https://images.unsplash.com/photo-1595514020180-8c240562a585?w=600&q=80" alt="Минимализм"><div class="style-card-content"><h3>Нежный минимализм</h3><p style="color: var(--kt-ai-fg-muted); margin-top: var(--kt-ai-space-2)">Светлые тона, простые формы, максимум пространства и света</p><div class="color-palette"><div class="color-swatch" style="background: #FFF5F7;"></div><div class="color-swatch" style="background: #F5E6E8;"></div><div class="color-swatch" style="background: #E8D5D5;"></div><div class="color-swatch" style="background: #D4A5A5;"></div></div></div></div>
|
||
<div class="style-card reveal"><img src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=600&q=80" alt="Скандинавский"><div class="style-card-content"><h3>Скандинавский уют</h3><p style="color: var(--kt-ai-fg-muted); margin-top: var(--kt-ai-space-2)">Натуральное дерево, текстиль, зелёные растения</p><div class="color-palette"><div class="color-swatch" style="background: #FAFAFA;"></div><div class="color-swatch" style="background: #E8D5B5;"></div><div class="color-swatch" style="background: #B5D5C5;"></div><div class="color-swatch" style="background: #87A895;"></div></div></div></div>
|
||
<div class="style-card reveal"><img src="https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?w=600&q=80" alt="Шебби-шик"><div class="style-card-content"><h3>Романтичный шебби-шик</h3><p style="color: var(--kt-ai-fg-muted); margin-top: var(--kt-ai-space-2)">Винтажная мебель, цветочные узоры, пастельные оттенки</p><div class="color-palette"><div class="color-swatch" style="background: #FFE4E1;"></div><div class="color-swatch" style="background: #FFB6C1;"></div><div class="color-swatch" style="background: #DDA0DD;"></div><div class="color-swatch" style="background: #98D8C8;"></div></div></div></div>
|
||
<div class="style-card reveal"><img src="https://images.unsplash.com/photo-1513519245088-0e12902e5a38?w=600&q=80" alt="Бохо"><div class="style-card-content"><h3>Современный бохо</h3><p style="color: var(--kt-ai-fg-muted); margin-top: var(--kt-ai-space-2)">Этнические узоры, макраме, много текстур и растений</p><div class="color-palette"><div class="color-swatch" style="background: #FDF5E6;"></div><div class="color-swatch" style="background: #D2691E;"></div><div class="color-swatch" style="background: #CD853F;"></div><div class="color-swatch" style="background: #556B2F;"></div></div></div></div>
|
||
<div class="style-card reveal"><img src="https://images.unsplash.com/photo-1507089947368-19c1da9775ae?w=600&q=80" alt="Классика"><div class="style-card-content"><h3>Современная классика</h3><p style="color: var(--kt-ai-fg-muted); margin-top: var(--kt-ai-space-2)">Элегантные линии, зеркала, хрустальные светильники</p><div class="color-palette"><div class="color-swatch" style="background: #F8F8FF;"></div><div class="color-swatch" style="background: #E6E6FA;"></div><div class="color-swatch" style="background: #D8BFD8;"></div><div class="color-swatch" style="background: #9370DB;"></div></div></div></div>
|
||
<div class="style-card reveal"><img src="https://images.unsplash.com/photo-1534349762230-e0cadf78f5da?w=600&q=80" alt="Эко"><div class="style-card-content"><h3>Эко-стиль</h3><p style="color: var(--kt-ai-fg-muted); margin-top: var(--kt-ai-space-2)">Природные материалы, живые растения, натуральные ткани</p><div class="color-palette"><div class="color-swatch" style="background: #F5F5DC;"></div><div class="color-swatch" style="background: #8FBC8F;"></div><div class="color-swatch" style="background: #556B2F;"></div><div class="color-swatch" style="background: #8B4513;"></div></div></div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="colors" class="kt-ai-section" data-divider="true" style="background: var(--kt-ai-bg-soft);">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Цветовые решения</h2>
|
||
<p>Правильный цвет создаёт настроение комнаты</p>
|
||
</div>
|
||
<div class="kt-ai-grid" style="margin-top: var(--kt-ai-space-9)">
|
||
<article class="kt-ai-tile reveal"><div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#sparkles"></use></svg></div><h3>Пудрово-розовый</h3><p>Нежный, романтичный, визуально расширяет пространство</p><div class="color-palette" style="margin-top: var(--kt-ai-space-3)"><div class="color-swatch" style="background: #FFE4E1;"></div><div class="color-swatch" style="background: #FFB6C1;"></div><div class="color-swatch" style="background: #FF69B4;"></div></div></article>
|
||
<article class="kt-ai-tile reveal"><div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#sun"></use></svg></div><h3>Тёплый бежевый</h3><p>Универсальный, создаёт ощущение уюта и тепла</p><div class="color-palette" style="margin-top: var(--kt-ai-space-3)"><div class="color-swatch" style="background: #F5F5DC;"></div><div class="color-swatch" style="background: #E8D5B5;"></div><div class="color-swatch" style="background: #D2B48C;"></div></div></article>
|
||
<article class="kt-ai-tile reveal"><div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#moon"></use></svg></div><h3>Лавандовый</h3><p>Успокаивающий, способствует расслаблению и отдыху</p><div class="color-palette" style="margin-top: var(--kt-ai-space-3)"><div class="color-swatch" style="background: #E6E6FA;"></div><div class="color-swatch" style="background: #DDA0DD;"></div><div class="color-swatch" style="background: #9370DB;"></div></div></article>
|
||
<article class="kt-ai-tile reveal"><div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#sparkles"></use></svg></div><h3>Мятный</h3><p>Свежий, бодрящий, добавляет лёгкости интерьеру</p><div class="color-palette" style="margin-top: var(--kt-ai-space-3)"><div class="color-swatch" style="background: #F5FFFA;"></div><div class="color-swatch" style="background: #98D8C8;"></div><div class="color-swatch" style="background: #55A895;"></div></div></article>
|
||
</div>
|
||
<div class="tip-card reveal" style="margin-top: var(--kt-ai-space-8)"><div style="display: flex; gap: var(--kt-ai-space-3); align-items: flex-start;"><svg class="kt-icon kt-icon-lg" style="color: var(--kt-ai-primary); margin-top: 4px;"><use href="#lightbulb"></use></svg><div><strong style="color: var(--kt-ai-fg);">Совет дизайнера</strong><p style="color: var(--kt-ai-fg-muted); margin-top: var(--kt-ai-space-1); margin-bottom: 0;">Используй правило 60-30-10: 60% основной цвет (стены), 30% дополнительный (мебель, текстиль), 10% акценты (декор, подушки, картины).</p></div></div></div>
|
||
</div>
|
||
</section>
|
||
<section id="zones" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head" style="text-align: center;">
|
||
<h2>Функциональные зоны</h2>
|
||
<p>Грамотное зонирование сделает комнату удобной</p>
|
||
</div>
|
||
<div class="zone-grid">
|
||
<div class="zone-card reveal"><div class="zone-icon"><svg class="kt-icon kt-icon-lg" style="width: 32px; height: 32px;"><use href="#moon"></use></svg></div><h3>Спальная зона</h3><p style="color: var(--kt-ai-fg-muted);">Кровать или диван с мягким изголовьем, прикроватная тумбочка, торшер</p></div>
|
||
<div class="zone-card reveal"><div class="zone-icon"><svg class="kt-icon kt-icon-lg" style="width: 32px; height: 32px;"><use href="#book"></use></svg></div><h3>Рабочее место</h3><p style="color: var(--kt-ai-fg-muted);">Письменный стол, удобное кресло, органайзеры для канцелярии</p></div>
|
||
<div class="zone-card reveal"><div class="zone-icon"><svg class="kt-icon kt-icon-lg" style="width: 32px; height: 32px;"><use href="#user"></use></svg></div><h3>Зона красоты</h3><p style="color: var(--kt-ai-fg-muted);">Туалетный столик с зеркалом, удобный стул, хранение косметики</p></div>
|
||
<div class="zone-card reveal"><div class="zone-icon"><svg class="kt-icon kt-icon-lg" style="width: 32px; height: 32px;"><use href="#sparkles"></use></svg></div><h3>Зона отдыха</h3><p style="color: var(--kt-ai-fg-muted);">Мягкое кресло или пуф, маленький столик, настольная лампа</p></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="decor" class="kt-ai-cta reveal" style="position: relative; overflow: hidden;">
|
||
<svg class="decorative-flower flower-bl" style="width: 80px; height: 80px; bottom: 20px; left: 20px;" viewBox="0 0 100 100" fill="var(--kt-ai-primary)" opacity="0.2"><circle cx="50" cy="50" r="45"/><circle cx="50" cy="15" r="11"/><circle cx="85" cy="50" r="11"/><circle cx="50" cy="85" r="11"/><circle cx="15" cy="50" r="11"/></svg>
|
||
<svg class="decorative-flower flower-br" style="width: 80px; height: 80px; bottom: 20px; right: 20px;" viewBox="0 0 100 100" fill="var(--kt-ai-primary)" opacity="0.2"><circle cx="50" cy="50" r="45"/><circle cx="50" cy="15" r="11"/><circle cx="85" cy="50" r="11"/><circle cx="50" cy="85" r="11"/><circle cx="15" cy="50" r="11"/></svg>
|
||
<div class="kt-ai-wrap" data-width="narrow" style="position: relative; z-index: 1;">
|
||
<h2>Идеи декора</h2>
|
||
<p style="font-size: var(--kt-ai-text-lg); margin: var(--kt-ai-space-4) 0;">Маленькие детали создают большой уют</p>
|
||
<div class="kt-ai-grid" style="margin-top: var(--kt-ai-space-6)">
|
||
<article class="kt-ai-tile" style="background: var(--kt-ai-bg-soft);"><div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#sparkles"></use></svg></div><h3>Текстиль</h3><p>Декоративные подушки, пледы, ковры с высоким ворсом, шторы</p></article>
|
||
<article class="kt-ai-tile" style="background: var(--kt-ai-bg-soft);"><div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#lightbulb"></use></svg></div><h3>Освещение</h3><p>Гирлянды, светодиодные ленты, настольные лампы, свечи</p></article>
|
||
<article class="kt-ai-tile" style="background: var(--kt-ai-bg-soft);"><div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#book"></use></svg></div><h3>Стены</h3><p>Постеры, фотографии в рамках, зеркала, настенные часы</p></article>
|
||
<article class="kt-ai-tile" style="background: var(--kt-ai-bg-soft);"><div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#sparkles"></use></svg></div><h3>Растения</h3><p>Комнатные цветы в красивых кашпо, флорариумы, суккуленты</p></article>
|
||
<article class="kt-ai-tile" style="background: var(--kt-ai-bg-soft);"><div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#palette"></use></svg></div><h3>Аксессуары</h3><p>Шкатулки, вазы, статуэтки, декоративные коробки для хранения</p></article>
|
||
<article class="kt-ai-tile" style="background: var(--kt-ai-bg-soft);"><div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#calendar"></use></svg></div><h3>Организация</h3><p>Красивые корзины, органайзеры, рейлы для одежды</p></article>
|
||
</div>
|
||
<div style="margin-top: var(--kt-ai-space-8); text-align: center;"><div class="tip-card" style="display: inline-block; max-width: 500px;"><div style="display: flex; gap: var(--kt-ai-space-3); align-items: flex-start;"><svg class="kt-icon kt-icon-lg" style="color: var(--kt-ai-primary); margin-top: 4px;"><use href="#heart"></use></svg><div style="text-align: left;"><strong style="color: var(--kt-ai-fg);">Главное правило</strong><p style="color: var(--kt-ai-fg-muted); margin-top: var(--kt-ai-space-1); margin-bottom: 0;">Твоя комната должна отражать твою личность! Не бойся экспериментировать и добавлять вещи, которые приносят тебе радость.</p></div></div></div></div>
|
||
</div>
|
||
</section>
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 Дизайн интерьера</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>Создано с любовью 🌸</span>
|
||
</footer>
|
||
<script>
|
||
var io = new IntersectionObserver(function(entries) { entries.forEach(function(e) { if(e.isIntersecting) e.target.classList.add('in'); }); }, { threshold: 0.15 });
|
||
document.querySelectorAll('.reveal').forEach(function(el) { io.observe(el); });
|
||
document.querySelectorAll('.style-card').forEach(function(card) { card.addEventListener('click', function() { alert('Вы выбрали стиль: ' + this.querySelector('h3').textContent + '! Отличный выбор! 🌸'); }); });
|
||
</script>
|
||
</body>
|
||
</html>
|