Красивая страница успешной оплаты
Небольшой пример красивой html-страницы с анимацией на bootstrap 5 при успешной оплате. Либо вообще можно использовать под другие цели.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Оплата прошла успешно!</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
body {
font-family: 'Montserrat', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow-x: hidden;
}
.success-card {
background: #fff;
border-radius: 20px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
padding: 40px;
text-align: center;
max-width: 800px;
margin: 20px;
position: relative;
overflow: hidden;
transform: translateY(0);
transition: transform 0.3s ease;
}
.success-card:hover {
transform: translateY(-5px);
}
.success-icon {
width: 120px;
height: 120px;
background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 30px;
position: relative;
animation: pulse 2s infinite;
}
.success-icon i {
font-size: 60px;
color: white;
}
.confetti {
position: absolute;
width: 15px;
height: 15px;
opacity: 0;
animation: confetti-fall 5s linear infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes confetti-fall {
0% {
opacity: 1;
transform: translateY(-100px) rotate(0deg);
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(500px) rotate(360deg);
}
}
h1 {
color: #2d3436;
font-weight: 700;
margin-bottom: 20px;
font-size: 2.5rem;
}
p {
color: #636e72;
font-size: 1.2rem;
margin-bottom: 30px;
}
.btn-home {
background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
border: none;
color: white;
padding: 15px 40px;
border-radius: 50px;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(67, 206, 162, 0.4);
}
.btn-home:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(67, 206, 162, 0.6);
}
.decoration {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(67, 206, 162, 0.1) 0%, rgba(24, 90, 157, 0.1) 100%);
z-index: -1;
}
.decoration-1 {
top: -80px;
right: -80px;
}
.decoration-2 {
bottom: -80px;
left: -80px;
}
.transaction-details {
background: #f8f9fa;
border-radius: 15px;
padding: 20px;
margin: 30px 0;
text-align: left;
}
.detail-item {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid #e9ecef;
}
.detail-item:last-child {
border-bottom: none;
}
.thank-you {
font-size: 1.5rem;
color: #43cea2;
font-weight: 600;
margin-top: 20px;
animation: color-change 3s infinite;
}
@keyframes color-change {
0% { color: #43cea2; }
50% { color: #185a9d; }
100% { color: #43cea2; }
}
@media (max-width: 576px) {
.success-card {
padding: 30px 20px;
}
h1 {
font-size: 2rem;
}
.success-icon {
width: 100px;
height: 100px;
}
.success-icon i {
font-size: 50px;
}
}
</style>
</head>
<body>
<div class="success-card">
<!-- Декоративные элементы -->
<div class="decoration decoration-1"></div>
<div class="decoration decoration-2"></div>
<!-- Конфетти -->
<div id="confetti-container"></div>
<!-- Основное содержимое -->
<div class="success-icon">
<i class="fas fa-check"></i>
</div>
<h1>Оплата прошла успешно!</h1>
<p>Ваш платеж был успешно обработан. Товары будут отправлены в ближайшее время.</p>
<div class="transaction-details">
<div class="detail-item">
<span>Номер заказа:</span>
<strong>#987654</strong>
</div>
<div class="detail-item">
<span>Дата оплаты:</span>
<strong id="current-date"></strong>
</div>
<div class="detail-item">
<span>Сумма:</span>
<strong>5 490 ₽</strong>
</div>
<div class="detail-item">
<span>Способ оплаты:</span>
<strong>Банковская карта</strong>
</div>
</div>
<p class="thank-you">Спасибо за ваш заказ!</p>
<button class="btn-home">
<i class="fas fa-home me-2"></i> Вернуться на главную
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Установка текущей даты
const now = new Date();
const options = { day: 'numeric', month: 'long', year: 'numeric' };
document.getElementById('current-date').textContent = now.toLocaleDateString('ru-RU', options);
// Создание конфетти
function createConfetti() {
const colors = ['#43cea2', '#185a9d', '#ff6b6b', '#f9ca24', '#686de0'];
const container = document.getElementById('confetti-container');
for (let i = 0; i < 50; i++) {
const confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.left = Math.random() * 100 + '%';
confetti.style.animationDelay = Math.random() * 5 + 's';
confetti.style.width = Math.random() * 10 + 10 + 'px';
confetti.style.height = Math.random() * 10 + 10 + 'px';
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
container.appendChild(confetti);
}
}
// Запуск при загрузке страницы
window.onload = function() {
createConfetti();
};
</script>
</body>
</html>Вот еще подредактированный вариант, без кнопки возврата на главную и без деталей платежа:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Оплата прошла успешно!</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
body {
font-family: 'Montserrat', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow-x: hidden;
}
.success-card {
background: #fff;
border-radius: 20px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
padding: 40px;
text-align: center;
max-width: 650px;
margin: 20px;
position: relative;
overflow: hidden;
transform: translateY(0);
transition: transform 0.3s ease;
}
.success-card:hover {
transform: translateY(-5px);
}
.success-icon {
width: 120px;
height: 120px;
background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 30px;
position: relative;
animation: pulse 2s infinite;
}
.success-icon i {
font-size: 60px;
color: white;
}
.confetti {
position: absolute;
width: 15px;
height: 15px;
opacity: 0;
animation: confetti-fall 5s linear infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes confetti-fall {
0% {
opacity: 1;
transform: translateY(-100px) rotate(0deg);
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(500px) rotate(360deg);
}
}
h1 {
color: #2d3436;
font-weight: 700;
margin-bottom: 20px;
font-size: 2.8rem;
}
p {
color: #636e72;
font-size: 1.4rem;
margin-bottom: 20px;
line-height: 1.6;
}
.decoration {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(67, 206, 162, 0.1) 0%, rgba(24, 90, 157, 0.1) 100%);
z-index: -1;
}
.decoration-1 {
top: -80px;
right: -80px;
}
.decoration-2 {
bottom: -80px;
left: -80px;
}
.thank-you {
font-size: 1.8rem;
color: #43cea2;
font-weight: 600;
margin-top: 30px;
animation: color-change 3s infinite;
}
@keyframes color-change {
0% { color: #43cea2; }
50% { color: #185a9d; }
100% { color: #43cea2; }
}
@media (max-width: 576px) {
.success-card {
padding: 30px 20px;
}
h1 {
font-size: 2.2rem;
}
p {
font-size: 1.2rem;
}
.success-icon {
width: 100px;
height: 100px;
}
.success-icon i {
font-size: 50px;
}
.thank-you {
font-size: 1.5rem;
}
}
</style>
</head>
<body>
<div class="success-card">
<!-- Декоративные элементы -->
<div class="decoration decoration-1"></div>
<div class="decoration decoration-2"></div>
<!-- Конфетти -->
<div id="confetti-container"></div>
<!-- Основное содержимое -->
<div class="success-icon">
<i class="fas fa-check"></i>
</div>
<h1>Оплата прошла успешно!</h1>
<p>Спасибо за ваш заказ! Товары будут отправлены в ближайшее время.</p>
<p class="thank-you">Приятного дня!</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Создание конфетти
function createConfetti() {
const colors = ['#43cea2', '#185a9d', '#ff6b6b', '#f9ca24', '#686de0'];
const container = document.getElementById('confetti-container');
for (let i = 0; i < 50; i++) {
const confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.left = Math.random() * 100 + '%';
confetti.style.animationDelay = Math.random() * 5 + 's';
confetti.style.width = Math.random() * 10 + 10 + 'px';
confetti.style.height = Math.random() * 10 + 10 + 'px';
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
container.appendChild(confetti);
}
}
// Запуск при загрузке страницы
window.onload = function() {
createConfetti();
};
</script>
</body>
</html>Share this content:
Отправить комментарий