Spaces:
Running
Running
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AutoDropX - Automated Shopify Dropshipping</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> .gradient-bg { background: linear-gradient(135deg, #6e8efb, #a777e3); } .sidebar-item:hover .sidebar-icon { transform: translateX(5px); } .sidebar-icon { transition: transform 0.2s ease; } .dashboard-card: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); } .dashboard-card { transition: all 0.3s ease; } .product-image { transition: transform 0.3s ease; } .product-card:hover .product-image { transform: scale(1.05); } .chart-container { height: 300px; } @media (max-width: 768px) { .sidebar { transform: translateX(-100%); transition: transform 0.3s ease; } .sidebar.active { transform: translateX(0); } } </style> </head> <body class="bg-gray-50"> <div class="flex h-screen overflow-hidden"> <!-- Mobile menu button --> <button class="md:hidden fixed top-4 left-4 z-50 p-2 rounded-md bg-white shadow-lg" id="mobileMenuButton"> <i class="fas fa-bars text-gray-700"></i> </button> <!-- Sidebar --> <div class="sidebar w-64 bg-white shadow-lg fixed h-full z-40" id="sidebar"> <div class="p-4 gradient-bg text-white"> <div class="flex items-center space-x-2"> <i class="fas fa-boxes text-2xl"></i> <h1 class="text-xl font-bold">AutoDropX</h1> </div> <p class="text-xs opacity-80 mt-1">Automated Shopify Dropshipping</p> </div> <div class="p-4"> <div class="mb-8"> <div class="flex items-center justify-between mb-4"> <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">MAIN</h3> </div> <ul class="space-y-2"> <li> <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md bg-blue-50 text-blue-600"> <span class="sidebar-icon mr-3"><i class="fas fa-tachometer-alt"></i></span> Dashboard </a> </li> <li> <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100"> <span class="sidebar-icon mr-3"><i class="fas fa-store"></i></span> My Stores </a> </li> <li> <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100"> <span class="sidebar-icon mr-3"><i class="fas fa-box-open"></i></span> Products </a> </li> <li> <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100"> <span class="sidebar-icon mr-3"><i class="fas fa-shopping-cart"></i></span> Orders </a> </li> </ul> </div> <div class="mb-8"> <div class="flex items-center justify-between mb-4"> <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">AUTOMATION</h3> </div> <ul class="space-y-2"> <li> <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100"> <span class="sidebar-icon mr-3"><i class="fas fa-robot"></i></span> Product Sourcing </a> </li> <li> <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100"> <span class="sidebar-icon mr-3"><i class="fas fa-shipping-fast"></i></span> Order Fulfillment </a> </li> <li> <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100"> <span class="sidebar-icon mr-3"><i class="fas fa-bullhorn"></i></span> Marketing Tools </a> </li> </ul> </div> <div class="mb-8"> <div class="flex items-center justify-between mb-4"> <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">FINANCE</h3> </div> <ul class="space-y-2"> <li> <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100"> <span class="sidebar-icon mr-3"><i class="fas fa-wallet"></i></span> Wallet </a> </li> <li> <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100"> <span class="sidebar-icon mr-3"><i class="fas fa-exchange-alt"></i></span> Withdrawals </a> </li> <li> <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100"> <span class="sidebar-icon mr-3"><i class="fas fa-chart-line"></i></span> Analytics </a> </li> </ul> </div> </div> </div> <!-- Main content --> <div class="flex-1 overflow-auto ml-0 md:ml-64"> <!-- Top navigation --> <div class="bg-white shadow-sm"> <div class="px-4 py-3 flex justify-between items-center"> <div class="flex items-center space-x-4"> <h2 class="text-xl font-semibold text-gray-800">Dashboard</h2> </div> <div class="flex items-center space-x-4"> <div class="relative"> <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200"> <i class="fas fa-bell"></i> </button> <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> </div> <div class="relative"> <button class="flex items-center space-x-2 focus:outline-none" id="userMenuButton"> <div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold">JD</div> <span class="hidden md:inline-block text-sm font-medium">John Doe</span> <i class="fas fa-chevron-down text-xs"></i> </button> <div class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50" id="userMenu"> <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">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">Logout</a> </div> </div> </div> </div> </div> <!-- Dashboard content --> <div class="p-4"> <!-- Stats cards --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> <div class="dashboard-card bg-white rounded-lg shadow p-6"> <div class="flex items-center justify-between"> <div> <p class="text-sm font-medium text-gray-500">Total Revenue</p> <h3 class="text-2xl font-bold text-gray-800">$4,582.50</h3> <p class="text-xs text-green-500 mt-1"><i class="fas fa-arrow-up mr-1"></i> 12.5% from last month</p> </div> <div class="p-3 rounded-full bg-blue-100 text-blue-600"> <i class="fas fa-dollar-sign text-xl"></i> </div> </div> </div> <div class="dashboard-card bg-white rounded-lg shadow p-6"> <div class="flex items-center justify-between"> <div> <p class="text-sm font-medium text-gray-500">Active Stores</p> <h3 class="text-2xl font-bold text-gray-800">3</h3> <p class="text-xs text-green-500 mt-1"><i class="fas fa-arrow-up mr-1"></i> 1 new store</p> </div> <div class="p-3 rounded-full bg-purple-100 text-purple-600"> <i class="fas fa-store text-xl"></i> </div> </div> </div> <div class="dashboard-card bg-white rounded-lg shadow p-6"> <div class="flex items-center justify-between"> <div> <p class="text-sm font-medium text-gray-500">Total Orders</p> <h3 class="text-2xl font-bold text-gray-800">127</h3> <p class="text-xs text-green-500 mt-1"><i class="fas fa-arrow-up mr-1"></i> 8.2% from last week</p> </div> <div class="p-3 rounded-full bg-green-100 text-green-600"> <i class="fas fa-shopping-cart text-xl"></i> </div> </div> </div> <div class="dashboard-card bg-white rounded-lg shadow p-6"> <div class="flex items-center justify-between"> <div> <p class="text-sm font-medium text-gray-500">Available Balance</p> <h3 class="text-2xl font-bold text-gray-800">$1,245.80</h3> <p class="text-xs text-blue-500 mt-1"><i class="fas fa-wallet mr-1"></i> Ready to withdraw</p> </div> <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> <i class="fas fa-coins text-xl"></i> </div> </div> </div> </div> <!-- Charts and recent activity --> <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> <!-- Revenue chart --> <div class="lg:col-span-2 bg-white rounded-lg shadow p-6"> <div class="flex items-center justify-between mb-4"> <h3 class="text-lg font-semibold text-gray-800">Revenue Overview</h3> <div class="flex space-x-2"> <button class="px-3 py-1 text-xs bg-blue-100 text-blue-600 rounded-full">7 Days</button> <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">30 Days</button> <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">90 Days</button> </div> </div> <div class="chart-container"> <canvas id="revenueChart"></canvas> </div> </div> <!-- Recent activity --> <div class="bg-white rounded-lg shadow p-6"> <h3 class="text-lg font-semibold text-gray-800 mb-4">Recent Activity</h3> <div class="space-y-4"> <div class="flex items-start"> <div class="p-2 rounded-full bg-green-100 text-green-600 mr-3"> <i class="fas fa-shopping-cart text-sm"></i> </div> <div> <p class="text-sm font-medium">New order #1025 received</p> <p class="text-xs text-gray-500">2 hours ago</p> </div> </div> <div class="flex items-start"> <div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-3"> <i class="fas fa-truck text-sm"></i> </div> <div> <p class="text-sm font-medium">Order #1019 shipped</p> <p class="text-xs text-gray-500">5 hours 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-store text-sm"></i> </div> <div> <p class="text-sm font-medium">New product added to FashionHub</p> <p class="text-xs text-gray-500">Yesterday</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-coins text-sm"></i> </div> <div> <p class="text-sm font-medium">$250.00 withdrawal processed</p> <p class="text-xs text-gray-500">2 days ago</p> </div> </div> </div> </div> </div> <!-- Quick actions and trending products --> <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> <!-- Quick actions --> <div class="bg-white rounded-lg shadow p-6"> <h3 class="text-lg font-semibold text-gray-800 mb-4">Quick Actions</h3> <div class="grid grid-cols-2 gap-4"> <a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"> <div class="p-3 rounded-full bg-blue-100 text-blue-600 mb-2"> <i class="fas fa-plus"></i> </div> <span class="text-sm font-medium">Add Store</span> </a> <a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"> <div class="p-3 rounded-full bg-green-100 text-green-600 mb-2"> <i class="fas fa-robot"></i> </div> <span class="text-sm font-medium">Auto Import</span> </a> <a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"> <div class="p-3 rounded-full bg-purple-100 text-purple-600 mb-2"> <i class="fas fa-bullhorn"></i> </div> <span class="text-sm font-medium">Run Ads</span> </a> <a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"> <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mb-2"> <i class="fas fa-exchange-alt"></i> </div> <span class="text-sm font-medium">Withdraw</span> </a> </div> </div> <!-- Trending products --> <div class="lg:col-span-2 bg-white rounded-lg shadow p-6"> <div class="flex items-center justify-between mb-4"> <h3 class="text-lg font-semibold text-gray-800">Trending Products</h3> <a href="#" class="text-sm text-blue-600 hover:underline">View all</a> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="product-card border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow"> <div class="h-40 bg-gray-100 flex items-center justify-center overflow-hidden"> <img src="https://m.media-amazon.com/images/I/61bK6PMOC3L._AC_UL320_.jpg" alt="Product" class="product-image h-full object-cover"> </div> <div class="p-3"> <h4 class="text-sm font-medium text-gray-800 truncate">Wireless Earbuds Bluetooth 5.0</h4> <div class="flex items-center justify-between mt-2"> <span class="text-sm font-bold text-blue-600">$29.99</span> <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">+32%</span> </div> </div> </div> <div class="product-card border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow"> <div class="h-40 bg-gray-100 flex items-center justify-center overflow-hidden"> <img src="https://m.media-amazon.com/images/I/71Y1S1m-QAL._AC_UL320_.jpg" alt="Product" class="product-image h-full object-cover"> </div> <div class="p-3"> <h4 class="text-sm font-medium text-gray-800 truncate">Smart Watch Fitness Tracker</h4> <div class="flex items-center justify-between mt-2"> <span class="text-sm font-bold text-blue-600">$49.99</span> <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">+28%</span> </div> </div> </div> <div class="product-card border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow"> <div class="h-40 bg-gray-100 flex items-center justify-center overflow-hidden"> <img src="https://m.media-amazon.com/images/I/71WkDp--uqL._AC_UL320_.jpg" alt="Product" class="product-image h-full object-cover"> </div> <div class="p-3"> <h4 class="text-sm font-medium text-gray-800 truncate">Magnetic Phone Car Mount</h4> <div class="flex items-center justify-between mt-2"> <span class="text-sm font-bold text-blue-600">$15.99</span> <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">+45%</span> </div> </div> </div> </div> </div> </div> <!-- Recent orders --> <div class="bg-white rounded-lg shadow overflow-hidden mb-6"> <div class="p-6 border-b border-gray-200"> <h3 class="text-lg font-semibold text-gray-800">Recent Orders</h3> </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">Order #</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</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">Total</th> <th scope="col" 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 text-sm font-medium text-blue-600">#1025</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today, 10:45 AM</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sarah Johnson</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">Processing</span> </td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$89.98</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a> <a href="#" class="text-green-600 hover:text-green-900">Fulfill</a> </td> </tr> <tr> <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">#1024</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday, 3:22 PM</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Michael Brown</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">Shipped</span> </td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$124.50</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a> <a href="#" class="text-green-600 hover:text-green-900">Track</a> </td> </tr> <tr> <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">#1023</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday, 10:15 AM</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Emily Wilson</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">Paid</span> </td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$67.99</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a> <a href="#" class="text-green-600 hover:text-green-900">Fulfill</a> </td> </tr> </tbody> </table> </div> <div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200"> <div class="flex-1 flex justify-between sm:hidden"> <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> Previous </a> <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> Next </a> </div> <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> <div> <p class="text-sm text-gray-700"> Showing <span class="font-medium">1</span> to <span class="font-medium">3</span> of <span class="font-medium">24</span> results </p> </div> <div> <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> <span class="sr-only">Previous</span> <i class="fas fa-chevron-left"></i> </a> <a href="#" aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 1 </a> <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 2 </a> <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 3 </a> <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> <span class="sr-only">Next</span> <i class="fas fa-chevron-right"></i> </a> </nav> </div> </div> </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> // Mobile menu toggle document.getElementById('mobileMenuButton').addEventListener('click', function() { document.getElementById('sidebar').classList.toggle('active'); }); // User menu toggle document.getElementById('userMenuButton').addEventListener('click', function() { document.getElementById('userMenu').classList.toggle('hidden'); }); // Close user menu when clicking outside document.addEventListener('click', function(event) { const userMenu = document.getElementById('userMenu'); const userMenuButton = document.getElementById('userMenuButton'); if (!userMenu.contains(event.target) && !userMenuButton.contains(event.target)) { userMenu.classList.add('hidden'); } }); // Revenue chart const ctx = document.getElementById('revenueChart').getContext('2d'); const revenueChart = new Chart(ctx, { type: 'line', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], datasets: [{ label: 'Revenue', data: [1200, 1900, 1500, 2000, 2500, 2200, 3000], backgroundColor: 'rgba(79, 70, 229, 0.1)', borderColor: 'rgba(79, 70, 229, 1)', borderWidth: 2, tension: 0.3, fill: true }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { drawBorder: false } }, x: { grid: { display: false } } } } }); </script> </body> </html> create this app - Follow Up Deployment
fe8d388 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AutoDropX - Automated Shopify Dropshipping</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .sidebar-item:hover .sidebar-icon { | |
| transform: translateX(5px); | |
| } | |
| .sidebar-icon { | |
| transition: transform 0.2s ease; | |
| } | |
| .dashboard-card: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); | |
| } | |
| .dashboard-card { | |
| transition: all 0.3s ease; | |
| } | |
| .product-image { | |
| transition: transform 0.3s ease; | |
| } | |
| .product-card:hover .product-image { | |
| transform: scale(1.05); | |
| } | |
| .chart-container { | |
| height: 300px; | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| transform: translateX(-100%); | |
| transition: transform 0.3s ease; | |
| } | |
| .sidebar.active { | |
| transform: translateX(0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Mobile menu button --> | |
| <button class="md:hidden fixed top-4 left-4 z-50 p-2 rounded-md bg-white shadow-lg" id="mobileMenuButton"> | |
| <i class="fas fa-bars text-gray-700"></i> | |
| </button> | |
| <!-- Sidebar --> | |
| <div class="sidebar w-64 bg-white shadow-lg fixed h-full z-40" id="sidebar"> | |
| <div class="p-4 gradient-bg text-white"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-boxes text-2xl"></i> | |
| <h1 class="text-xl font-bold">AutoDropX</h1> | |
| </div> | |
| <p class="text-xs opacity-80 mt-1">Automated Shopify Dropshipping</p> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-8"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">MAIN</h3> | |
| </div> | |
| <ul class="space-y-2"> | |
| <li> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md bg-blue-50 text-blue-600"> | |
| <span class="sidebar-icon mr-3"><i class="fas fa-tachometer-alt"></i></span> | |
| Dashboard | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100"> | |
| <span class="sidebar-icon mr-3"><i class="fas fa-store"></i></span> | |
| My Stores | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100"> | |
| <span class="sidebar-icon mr-3"><i class="fas fa-box-open"></i></span> | |
| Products | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100"> | |
| <span class="sidebar-icon mr-3"><i class="fas fa-shopping-cart"></i></span> | |
| Orders | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">AUTOMATION</h3> | |
| </div> | |
| <ul class="space-y-2"> | |
| <li> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100"> | |
| <span class="sidebar-icon mr-3"><i class="fas fa-robot"></i></span> | |
| Product Sourcing | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100"> | |
| <span class="sidebar-icon mr-3"><i class="fas fa-shipping-fast"></i></span> | |
| Order Fulfillment | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100"> | |
| <span class="sidebar-icon mr-3"><i class="fas fa-bullhorn"></i></span> | |
| Marketing Tools | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">FINANCE</h3> | |
| </div> | |
| <ul class="space-y-2"> | |
| <li> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100"> | |
| <span class="sidebar-icon mr-3"><i class="fas fa-wallet"></i></span> | |
| Wallet | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100"> | |
| <span class="sidebar-icon mr-3"><i class="fas fa-exchange-alt"></i></span> | |
| Withdrawals | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100"> | |
| <span class="sidebar-icon mr-3"><i class="fas fa-chart-line"></i></span> | |
| Analytics | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <div class="flex-1 overflow-auto ml-0 md:ml-64"> | |
| <!-- Top navigation --> | |
| <div class="bg-white shadow-sm"> | |
| <div class="px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <h2 class="text-xl font-semibold text-gray-800">Dashboard</h2> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </div> | |
| <div class="relative"> | |
| <button class="flex items-center space-x-2 focus:outline-none" id="userMenuButton"> | |
| <div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold">JD</div> | |
| <span class="hidden md:inline-block text-sm font-medium">John Doe</span> | |
| <i class="fas fa-chevron-down text-xs"></i> | |
| </button> | |
| <div class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50" id="userMenu"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">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">Logout</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dashboard content --> | |
| <div class="p-4"> | |
| <!-- Stats cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> | |
| <div class="dashboard-card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Total Revenue</p> | |
| <h3 class="text-2xl font-bold text-gray-800">$4,582.50</h3> | |
| <p class="text-xs text-green-500 mt-1"><i class="fas fa-arrow-up mr-1"></i> 12.5% from last month</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> | |
| <i class="fas fa-dollar-sign text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Active Stores</p> | |
| <h3 class="text-2xl font-bold text-gray-800">3</h3> | |
| <p class="text-xs text-green-500 mt-1"><i class="fas fa-arrow-up mr-1"></i> 1 new store</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> | |
| <i class="fas fa-store text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Total Orders</p> | |
| <h3 class="text-2xl font-bold text-gray-800">127</h3> | |
| <p class="text-xs text-green-500 mt-1"><i class="fas fa-arrow-up mr-1"></i> 8.2% from last week</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> | |
| <i class="fas fa-shopping-cart text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Available Balance</p> | |
| <h3 class="text-2xl font-bold text-gray-800">$1,245.80</h3> | |
| <p class="text-xs text-blue-500 mt-1"><i class="fas fa-wallet mr-1"></i> Ready to withdraw</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> | |
| <i class="fas fa-coins text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts and recent activity --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Revenue chart --> | |
| <div class="lg:col-span-2 bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Revenue Overview</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-xs bg-blue-100 text-blue-600 rounded-full">7 Days</button> | |
| <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">30 Days</button> | |
| <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">90 Days</button> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="revenueChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Recent activity --> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Recent Activity</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-green-100 text-green-600 mr-3"> | |
| <i class="fas fa-shopping-cart text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">New order #1025 received</p> | |
| <p class="text-xs text-gray-500">2 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-3"> | |
| <i class="fas fa-truck text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Order #1019 shipped</p> | |
| <p class="text-xs text-gray-500">5 hours 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-store text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">New product added to FashionHub</p> | |
| <p class="text-xs text-gray-500">Yesterday</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-coins text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">$250.00 withdrawal processed</p> | |
| <p class="text-xs text-gray-500">2 days ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick actions and trending products --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Quick actions --> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Quick Actions</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600 mb-2"> | |
| <i class="fas fa-plus"></i> | |
| </div> | |
| <span class="text-sm font-medium">Add Store</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600 mb-2"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <span class="text-sm font-medium">Auto Import</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600 mb-2"> | |
| <i class="fas fa-bullhorn"></i> | |
| </div> | |
| <span class="text-sm font-medium">Run Ads</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mb-2"> | |
| <i class="fas fa-exchange-alt"></i> | |
| </div> | |
| <span class="text-sm font-medium">Withdraw</span> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Trending products --> | |
| <div class="lg:col-span-2 bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Trending Products</h3> | |
| <a href="#" class="text-sm text-blue-600 hover:underline">View all</a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="product-card border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow"> | |
| <div class="h-40 bg-gray-100 flex items-center justify-center overflow-hidden"> | |
| <img src="https://m.media-amazon.com/images/I/61bK6PMOC3L._AC_UL320_.jpg" alt="Product" class="product-image h-full object-cover"> | |
| </div> | |
| <div class="p-3"> | |
| <h4 class="text-sm font-medium text-gray-800 truncate">Wireless Earbuds Bluetooth 5.0</h4> | |
| <div class="flex items-center justify-between mt-2"> | |
| <span class="text-sm font-bold text-blue-600">$29.99</span> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">+32%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="product-card border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow"> | |
| <div class="h-40 bg-gray-100 flex items-center justify-center overflow-hidden"> | |
| <img src="https://m.media-amazon.com/images/I/71Y1S1m-QAL._AC_UL320_.jpg" alt="Product" class="product-image h-full object-cover"> | |
| </div> | |
| <div class="p-3"> | |
| <h4 class="text-sm font-medium text-gray-80 truncate">Smart Watch Fitness Tracker</h4> | |
| <div class="flex items-center justify-between mt-2"> | |
| <span class="text-sm font-bold text-blue-600">$49.99</span> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">+28%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="product-card border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow"> | |
| <div class="h-40 bg-gray-100 flex items-center justify-center overflow-hidden"> | |
| <img src="https://m.media-amazon.com/images/I/71WkDp--uqL._AC_UL320_.jpg" alt="Product" class="product-image h-full object-cover"> | |
| </div> | |
| <div class="p-3"> | |
| <h4 class="text-sm font-medium text-gray-800 truncate">Magnetic Phone Car Mount</h4> | |
| <div class="flex items-center justify-between mt-2"> | |
| <span class="text-sm font-bold text-blue-600">$15.99</span> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">+45%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent orders --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden mb-6"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-lg font-semibold text-gray-800">Recent Orders</h3> | |
| </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">Order #</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</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">Total</th> | |
| <th scope="col" 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 text-sm font-medium text-blue-600">#1025</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today, 10:45 AM</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sarah Johnson</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">Processing</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$89.98</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a> | |
| <a href="#" class="text-green-600 hover:text-green-900">Fulfill</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">#1024</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday, 3:22 PM</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Michael Brown</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">Shipped</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$124.50</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a> | |
| <a href="#" class="text-green-600 hover:text-green-900">Track</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">#1023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday, 10:15 AM</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Emily Wilson</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">Paid</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$67.99</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a> | |
| <a href="#" class="text-green-600 hover:text-green-900">Fulfill</a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200"> | |
| <div class="flex-1 flex justify-between sm:hidden"> | |
| <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> Previous </a> | |
| <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-7 bg-white hover:bg-gray-50"> Next </a> | |
| </div> | |
| <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-700"> Showing <span class="font-medium">1</span> to <span class="font-medium">3</span> of <span class="font-medium">24</span> results </p> | |
| </div> | |
| <div> | |
| <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> <span class="sr-only">Previous</span> <i class="fas fa-chevron-left"></i> </a> | |
| <a href="#" aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 1 </a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 2 </a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 3 </a> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> <span class="sr-only">Next</span> <i class="fas fa-chevron-right"></i> </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobileMenuButton').addEventListener('click', function() { | |
| document.getElementById('sidebar').classList.toggle('active'); | |
| }); | |
| // User menu toggle | |
| document.getElementById('userMenuButton').addEventListener('click', function() { | |
| document.getElementById('userMenu').classList.toggle('hidden'); | |
| }); | |
| // Close user menu when clicking outside | |
| document.addEventListener('click', function(event) { | |
| const userMenu = document.getElementById('userMenu'); | |
| const userMenuButton = document.getElementById('userMenuButton'); | |
| if (!userMenu.contains(event.target) && !userMenuButton.contains(event.target)) { | |
| userMenu.classList.add('hidden'); | |
| } | |
| }); | |
| // Revenue chart | |
| const ctx = document.getElementById('revenueChart').getContext('2d'); | |
| const revenueChart = new Chart(ctx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], | |
| datasets: [{ | |
| label: 'Revenue', | |
| data: [1200, 1900, 1500, 2000, 2500, 2200, 3000], | |
| backgroundColor: 'rgba(79, 70, 229, 0.1)', | |
| borderColor: 'rgba(79, 70, 229, 1)', | |
| borderWidth: 2, | |
| tension: 0.3, | |
| fill: true | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| grid: { | |
| drawBorder: false | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| </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=Ghost9126/crypto-finder" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |