|
|
<!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> |
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-10px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
.floating { |
|
|
animation: float 3s ease-in-out infinite; |
|
|
} |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6e8efb, #a777e3); |
|
|
} |
|
|
.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); |
|
|
} |
|
|
.custom-scrollbar::-webkit-scrollbar { |
|
|
width: 6px; |
|
|
} |
|
|
.custom-scrollbar::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
border-radius: 10px; |
|
|
} |
|
|
.custom-scrollbar::-webkit-scrollbar-thumb { |
|
|
background: #888; |
|
|
border-radius: 10px; |
|
|
} |
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover { |
|
|
background: #555; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 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 gradient-bg text-white"> |
|
|
<div class="flex items-center justify-center h-16 px-4"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-bolt text-2xl mr-2 text-yellow-300"></i> |
|
|
<span class="text-xl font-bold">ZENITH</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto custom-scrollbar"> |
|
|
<div class="space-y-1"> |
|
|
<a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md bg-black bg-opacity-20 text-white"> |
|
|
<i class="fas fa-home mr-3"></i> |
|
|
Dashboard |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md hover:bg-black hover:bg-opacity-10 text-white"> |
|
|
<i class="fas fa-chart-line mr-3"></i> |
|
|
Analytics |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md hover:bg-black hover:bg-opacity-10 text-white"> |
|
|
<i class="fas fa-envelope mr-3"></i> |
|
|
Messages |
|
|
<span class="ml-auto bg-red-500 text-xs font-semibold px-2 py-0.5 rounded-full">5</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md hover:bg-black hover:bg-opacity-10 text-white"> |
|
|
<i class="fas fa-calendar mr-3"></i> |
|
|
Calendar |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md hover:bg-black hover:bg-opacity-10 text-white"> |
|
|
<i class="fas fa-users mr-3"></i> |
|
|
Team |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md hover:bg-black hover:bg-opacity-10 text-white"> |
|
|
<i class="fas fa-cog mr-3"></i> |
|
|
Settings |
|
|
</a> |
|
|
</div> |
|
|
<div class="mt-auto mb-4"> |
|
|
<div class="bg-black bg-opacity-20 rounded-lg p-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-10 w-10 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=""> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">John Doe</p> |
|
|
<p class="text-xs">Admin</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col flex-1 overflow-hidden"> |
|
|
|
|
|
<div class="flex items-center justify-between h-16 px-6 bg-white border-b border-gray-200"> |
|
|
<div class="flex items-center"> |
|
|
<button class="md:hidden text-gray-500 focus:outline-none"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
<div class="relative mx-4"> |
|
|
<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 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-purple-500 focus:border-purple-500 sm:text-sm" placeholder="Search..." type="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"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
<div class="relative"> |
|
|
<button id="user-menu" class="flex items-center 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=""> |
|
|
<span class="ml-2 text-sm font-medium">John Doe</span> |
|
|
<i class="fas fa-chevron-down ml-1 text-xs"></i> |
|
|
</button> |
|
|
<div id="user-dropdown" class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 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> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-auto p-6 custom-scrollbar"> |
|
|
<div class="mb-6"> |
|
|
<h1 class="text-3xl font-bold text-gray-800">Welcome back, John!</h1> |
|
|
<p class="text-gray-600">Here's what's happening with your projects today.</p> |
|
|
</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 p-6 card-hover transition-all duration-300"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4"> |
|
|
<i class="fas fa-wallet text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Total Revenue</p> |
|
|
<p class="text-2xl font-semibold text-gray-800">$24,780</p> |
|
|
<p class="text-xs text-green-500 flex items-center"> |
|
|
<i class="fas fa-arrow-up mr-1"></i> 12.5% from last month |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6 card-hover transition-all duration-300"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4"> |
|
|
<i class="fas fa-users text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">New Customers</p> |
|
|
<p class="text-2xl font-semibold text-gray-800">1,245</p> |
|
|
<p class="text-xs text-green-500 flex items-center"> |
|
|
<i class="fas fa-arrow-up mr-1"></i> 8.3% from last month |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6 card-hover transition-all duration-300"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4"> |
|
|
<i class="fas fa-shopping-cart text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Total Orders</p> |
|
|
<p class="text-2xl font-semibold text-gray-800">845</p> |
|
|
<p class="text-xs text-red-500 flex items-center"> |
|
|
<i class="fas fa-arrow-down mr-1"></i> 2.1% from last month |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6 card-hover transition-all duration-300"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-green-100 text-green-600 mr-4"> |
|
|
<i class="fas fa-chart-pie text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Conversion Rate</p> |
|
|
<p class="text-2xl font-semibold text-gray-800">3.6%</p> |
|
|
<p class="text-xs text-green-500 flex items-center"> |
|
|
<i class="fas fa-arrow-up mr-1"></i> 1.2% from last month |
|
|
</p> |
|
|
</div> |
|
|
</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 p-6 card-hover transition-all duration-300"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Sales Overview</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 text-xs bg-purple-100 text-purple-600 rounded-full">Week</button> |
|
|
<button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">Month</button> |
|
|
<button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">Year</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-64"> |
|
|
<canvas id="salesChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6 card-hover transition-all duration-300"> |
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4">Recent Activity</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="p-2 bg-blue-100 rounded-full text-blue-600"> |
|
|
<i class="fas fa-user-plus"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-800">New customer registered</p> |
|
|
<p class="text-xs text-gray-500">Sarah Johnson - 2 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="p-2 bg-green-100 rounded-full text-green-600"> |
|
|
<i class="fas fa-shopping-cart"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-800">New order received</p> |
|
|
<p class="text-xs text-gray-500">Order #45892 - 4 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="p-2 bg-purple-100 rounded-full text-purple-600"> |
|
|
<i class="fas fa-truck"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-800">Order shipped</p> |
|
|
<p class="text-xs text-gray-500">Order #45890 - 6 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="p-2 bg-yellow-100 rounded-full text-yellow-600"> |
|
|
<i class="fas fa-comment"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-800">New review received</p> |
|
|
<p class="text-xs text-gray-500">Michael Brown - 1 day ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden card-hover transition-all duration-300"> |
|
|
<div class="px-6 py-4 border-b border-gray-200"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Recent Projects</h2> |
|
|
<button class="px-4 py-2 bg-purple-600 text-white text-sm font-medium rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> |
|
|
Add Project |
|
|
</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">Action</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"> |
|
|
<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=4&w=256&h=256&q=60" alt=""> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Website Redesign</div> |
|
|
<div class="text-sm text-gray-500">Marketing</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-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> |
|
|
<img class="h-8 w-8 rounded-full border-2 border-white" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> |
|
|
<img class="h-8 w-8 rounded-full border-2 border-white" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80" alt=""> |
|
|
</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.5"> |
|
|
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 75%"></div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 Jun 2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<a href="#" class="text-purple-600 hover:text-purple-900">Edit</a> |
|
|
</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"> |
|
|
<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=4&w=256&h=256&q=60" alt=""> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Mobile App Development</div> |
|
|
<div class="text-sm text-gray-500">Development</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-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> |
|
|
<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=""> |
|
|
</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.5"> |
|
|
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30 Jun 2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<a href="#" class="text-purple-600 hover:text-purple-900">Edit</a> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed bottom-6 right-6"> |
|
|
<button class="p-4 bg-purple-600 text-white rounded-full shadow-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 floating"> |
|
|
<i class="fas fa-plus text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<script> |
|
|
|
|
|
const userMenuButton = document.getElementById('user-menu'); |
|
|
const userDropdown = document.getElementById('user-dropdown'); |
|
|
|
|
|
userMenuButton.addEventListener('click', () => { |
|
|
userDropdown.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', (event) => { |
|
|
if (!userMenuButton.contains(event.target) && !userDropdown.contains(event.target)) { |
|
|
userDropdown.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const salesCtx = document.getElementById('salesChart').getContext('2d'); |
|
|
const salesChart = new Chart(salesCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], |
|
|
datasets: [{ |
|
|
label: 'Sales', |
|
|
data: [12000, 19000, 15000, 20000, 18000, 24000], |
|
|
backgroundColor: 'rgba(124, 58, 237, 0.1)', |
|
|
borderColor: 'rgba(124, 58, 237, 1)', |
|
|
borderWidth: 2, |
|
|
tension: 0.4, |
|
|
fill: true, |
|
|
pointBackgroundColor: 'rgba(124, 58, 237, 1)', |
|
|
pointRadius: 4, |
|
|
pointHoverRadius: 6 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true, |
|
|
grid: { |
|
|
drawBorder: false |
|
|
}, |
|
|
ticks: { |
|
|
callback: function(value) { |
|
|
return '$' + value.toLocaleString(); |
|
|
} |
|
|
} |
|
|
}, |
|
|
x: { |
|
|
grid: { |
|
|
display: false |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const cards = document.querySelectorAll('.card-hover'); |
|
|
cards.forEach(card => { |
|
|
card.addEventListener('mouseenter', () => { |
|
|
card.style.transition = 'all 0.3s ease'; |
|
|
}); |
|
|
}); |
|
|
</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=Boobs00/shop" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
