{% extends "dashboard/base.html" %}

{% block title %}Dashboard - PassMCQ{% endblock title %}


{% block content %}

<style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=Raleway:wght@600;700&display=swap');
    
    @keyframes float {
        0%, 100% { transform: translate(0, 0) rotate(0deg); }
        33% { transform: translate(30px, -30px) rotate(120deg); }
        66% { transform: translate(-20px, 20px) rotate(240deg); }
    }
    
    @keyframes pulse-slow {
        0%, 100% { opacity: 0.3; transform: scale(1); }
        50% { opacity: 0.5; transform: scale(1.05); }
    }
    
    @keyframes fade-in-up {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .animate-float { animation: float 20s ease-in-out infinite; }
    .animate-pulse-slow { animation: pulse-slow 4s ease-in-out infinite; }
    .animate-fade-in-up { animation: fade-in-up 0.6s ease-out forwards; }
    .animation-delay-200 { animation-delay: 0.2s; opacity: 0; }
    .animation-delay-400 { animation-delay: 0.4s; opacity: 0; }
</style>

<div class="relative bg-gradient-to-br from-gray-50 via-emerald-50/30 to-blue-50/30 dark:from-slate-900 dark:via-slate-900 dark:to-slate-800 w-full min-h-[90vh] pb-20 overflow-hidden transition-colors">
    
    <!-- Animated Background Blobs -->
    <div class="absolute top-0 left-0 w-96 h-96 bg-gradient-to-br from-emerald-500 to-blue-500 rounded-full opacity-20 blur-3xl animate-float"></div>
    <div class="absolute bottom-0 right-0 w-96 h-96 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full opacity-20 blur-3xl animate-pulse-slow"></div>
    
    <!-- Content with Fade-in Animation -->
    <div class="relative z-10">
        {% include "dashboard/dashboard/cards.html" %}
        {% include "dashboard/dashboard/report.html" %}
    </div>
    
</div>


{% endblock content %}