WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!-- Replace with your HTML Code (Leave empty if not needed) --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>User Analytics Dashboard</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); body { font-family: 'Inter', sans-serif; background-color: #f8fafc; } .sidebar-link:hover { background-color: #f1f5f9; color: #3b82f6; } .card { background: white; border-radius: 0.75rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); } </style> </head> <body class="flex min-h-screen"> <!-- Sidebar --> <aside class="w-64 bg-white border-r border-slate-200 hidden md:flex flex-col"> <div class="p-6 border-b border-slate-100"> <div class="flex items-center gap-2 text-blue-600 font-bold text-xl"> <i class="fas fa-chart-pie"></i> <span>StatPulse</span> </div> </div> <nav class="flex-1 p-4 space-y-2"> <a href="#" class="flex items-center gap-3 p-3 text-blue-600 bg-blue-50 rounded-lg font-medium"> <i class="fas fa-th-large"></i> Dashboard </a> <a href="#" class="sidebar-link flex items-center gap-3 p-3 text-slate-600 rounded-lg transition-all"> <i class="fas fa-users"></i> User Management </a> <a href="#" class="sidebar-link flex items-center gap-3 p-3 text-slate-600 rounded-lg transition-all"> <i class="fas fa-chart-line"></i> Growth Metrics </a> <a href="#" class="sidebar-link flex items-center gap-3 p-3 text-slate-600 rounded-lg transition-all"> <i class="fas fa-envelope"></i> Notifications </a> <a href="#" class="sidebar-link flex items-center gap-3 p-3 text-slate-600 rounded-lg transition-all"> <i class="fas fa-cog"></i> Settings </a> </nav> <div class="p-4 border-t border-slate-100"> <div class="flex items-center gap-3 p-2"> <img src="https://ui-avatars.com/api/?name=Alex+Smith&background=3b82f6&color=fff" class="w-10 h-10 rounded-full" alt="Profile"> <div> <p class="text-sm font-semibold text-slate-800">Alex Smith</p> <p class="text-xs text-slate-500">Administrator</p> </div> </div> </div> </aside> <!-- Main Content --> <main class="flex-1 flex flex-col min-w-0 overflow-hidden"> <!-- Header --> <header class="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-8"> <h1 class="text-xl font-semibold text-slate-800">Overview</h1> <div class="flex items-center gap-4"> <div class="relative"> <input type="text" placeholder="Search data..." class="pl-10 pr-4 py-2 bg-slate-100 border-none rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none w-64"> <i class="fas fa-search absolute left-3 top-3 text-slate-400 text-sm"></i> </div> <button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors"> <i class="fas fa-download mr-2"></i> Export Report </button> </div> </header> <!-- Dashboard Body --> <div class="p-8 overflow-y-auto"> <!-- Stats Grid --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> <div class="card p-6 border border-slate-100"> <div class="flex justify-between items-start"> <div> <p class="text-sm text-slate-500 font-medium">Total Users</p> <h3 class="text-2xl font-bold text-slate-800 mt-1">45,285</h3> </div> <div class="bg-blue-100 p-2 rounded-lg text-blue-600"> <i class="fas fa-users text-xl"></i> </div> </div> <p class="text-xs mt-4 text-emerald-600 font-medium"> <i class="fas fa-arrow-up mr-1"></i> 12.5% <span class="text-slate-400 font-normal ml-1">vs last month</span> </p> </div> <div class="card p-6 border border-slate-100"> <div class="flex justify-between items-start"> <div> <p class="text-sm text-slate-500 font-medium">Active Now</p> <h3 class="text-2xl font-bold text-slate-800 mt-1">1,204</h3> </div> <div class="bg-emerald-100 p-2 rounded-lg text-emerald-600"> <i class="fas fa-bolt text-xl"></i> </div> </div> <p class="text-xs mt-4 text-emerald-600 font-medium"> <span class="inline-block w-2 h-2 bg-emerald-500 rounded-full mr-1 animate-pulse"></span> Live tracking </p> </div> <div class="card p-6 border border-slate-100"> <div class="flex justify-between items-start"> <div> <p class="text-sm text-slate-500 font-medium">Avg. Session</p> <h3 class="text-2xl font-bold text-slate-800 mt-1">12m 42s</h3> </div> <div class="bg-purple-100 p-2 rounded-lg text-purple-600"> <i class="fas fa-clock text-xl"></i> </div> </div> <p class="text-xs mt-4 text-rose-600 font-medium"> <i class="fas fa-arrow-down mr-1"></i> 3.1% <span class="text-slate-400 font-normal ml-1">vs last month</span> </p> </div> <div class="card p-6 border border-slate-100"> <div class="flex justify-between items-start"> <div> <p class="text-sm text-slate-500 font-medium">Conversion Rate</p> <h3 class="text-2xl font-bold text-slate-800 mt-1">4.82%</h3> </div> <div class="bg-amber-100 p-2 rounded-lg text-amber-600"> <i class="fas fa-shopping-cart text-xl"></i> </div> </div> <p class="text-xs mt-4 text-emerald-600 font-medium"> <i class="fas fa-arrow-up mr-1"></i> 0.6% <span class="text-slate-400 font-normal ml-1">vs last month</span> </p> </div> </div> <!-- Charts Section --> <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> <div class="lg:col-span-2 card p-6"> <div class="flex justify-between items-center mb-6"> <h4 class="font-bold text-slate-800 text-lg">User Growth</h4> <select class="bg-slate-50 border border-slate-200 text-sm rounded-md px-2 py-1 outline-none"> <option>Last 7 Days</option> <option>Last 30 Days</option> </select> </div> <canvas id="growthChart" height="250"></canvas> </div> <div class="card p-6"> <h4 class="font-bold text-slate-800 text-lg mb-6">Sessions by Device</h4> <canvas id="deviceChart" height="250"></canvas> <div class="mt-6 space-y-3"> <div class="flex justify-between text-sm"> <span class="text-slate-500"><i class="fas fa-desktop mr-2 text-blue-500"></i> Desktop</span> <span class="font-semibold text-slate-700">58%</span> </div> <div class="flex justify-between text-sm"> <span class="text-slate-500"><i class="fas fa-mobile-alt mr-2 text-purple-500"></i> Mobile</span> <span class="font-semibold text-slate-700">32%</span> </div> <div class="flex justify-between text-sm"> <span class="text-slate-500"><i class="fas fa-tablet-alt mr-2 text-amber-500"></i> Tablet</span> <span class="font-semibold text-slate-700">10%</span> </div> </div> </div> </div> <!-- Table Section --> <div class="card overflow-hidden"> <div class="p-6 border-b border-slate-100 flex justify-between items-center"> <h4 class="font-bold text-slate-800 text-lg">Recent User Activity</h4> <button class="text-blue-600 text-sm font-medium hover:underline">View All</button> </div> <div class="overflow-x-auto"> <table class="w-full text-left"> <thead class="bg-slate-50 text-slate-500 text-xs uppercase font-semibold"> <tr> <th class="px-6 py-4">User</th> <th class="px-6 py-4">Status</th> <th class="px-6 py-4">Location</th> <th class="px-6 py-4">Last Active</th> <th class="px-6 py-4">Action</th> </tr> </thead> <tbody class="divide-y divide-slate-100 text-sm text-slate-600"> <tr> <td class="px-6 py-4 flex items-center gap-3"> <img src="https://i.pravatar.cc/150?u=1" class="w-8 h-8 rounded-full" alt=""> <div> <p class="font-medium text-slate-800">Sarah Jenkins</p> <p class="text-xs text-slate-400">sarah.j@example.com</p> </div> </td> <td class="px-6 py-4"> <span class="px-2 py-1 bg-emerald-100 text-emerald-700 rounded-full text-xs">Active</span> </td> <td class="px-6 py-4">London, UK</td> <td class="px-6 py-4">2 mins ago</td> <td class="px-6 py-4"> <button class="text-slate-400 hover:text-blue-600"><i class="fas fa-ellipsis-h"></i></button> </td> </tr> <tr> <td class="px-6 py-4 flex items-center gap-3"> <img src="https://i.pravatar.cc/150?u=2" class="w-8 h-8 rounded-full" alt=""> <div> <p class="font-medium text-slate-800">Michael Chen</p> <p class="text-xs text-slate-400">m.chen@example.com</p> </div> </td> <td class="px-6 py-4"> <span class="px-2 py-1 bg-slate-100 text-slate-600 rounded-full text-xs">Offline</span> </td> <td class="px-6 py-4">San Francisco, US</td> <td class="px-6 py-4">45 mins ago</td> <td class="px-6 py-4"> <button class="text-slate-400 hover:text-blue-600"><i class="fas fa-ellipsis-h"></i></button> </td> </tr> <tr> <td class="px-6 py-4 flex items-center gap-3"> <img src="https://i.pravatar.cc/150?u=3" class="w-8 h-8 rounded-full" alt=""> <div> <p class="font-medium text-slate-800">Emma Wilson</p> <p class="text-xs text-slate-400">emma.w@example.com</p> </div> </td> <td class="px-6 py-4"> <span class="px-2 py-1 bg-emerald-100 text-emerald-700 rounded-full text-xs">Active</span> </td> <td class="px-6 py-4">Berlin, DE</td> <td class="px-6 py-4">Just now</td> <td class="px-6 py-4"> <button class="text-slate-400 hover:text-blue-600"><i class="fas fa-ellipsis-h"></i></button> </td> </tr> </tbody> </table> </div> </div> </div> </main> <script> // Growth Chart const ctxGrowth = document.getElementById('growthChart').getContext('2d'); new Chart(ctxGrowth, { type: 'line', data: { labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], datasets: [{ label: 'New Users', data: [400, 550, 480, 720, 680, 900, 1100], borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.1)', fill: true, tension: 0.4, borderWidth: 3, pointRadius: 4, pointBackgroundColor: '#fff', pointBorderColor: '#3b82f6' }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { grid: { borderDash: [5, 5] }, beginAtZero: true }, x: { grid: { display: false } } } } }); // Device Chart const ctxDevice = document.getElementById('deviceChart').getContext('2d'); new Chart(ctxDevice, { type: 'doughnut', data: { labels: ['Desktop', 'Mobile', 'Tablet'], datasets: [{ data: [58, 32, 10], backgroundColor: ['#3b82f6', '#a855f7', '#f59e0b'], hoverOffset: 4, borderWidth: 0 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, cutout: '75%' } }); </script> </body> </html>
/* Replace with your CSS Code (Leave empty if not needed) */
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Open Advanced Editor
HTML
CSS
JS
<!-- Replace with your HTML Code (Leave empty if not needed) --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>User Analytics Dashboard</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); body { font-family: 'Inter', sans-serif; background-color: #f8fafc; } .sidebar-link:hover { background-color: #f1f5f9; color: #3b82f6; } .card { background: white; border-radius: 0.75rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); } </style> </head> <body class="flex min-h-screen"> <!-- Sidebar --> <aside class="w-64 bg-white border-r border-slate-200 hidden md:flex flex-col"> <div class="p-6 border-b border-slate-100"> <div class="flex items-center gap-2 text-blue-600 font-bold text-xl"> <i class="fas fa-chart-pie"></i> <span>StatPulse</span> </div> </div> <nav class="flex-1 p-4 space-y-2"> <a href="#" class="flex items-center gap-3 p-3 text-blue-600 bg-blue-50 rounded-lg font-medium"> <i class="fas fa-th-large"></i> Dashboard </a> <a href="#" class="sidebar-link flex items-center gap-3 p-3 text-slate-600 rounded-lg transition-all"> <i class="fas fa-users"></i> User Management </a> <a href="#" class="sidebar-link flex items-center gap-3 p-3 text-slate-600 rounded-lg transition-all"> <i class="fas fa-chart-line"></i> Growth Metrics </a> <a href="#" class="sidebar-link flex items-center gap-3 p-3 text-slate-600 rounded-lg transition-all"> <i class="fas fa-envelope"></i> Notifications </a> <a href="#" class="sidebar-link flex items-center gap-3 p-3 text-slate-600 rounded-lg transition-all"> <i class="fas fa-cog"></i> Settings </a> </nav> <div class="p-4 border-t border-slate-100"> <div class="flex items-center gap-3 p-2"> <img src="https://ui-avatars.com/api/?name=Alex+Smith&background=3b82f6&color=fff" class="w-10 h-10 rounded-full" alt="Profile"> <div> <p class="text-sm font-semibold text-slate-800">Alex Smith</p> <p class="text-xs text-slate-500">Administrator</p> </div> </div> </div> </aside> <!-- Main Content --> <main class="flex-1 flex flex-col min-w-0 overflow-hidden"> <!-- Header --> <header class="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-8"> <h1 class="text-xl font-semibold text-slate-800">Overview</h1> <div class="flex items-center gap-4"> <div class="relative"> <input type="text" placeholder="Search data..." class="pl-10 pr-4 py-2 bg-slate-100 border-none rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none w-64"> <i class="fas fa-search absolute left-3 top-3 text-slate-400 text-sm"></i> </div> <button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors"> <i class="fas fa-download mr-2"></i> Export Report </button> </div> </header> <!-- Dashboard Body --> <div class="p-8 overflow-y-auto"> <!-- Stats Grid --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> <div class="card p-6 border border-slate-100"> <div class="flex justify-between items-start"> <div> <p class="text-sm text-slate-500 font-medium">Total Users</p> <h3 class="text-2xl font-bold text-slate-800 mt-1">45,285</h3> </div> <div class="bg-blue-100 p-2 rounded-lg text-blue-600"> <i class="fas fa-users text-xl"></i> </div> </div> <p class="text-xs mt-4 text-emerald-600 font-medium"> <i class="fas fa-arrow-up mr-1"></i> 12.5% <span class="text-slate-400 font-normal ml-1">vs last month</span> </p> </div> <div class="card p-6 border border-slate-100"> <div class="flex justify-between items-start"> <div> <p class="text-sm text-slate-500 font-medium">Active Now</p> <h3 class="text-2xl font-bold text-slate-800 mt-1">1,204</h3> </div> <div class="bg-emerald-100 p-2 rounded-lg text-emerald-600"> <i class="fas fa-bolt text-xl"></i> </div> </div> <p class="text-xs mt-4 text-emerald-600 font-medium"> <span class="inline-block w-2 h-2 bg-emerald-500 rounded-full mr-1 animate-pulse"></span> Live tracking </p> </div> <div class="card p-6 border border-slate-100"> <div class="flex justify-between items-start"> <div> <p class="text-sm text-slate-500 font-medium">Avg. Session</p> <h3 class="text-2xl font-bold text-slate-800 mt-1">12m 42s</h3> </div> <div class="bg-purple-100 p-2 rounded-lg text-purple-600"> <i class="fas fa-clock text-xl"></i> </div> </div> <p class="text-xs mt-4 text-rose-600 font-medium"> <i class="fas fa-arrow-down mr-1"></i> 3.1% <span class="text-slate-400 font-normal ml-1">vs last month</span> </p> </div> <div class="card p-6 border border-slate-100"> <div class="flex justify-between items-start"> <div> <p class="text-sm text-slate-500 font-medium">Conversion Rate</p> <h3 class="text-2xl font-bold text-slate-800 mt-1">4.82%</h3> </div> <div class="bg-amber-100 p-2 rounded-lg text-amber-600"> <i class="fas fa-shopping-cart text-xl"></i> </div> </div> <p class="text-xs mt-4 text-emerald-600 font-medium"> <i class="fas fa-arrow-up mr-1"></i> 0.6% <span class="text-slate-400 font-normal ml-1">vs last month</span> </p> </div> </div> <!-- Charts Section --> <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> <div class="lg:col-span-2 card p-6"> <div class="flex justify-between items-center mb-6"> <h4 class="font-bold text-slate-800 text-lg">User Growth</h4> <select class="bg-slate-50 border border-slate-200 text-sm rounded-md px-2 py-1 outline-none"> <option>Last 7 Days</option> <option>Last 30 Days</option> </select> </div> <canvas id="growthChart" height="250"></canvas> </div> <div class="card p-6"> <h4 class="font-bold text-slate-800 text-lg mb-6">Sessions by Device</h4> <canvas id="deviceChart" height="250"></canvas> <div class="mt-6 space-y-3"> <div class="flex justify-between text-sm"> <span class="text-slate-500"><i class="fas fa-desktop mr-2 text-blue-500"></i> Desktop</span> <span class="font-semibold text-slate-700">58%</span> </div> <div class="flex justify-between text-sm"> <span class="text-slate-500"><i class="fas fa-mobile-alt mr-2 text-purple-500"></i> Mobile</span> <span class="font-semibold text-slate-700">32%</span> </div> <div class="flex justify-between text-sm"> <span class="text-slate-500"><i class="fas fa-tablet-alt mr-2 text-amber-500"></i> Tablet</span> <span class="font-semibold text-slate-700">10%</span> </div> </div> </div> </div> <!-- Table Section --> <div class="card overflow-hidden"> <div class="p-6 border-b border-slate-100 flex justify-between items-center"> <h4 class="font-bold text-slate-800 text-lg">Recent User Activity</h4> <button class="text-blue-600 text-sm font-medium hover:underline">View All</button> </div> <div class="overflow-x-auto"> <table class="w-full text-left"> <thead class="bg-slate-50 text-slate-500 text-xs uppercase font-semibold"> <tr> <th class="px-6 py-4">User</th> <th class="px-6 py-4">Status</th> <th class="px-6 py-4">Location</th> <th class="px-6 py-4">Last Active</th> <th class="px-6 py-4">Action</th> </tr> </thead> <tbody class="divide-y divide-slate-100 text-sm text-slate-600"> <tr> <td class="px-6 py-4 flex items-center gap-3"> <img src="https://i.pravatar.cc/150?u=1" class="w-8 h-8 rounded-full" alt=""> <div> <p class="font-medium text-slate-800">Sarah Jenkins</p> <p class="text-xs text-slate-400">sarah.j@example.com</p> </div> </td> <td class="px-6 py-4"> <span class="px-2 py-1 bg-emerald-100 text-emerald-700 rounded-full text-xs">Active</span> </td> <td class="px-6 py-4">London, UK</td> <td class="px-6 py-4">2 mins ago</td> <td class="px-6 py-4"> <button class="text-slate-400 hover:text-blue-600"><i class="fas fa-ellipsis-h"></i></button> </td> </tr> <tr> <td class="px-6 py-4 flex items-center gap-3"> <img src="https://i.pravatar.cc/150?u=2" class="w-8 h-8 rounded-full" alt=""> <div> <p class="font-medium text-slate-800">Michael Chen</p> <p class="text-xs text-slate-400">m.chen@example.com</p> </div> </td> <td class="px-6 py-4"> <span class="px-2 py-1 bg-slate-100 text-slate-600 rounded-full text-xs">Offline</span> </td> <td class="px-6 py-4">San Francisco, US</td> <td class="px-6 py-4">45 mins ago</td> <td class="px-6 py-4"> <button class="text-slate-400 hover:text-blue-600"><i class="fas fa-ellipsis-h"></i></button> </td> </tr> <tr> <td class="px-6 py-4 flex items-center gap-3"> <img src="https://i.pravatar.cc/150?u=3" class="w-8 h-8 rounded-full" alt=""> <div> <p class="font-medium text-slate-800">Emma Wilson</p> <p class="text-xs text-slate-400">emma.w@example.com</p> </div> </td> <td class="px-6 py-4"> <span class="px-2 py-1 bg-emerald-100 text-emerald-700 rounded-full text-xs">Active</span> </td> <td class="px-6 py-4">Berlin, DE</td> <td class="px-6 py-4">Just now</td> <td class="px-6 py-4"> <button class="text-slate-400 hover:text-blue-600"><i class="fas fa-ellipsis-h"></i></button> </td> </tr> </tbody> </table> </div> </div> </div> </main> <script> // Growth Chart const ctxGrowth = document.getElementById('growthChart').getContext('2d'); new Chart(ctxGrowth, { type: 'line', data: { labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], datasets: [{ label: 'New Users', data: [400, 550, 480, 720, 680, 900, 1100], borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.1)', fill: true, tension: 0.4, borderWidth: 3, pointRadius: 4, pointBackgroundColor: '#fff', pointBorderColor: '#3b82f6' }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { grid: { borderDash: [5, 5] }, beginAtZero: true }, x: { grid: { display: false } } } } }); // Device Chart const ctxDevice = document.getElementById('deviceChart').getContext('2d'); new Chart(ctxDevice, { type: 'doughnut', data: { labels: ['Desktop', 'Mobile', 'Tablet'], datasets: [{ data: [58, 32, 10], backgroundColor: ['#3b82f6', '#a855f7', '#f59e0b'], hoverOffset: 4, borderWidth: 0 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, cutout: '75%' } }); </script> </body> </html>
/* Replace with your CSS Code (Leave empty if not needed) */
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Validating your code, please wait...