113 lines
6.1 KiB
HTML
113 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>День рождения Даурена — 20.07.2027</title>
|
||
<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>">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;700&family=Manrope:wght@400;600;800&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<header class="hero">
|
||
<div class="stars" aria-hidden="true"></div>
|
||
<div class="container hero-inner">
|
||
<div class="badge">🐉 Фэнтези-вечер · врата откроются в 19:00</div>
|
||
<h1 class="title">Приглашение на день рождения <span class="gold">Даурена</span></h1>
|
||
<p class="subtitle">Драконы, эльфы и магия ждут тебя. Надень фэнтези-образ и стань частью нашего королевства — 20 июля 2027 года в 19:00.</p>
|
||
<div class="countdown" id="countdown">
|
||
<div class="cell"><b id="cd-d">0</b><span>дней</span></div>
|
||
<div class="cell"><b id="cd-h">0</b><span>часов</span></div>
|
||
<div class="cell"><b id="cd-m">0</b><span>минут</span></div>
|
||
<div class="cell"><b id="cd-s">0</b><span>секунд</span></div>
|
||
</div>
|
||
<p class="confirmed" id="confirmedCount" hidden>⚔️ Уже подтвердили участие: <b>0</b></p>
|
||
<div class="cta">
|
||
<a class="btn btn-gold" href="#register">⚔️ Подтвердить участие</a>
|
||
<a class="btn btn-ghost" href="#wishlist">🎁 Список желаний</a>
|
||
</div>
|
||
</div>
|
||
<svg class="wave" viewBox="0 0 1440 90" preserveAspectRatio="none" aria-hidden="true"><path d="M0,50 C240,95 480,0 720,35 C960,70 1200,10 1440,45 L1440,90 L0,90 Z" fill="#0d081a"/></svg>
|
||
</header>
|
||
|
||
<section class="details">
|
||
<div class="container">
|
||
<h2 class="h2 center"><span class="gold">Пророчество</span> гласит</h2>
|
||
<div class="cards">
|
||
<div class="card reveal"><div class="ico">📅</div><h3>Дата</h3><p>20 июля <b>2027</b> года</p></div>
|
||
<div class="card reveal"><div class="ico">⏰</div><h3>Время</h3><p>Врата откроются в <b>19:00</b></p></div>
|
||
<div class="card reveal"><div class="ico">📍</div><h3>Место</h3><p>Замок уточняется 🏰<br><span class="muted">скажи мне адрес — впишу</span></p></div>
|
||
<div class="card reveal"><div class="ico">🛡️</div><h3>Дресс-код</h3><p><b>Фэнтези-образы</b> приветствуются: мантии, короны, крылья — всё можно!</p></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="register" class="reg">
|
||
<div class="container narrow">
|
||
<h2 class="h2 center">Клятва <span class="gold">участия</span></h2>
|
||
<p class="lead center">Подтверди, что присягнёшь на верность королевству — оставь свои данные, чтобы мы знали, кого ждать.</p>
|
||
<form id="regForm" class="card form">
|
||
<label>Твоё имя <input id="r-name" type="text" placeholder="Как звать героя?" required maxlength="100"></label>
|
||
<label>Телефон / WhatsApp <input id="r-phone" type="text" placeholder="+7 700 000 00 00" required maxlength="30"></label>
|
||
<label>Сколько вас будет?
|
||
<select id="r-guests">
|
||
<option value="1">Я один(одна)</option>
|
||
<option value="2">Нас двое</option>
|
||
<option value="3">Нас трое</option>
|
||
<option value="4">Нас четверо и больше</option>
|
||
</select>
|
||
</label>
|
||
<label>Пожелание королю <textarea id="r-note" rows="2" maxlength="300" placeholder="Необязательно, но приятно ✨"></textarea></label>
|
||
<button type="submit" class="btn btn-gold btn-block">⚔️ Поклясться и прийти</button>
|
||
<p id="regMsg" class="msg"></p>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="wishlist" class="wish">
|
||
<div class="container">
|
||
<h2 class="h2 center">Королевская <span class="gold">сокровищница</span></h2>
|
||
<p class="lead center">Выбери подарок и «забери» его — так никто не подарит два одинаковых дара. Помеченные звёздами <span class="gold">✦</span> уже обрели хозяина.</p>
|
||
<div class="grid" id="wishGrid"></div>
|
||
<p id="wishNote" class="center muted"></p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="admin">
|
||
<div class="container narrow">
|
||
<details class="card admin-box">
|
||
<summary>🗝️ Панель хозяина замка</summary>
|
||
<div class="admin-inner">
|
||
<label>Секретный код <input id="a-pin" type="password" placeholder="••••••••"></label>
|
||
<button id="a-login" class="btn btn-ghost">Войти</button>
|
||
<p id="a-msg" class="msg"></p>
|
||
<div id="a-panel" hidden>
|
||
<h3>🛡️ Гости (кто подтвердил)</h3>
|
||
<div id="a-regs" class="a-list"></div>
|
||
<h3>🎁 Добавить подарок в вишлист</h3>
|
||
<div class="a-add">
|
||
<input id="a-wemoji" class="emoji-in" placeholder="🎁" maxlength="4">
|
||
<input id="a-wtitle" class="grow" placeholder="Название подарка" maxlength="100">
|
||
<button id="a-wadd" class="btn btn-gold">Добавить</button>
|
||
</div>
|
||
<div id="a-wishes" class="a-list"></div>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="foot">
|
||
<div class="container center">
|
||
<p class="gold big">🐉</p>
|
||
<p>С любовью и магией, Даурен · 20.07.2027</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|