238 lines
7.0 KiB
HTML
238 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Email Verified - Bookmark Manager</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="stylesheet" href="auth-styles.css">
|
|
<style>
|
|
.verification-success {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.success-icon {
|
|
font-size: 4rem;
|
|
color: #27ae60;
|
|
margin-bottom: 24px;
|
|
animation: bounceIn 0.6s ease-out;
|
|
}
|
|
|
|
.success-title {
|
|
color: #2c3e50;
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.success-message {
|
|
color: #7f8c8d;
|
|
font-size: 1.1rem;
|
|
line-height: 1.6;
|
|
margin-bottom: 32px;
|
|
max-width: 500px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.success-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
max-width: 300px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.countdown {
|
|
font-size: 14px;
|
|
color: #95a5a6;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
@keyframes bounceIn {
|
|
0% {
|
|
transform: scale(0.3);
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
}
|
|
70% {
|
|
transform: scale(0.9);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.verification-success > * {
|
|
animation: fadeInUp 0.6s ease-out forwards;
|
|
}
|
|
|
|
.verification-success > *:nth-child(2) {
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
.verification-success > *:nth-child(3) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.verification-success > *:nth-child(4) {
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
.verification-success > *:nth-child(5) {
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
/* Dark mode support */
|
|
@media (prefers-color-scheme: dark) {
|
|
.success-title {
|
|
color: #ecf0f1;
|
|
}
|
|
|
|
.success-message {
|
|
color: #bdc3c7;
|
|
}
|
|
|
|
.countdown {
|
|
color: #7f8c8d;
|
|
}
|
|
}
|
|
|
|
/* Mobile responsive */
|
|
@media (max-width: 480px) {
|
|
.success-icon {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.success-title {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.success-message {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="auth-body">
|
|
<div class="auth-container">
|
|
<div class="auth-card">
|
|
<div class="verification-success">
|
|
<div class="success-icon">✅</div>
|
|
|
|
<h1 class="success-title">Email Verified Successfully!</h1>
|
|
|
|
<p class="success-message">
|
|
Great! Your email address has been verified and your account is now active.
|
|
You can now sign in and start managing your bookmarks.
|
|
</p>
|
|
|
|
<div class="success-actions">
|
|
<a href="login.html" class="btn btn-primary btn-full" id="signInBtn">
|
|
Sign In to Your Account
|
|
</a>
|
|
|
|
<a href="index.html" class="btn btn-secondary btn-full">
|
|
Go to Homepage
|
|
</a>
|
|
</div>
|
|
|
|
<div class="countdown" id="countdown">
|
|
Redirecting to sign in page in <span id="countdownTimer">10</span> seconds...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Auto-redirect countdown
|
|
let countdown = 10;
|
|
const countdownElement = document.getElementById('countdownTimer');
|
|
const countdownContainer = document.getElementById('countdown');
|
|
|
|
function updateCountdown() {
|
|
countdown--;
|
|
countdownElement.textContent = countdown;
|
|
|
|
if (countdown <= 0) {
|
|
window.location.href = 'login.html';
|
|
}
|
|
}
|
|
|
|
// Start countdown
|
|
const countdownInterval = setInterval(updateCountdown, 1000);
|
|
|
|
// Clear countdown if user clicks sign in button
|
|
document.getElementById('signInBtn').addEventListener('click', () => {
|
|
clearInterval(countdownInterval);
|
|
countdownContainer.style.display = 'none';
|
|
});
|
|
|
|
// Add some celebration confetti effect (optional)
|
|
function createConfetti() {
|
|
const colors = ['#f39c12', '#e74c3c', '#9b59b6', '#3498db', '#2ecc71'];
|
|
|
|
for (let i = 0; i < 50; i++) {
|
|
setTimeout(() => {
|
|
const confetti = document.createElement('div');
|
|
confetti.style.position = 'fixed';
|
|
confetti.style.left = Math.random() * 100 + 'vw';
|
|
confetti.style.top = '-10px';
|
|
confetti.style.width = '10px';
|
|
confetti.style.height = '10px';
|
|
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
|
|
confetti.style.borderRadius = '50%';
|
|
confetti.style.pointerEvents = 'none';
|
|
confetti.style.zIndex = '9999';
|
|
confetti.style.animation = `fall ${Math.random() * 3 + 2}s linear forwards`;
|
|
|
|
document.body.appendChild(confetti);
|
|
|
|
setTimeout(() => {
|
|
confetti.remove();
|
|
}, 5000);
|
|
}, i * 100);
|
|
}
|
|
}
|
|
|
|
// Add confetti animation CSS
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
@keyframes fall {
|
|
to {
|
|
transform: translateY(100vh) rotate(360deg);
|
|
}
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
// Trigger confetti after page loads
|
|
setTimeout(createConfetti, 500);
|
|
|
|
// Check if there's a success message in URL params
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const message = urlParams.get('message');
|
|
if (message) {
|
|
document.querySelector('.success-message').textContent = decodeURIComponent(message);
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |