Spaces:
Running
Running
add products and live actions and all things that would get anyone to click the buy button and add product description your products are hardwares like pc hardwares and gadgets and switch, controllers Playstation ,and all gaimng products
742f3ea verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Admin Panel | CircuitCart Surge</title> | |
| <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <!-- Navigation --> | |
| <nav class="bg-blue-900 text-white p-4 shadow-lg"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <a href="index.html" class="text-2xl font-bold flex items-center"> | |
| <i class="fas fa-bolt mr-2"></i> CircuitCart | |
| </a> | |
| <div class="flex space-x-6"> | |
| <a href="index.html" class="hover:text-yellow-300">Home</a> | |
| <a href="products.html" class="hover:text-yellow-300">Products</a> | |
| <a href="cart.html" class="hover:text-yellow-300"> | |
| <i class="fas fa-shopping-cart"></i> | |
| <span id="cart-count" class="ml-1">0</span> | |
| </a> | |
| <a href="admin.html" class="hover:text-yellow-300 font-bold">Admin</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Admin Content --> | |
| <main class="container mx-auto py-8 px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h1 class="text-3xl font-bold">Admin Panel</h1> | |
| <button id="add-product-btn" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Add Product | |
| </button> | |
| </div> | |
| <!-- Product Management --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full"> | |
| <thead class="bg-gray-100"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stock</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody id="admin-products-table" class="bg-white divide-y divide-gray-200"> | |
| <!-- Products will be loaded dynamically --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Add/Edit Product Modal --> | |
| <div id="product-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl"> | |
| <div class="flex justify-between items-center border-b px-6 py-4"> | |
| <h2 class="text-xl font-bold" id="modal-title">Add New Product</h2> | |
| <button id="close-modal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <form id="product-form"> | |
| <input type="hidden" id="product-id"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Product Name</label> | |
| <input type="text" id="product-name" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Category</label> | |
| <select id="product-category" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> | |
| <option value="gpu">Graphics Cards</option> | |
| <option value="cpu">Processors</option> | |
| <option value="ram">Memory (RAM)</option> | |
| <option value="storage">Storage (SSD/HDD)</option> | |
| <option value="motherboard">Motherboards</option> | |
| <option value="psu">Power Supplies</option> | |
| <option value="cooling">Cooling</option> | |
| <option value="case">PC Cases</option> | |
| <option value="peripheral">Peripherals</option> | |
| <option value="monitor">Monitors</option> | |
| <option value="console">Gaming Consoles</option> | |
| <option value="controller">Controllers</option> | |
| <option value="headset">Headsets</option> | |
| <option value="keyboard">Keyboards</option> | |
| <option value="mouse">Mice</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Price ($)</label> | |
| <input type="number" id="product-price" step="0.01" min="0" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Stock Quantity</label> | |
| <input type="number" id="product-stock" min="0" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label class="block text-gray-700 mb-2">Brand</label> | |
| <input type="text" id="product-brand" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 mb-4" required> | |
| <label class="block text-gray-700 mb-2">Model</label> | |
| <input type="text" id="product-model" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 mb-4" required> | |
| <label class="block text-gray-700 mb-2">Description</label> | |
| <textarea id="product-description" rows="3" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 mb-4" required></textarea> | |
| <label class="block text-gray-700 mb-2">Key Features (one per line)</label> | |
| <textarea id="product-features" rows="3" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 mb-4"></textarea> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label class="block text-gray-700 mb-2">Image URL</label> | |
| <input type="text" id="product-image" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label class="block text-gray-700 mb-2">Specifications (one per line)</label> | |
| <textarea id="product-specs" rows="4" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mt-6 space-x-4"> | |
| <button type="button" id="cancel-modal" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100">Cancel</button> | |
| <button type="submit" class="bg-blue-900 hover:bg-blue-800 text-white font-bold py-2 px-6 rounded-lg">Save Product</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="js/admin.js"></script> | |
| </body> | |
| </html> |