| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>LabByte - Computer Inventory</title> |
| | <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> |
| | <script src="components/navbar.js"></script> |
| | <script src="components/footer.js"></script> |
| | </head> |
| | <body class="bg-gray-50 min-h-screen flex flex-col"> |
| | <custom-navbar></custom-navbar> |
| | |
| | <main class="flex-grow container mx-auto px-4 py-8"> |
| | <div class="flex justify-between items-center mb-8"> |
| | <h1 class="text-3xl font-bold text-gray-800">Computer Inventory</h1> |
| | <button id="add-machine-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center transition"> |
| | <i data-feather="plus" class="mr-2"></i> Add Machine |
| | </button> |
| | </div> |
| |
|
| | <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| | |
| | <div class="bg-white rounded-lg shadow p-6"> |
| | <div class="flex items-center"> |
| | <div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
| | <i data-feather="monitor"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-gray-500">Total Machines</h3> |
| | <p class="text-2xl font-semibold" id="total-machines">0</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="bg-white rounded-lg shadow p-6"> |
| | <div class="flex items-center"> |
| | <div class="p-3 rounded-full bg-green-100 text-green-600"> |
| | <i data-feather="cpu"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-gray-500">Windows PCs</h3> |
| | <p class="text-2xl font-semibold" id="total-pcs">0</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="bg-white rounded-lg shadow p-6"> |
| | <div class="flex items-center"> |
| | <div class="p-3 rounded-full bg-purple-100 text-purple-600"> |
| | <i data-feather="cpu"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-gray-500">Mac Computers</h3> |
| | <p class="text-2xl font-semibold" id="total-macs">0</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <div class="mt-8 bg-white rounded-lg shadow overflow-hidden"> |
| | <div class="px-6 py-4 border-b border-gray-200"> |
| | <h2 class="text-xl font-semibold text-gray-800">All Machines</h2> |
| | </div> |
| | <div class="overflow-x-auto"> |
| | <table class="min-w-full divide-y divide-gray-200"> |
| | <thead class="bg-gray-50"> |
| | <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">Type</th> |
| | <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Model</th> |
| | <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th> |
| | <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</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="inventory-table" class="bg-white divide-y divide-gray-200"> |
| | |
| | </tbody> |
| | </table> |
| | </div> |
| | </div> |
| | </main> |
| |
|
| | |
| | <div id="machine-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center p-4 z-50"> |
| | <div class="bg-white rounded-lg shadow-xl w-full max-w-md"> |
| | <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center"> |
| | <h3 class="text-lg font-semibold" id="modal-title">Add New Machine</h3> |
| | <button id="close-modal" class="text-gray-500 hover:text-gray-700"> |
| | <i data-feather="x"></i> |
| | </button> |
| | </div> |
| | <div class="p-6"> |
| | <form id="machine-form"> |
| | <input type="hidden" id="machine-id"> |
| | <div class="mb-4"> |
| | <label for="machine-type" class="block text-sm font-medium text-gray-700 mb-1">Type</label> |
| | <select id="machine-type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| | <option value="windows">Windows PC</option> |
| | <option value="mac">Mac Computer</option> |
| | </select> |
| | </div> |
| | <div class="mb-4"> |
| | <label for="machine-model" class="block text-sm font-medium text-gray-700 mb-1">Model</label> |
| | <input type="text" id="machine-model" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| | </div> |
| | <div class="mb-4"> |
| | <label for="machine-serial" class="block text-sm font-medium text-gray-700 mb-1">Serial Number</label> |
| | <input type="text" id="machine-serial" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| | </div> |
| | <div class="mb-4"> |
| | <label for="machine-location" class="block text-sm font-medium text-gray-700 mb-1">Location</label> |
| | <select id="machine-location" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| | <option value="Lab A">Lab A</option> |
| | <option value="Lab B">Lab B</option> |
| | <option value="Lab C">Lab C</option> |
| | <option value="Lab D">Lab D</option> |
| | </select> |
| | </div> |
| | <div class="mb-4"> |
| | <label for="machine-status" class="block text-sm font-medium text-gray-700 mb-1">Status</label> |
| | <select id="machine-status" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| | <option value="Operational">Operational</option> |
| | <option value="Maintenance">Maintenance</option> |
| | <option value="Retired">Retired</option> |
| | </select> |
| | </div> |
| | </form> |
| | </div> |
| | <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3"> |
| | <button id="cancel-modal" class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800">Cancel</button> |
| | <button id="save-machine" class="px-4 py-2 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700">Save</button> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <custom-footer></custom-footer> |
| | |
| | <script src="components/navbar.js"></script> |
| | <script src="components/footer.js"></script> |
| | <script src="script.js"></script> |
| | <script> |
| | feather.replace(); |
| | </script> |
| | <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| | </body> |
| | </html> |
