Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Antenna Stock Tracker</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| body { font-family: 'Inter', sans-serif; background-color: #F7F8FC; color: #2C3E50; } | |
| .status-ok { border-left-color: #2ECC71; } | |
| .status-warning { border-left-color: #F1C40F; } | |
| .status-critical { border-left-color: #E74C3C; } | |
| .progress-ok { background-color: #2ECC71; } | |
| .progress-warning { background-color: #F1C40F; } | |
| .progress-critical { background-color: #E74C3C; } | |
| .input-number::-webkit-inner-spin-button, .input-number::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } | |
| .input-number { -moz-appearance: textfield; } | |
| #toast-container { position: fixed; top: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; } | |
| .toast { padding: 12px 16px; border-radius: 6px; color: white; font-size: 14px; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); opacity: 0; transform: translateX(100%); transition: all 0.3s ease-in-out; } | |
| .toast.show { opacity: 1; transform: translateX(0); } | |
| .toast-success { background-color: #28a745; } | |
| .toast-error { background-color: #dc3545; } | |
| .toast-info { background-color: #17a2b8; } | |
| .icon-btn { color: #9ca3af; cursor: pointer; transition: color 0.2s; } | |
| .icon-btn:hover { color: #3b82f6; } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm fixed top-0 left-0 right-0 z-10"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <h1 class="text-xl font-bold text-gray-800 flex items-center"><i class="fas fa-satellite-dish mr-2 text-blue-500"></i>Antenna Stock Tracker</h1> | |
| <button id="show-reset-modal-btn" class="px-3 py-1 text-sm border border-gray-300 rounded text-gray-600 hover:text-red-500 hover:border-red-300 transition-colors"><i class="fas fa-redo mr-1"></i> Reset Data</button> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 pt-20 pb-8"> | |
| <!-- Top Row --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="lg:col-span-1"> <!-- Production Input --> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h2 class="text-lg font-semibold mb-4">Production Input</h2> | |
| <div id="product-cards" class="space-y-4"> | |
| <!-- Product cards are dynamically generated --> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-1"> <!-- Material Inventory --> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h2 class="text-lg font-semibold mb-4">Material Inventory</h2> | |
| <div id="material-cards" class="grid grid-cols-1 gap-4"> | |
| <!-- Material cards are dynamically generated --> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-1"> <!-- Production Log --> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h2 class="text-lg font-semibold mb-4">Production Log</h2> | |
| <ul id="production-log-list" class="space-y-3 h-96 overflow-y-auto pr-2"> | |
| <!-- Log entries are dynamically generated --> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bottom Row for Analytics & Actions --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6"> | |
| <div class="lg:col-span-1"> <!-- Factory Analytics --> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h2 class="text-lg font-semibold mb-4">Factory Analytics</h2> | |
| <div id="analytics-content" class="space-y-3"> | |
| <!-- Analytics are dynamically generated --> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-1"> <!-- Re-order List --> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h2 class="text-lg font-semibold mb-4">Re-order List</h2> | |
| <ul id="reorder-list" class="space-y-3 h-48 overflow-y-auto pr-2"> | |
| <!-- Re-order items are dynamically generated --> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Reset Confirmation Modal --> | |
| <div id="reset-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg p-6 max-w-sm w-full mx-4 shadow-xl"> | |
| <h3 class="text-lg font-semibold mb-2">Confirm Reset</h3> | |
| <p class="text-gray-600 mb-4">Are you sure you want to reset all inventory data? This action cannot be undone.</p> | |
| <div class="flex justify-end space-x-2"> | |
| <button id="cancel-reset-btn" class="px-4 py-2 text-sm bg-gray-200 rounded hover:bg-gray-300">Cancel</button> | |
| <button id="confirm-reset-btn" class="px-4 py-2 text-sm bg-red-500 text-white rounded hover:bg-red-600">Reset Data</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Toast Container --> | |
| <div id="toast-container"></div> | |
| <script src="app.js" type="module" defer></script> | |
| </body> | |
| </html> |