<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<style>
.maravel-snippet {
border: 2px solid #f39c12;
border-radius: 12px;
padding: 30px 35px;
background: linear-gradient(135deg, #f9f9f9 0%, #ffffff 100%);
font-family: 'Segoe UI', Arial, sans-serif;
color: #2c3e50;
max-width: 550px;
margin: 20px auto;
box-shadow: 0 8px 24px rgba(243, 156, 18, 0.15);
text-align: center;
transition: transform 0.3s;
}
.maravel-snippet:hover {
transform: translateY(-4px);
}
.maravel-snippet h1 {
font-size: 32px;
font-weight: 800;
margin: 0 0 6px 0;
color: #2c3e50;
letter-spacing: -0.5px;
}
.maravel-snippet .subtitle {
font-size: 18px;
color: #f39c12;
font-weight: 600;
margin: 0 0 16px 0;
letter-spacing: 1px;
}
.maravel-snippet .divider {
width: 80px;
height: 3px;
background: #f39c12;
margin: 16px auto;
border-radius: 2px;
}
.maravel-snippet .message {
font-size: 16px;
line-height: 1.8;
color: #34495e;
margin: 16px 0 20px 0;
padding: 0 10px;
}
.maravel-snippet .message strong {
color: #f39c12;
}
.maravel-snippet .footer-text {
font-size: 13px;
color: #95a5a6;
font-style: italic;
margin-top: 14px;
border-top: 1px solid #ecf0f1;
padding-top: 14px;
}
.maravel-button {
background-color: #3498db;
color: white;
padding: 12px 32px;
border: none;
border-radius: 30px;
cursor: pointer;
font-weight: 700;
font-size: 15px;
transition: all 0.3s;
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.25);
font-family: 'Segoe UI', Arial, sans-serif;
}
.maravel-button:hover {
background-color: #2980b9;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(52, 152, 219, 0.35);
}
.maravel-button:active {
transform: scale(0.96);
}
/* Анимация для звёздочек */
@keyframes twinkle {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(0.9); }
}
.star {
display: inline-block;
animation: twinkle 2s ease-in-out infinite;
}
.star:nth-child(2) { animation-delay: 0.7s; }
.star:nth-child(3) { animation-delay: 1.4s; }
</style>
</head>
<body>
<div class="maravel-snippet">
<h1>С днём рождения!</h1>
<div class="subtitle">
<span class="star">✦</span>
Поздравление от Maravel
<span class="star">✦</span>
</div>
<div class="divider"></div>
<div class="message">
<strong>Дорогой друг!</strong>
<br><br>
Желаем тебе <strong>ярких идей</strong>,
<strong>вдохновения</strong> и
<strong>успешных проектов</strong>.
<br>
Пусть каждый день приносит радость,
<br>
а все мечты обязательно сбываются!
<br><br>
<strong>С наилучшими пожеланиями,</strong>
<br>
Команда Maravel
</div>
<div class="divider"></div>
<button class="maravel-button" id="copyCardBtn">
Скопировать открытку
</button>
<div class="footer-text">
✦ Открытка сделана с любовью ✦
</div>
</div>
<script>
document.getElementById('copyCardBtn').addEventListener('click', function() {
const cardText =
`═══════════════════════════════════
С днём рождения!
✦ Поздравление от Maravel ✦
─────────────────────────────────
Дорогой друг!
Желаем тебе ярких идей, вдохновения
и успешных проектов.
Пусть каждый день приносит радость,
а все мечты обязательно сбываются!
С наилучшими пожеланиями,
Команда Maravel
═══════════════════════════════════`;
navigator.clipboard.writeText(cardText).then(() => {
const btn = document.getElementById('copyCardBtn');
btn.textContent = 'Скопировано!';
setTimeout(() => {
btn.textContent = 'Скопировать открытку';
}, 2500);
}).catch(() => {
alert('Не удалось скопировать, но открытка перед тобой!');
});
});
</script>
</body>
</html>
