Spaces:
Running
Running
File size: 4,478 Bytes
526de8a cc444c9 526de8a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | <!DOCTYPE html>
<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>
|