SaaS Analytics & Crypto Dashboard Template

<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SaaS Analytics Dashboard</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = { darkMode: 'class' };
    </script>
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&family=Inter:wght@400;500;700&display=swap");
        body { font-family: "Inter", sans-serif; }
        .font-outfit { font-family: "Outfit", sans-serif; }
    </style>
</head>
<body class="bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 min-h-screen flex flex-col md:flex-row transition-colors duration-300">

    <!-- Sidebar Navigation -->
    <aside class="w-full md:w-64 bg-white dark:bg-slate-900 border-r border-slate-200 dark:border-slate-800 p-6 flex flex-col justify-between shrink-0">
        <div class="space-y-8">
            <!-- Brand Logo -->
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-2xl bg-cyan-500 flex items-center justify-center font-outfit font-extrabold text-slate-950 text-xl shadow-lg shadow-cyan-500/30">
                    ⚡
                </div>
                <span class="font-outfit font-extrabold text-xl tracking-tight text-slate-900 dark:text-white">ApexAnalytics</span>
            </div>

            <!-- Nav Links -->
            <nav class="space-y-2">
                <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-2xl bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 font-semibold text-sm border border-cyan-500/20">
                    <span>📊</span> Overview
                </a>
                <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-2xl text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-white font-medium text-sm transition">
                    <span>💳</span> Transactions
                </a>
                <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-2xl text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-white font-medium text-sm transition">
                    <span>👥</span> Customers
                </a>
                <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-2xl text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-white font-medium text-sm transition">
                    <span>⚙️</span> Settings
                </a>
            </nav>
        </div>

        <div class="p-4 rounded-2xl bg-slate-100 dark:bg-slate-950/60 border border-slate-200 dark:border-slate-800 text-xs text-slate-500 dark:text-slate-400">
            <span class="text-slate-900 dark:text-white font-bold block mb-1">Pro Account</span>
            <span>Active plan expires in 28 days.</span>
        </div>
    </aside>

    <!-- Main Content Area -->
    <main class="flex-1 p-6 sm:p-10 space-y-8 overflow-y-auto">
        <!-- Top Bar -->
        <header class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
            <div>
                <h1 class="font-outfit font-extrabold text-2xl sm:text-3xl text-slate-900 dark:text-white">Analytics Overview</h1>
                <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Welcome back! Here is your real-time performance summary.</p>
            </div>
            <button onclick="refreshData()" class="px-4 py-2.5 rounded-xl bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-bold text-xs shadow-lg shadow-cyan-500/20 transition flex items-center gap-2">
                <span>🔄</span> Refresh Data
            </button>
        </header>

        <!-- KPI Cards Grid -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="p-6 rounded-3xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 space-y-3 shadow-sm">
                <span class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Total Revenue</span>
                <div class="flex items-baseline justify-between">
                    <span id="revVal" class="font-outfit font-extrabold text-2xl text-slate-900 dark:text-white">$48,290</span>
                    <span class="text-xs font-bold text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded-full">+14.2%</span>
                </div>
            </div>
            <div class="p-6 rounded-3xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 space-y-3 shadow-sm">
                <span class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Active Users</span>
                <div class="flex items-baseline justify-between">
                    <span id="userVal" class="font-outfit font-extrabold text-2xl text-slate-900 dark:text-white">12,450</span>
                    <span class="text-xs font-bold text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded-full">+8.1%</span>
                </div>
            </div>
            <div class="p-6 rounded-3xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 space-y-3 shadow-sm">
                <span class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Conversion Rate</span>
                <div class="flex items-baseline justify-between">
                    <span class="font-outfit font-extrabold text-2xl text-slate-900 dark:text-white">4.85%</span>
                    <span class="text-xs font-bold text-cyan-600 dark:text-cyan-400 bg-cyan-500/10 px-2 py-0.5 rounded-full">+2.4%</span>
                </div>
            </div>
            <div class="p-6 rounded-3xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 space-y-3 shadow-sm">
                <span class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Avg Order Value</span>
                <div class="flex items-baseline justify-between">
                    <span class="font-outfit font-extrabold text-2xl text-slate-900 dark:text-white">$142.50</span>
                    <span class="text-xs font-bold text-rose-600 dark:text-rose-400 bg-rose-500/10 px-2 py-0.5 rounded-full">-1.2%</span>
                </div>
            </div>
        </div>

        <!-- Interactive Chart Section -->
        <div class="p-6 rounded-3xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 space-y-6 shadow-sm">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="font-outfit font-bold text-lg text-slate-900 dark:text-white">Revenue Growth & Projections</h2>
                    <p class="text-xs text-slate-500 dark:text-slate-400">Monthly breakdown for fiscal year 2026</p>
                </div>
                <span class="text-xs font-bold text-cyan-600 dark:text-cyan-400 bg-cyan-500/10 px-3 py-1 rounded-full border border-cyan-500/20">Live Sync</span>
            </div>
            <div class="w-full h-64 relative flex items-center justify-center">
                <canvas id="growthChart" class="w-full h-full"></canvas>
            </div>
        </div>
    </main>

    <script>
        function drawChart() {
            const canvas = document.getElementById("growthChart");
            if (!canvas) return;
            const ctx = canvas.getContext("2d");
            const w = canvas.width = canvas.parentElement.clientWidth;
            const h = canvas.height = canvas.parentElement.clientHeight;

            ctx.clearRect(0, 0, w, h);

            const isDark = document.documentElement.classList.contains('dark');
            ctx.strokeStyle = isDark ? "#1e293b" : "#e2e8f0";
            ctx.lineWidth = 1;
            for (let i = 0; i < h; i += 40) {
                ctx.beginPath();
                ctx.moveTo(0, i);
                ctx.lineTo(w, i);
                ctx.stroke();
            }

            const points = [
                {x: 0, y: h * 0.7},
                {x: w * 0.2, y: h * 0.5},
                {x: w * 0.4, y: h * 0.6},
                {x: w * 0.6, y: h * 0.3},
                {x: w * 0.8, y: h * 0.4},
                {x: w, y: h * 0.15}
            ];

            ctx.beginPath();
            ctx.moveTo(points[0].x, points[0].y);
            for (let i = 1; i < points.length; i++) {
                ctx.lineTo(points[i].x, points[i].y);
            }
            ctx.strokeStyle = "#06b6d4";
            ctx.lineWidth = 3;
            ctx.stroke();

            const grad = ctx.createLinearGradient(0, 0, 0, h);
            grad.addColorStop(0, "rgba(6, 182, 212, 0.3)");
            grad.addColorStop(1, "rgba(6, 182, 212, 0.0)");

            ctx.lineTo(w, h);
            ctx.lineTo(0, h);
            ctx.closePath();
            ctx.fillStyle = grad;
            ctx.fill();
        }

        function refreshData() {
            const rev = Math.floor(40000 + Math.random() * 20000);
            const users = Math.floor(10000 + Math.random() * 5000);
            document.getElementById("revVal").innerText = "$" + rev.toLocaleString();
            document.getElementById("userVal").innerText = users.toLocaleString();
            drawChart();
        }

        window.addEventListener("load", drawChart);
        window.addEventListener("resize", drawChart);
    </script>
</body>
</html>

/* Supports both Dark and Light mode via Tailwind class variant */

// Interactive scripts included inside demo view file