Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Create New Draft - AuctionDraftWizard</title> | |
| <link rel="icon" type="image/x-icon" href="/static/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> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| } | |
| .image-upload-container { | |
| border: 2px dashed #cbd5e0; | |
| transition: all 0.3s ease; | |
| } | |
| .image-upload-container:hover { | |
| border-color: #4299e1; | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid #4299e1; | |
| color: #4299e1; | |
| font-weight: 600; | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen"> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <i data-feather="box" class="text-blue-500 mr-2"></i> | |
| <span class="text-xl font-bold text-gray-800">AuctionDraftWizard</span> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition"> | |
| <i data-feather="save" class="mr-2"></i>Save Draft | |
| </button> | |
| <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition"> | |
| <i data-feather="user" class="mr-2"></i>Account | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-6 border-b"> | |
| <h1 class="text-2xl font-bold text-gray-800">Create New Listing Draft</h1> | |
| <p class="text-gray-600 mt-1">Fill in the details below to create your auction draft</p> | |
| </div> | |
| <div class="p-6"> | |
| <!-- Tabs --> | |
| <div class="border-b border-gray-200"> | |
| <nav class="-mb-px flex space-x-8"> | |
| <a href="#" class="tab-active whitespace-nowrap py-4 px-1 text-sm font-medium">Basic Info</a> | |
| <a href="#" class="whitespace-nowrap py-4 px-1 text-sm font-medium text-gray-500 hover:text-gray-700">Pricing</a> | |
| <a href="#" class="whitespace-nowrap py-4 px-1 text-sm font-medium text-gray-500 hover:text-gray-700">Shipping</a> | |
| <a href="#" class="whitespace-nowrap py-4 px-1 text-sm font-medium text-gray-500 hover:text-gray-700">Review</a> | |
| </nav> | |
| </div> | |
| <!-- Form Content --> | |
| <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6"> | |
| <div class="sm:col-span-6"> | |
| <label for="title" class="block text-sm font-medium text-gray-700">Title</label> | |
| <div class="mt-1"> | |
| <input type="text" name="title" id="title" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md p-2 border" placeholder="What are you selling?"> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-6"> | |
| <label for="description" class="block text-sm font-medium text-gray-700">Description</label> | |
| <div class="mt-1"> | |
| <textarea id="description" name="description" rows="4" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md p-2 border" placeholder="Describe your item in detail"></textarea> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-6"> | |
| <label class="block text-sm font-medium text-gray-700">Photos</label> | |
| <p class="mt-1 text-sm text-gray-500">Add up to 12 photos. The first one will be the main image.</p> | |
| <div class="mt-4 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> | |
| <div class="image-upload-container rounded-md flex flex-col items-center justify-center h-32 cursor-pointer"> | |
| <i data-feather="plus" class="text-gray-400 mb-2"></i> | |
| <p class="text-sm text-gray-500">Add photo</p> | |
| <input type="file" class="hidden"> | |
| </div> | |
| <div class="relative h-32 rounded-md overflow-hidden"> | |
| <img src="http://static.photos/technology/320x240/1" alt="Preview" class="h-full w-full object-cover"> | |
| <button class="absolute top-1 right-1 bg-white rounded-full p-1 shadow-sm hover:bg-gray-100"> | |
| <i data-feather="x" class="w-4 h-4 text-gray-600"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-3"> | |
| <label for="category" class="block text-sm font-medium text-gray-700">Category</label> | |
| <select id="category" name="category" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> | |
| <option>Select a category</option> | |
| <option>Antiques</option> | |
| <option>Art</option> | |
| <option>Collectibles</option> | |
| <option>Electronics</option> | |
| </select> | |
| </div> | |
| <div class="sm:col-span-3"> | |
| <label for="condition" class="block text-sm font-medium text-gray-700">Condition</label> | |
| <select id="condition" name="condition" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> | |
| <option>Select condition</option> | |
| <option>New</option> | |
| <option>Used - Like New</option> | |
| <option>Used - Very Good</option> | |
| <option>Used - Good</option> | |
| <option>Used - Acceptable</option> | |
| </select> | |
| </div> | |
| <div class="sm:col-span-3"> | |
| <label for="quantity" class="block text-sm font-medium text-gray-700">Quantity</label> | |
| <div class="mt-1"> | |
| <input type="number" name="quantity" id="quantity" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md p-2 border" value="1"> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-3"> | |
| <label for="duration" class="block text-sm font-medium text-gray-700">Duration</label> | |
| <select id="duration" name="duration" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> | |
| <option>1 day</option> | |
| <option>3 days</option> | |
| <option selected>5 days</option> | |
| <option>7 days</option> | |
| <option>10 days</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 flex justify-between"> | |
| <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition"> | |
| <i data-feather="arrow-left" class="mr-2"></i>Back | |
| </button> | |
| <button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition"> | |
| Next: Pricing <i data-feather="arrow-right" class="ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="bg-white border-t mt-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> | |
| <div class="text-center"> | |
| <p class="text-xs text-gray-500">© 2023 AuctionDraftWizard. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| feather.replace(); | |
| // Image upload preview functionality | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const uploadContainer = document.querySelector('.image-upload-container'); | |
| const fileInput = uploadContainer.querySelector('input[type="file"]'); | |
| uploadContainer.addEventListener('click', () => { | |
| fileInput.click(); | |
| }); | |
| fileInput.addEventListener('change', (e) => { | |
| if (e.target.files.length > 0) { | |
| const file = e.target.files[0]; | |
| const reader = new FileReader(); | |
| reader.onload = (event) => { | |
| const imgContainer = document.createElement('div'); | |
| imgContainer.className = 'relative h-32 rounded-md overflow-hidden'; | |
| imgContainer.innerHTML = ` | |
| <img src="${event.target.result}" alt="Preview" class="h-full w-full object-cover"> | |
| <button class="absolute top-1 right-1 bg-white rounded-full p-1 shadow-sm hover:bg-gray-100"> | |
| <i data-feather="x" class="w-4 h-4 text-gray-600"></i> | |
| </button> | |
| `; | |
| uploadContainer.parentNode.insertBefore(imgContainer, uploadContainer); | |
| feather.replace(); | |
| // Add click handler for the delete button | |
| imgContainer.querySelector('button').addEventListener('click', () => { | |
| imgContainer.remove(); | |
| }); | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |