| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Data Analytics 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"> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <style> |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
| ::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| } |
| ::-webkit-scrollbar-thumb { |
| background: #888; |
| border-radius: 4px; |
| } |
| ::-webkit-scrollbar-thumb:hover { |
| background: #555; |
| } |
| |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .animate-fade-in { |
| animation: fadeIn 0.5s ease-out forwards; |
| } |
| |
| |
| .dashboard-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| } |
| |
| |
| .dark .dark\:bg-gray-800 { |
| background-color: #1e293b !important; |
| } |
| .dark .dark\:text-white { |
| color: #fff !important; |
| } |
| .dark .dark\:bg-gray-700 { |
| background-color: #334155 !important; |
| } |
| .dark .dark\:text-gray-300 { |
| color: #d1d5db !important; |
| } |
| .dark .dark\:border-gray-600 { |
| border-color: #4b5563 !important; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 text-gray-800 transition-colors duration-300"> |
| |
| <div class="fixed inset-y-0 left-0 w-64 bg-white shadow-lg z-50 transition-all duration-300 ease-in-out transform -translate-x-full md:translate-x-0" id="sidebar"> |
| <div class="flex items-center justify-between p-4 border-b"> |
| <h1 class="text-xl font-bold text-blue-600 flex items-center"> |
| <i class="fas fa-chart-line mr-2"></i> DataAnalyticsPro |
| </h1> |
| <button id="close-sidebar" class="md:hidden text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <nav class="p-4"> |
| <div class="mb-6"> |
| <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Main</h2> |
| <ul> |
| <li class="mb-1"> |
| <a href="#" class="flex items-center p-2 text-blue-600 rounded-lg bg-blue-50"> |
| <i class="fas fa-chart-pie mr-3"></i> |
| <span>Dashboard</span> |
| </a> |
| </li> |
| <li class="mb-1"> |
| <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> |
| <i class="fas fa-database mr-3"></i> |
| <span>Data Sources</span> |
| </a> |
| </li> |
| <li class="mb-1"> |
| <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> |
| <i class="fas fa-chart-bar mr-3"></i> |
| <span>Reports</span> |
| </a> |
| </li> |
| <li class="mb-1"> |
| <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> |
| <i class="fas fa-users-cog mr-3"></i> |
| <span>User Management</span> |
| </a> |
| </li> |
| <li class="mb-1"> |
| <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> |
| <i class="fas fa-cog mr-3"></i> |
| <span>Settings</span> |
| </a> |
| </li> |
| </ul> |
| </div> |
| <div> |
| <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Tools</h2> |
| <ul> |
| <li class="mb-1"> |
| <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> |
| <i class="fas fa-file-import mr-3"></i> |
| <span>Data Import</span> |
| </a> |
| </li> |
| <li class="mb-1"> |
| <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> |
| <i class="fas fa-file-export mr-3"></i> |
| <span>Data Export</span> |
| </a> |
| </li> |
| <li class="mb-1"> |
| <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> |
| <i class="fas fa-shield-alt mr-3"></i> |
| <span>Security</span> |
| </a> |
| </li> |
| <li class="mb-1"> |
| <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> |
| <i class="fas fa-plug mr-3"></i> |
| <span>Integrations</span> |
| </a> |
| </li> |
| </ul> |
| </div> |
| </nav> |
| </div> |
|
|
| |
| <div class="md:ml-64 transition-all duration-300"> |
| |
| <header class="bg-white shadow-sm sticky top-0 z-40"> |
| <div class="flex items-center justify-between px-4 py-3"> |
| <div class="flex items-center"> |
| <button id="open-sidebar" class="mr-4 text-gray-500 hover:text-gray-700 md:hidden"> |
| <i class="fas fa-bars"></i> |
| </button> |
| <h2 class="text-xl font-semibold">Dashboard</h2> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="relative"> |
| <button class="text-gray-500 hover:text-gray-700 focus:outline-none"> |
| <i class="fas fa-bell"></i> |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> |
| </button> |
| </div> |
| <div class="relative"> |
| <button id="theme-toggle" class="text-gray-500 hover:text-gray-700 focus:outline-none"> |
| <i class="fas fa-moon" id="theme-icon"></i> |
| </button> |
| </div> |
| <div class="flex items-center"> |
| <img src="https://ui-avatars.com/api/?name=John+Doe&background=4f46e5&color=fff" alt="User" class="w-8 h-8 rounded-full"> |
| <span class="ml-2 text-sm font-medium hidden md:inline">John Doe</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <nav class="flex overflow-x-auto whitespace-nowrap px-4 border-t"> |
| <a href="#" class="px-4 py-2 text-sm font-medium text-blue-600 border-b-2 border-blue-600">Overview</a> |
| <a href="#" class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">Analytics</a> |
| <a href="#" class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">Reports</a> |
| <a href="#" class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">Alerts</a> |
| <a href="#" class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">Export</a> |
| <a href="#" class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">Settings</a> |
| </nav> |
| </header> |
|
|
| |
| <main class="p-4"> |
| |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6"> |
| <div> |
| <h1 class="text-2xl font-bold mb-2">Welcome back, John!</h1> |
| <p class="text-gray-600">Today is <span id="current-date" class="font-medium">March 15, 2024</span></p> |
| </div> |
| <div class="mt-4 md:mt-0 flex space-x-2"> |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center"> |
| <i class="fas fa-file-export mr-2"></i> Export Report |
| </button> |
| <button class="px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center"> |
| <i class="fas fa-filter mr-2"></i> Filters |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
| <div class="bg-white rounded-xl shadow-sm p-6 dashboard-card transition-all duration-300 animate-fade-in"> |
| <div class="flex items-start justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Total Revenue</p> |
| <h3 class="text-2xl font-bold mt-1">$48,245</h3> |
| <p class="text-xs mt-2"><span class="text-green-500">+12.5%</span> from last month</p> |
| </div> |
| <div class="p-3 rounded-lg bg-blue-100 text-blue-600"> |
| <i class="fas fa-dollar-sign"></i> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-xl shadow-sm p-6 dashboard-card transition-all duration-300 animate-fade-in" style="animation-delay: 0.1s"> |
| <div class="flex items-start justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Active Users</p> |
| <h3 class="text-2xl font-bold mt-1">1,243</h3> |
| <p class="text-xs mt-2"><span class="text-green-500">+8.2%</span> from last month</p> |
| </div> |
| <div class="p-3 rounded-lg bg-green-100 text-green-600"> |
| <i class="fas fa-users"></i> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-xl shadow-sm p-6 dashboard-card transition-all duration-300 animate-fade-in" style="animation-delay: 0.2s"> |
| <div class="flex items-start justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Conversion Rate</p> |
| <h3 class="text-2xl font-bold mt-1">3.65%</h3> |
| <p class="text-xs mt-2"><span class="text-red-500">-0.5%</span> from last month</p> |
| </div> |
| <div class="p-3 rounded-lg bg-purple-100 text-purple-600"> |
| <i class="fas fa-chart-line"></i> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-xl shadow-sm p-6 dashboard-card transition-all duration-300 animate-fade-in" style="animation-delay: 0.3s"> |
| <div class="flex items-start justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Avg. Session</p> |
| <h3 class="text-2xl font-bold mt-1">4m 23s</h3> |
| <p class="text-xs mt-2"><span class="text-green-500">+1.2%</span> from last month</p> |
| </div> |
| <div class="p-3 rounded-lg bg-yellow-100 text-yellow-600"> |
| <i class="fas fa-clock"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
| |
| <div class="bg-white rounded-xl shadow-sm p-6 lg:col-span-2"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-semibold">Revenue Overview (Last 12 Months)</h3> |
| <select class="text-sm border border-gray-300 rounded-md px-3 py-1 focus:outline-none focus:ring-1 focus:ring-blue-500"> |
| <option>Last 7 days</option> |
| <option>Last 30 days</option> |
| <option selected>Last 12 months</option> |
| <option>All time</option> |
| </select> |
| </div> |
| <div class="h-80"> |
| <canvas id="mainChart"></canvas> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-semibold">Traffic Sources (March 2024)</h3> |
| <button class="text-sm text-blue-600 hover:text-blue-800">View all</button> |
| </div> |
| <div class="h-80"> |
| <canvas id="pieChart"></canvas> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| |
| <div class="bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-semibold">Recent Activity</h3> |
| <button class="text-sm text-blue-600 hover:text-blue-800">View all</button> |
| </div> |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-3"> |
| <i class="fas fa-file-import"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium">Data import completed</p> |
| <p class="text-xs text-gray-500">10,245 records from sales.csv</p> |
| <p class="text-xs text-gray-400 mt-1">5 minutes ago</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="p-2 rounded-full bg-green-100 text-green-600 mr-3"> |
| <i class="fas fa-user-plus"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium">New user registered</p> |
| <p class="text-xs text-gray-500">Sarah Johnson (Analyst)</p> |
| <p class="text-xs text-gray-400 mt-1">1 hour ago</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="p-2 rounded-full bg-purple-100 text-purple-600 mr-3"> |
| <i class="fas fa-chart-bar"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium">Report generated</p> |
| <p class="text-xs text-gray-500">Quarterly sales analysis.pdf</p> |
| <p class="text-xs text-gray-400 mt-1">3 hours ago</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="p-2 rounded-full bg-yellow-100 text-yellow-600 mr-3"> |
| <i class="fas fa-exclamation-triangle"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium">System alert</p> |
| <p class="text-xs text-gray-500">Unusual traffic spike detected</p> |
| <p class="text-xs text-gray-400 mt-1">Yesterday</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="p-2 rounded-full bg-red-100 text-red-600 mr-3"> |
| <i class="fas fa-server"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium">Database backup</p> |
| <p class="text-xs text-gray-500">Nightly backup completed successfully</p> |
| <p class="text-xs text-gray-400 mt-1">Yesterday</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-sm p-6 lg:col-span-2"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-semibold">Recent Transactions (Last 7 days)</h3> |
| <button class="text-sm text-blue-600 hover:text-blue-800">View all</button> |
| </div> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead> |
| <tr> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#1053</td> |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Acme Inc.</td> |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Mar 15, 2024</td> |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">$1,245</td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Completed</span> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <button class="text-blue-600 hover:text-blue-900">View</button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#1052</td> |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">TechCorp LLC</td> |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Mar 15, 2024</td> |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">$2,840</td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">Processing</span> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <button class="text-blue-600 hover:text-blue-900">View</button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#1051</td> |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Global Solutions</td> |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Mar 14, 2024</td> |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">$4,235</td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Completed</span> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <button class="text-blue-600 hover:text-blue-900">View</button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#1050</td> |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Innovate Co</td> |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Mar 13, 2024</td> |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">$1,750</td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <button class="text-blue-600 hover:text-blue-900">View</button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#1049</td> |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">DataSystems Ltd</td> |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Mar 12, 2024</td> |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">$3,150</td> |
| <td class="px-4 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Failed</span> |
| </td> |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <button class="text-blue-600 hover:text-blue-900">View</button> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
|
|
| <script> |
| |
| document.getElementById('current-date').textContent = new Date().toLocaleDateString('en-US', { |
| year: 'numeric', month: 'long', day: 'numeric' |
| }); |
| |
| |
| document.getElementById('open-sidebar').addEventListener('click', function() { |
| document.getElementById('sidebar').classList.remove('-translate-x-full'); |
| }); |
| |
| document.getElementById('close-sidebar').addEventListener('click', function() { |
| document.getElementById('sidebar').classList.add('-translate-x-full'); |
| }); |
| |
| |
| document.getElementById('theme-toggle').addEventListener('click', function() { |
| document.documentElement.classList.toggle('dark'); |
| const icon = document.getElementById('theme-icon'); |
| if (document.documentElement.classList.contains('dark')) { |
| icon.classList.remove('fa-moon'); |
| icon.classList.add('fa-sun'); |
| } else { |
| icon.classList.remove('fa-sun'); |
| icon.classList.add('fa-moon'); |
| } |
| }); |
| |
| |
| const mainCtx = document.getElementById('mainChart').getContext('2d'); |
| const mainChart = new Chart(mainCtx, { |
| type: 'line', |
| data: { |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], |
| datasets: [{ |
| label: 'Revenue', |
| data: [12500, 18000, 22000, 25000, 28500, 31000, 36000, 42000, 48500, 40200, 38500, 48245], |
| backgroundColor: 'rgba(79, 70, 229, 0.1)', |
| borderColor: '#4f46e5', |
| borderWidth: 2, |
| tension: 0.3, |
| fill: true, |
| pointBackgroundColor: '#4f46e5', |
| pointRadius: 4, |
| pointHoverRadius: 6, |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| display: false |
| }, |
| tooltip: { |
| backgroundColor: '#4f46e5', |
| padding: 12, |
| displayColors: false, |
| callbacks: { |
| label: function(context) { |
| return '$' + context.parsed.y.toLocaleString(); |
| } |
| } |
| } |
| }, |
| scales: { |
| y: { |
| beginAtZero: true, |
| grid: { |
| drawBorder: false, |
| }, |
| ticks: { |
| callback: function(value) { |
| return '$' + value.toLocaleString(); |
| } |
| } |
| }, |
| x: { |
| grid: { |
| display: false |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| const pieCtx = document.getElementById('pieChart').getContext('2d'); |
| const pieChart = new Chart(pieCtx, { |
| type: 'doughnut', |
| data: { |
| labels: ['Direct', 'Organic Search', 'Social', 'Email', 'Referral'], |
| datasets: [{ |
| data: [35, 30, 15, 12, 8], |
| backgroundColor: [ |
| '#4f46e5', |
| '#10b981', |
| '#3b82f6', |
| '#f59e0b', |
| '#ef4444' |
| ], |
| borderWidth: 0, |
| borderRadius: 4, |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| cutout: '70%', |
| plugins: { |
| legend: { |
| position: 'right', |
| labels: { |
| usePointStyle: true, |
| pointStyle: 'circle', |
| padding: 16 |
| } |
| }, |
| tooltip: { |
| callbacks: { |
| label: function(context) { |
| return context.label + ': ' + context.raw + '%'; |
| } |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| const dashboardCards = document.querySelectorAll('.dashboard-card'); |
| dashboardCards.forEach((card, index) => { |
| card.style.animationDelay = `${index * 0.1}s`; |
| }); |
| </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=nmtalhp/hmm" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
| </html> |
