Hugging Face's logo

Spaces:
TimexPeachtree
/
deep-enquiry-tw
Running

App Files Community
TimexPeachtree commited on
Commit
3f1219c
·
verified ·
1 Parent(s): 5255887

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +506 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deep Enquiry Tw
3
- emoji: 🚀
4
- colorFrom: purple
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: deep-enquiry-tw
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,506 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Enquiry Form with Preview</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#3b82f6',
15
+ secondary: '#1d4ed8',
16
+ accent: '#93c5fd',
17
+ paper: '#f8fafc'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
25
+
26
+ body {
27
+ font-family: 'Inter', sans-serif;
28
+ background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
29
+ min-height: 100vh;
30
+ }
31
+
32
+ .paper-preview {
33
+ background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
34
+ box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
35
+ border: 1px solid #e2e8f0;
36
+ position: relative;
37
+ overflow: hidden;
38
+ }
39
+
40
+ .paper-preview::before {
41
+ content: "";
42
+ position: absolute;
43
+ top: 0;
44
+ left: 0;
45
+ right: 0;
46
+ height: 40px;
47
+ background: linear-gradient(to right, #1d4ed8, #3b82f6);
48
+ }
49
+
50
+ .watermark {
51
+ position: absolute;
52
+ opacity: 0.05;
53
+ font-size: 8rem;
54
+ font-weight: 800;
55
+ transform: rotate(-30deg);
56
+ pointer-events: none;
57
+ z-index: 0;
58
+ color: #1e40af;
59
+ }
60
+
61
+ .item-row:hover {
62
+ background-color: #f1f5f9;
63
+ }
64
+
65
+ .print-button {
66
+ transition: all 0.3s ease;
67
+ }
68
+
69
+ .print-button:hover {
70
+ transform: translateY(-2px);
71
+ box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
72
+ }
73
+
74
+ .company-logo {
75
+ background: linear-gradient(135deg, #1d4ed8, #3b82f6);
76
+ -webkit-background-clip: text;
77
+ -webkit-text-fill-color: transparent;
78
+ }
79
+
80
+ .header-divider {
81
+ height: 2px;
82
+ background: linear-gradient(to right, transparent, #3b82f6, transparent);
83
+ }
84
+ </style>
85
+ </head>
86
+ <body class="py-8 px-4">
87
+ <div class="max-w-6xl mx-auto">
88
+ <!-- Header -->
89
+ <div class="text-center mb-10">
90
+ <h1 class="text-4xl font-bold text-gray-800 mb-2">Enquiry Form</h1>
91
+ <p class="text-gray-600 max-w-2xl mx-auto">Create detailed enquiries with item specifications, quantities, and pricing. Preview your document before printing.</p>
92
+ </div>
93
+
94
+ <div class="flex flex-col lg:flex-row gap-8">
95
+ <!-- Form Section -->
96
+ <div class="w-full lg:w-1/2">
97
+ <div class="bg-white rounded-xl shadow-lg p-6">
98
+ <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
99
+ <i class="fas fa-edit mr-3 text-primary"></i> Enquiry Details
100
+ </h2>
101
+
102
+ <!-- Company Info -->
103
+ <div class="mb-8">
104
+ <h3 class="text-lg font-semibold text-gray-700 mb-3">Company Information</h3>
105
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
106
+ <div>
107
+ <label class="block text-sm font-medium text-gray-700 mb-1">Company Name</label>
108
+ <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" placeholder="Enter company name">
109
+ </div>
110
+ <div>
111
+ <label class="block text-sm font-medium text-gray-700 mb-1">Contact Person</label>
112
+ <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" placeholder="Enter contact name">
113
+ </div>
114
+ <div>
115
+ <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
116
+ <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" placeholder="Enter email">
117
+ </div>
118
+ <div>
119
+ <label class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
120
+ <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" placeholder="Enter phone number">
121
+ </div>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- Items Section -->
126
+ <div>
127
+ <div class="flex justify-between items-center mb-3">
128
+ <h3 class="text-lg font-semibold text-gray-700">Items</h3>
129
+ <button id="add-item" class="px-4 py-2 bg-primary hover:bg-secondary text-white rounded-lg flex items-center">
130
+ <i class="fas fa-plus mr-2"></i> Add Item
131
+ </button>
132
+ </div>
133
+
134
+ <div class="overflow-x-auto">
135
+ <table class="w-full">
136
+ <thead>
137
+ <tr class="bg-gray-100 text-gray-700 text-sm">
138
+ <th class="py-3 px-4 text-left">Item Type</th>
139
+ <th class="py-3 px-4 text-left">Description</th>
140
+ <th class="py-3 px-4 text-left">Qty</th>
141
+ <th class="py-3 px-4 text-left">Rate</th>
142
+ <th class="py-3 px-4 text-left">Amount</th>
143
+ <th class="py-3 px-4 text-left">Action</th>
144
+ </tr>
145
+ </thead>
146
+ <tbody id="items-container">
147
+ <!-- Items will be added here dynamically -->
148
+ </tbody>
149
+ </table>
150
+ </div>
151
+
152
+ <div class="mt-6 flex justify-end">
153
+ <div class="bg-gray-50 p-4 rounded-lg w-full max-w-xs">
154
+ <div class="flex justify-between mb-2">
155
+ <span class="font-medium text-gray-700">Subtotal:</span>
156
+ <span id="subtotal" class="font-medium">$0.00</span>
157
+ </div>
158
+ <div class="flex justify-between mb-2">
159
+ <span class="font-medium text-gray-700">Tax (5%):</span>
160
+ <span id="tax" class="font-medium">$0.00</span>
161
+ </div>
162
+ <div class="flex justify-between text-lg font-bold pt-2 border-t border-gray-200">
163
+ <span>Total:</span>
164
+ <span id="total" class="text-primary">$0.00</span>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <div class="mt-8">
170
+ <label class="block text-sm font-medium text-gray-700 mb-2">Additional Notes</label>
171
+ <textarea class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent h-24" placeholder="Enter any additional notes or requirements..."></textarea>
172
+ </div>
173
+
174
+ <div class="mt-8 flex justify-end gap-4">
175
+ <button class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">
176
+ <i class="fas fa-times mr-2"></i> Cancel
177
+ </button>
178
+ <button class="px-6 py-3 bg-primary hover:bg-secondary text-white rounded-lg flex items-center">
179
+ <i class="fas fa-paper-plane mr-2"></i> Submit Enquiry
180
+ </button>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Preview Section -->
187
+ <div class="w-full lg:w-1/2">
188
+ <div class="sticky top-8">
189
+ <div class="flex justify-between items-center mb-4">
190
+ <h2 class="text-2xl font-bold text-gray-800 flex items-center">
191
+ <i class="fas fa-file-alt mr-3 text-primary"></i> Document Preview
192
+ </h2>
193
+ <button id="print-btn" class="print-button px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg flex items-center">
194
+ <i class="fas fa-print mr-2"></i> Print Preview
195
+ </button>
196
+ </div>
197
+
198
+ <div class="paper-preview rounded-xl p-8 relative overflow-hidden">
199
+ <div class="watermark">DRAFT</div>
200
+
201
+ <!-- Preview Header -->
202
+ <div class="text-center mb-8 relative z-10">
203
+ <div class="company-logo text-4xl font-bold mb-2">CompanyLogo</div>
204
+ <h1 class="text-3xl font-bold text-gray-800 mb-1">ENQUIRY DOCUMENT</h1>
205
+ <div class="text-gray-600">Ref: ENQ-2023-001</div>
206
+ <div class="header-divider my-4"></div>
207
+ </div>
208
+
209
+ <!-- Company Info -->
210
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8 relative z-10">
211
+ <div>
212
+ <h3 class="text-sm font-semibold text-gray-500 uppercase mb-1">From</h3>
213
+ <div class="text-gray-800">
214
+ <div class="font-bold">ABC Suppliers Inc.</div>
215
+ <div>123 Business Avenue</div>
216
+ <div>New York, NY 10001</div>
217
+ <div>[email protected]</div>
218
+ <div>+1 (555) 123-4567</div>
219
+ </div>
220
+ </div>
221
+ <div>
222
+ <h3 class="text-sm font-semibold text-gray-500 uppercase mb-1">To</h3>
223
+ <div class="text-gray-800">
224
+ <div class="font-bold" id="preview-company">[Company Name]</div>
225
+ <div id="preview-contact">[Contact Person]</div>
226
+ <div id="preview-email">[Email Address]</div>
227
+ <div id="preview-phone">[Phone Number]</div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+
232
+ <!-- Preview Date -->
233
+ <div class="mb-8 relative z-10">
234
+ <div class="flex justify-between">
235
+ <div>
236
+ <span class="font-semibold">Enquiry Date:</span>
237
+ <span id="preview-date">October 16, 2023</span>
238
+ </div>
239
+ <div>
240
+ <span class="font-semibold">Valid Until:</span>
241
+ <span id="preview-valid">November 16, 2023</span>
242
+ </div>
243
+ </div>
244
+ </div>
245
+
246
+ <!-- Preview Items -->
247
+ <div class="mb-8 relative z-10">
248
+ <table class="w-full border-collapse">
249
+ <thead>
250
+ <tr class="bg-gray-200 text-gray-700">
251
+ <th class="py-3 px-4 text-left border border-gray-300">Item</th>
252
+ <th class="py-3 px-4 text-left border border-gray-300">Description</th>
253
+ <th class="py-3 px-4 text-left border border-gray-300">Qty</th>
254
+ <th class="py-3 px-4 text-left border border-gray-300">Rate</th>
255
+ <th class="py-3 px-4 text-left border border-gray-300">Amount</th>
256
+ </tr>
257
+ </thead>
258
+ <tbody id="preview-items">
259
+ <!-- Preview items will be added here -->
260
+ <tr>
261
+ <td colspan="5" class="py-4 text-center text-gray-500 italic">No items added yet</td>
262
+ </tr>
263
+ </tbody>
264
+ </table>
265
+ </div>
266
+
267
+ <!-- Preview Summary -->
268
+ <div class="mb-8 relative z-10">
269
+ <div class="flex justify-end">
270
+ <div class="w-full max-w-xs">
271
+ <div class="flex justify-between mb-1">
272
+ <span class="text-gray-700">Subtotal:</span>
273
+ <span id="preview-subtotal">$0.00</span>
274
+ </div>
275
+ <div class="flex justify-between mb-1">
276
+ <span class="text-gray-700">Tax (10%):</span>
277
+ <span id="preview-tax">$0.00</span>
278
+ </div>
279
+ <div class="flex justify-between font-bold text-lg pt-2 border-t border-gray-300 mt-2">
280
+ <span>Total:</span>
281
+ <span id="preview-total" class="text-primary">$0.00</span>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+
287
+ <!-- Preview Notes -->
288
+ <div class="mb-8 relative z-10">
289
+ <h3 class="text-sm font-semibold text-gray-500 uppercase mb-2">Notes</h3>
290
+ <div class="text-gray-700 italic" id="preview-notes">
291
+ Payment terms: Net 30 days. Prices valid for 30 days from enquiry date.
292
+ </div>
293
+ </div>
294
+
295
+ <!-- Preview Footer -->
296
+ <div class="relative z-10">
297
+ <div class="flex justify-between items-center pt-6 border-t border-gray-300">
298
+ <div>
299
+ <div class="font-semibold text-gray-800">Authorized Signature</div>
300
+ <div class="text-sm text-gray-600">John Smith, Sales Manager</div>
301
+ </div>
302
+ <div class="text-sm text-gray-600 text-right">
303
+ <div>ABC Suppliers Inc.</div>
304
+ <div>www.abcsuppliers.com</div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ </div>
313
+
314
+ <script>
315
+ document.addEventListener('DOMContentLoaded', function() {
316
+ // Initialize date
317
+ const today = new Date();
318
+ const validUntil = new Date();
319
+ validUntil.setDate(today.getDate() + 30);
320
+
321
+ document.getElementById('preview-date').textContent = formatDate(today);
322
+ document.getElementById('preview-valid').textContent = formatDate(validUntil);
323
+
324
+ // Initialize items array
325
+ let items = [];
326
+
327
+ // Add item button functionality
328
+ document.getElementById('add-item').addEventListener('click', function(e) {
329
+ e.preventDefault();
330
+ addItem();
331
+ });
332
+
333
+ // Print button functionality
334
+ document.getElementById('print-btn').addEventListener('click', function() {
335
+ alert('Print functionality would open print dialog in a real application');
336
+ // window.print();
337
+ });
338
+
339
+ // Initialize form with one item
340
+ addItem();
341
+
342
+ // Update preview when company info changes
343
+ const companyInputs = {
344
+ 'preview-company': 'input[placeholder="Enter company name"]',
345
+ 'preview-contact': 'input[placeholder="Enter contact name"]',
346
+ 'preview-email': 'input[placeholder="Enter email"]',
347
+ 'preview-phone': 'input[placeholder="Enter phone number"]'
348
+ };
349
+
350
+ Object.entries(companyInputs).forEach(([previewId, selector]) => {
351
+ const input = document.querySelector(selector);
352
+ if (input) {
353
+ input.addEventListener('input', (e) => {
354
+ document.getElementById(previewId).textContent = e.target.value || `[${previewId.replace('preview-', '').replace(/-/g, ' ')}]`;
355
+ });
356
+ }
357
+ });
358
+
359
+ function addItem() {
360
+ const container = document.getElementById('items-container');
361
+ const id = Date.now();
362
+
363
+ const itemRow = document.createElement('tr');
364
+ itemRow.className = 'item-row';
365
+ itemRow.id = `item-${id}`;
366
+ itemRow.innerHTML = `
367
+ <td class="py-3 px-4">
368
+ <select class="w-full px-3 py-1 border border-gray-300 rounded focus:ring-2 focus:ring-primary focus:border-transparent">
369
+ <option value="">Select Item Type</option>
370
+ <option value="electronics">Electronics</option>
371
+ <option value="furniture">Furniture</option>
372
+ <option value="office">Office Supplies</option>
373
+ <option value="machinery">Machinery</option>
374
+ <option value="raw">Raw Materials</option>
375
+ <option value="other">Other</option>
376
+ </select>
377
+ </td>
378
+ <td class="py-3 px-4">
379
+ <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">
380
+ </td>
381
+ <td class="py-3 px-4">
382
+ <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">
383
+ </td>
384
+ <td class="py-3 px-4">
385
+ <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">
386
+ </td>
387
+ <td class="py-3 px-4">
388
+ <input type="text" class="item-amount w-full px-3 py-1 border border-gray-300 rounded bg-gray-50" value="$0.00" readonly>
389
+ </td>
390
+ <td class="py-3 px-4">
391
+ <button class="remove-item text-red-500 hover:text-red-700">
392
+ <i class="fas fa-trash"></i>
393
+ </button>
394
+ </td>
395
+ `;
396
+
397
+ container.appendChild(itemRow);
398
+
399
+ // Add event listeners for qty and rate
400
+ const qtyInput = itemRow.querySelector('.item-qty');
401
+ const rateInput = itemRow.querySelector('.item-rate');
402
+
403
+ const updateAmount = () => {
404
+ const qty = parseFloat(qtyInput.value) || 0;
405
+ const rate = parseFloat(rateInput.value) || 0;
406
+ const amount = qty * rate;
407
+ itemRow.querySelector('.item-amount').value = `$${amount.toFixed(2)}`;
408
+ updateTotals();
409
+ updatePreview();
410
+ };
411
+
412
+ qtyInput.addEventListener('input', updateAmount);
413
+ rateInput.addEventListener('input', updateAmount);
414
+
415
+ // Add remove functionality
416
+ itemRow.querySelector('.remove-item').addEventListener('click', function() {
417
+ itemRow.remove();
418
+ updateTotals();
419
+ updatePreview();
420
+ });
421
+
422
+ // Update preview
423
+ updatePreview();
424
+ }
425
+
426
+ function updateTotals() {
427
+ let subtotal = 0;
428
+
429
+ document.querySelectorAll('.item-row').forEach(row => {
430
+ const amount = parseFloat(row.querySelector('.item-amount').value.replace('$', '')) || 0;
431
+ subtotal += amount;
432
+ });
433
+
434
+ const tax = subtotal * 0.05;
435
+ const total = subtotal + tax;
436
+
437
+ document.getElementById('subtotal').textContent = `$${subtotal.toFixed(2)}`;
438
+ document.getElementById('tax').textContent = `$${tax.toFixed(2)}`;
439
+ document.getElementById('total').textContent = `$${total.toFixed(2)}`;
440
+ }
441
+
442
+ function updatePreview() {
443
+ // Update company info
444
+ document.getElementById('preview-company').textContent =
445
+ document.querySelector('input[placeholder="Enter company name"]').value || '[Company Name]';
446
+
447
+ document.getElementById('preview-contact').textContent =
448
+ document.querySelector('input[placeholder="Enter contact name"]').value || '[Contact Person]';
449
+
450
+ document.getElementById('preview-email').textContent =
451
+ document.querySelector('input[placeholder="Enter email"]').value || '[Email Address]';
452
+
453
+ document.getElementById('preview-phone').textContent =
454
+ document.querySelector('input[placeholder="Enter phone number"]').value || '[Phone Number]';
455
+
456
+ // Update items
457
+ const previewContainer = document.getElementById('preview-items');
458
+ previewContainer.innerHTML = '';
459
+
460
+ const items = document.querySelectorAll('.item-row');
461
+
462
+ if (items.length === 0) {
463
+ previewContainer.innerHTML = `
464
+ <tr>
465
+ <td colspan="5" class="py-4 text-center text-gray-500 italic">No items added yet</td>
466
+ </tr>
467
+ `;
468
+ } else {
469
+ items.forEach((item, index) => {
470
+ const type = item.querySelector('select').value || 'N/A';
471
+ const desc = item.querySelector('input[type="text"]').value || 'No description';
472
+ const qty = item.querySelector('.item-qty').value || '0';
473
+ const rate = `$${parseFloat(item.querySelector('.item-rate').value || 0).toFixed(2)}`;
474
+ const amount = item.querySelector('.item-amount').value || '$0.00';
475
+
476
+ const row = document.createElement('tr');
477
+ row.className = index % 2 === 0 ? 'bg-gray-50' : '';
478
+ row.innerHTML = `
479
+ <td class="py-2 px-4 border border-gray-300">${type}</td>
480
+ <td class="py-2 px-4 border border-gray-300">${desc}</td>
481
+ <td class="py-2 px-4 border border-gray-300 text-right">${qty}</td>
482
+ <td class="py-2 px-4 border border-gray-300 text-right">${rate}</td>
483
+ <td class="py-2 px-4 border border-gray-300 text-right">${amount}</td>
484
+ `;
485
+ previewContainer.appendChild(row);
486
+ });
487
+ }
488
+
489
+ // Update totals
490
+ const subtotal = parseFloat(document.getElementById('subtotal').textContent.replace('$', '')) || 0;
491
+ const tax = parseFloat(document.getElementById('tax').textContent.replace('$', '')) || 0;
492
+ const total = parseFloat(document.getElementById('total').textContent.replace('$', '')) || 0;
493
+
494
+ document.getElementById('preview-subtotal').textContent = `$${subtotal.toFixed(2)}`;
495
+ document.getElementById('preview-tax').textContent = `$${tax.toFixed(2)}`;
496
+ document.getElementById('preview-total').textContent = `$${total.toFixed(2)}`;
497
+ }
498
+
499
+ function formatDate(date) {
500
+ const options = { year: 'numeric', month: 'long', day: 'numeric' };
501
+ return date.toLocaleDateString('en-US', options);
502
+ }
503
+ });
504
+ </script>
505
+ <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-tw" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
506
+ </html>