Spaces:
Running
Running
Make the site in IBM Carbon CSS Framework but using only vanilla JS no React - Follow Up Deployment
28da0ba
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Enquiry Form with Preview</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| <style> | |
| body { | |
| background: linear-gradient(135deg, #f8f9fa, #e9ecef); | |
| min-height: 100vh; | |
| } | |
| .watermark { | |
| position: absolute; | |
| opacity: 0.05; | |
| font-size: 8rem; | |
| font-weight: 800; | |
| transform: rotate(-30deg); | |
| pointer-events: none; | |
| z-index: 0; | |
| color: #0d6efd; | |
| } | |
| .company-logo { | |
| background: linear-gradient(135deg, #0d6efd, #0b5ed7); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .header-divider { | |
| height: 2px; | |
| background: linear-gradient(to right, transparent, #0d6efd, transparent); | |
| } | |
| .paper-preview::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 40px; | |
| background: linear-gradient(to right, #0b5ed7, #0d6efd); | |
| } | |
| </style> | |
| </head> | |
| <body class="py-5"> | |
| <div class="container"> | |
| <!-- Header --> | |
| <div class="text-center mb-5"> | |
| <h1 class="display-4 fw-bold text-dark mb-3">Enquiry Form</h1> | |
| <p class="lead text-muted mx-auto" style="max-width: 600px;">Create detailed enquiries with item specifications, quantities, and pricing. Preview your document before printing.</p> | |
| </div> | |
| <div class="row g-4"> | |
| <!-- Form Section --> | |
| <div class="col-lg-6"> | |
| <div class="bg-white rounded-3 shadow p-4"> | |
| <h2 class="h2 text-dark mb-4 d-flex align-items-center"> | |
| <i class="fas fa-edit me-3 text-primary"></i> Enquiry Details | |
| </h2> | |
| <!-- Company Info --> | |
| <div class="mb-4"> | |
| <h3 class="h5 text-secondary mb-3">Company Information</h3> | |
| <div class="row g-3"> | |
| <div class="col-md-6"> | |
| <label class="form-label block text-sm font-medium text-gray-700 mb-1">Company Name</label> | |
| <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent form-control" placeholder="Enter company name"> | |
| </div> | |
| <div class="col-md-6"> | |
| <label class="form-label block text-sm font-medium text-gray-700 mb-1">Contact Person</label> | |
| <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent form-control" placeholder="Enter contact name"> | |
| </div> | |
| <div class="col-md-6"> | |
| <label class="form-label block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent form-control" placeholder="Enter email"> | |
| </div> | |
| <div class="col-md-6"> | |
| <label class="form-label block text-sm font-medium text-gray-700 mb-1">Phone</label> | |
| <input type="tel" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent form-control" placeholder="Enter phone number"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Items Section --> | |
| <div> | |
| <div class="d-flex justify-content-between align-items-center mb-3"> | |
| <h3 class="h5 text-secondary">Items</h3> | |
| <button id="add-item" class="btn btn-primary d-flex align-items-center"> | |
| <i class="fas fa-plus me-2"></i> Add Item | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="bg-gray-100 text-gray-700 text-sm"> | |
| <th class="py-3 px-4 text-left">Item Type</th> | |
| <th class="py-3 px-4 text-left">Description</th> | |
| <th class="py-3 px-4 text-left">Qty</th> | |
| <th class="py-3 px-4 text-left">Rate</th> | |
| <th class="py-3 px-4 text-left">Amount</th> | |
| <th class="py-3 px-4 text-left">Action</th> | |
| </tr> | |
| </thead> | |
| <tbody id="items-container"> | |
| <!-- Items will be added here dynamically --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-4 text-end"> | |
| <div class="d-inline-block border rounded-3 p-3 bg-light"> | |
| <div class="d-flex justify-content-between mb-2"> | |
| <span class="fw-medium me-3">Subtotal:</span> | |
| <span id="subtotal" class="fw-medium">$0.00</span> | |
| </div> | |
| <div class="d-flex justify-content-between mb-2"> | |
| <span class="fw-medium me-3">Tax (5%):</span> | |
| <span id="tax" class="fw-medium">$0.00</span> | |
| </div> | |
| <div class="d-flex justify-content-between pt-2 border-top"> | |
| <span class="fw-bold">Total:</span> | |
| <span id="total" class="fw-bold text-primary">$0.00</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 mb-4"> | |
| <label class="form-label fw-bold text-dark mb-3">Additional Notes</label> | |
| <textarea class="form-control w-100 px-4 py-3 border border-gray-300 rounded-3 focus:ring-3 focus:ring-primary focus:border-transparent" | |
| rows="2" | |
| style="min-height: 50px;" | |
| placeholder="Enter any additional notes, special requirements, or delivery instructions..."></textarea> | |
| <div class="form-text text-muted mt-2">This information will appear on your enquiry document.</div> | |
| </div> | |
| <div class="mt-8 flex justify-end gap-4"> | |
| <button class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"> | |
| <i class="fas fa-times mr-2"></i> Cancel | |
| </button> | |
| <button class="px-6 py-3 bg-primary hover:bg-secondary text-white rounded-lg flex items-center"> | |
| <i class="fas fa-paper-plane mr-2"></i> Submit Enquiry | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Preview Section --> | |
| <div class="col-lg-6"> | |
| <div class="sticky-top" style="top: 20px;"> | |
| <div class="d-flex justify-content-between align-items-center mb-3"> | |
| <h2 class="h2 text-dark d-flex align-items-center"> | |
| <i class="fas fa-file-alt me-3 text-primary"></i> Document Preview | |
| </h2> | |
| <button id="print-btn" class="btn btn-success d-flex align-items-center"> | |
| <i class="fas fa-print me-2"></i> Print Preview | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-3 p-5 position-relative overflow-hidden" style="background: linear-gradient(to bottom, #f8f9fa, #e9ecef); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); border: 1px solid #dee2e6;"> | |
| <div class="watermark">DRAFT</div> | |
| <!-- Preview Header --> | |
| <div class="text-center mb-8 relative z-10"> | |
| <div class="company-logo text-4xl font-bold mb-2">CompanyLogo</div> | |
| <h1 class="text-3xl font-bold text-gray-800 mb-1">ENQUIRY DOCUMENT</h1> | |
| <div class="text-gray-600">Ref: ENQ-2023-001</div> | |
| <div class="header-divider my-4"></div> | |
| </div> | |
| <!-- Company Info --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8 relative z-10"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-500 uppercase mb-1">From</h3> | |
| <div class="text-gray-800"> | |
| <div class="font-bold">ABC Suppliers Inc.</div> | |
| <div>123 Business Avenue</div> | |
| <div>New York, NY 10001</div> | |
| <div>[email protected]</div> | |
| <div>+1 (555) 123-4567</div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-500 uppercase mb-1">To</h3> | |
| <div class="text-gray-800"> | |
| <div class="font-bold" id="preview-company">[Company Name]</div> | |
| <div id="preview-contact">[Contact Person]</div> | |
| <div id="preview-email">[Email Address]</div> | |
| <div id="preview-phone">[Phone Number]</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Preview Date --> | |
| <div class="mb-8 relative z-10"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <span class="font-semibold">Enquiry Date:</span> | |
| <span id="preview-date">October 16, 2023</span> | |
| </div> | |
| <div> | |
| <span class="font-semibold">Valid Until:</span> | |
| <span id="preview-valid">November 16, 2023</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Preview Items --> | |
| <div class="mb-8 relative z-10"> | |
| <table class="w-full border-collapse"> | |
| <thead> | |
| <tr class="bg-gray-200 text-gray-700"> | |
| <th class="py-3 px-4 text-left border border-gray-300">Item</th> | |
| <th class="py-3 px-4 text-left border border-gray-300">Description</th> | |
| <th class="py-3 px-4 text-left border border-gray-300">Qty</th> | |
| <th class="py-3 px-4 text-left border border-gray-300">Rate</th> | |
| <th class="py-3 px-4 text-left border border-gray-300">Amount</th> | |
| </tr> | |
| </thead> | |
| <tbody id="preview-items"> | |
| <!-- Preview items will be added here --> | |
| <tr> | |
| <td colspan="5" class="py-4 text-center text-gray-500 italic">No items added yet</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- Preview Summary --> | |
| <div class="mb-8 relative z-10"> | |
| <div class="flex justify-end"> | |
| <div class="w-full max-w-xs"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-700">Subtotal:</span> | |
| <span id="preview-subtotal">$0.00</span> | |
| </div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-gray-700">Tax (5%):</span> | |
| <span id="preview-tax">$0.00</span> | |
| </div> | |
| <div class="flex justify-between font-bold text-lg pt-2 border-t border-gray-300 mt-2"> | |
| <span>Total:</span> | |
| <span id="preview-total" class="text-primary">$0.00</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Preview Notes --> | |
| <div class="mb-8 relative z-10"> | |
| <h3 class="text-sm font-semibold text-gray-500 uppercase mb-2">Notes</h3> | |
| <div class="text-gray-700 italic" id="preview-notes"> | |
| Payment terms: Net 30 days. Prices valid for 30 days from enquiry date. | |
| </div> | |
| </div> | |
| <!-- Preview Footer --> | |
| <div class="relative z-10"> | |
| <div class="flex justify-between items-center pt-6 border-t border-gray-300"> | |
| <div> | |
| <div class="font-semibold text-gray-800">Authorized Signature</div> | |
| <div class="text-sm text-gray-600">John Smith, Sales Manager</div> | |
| </div> | |
| <div class="text-sm text-gray-600 text-right"> | |
| <div>ABC Suppliers Inc.</div> | |
| <div>www.abcsuppliers.com</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Initialize date | |
| const today = new Date(); | |
| const validUntil = new Date(); | |
| validUntil.setDate(today.getDate() + 30); | |
| document.getElementById('preview-date').textContent = formatDate(today); | |
| document.getElementById('preview-valid').textContent = formatDate(validUntil); | |
| // Initialize items array | |
| let items = []; | |
| // Add item button functionality | |
| document.getElementById('add-item').addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| addItem(); | |
| }); | |
| // Print button functionality | |
| document.getElementById('print-btn').addEventListener('click', function() { | |
| alert('Print functionality would open print dialog in a real application'); | |
| // window.print(); | |
| }); | |
| // Initialize form with one item | |
| addItem(); | |
| // Update preview when company info changes | |
| const companyInputs = { | |
| 'preview-company': 'input[placeholder="Enter company name"]', | |
| 'preview-contact': 'input[placeholder="Enter contact name"]', | |
| 'preview-email': 'input[placeholder="Enter email"]', | |
| 'preview-phone': 'input[placeholder="Enter phone number"]' | |
| }; | |
| Object.entries(companyInputs).forEach(([previewId, selector]) => { | |
| const input = document.querySelector(selector); | |
| if (input) { | |
| input.addEventListener('input', (e) => { | |
| document.getElementById(previewId).textContent = e.target.value || `[${previewId.replace('preview-', '').replace(/-/g, ' ')}]`; | |
| }); | |
| } | |
| }); | |
| function addItem() { | |
| const container = document.getElementById('items-container'); | |
| const id = Date.now(); | |
| const itemRow = document.createElement('tr'); | |
| itemRow.className = 'item-row'; | |
| itemRow.id = `item-${id}`; | |
| itemRow.innerHTML = ` | |
| <td class="py-3 px-4"> | |
| <select class="w-full px-3 py-1 border border-gray-300 rounded focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <option value="">Select Item Type</option> | |
| <option value="electronics">Electronics</option> | |
| <option value="furniture">Furniture</option> | |
| <option value="office">Office Supplies</option> | |
| <option value="machinery">Machinery</option> | |
| <option value="raw">Raw Materials</option> | |
| <option value="other">Other</option> | |
| </select> | |
| </td> | |
| <td class="py-3 px-4"> | |
| <input type="text" class="w-full px-3 py-1 border border-gray-300 rounded focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Description"> | |
| </td> | |
| <td class="py-3 px-4"> | |
| <input type="number" min="1" value="1" class="item-qty w-full px-3 py-1 border border-gray-300 rounded focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </td> | |
| <td class="py-3 px-4"> | |
| <input type="number" min="0" step="0.01" value="0" class="item-rate w-full px-3 py-1 border border-gray-300 rounded focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </td> | |
| <td class="py-3 px-4"> | |
| <input type="text" class="item-amount w-full px-3 py-1 border border-gray-300 rounded bg-gray-50" value="$0.00" readonly> | |
| </td> | |
| <td class="py-3 px-4"> | |
| <button class="remove-item text-red-500 hover:text-red-700"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </td> | |
| `; | |
| container.appendChild(itemRow); | |
| // Add event listeners for qty and rate | |
| const qtyInput = itemRow.querySelector('.item-qty'); | |
| const rateInput = itemRow.querySelector('.item-rate'); | |
| const updateAmount = () => { | |
| const qty = parseFloat(qtyInput.value) || 0; | |
| const rate = parseFloat(rateInput.value) || 0; | |
| const amount = qty * rate; | |
| itemRow.querySelector('.item-amount').value = `$${amount.toFixed(2)}`; | |
| updateTotals(); | |
| updatePreview(); | |
| }; | |
| qtyInput.addEventListener('input', updateAmount); | |
| rateInput.addEventListener('input', updateAmount); | |
| // Add remove functionality | |
| itemRow.querySelector('.remove-item').addEventListener('click', function() { | |
| itemRow.remove(); | |
| updateTotals(); | |
| updatePreview(); | |
| }); | |
| // Update preview | |
| updatePreview(); | |
| } | |
| function updateTotals() { | |
| let subtotal = 0; | |
| document.querySelectorAll('.item-row').forEach(row => { | |
| const amount = parseFloat(row.querySelector('.item-amount').value.replace('$', '')) || 0; | |
| subtotal += amount; | |
| }); | |
| const tax = subtotal * 0.05; | |
| const total = subtotal + tax; | |
| document.getElementById('subtotal').textContent = `$${subtotal.toFixed(2)}`; | |
| document.getElementById('tax').textContent = `$${tax.toFixed(2)}`; | |
| document.getElementById('total').textContent = `$${total.toFixed(2)}`; | |
| } | |
| function updatePreview() { | |
| // Update company info | |
| document.getElementById('preview-company').textContent = | |
| document.querySelector('input[placeholder="Enter company name"]').value || '[Company Name]'; | |
| document.getElementById('preview-contact').textContent = | |
| document.querySelector('input[placeholder="Enter contact name"]').value || '[Contact Person]'; | |
| document.getElementById('preview-email').textContent = | |
| document.querySelector('input[placeholder="Enter email"]').value || '[Email Address]'; | |
| document.getElementById('preview-phone').textContent = | |
| document.querySelector('input[placeholder="Enter phone number"]').value || '[Phone Number]'; | |
| // Update items | |
| const previewContainer = document.getElementById('preview-items'); | |
| previewContainer.innerHTML = ''; | |
| const items = document.querySelectorAll('.item-row'); | |
| if (items.length === 0) { | |
| previewContainer.innerHTML = ` | |
| <tr> | |
| <td colspan="5" class="py-4 text-center text-gray-500 italic">No items added yet</td> | |
| </tr> | |
| `; | |
| } else { | |
| items.forEach((item, index) => { | |
| const type = item.querySelector('select').value || 'N/A'; | |
| const desc = item.querySelector('input[type="text"]').value || 'No description'; | |
| const qty = item.querySelector('.item-qty').value || '0'; | |
| const rate = `$${parseFloat(item.querySelector('.item-rate').value || 0).toFixed(2)}`; | |
| const amount = item.querySelector('.item-amount').value || '$0.00'; | |
| const row = document.createElement('tr'); | |
| row.className = index % 2 === 0 ? 'bg-gray-50' : ''; | |
| row.innerHTML = ` | |
| <td class="py-2 px-4 border border-gray-300">${type}</td> | |
| <td class="py-2 px-4 border border-gray-300">${desc}</td> | |
| <td class="py-2 px-4 border border-gray-300 text-right">${qty}</td> | |
| <td class="py-2 px-4 border border-gray-300 text-right">${rate}</td> | |
| <td class="py-2 px-4 border border-gray-300 text-right">${amount}</td> | |
| `; | |
| previewContainer.appendChild(row); | |
| }); | |
| } | |
| // Update totals | |
| const subtotal = parseFloat(document.getElementById('subtotal').textContent.replace('$', '')) || 0; | |
| const tax = parseFloat(document.getElementById('tax').textContent.replace('$', '')) || 0; | |
| const total = parseFloat(document.getElementById('total').textContent.replace('$', '')) || 0; | |
| document.getElementById('preview-subtotal').textContent = `$${subtotal.toFixed(2)}`; | |
| document.getElementById('preview-tax').textContent = `$${tax.toFixed(2)}`; | |
| document.getElementById('preview-total').textContent = `$${total.toFixed(2)}`; | |
| } | |
| function formatDate(date) { | |
| const options = { year: 'numeric', month: 'long', day: 'numeric' }; | |
| return date.toLocaleDateString('en-US', options); | |
| } | |
| }); | |
| </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=TimexPeachtree/deep-enquiry" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |