<!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
