Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Admin Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=PT+Sans:wght@400;700&display=swap" rel="stylesheet"> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| body { | |
| font-family: 'PT Sans', sans-serif; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| </style> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#001F3D', | |
| accent: '#E663A9', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-100 text-primary min-h-screen"> | |
| <!-- Admin Navigation --> | |
| <nav class="bg-primary text-white py-4 px-6"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <a href="/admin" class="text-2xl font-bold">Admin Dashboard</a> | |
| <div class="space-x-4"> | |
| <a href="#" class="hover:text-accent transition-colors">Leads</a> | |
| <a href="#" class="hover:text-accent transition-colors">Settings</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Admin Content --> | |
| <div class="container mx-auto px-6 py-8"> | |
| <h1 class="text-3xl font-bold mb-8">Analytics Dashboard</h1> | |
| <!-- Key Metrics --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <h3 class="text-lg font-semibold mb-2">Total Visitors</h3> | |
| <p class="text-3xl font-bold text-accent">1,247</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <h3 class="text-lg font-semibold mb-2">Total Completions</h3> | |
| <p class="text-3xl font-bold text-accent">893</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <h3 class="text-lg font-semibold mb-2">Average Score</h3> | |
| <p class="text-3xl font-bold text-accent">62%</p> | |
| </div> | |
| </div> | |
| <!-- Score Distribution --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm mb-8"> | |
| <h2 class="text-xl font-bold mb-4">Score Distribution</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <h3 class="font-semibold mb-2">0-39% (Beginner)</h3> | |
| <div class="w-full bg-gray-200 rounded-full h-4"> | |
| <div class="bg-red-500 h-4 rounded-full" style="width: 25%"></div> | |
| </div> | |
| <p class="text-sm mt-1">223 users</p> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold mb-2">40-74% (Intermediate)</h3> | |
| <div class="w-full bg-gray-200 rounded-full h-4"> | |
| <div class="bg-yellow-500 h-4 rounded-full" style="width: 45%"></div> | |
| </div> | |
| <p class="text-sm mt-1">402 users</p> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold mb-2">75-100% (Advanced)</h3> | |
| <div class="w-full bg-gray-200 rounded-full h-4"> | |
| <div class="bg-green-500 h-4 rounded-full" style="width: 30%"></div> | |
| </div> | |
| <p class="text-sm mt-1">268 users</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Answer Breakdown --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <h2 class="text-xl font-bold mb-4">Answer Breakdown</h2> | |
| <p class="text-gray-600 mb-4">Question analysis would be implemented here in a production environment.</p> | |
| </div> | |
| </div> | |
| <script> | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |