| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Add Product | ShopSphere</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <link rel="stylesheet" href="style.css"> |
| <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> |
| </head> |
| <body class="bg-gray-100"> |
| <admin-sidebar></admin-sidebar> |
| |
| <div class="ml-64 p-8"> |
| <div class="flex justify-between items-center mb-8"> |
| <h1 class="text-3xl font-bold">Add New Product</h1> |
| <a href="/admin-products.html" class="text-gray-600 hover:text-gray-800 flex items-center"> |
| <i data-feather="arrow-left" class="mr-2"></i> |
| Back to Products |
| </a> |
| </div> |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> |
| <div class="px-6 py-4 border-b"> |
| <h2 class="text-xl font-bold">Product Information</h2> |
| </div> |
| |
| <div class="p-6"> |
| <form id="addProductForm"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div class="md:col-span-2"> |
| <label for="productName" class="block text-sm font-medium text-gray-700 mb-1">Product Name</label> |
| <input type="text" id="productName" required class="input-field w-full"> |
| </div> |
| |
| <div> |
| <label for="sku" class="block text-sm font-medium text-gray-700 mb-1">SKU</label> |
| <input type="text" id="sku" required class="input-field w-full"> |
| </div> |
| |
| <div> |
| <label for="category" class="block text-sm font-medium text-gray-700 mb-1">Category</label> |
| <select id="category" required class="input-field w-full"> |
| <option value="">Select a category</option> |
| <option value="electronics">Electronics</option> |
| <option value="fashion">Fashion</option> |
| <option value="home">Home & Living</option> |
| <option value="beauty">Beauty</option> |
| <option value="other">Other</option> |
| </select> |
| </div> |
| |
| <div> |
| <label for="price" class="block text-sm font-medium text-gray-700 mb-1">Price ($)</label> |
| <input type="number" id="price" min="0" step="0.01" required class="input-field w-full"> |
| </div> |
| |
| <div> |
| <label for="comparePrice" class="block text-sm font-medium text-gray-700 mb-1">Compare Price ($)</label> |
| <input type="number" id="comparePrice" min="0" step="0.01" class="input-field w-full"> |
| </div> |
| |
| <div> |
| <label for="quantity" class="block text-sm font-medium text-gray-700 mb-1">Quantity</label> |
| <input type="number" id="quantity" min="0" required class="input-field w-full"> |
| </div> |
| |
| <div class="md:col-span-2"> |
| <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Description</label> |
| <textarea id="description" rows="4" class="input-field w-full"></textarea> |
| </div> |
| |
| <div class="md:col-span-2"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Product Images</label> |
| <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md"> |
| <div class="space-y-1 text-center"> |
| <div class="flex text-sm text-gray-600"> |
| <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none"> |
| <span>Upload files</span> |
| <input id="file-upload" name="file-upload" type="file" class="sr-only" multiple> |
| </label> |
| <p class="pl-1">or drag and drop</p> |
| </div> |
| <p class="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="md:col-span-2"> |
| <div class="flex items-start"> |
| <div class="flex items-center h-5"> |
| <input id="status" name="status" type="checkbox" checked class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"> |
| </div> |
| <div class="ml-3 text-sm"> |
| <label for="status" class="font-medium text-gray-700">Active</label> |
| <p class="text-gray-500">When checked, this product will be available for customers to purchase.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8 flex justify-end"> |
| <button type="button" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-2 rounded-md font-medium mr-3 transition duration-300"> |
| Cancel |
| </button> |
| <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-md font-medium transition duration-300"> |
| Save Product |
| </button> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
|
|
| <script src="components/admin-sidebar.js"></script> |
| <script src="script.js"></script> |
| <script> |
| feather.replace(); |
| |
| document.getElementById('addProductForm').addEventListener('submit', function(e) { |
| e.preventDefault(); |
| |
| alert('Product saved successfully!'); |
| window.location.href = '/admin-products.html'; |
| }); |
| </script> |
| </body> |
| </html> |
