Spaces:
Running
Running
Make a fully functioning and working ecommerce website for tech accessories, like chargers, watches, cables etc. For pakistani audience. Make it fully functioning. with a functioning frontend and a functioning backend and a way to add products and details the owner wants and then it appears on the site. make it please
a47097e verified | <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Admin Dashboard - TechBazzar Pakistan</title> | |
| <link rel="icon" type="image/x-icon" href="/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'primary': '#3B82F6', | |
| 'secondary': '#10B981', | |
| 'dark': '#0f172a', | |
| 'dark-light': '#1e293b' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-50 dark:bg-dark min-h-screen"> | |
| <!-- Admin Sidebar --> | |
| <div class="flex"> | |
| <div class="bg-white dark:bg-dark-light w-64 min-h-screen shadow-lg"> | |
| <div class="p-6 border-b border-gray-200 dark:border-gray-700"> | |
| <h1 class="text-xl font-bold flex items-center"> | |
| <i data-feather="zap" class="h-6 w-6 text-primary mr-2"></i> | |
| TechBazzar Admin | |
| </h1> | |
| </div> | |
| <nav class="p-4"> | |
| <ul class="space-y-2"> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded-lg bg-primary text-white"> | |
| <i data-feather="grid" class="h-5 w-5 mr-3"></i> | |
| Dashboard | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i data-feather="package" class="h-5 w-5 mr-3"></i> | |
| Products | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i data-feather="shopping-cart" class="h-5 w-5 mr-3"></i> | |
| Orders | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i data-feather="users" class="h-5 w-5 mr-3"></i> | |
| Customers | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i data-feather="bar-chart-2" class="h-5 w-5 mr-3"></i> | |
| Analytics | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i data-feather="settings" class="h-5 w-5 mr-3"></i> | |
| Settings | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 p-8"> | |
| <!-- Header --> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold">Admin Dashboard</h2> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors"> | |
| Add New Product | |
| </button> | |
| <div class="flex items-center space-x-2"> | |
| <img src="http://static.photos/people/200x200/1" alt="Admin" class="h-8 w-8 rounded-full"> | |
| <span>Admin User</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-white dark:bg-dark-light p-6 rounded-lg shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-600 dark:text-gray-300">Total Products</p> | |
| <p class="text-2xl font-bold">156</p> | |
| </div> | |
| <i data-feather="package" class="h-8 w-8 text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white dark:bg-dark-light p-6 rounded-lg shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-600 dark:text-gray-300">Total Orders</p> | |
| <p class="text-2xl font-bold">1,234</p> | |
| </div> | |
| <i data-feather="shopping-cart" class="h-8 w-8 text-secondary"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white dark:bg-dark-light p-6 rounded-lg shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-600 dark:text-gray-300">Total Revenue</p> | |
| <p class="text-2xl font-bold">₨ 2,456,789</p> | |
| </div> | |
| <i data-feather="dollar-sign" class="h-8 w-8 text-green-500"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white dark:bg-dark-light p-6 rounded-lg shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-600 dark:text-gray-300">Customers</p> | |
| <p class="text-2xl font-bold">892</p> | |
| </div> | |
| <i data-feather="users" class="h-8 w-8 text-purple-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Orders --> | |
| <div class="bg-white dark:bg-dark-light rounded-lg shadow mb-8"> | |
| <div class="p-6 border-b border-gray-200 dark:border-gray-700"> | |
| <h3 class="text-lg font-semibold">Recent Orders</h3> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead class="bg-gray-50 dark:bg-gray-800"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order ID</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-gray-200 dark:divide-gray-700"> | |
| <tr> | |
| <td class="px-6 py-4">#TB00123</td> | |
| <td class="px-6 py-4">Ali Ahmed</td> | |
| <td class="px-6 py-4">₨ 8,999</td> | |
| <td class="px-6 py-4"><span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">Delivered</span></td> | |
| <td class="px-6 py-4">2024-01-15</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4">#TB00122</td> | |
| <td class="px-6 py-4">Sara Khan</td> | |
| <td class="px-6 py-4">₨ 3,299</td> | |
| <td class="px-6 py-4"><span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">Shipped</span></td> | |
| <td class="px-6 py-4">2024-01-14</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4">#TB00121</td> | |
| <td class="px-6 py-4">Mohammad Raza</td> | |
| <td class="px-6 py-4">₨ 12,499</td> | |
| <td class="px-6 py-4"><span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs">Processing</span></td> | |
| <td class="px-6 py-4">2024-01-14</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Add Product Form --> | |
| <div class="bg-white dark:bg-dark-light rounded-lg shadow"> | |
| <div class="p-6 border-b border-gray-200 dark:border-gray-700"> | |
| <h3 class="text-lg font-semibold">Add New Product</h3> | |
| </div> | |
| <div class="p-6"> | |
| <form class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Product Name</label> | |
| <input type="text" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-dark"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Price (PKR)</label> | |
| <input type="number" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-dark"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Category</label> | |
| <select class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-dark"> | |
| <option>Chargers</option> | |
| <option>Smartwatches</option> | |
| <option>Cables</option> | |
| <option>Power Banks</option> | |
| <option>Phone Cases</option> | |
| <option>Gadgets</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Stock Quantity</label> | |
| <input type="number" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-dark"> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label class="block text-sm font-medium mb-2">Description</label> | |
| <textarea class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-dark" rows="3"></textarea> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label class="block text-sm font-medium mb-2">Product Image</label> | |
| <input type="file" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-dark"> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <button type="submit" class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition-colors"> | |
| Add Product | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |