730 lines
30 KiB
HTML
730 lines
30 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Свадьба сына | Приглашение</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||
<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:#1A1A2E;
|
||
--gold:#C9A962;
|
||
--gold-light:#E8D5A3;
|
||
--cream:#FDFBF7;
|
||
--white:#FFFFFF;
|
||
--gray-200:#E8E6E1;
|
||
--gray-500:#8B8882;
|
||
}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:17px/1.7 'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--cream)}
|
||
h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:600}
|
||
.container{max-width:1000px;margin:0 auto;padding:0 24px}
|
||
.hero{
|
||
background:linear-gradient(135deg,var(--ink) 0%,#2D2D44 100%);
|
||
color:var(--white);
|
||
min-height:100vh;
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
text-align:center;
|
||
position:relative;
|
||
overflow:hidden;
|
||
}
|
||
.hero::before{
|
||
content:'';
|
||
position:absolute;
|
||
top:0;left:0;right:0;bottom:0;
|
||
background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C9A962' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||
opacity:0.5;
|
||
}
|
||
.hero-content{position:relative;z-index:1;padding:80px 24px}
|
||
.hero h1{font-size:clamp(42px,8vw,80px);line-height:1.1;margin-bottom:24px;color:var(--gold-light);letter-spacing:2px}
|
||
.hero .subtitle{font-size:clamp(18px,3vw,24px);font-weight:300;color:var(--gray-200);margin-bottom:16px;letter-spacing:3px;text-transform:uppercase}
|
||
.hero .date{font-size:clamp(20px,4vw,28px);color:var(--gold);margin-bottom:40px;font-weight:500}
|
||
.hero .divider{width:80px;height:2px;background:var(--gold);margin:0 auto 40px}
|
||
.btn{
|
||
display:inline-block;
|
||
background:var(--gold);
|
||
color:var(--ink);
|
||
padding:16px 40px;
|
||
border-radius:0;
|
||
font-weight:600;
|
||
text-decoration:none;
|
||
text-transform:uppercase;
|
||
letter-spacing:1px;
|
||
transition:all 0.3s ease;
|
||
border:2px solid var(--gold);
|
||
cursor:pointer;
|
||
font-size:14px;
|
||
}
|
||
.btn:hover{background:transparent;color:var(--gold)}
|
||
.btn-outline{background:transparent;color:var(--gold);border:2px solid var(--gold)}
|
||
.btn-outline:hover{background:var(--gold);color:var(--ink)}
|
||
.section{padding:100px 24px}
|
||
.section h2{font-size:clamp(32px,5vw,48px);text-align:center;margin-bottom:60px;color:var(--ink);position:relative}
|
||
.section h2::after{
|
||
content:'';
|
||
display:block;
|
||
width:60px;
|
||
height:2px;
|
||
background:var(--gold);
|
||
margin:24px auto 0;
|
||
}
|
||
.card{
|
||
background:var(--white);
|
||
border-radius:0;
|
||
padding:40px;
|
||
margin-bottom:24px;
|
||
box-shadow:0 4px 20px rgba(0,0,0,0.06);
|
||
border:1px solid var(--gray-200);
|
||
}
|
||
.budget-summary{
|
||
display:grid;
|
||
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
|
||
gap:24px;
|
||
margin-bottom:40px;
|
||
}
|
||
.summary-item{
|
||
text-align:center;
|
||
padding:32px 24px;
|
||
background:var(--cream);
|
||
border:1px solid var(--gold-light);
|
||
}
|
||
.summary-item .value{font-size:clamp(28px,4vw,40px);font-family:'Cormorant Garamond',serif;font-weight:700;color:var(--gold);margin-bottom:8px}
|
||
.summary-item .label{font-size:14px;color:var(--gray-500);text-transform:uppercase;letter-spacing:1px}
|
||
.budget-item{
|
||
display:grid;
|
||
grid-template-columns:1fr 150px 120px;
|
||
gap:20px;
|
||
align-items:center;
|
||
padding:20px 0;
|
||
border-bottom:1px solid var(--gray-200);
|
||
}
|
||
.budget-item:last-child{border-bottom:none}
|
||
.budget-item label{font-weight:500}
|
||
.budget-item input[type="number"]{
|
||
width:100%;
|
||
padding:12px;
|
||
border:1px solid var(--gray-200);
|
||
font-size:16px;
|
||
font-family:inherit;
|
||
text-align:right;
|
||
}
|
||
.budget-item input[type="number"]:focus{outline:none;border-color:var(--gold)}
|
||
.budget-item .spent{font-size:18px;font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--ink);text-align:right}
|
||
.guest-list{max-height:400px;overflow-y:auto;margin-bottom:30px}
|
||
.guest-item{
|
||
display:flex;
|
||
justify-content:space-between;
|
||
align-items:center;
|
||
padding:16px;
|
||
background:var(--cream);
|
||
margin-bottom:12px;
|
||
border-left:3px solid var(--gold);
|
||
}
|
||
.guest-item .name{font-weight:500}
|
||
.guest-item .status{font-size:13px;padding:4px 12px;border-radius:20px;text-transform:uppercase;letter-spacing:0.5px}
|
||
.status-confirmed{background:#E8F5E9;color:#2E7D32}
|
||
.status-pending{background:#FFF3E0;color:#F57C00}
|
||
.status-declined{background:#FFEBEE;color:#C62828}
|
||
.form-group{margin-bottom:24px}
|
||
.form-group label{display:block;margin-bottom:8px;font-weight:500;font-size:14px;text-transform:uppercase;letter-spacing:1px;color:var(--gray-500)}
|
||
.form-group input,.form-group select,.form-group textarea{
|
||
width:100%;
|
||
padding:14px;
|
||
border:1px solid var(--gray-200);
|
||
font-size:16px;
|
||
font-family:inherit;
|
||
background:var(--white);
|
||
}
|
||
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--gold)}
|
||
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
|
||
.timeline{position:relative;max-width:600px;margin:0 auto}
|
||
.timeline::before{
|
||
content:'';
|
||
position:absolute;
|
||
left:50%;
|
||
transform:translateX(-50%);
|
||
width:2px;
|
||
height:100%;
|
||
background:var(--gold-light);
|
||
}
|
||
.timeline-item{
|
||
display:flex;
|
||
justify-content:flex-end;
|
||
padding-right:50%;
|
||
position:relative;
|
||
margin-bottom:40px;
|
||
}
|
||
.timeline-item:nth-child(even){justify-content:flex-start;padding-right:0;padding-left:50%}
|
||
.timeline-content{
|
||
width:calc(100% - 40px);
|
||
padding:24px;
|
||
background:var(--white);
|
||
box-shadow:0 4px 15px rgba(0,0,0,0.08);
|
||
border:1px solid var(--gray-200);
|
||
}
|
||
.timeline-item:nth-child(odd){text-align:right}
|
||
.timeline-dot{
|
||
position:absolute;
|
||
width:16px;
|
||
height:16px;
|
||
background:var(--gold);
|
||
border-radius:50%;
|
||
top:28px;
|
||
right:-8px;
|
||
border:4px solid var(--white);
|
||
}
|
||
.timeline-item:nth-child(even) .timeline-dot{left:-8px;right:auto}
|
||
.timeline-time{font-size:14px;color:var(--gold);font-weight:600;margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}
|
||
.timeline-title{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;margin-bottom:8px}
|
||
.timeline-desc{font-size:14px;color:var(--gray-500)}
|
||
.details-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:32px}
|
||
.detail-card{text-align:center;padding:32px 24px;background:var(--white);border:1px solid var(--gray-200)}
|
||
.detail-card .icon{font-size:48px;margin-bottom:16px}
|
||
.detail-card h3{font-size:22px;margin-bottom:12px;color:var(--ink)}
|
||
.detail-card p{color:var(--gray-500);line-height:1.8}
|
||
.reveal{opacity:0;transform:translateY(30px);transition:all 0.8s ease}
|
||
.reveal.in{opacity:1;transform:none}
|
||
@media (max-width:768px){
|
||
.budget-item{grid-template-columns:1fr;gap:12px;text-align:left}
|
||
.budget-item input[type="number"]{text-align:left}
|
||
.budget-item .spent{text-align:left}
|
||
.form-row{grid-template-columns:1fr}
|
||
.timeline::before{left:20px}
|
||
.timeline-item,.timeline-item:nth-child(even){padding-left:50px;padding-right:0;justify-content:flex-start}
|
||
.timeline-item:nth-child(odd){text-align:left}
|
||
.timeline-content{width:calc(100% - 20px)}
|
||
.timeline-dot,.timeline-item:nth-child(even) .timeline-dot{left:12px;right:auto}
|
||
.guest-item{flex-direction:column;align-items:flex-start;gap:8px}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Экран входа с паролем -->
|
||
<div id="loginScreen" style="position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#1A1A2E 0%,#2D2D44 100%);z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px">
|
||
<div style="max-width:400px;width:100%;text-align:center">
|
||
<div style="font-size:60px;margin-bottom:24px">💍</div>
|
||
<h1 style="font-family:'Cormorant Garamond',serif;font-size:36px;color:#E8D5A3;margin-bottom:16px">Чингиз & Томирис</h1>
|
||
<p style="color:#8B8882;margin-bottom:32px;line-height:1.6">Свадьба 15 Августа 2027</p>
|
||
<div style="background:rgba(255,255,255,0.05);padding:32px;border-radius:8px;border:1px solid rgba(201,169,98,0.3)">
|
||
<label style="display:block;margin-bottom:12px;color:#E8D5A3;font-size:14px;text-transform:uppercase;letter-spacing:1px">Введите пароль для входа</label>
|
||
<input type="password" id="passwordInput" placeholder="Пароль" style="width:100%;padding:14px;border:1px solid rgba(201,169,98,0.3);background:rgba(255,255,255,0.1);color:#fff;font-size:16px;border-radius:4px;margin-bottom:16px;text-align:center" />
|
||
<button onclick="checkPassword()" class="btn" style="width:100%">Войти</button>
|
||
<p id="errorMsg" style="color:#C62828;margin-top:16px;font-size:14px;display:none">Неверный пароль</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<section class="hero" id="mainContent" style="filter:blur(10px);pointer-events:none;user-select:none">
|
||
<div class="hero-content">
|
||
<p class="subtitle">Приглашение на свадьбу</p>
|
||
<h1>Чингиз & Томирис</h1>
|
||
<div class="divider"></div>
|
||
<p class="date">15 Августа 2027</p>
|
||
<p style="max-width:500px;margin:0 auto 40px;font-size:18px;color:var(--gray-200);font-weight:300">
|
||
Дорогие родные и друзья! Приглашаем вас разделить с нами этот особенный день
|
||
</p>
|
||
<a href="#rsvp" class="btn">Подтвердить присутствие</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="about">
|
||
<div class="container">
|
||
<h2>О свадьбе</h2>
|
||
<div class="card reveal" style="text-align:center;max-width:700px;margin:0 auto">
|
||
<p style="font-size:18px;line-height:2;color:var(--gray-500)">
|
||
Через год состоится самое важное событие в жизни нашего сына. Мы хотим разделить этот прекрасный момент с самыми близкими людьми. Вас ждёт торжественная церемония, праздничный ужин и незабываемый вечер в кругу дорогих гостей.
|
||
</p>
|
||
</div>
|
||
<div class="details-grid" style="margin-top:60px">
|
||
<div class="detail-card reveal">
|
||
<div class="icon">📍</div>
|
||
<h3>Место проведения</h3>
|
||
<p>Ресторан «Шатер»<br>Загородный комплекс</p>
|
||
</div>
|
||
<div class="detail-card reveal">
|
||
<div class="icon">🕐</div>
|
||
<h3>Время</h3>
|
||
<p>Сбор гостей: 17:00<br>Начало: 18:00</p>
|
||
</div>
|
||
<div class="detail-card reveal">
|
||
<div class="icon">👔</div>
|
||
<h3>Дресс-код</h3>
|
||
<p>Вечерний наряд<br>в пастельных тонах</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="timeline" style="background:var(--cream)">
|
||
<div class="container">
|
||
<h2>Программа дня</h2>
|
||
<div class="timeline">
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-time">17:00 - 18:00</div>
|
||
<div class="timeline-title">Сбор гостей</div>
|
||
<div class="timeline-desc">Welcome-зона, лёгкие закуски и напитки</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-time">18:00 - 19:00</div>
|
||
<div class="timeline-title">Торжественная церемония</div>
|
||
<div class="timeline-desc">Регистрация, обмен кольцами, фотосессия</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-time">19:00 - 19:15</div>
|
||
<div class="timeline-title">Первый танец молодожёнов</div>
|
||
<div class="timeline-desc">Открытие банкетной части</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-time">19:15 - 20:00</div>
|
||
<div class="timeline-title">Поздравления: Родственники папы</div>
|
||
<div class="timeline-desc">10 тостов от дядей и тёть</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-time">20:00 - 20:30</div>
|
||
<div class="timeline-title">Поздравления: Родственники мамы</div>
|
||
<div class="timeline-desc">Тосты от дядей и тёть</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-time">20:30 - 20:45</div>
|
||
<div class="timeline-title">🎤 Маржан Арабаева (1-2 песни)</div>
|
||
<div class="timeline-desc">Выступление певицы</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-time">20:45 - 21:00</div>
|
||
<div class="timeline-title">Конкурс №1</div>
|
||
<div class="timeline-desc">Игровая программа для гостей</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-time">21:00 - 21:20</div>
|
||
<div class="timeline-title">Поздравления: Құдалар</div>
|
||
<div class="timeline-desc">Слово предоставляется құдалар</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-time">21:20 - 21:35</div>
|
||
<div class="timeline-title">🎤 Маржан Арабаева (3-я песня)</div>
|
||
<div class="timeline-desc">Выступление певицы</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-time">21:35 - 21:50</div>
|
||
<div class="timeline-title">Конкурс №2</div>
|
||
<div class="timeline-desc">Игровая программа для гостей</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-time">21:50 - 22:10</div>
|
||
<div class="timeline-title">Поздравления: Друзья родителей</div>
|
||
<div class="timeline-desc">Тосты от друзей папы и мамы</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-time">22:10 - 22:25</div>
|
||
<div class="timeline-title">🎤 Маржан Арабаева (4-я песня)</div>
|
||
<div class="timeline-desc">Выступление певицы</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-time">22:25 - 22:40</div>
|
||
<div class="timeline-title">Конкурс №3</div>
|
||
<div class="timeline-desc">Игровая программа для гостей</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-time">22:40 - 23:00</div>
|
||
<div class="timeline-title">Поздравления: Друзья Чингиза</div>
|
||
<div class="timeline-desc">Тосты от друзей жениха</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-time">23:00 - 23:15</div>
|
||
<div class="timeline-title">🎤 Маржан Арабаева (5-я песня)</div>
|
||
<div class="timeline-desc">Финальное выступление</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-time">23:15 - 23:30</div>
|
||
<div class="timeline-title">Конкурс №4</div>
|
||
<div class="timeline-desc">Финальная игровая программа</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-time">23:30 - 00:00</div>
|
||
<div class="timeline-title">Торт и фейерверк</div>
|
||
<div class="timeline-desc">Сладкий финал вечера</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-time">00:00</div>
|
||
<div class="timeline-title">Завершение вечера</div>
|
||
<div class="timeline-desc">Фотосессия и прощальные слова</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="budget">
|
||
<div class="container">
|
||
<h2>Бюджет свадьбы</h2>
|
||
<div class="card reveal">
|
||
<div class="budget-summary">
|
||
<div class="summary-item">
|
||
<div class="value" id="totalBudget">10 000 000</div>
|
||
<div class="label">Общий бюджет</div>
|
||
</div>
|
||
<div class="summary-item">
|
||
<div class="value" id="totalSpent">0</div>
|
||
<div class="label">Запланировано</div>
|
||
</div>
|
||
<div class="summary-item">
|
||
<div class="value" id="remaining" style="color:#2E7D32">10 000 000</div>
|
||
<div class="label">Остаток</div>
|
||
</div>
|
||
<div class="summary-item">
|
||
<div class="value" id="perGuest">0</div>
|
||
<div class="label">На гостя</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="budgetItems">
|
||
<div class="budget-item">
|
||
<label>Ресторан и банкет</label>
|
||
<input type="number" class="budget-input" value="5000000" min="0" step="100000">
|
||
<div class="spent">5 000 000 ₸</div>
|
||
</div>
|
||
<div class="budget-item">
|
||
<label>Фотограф и видео</label>
|
||
<input type="number" class="budget-input" value="800000" min="0" step="50000">
|
||
<div class="spent">800 000 ₸</div>
|
||
</div>
|
||
<div class="budget-item">
|
||
<label>Ведущий и DJ</label>
|
||
<input type="number" class="budget-input" value="500000" min="0" step="50000">
|
||
<div class="spent">500 000 ₸</div>
|
||
</div>
|
||
<div class="budget-item">
|
||
<label>Декор и цветы</label>
|
||
<input type="number" class="budget-input" value="1000000" min="0" step="50000">
|
||
<div class="spent">1 000 000 ₸</div>
|
||
</div>
|
||
<div class="budget-item">
|
||
<label>Платье и костюм</label>
|
||
<input type="number" class="budget-input" value="600000" min="0" step="50000">
|
||
<div class="spent">600 000 ₸</div>
|
||
</div>
|
||
<div class="budget-item">
|
||
<label>Кольца</label>
|
||
<input type="number" class="budget-input" value="400000" min="0" step="50000">
|
||
<div class="spent">400 000 ₸</div>
|
||
</div>
|
||
<div class="budget-item">
|
||
<label>Торт</label>
|
||
<input type="number" class="budget-input" value="150000" min="0" step="10000">
|
||
<div class="spent">150 000 ₸</div>
|
||
</div>
|
||
<div class="budget-item">
|
||
<label>Приглашения</label>
|
||
<input type="number" class="budget-input" value="100000" min="0" step="10000">
|
||
<div class="spent">100 000 ₸</div>
|
||
</div>
|
||
<div class="budget-item">
|
||
<label>Транспорт</label>
|
||
<input type="number" class="budget-input" value="200000" min="0" step="50000">
|
||
<div class="spent">200 000 ₸</div>
|
||
</div>
|
||
<div class="budget-item">
|
||
<label>Прочее</label>
|
||
<input type="number" class="budget-input" value="650000" min="0" step="50000">
|
||
<div class="spent">650 000 ₸</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="guests" style="background:var(--cream)">
|
||
<div class="container">
|
||
<h2>Список гостей</h2>
|
||
<div class="card reveal">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:16px">
|
||
<div>
|
||
<strong id="guestCount">0</strong> из <strong>150</strong> гостей подтвердили
|
||
</div>
|
||
<button class="btn" onclick="addGuestRow()">+ Добавить гостя</button>
|
||
</div>
|
||
<div class="guest-list" id="guestList">
|
||
<div class="guest-item">
|
||
<div>
|
||
<div class="name">Алиев Ержан</div>
|
||
<div style="font-size:13px;color:var(--gray-500)">+7 777 123 4567</div>
|
||
</div>
|
||
<select class="guest-status" onchange="updateGuestCount()">
|
||
<option value="pending">Ожидает</option>
|
||
<option value="confirmed">Подтвердил</option>
|
||
<option value="declined">Отказался</option>
|
||
</select>
|
||
</div>
|
||
<div class="guest-item">
|
||
<div>
|
||
<div class="name">Иванова Мария</div>
|
||
<div style="font-size:13px;color:var(--gray-500)">+7 777 234 5678</div>
|
||
</div>
|
||
<select class="guest-status" onchange="updateGuestCount()">
|
||
<option value="pending">Ожидает</option>
|
||
<option value="confirmed" selected>Подтвердил</option>
|
||
<option value="declined">Отказался</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="rsvp">
|
||
<div class="container">
|
||
<h2>Подтверждение присутствия</h2>
|
||
<div class="card reveal" style="max-width:600px;margin:0 auto">
|
||
<form id="rsvpForm" onsubmit="submitRSVP(event)">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Ваше имя</label>
|
||
<input type="text" name="name" required placeholder="Иванов Иван">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Телефон</label>
|
||
<input type="tel" name="phone" required placeholder="+7 777 123 4567">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Сможете ли присутствовать?</label>
|
||
<select name="status" required>
|
||
<option value="">Выберите...</option>
|
||
<option value="confirmed">С удовольствием приду</option>
|
||
<option value="declined">К сожалению, не смогу</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Будете с парой?</label>
|
||
<select name="plusOne">
|
||
<option value="no">Нет</option>
|
||
<option value="yes">Да</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Предпочтения по еде</label>
|
||
<select name="food">
|
||
<option value="any">Любое</option>
|
||
<option value="meat">Мясо</option>
|
||
<option value="fish">Рыба</option>
|
||
<option value="vegetarian">Вегетарианское</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Пожелания и комментарии</label>
|
||
<textarea name="comments" rows="4" placeholder="Аллергии, особые пожелания..."></textarea>
|
||
</div>
|
||
<button type="submit" class="btn" style="width:100%">Отправить</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
// Калькулятор бюджета
|
||
const TOTAL_BUDGET = 10000000;
|
||
const MAX_GUESTS = 150;
|
||
|
||
function formatNumber(num) {
|
||
return num.toString().replace(/\s/g, ' ').replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
|
||
}
|
||
|
||
function updateBudget() {
|
||
let total = 0;
|
||
document.querySelectorAll('.budget-input').forEach(input => {
|
||
total += Number(input.value) || 0;
|
||
});
|
||
|
||
const remaining = TOTAL_BUDGET - total;
|
||
const perGuest = Math.round(total / MAX_GUESTS);
|
||
|
||
document.getElementById('totalSpent').textContent = formatNumber(total) + ' ₸';
|
||
document.getElementById('remaining').textContent = formatNumber(remaining) + ' ₸';
|
||
document.getElementById('perGuest').textContent = formatNumber(perGuest) + ' ₸';
|
||
|
||
// Цвет остатка
|
||
const remainingEl = document.getElementById('remaining');
|
||
remainingEl.style.color = remaining < 0 ? '#C62828' : '#2E7D32';
|
||
|
||
// Обновляем отображение потраченного
|
||
document.querySelectorAll('.budget-item').forEach(item => {
|
||
const input = item.querySelector('.budget-input');
|
||
const spent = item.querySelector('.spent');
|
||
spent.textContent = formatNumber(Number(input.value) || 0) + ' ₸';
|
||
});
|
||
}
|
||
|
||
document.querySelectorAll('.budget-input').forEach(input => {
|
||
input.addEventListener('input', updateBudget);
|
||
});
|
||
|
||
// Список гостей
|
||
function updateGuestCount() {
|
||
let confirmed = 0;
|
||
document.querySelectorAll('.guest-status').forEach(select => {
|
||
if (select.value === 'confirmed') confirmed++;
|
||
});
|
||
document.getElementById('guestCount').textContent = confirmed;
|
||
}
|
||
|
||
function addGuestRow() {
|
||
const list = document.getElementById('guestList');
|
||
const div = document.createElement('div');
|
||
div.className = 'guest-item';
|
||
div.innerHTML = `
|
||
<div style="flex:1">
|
||
<input type="text" placeholder="ФИО гостя" style="width:100%;border:none;background:transparent;font-weight:500;margin-bottom:4px" />
|
||
<input type="text" placeholder="Телефон" style="width:100%;border:none;background:transparent;font-size:13px;color:var(--gray-500)" />
|
||
</div>
|
||
<select class="guest-status" onchange="updateGuestCount()">
|
||
<option value="pending">Ожидает</option>
|
||
<option value="confirmed">Подтвердил</option>
|
||
<option value="declined">Отказался</option>
|
||
</select>
|
||
`;
|
||
list.appendChild(div);
|
||
}
|
||
|
||
// Форма RSVP
|
||
function submitRSVP(e) {
|
||
e.preventDefault();
|
||
const form = e.target;
|
||
const data = new FormData(form);
|
||
|
||
// Добавляем гостя в список
|
||
const list = document.getElementById('guestList');
|
||
const div = document.createElement('div');
|
||
div.className = 'guest-item';
|
||
div.innerHTML = `
|
||
<div>
|
||
<div class="name">${data.get('name')}</div>
|
||
<div style="font-size:13px;color:var(--gray-500)">${data.get('phone')}</div>
|
||
</div>
|
||
<select class="guest-status" onchange="updateGuestCount()">
|
||
<option value="pending">Ожидает</option>
|
||
<option value="${data.get('status')}" ${data.get('status')==='confirmed'?'selected':''}>${data.get('status')==='confirmed'?'Подтвердил':'Отказался'}</option>
|
||
<option value="declined">Отказался</option>
|
||
</select>
|
||
`;
|
||
list.appendChild(div);
|
||
updateGuestCount();
|
||
|
||
form.reset();
|
||
alert('Спасибо! Ваш ответ записан.');
|
||
}
|
||
|
||
// Анимация при скролле
|
||
const observer = new IntersectionObserver(entries => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) entry.target.classList.add('in');
|
||
});
|
||
}, {threshold: 0.15});
|
||
|
||
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
|
||
|
||
// Проверка пароля
|
||
const CORRECT_PASSWORD = 'chingiz2027';
|
||
|
||
function checkPassword() {
|
||
const input = document.getElementById('passwordInput').value.trim();
|
||
const errorMsg = document.getElementById('errorMsg');
|
||
|
||
if (input === CORRECT_PASSWORD) {
|
||
// Сохраняем в localStorage чтобы не спрашивать снова
|
||
localStorage.setItem('weddingAccess', 'true');
|
||
// Убираем экран входа
|
||
document.getElementById('loginScreen').style.display = 'none';
|
||
// Убираем блюр с контента
|
||
const main = document.getElementById('mainContent');
|
||
main.style.filter = 'none';
|
||
main.style.pointerEvents = 'auto';
|
||
main.style.userSelect = 'auto';
|
||
} else {
|
||
errorMsg.style.display = 'block';
|
||
document.getElementById('passwordInput').value = '';
|
||
}
|
||
}
|
||
|
||
// Проверяем при загрузке
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
if (localStorage.getItem('weddingAccess') === 'true') {
|
||
document.getElementById('loginScreen').style.display = 'none';
|
||
const main = document.getElementById('mainContent');
|
||
main.style.filter = 'none';
|
||
main.style.pointerEvents = 'auto';
|
||
main.style.userSelect = 'auto';
|
||
}
|
||
// Обработчик на Enter в поле пароля
|
||
document.getElementById('passwordInput').addEventListener('keypress', function(e) {
|
||
if (e.key === 'Enter') checkPassword();
|
||
});
|
||
});
|
||
|
||
// Инициализация
|
||
updateBudget();
|
||
updateGuestCount();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|