John does - CodeRocketJohn does
User profile
Latest components
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eventbrite Admin - Dashboard</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<style>
.gradient-bg {
background: linear-gradient(135deg, #F05537, #F07167);
}
.logo-spin {
transition: transform 0.3s ease;
}
.logo-spin:hover {
transform: rotate(360deg);
}
.action-button {
transition: all 0.2s ease;
}
.action-button:hover {
transform: translateY(-2px);
}
.table-row-animate {
transition: all 0.2s ease;
}
.table-row-animate:hover {
background-color: #F8FAFC;
}
.nav-item {
transition: all 0.2s ease;
}
.nav-item:hover {
transform: translateY(-2px);
}
</style>
<body class="bg-gray-50">
<nav class="gradient-bg text-white p-4 shadow-lg sticky top-0 z-50">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-2">
<a href="./dashboard" class="flex items-center space-x-4 group">
<div class="bg-white p-2.5 rounded-xl shadow-lg group-hover:shadow-2xl transition-all duration-300">
<i class="fas fa-ticket-alt text-2xl text-orange-500 logo-spin"></i>
</div>
<span class="text-2xl font-bold">Eventbrite Admin</span>
</a>
</div>
<div class="flex items-center space-x-8">
<div class="nav-item flex items-center">
<i class="fas fa-home mr-2"></i>
<a href="/dashboard" class="hover:text-orange-200">Dashboard</a>
</div>
<div class="nav-item flex items-center">
<i class="fas fa-th-large mr-2"></i>
<a href="/categories" class="hover:text-orange-200">Categories</a>
</div>
<div class="nav-item flex items-center">
<i class="fas fa-calendar-alt mr-2"></i>
<a href="/events" class="hover:text-orange-200">Events</a>
</div>
<div class="nav-item flex items-center">
<i class="fas fa-user-shield mr-2"></i>
<a href="/profile" class="hover:text-orange-200">Admin Profile</a>
</div>
<div class="flex items-center space-x-4 ml-6 border-l pl-6">
<a href="/logout" class="bg-white text-orange-500 hover:bg-orange-100 px-4 py-2 rounded-lg flex items-center action-button">
<i class="fas fa-sign-out-alt mr-2"></i>Logout
</a>
</div>
</div>
</div>
</nav>
<main class="container mx-auto p-6 space-y-8">
<!-- Event Organizer Verification Section -->
<div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800 flex items-center">
<i class="fas fa-user-check mr-3 text-orange-500"></i>
Event Organizer Verification
</h2>
<span class="bg-orange-100 text-orange-800 px-4 py-2 rounded-lg">
Pending Requests: 0
</span>
</div>
<div class="overflow-x-auto">
<table class="min-w-full">
<thead class="bg-gradient-to-r from-orange-50 to-orange-100">
<tr>
<th class="px-6 py-3 text-left text-gray-700">Profile</th>
<th class="px-6 py-3 text-left text-gray-700">Organizer Details</th>
<th class="px-6 py-3 text-left text-gray-700">Status</th>
<th class="px-6 py-3 text-left text-gray-700">Request Date</th>
<th class="px-6 py-3 text-left text-gray-700">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="table-row-animate">
<td class="px-6 py-4">
<img src="profile-image.jpg" class="h-20 w-20 rounded-full border-2 border-orange-200 object-cover" alt="Profile">
</td>
<td class="px-6 py-4">
<div class="font-medium text-gray-800">John Doe</div>
<div class="text-sm text-gray-500">john.doe@example.com</div>
<div class="text-xs text-orange-600 mt-1">
<i class="fas fa-building mr-1"></i>
Organization: Example Corp
</div>
</td>
<td class="px-6 py-4">
<span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full flex items-center w-fit">
<i class="fas fa-clock mr-2"></i>Pending Verification
</span>
</td>
<td class="px-6 py-4">
<span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full flex items-center w-fit">
<i class="far fa-calendar-alt mr-2"></i>2025-02-01
</span>
</td>
<td class="px-6 py-4">
<div class="flex space-x-2">
<button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 flex items-center action-button">
<i class="fas fa-check mr-2"></i>Approve
</button>
<button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 flex items-center action-button">
<i class="fas fa-times mr-2"></i>Disapprove
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- All Users Management Section -->
<div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800 flex items-center">
<i class="fas fa-users mr-3 text-orange-500"></i>
Platform Users Management
</h2>
<div class="flex space-x-4">
<div class="bg-green-100 text-green-800 px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-user-check mr-2"></i>
Active Users: 10
</div>
<div class="bg-red-100 text-red-800 px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-user-slash mr-2"></i>
Blocked Users: 5
</div>
</div>
</div>
<div class="overflow-x-auto">
<table class="min-w-full">
<thead class="bg-gradient-to-r from-orange-50 to-orange-100">
<tr>
<th class="px-6 py-3 text-left text-gray-700">Profile</th>
<th class="px-6 py-3 text-left text-gray-700">User Info</th>
<th class="px-6 py-3 text-left text-gray-700">Join Date</th>
<th class="px-6 py-3 text-left text-gray-700">User Type</th>
<th class="px-6 py-3 text-left text-gray-700">Status</th>
<th class="px-6 py-3 text-left text-gray-700">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="table-row-animate">
<td class="px-6 py-4">
<img src="profile-image.jpg" class="h-16 w-16 rounded-full border-2 border-orange-200 object-cover" alt="Profile">
</td>
<td class="px-6 py-4">
<div class="font-medium text-gray-800">Jane Doe</div>
<div class="text-sm text-gray-500">jane.doe@example.com</div>
<div class="text-xs text-gray-400 mt-1">
<i class="fas fa-map-marker-alt mr-1"></i>
Location: City, Country
</div>
</td>
<td class="px-6 py-4">
<span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full flex items-center w-fit">
<i class="far fa-calendar-alt mr-2"></i>2025-01-15
</span>
</td>
<td class="px-6 py-4">
<span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full flex items-center w-fit">
<i class="fas fa-user-tie mr-2"></i>Organizer
</span>
</td>
<td class="px-6 py-4">
<span class="px-3 py-1 bg-green-100 text-green-800 rounded-full flex items-center w-fit">
<i class="fas fa-check-circle mr-2"></i>Active
</span>
</td>
<td class="px-6 py-4">
<div class="flex space-x-2">
<button class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 flex items-center action-button">
<i class="fas fa-ban mr-2"></i>Block User
</button>
<button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 flex items-center action-button">
<i class="fas fa-user-check mr-2"></i>Unblock User
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</body>
</html>
give it these two ( background: linear-gradient(90deg, rgba(17,24,39,0.8) 0%, rgba(17,24,39,0.4) 100%);
+ orange-600)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard - EventHub</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.7.0/chart.min.js"></script>
</head>
<style>
.gradient-bg {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}
.card-hover {
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: 0 12px 20px -8px rgba(99, 102, 241, 0.2);
}
.stats-card {
transition: all 0.3s ease;
border: 1px solid rgba(229, 231, 235, 0.5);
}
.stats-card:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
border-color: #6366f1;
}
.sidebar {
background: linear-gradient(135deg, #FF6A00 0%, #1E3A8A 100%); /* Orange to Blue gradient */
}
.sidebar a {
transition: background-color 0.3s;
}
.sidebar a:hover {
background-color: #ea580c; /* Darker orange when hovered */
}
.sidebar-header {
background-color: #1f2937; /* Darker header background */
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
animation: fadeIn 0.3s ease-in-out;
}
.progress-ring {
transition: stroke-dashoffset 0.35s;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
.dark-mode {
filter: invert(1) hue-rotate(180deg);
}
</style>
<body class="bg-gray-50">
<div class="flex h-screen">
<!-- Enhanced Sidebar -->
<aside class="sidebar w-64 bg-gray-900 text-white">
<div class="p-6">
<div class="flex items-center space-x-3">
<svg class="h-8 w-8 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
<h1 class="text-2xl font-bold">EventHub</h1>
</div>
</div>
<nav class="mt-6 space-y-1">
<a href="#" class="flex items-center px-6 py-3 bg-indigo-600 text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
Dashboard
</a>
<a href="#" class="flex items-center px-6 py-3 text-gray-400 hover:bg-gray-800 hover:text-white transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
Users
<span class="ml-auto bg-indigo-500 text-white text-xs px-2 py-1 rounded-full">New</span>
</a>
<a href="#" class="flex items-center px-6 py-3 text-gray-400 hover:bg-gray-800 hover:text-white transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
Events
</a>
<a href="#" class="flex items-center px-6 py-3 text-gray-400 hover:bg-gray-800 hover:text-white transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
Analytics
</a>
</nav>
</aside>
<main class="flex-1 overflow-y-auto">
<!-- Enhanced Header -->
<header class="bg-white shadow-sm sticky top-0 z-10">
<div class="px-6 py-4">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-4">
<h1 class="text-2xl font-bold text-gray-900">Dashboard Overview</h1>
<span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">All Systems Active</span>
</div>
<div class="flex items-center space-x-4">
<button class="p-2 hover:bg-gray-100 rounded-full relative">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
<span class="absolute top-0 right-0 h-4 w-4 bg-red-500 rounded-full text-xs text-white flex items-center justify-center">3</span>
</button>
<div class="flex items-center space-x-2">
<img src="/api/placeholder/32/32" alt="Admin" class="h-8 w-8 rounded-full ring-2 ring-indigo-500">
<div>
<span class="text-sm font-medium text-gray-700">Admin User</span>
<p class="text-xs text-gray-500">Super Admin</p>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="p-6 space-y-6">
<!-- Enhanced Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<div class="stats-card bg-white p-6 rounded-lg shadow-sm card-hover">
<div class="flex justify-between items-start">
<div>
<h3 class="text-gray-500 text-sm font-medium">Total Users</h3>
<p class="text-3xl font-bold text-gray-900 mt-2">12,345</p>
</div>
<div class="p-2 bg-indigo-100 rounded-lg">
<svg class="h-6 w-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</div>
</div>
<div class="mt-4 flex items-center">
<span class="text-green-500 text-sm flex items-center">
<svg class="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg>
+12% from last month
</span>
</div>
</div>
<div class="stats-card bg-white p-6 rounded-lg shadow-sm card-hover">
<div class="flex justify-between items-start">
<div>
<h3 class="text-gray-500 text-sm font-medium">Active Events</h3>
<p class="text-3xl font-bold text-gray-900 mt-2">1,234</p>
</div>
<div class="p-2 bg-purple-100 rounded-lg">
<svg class="h-6 w-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
</div>
<div class="mt-4 flex items-center">
<span class="text-green-500 text-sm flex items-center">
<svg class="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg>
+5% from last month
</span>
</div>
</div>
<div class="stats-card bg-white p-6 rounded-lg shadow-sm card-hover">
<div class="flex justify-between items-start">
<div>
<h3 class="text-gray-500 text-sm font-medium">Total Categories</h3>
<p class="text-3xl font-bold text-gray-900 mt-2">45</p>
</div>
<div class="p-2 bg-green-100 rounded-lg">
<svg class="h-6 w-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<div class="mt-4 flex items-center">
<span class="text-green-500 text-sm flex items-center">
<svg class="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg>
+8% from last month
</span>
</div>
</div>
</div>
<!-- Enhanced Content Grid -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Recent Events -->
<div class="bg-white rounded-lg shadow-sm p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-lg font-bold text-gray-900">Recent Events</h2>
<button class="text-sm text-indigo-600 hover:text-indigo-800">View All</button>
</div>
<div class="space-y-4">
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors duration-200">
<div class="flex items-center space-x-4">
<div class="p-2 bg-indigo-100 rounded-lg">
<svg class="h-6 w-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
<div>
<h3 class="font-medium text-gray-900">Tech Conference 2025</h3>
<div class="flex items-center space-x-2 mt-1">
<span class="text-sm text-gray-500">Submitted by: John Doe</span>
<span class="text-sm text-gray-500">•</span>
<span class="text-sm text-gray-500">2 hours ago</span>
</div>
</div>
</div>
</div>
<!-- Additional recent events -->
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors duration-200">
<div class="flex items-center space-x-4">
<div class="p-2 bg-purple-100 rounded-lg">
<svg class="h-6 w-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" />
</svg>
</div>
<div>
<h3 class="font-medium text-gray-900">Digital Art Exhibition</h3>
<div class="flex items-center space-x-2 mt-1">
<span class="text-sm text-gray-500">Submitted by: Sarah Chen</span>
<span class="text-sm text-gray-500">•</span>
<span class="text-sm text-gray-500">5 hours ago</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Chart Section -->
<div class="bg-white rounded-lg shadow-sm p-6">
<h2 class="text-lg font-bold text-gray-900 mb-4">Event Participation</h2>
<canvas id="participationChart"></canvas>
</div>
</div>
</div>
</main>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Chart.js setup
const ctx = document.getElementById('participationChart').getContext('2d');
const participationChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
datasets: [{
label: 'Participants',
data: [120, 190, 150, 200, 220, 180, 250],
backgroundColor: 'rgba(99, 102, 241, 0.6)',
borderColor: 'rgba(99, 102, 241, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
});
</script>
</body>
</html>
in html tailwind and css, enhance my code, give it the same colors in this (-orange-600 and background: linear-gradient(90deg, rgba(17,24,39,0.8) 0%, rgba(17,24,39,0.4) 100%);
)
