|
|
<!DOCTYPE html> |
|
|
<html lang="es"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Modern UI Dashboard - Portfolio Demo</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> |
|
|
|
|
|
.card-hover { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.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-item:hover .sidebar-icon { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
.progress-bar { |
|
|
transition: width 0.6s ease; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
.animate-fade-in { |
|
|
animation: fadeIn 0.5s ease-out forwards; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="hidden md:flex md:flex-shrink-0"> |
|
|
<div class="flex flex-col w-64 bg-indigo-700 text-white"> |
|
|
<div class="flex items-center justify-center h-16 px-4 border-b border-indigo-600"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-cube text-2xl mr-2"></i> |
|
|
<span class="text-xl font-semibold">DevDash</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto"> |
|
|
<nav class="flex-1 space-y-2"> |
|
|
<a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md bg-indigo-800 text-white group"> |
|
|
<i class="sidebar-icon fas fa-home mr-3 text-indigo-300 group-hover:text-white transition-transform"></i> |
|
|
Dashboard |
|
|
</a> |
|
|
<a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-indigo-200 hover:bg-indigo-800 hover:text-white group"> |
|
|
<i class="sidebar-icon fas fa-chart-line mr-3 text-indigo-300 group-hover:text-white transition-transform"></i> |
|
|
Analytics |
|
|
</a> |
|
|
<a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-indigo-200 hover:bg-indigo-800 hover:text-white group"> |
|
|
<i class="sidebar-icon fas fa-project-diagram mr-3 text-indigo-300 group-hover:text-white transition-transform"></i> |
|
|
Projects |
|
|
</a> |
|
|
<a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-indigo-200 hover:bg-indigo-800 hover:text-white group"> |
|
|
<i class="sidebar-icon fas fa-tasks mr-3 text-indigo-300 group-hover:text-white transition-transform"></i> |
|
|
Tasks |
|
|
</a> |
|
|
<a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-indigo-200 hover:bg-indigo-800 hover:text-white group"> |
|
|
<i class="sidebar-icon fas fa-users mr-3 text-indigo-300 group-hover:text-white transition-transform"></i> |
|
|
Team |
|
|
</a> |
|
|
<a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-indigo-200 hover:bg-indigo-800 hover:text-white group"> |
|
|
<i class="sidebar-icon fas fa-cog mr-3 text-indigo-300 group-hover:text-white transition-transform"></i> |
|
|
Settings |
|
|
</a> |
|
|
</nav> |
|
|
<div class="mt-auto mb-4 px-4"> |
|
|
<div class="bg-indigo-800 rounded-lg p-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-lightbulb text-yellow-300 text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-white">Upgrade to Pro</p> |
|
|
<p class="text-xs text-indigo-200">Get access to all features</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="mt-2 w-full bg-yellow-400 hover:bg-yellow-500 text-yellow-900 font-medium py-1 px-3 rounded-md text-sm transition-colors"> |
|
|
Upgrade Now |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col flex-1 overflow-hidden"> |
|
|
|
|
|
<header class="bg-white shadow-sm z-10"> |
|
|
<div class="flex items-center justify-between px-6 py-3"> |
|
|
<div class="flex items-center"> |
|
|
<button class="md:hidden mr-4 text-gray-500 focus:outline-none"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
<div class="relative"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<i class="fas fa-search text-gray-400"></i> |
|
|
</div> |
|
|
<input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Search..."> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<i class="fas fa-bell text-xl"></i> |
|
|
</button> |
|
|
<button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<i class="fas fa-envelope text-xl"></i> |
|
|
</button> |
|
|
<div class="relative"> |
|
|
<button id="user-menu" class="flex items-center space-x-2 focus:outline-none"> |
|
|
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="User profile"> |
|
|
<span class="hidden md:block text-sm font-medium text-gray-700">John Doe</span> |
|
|
<i class="fas fa-chevron-down text-gray-400 text-xs"></i> |
|
|
</button> |
|
|
<div id="user-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50"> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 overflow-y-auto p-6 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h1 class="text-2xl font-bold text-gray-900">Dashboard</h1> |
|
|
<button class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-md text-sm transition-colors flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> New Project |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
|
|
<div class="bg-white rounded-lg shadow-sm p-6 card-hover animate-fade-in" style="animation-delay: 0.1s;"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500 truncate">Total Projects</p> |
|
|
<p class="mt-1 text-3xl font-semibold text-gray-900">24</p> |
|
|
</div> |
|
|
<div class="bg-indigo-100 p-3 rounded-full"> |
|
|
<i class="fas fa-folder-open text-indigo-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="text-green-600 text-sm font-medium"> |
|
|
<i class="fas fa-arrow-up mr-1"></i> 12% |
|
|
</span> |
|
|
<span class="text-gray-500 text-sm ml-2">vs last month</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-6 card-hover animate-fade-in" style="animation-delay: 0.2s;"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500 truncate">Completed Tasks</p> |
|
|
<p class="mt-1 text-3xl font-semibold text-gray-900">142</p> |
|
|
</div> |
|
|
<div class="bg-green-100 p-3 rounded-full"> |
|
|
<i class="fas fa-check-circle text-green-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="text-green-600 text-sm font-medium"> |
|
|
<i class="fas fa-arrow-up mr-1"></i> 19% |
|
|
</span> |
|
|
<span class="text-gray-500 text-sm ml-2">vs last month</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-6 card-hover animate-fade-in" style="animation-delay: 0.3s;"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500 truncate">Team Members</p> |
|
|
<p class="mt-1 text-3xl font-semibold text-gray-900">8</p> |
|
|
</div> |
|
|
<div class="bg-blue-100 p-3 rounded-full"> |
|
|
<i class="fas fa-users text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="text-green-600 text-sm font-medium"> |
|
|
<i class="fas fa-arrow-up mr-1"></i> 3% |
|
|
</span> |
|
|
<span class="text-gray-500 text-sm ml-2">vs last month</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-6 card-hover animate-fade-in" style="animation-delay: 0.4s;"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500 truncate">Productivity</p> |
|
|
<p class="mt-1 text-3xl font-semibold text-gray-900">87%</p> |
|
|
</div> |
|
|
<div class="bg-purple-100 p-3 rounded-full"> |
|
|
<i class="fas fa-chart-pie text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="text-red-600 text-sm font-medium"> |
|
|
<i class="fas fa-arrow-down mr-1"></i> 2% |
|
|
</span> |
|
|
<span class="text-gray-500 text-sm ml-2">vs last month</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
|
|
|
<div class="lg:col-span-2 bg-white rounded-lg shadow-sm p-6 card-hover"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h2 class="text-lg font-medium text-gray-900">Project Progress</h2> |
|
|
<div class="relative"> |
|
|
<select class="appearance-none bg-gray-100 border border-gray-300 text-gray-700 py-1 px-3 pr-8 rounded-md leading-tight focus:outline-none focus:bg-white focus:border-indigo-500 text-sm"> |
|
|
<option>This Week</option> |
|
|
<option>This Month</option> |
|
|
<option>This Year</option> |
|
|
</select> |
|
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> |
|
|
<i class="fas fa-chevron-down text-xs"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-64"> |
|
|
<canvas id="progressChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-6 card-hover"> |
|
|
<h2 class="text-lg font-medium text-gray-900 mb-6">Recent Activity</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="User avatar"> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-900">Jane Cooper</p> |
|
|
<p class="text-sm text-gray-500">Completed "Design System" task</p> |
|
|
<p class="text-xs text-gray-400 mt-1">2 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="User avatar"> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-900">Alex Morgan</p> |
|
|
<p class="text-sm text-gray-500">Commented on "Dashboard UI"</p> |
|
|
<p class="text-xs text-gray-400 mt-1">4 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="User avatar"> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-900">Michael Jordan</p> |
|
|
<p class="text-sm text-gray-500">Created new project "Marketing Site"</p> |
|
|
<p class="text-xs text-gray-400 mt-1">6 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="User avatar"> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-900">Emma Watson</p> |
|
|
<p class="text-sm text-gray-500">Assigned you to "Bug Fixes" task</p> |
|
|
<p class="text-xs text-gray-400 mt-1">1 day ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="mt-4 text-sm font-medium text-indigo-600 hover:text-indigo-500"> |
|
|
View all activity <i class="fas fa-arrow-right ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm overflow-hidden card-hover"> |
|
|
<div class="px-6 py-4 border-b border-gray-200"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<h2 class="text-lg font-medium text-gray-900">Current Projects</h2> |
|
|
<button class="text-sm font-medium text-indigo-600 hover:text-indigo-500"> |
|
|
View all projects |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Project</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Team</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Due Date</th> |
|
|
<th scope="col" class="relative px-6 py-3"><span class="sr-only">Actions</span></th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-md flex items-center justify-center"> |
|
|
<i class="fas fa-box-open text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Dashboard UI</div> |
|
|
<div class="text-sm text-gray-500">Web Application</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="h-8 w-8 rounded-full border-2 border-white" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Team member"> |
|
|
<img class="h-8 w-8 rounded-full border-2 border-white" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Team member"> |
|
|
<img class="h-8 w-8 rounded-full border-2 border-white" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Team member"> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-indigo-600 h-2 rounded-full progress-bar" style="width: 75%"></div> |
|
|
</div> |
|
|
<div class="text-xs text-gray-500 mt-1">75% complete</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 15, 2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-edit"></i></button> |
|
|
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-md flex items-center justify-center"> |
|
|
<i class="fas fa-mobile-alt text-blue-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Mobile App</div> |
|
|
<div class="text-sm text-gray-500">iOS & Android</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="h-8 w-8 rounded-full border-2 border-white" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Team member"> |
|
|
<img class="h-8 w-8 rounded-full border-2 border-white" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Team member"> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-blue-500 h-2 rounded-full progress-bar" style="width: 40%"></div> |
|
|
</div> |
|
|
<div class="text-xs text-gray-500 mt-1">40% complete</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jul 1, 2023</td> |
|
|
<td class="px- |
|
|
</html> |
