eric / rustwarden

<!DOCTYPE html>
<html lang="fr" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% if success %}
    <meta http-equiv="refresh" content="5;url=/login">
    {% endif %}
    <title>{% if success %}Email vérifié{% else %}Erreur{% endif %}</title>
    <link href="/static/css/output.css" rel="stylesheet">
    <style>
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .spinner {
            animation: spin 1s linear infinite;
            display: inline-block;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .fade-in {
            animation: fadeIn 0.5s ease-out;
        }
        .countdown {
            font-variant-numeric: tabular-nums;
        }
    </style>
</head>
<body class="min-h-screen bg-gradient-to-br from-base-300 via-base-200 to-base-300 flex items-center justify-center p-4">
    <div class="card bg-base-100 shadow-2xl w-full max-w-md fade-in">
        <div class="card-body text-center space-y-6">
            {% if success %}
            <!-- Success Icon -->
            <div class="flex justify-center">
                <div class="w-20 h-20 rounded-full bg-success/20 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
            </div>

            <!-- Title -->
            <h1 class="text-2xl font-bold text-success">Email vérifié !</h1>

            <!-- Message -->
            <p class="text-base-content/80">
                {{ message }}
            </p>

            <!-- Redirect Info -->
            <div class="bg-base-200 rounded-lg p-4 space-y-3">
                <div class="flex items-center justify-center gap-2 text-base-content/60">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 spinner" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                    </svg>
                    <span>Redirection automatique dans <span id="countdown" class="countdown font-bold text-primary">5</span> secondes...</span>
                </div>
            </div>

            <!-- Manual Link -->
            <a href="/login" class="btn btn-primary btn-block">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
                </svg>
                Se connecter maintenant
            </a>
            {% else %}
            <!-- Error Icon -->
            <div class="flex justify-center">
                <div class="w-20 h-20 rounded-full bg-error/20 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-error" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                    </svg>
                </div>
            </div>

            <!-- Title -->
            <h1 class="text-2xl font-bold text-error">Erreur de vérification</h1>

            <!-- Message -->
            <p class="text-base-content/80">
                {{ message }}
            </p>

            <!-- Links -->
            <div class="space-y-2">
                <a href="/resend-verification" class="btn btn-outline btn-primary btn-block">
                    Renvoyer l'email de vérification
                </a>
                <a href="/login" class="btn btn-ghost btn-block">
                    Retour à la connexion
                </a>
            </div>
            {% endif %}
        </div>
    </div>

    {% if success %}
    <script>
        // Countdown timer
        let seconds = 5;
        const countdownEl = document.getElementById('countdown');
        
        const timer = setInterval(() => {
            seconds--;
            countdownEl.textContent = seconds;
            
            if (seconds <= 0) {
                clearInterval(timer);
                window.location.href = '/login';
            }
        }, 1000);
    </script>
    {% endif %}
</body>
</html>