Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Bulk Order Upload</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6"> | |
| <h1 class="text-3xl font-bold text-gray-800 mb-6">Bulk Order Upload</h1> | |
| <!-- Merchant ID Input --> | |
| <div class="mb-8"> | |
| <label for="merchantId" class="block text-sm font-medium text-gray-700 mb-2">Merchant ID</label> | |
| <div class="relative rounded-md shadow-sm"> | |
| <input type="text" id="merchantId" | |
| class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-4 pr-12 py-3 sm:text-sm border-gray-300 rounded-md border" | |
| placeholder="Enter merchant ID"> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> | |
| <i data-feather="user" class="text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Drag & Drop Zone --> | |
| <div id="dropZone" class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-8 transition-colors hover:border-indigo-400"> | |
| <div class="flex flex-col items-center justify-center space-y-4"> | |
| <i data-feather="upload-cloud" class="w-12 h-12 text-gray-400"></i> | |
| <h3 class="text-lg font-medium text-gray-700">Drag & drop your file here</h3> | |
| <p class="text-sm text-gray-500">or</p> | |
| <button id="browseBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| Browse Files | |
| </button> | |
| <input type="file" id="fileInput" class="hidden" accept=".csv,.xlsx,.xls"> | |
| <p class="text-xs text-gray-400 mt-2">Supported formats: CSV, XLSX, XLS</p> | |
| </div> | |
| </div> | |
| <div id="fileInfo" class="hidden mb-8 p-4 bg-gray-50 rounded-lg"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <i data-feather="file" class="text-indigo-600"></i> | |
| <div> | |
| <p id="fileName" class="text-sm font-medium text-gray-700"></p> | |
| <p id="fileSize" class="text-xs text-gray-500"></p> | |
| </div> | |
| </div> | |
| <button id="removeFile" class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Preview Section --> | |
| <div id="previewSection" class="hidden"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Preview</h2> | |
| <div class="overflow-x-auto bg-gray-50 rounded-lg p-4 mb-6"> | |
| <table id="previewTable" class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-100"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Column 1</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Column 2</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Column 3</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200" id="previewBody"> | |
| <!-- Preview data will be inserted here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button id="cancelBtn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| Cancel | |
| </button> | |
| <button id="processBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| Process Orders | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <!-- Toast Notification --> | |
| <div id="toast" class="fixed bottom-4 right-4 hidden"> | |
| <div class="bg-gray-800 text-white px-4 py-2 rounded-md shadow-lg flex items-center"> | |
| <span id="toastMessage"></span> | |
| </div> | |
| </div> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |