Hugging Face's logo

Spaces:
agentpx
/
dashboard
Running

App Files Community
dashboard / index.html
agentpx's picture
agentpx
Add 3 files
1665104 verified
raw
history blame contribute delete
21.4 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Dashboard UI</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* Custom CSS for elements Tailwind can't easily handle */
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.sidebar {
transition: all 0.3s ease;
}
.chart-container {
position: relative;
height: 300px;
}
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
position: absolute;
z-index: 10;
}
.sidebar.active {
transform: translateX(0);
}
}
</style>
</head>
<body class="bg-gray-100 font-sans">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="sidebar bg-white w-64 flex-shrink-0 shadow-lg">
<div class="p-4 gradient-bg text-white">
<h1 class="text-2xl font-bold">DashboardPro</h1>
<p class="text-sm opacity-80">Welcome back, Admin</p>
</div>
<nav class="mt-6">
<div class="px-4">
<div class="py-2 px-3 flex items-center rounded-lg bg-indigo-100 text-indigo-700">
<i class="fas fa-tachometer-alt mr-3"></i>
<span>Dashboard</span>
</div>
<div class="py-2 px-3 flex items-center rounded-lg hover:bg-gray-100 mt-1">
<i class="fas fa-chart-line mr-3 text-gray-500"></i>
<span>Analytics</span>
</div>
<div class="py-2 px-3 flex items-center rounded-lg hover:bg-gray-100 mt-1">
<i class="fas fa-users mr-3 text-gray-500"></i>
<span>Users</span>
</div>
<div class="py-2 px-3 flex items-center rounded-lg hover:bg-gray-100 mt-1">
<i class="fas fa-cog mr-3 text-gray-500"></i>
<span>Settings</span>
</div>
<div class="py-2 px-3 flex items-center rounded-lg hover:bg-gray-100 mt-1">
<i class="fas fa-envelope mr-3 text-gray-500"></i>
<span>Messages</span>
<span class="ml-auto bg-red-500 text-white text-xs px-2 py-1 rounded-full">5</span>
</div>
</div>
</nav>
<div class="absolute bottom-0 w-full p-4 border-t">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full">
<div class="ml-3">
<p class="text-sm font-medium">Sarah Johnson</p>
<p class="text-xs text-gray-500">Admin</p>
</div>
<button class="ml-auto text-gray-500 hover:text-gray-700">
<i class="fas fa-sign-out-alt"></i>
</button>
</div>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Top Navigation -->
<header class="bg-white shadow-sm z-10">
<div class="flex items-center justify-between px-6 py-4">
<div class="flex items-center">
<button id="sidebarToggle" class="md:hidden mr-4 text-gray-500 hover:text-gray-700">
<i class="fas fa-bars text-xl"></i>
</button>
<h2 class="text-xl font-semibold text-gray-800">Dashboard Overview</h2>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<button class="text-gray-500 hover:text-gray-700">
<i class="fas fa-bell text-xl"></i>
<span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
</button>
</div>
<div class="relative">
<input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
</div>
</div>
</header>
<!-- Main Content Area -->
<main class="flex-1 overflow-y-auto p-6">
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
<div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all duration-300">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">Total Revenue</p>
<h3 class="text-2xl font-bold mt-1">$24,780</h3>
<p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 12.5% from last month</p>
</div>
<div class="bg-indigo-100 p-3 rounded-full text-indigo-700">
<i class="fas fa-dollar-sign text-xl"></i>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all duration-300">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">New Users</p>
<h3 class="text-2xl font-bold mt-1">1,254</h3>
<p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 8.2% from last month</p>
</div>
<div class="bg-blue-100 p-3 rounded-full text-blue-700">
<i class="fas fa-users text-xl"></i>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all duration-300">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">Active Projects</p>
<h3 class="text-2xl font-bold mt-1">42</h3>
<p class="text-red-500 text-sm mt-2"><i class="fas fa-arrow-down mr-1"></i> 3.1% from last month</p>
</div>
<div class="bg-purple-100 p-3 rounded-full text-purple-700">
<i class="fas fa-project-diagram text-xl"></i>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all duration-300">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500 text-sm">Conversion Rate</p>
<h3 class="text-2xl font-bold mt-1">3.6%</h3>
<p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 1.8% from last month</p>
</div>
<div class="bg-green-100 p-3 rounded-full text-green-700">
<i class="fas fa-percentage text-xl"></i>
</div>
</div>
</div>
</div>
<!-- Charts Row -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
<!-- Main Chart -->
<div class="bg-white rounded-xl shadow-md p-6 lg:col-span-2">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold">Revenue Overview</h3>
<div class="flex space-x-2">
<button class="px-3 py-1 text-sm bg-indigo-100 text-indigo-700 rounded-full">Monthly</button>
<button class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full">Weekly</button>
<button class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full">Daily</button>
</div>
</div>
<div class="chart-container">
<canvas id="mainChart"></canvas>
</div>
</div>
<!-- Pie Chart -->
<div class="bg-white rounded-xl shadow-md p-6">
<h3 class="text-lg font-semibold mb-4">Traffic Sources</h3>
<div class="chart-container">
<canvas id="pieChart"></canvas>
</div>
</div>
</div>
<!-- Recent Activity & Projects -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Recent Activity -->
<div class="bg-white rounded-xl shadow-md p-6">
<h3 class="text-lg font-semibold mb-4">Recent Activity</h3>
<div class="space-y-4">
<div class="flex items-start">
<div class="bg-indigo-100 p-2 rounded-full text-indigo-700 mr-3">
<i class="fas fa-user-plus"></i>
</div>
<div>
<p class="font-medium">New user registered</p>
<p class="text-sm text-gray-500">John Doe just signed up as a new member</p>
<p class="text-xs text-gray-400 mt-1">2 minutes ago</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-green-100 p-2 rounded-full text-green-700 mr-3">
<i class="fas fa-shopping-cart"></i>
</div>
<div>
<p class="font-medium">New order received</p>
<p class="text-sm text-gray-500">Order #3245 for $125.00</p>
<p class="text-xs text-gray-400 mt-1">25 minutes ago</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-100 p-2 rounded-full text-blue-700 mr-3">
<i class="fas fa-ticket-alt"></i>
</div>
<div>
<p class="font-medium">New support ticket</p>
<p class="text-sm text-gray-500">Ticket #4567 from Sarah Miller</p>
<p class="text-xs text-gray-400 mt-1">1 hour ago</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-purple-100 p-2 rounded-full text-purple-700 mr-3">
<i class="fas fa-credit-card"></i>
</div>
<div>
<p class="font-medium">Payment processed</p>
<p class="text-sm text-gray-500">Payment of $45.00 from Robert Johnson</p>
<p class="text-xs text-gray-400 mt-1">3 hours ago</p>
</div>
</div>
</div>
</div>
<!-- Projects -->
<div class="bg-white rounded-xl shadow-md p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold">Active Projects</h3>
<button class="text-indigo-600 hover:text-indigo-800">View All</button>
</div>
<div class="space-y-4">
<div class="border-b pb-4">
<div class="flex items-center justify-between mb-2">
<h4 class="font-medium">Website Redesign</h4>
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">In Progress</span>
</div>
<p class="text-sm text-gray-600 mb-3">Complete redesign of company website with modern UI/UX</p>
<div class="flex items-center justify-between">
<div class="flex -space-x-2">
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Team member">
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team member">
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/23.jpg" alt="Team member">
</div>
<span class="text-xs text-gray-500">Due in 5 days</span>
</div>
</div>
<div class="border-b pb-4">
<div class="flex items-center justify-between mb-2">
<h4 class="font-medium">Mobile App Development</h4>
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">On Track</span>
</div>
<p class="text-sm text-gray-600 mb-3">Development of cross-platform mobile application</p>
<div class="flex items-center justify-between">
<div class="flex -space-x-2">
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Team member">
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/34.jpg" alt="Team member">
</div>
<span class="text-xs text-gray-500">Due in 12 days</span>
</div>
</div>
<div>
<div class="flex items-center justify-between mb-2">
<h4 class="font-medium">Marketing Campaign</h4>
<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Planning</span>
</div>
<p class="text-sm text-gray-600 mb-3">Q3 marketing campaign for new product launch</p>
<div class="flex items-center justify-between">
<div class="flex -space-x-2">
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/56.jpg" alt="Team member">
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/67.jpg" alt="Team member">
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/78.jpg" alt="Team member">
</div>
<span class="text-xs text-gray-500">Due in 3 weeks</span>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Toggle sidebar on mobile
document.getElementById('sidebarToggle').addEventListener('click', function() {
document.querySelector('.sidebar').classList.toggle('active');
});
// Main Chart
const mainCtx = document.getElementById('mainChart').getContext('2d');
const mainChart = new Chart(mainCtx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
datasets: [{
label: 'Revenue',
data: [6500, 5900, 8000, 8100, 8600, 9250, 10200],
borderColor: '#667eea',
backgroundColor: 'rgba(102, 126, 234, 0.1)',
borderWidth: 2,
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: false,
grid: {
drawBorder: false
}
},
x: {
grid: {
display: false
}
}
}
}
});
// Pie Chart
const pieCtx = document.getElementById('pieChart').getContext('2d');
const pieChart = new Chart(pieCtx, {
type: 'doughnut',
data: {
labels: ['Direct', 'Organic', 'Referral', 'Social'],
datasets: [{
data: [35, 25, 20, 20],
backgroundColor: [
'#667eea',
'#4c51bf',
'#7f9cf5',
'#a3bffa'
],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
cutout: '70%',
plugins: {
legend: {
position: 'bottom',
labels: {
boxWidth: 12,
padding: 20
}
}
}
}
});
// Card hover effect
const cards = document.querySelectorAll('.card-hover');
cards.forEach(card => {
card.addEventListener('mouseenter', () => {
card.classList.add('shadow-lg');
});
card.addEventListener('mouseleave', () => {
card.classList.remove('shadow-lg');
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=agentpx/dashboard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>