interior design site for girls room with styles, colors, zones and decor ideas
This commit is contained in:
parent
16f1bd0ff3
commit
0cbfc712e3
346
index.html
346
index.html
@ -1,9 +1,10 @@
|
|||||||
|
<!-- no-design-system -->
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="ru" data-theme="auto">
|
<html lang="ru" data-theme="auto">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
<title>Приглашение на свадьбу</title>
|
<title>Дизайн комнаты для девушки</title>
|
||||||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
<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-tokens.css">
|
||||||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||||||
@ -11,310 +12,127 @@
|
|||||||
<link rel="icon" href="design-system/brand/kt-ai-logo.png">
|
<link rel="icon" href="design-system/brand/kt-ai-logo.png">
|
||||||
<style>
|
<style>
|
||||||
a.kt-ai-btn { text-decoration: none; }
|
a.kt-ai-btn { text-decoration: none; }
|
||||||
.wedding-hero {
|
.hero-interior {
|
||||||
background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,192,203,0.85)), url('https://images.unsplash.com/photo-1490750967868-58cb75063ed4?w=1920&q=80') center/cover fixed;
|
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;
|
padding: var(--kt-ai-space-12) 0;
|
||||||
min-height: 90vh;
|
min-height: 80vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.wedding-hero::before {
|
.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); }
|
||||||
content: '';
|
.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; }
|
||||||
position: absolute;
|
.style-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px rgba(255,182,193,0.3); }
|
||||||
top: 0;
|
.style-card img { width: 100%; height: 280px; object-fit: cover; }
|
||||||
left: 0;
|
.style-card-content { padding: var(--kt-ai-space-5); }
|
||||||
right: 0;
|
.color-palette { display: flex; gap: var(--kt-ai-space-2); margin-top: var(--kt-ai-space-3); }
|
||||||
bottom: 0;
|
.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); }
|
||||||
background: radial-gradient(circle at 20% 30%, rgba(255,182,193,0.15) 0%, transparent 40%),
|
.decorative-flower { position: absolute; width: 100px; height: 100px; opacity: 0.7; pointer-events: none; }
|
||||||
radial-gradient(circle at 80% 70%, rgba(255,105,180,0.12) 0%, transparent 40%);
|
.flower-tl { top: -30px; left: -30px; } .flower-tr { top: -30px; right: -30px; }
|
||||||
pointer-events: none;
|
.flower-bl { bottom: -30px; left: -30px; } .flower-br { bottom: -30px; right: -30px; }
|
||||||
}
|
|
||||||
.flower-decoration {
|
|
||||||
position: absolute;
|
|
||||||
width: 120px;
|
|
||||||
height: 120px;
|
|
||||||
opacity: 0.8;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.flower-top-left { top: -40px; left: -40px; transform: rotate(-15deg); }
|
|
||||||
.flower-top-right { top: -40px; right: -40px; transform: rotate(15deg); }
|
|
||||||
.flower-bottom-left { bottom: -40px; left: -40px; transform: rotate(15deg); }
|
|
||||||
.flower-bottom-right { bottom: -40px; right: -40px; transform: rotate(-15deg); }
|
|
||||||
body {
|
|
||||||
background: linear-gradient(180deg, rgba(255,240,245,0.8) 0%, rgba(255,192,203,0.6) 50%, rgba(255,228,225,0.8) 100%);
|
|
||||||
}
|
|
||||||
.flower-divider {
|
|
||||||
text-align: center;
|
|
||||||
margin: var(--kt-ai-space-8) 0;
|
|
||||||
font-size: var(--kt-ai-text-3xl);
|
|
||||||
color: var(--kt-ai-primary);
|
|
||||||
}
|
|
||||||
.couple-photo {
|
|
||||||
border: 4px solid rgba(255,182,193,0.3);
|
|
||||||
box-shadow: 0 20px 40px rgba(255,182,193,0.2);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
.couple-photo {
|
|
||||||
width: 280px;
|
|
||||||
height: 350px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: var(--kt-ai-radius-3xl);
|
|
||||||
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
|
|
||||||
margin: var(--kt-ai-space-6) auto;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.couple-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
||||||
gap: var(--kt-ai-space-8);
|
|
||||||
margin-top: var(--kt-ai-space-9);
|
|
||||||
}
|
|
||||||
.couple-card {
|
|
||||||
text-align: center;
|
|
||||||
padding: var(--kt-ai-space-6);
|
|
||||||
}
|
|
||||||
.wedding-date {
|
|
||||||
font-size: var(--kt-ai-text-3xl);
|
|
||||||
font-weight: var(--kt-ai-weight-bold);
|
|
||||||
color: var(--kt-ai-primary);
|
|
||||||
margin: var(--kt-ai-space-4) 0;
|
|
||||||
}
|
|
||||||
.heart-icon {
|
|
||||||
color: var(--kt-ai-primary);
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
margin: var(--kt-ai-space-4) auto;
|
|
||||||
}
|
|
||||||
.music-control {
|
|
||||||
position: fixed;
|
|
||||||
bottom: var(--kt-ai-space-6);
|
|
||||||
right: var(--kt-ai-space-6);
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
|
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
|
||||||
.reveal.in { opacity: 1; transform: none; }
|
.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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||||||
|
|
||||||
<header class="kt-ai-pagehead">
|
<header class="kt-ai-pagehead">
|
||||||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||||||
<strong>Свадьба Али и Зарины</strong>
|
<strong>🌸 Интерьер комнаты</strong>
|
||||||
<span class="kt-ai-spacer"></span>
|
<span class="kt-ai-spacer"></span>
|
||||||
<a class="kt-ai-btn" data-variant="ghost" href="#couple">Жених и невеста</a>
|
<a class="kt-ai-btn" data-variant="ghost" href="#styles">Стили</a>
|
||||||
<a class="kt-ai-btn" data-variant="ghost" href="#details">Детали</a>
|
<a class="kt-ai-btn" data-variant="ghost" href="#colors">Цвета</a>
|
||||||
<a class="kt-ai-btn" data-variant="primary" href="#location">Место</a>
|
<a class="kt-ai-btn" data-variant="ghost" href="#zones">Зоны</a>
|
||||||
|
<a class="kt-ai-btn" data-variant="primary" href="#decor">Декор</a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
<section class="hero-interior kt-ai-hero" data-align="center">
|
||||||
<section class="wedding-hero kt-ai-hero" data-align="center">
|
|
||||||
<div class="kt-ai-wrap" style="position: relative;">
|
<div class="kt-ai-wrap" style="position: relative;">
|
||||||
<svg class="flower-decoration flower-top-left" viewBox="0 0 100 100" fill="none">
|
<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>
|
||||||
<circle cx="50" cy="50" r="45" fill="rgba(255,182,193,0.3)"/>
|
<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>
|
||||||
<circle cx="50" cy="20" r="12" fill="rgba(255,105,180,0.5)"/>
|
<h1>Дизайн комнаты для девушки</h1>
|
||||||
<circle cx="80" cy="50" r="12" fill="rgba(255,105,180,0.5)"/>
|
<p class="kt-ai-hero-sub">Создай уютное пространство, которое отражает твою индивидуальность</p>
|
||||||
<circle cx="50" cy="80" r="12" fill="rgba(255,105,180,0.5)"/>
|
<div class="kt-ai-hero-actions" style="margin-top: var(--kt-ai-space-6)">
|
||||||
<circle cx="20" cy="50" r="12" fill="rgba(255,105,180,0.5)"/>
|
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#styles">Выбрать стиль</a>
|
||||||
<circle cx="50" cy="50" r="15" fill="rgba(255,255,255,0.8)"/>
|
<a class="kt-ai-btn" data-size="lg" href="#decor">Идеи декора</a>
|
||||||
</svg>
|
|
||||||
<svg class="flower-decoration flower-top-right" viewBox="0 0 100 100" fill="none">
|
|
||||||
<circle cx="50" cy="50" r="45" fill="rgba(255,182,193,0.3)"/>
|
|
||||||
<circle cx="50" cy="20" r="12" fill="rgba(255,105,180,0.5)"/>
|
|
||||||
<circle cx="80" cy="50" r="12" fill="rgba(255,105,180,0.5)"/>
|
|
||||||
<circle cx="50" cy="80" r="12" fill="rgba(255,105,180,0.5)"/>
|
|
||||||
<circle cx="20" cy="50" r="12" fill="rgba(255,105,180,0.5)"/>
|
|
||||||
<circle cx="50" cy="50" r="15" fill="rgba(255,255,255,0.8)"/>
|
|
||||||
</svg>
|
|
||||||
<h1>Приглашаем на нашу свадьбу!</h1>
|
|
||||||
<p class="kt-ai-hero-sub" style="margin-top: var(--kt-ai-space-3)">Али и Зарина</p>
|
|
||||||
<p class="kt-ai-hero-sub">Дорогие друзья и родные! Приглашаем вас разделить с нами этот особенный день</p>
|
|
||||||
<div class="wedding-date">
|
|
||||||
<svg class="kt-icon kt-icon-lg" style="vertical-align: middle; margin-right: 8px;"><use href="#calendar"></use></svg>
|
|
||||||
15 Сентября 2026
|
|
||||||
<svg class="kt-icon kt-icon-lg" style="vertical-align: middle; margin-left: 8px;"><use href="#clock"></use></svg>
|
|
||||||
</div>
|
</div>
|
||||||
<p style="font-size: var(--kt-ai-text-xl); color: var(--kt-ai-fg-muted); margin-top: var(--kt-ai-space-2)">
|
|
||||||
15:00
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<section id="styles" class="kt-ai-section" data-divider="true">
|
||||||
<section id="couple" class="kt-ai-section" data-divider="true" style="background: linear-gradient(135deg, rgba(255,182,193,0.15), rgba(255,255,255,0.1));">
|
|
||||||
<div class="kt-ai-wrap" data-width="wide">
|
<div class="kt-ai-wrap" data-width="wide">
|
||||||
<div class="kt-ai-section-head" style="text-align: center;">
|
<div class="kt-ai-section-head" style="text-align: center;">
|
||||||
<h2>Жених и Невеста</h2>
|
<h2>Популярные стили</h2>
|
||||||
<p>Мы очень ждем этого дня и хотим разделить его с вами</p>
|
<p>Выбери направление, которое ближе тебе по настроению</p>
|
||||||
</div>
|
|
||||||
<div class="couple-grid">
|
|
||||||
<div class="couple-card reveal" style="position: relative;">
|
|
||||||
<svg class="flower-decoration flower-top-left" style="width: 80px; height: 80px; top: -20px; left: -20px;" viewBox="0 0 100 100" fill="none">
|
|
||||||
<circle cx="50" cy="50" r="40" fill="rgba(255,182,193,0.25)"/>
|
|
||||||
<circle cx="50" cy="15" r="10" fill="rgba(255,105,180,0.4)"/>
|
|
||||||
<circle cx="85" cy="50" r="10" fill="rgba(255,105,180,0.4)"/>
|
|
||||||
<circle cx="50" cy="85" r="10" fill="rgba(255,105,180,0.4)"/>
|
|
||||||
<circle cx="15" cy="50" r="10" fill="rgba(255,105,180,0.4)"/>
|
|
||||||
<circle cx="50" cy="50" r="12" fill="rgba(255,255,255,0.7)"/>
|
|
||||||
</svg>
|
|
||||||
<img src="https://loremflickr.com/400/500/groom,suit" alt="Жених" class="couple-photo">
|
|
||||||
<h3>Али</h3>
|
|
||||||
<p style="color: var(--kt-ai-fg-muted)">Жених</p>
|
|
||||||
</div>
|
|
||||||
<div class="reveal" style="display: flex; align-items: center; justify-content: center; flex-direction: column;">
|
|
||||||
<svg class="heart-icon"><use href="#sparkles"></use></svg>
|
|
||||||
<div class="flower-divider">
|
|
||||||
<svg class="kt-icon" style="width: 24px; height: 24px;"><use href="#sparkles"></use></svg>
|
|
||||||
<svg class="kt-icon" style="width: 24px; height: 24px; margin: 0 8px;"><use href="#sparkles"></use></svg>
|
|
||||||
<svg class="kt-icon" style="width: 24px; height: 24px;"><use href="#sparkles"></use></svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="couple-card reveal" style="position: relative;">
|
|
||||||
<svg class="flower-decoration flower-top-right" style="width: 80px; height: 80px; top: -20px; right: -20px;" viewBox="0 0 100 100" fill="none">
|
|
||||||
<circle cx="50" cy="50" r="40" fill="rgba(255,182,193,0.25)"/>
|
|
||||||
<circle cx="50" cy="15" r="10" fill="rgba(255,105,180,0.4)"/>
|
|
||||||
<circle cx="85" cy="50" r="10" fill="rgba(255,105,180,0.4)"/>
|
|
||||||
<circle cx="50" cy="85" r="10" fill="rgba(255,105,180,0.4)"/>
|
|
||||||
<circle cx="15" cy="50" r="10" fill="rgba(255,105,180,0.4)"/>
|
|
||||||
<circle cx="50" cy="50" r="12" fill="rgba(255,255,255,0.7)"/>
|
|
||||||
</svg>
|
|
||||||
<img src="https://loremflickr.com/400/500/bride,wedding" alt="Невеста" class="couple-photo">
|
|
||||||
<h3>Зарина</h3>
|
|
||||||
<p style="color: var(--kt-ai-fg-muted)">Невеста</p>
|
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<section id="colors" class="kt-ai-section" data-divider="true" style="background: var(--kt-ai-bg-soft);">
|
||||||
<section id="details" class="kt-ai-section" data-divider="true" style="background: linear-gradient(135deg, rgba(224,242,255,0.7), rgba(240,248,255,0.5));">
|
|
||||||
<div class="kt-ai-wrap">
|
<div class="kt-ai-wrap">
|
||||||
<div class="kt-ai-section-head">
|
<div class="kt-ai-section-head">
|
||||||
<h2>Детали события</h2>
|
<h2>Цветовые решения</h2>
|
||||||
<p>Важная информация для гостей</p>
|
<p>Правильный цвет создаёт настроение комнаты</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="kt-ai-grid" style="margin-top: var(--kt-ai-space-9)">
|
<div class="kt-ai-grid" style="margin-top: var(--kt-ai-space-9)">
|
||||||
<article class="kt-ai-tile reveal">
|
<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>
|
||||||
<div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#calendar"></use></svg></div>
|
<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>
|
||||||
<h3>Дата и время</h3>
|
<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>
|
||||||
<p>15 Сентября 2026, 15:00<br>Сбор гостей в 14:30</p>
|
<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>
|
||||||
</article>
|
</div>
|
||||||
<article class="kt-ai-tile reveal">
|
<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 class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#calendar"></use></svg></div>
|
</div>
|
||||||
<h3>Дресс-код</h3>
|
</section>
|
||||||
<p>Праздничный<br>Пастельные тона приветствуются</p>
|
<section id="zones" class="kt-ai-section" data-divider="true">
|
||||||
</article>
|
<div class="kt-ai-wrap">
|
||||||
<article class="kt-ai-tile reveal">
|
<div class="kt-ai-section-head" style="text-align: center;">
|
||||||
<div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#sparkles"></use></svg></div>
|
<h2>Функциональные зоны</h2>
|
||||||
<h3>Программа</h3>
|
<p>Грамотное зонирование сделает комнату удобной</p>
|
||||||
<p>Церемония, банкет, танцы<br>До позднего вечера</p>
|
</div>
|
||||||
</article>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<section id="decor" class="kt-ai-cta reveal" style="position: relative; overflow: hidden;">
|
||||||
<section id="location" 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="flower-decoration flower-bottom-left" style="width: 100px; height: 100px; bottom: 20px; left: 20px;" viewBox="0 0 100 100" fill="none">
|
<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>
|
||||||
<circle cx="50" cy="50" r="45" fill="rgba(255,182,193,0.2)"/>
|
|
||||||
<circle cx="50" cy="15" r="11" fill="rgba(255,105,180,0.35)"/>
|
|
||||||
<circle cx="85" cy="50" r="11" fill="rgba(255,105,180,0.35)"/>
|
|
||||||
<circle cx="50" cy="85" r="11" fill="rgba(255,105,180,0.35)"/>
|
|
||||||
<circle cx="15" cy="50" r="11" fill="rgba(255,105,180,0.35)"/>
|
|
||||||
<circle cx="50" cy="50" r="14" fill="rgba(255,255,255,0.6)"/>
|
|
||||||
</svg>
|
|
||||||
<svg class="flower-decoration flower-bottom-right" style="width: 100px; height: 100px; bottom: 20px; right: 20px;" viewBox="0 0 100 100" fill="none">
|
|
||||||
<circle cx="50" cy="50" r="45" fill="rgba(255,182,193,0.2)"/>
|
|
||||||
<circle cx="50" cy="15" r="11" fill="rgba(255,105,180,0.35)"/>
|
|
||||||
<circle cx="85" cy="50" r="11" fill="rgba(255,105,180,0.35)"/>
|
|
||||||
<circle cx="50" cy="85" r="11" fill="rgba(255,105,180,0.35)"/>
|
|
||||||
<circle cx="15" cy="50" r="11" fill="rgba(255,105,180,0.35)"/>
|
|
||||||
<circle cx="50" cy="50" r="14" fill="rgba(255,255,255,0.6)"/>
|
|
||||||
</svg>
|
|
||||||
<div class="kt-ai-wrap" data-width="narrow" style="position: relative; z-index: 1;">
|
<div class="kt-ai-wrap" data-width="narrow" style="position: relative; z-index: 1;">
|
||||||
<h2>Место проведения</h2>
|
<h2>Идеи декора</h2>
|
||||||
<p style="font-size: var(--kt-ai-text-xl); margin: var(--kt-ai-space-4) 0;">
|
<p style="font-size: var(--kt-ai-text-lg); margin: var(--kt-ai-space-4) 0;">Маленькие детали создают большой уют</p>
|
||||||
Ресторан «Астана»<br>
|
<div class="kt-ai-grid" style="margin-top: var(--kt-ai-space-6)">
|
||||||
ул. Абая 123, Алматы
|
<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>
|
||||||
</p>
|
<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>
|
||||||
<div style="margin: var(--kt-ai-space-6) 0;">
|
<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>
|
||||||
<iframe
|
<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>
|
||||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2906.9!2d76.9!3d43.25!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDPCsDE1JzAwLjAiTiA3NsKwNTQnMDAuMCJF!5e0!3m2!1sru!2skz!4v1234567890"
|
<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>
|
||||||
width="100%"
|
<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>
|
||||||
height="360"
|
|
||||||
style="border:0; border-radius: var(--kt-ai-radius-3xl)"
|
|
||||||
loading="lazy">
|
|
||||||
</iframe>
|
|
||||||
</div>
|
|
||||||
<div style="display: flex; gap: var(--kt-ai-space-4); justify-content: center; flex-wrap: wrap;">
|
|
||||||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="https://yandex.kz/maps/?text=Ресторан+Астана+Алматы+ул.+Абая+123" target="_blank">
|
|
||||||
<svg class="kt-icon" style="vertical-align: middle; margin-right: 6px;"><use href="#external"></use></svg>
|
|
||||||
Показать на карте
|
|
||||||
</a>
|
|
||||||
<a class="kt-ai-btn" data-size="lg" href="https://go.2gis.com/Almaty" target="_blank">
|
|
||||||
<svg class="kt-icon" style="vertical-align: middle; margin-right: 6px;"><use href="#external"></use></svg>
|
|
||||||
2GIS
|
|
||||||
</a>
|
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||||||
<span>© 2026 Али и Зарина</span>
|
<span>© 2026 Дизайн интерьера</span>
|
||||||
<span class="kt-ai-spacer"></span>
|
<span class="kt-ai-spacer"></span>
|
||||||
<span>С любовью приглашаем</span>
|
<span>Создано с любовью 🌸</span>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<!-- Музыкальное сопровождение -->
|
|
||||||
<audio id="wedding-music" loop>
|
|
||||||
<source src="https://cdn.pixabay.com/download/audio/2022/10/25/audio_22a8f1772e.mp3?filename=romantic-piano-110747.mp3" type="audio/mpeg">
|
|
||||||
</audio>
|
|
||||||
|
|
||||||
<button class="kt-ai-btn music-control" data-variant="primary" id="music-toggle" title="Включить музыку">
|
|
||||||
<svg class="kt-icon"><use href="#play"></use></svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Плавное появление при скролле
|
var io = new IntersectionObserver(function(entries) { entries.forEach(function(e) { if(e.isIntersecting) e.target.classList.add('in'); }); }, { threshold: 0.15 });
|
||||||
var io = new IntersectionObserver(function(entries) {
|
document.querySelectorAll('.reveal').forEach(function(el) { io.observe(el); });
|
||||||
entries.forEach(function(e) {
|
document.querySelectorAll('.style-card').forEach(function(card) { card.addEventListener('click', function() { alert('Вы выбрали стиль: ' + this.querySelector('h3').textContent + '! Отличный выбор! 🌸'); }); });
|
||||||
if(e.isIntersecting) e.target.classList.add('in');
|
|
||||||
});
|
|
||||||
}, { threshold: 0.15 });
|
|
||||||
|
|
||||||
document.querySelectorAll('.reveal').forEach(function(el) {
|
|
||||||
io.observe(el);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Управление музыкой
|
|
||||||
var music = document.getElementById('wedding-music');
|
|
||||||
var musicBtn = document.getElementById('music-toggle');
|
|
||||||
var isPlaying = false;
|
|
||||||
|
|
||||||
music.volume = 0.4;
|
|
||||||
|
|
||||||
musicBtn.addEventListener('click', function() {
|
|
||||||
if (isPlaying) {
|
|
||||||
music.pause();
|
|
||||||
musicBtn.innerHTML = '<svg class="kt-icon"><use href="#play"></use></svg>';
|
|
||||||
} else {
|
|
||||||
music.play().catch(function(e) {
|
|
||||||
console.log('Автовоспроизведение заблокировано браузером');
|
|
||||||
});
|
|
||||||
musicBtn.innerHTML = '<svg class="kt-icon"><use href="#alert"></use></svg>';
|
|
||||||
}
|
|
||||||
isPlaying = !isPlaying;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Попытка автовоспроизведения при первом клике на странице
|
|
||||||
document.addEventListener('click', function() {
|
|
||||||
if (!isPlaying && music.paused) {
|
|
||||||
music.play().then(function() {
|
|
||||||
isPlaying = true;
|
|
||||||
musicBtn.innerHTML = '<svg class="kt-icon"><use href="#alert"></use></svg>';
|
|
||||||
}).catch(function(e) {});
|
|
||||||
}
|
|
||||||
}, { once: true });
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user