|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<meta name="description" content="Modern Blog Admin Panel"> |
|
|
<meta name="keywords" content="blog, admin, dashboard, content management"> |
|
|
<title>Blog Admin 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-collapsed .sidebar-item-text, |
|
|
.sidebar-collapsed .sidebar-dropdown-text { |
|
|
opacity: 0; |
|
|
width: 0; |
|
|
height: 0; |
|
|
overflow: hidden; |
|
|
position: absolute; |
|
|
} |
|
|
|
|
|
.sidebar-collapsed { |
|
|
width: 70px; |
|
|
} |
|
|
|
|
|
.main-content-expanded { |
|
|
margin-left: 250px; |
|
|
} |
|
|
|
|
|
.main-content-collapsed { |
|
|
margin-left: 70px; |
|
|
} |
|
|
|
|
|
.sidebar-transition { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.content-transition { |
|
|
transition: margin-left 0.3s ease; |
|
|
} |
|
|
|
|
|
.dropdown-enter { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.dropdown-enter-active { |
|
|
max-height: 500px; |
|
|
transition: max-height 0.3s ease-in; |
|
|
} |
|
|
|
|
|
.dropdown-exit { |
|
|
max-height: 500px; |
|
|
} |
|
|
|
|
|
.dropdown-exit-active { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease-out; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.sidebar { |
|
|
position: fixed; |
|
|
z-index: 1000; |
|
|
transform: translateX(-100%); |
|
|
} |
|
|
|
|
|
.sidebar-open { |
|
|
transform: translateX(0); |
|
|
} |
|
|
|
|
|
.main-content-expanded, .main-content-collapsed { |
|
|
margin-left: 0; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans"> |
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div id="sidebar" class="sidebar bg-indigo-800 text-white sidebar-transition w-64 flex flex-col"> |
|
|
|
|
|
<div class="p-4 flex items-center justify-between border-b border-indigo-700"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-blog text-2xl mr-3"></i> |
|
|
<span class="sidebar-item-text font-bold text-xl">Blog Admin</span> |
|
|
</div> |
|
|
<button id="toggleSidebar" class="text-white focus:outline-none"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-y-auto"> |
|
|
|
|
|
<div class="p-4"> |
|
|
<a href="#" class="flex items-center text-white hover:bg-indigo-700 p-2 rounded"> |
|
|
<i class="fas fa-tachometer-alt mr-3"></i> |
|
|
<span class="sidebar-item-text">Dashboard</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-t border-indigo-700 pt-2 pb-2"> |
|
|
<div class="dropdown-item"> |
|
|
<button class="flex items-center justify-between w-full text-white hover:bg-indigo-700 p-2 rounded focus:outline-none"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-pen-fancy mr-3"></i> |
|
|
<span class="sidebar-item-text">Content</span> |
|
|
</div> |
|
|
<i class="fas fa-chevron-down sidebar-dropdown-text text-xs"></i> |
|
|
</button> |
|
|
<div class="dropdown-content pl-8 mt-1 hidden"> |
|
|
<a href="#" class="block text-white hover:bg-indigo-700 p-2 rounded sidebar-item-text">All Posts</a> |
|
|
<a href="#" class="block text-white hover:bg-indigo-700 p-2 rounded sidebar-item-text">Add New</a> |
|
|
<a href="#" class="block text-white hover:bg-indigo-700 p-2 rounded sidebar-item-text">Categories</a> |
|
|
<a href="#" class="block text-white hover:bg-indigo-700 p-2 rounded sidebar-item-text">Tags</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-t border-indigo-700 pt-2 pb-2"> |
|
|
<a href="#" class="flex items-center text-white hover:bg-indigo-700 p-2 rounded"> |
|
|
<i class="fas fa-images mr-3"></i> |
|
|
<span class="sidebar-item-text">Media Library</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-t border-indigo-700 pt-2 pb-2"> |
|
|
<a href="#" class="flex items-center text-white hover:bg-indigo-700 p-2 rounded"> |
|
|
<i class="fas fa-comments mr-3"></i> |
|
|
<span class="sidebar-item-text">Comments</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-t border-indigo-700 pt-2 pb-2"> |
|
|
<div class="dropdown-item"> |
|
|
<button class="flex items-center justify-between w-full text-white hover:bg-indigo-700 p-2 rounded focus:outline-none"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-search mr-3"></i> |
|
|
<span class="sidebar-item-text">SEO Tools</span> |
|
|
</div> |
|
|
<i class="fas fa-chevron-down sidebar-dropdown-text text-xs"></i> |
|
|
</button> |
|
|
<div class="dropdown-content pl-8 mt-1 hidden"> |
|
|
<a href="#" class="block text-white hover:bg-indigo-700 p-2 rounded sidebar-item-text">SEO Analysis</a> |
|
|
<a href="#" class="block text-white hover:bg-indigo-700 p-2 rounded sidebar-item-text">Keywords</a> |
|
|
<a href="#" class="block text-white hover:bg-indigo-700 p-2 rounded sidebar-item-text">Sitemap</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-t border-indigo-700 pt-2 pb-2"> |
|
|
<a href="#" class="flex items-center text-white hover:bg-indigo-700 p-2 rounded"> |
|
|
<i class="fas fa-chart-line mr-3"></i> |
|
|
<span class="sidebar-item-text">Analytics</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-t border-indigo-700 pt-2 pb-2"> |
|
|
<div class="dropdown-item"> |
|
|
<button class="flex items-center justify-between w-full text-white hover:bg-indigo-700 p-2 rounded focus:outline-none"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-cog mr-3"></i> |
|
|
<span class="sidebar-item-text">Settings</span> |
|
|
</div> |
|
|
<i class="fas fa-chevron-down sidebar-dropdown-text text-xs"></i> |
|
|
</button> |
|
|
<div class="dropdown-content pl-8 mt-1 hidden"> |
|
|
<a href="#" class="block text-white hover:bg-indigo-700 p-2 rounded sidebar-item-text">General</a> |
|
|
<a href="#" class="block text-white hover:bg-indigo-700 p-2 rounded sidebar-item-text">Reading</a> |
|
|
<a href="#" class="block text-white hover:bg-indigo-700 p-2 rounded sidebar-item-text">Writing</a> |
|
|
<a href="#" class="block text-white hover:bg-indigo-700 p-2 rounded sidebar-item-text">Discussion</a> |
|
|
<a href="#" class="block text-white hover:bg-indigo-700 p-2 rounded sidebar-item-text">Permalinks</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-4 border-t border-indigo-700"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://via.placeholder.com/40" alt="User" class="rounded-full w-8 h-8"> |
|
|
<div class="ml-3 sidebar-item-text"> |
|
|
<div class="font-medium">Admin User</div> |
|
|
<div class="text-xs text-indigo-300">Super Admin</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mainContent" class="main-content-expanded content-transition flex-1 overflow-auto"> |
|
|
|
|
|
<header class="bg-white shadow-sm"> |
|
|
<div class="px-6 py-4 flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<button id="mobileToggleSidebar" class="mr-4 text-gray-500 focus:outline-none md:hidden"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
<h1 class="text-xl font-semibold text-gray-800">Dashboard</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<button class="text-gray-500 focus:outline-none"> |
|
|
<i class="fas fa-bell text-xl"></i> |
|
|
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<button class="text-gray-500 focus:outline-none"> |
|
|
<i class="fas fa-envelope text-xl"></i> |
|
|
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<button class="flex items-center focus:outline-none"> |
|
|
<img src="https://via.placeholder.com/40" alt="User" class="rounded-full w-8 h-8"> |
|
|
<i class="fas fa-chevron-down ml-1 text-gray-500"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="p-6"> |
|
|
|
|
|
<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"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-indigo-100 text-indigo-600 mr-4"> |
|
|
<i class="fas fa-file-alt text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">Total Posts</p> |
|
|
<h3 class="text-2xl font-bold">1,248</h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow 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-eye text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">Total Views</p> |
|
|
<h3 class="text-2xl font-bold">24,589</h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow 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-comment text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">Comments</p> |
|
|
<h3 class="text-2xl font-bold">342</h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow 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-users text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">Subscribers</p> |
|
|
<h3 class="text-2xl font-bold">1,024</h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow mb-6"> |
|
|
<div class="p-6 border-b border-gray-200"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Recent Posts</h2> |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Author</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Categories</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Views</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm font-medium text-gray-900">10 Tips for Better Blog Writing</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://via.placeholder.com/40" alt="Author" class="w-6 h-6 rounded-full mr-2"> |
|
|
<div class="text-sm text-gray-500">John Doe</div> |
|
|
</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">Writing</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 15, 2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1,245</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a> |
|
|
<a href="#" class="text-red-600 hover:text-red-900">Delete</a> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm font-medium text-gray-900">SEO Best Practices for 2023</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://via.placeholder.com/40" alt="Author" class="w-6 h-6 rounded-full mr-2"> |
|
|
<div class="text-sm text-gray-500">Jane Smith</div> |
|
|
</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-blue-100 text-blue-800">SEO</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 10, 2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2,876</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a> |
|
|
<a href="#" class="text-red-600 hover:text-red-900">Delete</a> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm font-medium text-gray-900">How to Increase Blog Traffic</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://via.placeholder.com/40" alt="Author" class="w-6 h-6 rounded-full mr-2"> |
|
|
<div class="text-sm text-gray-500">Mike Johnson</div> |
|
|
</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-purple-100 text-purple-800">Marketing</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 5, 2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3,421</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a> |
|
|
<a href="#" class="text-red-600 hover:text-red-900">Delete</a> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<div class="p-4 border-t border-gray-200"> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-900 font-medium">View All Posts →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
|
|
<div class="bg-white rounded-lg shadow"> |
|
|
<div class="p-6 border-b border-gray-200"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">SEO Analysis</h2> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm font-medium text-gray-700">SEO Score</span> |
|
|
<span class="text-sm font-medium text-gray-700">85%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-green-600 h-2.5 rounded-full" style="width: 85%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span class="text-sm text-gray-700">All posts have meta descriptions</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span class="text-sm text-gray-700">Images have alt text</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i> |
|
|
<span class="text-sm text-gray-700">5 posts need internal links</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i> |
|
|
<span class="text-sm text-gray-700">3 posts have long titles</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow"> |
|
|
<div class="p-6 border-b border-gray-200"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Recent Comments</h2> |
|
|
</div> |
|
|
<div class="divide-y divide-gray-200"> |
|
|
<div class="p-4"> |
|
|
<div class="flex items-start"> |
|
|
<img src="https://via.placeholder.com/40" alt="User" class="w-8 h-8 rounded-full mr-3"> |
|
|
<div> |
|
|
<div class="font-medium text-gray-800">Sarah Williams</div> |
|
|
<div class="text-sm text-gray-600 mb-1">Great post! Very informative.</div> |
|
|
<div class="text-xs text-gray-500">On: 10 Tips for Better Blog Writing</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="flex items-start"> |
|
|
<img src="https://via.placeholder.com/40" alt="User" class="w-8 h-8 rounded-full mr-3"> |
|
|
<div> |
|
|
<div class="font-medium text-gray-800">Robert Chen</div> |
|
|
<div class="text-sm text-gray-600 mb-1">I disagree with point #3, here's why...</div> |
|
|
<div class="text-xs text-gray-500">On: SEO Best Practices for 2023</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="flex items-start"> |
|
|
<img src="https://via.placeholder.com/40" alt="User" class="w-8 h-8 rounded-full mr-3"> |
|
|
<div> |
|
|
<div class="font-medium text-gray-800">Emily Parker</div> |
|
|
<div class="text-sm text-gray-600 mb-1">Thanks for sharing these insights!</div> |
|
|
<div class="text-xs text-gray-500">On: How to Increase Blog Traffic</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const toggleSidebar = document.getElementById('toggleSidebar'); |
|
|
const mobileToggleSidebar = document.getElementById('mobileToggleSidebar'); |
|
|
const sidebar = document.getElementById('sidebar'); |
|
|
const mainContent = document.getElementById('mainContent'); |
|
|
|
|
|
toggleSidebar.addEventListener('click', () => { |
|
|
sidebar.classList.toggle('sidebar-collapsed'); |
|
|
mainContent.classList.toggle('main-content-expanded'); |
|
|
mainContent.classList.toggle('main-content-collapsed'); |
|
|
}); |
|
|
|
|
|
mobileToggleSidebar.addEventListener('click', () => { |
|
|
sidebar.classList.toggle('sidebar-open'); |
|
|
}); |
|
|
|
|
|
|
|
|
const dropdownItems = document.querySelectorAll('.dropdown-item'); |
|
|
|
|
|
dropdownItems.forEach(item => { |
|
|
const button = item.querySelector('button'); |
|
|
const content = item.querySelector('.dropdown-content'); |
|
|
|
|
|
button.addEventListener('click', () => { |
|
|
content.classList.toggle('hidden'); |
|
|
|
|
|
|
|
|
const chevron = button.querySelector('.fa-chevron-down'); |
|
|
chevron.classList.toggle('transform'); |
|
|
chevron.classList.toggle('rotate-180'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', (e) => { |
|
|
if (window.innerWidth <= 768 && !sidebar.contains(e.target) && !mobileToggleSidebar.contains(e.target)) { |
|
|
sidebar.classList.remove('sidebar-open'); |
|
|
} |
|
|
}); |
|
|
</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=kayrahan/ww" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
