loftest/barcode-beast
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Barcode Beast - Inventory</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/quagga/dist/quagga.min.js"></script>10</head>11<body class="bg-gray-100">12 <custom-navbar></custom-navbar>13 14 <main class="container mx-auto px-4 py-8">15 <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-6">16 <h1 class="text-3xl font-bold mb-6 text-blue-600">Inventory Scanner</h1>17 18 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">19 <div class="space-y-4">20 <div id="scanner-container" class="relative bg-gray-200 rounded-lg overflow-hidden">21 <div id="interactive" class="w-full h-64"></div>22 <div class="absolute inset-0 flex items-center justify-center">23 <div class="border-4 border-dashed border-blue-500 rounded-lg w-3/4 h-48"></div>24 </div>25 </div>26 27 <div class="flex space-x-4">28 <button id="start-scan" class="flex-1 bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg font-medium">29 Start Scan30 </button>31 <button id="stop-scan" class="flex-1 bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-lg font-medium">32 Stop Scan33 </button>34 </div>35 36 <div class="bg-blue-50 p-4 rounded-lg">37 <h3 class="font-medium text-blue-700 mb-2">Scanned Barcode:</h3>38 <div id="barcode-result" class="text-xl font-bold">-</div>39 </div>40 </div>41 42 <div>43 <div class="bg-white border border-gray-200 rounded-lg shadow p-4">44 <h2 class="text-xl font-bold mb-4">Add/Update Item</h2>45 <form id="item-form" class="space-y-4">46 <div>47 <label class="block text-sm font-medium text-gray-700">Barcode</label>48 <input type="text" id="barcode-input" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3">49 </div>50 <div>51 <label class="block text-sm font-medium text-gray-700">Product Name</label>52 <input type="text" id="name-input" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3">53 </div>54 <div>55 <label class="block text-sm font-medium text-gray-700">Quantity</label>56 <input type="number" id="quantity-input" value="1" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3">57 </div>58 <div>59 <label class="block text-sm font-medium text-gray-700">Price</label>60 <input type="number" step="0.01" id="price-input" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3">61 </div>62 <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md font-medium">63 Save Item64 </button>65 </form>66 </div>67 </div>68 </div>69 70 <div class="mt-8">71 <h2 class="text-2xl font-bold mb-4">Inventory List</h2>72 <div class="overflow-x-auto">73 <table id="inventory-table" class="min-w-full divide-y divide-gray-200">74 <thead class="bg-gray-50">75 <tr>76 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Barcode</th>77 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>78 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Quantity</th>79 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>80 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>81 </tr>82 </thead>83 <tbody id="inventory-list" class="bg-white divide-y divide-gray-200">84 <!-- Items will be added here dynamically -->85 </tbody>86 </table>87 </div>88 </div>89 </div>90 </main>91 92 <custom-footer></custom-footer>93 94 <script src="components/navbar.js"></script>95 <script src="components/footer.js"></script>96 <script src="inventory.js"></script>97</body>98</html>