48hr.email/infrastructure/web/views/verify-success.twig

{% extends 'layout.twig' %}

{% block header %}
    <div class="action-links">
        <a href="/" aria-label="Return to home">← Return to Home</a>
        <button class="theme-toggle" id="themeToggle" aria-label="Toggle dark/light mode">
            <svg class="theme-icon theme-icon-dark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
            </svg>
            <svg class="theme-icon theme-icon-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
            </svg>
        </button>
    </div>
{% endblock %}

{% block body %}
    <div class="verification-success-container">
        <div class="verification-success-card">
            <div class="verification-success-icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
                </svg>
            </div>
            
            <h1>Email Verified Successfully!</h1>
            
            <div class="verification-details">
                <p>You have verified ownership of:</p>
                <p class="verified-email">{{ email }}</p>
            </div>
            
            <div class="verification-info">
                <p>✓ You can now forward emails to this address for the next <strong>24 hours</strong></p>
                <p>✓ After 24 hours, you'll need to verify again</p>
                <p>✓ You can close this tab and return to your inbox</p>
            </div>
            
            <div class="verification-actions">
                <a href="/" class="button button-primary">Return to {{ branding[0] }}</a>
            </div>
        </div>
    </div>
    
    <style>
        .verification-success-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 60vh;
            padding: 2rem;
        }
        
        .verification-success-card {
            background: var(--background-color);
            border: 2px solid var(--success-color, #28a745);
            border-radius: 8px;
            padding: 3rem 2rem;
            max-width: 500px;
            width: 100%;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .verification-success-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 1.5rem;
            color: var(--success-color, #28a745);
        }
        
        .verification-success-icon svg {
            width: 100%;
            height: 100%;
        }
        
        .verification-success-card h1 {
            color: var(--success-color, #28a745);
            margin-bottom: 1.5rem;
            font-size: 1.8rem;
        }
        
        .verification-details {
            margin: 2rem 0;
            padding: 1rem;
            background: var(--code-background, #f5f5f5);
            border-radius: 5px;
        }
        
        .verification-details p {
            margin: 0.5rem 0;
        }
        
        .verified-email {
            font-family: monospace;
            font-size: 1.1rem;
            font-weight: bold;
            color: var(--primary-color);
            word-break: break-all;
        }
        
        .verification-info {
            margin: 2rem 0;
            text-align: left;
            padding: 0 1rem;
        }
        
        .verification-info p {
            margin: 0.75rem 0;
            line-height: 1.6;
        }
        
        .verification-actions {
            margin-top: 2rem;
        }
        
        .button-primary {
            display: inline-block;
            background: var(--primary-color);
            color: white;
            padding: 0.75rem 2rem;
            border-radius: 5px;
            text-decoration: none;
            font-weight: 600;
            transition: background-color 0.2s;
        }
        
        .button-primary:hover {
            background: var(--primary-hover-color, #0056b3);
        }
        
        @media (max-width: 600px) {
            .verification-success-card {
                padding: 2rem 1rem;
            }
            
            .verification-success-card h1 {
                font-size: 1.5rem;
            }
        }
    </style>
{% endblock %}