332 lines
10 KiB
HTML
332 lines
10 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Приглашение на юбилей!</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: 'Georgia', serif;
|
||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
||
min-height: 100vh;
|
||
color: #fff;
|
||
overflow-x: hidden;
|
||
}
|
||
.container {
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
.card {
|
||
background: linear-gradient(145deg, #2d2d44 0%, #1a1a2e 100%);
|
||
border-radius: 20px;
|
||
padding: 40px 30px;
|
||
margin: 20px 0;
|
||
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
|
||
border: 2px solid #c9a227;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.card::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: radial-gradient(circle, rgba(201,162,39,0.1) 0%, transparent 70%);
|
||
animation: shimmer 3s infinite;
|
||
}
|
||
@keyframes shimmer {
|
||
0%, 100% { transform: translate(-20%, -20%); }
|
||
50% { transform: translate(20%, 20%); }
|
||
}
|
||
.content { position: relative; z-index: 1; }
|
||
.header { text-align: center; margin-bottom: 30px; }
|
||
.header h1 {
|
||
font-size: clamp(32px, 8vw, 56px);
|
||
color: #c9a227;
|
||
text-shadow: 0 0 20px rgba(201,162,39,0.5);
|
||
margin-bottom: 10px;
|
||
font-weight: normal;
|
||
letter-spacing: 2px;
|
||
}
|
||
.header .subtitle {
|
||
font-size: clamp(16px, 4vw, 20px);
|
||
color: #e8e8e8;
|
||
font-style: italic;
|
||
}
|
||
.age-badge {
|
||
display: inline-block;
|
||
background: linear-gradient(135deg, #c9a227 0%, #f4d03f 100%);
|
||
color: #1a1a2e;
|
||
font-size: clamp(48px, 12vw, 80px);
|
||
font-weight: bold;
|
||
padding: 20px 40px;
|
||
border-radius: 50%;
|
||
margin: 20px 0;
|
||
box-shadow: 0 10px 30px rgba(201,162,39,0.4);
|
||
animation: pulse 2s infinite;
|
||
}
|
||
@keyframes pulse {
|
||
0%, 100% { transform: scale(1); }
|
||
50% { transform: scale(1.05); }
|
||
}
|
||
.details {
|
||
background: rgba(255,255,255,0.05);
|
||
border-radius: 15px;
|
||
padding: 25px;
|
||
margin: 25px 0;
|
||
border-left: 4px solid #c9a227;
|
||
}
|
||
.detail-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 15px 0;
|
||
font-size: 18px;
|
||
}
|
||
.detail-item .icon {
|
||
font-size: 28px;
|
||
margin-right: 15px;
|
||
width: 40px;
|
||
text-align: center;
|
||
}
|
||
.detail-item .text {
|
||
flex: 1;
|
||
line-height: 1.4;
|
||
}
|
||
.detail-item .label {
|
||
color: #c9a227;
|
||
font-weight: bold;
|
||
display: block;
|
||
font-size: 14px;
|
||
margin-bottom: 3px;
|
||
}
|
||
.message {
|
||
text-align: center;
|
||
font-size: clamp(16px, 4vw, 18px);
|
||
line-height: 1.8;
|
||
margin: 30px 0;
|
||
padding: 20px;
|
||
background: rgba(201,162,39,0.1);
|
||
border-radius: 15px;
|
||
font-style: italic;
|
||
}
|
||
.message strong {
|
||
color: #c9a227;
|
||
}
|
||
.rsvp {
|
||
text-align: center;
|
||
margin: 30px 0;
|
||
}
|
||
.rsvp-btn {
|
||
display: inline-block;
|
||
background: linear-gradient(135deg, #c9a227 0%, #f4d03f 100%);
|
||
color: #1a1a2e;
|
||
padding: 15px 40px;
|
||
border-radius: 50px;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
text-decoration: none;
|
||
box-shadow: 0 10px 30px rgba(201,162,39,0.4);
|
||
transition: all 0.3s;
|
||
cursor: pointer;
|
||
border: none;
|
||
}
|
||
.rsvp-btn:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 15px 40px rgba(201,162,39,0.6);
|
||
}
|
||
.footer {
|
||
text-align: center;
|
||
margin-top: 30px;
|
||
padding-top: 20px;
|
||
border-top: 1px solid rgba(255,255,255,0.1);
|
||
font-size: 14px;
|
||
color: #888;
|
||
}
|
||
.confetti {
|
||
position: fixed;
|
||
width: 10px;
|
||
height: 10px;
|
||
background: #c9a227;
|
||
animation: fall linear forwards;
|
||
opacity: 0;
|
||
}
|
||
@keyframes fall {
|
||
0% {
|
||
transform: translateY(-100vh) rotate(0deg);
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
transform: translateY(100vh) rotate(720deg);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
.share-buttons {
|
||
display: flex;
|
||
gap: 10px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
margin: 20px 0;
|
||
}
|
||
.share-btn {
|
||
padding: 10px 20px;
|
||
border-radius: 25px;
|
||
border: none;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
}
|
||
.share-whatsapp {
|
||
background: #25D366;
|
||
color: white;
|
||
}
|
||
.share-telegram {
|
||
background: #0088cc;
|
||
color: white;
|
||
}
|
||
.share-copy {
|
||
background: rgba(255,255,255,0.2);
|
||
color: white;
|
||
}
|
||
.share-btn:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="card">
|
||
<div class="content">
|
||
<div class="header">
|
||
<h1>🎉 ПРИГЛАШЕНИЕ 🎉</h1>
|
||
<p class="subtitle">На юбилей любимого мужа, отца и хозяина</p>
|
||
</div>
|
||
|
||
<div style="text-align: center;">
|
||
<div class="age-badge">50</div>
|
||
</div>
|
||
|
||
<div class="message">
|
||
<p>Дорогие друзья и родные!</p>
|
||
<br>
|
||
<p>Приглашаем вас разделить с нами особенный вечер — <strong>50-летие</strong> нашего любимого мужчины!</p>
|
||
<br>
|
||
<p>Полвека — это не возраст, а новый уровень мудрости, силы и красоты. Давайте вместе отпразднуем эту важную дату!</p>
|
||
</div>
|
||
|
||
<div class="details">
|
||
<div class="detail-item">
|
||
<span class="icon">📅</span>
|
||
<div class="text">
|
||
<span class="label">ДАТА</span>
|
||
29 августа 2026 года, суббота
|
||
</div>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="icon">🕖</span>
|
||
<div class="text">
|
||
<span class="label">ВРЕМЯ</span>
|
||
Сбор гостей в 19:00
|
||
</div>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="icon">📍</span>
|
||
<div class="text">
|
||
<span class="label">МЕСТО</span>
|
||
Семейный ресторан (адрес уточняется)
|
||
</div>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="icon">👔</span>
|
||
<div class="text">
|
||
<span class="label">ДРЕСС-КОД</span>
|
||
Вечерний, праздничный
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rsvp">
|
||
<p style="margin-bottom: 15px; font-size: 16px;">Подтвердите, пожалуйста, присутствие до 25.08.2026</p>
|
||
<button class="rsvp-btn" onclick="copyText()">📋 Скопировать текст приглашения</button>
|
||
</div>
|
||
|
||
<div class="share-buttons">
|
||
<a href="#" class="share-btn share-whatsapp" onclick="shareWhatsApp()">WhatsApp</a>
|
||
<a href="#" class="share-btn share-telegram" onclick="shareTelegram()">Telegram</a>
|
||
<button class="share-btn share-copy" onclick="copyLink()">🔗 Копировать ссылку</button>
|
||
</div>
|
||
|
||
<div class="footer">
|
||
<p>С любовью, Индира и дети ❤️</p>
|
||
<p style="margin-top: 10px;">До встречи на празднике!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Конфетти при загрузке
|
||
function createConfetti() {
|
||
const colors = ['#c9a227', '#f4d03f', '#fff', '#e8e8e8'];
|
||
for (let i = 0; i < 50; i++) {
|
||
setTimeout(() => {
|
||
const confetti = document.createElement('div');
|
||
confetti.className = 'confetti';
|
||
confetti.style.left = Math.random() * 100 + 'vw';
|
||
confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
|
||
confetti.style.animationDuration = (Math.random() * 2 + 2) + 's';
|
||
document.body.appendChild(confetti);
|
||
setTimeout(() => confetti.remove(), 4000);
|
||
}, i * 100);
|
||
}
|
||
}
|
||
createConfetti();
|
||
|
||
// Копирование текста
|
||
function copyText() {
|
||
const text = `🎉 ПРИГЛАШЕНИЕ НА ЮБИЛЕЙ! 🎉
|
||
|
||
29 августа 2026 года — 50 лет!
|
||
|
||
📅 Дата: 29.08.2026, суббота
|
||
🕖 Время: 19:00
|
||
📍 Место: Семейный ресторан
|
||
|
||
Дорогие друзья и родные! Приглашаем разделить с нами особенный вечер — 50-летие нашего любимого мужчины!
|
||
|
||
Подтвердите присутствие до 25.08.2026
|
||
|
||
С любовью, Индира и дети ❤️`;
|
||
|
||
navigator.clipboard.writeText(text).then(() => {
|
||
alert('✅ Текст скопирован! Можно отправить в сообщении.');
|
||
});
|
||
}
|
||
|
||
// Поделиться в WhatsApp
|
||
function shareWhatsApp() {
|
||
const text = encodeURIComponent('🎉 Приглашение на юбилей! 29.08.2026 — 50 лет! Подробности: ' + window.location.href);
|
||
window.open('https://wa.me/?text=' + text, '_blank');
|
||
}
|
||
|
||
// Поделиться в Telegram
|
||
function shareTelegram() {
|
||
const text = encodeURIComponent('🎉 Приглашение на юбилей! 29.08.2026 — 50 лет! Подробности: ' + window.location.href);
|
||
window.open('https://t.me/share/url?url=' + encodeURIComponent(window.location.href) + '&text=' + text, '_blank');
|
||
}
|
||
|
||
// Копировать ссылку
|
||
function copyLink() {
|
||
navigator.clipboard.writeText(window.location.href).then(() => {
|
||
alert('✅ Ссылка скопирована!');
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|