321 lines
14 KiB
HTML
321 lines
14 KiB
HTML
<!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; }
|
||
.wedding-hero {
|
||
background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,240,245,0.9)), url('https://images.unsplash.com/photo-1519225421980-715cb0202128?w=1920&q=80') center/cover fixed;
|
||
padding: var(--kt-ai-space-12) 0;
|
||
min-height: 90vh;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
.wedding-hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: radial-gradient(circle at 20% 30%, rgba(255,182,193,0.15) 0%, transparent 40%),
|
||
radial-gradient(circle at 80% 70%, rgba(255,105,180,0.12) 0%, transparent 40%);
|
||
pointer-events: none;
|
||
}
|
||
.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, var(--kt-ai-bg-soft) 0%, var(--kt-ai-bg) 50%, var(--kt-ai-bg-soft) 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.in { opacity: 1; transform: none; }
|
||
</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="#couple">Жених и невеста</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#details">Детали</a>
|
||
<a class="kt-ai-btn" data-variant="primary" href="#location">Место</a>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="wedding-hero kt-ai-hero" data-align="center">
|
||
<div class="kt-ai-wrap" style="position: relative;">
|
||
<svg class="flower-decoration flower-top-left" 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>
|
||
<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>
|
||
<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>
|
||
</section>
|
||
|
||
<section id="couple" class="kt-ai-section" data-divider="true" style="background: linear-gradient(135deg, rgba(255,182,193,0.08), rgba(255,255,255,0.05));">
|
||
<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="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>
|
||
</section>
|
||
|
||
<section id="details" class="kt-ai-section" data-divider="true">
|
||
<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="#calendar"></use></svg></div>
|
||
<h3>Дата и время</h3>
|
||
<p>15 Сентября 2026, 15:00<br>Сбор гостей в 14:30</p>
|
||
</article>
|
||
<article class="kt-ai-tile reveal">
|
||
<div class="kt-ai-tile-icon"><svg class="kt-icon kt-icon-lg"><use href="#calendar"></use></svg></div>
|
||
<h3>Дресс-код</h3>
|
||
<p>Праздничный<br>Пастельные тона приветствуются</p>
|
||
</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>Церемония, банкет, танцы<br>До позднего вечера</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="location" class="kt-ai-cta reveal" style="position: relative; overflow: hidden;">
|
||
<svg class="flower-decoration flower-bottom-left" style="width: 100px; height: 100px; bottom: 20px; left: 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>
|
||
<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;">
|
||
<h2>Место проведения</h2>
|
||
<p style="font-size: var(--kt-ai-text-xl); margin: var(--kt-ai-space-4) 0;">
|
||
Ресторан «Астана»<br>
|
||
ул. Абая 123, Алматы
|
||
</p>
|
||
<div style="margin: var(--kt-ai-space-6) 0;">
|
||
<iframe
|
||
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"
|
||
width="100%"
|
||
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>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 Али и Зарина</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>С любовью приглашаем</span>
|
||
</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>
|
||
// Плавное появление при скролле
|
||
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);
|
||
});
|
||
|
||
// Управление музыкой
|
||
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>
|
||
|
||
</body>
|
||
</html>
|