Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Boost Receipt Wizard</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="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <custom-navbar></custom-navbar> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- Form Section --> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Receipt Details</h2> | |
| <!-- Header Section --> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold mb-4 border-b pb-2">Store Information</h3> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Upload Logo</label> | |
| <input type="file" id="logoUpload" accept="image/*" class="block w-full text-sm text-gray-500 | |
| file:mr-4 file:py-2 file:px-4 | |
| file:rounded-md file:border-0 | |
| file:text-sm file:font-semibold | |
| file:bg-blue-50 file:text-blue-700 | |
| hover:file:bg-blue-100"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Store Address</label> | |
| <textarea id="storeAddress" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">123 Boost Mobile Store\nMain Street\nAnytown, CA 90210</textarea> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Representative Name</label> | |
| <input type="text" id="repName" value="John Doe" 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> | |
| <label class="block text-gray-700 mb-2">Transaction ID</label> | |
| <input type="text" id="transactionId" value="BOOST-2023-001" 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> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Date</label> | |
| <input type="date" id="transactionDate" 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> | |
| <label class="block text-gray-700 mb-2">Time</label> | |
| <input type="time" id="transactionTime" 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> | |
| </div> | |
| <!-- Payment Method Section --> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold mb-4 border-b pb-2">Payment Method</h3> | |
| <div class="flex flex-wrap gap-4 mb-4"> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="paymentMethod" value="Cash" checked class="form-radio h-5 w-5 text-blue-600"> | |
| <span class="ml-2 text-gray-700">Cash</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="paymentMethod" value="Credit Card" class="form-radio h-5 w-5 text-blue-600"> | |
| <span class="ml-2 text-gray-700">Credit Card</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="paymentMethod" value="Debit Card" class="form-radio h-5 w-5 text-blue-600"> | |
| <span class="ml-2 text-gray-700">Debit Card</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="paymentMethod" value="Bill Pay" class="form-radio h-5 w-5 text-blue-600"> | |
| <span class="ml-2 text-gray-700">Bill Pay</span> | |
| </label> | |
| </div> | |
| <div id="cardReferenceContainer" class="hidden"> | |
| <label class="block text-gray-700 mb-2">Transaction Reference</label> | |
| <input type="text" id="cardReference" 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> | |
| <!-- Items Section --> | |
| <div class="mb-6"> | |
| <div class="flex justify-between items-center mb-4 border-b pb-2"> | |
| <h3 class="text-lg font-semibold">Items/Services</h3> | |
| <button id="addCustomItem" class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded-md text-sm flex items-center"> | |
| <i data-feather="plus" class="w-4 h-4 mr-1"></i> Add Item | |
| </button> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Predefined Services</label> | |
| <div class="space-y-2"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="xfinityRefill" class="form-checkbox h-5 w-5 text-blue-600"> | |
| <label for="xfinityRefill" class="ml-2 text-gray-700">Xfinity Prepaid Refill ($45.00)</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="boostBillPay" class="form-checkbox h-5 w-5 text-blue-600"> | |
| <label for="boostBillPay" class="ml-2 text-gray-700">Boost RTR Bill Pay</label> | |
| <input type="number" id="boostBillPayAmount" min="5" max="250" placeholder="5-250" class="ml-2 px-2 py-1 border border-gray-300 rounded-md w-24 hidden"> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="customItemsContainer" class="space-y-3"> | |
| <!-- Custom items will be added here --> | |
| </div> | |
| </div> | |
| <!-- Footer Section --> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4 border-b pb-2">Receipt Footer</h3> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Thank You Message</label> | |
| <input type="text" id="thankYouMessage" value="Thank you for shopping with Boost Mobile!" 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 class="block text-gray-700 mb-2">Store Policy</label> | |
| <textarea id="storePolicy" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">All sales are final. Returns accepted within 14 days with original receipt. No refunds on prepaid services.</textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Preview Section --> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Receipt Preview</h2> | |
| <div class="flex space-x-2"> | |
| <button id="printReceipt" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md flex items-center"> | |
| <i data-feather="printer" class="w-4 h-4 mr-2"></i> Print | |
| </button> | |
| <button id="downloadPdf" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md flex items-center"> | |
| <i data-feather="download" class="w-4 h-4 mr-2"></i> PDF | |
| </button> | |
| </div> | |
| </div> | |
| <div id="receiptPreview" class="border-2 border-dashed border-gray-300 p-4 bg-white"> | |
| <div class="text-center mb-4"> | |
| <img id="logoPreview" src="https://via.placeholder.com/150x50?text=Boost+Mobile" alt="Boost Mobile Logo" class="mx-auto h-12"> | |
| </div> | |
| <div id="addressPreview" class="text-center text-sm mb-4"> | |
| 123 Boost Mobile Store<br> | |
| Main Street<br> | |
| Anytown, CA 90210 | |
| </div> | |
| <div class="text-center text-xs mb-4"> | |
| <div id="dateTimePreview">Date: 01/01/2023 12:00 PM</div> | |
| <div>Rep: <span id="repNamePreview">John Doe</span></div> | |
| <div>Transaction ID: <span id="transactionIdPreview">BOOST-2023-001</span></div> | |
| </div> | |
| <div class="border-t border-b border-gray-300 py-2 my-4"> | |
| <div class="flex justify-between font-semibold"> | |
| <span>ITEM</span> | |
| <span>AMOUNT</span> | |
| </div> | |
| </div> | |
| <div id="itemsPreview"> | |
| <!-- Items will be added here --> | |
| <div class="text-center py-8 text-gray-400">No items added yet</div> | |
| </div> | |
| <div class="border-t border-gray-300 mt-4 pt-4"> | |
| <div class="flex justify-between"> | |
| <span>Subtotal:</span> | |
| <span id="subtotalPreview">$0.00</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Tax (8.25%):</span> | |
| <span id="taxPreview">$0.00</span> | |
| </div> | |
| <div class="flex justify-between font-bold"> | |
| <span>Total:</span> | |
| <span id="totalPreview">$0.00</span> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-center font-semibold" id="paymentMethodPreview">Payment Method: Cash</div> | |
| <div class="text-center text-green-600 font-semibold my-2">Payment Processed Successfully</div> | |
| </div> | |
| <div class="text-center text-xs mt-6"> | |
| <div id="thankYouPreview">Thank you for shopping with Boost Mobile!</div> | |
| <div id="policyPreview" class="mt-2">All sales are final. Returns accepted within 14 days with original receipt. No refunds on prepaid services.</div> | |
| </div> | |
| </div> | |
| </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> |