Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Order Verification - Another Bike Shop</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> | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| } | |
| .pulse-animation { | |
| animation: pulse 1.5s infinite; | |
| } | |
| .qr-scanner { | |
| width: 100%; | |
| max-width: 500px; | |
| margin: 0 auto; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); | |
| } | |
| .order-card { | |
| transition: all 0.3s ease; | |
| border-left: 4px solid transparent; | |
| } | |
| .order-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.1); | |
| } | |
| .verified { | |
| border-left-color: #10B981; | |
| } | |
| .pending { | |
| border-left-color: #F59E0B; | |
| } | |
| .security-badge { | |
| height: 45px; | |
| filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Customer Order Verification Page --> | |
| <div id="customerView" class="max-w-4xl mx-auto p-6"> | |
| <div class="text-center mb-8"> | |
| <img src="https://via.placeholder.com/200x60?text=Another+Bike+Shop" alt="Another Bike Shop Logo" class="mx-auto mb-4"> | |
| <h1 class="text-3xl font-bold text-gray-800 mb-2">Order #042425-174046-759</h1> | |
| <div class="inline-flex items-center px-4 py-2 rounded-full bg-green-100 text-green-800"> | |
| <span class="pulse-animation mr-2">●</span> | |
| <span class="font-medium">Ready for Pickup</span> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Order Summary --> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Order Summary</h2> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between border-b pb-3"> | |
| <div> | |
| <p class="font-medium">Santa Cruz Bullit 4 CC MX</p> | |
| <p class="text-sm text-gray-500">Matte Teal Sparkle, M</p> | |
| </div> | |
| <p class="font-medium">$11,899.00</p> | |
| </div> | |
| <div class="flex justify-between border-b pb-3"> | |
| <div> | |
| <p class="font-medium">Transition Repeater PT Carbon</p> | |
| <p class="text-sm text-gray-500">Graphite Grey, L</p> | |
| </div> | |
| <p class="font-medium">$6,999.99</p> | |
| </div> | |
| <div class="flex justify-between border-b pb-3"> | |
| <div> | |
| <p class="font-medium">Transition RELAY CARBON</p> | |
| <p class="text-sm text-gray-500">TR BLUE, L, Demo</p> | |
| </div> | |
| <p class="font-medium">$5,499.99</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-4 border-t"> | |
| <div class="flex justify-between mb-2"> | |
| <p class="text-gray-600">Subtotal</p> | |
| <p class="font-medium">$24,398.98</p> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <p class="text-gray-600">Tax</p> | |
| <p class="font-medium">$2,378.90</p> | |
| </div> | |
| <div class="flex justify-between text-lg font-bold mt-3"> | |
| <p>Total</p> | |
| <p>$26,777.88</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Verification Section --> | |
| <div class="space-y-6"> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Pickup Verification</h2> | |
| <div class="text-center mb-4"> | |
| <div class="inline-block p-4 bg-white border border-gray-200 rounded-lg"> | |
| <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=order_042425-174046-759_token_7A8B9C0D1E2F3G4H" | |
| alt="Order Verification QR Code" class="w-40 h-40 mx-auto"> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-2">Scan this code at pickup</p> | |
| </div> | |
| <div class="mt-4 p-4 bg-gray-50 rounded-lg"> | |
| <p class="text-sm font-medium text-gray-700 mb-2">Manual Verification Code</p> | |
| <div class="flex items-center justify-between bg-white px-3 py-2 rounded border border-gray-200"> | |
| <code class="text-sm font-mono text-gray-800">7A8B9C0D1E2F3G4H</code> | |
| <button onclick="copyToClipboard('7A8B9C0D1E2F3G4H')" class="text-blue-600 hover:text-blue-800"> | |
| <i class="far fa-copy"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Pickup Information</h2> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-map-marker-alt text-gray-400 mt-1 mr-3"></i> | |
| <div> | |
| <p class="font-medium">Another Bike Shop</p> | |
| <p class="text-gray-600">123 Bike Lane, Santa Cruz, CA 95060</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-clock text-gray-400 mt-1 mr-3"></i> | |
| <div> | |
| <p class="font-medium">Pickup Hours</p> | |
| <p class="text-gray-600">M-F 10 AM – 6 PM PST | Sa-Su 10 AM – 5 PM PST</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-id-card text-gray-400 mt-1 mr-3"></i> | |
| <div> | |
| <p class="font-medium">Required for Pickup</p> | |
| <p class="text-gray-600">Valid photo ID matching order name</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Payment Verification --> | |
| <div class="mt-8 bg-white rounded-xl shadow-sm p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Payment Verification</h2> | |
| <div class="flex flex-wrap items-center justify-between"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4"> | |
| <i class="fab fa-cc-paypal text-blue-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">PayPal</p> | |
| <p class="text-sm text-gray-500">Verified via MCP Pay</p> | |
| </div> | |
| </div> | |
| <div class="bg-green-100 text-green-800 px-4 py-2 rounded-lg"> | |
| <p class="font-medium">Payment Confirmed</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-4 border-t"> | |
| <p class="text-sm text-gray-600 mb-3">Transaction Security</p> | |
| <div class="flex flex-wrap items-center gap-4"> | |
| <img src="https://www.pcisecuritystandards.org/assests/images/pci-logo.svg" alt="PCI DSS Compliant" class="security-badge h-8"> | |
| <img src="https://www.paypalobjects.com/webstatic/mktg/logo/pp_cc_mark_111x69.jpg" alt="PayPal Verified" class="security-badge h-8"> | |
| <img src="https://www.bbb.org/Images/BBB%20Accreditation/BBBAccreditation_Badge_2019.png" alt="BBB Accredited" class="security-badge h-8"> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-4"> | |
| <i class="fas fa-lock"></i> Secured transaction processed via MCP Pay / PayPal Secure Channel | |
| <br>Verification Timestamp: 2025-04-30T16:31:22-07:00 | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center text-gray-500 text-sm"> | |
| <p>Questions? Contact us at (831) 427-2232 or info@anotherbikeshop.com</p> | |
| <p class="mt-1">Thank you for your business!</p> | |
| </div> | |
| </div> | |
| <!-- Staff Scanner Interface (Hidden by default) --> | |
| <div id="staffView" class="hidden max-w-2xl mx-auto p-6"> | |
| <div class="text-center mb-8"> | |
| <img src="https://via.placeholder.com/200x60?text=Another+Bike+Shop" alt="Another Bike Shop Logo" class="mx-auto mb-4"> | |
| <h1 class="text-2xl font-bold text-gray-800 mb-2">Order Verification Scanner</h1> | |
| <p class="text-gray-600">Scan customer QR codes for instant order verification</p> | |
| </div> | |
| <div class="qr-scanner bg-white p-4 mb-6"> | |
| <div id="qr-reader" class="w-full h-64 bg-black"></div> | |
| </div> | |
| <div id="scan-result" class="hidden"> | |
| <div class="order-card verified bg-white rounded-xl shadow-sm p-6 mb-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h2 class="text-xl font-semibold text-gray-800">Order #<span id="result-order-id">042425-174046-759</span></h2> | |
| <p class="text-green-600 font-medium">Verified & Ready for Pickup</p> | |
| </div> | |
| <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">PAID</span> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="font-medium text-gray-700">Customer</p> | |
| <p id="result-customer">Andrew Bolton</p> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="font-medium text-gray-700">Items</p> | |
| <ul id="result-items" class="list-disc pl-5 mt-1 space-y-1"> | |
| <li>Santa Cruz Bullit 4 CC MX (Matte Teal Sparkle, M)</li> | |
| <li>Transition Repeater PT Carbon (Graphite Grey, L)</li> | |
| <li>Transition RELAY CARBON (TR BLUE, L, Demo)</li> | |
| </ul> | |
| </div> | |
| <div class="flex justify-between items-center pt-4 border-t"> | |
| <div> | |
| <p class="text-sm text-gray-600">Total</p> | |
| <p id="result-total" class="text-lg font-bold">$26,777.88</p> | |
| </div> | |
| <button id="confirm-pickup" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"> | |
| Confirm Pickup | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Manual Verification</h2> | |
| <div class="flex flex-col space-y-3"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Order Number</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Enter order number"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Verification Code</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Enter verification code"> | |
| </div> | |
| <button class="mt-2 px-4 py-2 bg-gray-800 text-white rounded-md hover:bg-gray-700 transition"> | |
| Verify Manually | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Toggle between customer and staff views (for demo purposes) --> | |
| <div class="fixed bottom-4 right-4"> | |
| <button onclick="toggleView()" class="p-3 bg-blue-600 text-white rounded-full shadow-lg hover:bg-blue-700 transition"> | |
| <i class="fas fa-sync-alt"></i> | |
| </button> | |
| </div> | |
| <script src="https://unpkg.com/html5-qrcode@2.3.4/dist/html5-qrcode.min.js"></script> | |
| <script> | |
| // Copy to clipboard function | |
| function copyToClipboard(text) { | |
| navigator.clipboard.writeText(text).then(() => { | |
| alert('Copied to clipboard!'); | |
| }); | |
| } | |
| // Toggle between customer and staff views (demo only) | |
| function toggleView() { | |
| const customerView = document.getElementById('customerView'); | |
| const staffView = document.getElementById('staffView'); | |
| if (customerView.classList.contains('hidden')) { | |
| customerView.classList.remove('hidden'); | |
| staffView.classList.add('hidden'); | |
| } else { | |
| customerView.classList.add('hidden'); | |
| staffView.classList.remove('hidden'); | |
| initScanner(); | |
| } | |
| } | |
| // Initialize QR scanner (for staff view) | |
| function initScanner() { | |
| const html5QrCode = new Html5Qrcode("qr-reader"); | |
| // Demo scan result (in a real app, this would come from the API) | |
| const demoResult = { | |
| orderId: "042425-174046-759", | |
| customer: "Andrew Bolton", | |
| items: [ | |
| "Santa Cruz Bullit 4 CC MX (Matte Teal Sparkle, M)", | |
| "Transition Repeater PT Carbon (Graphite Grey, L)", | |
| "Transition RELAY CARBON (TR BLUE, L, Demo)" | |
| ], | |
| total: "$26,777.88", | |
| status: "verified" | |
| }; | |
| function onScanSuccess(decodedText, decodedResult) { | |
| // In a real app, you would fetch order details from your API | |
| // For demo purposes, we'll just show the demo result | |
| document.getElementById('result-order-id').textContent = demoResult.orderId; | |
| document.getElementById('result-customer').textContent = demoResult.customer; | |
| const itemsList = document.getElementById('result-items'); | |
| itemsList.innerHTML = ''; | |
| demoResult.items.forEach(item => { | |
| const li = document.createElement('li'); | |
| li.textContent = item; | |
| itemsList.appendChild(li); | |
| }); | |
| document.getElementById('result-total').textContent = demoResult.total; | |
| document.getElementById('scan-result').classList.remove('hidden'); | |
| // Stop scanning after successful scan | |
| html5QrCode.stop().then(() => { | |
| console.log("QR Code scanning stopped."); | |
| }).catch(err => { | |
| console.log("Unable to stop scanning.", err); | |
| }); | |
| } | |
| function onScanFailure(error) { | |
| console.warn(`QR error = ${error}`); | |
| } | |
| // Start the scanner | |
| html5QrCode.start( | |
| { facingMode: "environment" }, | |
| { fps: 10, qrbox: { width: 250, height: 250 } }, | |
| onScanSuccess, | |
| onScanFailure | |
| ); | |
| // Handle confirm pickup button | |
| document.getElementById('confirm-pickup').addEventListener('click', function() { | |
| alert('Pickup confirmed for order #' + demoResult.orderId); | |
| document.getElementById('scan-result').classList.add('hidden'); | |
| // Restart the scanner | |
| html5QrCode.start( | |
| { facingMode: "environment" }, | |
| { fps: 10, qrbox: { width: 250, height: 250 } }, | |
| onScanSuccess, | |
| onScanFailure | |
| ); | |
| }); | |
| } | |
| // Initialize the scanner if staff view is shown by default | |
| if (document.getElementById('staffView') && !document.getElementById('staffView').classList.contains('hidden')) { | |
| initScanner(); | |
| } | |
| </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=thedruid831/bikeshop" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |