148 lines
8.1 KiB
HTML
148 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
||
<!-- Дизайн: Стандартный дизайн. Сохраняй все пять CSS; подробности в design.md. -->
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Приглашение на свадьбу — 1 ноября</title>
|
||
<meta name="description" content="Приглашение на свадьбу: 1 ноября, ресторан «Хан Шатır». Подтвердите, пожалуйста, ваше присутствие.">
|
||
<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="stylesheet" href="design-system/vibe-theme.css">
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
<style>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
.kt-ai-invite-date { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--kt-ai-fg-muted); margin-bottom: var(--kt-ai-space-4); display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
|
||
.kt-ai-invite-date b { font-size: 15px; color: var(--kt-ai-fg); text-transform: none; letter-spacing: 0; }
|
||
.kt-ai-invite-names { display: flex; align-items: center; justify-content: center; gap: var(--kt-ai-space-4); margin-top: var(--kt-ai-space-4); }
|
||
.kt-ai-invite-am { font-size: 120px; line-height: 1; color: var(--vibe-accent); font-weight: 300; }
|
||
.kt-ai-hero-name { font-size: clamp(40px, 7vw, 72px); font-weight: 400; letter-spacing: -.035em; }
|
||
.kt-ai-countdown { display: flex; gap: var(--kt-ai-space-3); justify-content: center; margin-top: var(--kt-ai-space-8); flex-wrap: wrap; }
|
||
.kt-ai-cd-cell { min-width: 72px; text-align: center; border: 1px solid var(--kt-ai-border); border-radius: 10px; background: var(--kt-ai-card-bg); padding: 12px 10px; }
|
||
.kt-ai-cd-num { font-size: 26px; font-variant-numeric: tabular-nums; color: var(--kt-ai-fg); }
|
||
.kt-ai-cd-lab { font-size: 11px; color: var(--kt-ai-fg-muted); margin-top: 4px; }
|
||
.kt-ai-form-card { max-width: 460px; margin: 0 auto; padding: var(--kt-ai-space-8); }
|
||
.kt-ai-form-card .kt-ai-field { margin-bottom: var(--kt-ai-space-4); }
|
||
.kt-ai-form-card .kt-ai-btn { width: 100%; }
|
||
.kt-ai-form-msg { margin-top: var(--kt-ai-space-4); text-align: center; font-size: 14px; color: var(--kt-ai-fg-muted); min-height: 20px; }
|
||
.kt-ai-detail-icon span { display: inline-flex; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<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="primary" href="#rsvp">Подтвердить</a>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="kt-ai-hero" data-align="center">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-invite-date">
|
||
<span class="kt-ai-chip">Приглашение</span>
|
||
<span>суббота</span>
|
||
<b>1 ноября 2026</b>
|
||
</div>
|
||
<h1 class="kt-ai-invite-names">
|
||
<span class="kt-ai-hero-name">Айсулу</span>
|
||
<span class="kt-ai-invite-am"> и </span>
|
||
<span class="kt-ai-hero-name">Ержан</span>
|
||
</h1>
|
||
<p class="kt-ai-hero-sub">просят вас разделить с ними этот день — банкет начнётся в 16:00.</p>
|
||
<div class="kt-ai-countdown" id="countdown"></div>
|
||
<div class="kt-ai-hero-actions" style="margin-top:var(--kt-ai-space-8)">
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#rsvp">Подтвердить визит</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" data-size="lg" href="#details">Подробнее</a>
|
||
</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" data-cols="3" style="margin-top:var(--kt-ai-space-9)">
|
||
<article class="kt-ai-tile">
|
||
<div class="kt-ai-detail-icon kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#pin"></use></svg></div>
|
||
<h3>Ресторан «Хан Шатır»</h3>
|
||
<p>Укажите полный адрес и карту, как только уточните — например, «г. Алматы, ул. ТОО «Хан», 5», с парковкой у входа.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<div class="kt-ai-detail-icon kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#clock"></use></svg></div>
|
||
<h3>16:00 — банкет</h3>
|
||
<p>Прошу не опаздывать: торжественная часть проходит до 18:00, банкет до 23:00.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<div class="kt-ai-detail-icon kt-ai-tile-icon"><svg style="width:18px;height:18px"><svg class="kt-icon" aria-hidden="true"><use href="#users"></use></svg></div>
|
||
<h3>Дресс-код</h3>
|
||
<p>Смарт-кэжуал / вечерний. Приходите в удобной обуви — будет танцевать.</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="rsvp" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap" data-width="narrow">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Подтвердите визит</h2>
|
||
<p>До 25 октября, пожалуйста — ресторану нужно знать точное количество гостей.</p>
|
||
</div>
|
||
<div class="kt-ai-card kt-ai-form-card" style="margin-top:var(--kt-ai-space-7)">
|
||
<form id="rsvp-form">
|
||
<div class="kt-ai-field">
|
||
<label for="r-name">Имя (и фамилия, если удобно)</label>
|
||
<input class="kt-ai-input" id="r-name" name="name" type="text" required placeholder="Айгерим Сериккызы">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="r-guests">Вы и ещё сколько гостей?</label>
|
||
<select class="kt-ai-select" id="r-guests" name="guests">
|
||
<option value="1">1 — я</option>
|
||
<option value="2">Мы вдвоём (2)</option>
|
||
<option value="3">Мы и ещё кто-то (3)</option>
|
||
<option value="4">4 человека</option>
|
||
<option value="5">5 человек</option>
|
||
<option value="6">6 человек</option>
|
||
</select>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="r-attendance">Сможете ли вы прийти?</label>
|
||
<select class="kt-ai-select" id="r-attendance" name="attendance">
|
||
<option value="yes">Да, с радостью приду</option>
|
||
<option value="no">К сожалению, не смогу</option>
|
||
</select>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="r-note">Комментарий (необязательно)</label>
|
||
<textarea class="kt-ai-textarea" id="r-note" name="note" rows="2" placeholder="Аллергии, пожелания по столу, любимая песня на танцах…"></textarea>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" data-size="lg" type="submit">Отправить</button>
|
||
<p class="kt-ai-form-msg" id="rsvp-msg"></p>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="kt-ai-cta">
|
||
<div class="kt-ai-wrap">
|
||
<h2>Ждём вас 1 ноября!</h2>
|
||
<p>Если появятся вопросы — напишите: +7 700 000 00 00 (организатор). До встречи!</p>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>1 ноября 2026 · ресторан «Хан Шатır»</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>С любовью</span>
|
||
</footer>
|
||
|
||
<script src="script.js"></script>
|
||
|
||
</body>
|
||
</html>
|