| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>POS Desktop App</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
| ::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| } |
| ::-webkit-scrollbar-thumb { |
| background: #888; |
| border-radius: 4px; |
| } |
| ::-webkit-scrollbar-thumb:hover { |
| background: #555; |
| } |
| |
| |
| .window { |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); |
| border-radius: 8px; |
| overflow: hidden; |
| } |
| |
| .title-bar { |
| -webkit-user-select: none; |
| user-select: none; |
| } |
| |
| |
| .btn-animate { |
| transition: all 0.2s ease; |
| } |
| .btn-animate:hover { |
| transform: translateY(-2px); |
| } |
| .btn-animate:active { |
| transform: translateY(0); |
| } |
| |
| |
| .input-focus:focus { |
| box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-200 min-h-screen flex items-center justify-center p-4"> |
| <div class="window w-full max-w-6xl h-[90vh] flex flex-col bg-white"> |
| |
| <div class="title-bar bg-gray-800 text-white px-4 py-2 flex items-center justify-between"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-cash-register text-blue-400"></i> |
| <span class="font-semibold">POS Pro Desktop</span> |
| </div> |
| <div class="flex items-center space-x-3"> |
| <button class="text-gray-300 hover:text-white"> |
| <i class="fas fa-window-minimize"></i> |
| </button> |
| <button class="text-gray-300 hover:text-white"> |
| <i class="fas fa-window-maximize"></i> |
| </button> |
| <button class="text-gray-300 hover:text-red-400"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-700 text-white px-4 py-1 flex items-center space-x-6 text-sm"> |
| <div class="relative group"> |
| <button class="hover:bg-gray-600 px-2 py-1 rounded">File</button> |
| <div class="hidden group-hover:block absolute bg-white text-gray-800 shadow-lg rounded z-10 w-48"> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-100">New Transaction</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-100">Open</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-100">Save</a> |
| <div class="border-t"></div> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-100">Print Receipt</a> |
| <div class="border-t"></div> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-100">Exit</a> |
| </div> |
| </div> |
| <div class="relative group"> |
| <button class="hover:bg-gray-600 px-2 py-1 rounded">Edit</button> |
| <div class="hidden group-hover:block absolute bg-white text-gray-800 shadow-lg rounded z-10 w-48"> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-100">Undo</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-100">Redo</a> |
| <div class="border-t"></div> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-100">Cut</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-100">Copy</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-100">Paste</a> |
| </div> |
| </div> |
| <div class="relative group"> |
| <button class="hover:bg-gray-600 px-2 py-1 rounded">View</button> |
| <div class="hidden group-hover:block absolute bg-white text-gray-800 shadow-lg rounded z-10 w-48"> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-100">Full Screen</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-100">Zoom In</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-100">Zoom Out</a> |
| </div> |
| </div> |
| <div class="relative group"> |
| <button class="hover:bg-gray-600 px-2 py-1 rounded">Reports</button> |
| <div class="hidden group-hover:block absolute bg-white text-gray-800 shadow-lg rounded z-10 w-48"> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-100">Daily Sales</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-100">Inventory</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-100">Customer</a> |
| </div> |
| </div> |
| <div class="relative group"> |
| <button class="hover:bg-gray-600 px-2 py-1 rounded">Help</button> |
| <div class="hidden group-hover:block absolute bg-white text-gray-800 shadow-lg rounded z-10 w-48"> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-100">Documentation</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-100">About</a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-100 border-b px-4 py-2 flex items-center space-x-4"> |
| <button class="bg-blue-600 text-white px-3 py-1 rounded btn-animate flex items-center space-x-1"> |
| <i class="fas fa-plus"></i> |
| <span>New Sale</span> |
| </button> |
| <button class="bg-green-600 text-white px-3 py-1 rounded btn-animate flex items-center space-x-1"> |
| <i class="fas fa-save"></i> |
| <span>Save</span> |
| </button> |
| <button class="bg-yellow-500 text-white px-3 py-1 rounded btn-animate flex items-center space-x-1"> |
| <i class="fas fa-print"></i> |
| <span>Print</span> |
| </button> |
| <button class="bg-red-500 text-white px-3 py-1 rounded btn-animate flex items-center space-x-1"> |
| <i class="fas fa-trash"></i> |
| <span>Cancel</span> |
| </button> |
| <div class="border-l h-6 mx-2"></div> |
| <button class="bg-purple-600 text-white px-3 py-1 rounded btn-animate flex items-center space-x-1"> |
| <i class="fas fa-chart-line"></i> |
| <span>Reports</span> |
| </button> |
| <button class="bg-indigo-600 text-white px-3 py-1 rounded btn-animate flex items-center space-x-1"> |
| <i class="fas fa-cog"></i> |
| <span>Settings</span> |
| </button> |
| </div> |
| |
| |
| <div class="flex flex-1 overflow-hidden"> |
| |
| <div class="w-1/3 border-r bg-gray-50 flex flex-col"> |
| <div class="p-3 border-b"> |
| <div class="relative"> |
| <input type="text" placeholder="Search products..." |
| class="w-full px-4 py-2 border rounded-full input-focus pl-10"> |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
| </div> |
| </div> |
| |
| <div class="flex-1 overflow-y-auto p-2"> |
| <div class="grid grid-cols-2 gap-2"> |
| |
| <div class="bg-white border rounded p-2 cursor-pointer hover:bg-blue-50 transition-colors"> |
| <div class="h-24 bg-gray-200 rounded mb-2 flex items-center justify-center"> |
| <i class="fas fa-wine-bottle text-3xl text-blue-500"></i> |
| </div> |
| <div class="font-semibold text-sm">Mineral Water</div> |
| <div class="text-xs text-gray-500">500ml</div> |
| <div class="font-bold text-blue-600 mt-1">$1.50</div> |
| </div> |
| |
| <div class="bg-white border rounded p-2 cursor-pointer hover:bg-blue-50 transition-colors"> |
| <div class="h-24 bg-gray-200 rounded mb-2 flex items-center justify-center"> |
| <i class="fas fa-coffee text-3xl text-brown-500"></i> |
| </div> |
| <div class="font-semibold text-sm">Coffee</div> |
| <div class="text-xs text-gray-500">Regular</div> |
| <div class="font-bold text-blue-600 mt-1">$2.50</div> |
| </div> |
| |
| <div class="bg-white border rounded p-2 cursor-pointer hover:bg-blue-50 transition-colors"> |
| <div class="h-24 bg-gray-200 rounded mb-2 flex items-center justify-center"> |
| <i class="fas fa-hamburger text-3xl text-yellow-500"></i> |
| </div> |
| <div class="font-semibold text-sm">Burger</div> |
| <div class="text-xs text-gray-500">Cheese</div> |
| <div class="font-bold text-blue-600 mt-1">$5.99</div> |
| </div> |
| |
| <div class="bg-white border rounded p-2 cursor-pointer hover:bg-blue-50 transition-colors"> |
| <div class="h-24 bg-gray-200 rounded mb-2 flex items-center justify-center"> |
| <i class="fas fa-pizza-slice text-3xl text-red-500"></i> |
| </div> |
| <div class="font-semibold text-sm">Pizza</div> |
| <div class="text-xs text-gray-500">Large</div> |
| <div class="font-bold text-blue-600 mt-1">$12.99</div> |
| </div> |
| |
| <div class="bg-white border rounded p-2 cursor-pointer hover:bg-blue-50 transition-colors"> |
| <div class="h-24 bg-gray-200 rounded mb-2 flex items-center justify-center"> |
| <i class="fas fa-ice-cream text-3xl text-pink-500"></i> |
| </div> |
| <div class="font-semibold text-sm">Ice Cream</div> |
| <div class="text-xs text-gray-500">Vanilla</div> |
| <div class="font-bold text-blue-600 mt-1">$3.50</div> |
| </div> |
| |
| <div class="bg-white border rounded p-2 cursor-pointer hover:bg-blue-50 transition-colors"> |
| <div class="h-24 bg-gray-200 rounded mb-2 flex items-center justify-center"> |
| <i class="fas fa-beer text-3xl text-amber-500"></i> |
| </div> |
| <div class="font-semibold text-sm">Beer</div> |
| <div class="text-xs text-gray-500">500ml</div> |
| <div class="font-bold text-blue-600 mt-1">$4.50</div> |
| </div> |
| |
| <div class="bg-white border rounded p-2 cursor-pointer hover:bg-blue-50 transition-colors"> |
| <div class="h-24 bg-gray-200 rounded mb-2 flex items-center justify-center"> |
| <i class="fas fa-wine-glass-alt text-3xl text-purple-500"></i> |
| </div> |
| <div class="font-semibold text-sm">Wine</div> |
| <div class="text-xs text-gray-500">Red</div> |
| <div class="font-bold text-blue-600 mt-1">$8.99</div> |
| </div> |
| |
| <div class="bg-white border rounded p-2 cursor-pointer hover:bg-blue-50 transition-colors"> |
| <div class="h-24 bg-gray-200 rounded mb-2 flex items-center justify-center"> |
| <i class="fas fa-cookie text-3xl text-brown-500"></i> |
| </div> |
| <div class="font-semibold text-sm">Cookie</div> |
| <div class="text-xs text-gray-500">Chocolate</div> |
| <div class="font-bold text-blue-600 mt-1">$1.99</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="p-3 border-t bg-gray-100"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <div class="text-xs text-gray-500">Total Items</div> |
| <div class="font-bold">8</div> |
| </div> |
| <button class="bg-blue-600 text-white px-4 py-2 rounded btn-animate"> |
| <i class="fas fa-sync-alt mr-1"></i> Refresh |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 flex flex-col"> |
| |
| <div class="border-b p-3"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <span class="font-semibold">Transaction #</span> |
| <span class="text-blue-600 ml-2">ORD-2023-00142</span> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <div class="text-sm"> |
| <span class="text-gray-500">Date:</span> |
| <span class="ml-1">2023-07-15</span> |
| </div> |
| <div class="text-sm"> |
| <span class="text-gray-500">Time:</span> |
| <span class="ml-1">14:30</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 overflow-y-auto p-3"> |
| <table class="w-full"> |
| <thead> |
| <tr class="border-b text-left text-gray-600"> |
| <th class="pb-2">Item</th> |
| <th class="pb-2 text-right">Price</th> |
| <th class="pb-2 text-right">Qty</th> |
| <th class="pb-2 text-right">Total</th> |
| <th class="pb-2"></th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr class="border-b"> |
| <td class="py-2"> |
| <div class="font-semibold">Burger</div> |
| <div class="text-xs text-gray-500">Cheese</div> |
| </td> |
| <td class="text-right">$5.99</td> |
| <td class="text-right"> |
| <div class="flex items-center justify-end"> |
| <button class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center"> |
| <i class="fas fa-minus text-xs"></i> |
| </button> |
| <span class="mx-2">1</span> |
| <button class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center"> |
| <i class="fas fa-plus text-xs"></i> |
| </button> |
| </div> |
| </td> |
| <td class="text-right font-semibold">$5.99</td> |
| <td class="text-right"> |
| <button class="text-red-500 hover:text-red-700"> |
| <i class="fas fa-trash-alt"></i> |
| </button> |
| </td> |
| </tr> |
| <tr class="border-b"> |
| <td class="py-2"> |
| <div class="font-semibold">Coffee</div> |
| <div class="text-xs text-gray-500">Regular</div> |
| </td> |
| <td class="text-right">$2.50</td> |
| <td class="text-right"> |
| <div class="flex items-center justify-end"> |
| <button class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center"> |
| <i class="fas fa-minus text-xs"></i> |
| </button> |
| <span class="mx-2">2</span> |
| <button class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center"> |
| <i class="fas fa-plus text-xs"></i> |
| </button> |
| </div> |
| </td> |
| <td class="text-right font-semibold">$5.00</td> |
| <td class="text-right"> |
| <button class="text-red-500 hover:text-red-700"> |
| <i class="fas fa-trash-alt"></i> |
| </button> |
| </td> |
| </tr> |
| <tr class="border-b"> |
| <td class="py-2"> |
| <div class="font-semibold">Mineral Water</div> |
| <div class="text-xs text-gray-500">500ml</div> |
| </td> |
| <td class="text-right">$1.50</td> |
| <td class="text-right"> |
| <div class="flex items-center justify-end"> |
| <button class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center"> |
| <i class="fas fa-minus text-xs"></i> |
| </button> |
| <span class="mx-2">1</span> |
| <button class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center"> |
| <i class="fas fa-plus text-xs"></i> |
| </button> |
| </div> |
| </td> |
| <td class="text-right font-semibold">$1.50</td> |
| <td class="text-right"> |
| <button class="text-red-500 hover:text-red-700"> |
| <i class="fas fa-trash-alt"></i> |
| </button> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| |
| <div class="border-t p-3 bg-gray-50"> |
| <div class="grid grid-cols-2 gap-4"> |
| <div> |
| <div class="mb-3"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Customer</label> |
| <select class="w-full border rounded px-3 py-2 input-focus"> |
| <option>Walk-in Customer</option> |
| <option>John Doe (VIP)</option> |
| <option>Jane Smith</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Notes</label> |
| <textarea class="w-full border rounded px-3 py-2 h-20 input-focus" placeholder="Special instructions..."></textarea> |
| </div> |
| </div> |
| |
| <div> |
| <div class="bg-white border rounded p-3"> |
| <div class="flex justify-between mb-2"> |
| <span>Subtotal:</span> |
| <span>$12.49</span> |
| </div> |
| <div class="flex justify-between mb-2"> |
| <span>Tax (10%):</span> |
| <span>$1.25</span> |
| </div> |
| <div class="flex justify-between mb-2"> |
| <span>Discount:</span> |
| <span>$0.00</span> |
| </div> |
| <div class="border-t pt-2 mb-2"> |
| <div class="flex justify-between font-bold text-lg"> |
| <span>Total:</span> |
| <span>$13.74</span> |
| </div> |
| </div> |
| |
| <div class="mt-4 grid grid-cols-3 gap-2"> |
| <button class="bg-blue-600 text-white py-2 rounded btn-animate"> |
| <i class="fas fa-money-bill-wave"></i> Cash |
| </button> |
| <button class="bg-green-600 text-white py-2 rounded btn-animate"> |
| <i class="fas fa-credit-card"></i> Card |
| </button> |
| <button class="bg-purple-600 text-white py-2 rounded btn-animate"> |
| <i class="fas fa-mobile-alt"></i> Mobile |
| </button> |
| </div> |
| |
| <div class="mt-3"> |
| <button class="w-full bg-green-600 text-white py-3 rounded-lg font-bold btn-animate"> |
| <i class="fas fa-check-circle mr-1"></i> Complete Sale |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-800 text-white text-sm px-4 py-1 flex justify-between"> |
| <div> |
| <span class="text-gray-400">User:</span> |
| <span class="ml-1">Admin</span> |
| </div> |
| <div> |
| <span class="text-gray-400">Shift:</span> |
| <span class="ml-1">Morning (08:00 - 16:00)</span> |
| </div> |
| <div> |
| <span class="text-gray-400">Sales Today:</span> |
| <span class="ml-1">$1,245.75</span> |
| </div> |
| <div> |
| <i class="fas fa-circle text-green-400 mr-1"></i> |
| <span>Connected</span> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.querySelectorAll('.grid.grid-cols-2 > div').forEach(product => { |
| product.addEventListener('click', function() { |
| |
| console.log('Product selected:', this.querySelector('div.font-semibold').textContent); |
| |
| |
| this.classList.add('bg-blue-100'); |
| setTimeout(() => { |
| this.classList.remove('bg-blue-100'); |
| }, 200); |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.grid.grid-cols-3 > button').forEach(btn => { |
| btn.addEventListener('click', function() { |
| |
| console.log('Payment method:', this.textContent.trim()); |
| |
| |
| this.classList.add('ring-2', 'ring-offset-2'); |
| setTimeout(() => { |
| this.classList.remove('ring-2', 'ring-offset-2'); |
| }, 300); |
| }); |
| }); |
| |
| |
| document.querySelector('.bg-green-600.py-3').addEventListener('click', function() { |
| alert('Sale completed! Receipt printed.'); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=mohddh/ddd" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
