UI_SPEC_STATS_DASHBOARD_APPLE.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>CodeMaster - Statistiques</title>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Chart.js pour le graphique -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <!-- Tailwind Config pour le Design System Apple -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'],
                    },
                    colors: {
                        slate: { 50: '#F8F8F8' } // Fond standard Apple
                    },
                    boxShadow: {
                        'apple-subtle': '0 4px 12px rgba(0,0,0,0.05)',
                        'apple-card': '0 8px 24px rgba(0,0,0,0.06)',
                        'apple-glow': '0 4px 12px rgba(37,99,235,0.2)',
                    },
                    animation: {
                        'page-enter': 'pageEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards',
                        'scale-in': 'scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards',
                    },
                    keyframes: {
                        pageEnter: {
                            '0%': { opacity: '0', transform: 'translateY(20px)' },
                            '100%': { opacity: '1', transform: 'translateY(0)' },
                        },
                        scaleIn: {
                            '0%': { transform: 'scale(0.9)', opacity: '0' },
                            '100%': { transform: 'scale(1)', opacity: '1' },
                        }
                    }
                }
            }
        }
    </script>

    <!-- Phosphor Icons -->
    <script src="https://unpkg.com/@phosphor-icons/web"></script>

    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <style>
        /* Glassmorphism Classes */
        .glass-nav {
            background-color: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }
        
        .glass-card {
            background-color: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .safe-pb {
            padding-bottom: env(safe-area-inset-bottom, 24px);
        }

        /* Micro-interactions */
        .interactive-card {
            transition: all 0.2s ease-out;
        }
        .interactive-card:active {
            transform: scale(0.95);
        }
    </style>
</head>
<body class="bg-slate-50 text-slate-900 min-h-screen antialiased selection:bg-blue-100">

<div id="app" class="min-h-screen flex flex-col relative">

    <!-- 1. Navigation Bar (Sticky Glassmorphic) -->
    <nav class="fixed top-0 left-0 right-0 z-50 glass-nav border-b border-gray-200/50">
        <div class="max-w-2xl mx-auto px-6 py-3 flex items-center justify-between h-14">
            <!-- Back Button -->
            <button @click="goBack" 
                    class="w-10 h-10 flex items-center justify-center -ml-2 rounded-full hover:bg-slate-100/50 active:scale-90 transition-all text-slate-900">
                <i class="ph ph-caret-left text-xl"></i>
            </button>
            
            <!-- Title -->
            <h1 class="text-[17px] font-semibold text-slate-900">Statistiques</h1>
            
            <!-- Home Button -->
            <button @click="goHome" 
                    class="w-10 h-10 flex items-center justify-center -mr-2 rounded-full hover:bg-slate-100/50 active:scale-90 transition-all text-slate-900">
                <i class="ph ph-house text-xl"></i>
            </button>
        </div>
    </nav>

    <!-- Main Content -->
    <main class="flex-grow pt-20 pb-12 px-6 max-w-2xl mx-auto w-full space-y-8 opacity-0 animate-page-enter">
        
        <!-- 2. KPI Cards Section -->
        <section class="grid grid-cols-2 gap-3">
            <!-- Moyenne -->
            <div class="rounded-[24px] glass-card border border-blue-100/50 p-5 flex flex-col items-center justify-center gap-1 shadow-apple-subtle interactive-card">
                <div class="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Moyenne</div>
                <div class="text-3xl font-bold text-blue-600">{{ Math.round(globalStats.average) }}%</div>
            </div>

            <!-- Meilleur -->
            <div class="rounded-[24px] glass-card border border-green-100/50 p-5 flex flex-col items-center justify-center gap-1 shadow-apple-subtle interactive-card">
                <div class="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Meilleur</div>
                <div class="text-3xl font-bold text-green-600">{{ Math.round(globalStats.best) }}%</div>
            </div>

            <!-- Streak -->
            <div class="rounded-[24px] glass-card border border-orange-100/50 p-5 flex flex-col items-center justify-center gap-1 shadow-apple-subtle interactive-card">
                <div class="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Série</div>
                <div class="text-3xl font-bold text-orange-600 flex items-center gap-1">
                    <i class="ph-fill ph-fire text-2xl"></i>
                    {{ globalStats.streak }}j
                </div>
            </div>

            <!-- Total -->
            <div class="rounded-[24px] glass-card border border-gray-100/50 p-5 flex flex-col items-center justify-center gap-1 shadow-apple-subtle interactive-card">
                <div class="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Total</div>
                <div class="text-3xl font-bold text-slate-700">{{ globalStats.total }}</div>
            </div>
        </section>

        <!-- 3. Evolution Chart Section -->
        <section class="rounded-[32px] glass-card border border-white/60 shadow-apple-card p-6 space-y-4">
            <h2 class="text-[13px] font-bold text-slate-500 uppercase tracking-wider ml-1">
                Évolution (30 derniers jours)
            </h2>
            
            <!-- Chart Container -->
            <div class="relative w-full h-56 bg-gradient-to-b from-blue-50/30 to-transparent rounded-2xl p-2 overflow-hidden border border-blue-100/20">
                <canvas id="evolutionChart"></canvas>
            </div>
            
            <!-- Empty State (v-if="!hasData") -->
            <div v-if="globalStats.total === 0" class="text-center py-4">
                <p class="text-sm text-slate-500">Pas encore assez de données. Complétez un quiz ! 📊</p>
            </div>
        </section>

        <!-- 4. Badges Grid Section -->
        <section class="space-y-4">
            <h2 class="text-[13px] font-bold text-slate-500 uppercase tracking-wider ml-1">
                Achievements
            </h2>

            <div class="grid grid-cols-3 gap-3">
                <button v-for="badge in badges" 
                        :key="badge.id"
                        @click="showBadgeDetails(badge)"
                        class="aspect-square rounded-2xl p-3 flex flex-col items-center justify-center text-center transition-all duration-200 active:scale-95 relative group"
                        :class="badge.unlocked 
                            ? 'bg-white/70 border border-yellow-200/60 shadow-apple-subtle hover:shadow-md' 
                            : 'bg-slate-100/50 border border-slate-200/50 opacity-60 grayscale'">
                    
                    <!-- Icon -->
                    <div class="text-3xl mb-2 transition-transform duration-300 group-hover:scale-110 select-none">
                        {{ badge.icon }}
                    </div>
                    
                    <!-- Name -->
                    <div class="text-[11px] font-semibold text-slate-900 leading-tight line-clamp-2">
                        {{ badge.name }}
                    </div>

                    <!-- Lock Icon -->
                    <div v-if="!badge.unlocked" class="absolute top-1.5 right-1.5">
                        <i class="ph-fill ph-lock text-slate-400 text-xs"></i>
                    </div>
                </button>
            </div>
        </section>

    </main>

    <!-- Modal pour Détails Badge -->
    <transition name="fade">
        <div v-if="activeBadge" class="fixed inset-0 z-[60] flex items-center justify-center p-6">
            <!-- Backdrop -->
            <div class="absolute inset-0 bg-slate-900/20 backdrop-blur-sm" @click="activeBadge = null"></div>
            
            <!-- Modal Content -->
            <div class="bg-white rounded-[32px] p-8 w-full max-w-sm shadow-2xl scale-100 relative z-10 animate-scale-in text-center space-y-4">
                <!-- Large Icon -->
                <div class="w-20 h-20 mx-auto rounded-full flex items-center justify-center text-5xl mb-2 shadow-sm"
                     :class="activeBadge.unlocked ? 'bg-yellow-50 text-yellow-600' : 'bg-slate-100 text-slate-400 grayscale'">
                    {{ activeBadge.icon }}
                </div>
                
                <!-- Text Info -->
                <div class="space-y-2">
                    <h3 class="text-2xl font-bold text-slate-900">{{ activeBadge.name }}</h3>
                    <p class="text-slate-500 font-medium leading-relaxed">
                        {{ activeBadge.description }}
                    </p>
                    <p v-if="!activeBadge.unlocked" class="text-xs font-bold text-slate-400 uppercase tracking-widest pt-2">
                        Verrouillé
                    </p>
                </div>

                <!-- Action Button -->
                <div class="pt-4">
                    <button @click="activeBadge = null" 
                            class="w-full py-3.5 rounded-full font-semibold text-[15px] transition-transform active:scale-95 shadow-sm"
                            :class="activeBadge.unlocked ? 'bg-yellow-100 text-yellow-700 hover:bg-yellow-200' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'">
                        {{ activeBadge.unlocked ? 'Génial !' : 'Fermer' }}
                    </button>
                </div>
            </div>
        </div>
    </transition>

</div>

<script>
    const { createApp, ref, onMounted } = Vue;

    createApp({
        setup() {
            // --- Mock Data (Store Simulation) ---
            const globalStats = ref({
                average: 78,
                best: 95,
                streak: 12,
                total: 42
            });

            // Badges Data (Emojis for visuals)
            const badges = ref([
                { id: 1, name: "Premiers Pas", description: "Terminer votre premier quiz", icon: "🌱", unlocked: true },
                { id: 2, name: "Série de 7 jours", description: "Jouer pendant 7 jours consécutifs", icon: "🔥", unlocked: true },
                { id: 3, name: "Score Parfait", description: "Obtenir 100% à un quiz Difficile", icon: "🎯", unlocked: false },
                { id: 4, name: "Vitesse Lumière", description: "Terminer un quiz en moins de 1 minute", icon: "⚡", unlocked: false },
                { id: 5, name: "Expert JS", description: "Maîtriser la catégorie JavaScript", icon: "📜", unlocked: true },
                { id: 6, name: "Encyclopédie", description: "Répondre à 500 questions", icon: "📚", unlocked: false }
            ]);

            const activeBadge = ref(null);

            // --- Chart Initialization ---
            const initChart = () => {
                const canvas = document.getElementById('evolutionChart');
                if (!canvas) return;
                
                const ctx = canvas.getContext('2d');
                
                // Génération de données aléatoires pour la démo (30 jours)
                const labels = Array.from({length: 30}, (_, i) => `J-${30-i}`);
                const dataPoints = Array.from({length: 30}, () => 60 + Math.random() * 35); // Scores entre 60 et 95

                // Dégradé pour le remplissage sous la courbe
                const gradient = ctx.createLinearGradient(0, 0, 0, 300);
                gradient.addColorStop(0, 'rgba(37, 99, 235, 0.2)'); // Blue start
                gradient.addColorStop(1, 'rgba(37, 99, 235, 0)');   // Transparent end

                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Score Moyen',
                            data: dataPoints,
                            borderColor: '#2563EB', // Blue-600
                            borderWidth: 3,
                            backgroundColor: gradient,
                            fill: true,
                            tension: 0.4, // Courbe douce (Bezier)
                            pointRadius: 0, // Points cachés par défaut
                            pointHoverRadius: 6,
                            pointBackgroundColor: '#2563EB',
                            pointBorderColor: '#fff',
                            pointBorderWidth: 2
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        interaction: {
                            intersect: false,
                            mode: 'index',
                        },
                        plugins: {
                            legend: { display: false }, // Pas de légende
                            tooltip: {
                                backgroundColor: 'rgba(15, 23, 42, 0.9)', // Slate-900
                                titleFont: { family: '-apple-system', size: 13 },
                                bodyFont: { family: '-apple-system', size: 13 },
                                padding: 10,
                                cornerRadius: 12,
                                displayColors: false,
                                callbacks: {
                                    label: (context) => `${Math.round(context.raw)}%`
                                }
                            }
                        },
                        scales: {
                            x: {
                                grid: { display: false, drawBorder: false },
                                ticks: { display: false } // Pas de labels X pour épuré
                            },
                            y: {
                                min: 0,
                                max: 100,
                                border: { display: false },
                                grid: {
                                    color: 'rgba(148, 163, 184, 0.1)', // Grille très subtile
                                    drawBorder: false,
                                },
                                ticks: {
                                    font: { family: '-apple-system', size: 10 },
                                    color: '#94a3b8',
                                    stepSize: 25
                                }
                            }
                        }
                    }
                });
            };

            // --- Interactions ---
            const goBack = () => {
                // Pour la démo : 
                alert("Retour vers la page précédente");
            };

            const goHome = () => {
                alert("Navigation vers Accueil");
            };
            
            const showBadgeDetails = (badge) => {
                activeBadge.value = badge;
            };

            // --- Lifecycle ---
            onMounted(() => {
                // Délai pour laisser l'animation d'entrée se jouer un peu avant le chart
                setTimeout(initChart, 300);
            });

            return {
                globalStats,
                badges,
                activeBadge,
                goBack,
                goHome,
                showBadgeDetails
            };
        }
    }).mount('#app');
</script>

</body>
</html>