WIP
This commit is contained in:
238
frontend/email-verified.html
Normal file
238
frontend/email-verified.html
Normal file
@ -0,0 +1,238 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user