db / index.html
GMA2's picture
Add 3 files
c38c0f2 verified
Raw History Blame Contribute Delete
39.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Member Dashboard</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>
.sidebar {
transition: all 0.3s ease;
}
.sidebar.collapsed {
width: 70px;
}
.sidebar.collapsed .sidebar-text {
display: none;
}
.sidebar.collapsed .logo-text {
display: none;
}
.sidebar.collapsed .nav-item {
justify-content: center;
}
.main-content {
transition: all 0.3s ease;
}
.main-content.expanded {
margin-left: 70px;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.event-card:hover .event-date {
background-color: #3b82f6;
color: white;
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
</style>
</head>
<body class="bg-gray-50">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="sidebar bg-white text-gray-800 shadow-lg w-64 flex flex-col">
<div class="p-4 flex items-center space-x-2 border-b">
<div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold">
<i class="fas fa-users"></i>
</div>
<span class="logo-text text-xl font-bold">MemberHub</span>
</div>
<div class="p-4 flex items-center space-x-3 border-b">
<div class="relative">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full">
<span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
</div>
<div>
<div class="sidebar-text font-medium">Sarah Johnson</div>
<div class="sidebar-text text-xs text-gray-500">Premium Member</div>
</div>
</div>
<nav class="flex-1 overflow-y-auto py-4">
<div class="space-y-1 px-2">
<a href="#" class="nav-item flex items-center px-3 py-2 text-sm font-medium rounded-md bg-blue-50 text-blue-700">
<i class="fas fa-home mr-3 text-blue-600"></i>
<span class="sidebar-text">Dashboard</span>
</a>
<a href="#" class="nav-item flex items-center px-3 py-2 text-sm font-medium rounded-md hover:bg-gray-100">
<i class="fas fa-user mr-3 text-gray-500"></i>
<span class="sidebar-text">My Profile</span>
</a>
<a href="#" class="nav-item flex items-center px-3 py-2 text-sm font-medium rounded-md hover:bg-gray-100">
<i class="fas fa-calendar-alt mr-3 text-gray-500"></i>
<span class="sidebar-text">Events</span>
</a>
<a href="#" class="nav-item flex items-center px-3 py-2 text-sm font-medium rounded-md hover:bg-gray-100">
<i class="fas fa-file-alt mr-3 text-gray-500"></i>
<span class="sidebar-text">Resources</span>
</a>
<a href="#" class="nav-item flex items-center px-3 py-2 text-sm font-medium rounded-md hover:bg-gray-100">
<i class="fas fa-comments mr-3 text-gray-500"></i>
<span class="sidebar-text">Community</span>
</a>
<a href="#" class="nav-item flex items-center px-3 py-2 text-sm font-medium rounded-md hover:bg-gray-100">
<i class="fas fa-cog mr-3 text-gray-500"></i>
<span class="sidebar-text">Settings</span>
</a>
</div>
<div class="px-2 mt-8">
<h3 class="sidebar-text px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Membership</h3>
<div class="mt-1 space-y-1">
<a href="#" class="nav-item flex items-center px-3 py-2 text-sm font-medium rounded-md hover:bg-gray-100">
<i class="fas fa-id-card mr-3 text-gray-500"></i>
<span class="sidebar-text">Membership Status</span>
</a>
<a href="#" class="nav-item flex items-center px-3 py-2 text-sm font-medium rounded-md hover:bg-gray-100">
<i class="fas fa-credit-card mr-3 text-gray-500"></i>
<span class="sidebar-text">Payment History</span>
</a>
<a href="#" class="nav-item flex items-center px-3 py-2 text-sm font-medium rounded-md hover:bg-gray-100">
<i class="fas fa-handshake mr-3 text-gray-500"></i>
<span class="sidebar-text">Volunteer Roles</span>
</a>
</div>
</div>
</nav>
<div class="p-4 border-t">
<button class="flex items-center text-sm font-medium text-gray-600 hover:text-gray-900">
<i class="fas fa-sign-out-alt mr-2"></i>
<span class="sidebar-text">Logout</span>
</button>
</div>
</div>
<!-- Main Content -->
<div class="main-content flex-1 overflow-y-auto">
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">
<h1 class="text-2xl font-bold text-gray-900">Member Dashboard</h1>
<div class="flex items-center space-x-4">
<button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
<i class="fas fa-bell"></i>
<span class="sr-only">Notifications</span>
</button>
<button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
<i class="fas fa-envelope"></i>
<span class="sr-only">Messages</span>
</button>
<button id="sidebarToggle" class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
<i class="fas fa-bars"></i>
<span class="sr-only">Toggle sidebar</span>
</button>
</div>
</div>
</header>
<main class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8">
<!-- Welcome Banner -->
<div class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl shadow-md overflow-hidden mb-8">
<div class="p-6 md:p-8 flex flex-col md:flex-row items-center justify-between">
<div class="text-white">
<h2 class="text-2xl font-bold mb-2">Welcome back, Sarah!</h2>
<p class="opacity-90">You have 3 upcoming events this week. Check your calendar for details.</p>
</div>
<button class="mt-4 md:mt-0 px-6 py-2 bg-white text-blue-600 font-medium rounded-full hover:bg-gray-100 transition duration-300">
View Calendar
</button>
</div>
</div>
<!-- Quick Stats -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
<div class="p-6">
<div class="flex items-center">
<div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
<i class="fas fa-calendar-check text-lg"></i>
</div>
<div>
<p class="text-sm font-medium text-gray-500">Upcoming Events</p>
<p class="text-2xl font-semibold text-gray-800">3</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
<div class="p-6">
<div class="flex items-center">
<div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
<i class="fas fa-users text-lg"></i>
</div>
<div>
<p class="text-sm font-medium text-gray-500">Community Members</p>
<p class="text-2xl font-semibold text-gray-800">1,248</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
<div class="p-6">
<div class="flex items-center">
<div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4">
<i class="fas fa-file-invoice-dollar text-lg"></i>
</div>
<div>
<p class="text-sm font-medium text-gray-500">Membership Renewal</p>
<p class="text-2xl font-semibold text-gray-800">45 days</p>
</div>
</div>
</div>
</div>
</div>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Left Column -->
<div class="lg:col-span-2 space-y-6">
<!-- Membership Status -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200">
<h3 class="text-lg font-medium text-gray-900">Membership Status</h3>
</div>
<div class="p-6">
<div class="flex flex-col md:flex-row items-start md:items-center justify-between">
<div class="mb-4 md:mb-0">
<div class="flex items-center">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
Premium Member
</span>
<span class="ml-2 text-sm text-gray-500">Since June 2018</span>
</div>
<p class="mt-2 text-sm text-gray-600">Your membership will renew automatically on <span class="font-medium">October 15, 2023</span></p>
</div>
<button class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Upgrade Membership
</button>
</div>
<div class="mt-6">
<h4 class="text-sm font-medium text-gray-500 mb-2">Membership Benefits</h4>
<div class="grid grid-cols-2 gap-4">
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span class="text-sm text-gray-700">Access to all events</span>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span class="text-sm text-gray-700">Premium resources</span>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span class="text-sm text-gray-700">Networking opportunities</span>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span class="text-sm text-gray-700">Discounts on workshops</span>
</div>
</div>
</div>
</div>
</div>
<!-- Upcoming Events -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
<h3 class="text-lg font-medium text-gray-900">Upcoming Events</h3>
<a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View all</a>
</div>
<div class="divide-y divide-gray-200">
<!-- Event 1 -->
<div class="p-6 event-card transition duration-300">
<div class="flex">
<div class="event-date flex-shrink-0 flex flex-col items-center justify-center w-16 h-16 rounded-lg bg-gray-100 text-gray-900 border border-gray-200">
<span class="text-xs font-semibold leading-none">SEP</span>
<span class="text-xl font-bold leading-none">12</span>
</div>
<div class="ml-4">
<h4 class="text-lg font-medium text-gray-900">Annual Conference 2023</h4>
<div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6">
<div class="flex items-center text-sm text-gray-500 mt-1">
<i class="far fa-clock mr-1.5"></i>
9:00 AM - 5:00 PM
</div>
<div class="flex items-center text-sm text-gray-500 mt-1">
<i class="fas fa-map-marker-alt mr-1.5"></i>
Convention Center, Downtown
</div>
</div>
<div class="mt-2 flex items-center text-sm text-gray-500">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
Keynote Speaker: Jane Smith
</span>
</div>
<div class="mt-3 flex space-x-3">
<button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<i class="far fa-calendar-plus mr-2"></i> Add to Calendar
</button>
<button class="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Register Now
</button>
</div>
</div>
</div>
</div>
<!-- Event 2 -->
<div class="p-6 event-card transition duration-300">
<div class="flex">
<div class="event-date flex-shrink-0 flex flex-col items-center justify-center w-16 h-16 rounded-lg bg-gray-100 text-gray-900 border border-gray-200">
<span class="text-xs font-semibold leading-none">SEP</span>
<span class="text-xl font-bold leading-none">15</span>
</div>
<div class="ml-4">
<h4 class="text-lg font-medium text-gray-900">Leadership Workshop</h4>
<div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6">
<div class="flex items-center text-sm text-gray-500 mt-1">
<i class="far fa-clock mr-1.5"></i>
1:00 PM - 4:00 PM
</div>
<div class="flex items-center text-sm text-gray-500 mt-1">
<i class="fas fa-map-marker-alt mr-1.5"></i>
Virtual (Zoom)
</div>
</div>
<div class="mt-3 flex space-x-3">
<button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<i class="far fa-calendar-plus mr-2"></i> Add to Calendar
</button>
<button class="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Register Now
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Community Forum -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
<h3 class="text-lg font-medium text-gray-900">Community Discussions</h3>
<a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View all</a>
</div>
<div class="divide-y divide-gray-200">
<!-- Discussion 1 -->
<div class="p-6">
<div class="flex items-start">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="flex items-center">
<h4 class="text-sm font-medium text-gray-900">Michael Brown</h4>
<span class="ml-2 text-xs text-gray-500">2 hours ago</span>
</div>
<p class="mt-1 text-sm text-gray-700">Has anyone attended the new certification program? Would love to hear your thoughts before I sign up.</p>
<div class="mt-2 flex items-center space-x-4">
<button class="flex items-center text-sm text-gray-500 hover:text-gray-700">
<i class="far fa-comment mr-1.5"></i> 5 replies
</button>
<button class="flex items-center text-sm text-gray-500 hover:text-gray-700">
<i class="far fa-heart mr-1.5"></i> 12 likes
</button>
</div>
</div>
</div>
</div>
<!-- Discussion 2 -->
<div class="p-6">
<div class="flex items-start">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/28.jpg" alt="">
</div>
<div class="ml-4">
<div class="flex items-center">
<h4 class="text-sm font-medium text-gray-900">Lisa Chen</h4>
<span class="ml-2 text-xs text-gray-500">5 hours ago</span>
</div>
<p class="mt-1 text-sm text-gray-700">Sharing some resources I found helpful for the upcoming certification exam. Hope this helps others preparing!</p>
<div class="mt-2 flex items-center space-x-4">
<button class="flex items-center text-sm text-gray-500 hover:text-gray-700">
<i class="far fa-comment mr-1.5"></i> 8 replies
</button>
<button class="flex items-center text-sm text-gray-500 hover:text-gray-700">
<i class="far fa-heart mr-1.5"></i> 23 likes
</button>
</div>
</div>
</div>
</div>
</div>
<div class="px-6 py-4 bg-gray-50">
<div class="flex">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
</div>
<div class="ml-4 flex-1">
<div class="relative">
<textarea rows="2" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" placeholder="Start a discussion..."></textarea>
<div class="absolute bottom-2 right-2">
<button type="button" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Post
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right Column -->
<div class="space-y-6">
<!-- Quick Actions -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200">
<h3 class="text-lg font-medium text-gray-900">Quick Actions</h3>
</div>
<div class="p-6 grid grid-cols-2 gap-4">
<a href="#" class="group flex flex-col items-center p-4 rounded-lg border border-gray-200 hover:bg-blue-50 hover:border-blue-200 transition duration-300">
<div class="p-3 rounded-full bg-blue-100 text-blue-600 group-hover:bg-blue-200 mb-2">
<i class="fas fa-file-invoice-dollar"></i>
</div>
<span class="text-sm font-medium text-gray-700 group-hover:text-blue-700">Make Payment</span>
</a>
<a href="#" class="group flex flex-col items-center p-4 rounded-lg border border-gray-200 hover:bg-green-50 hover:border-green-200 transition duration-300">
<div class="p-3 rounded-full bg-green-100 text-green-600 group-hover:bg-green-200 mb-2">
<i class="fas fa-calendar-plus"></i>
</div>
<span class="text-sm font-medium text-gray-700 group-hover:text-green-700">Add Event</span>
</a>
<a href="#" class="group flex flex-col items-center p-4 rounded-lg border border-gray-200 hover:bg-purple-50 hover:border-purple-200 transition duration-300">
<div class="p-3 rounded-full bg-purple-100 text-purple-600 group-hover:bg-purple-200 mb-2">
<i class="fas fa-file-upload"></i>
</div>
<span class="text-sm font-medium text-gray-700 group-hover:text-purple-700">Upload Resource</span>
</a>
<a href="#" class="group flex flex-col items-center p-4 rounded-lg border border-gray-200 hover:bg-yellow-50 hover:border-yellow-200 transition duration-300">
<div class="p-3 rounded-full bg-yellow-100 text-yellow-600 group-hover:bg-yellow-200 mb-2">
<i class="fas fa-poll"></i>
</div>
<span class="text-sm font-medium text-gray-700 group-hover:text-yellow-700">Take Survey</span>
</a>
</div>
</div>
<!-- Recent Resources -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
<h3 class="text-lg font-medium text-gray-900">Recent Resources</h3>
<a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View all</a>
</div>
<div class="divide-y divide-gray-200">
<div class="p-6">
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="p-2 rounded-lg bg-blue-100 text-blue-600">
<i class="fas fa-file-pdf"></i>
</div>
</div>
<div class="ml-4">
<h4 class="text-sm font-medium text-gray-900">Annual Report 2023</h4>
<p class="mt-1 text-xs text-gray-500">Uploaded: Sep 1, 2023</p>
<div class="mt-2">
<button class="text-xs font-medium text-blue-600 hover:text-blue-500">
<i class="fas fa-download mr-1"></i> Download
</button>
</div>
</div>
</div>
</div>
<div class="p-6">
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="p-2 rounded-lg bg-green-100 text-green-600">
<i class="fas fa-file-excel"></i>
</div>
</div>
<div class="ml-4">
<h4 class="text-sm font-medium text-gray-900">Member Directory</h4>
<p class="mt-1 text-xs text-gray-500">Updated: Aug 25, 2023</p>
<div class="mt-2">
<button class="text-xs font-medium text-blue-600 hover:text-blue-500">
<i class="fas fa-download mr-1"></i> Download
</button>
</div>
</div>
</div>
</div>
<div class="p-6">
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="p-2 rounded-lg bg-purple-100 text-purple-600">
<i class="fas fa-file-video"></i>
</div>
</div>
<div class="ml-4">
<h4 class="text-sm font-medium text-gray-900">Workshop Recording</h4>
<p class="mt-1 text-xs text-gray-500">Uploaded: Aug 20, 2023</p>
<div class="mt-2">
<button class="text-xs font-medium text-blue-600 hover:text-blue-500">
<i class="fas fa-play mr-1"></i> Watch
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Organization Contacts -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200">
<h3 class="text-lg font-medium text-gray-900">Organization Contacts</h3>
</div>
<div class="p-6 space-y-4">
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="p-2 rounded-full bg-gray-100 text-gray-600">
<i class="fas fa-user-tie"></i>
</div>
</div>
<div class="ml-4">
<h4 class="text-sm font-medium text-gray-900">John Smith</h4>
<p class="text-xs text-gray-500">Executive Director</p>
<p class="mt-1 text-xs text-blue-600 hover:text-blue-500">
<i class="fas fa-envelope mr-1"></i> john@organization.org
</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="p-2 rounded-full bg-gray-100 text-gray-600">
<i class="fas fa-calendar-alt"></i>
</div>
</div>
<div class="ml-4">
<h4 class="text-sm font-medium text-gray-900">Events Team</h4>
<p class="text-xs text-gray-500">Event Coordination</p>
<p class="mt-1 text-xs text-blue-600 hover:text-blue-500">
<i class="fas fa-envelope mr-1"></i> events@organization.org
</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="p-2 rounded-full bg-gray-100 text-gray-600">
<i class="fas fa-question-circle"></i>
</div>
</div>
<div class="ml-4">
<h4 class="text-sm font-medium text-gray-900">Member Support</h4>
<p class="text-xs text-gray-500">General Inquiries</p>
<p class="mt-1 text-xs text-blue-600 hover:text-blue-500">
<i class="fas fa-envelope mr-1"></i> support@organization.org
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script>
// Toggle sidebar
document.getElementById('sidebarToggle').addEventListener('click', function() {
document.querySelector('.sidebar').classList.toggle('collapsed');
document.querySelector('.main-content').classList.toggle('expanded');
});
// Simulate loading for demo purposes
document.addEventListener('DOMContentLoaded', function() {
// You can add more interactive functionality here
console.log('Dashboard loaded');
// Example: Add pulse animation to notification button when there are unread notifications
const notificationButton = document.querySelector('[aria-label="Notifications"]');
notificationButton.classList.add('animate-pulse');
notificationButton.addEventListener('click', function() {
this.classList.remove('animate-pulse');
});
});
</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=GMA2/db" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>