From ae5daefeadd3b0d4cbdde136cf1b30ea148bc302 Mon Sep 17 00:00:00 2001
From: Ubuv6vvyv <domox4@gmail.com>
Date: Tue, 3 Sep 2024 06:30:45 +1000
Subject: [PATCH] Add files via upload

---
 Australia Post Authority Template.html        | 159 ++++
 BOL CMI TIMBER ALL IN ONE.html                | 824 ++++++++++++++++++
 Bill of Laden Generator.html                  | 239 +++++
 CONVERT TO INPUT.html                         | 131 +++
 Commercial Invoice Styled.html                | 465 ++++++++++
 Commercial Invoice With Logo With Random.html | 496 +++++++++++
 PACKING DECLARATION.html                      | 184 ++++
 7 files changed, 2498 insertions(+)
 create mode 100644 Australia Post Authority Template.html
 create mode 100644 BOL CMI TIMBER ALL IN ONE.html
 create mode 100644 Bill of Laden Generator.html
 create mode 100644 CONVERT TO INPUT.html
 create mode 100644 Commercial Invoice Styled.html
 create mode 100644 Commercial Invoice With Logo With Random.html
 create mode 100644 PACKING DECLARATION.html
diff --git a/Australia Post Authority Template.html b/Australia Post Authority Template.html
new file mode 100644
index 0000000..103b251
--- /dev/null
+++ b/Australia Post Authority Template.html	
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Collection Authorisation - Australia Post</title>
+    <style>
+        :root {
+            --bg-color: #ffffff;
+            --text-color: #000000;
+            --border-color: #000000;
+            --input-bg: #f0f0f0;
+            --logo-filter: none;
+        }
+
+        [data-theme="dark"] {
+            --bg-color: #222222;
+            --text-color: #ffffff;
+            --border-color: #ffffff;
+            --input-bg: #444444;
+            --logo-filter: invert(1);
+        }
+
+        body {
+            font-family: Gill Sans, sans-serif;
+            line-height: 1.4;
+            color: var(--text-color);
+            background-color: var(--bg-color);
+            transition: all 0.3s ease;
+            padding: 20px;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        header {
+            text-align: right;
+            margin-bottom: 20px;
+        }
+
+        #logo {
+            max-width: 200px;
+            filter: var(--logo-filter);
+        }
+
+        h1 {
+            font-size: 15px;
+            margin-bottom: 20px;
+        }
+
+        p {
+            margin-bottom: 10px;
+        }
+
+        form {
+            border: 1px solid var(--border-color);
+            padding: 10px;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        th, td {
+            border: 1px solid var(--border-color);
+            padding: 10px;
+            text-align: left;
+        }
+
+        input[type="text"] {
+            width: 100%;
+            padding: 5px;
+            box-sizing: border-box;
+            background-color: var(--input-bg);
+            color: var(--text-color);
+            border: 1px solid var(--border-color);
+        }
+
+        #darkModeToggle {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            padding: 10px;
+            background-color: var(--input-bg);
+            color: var(--text-color);
+            border: 1px solid var(--border-color);
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <img id="logo" src="https://logos-world.net/wp-content/uploads/2021/02/Australia-Post-Logo.png" alt="Australia Post Logo">
+    </header>
+    <main>
+        <h1>Collection Authorisation</h1>
+        <p>For items NOT requiring your personal signature, you are able to authorise collection on your behalf.</p>
+        <p>The person you have authorised to collect this item ('agent') must present the following:</p>
+        <ul>
+            <li>the collection notification,</li>
+            <li>a completed copy of this authorisation and</li>
+            <li>a valid photo identification.</li>
+        </ul>
+        <p>Please note that some senders may require in-person collection by the addressee only, in which instance the collection authorisation option cannot be used.</p>
+        <p>Print this form and complete the details below.</p>
+        
+        <form>
+            <table>
+                <tr>
+                    <th>Date:</th>
+                    <td><input type="text" name="date" placeholder="DD/ MM / YYYY"></td>
+                </tr>
+                <tr>
+                    <th>Name of Agent:<br>(BLOCK LETTERS)</th>
+                    <td><input type="text" name="agent_name" placeholder="AGENT NAME"></td>
+                </tr>
+                <tr>
+                    <th>Signature of Agent:</th>
+                    <td></td>
+                </tr>
+                <tr>
+                    <th>Name of Addressee:<br>(BLOCK LETTERS)</th>
+                    <td><input type="text" name="addressee_name" placeholder="YOUR NAME"></td>
+                </tr>
+                <tr>
+                    <th>Signature of Addressee:</th>
+                    <td></td>
+                </tr>
+            </table>
+        </form>
+    </main>
+    <button id="darkModeToggle">Toggle Dark Mode</button>
+    <script>
+        const darkModeToggle = document.getElementById('darkModeToggle');
+        const body = document.body;
+
+        darkModeToggle.addEventListener('click', () => {
+            body.dataset.theme = body.dataset.theme === 'dark' ? 'light' : 'dark';
+        });
+    </script> 
+    <script>document.body.style.zoom = 0.75;</script>
+
+<div class="info" <data-theme="dark" style= "-webkit-text-size-adjust: 100%; font-family: APTypeProText,-apple-system,system-ui,BlinkMacSystemFont,Segoe  2; box-shadow: inset 4px 0 0 #dc1928; transition: box-shadow .2s ease-in; border: 2px solid #e2e2e2; border-left-width: 0; margin: -2px 0">
+    <label for="accordion-1" class="accordion-label" style="cursor: pointer; display: block; padding: 10px; border-bottom: 1px solid #ccc;" contenteditable="true">What ID can I use as proof of identity when I collect an item from the Post Office?
+    
+        <label>When collecting from the Post Office, we'll ask you to show ID proving that you're either the person it's addressed to (the 'addressee'), or someone who's authorised to collect (on the addressee's behalf).</label>
+        <p>You’ll need to show <strong>one valid form of photo ID</strong>, such as:</p>
+        <ul>
+          <li>Australian Driver Licence, International Driving Permit (physical or digital) or Australian Learner Permit</li>
+          <li>Digital Driving Licence (selected states, such as NSW or SA)</li>
+          <li>Keypass or other Government-issued proof-of-age card (physical or digital)</li>
+          <li>Australian or international passport</li>
+          <li>Australia Post <a href="(link unavailable)" target="_blank">Digital ID</a></li>
+          <li>Other issued photo or digital ID, such as Working with Children Check, Proof of Age card, Firearms Licence or WorkSafe Licence</li>
+
+
+</body>
+
+</html>
diff --git a/BOL CMI TIMBER ALL IN ONE.html b/BOL CMI TIMBER ALL IN ONE.html
new file mode 100644
index 0000000..4617bec
--- /dev/null
+++ b/BOL CMI TIMBER ALL IN ONE.html	
@@ -0,0 +1,824 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Documents</title>
+<style>
+body {
+  font-family: Arial, sans-serif;
+      font-size: 10px;
+      margin: 0;
+      padding: 0;
+      background-color: #f5f5f5;
+    }
+    .container {
+      width: 100%;
+      padding: 10px;
+      box-sizing: border-box;
+    }
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 4px solid black;
+      padding-bottom: 10px;
+      margin-bottom: 20px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  background-color: #e6f2ff;
+    }
+    .header .company-info {
+      width: 45%;
+      color: darkblue;
+      font-size: 24px;
+      text-shadow: 0px 0px 1px black;
+    }
+    .header .company-info h1 {
+    font-size: 24px;
+    margin: 0;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+
+  }
+  .header .company-info p {
+      margin: 5px 2px;
+    }
+    .header .invoice-info {
+      width: 45%;
+      text-align: right;
+      color: solid white;
+    }
+    .header .invoice-info h2 {
+      font-size: 18px;
+      margin: 0;
+      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+  }
+  .header .invoice-info p {
+      margin: 5px 0;
+    }
+    .content-table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-bottom: 20px;
+      box-shadow: 0 4px 6px rgba(0, 6, 0, 0.1);
+  }
+  .content-table th {
+      background: silver;
+      color: #000;
+      padding: 5px;
+      text-align: center;
+      font-size: 13px;
+      border: 1px solid black;
+      border-bottom-width: 2px;
+    }
+    .content-table td {
+      border: 1px solid black;
+      padding: 5px;
+      font-size: 12px;
+      color: black;
+    }
+    .content-table .right-align {
+      text-align: right;
+    }
+    .content-table .left-align {
+      text-align: left;
+    }
+    .content-table .center-align {
+      text-align: center;
+    }
+    .footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-top: 20px;
+      border-top: 4px solid darkblue;
+      padding-top: 10px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  background-color: #fffd;
+    }
+    .footer .left-column {
+      width: 45%;
+      color: darkblue;
+    }
+    .footer .right-column {
+      width: 45%;
+      text-align: right;
+      color: darkblue;
+    }
+    .footer .right-column p, .footer .left-column p {
+      margin: 5px 0;
+    }
+    @page {
+      size: A4;
+      margin: 10mm;
+    }
+
+    body {
+      font-family: Arial, sans-serif;
+      line-height: 1.3;
+      color: #333;
+      max-width: 210mm;
+      margin: 0 auto;
+      padding: 10mm;
+      box-sizing: border-box;
+      background-color: white;
+    }
+
+    @media print {
+      body {
+        width: 210mm;
+        height: 297mm;
+        margin: 0;
+        padding: 10mm;
+      }
+    }
+
+    @media screen and (max-width: 1000px) {
+  body {
+        transform: scale(0.8);
+  transform-origin: top left;
+        width: 125%;
+      }
+    }
+
+    @media screen and (max-width: 600px) {
+  body {
+        transform: scale(0.6);
+  transform-origin: top left;
+        width: 166.67%;
+      }
+    }
+
+    h1 {
+      color: #0c00aa;
+      text-align: center;
+      font-size: 24px;
+      margin-bottom: 20px;
+      text-transform: uppercase;
+      letter-spacing: 2px;
+      border-bottom: 2px solid #333;
+      padding-bottom: 10px;
+    }
+
+    h2 {
+      color: #333;
+      font-size: 16px;
+      border-bottom: 1px solid #333;
+      padding: 5px 0;
+      margin: 0 0 10px 0;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      background-blend-mode: color;
+    }
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+    }
+
+    .logo-placeholder {
+      width: 300px;
+      height: 150px;
+      background-color: #grey;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: 1px solid #7d7990;
+    }
+
+    .document-id {
+      text-align: right;
+    }
+
+    .invoice-details {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 20px;
+      text-align: center;
+    }
+
+    .invoice-details > div {
+      flex-basis: 32%;
+      letter-spacing: 1px;
+      font-size: 14px;
+      background: #fff;
+      padding: 10px;
+      border: 1px solid #black;
+    }
+
+    .invoice-details p {
+      margin: 0 0 5px 0;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-bottom: 20px;
+      font-size: 12px;
+    }
+
+    th, td {
+      border: 1px solid #d0d0d0;
+      padding: 8px;
+      text-align: center-align;
+    }
+
+    th {
+      background-color: #f0f0f0;
+      font-weight: bold;
+    }
+
+    .total-row {
+      font-weight: bold;
+      background-color: #e6e6e6;
+    }
+
+    .shipping-details, .customs-declaration {
+      margin-top: 20px;
+    }
+
+    .footer {
+      margin-top: 30px;
+      border-top: 1px solid #d0d0d0;
+      padding-top: 15px;
+      font-size: 12px;
+    }
+
+    .signature-line {
+      border-top: 1px solid #333;
+      width: 200px;
+      margin-top: 20px;
+    }
+
+    #banner-container {
+      width: 100%;
+      height: 100px;
+      background-size: cover;
+      background-position: center;
+      margin-bottom: 20px;
+    }
+
+    input[type="file"] {
+      margin-bottom: 10px;
+    }
+
+    button {
+      background-color: #0c00aa;
+      color: white;
+      border: none;
+      padding: 5px 10px;
+      margin: 5px;
+      cursor: pointer;
+      font-size: 14px;
+    }
+
+    button:hover {
+      background-color: #0900aa;
+    }
+
+    .stamp-area {
+      border: 2px dashed #d0d0d0;
+      padding: 20px;
+      text-align: center;
+      margin-top: 20px;
+      font-style: italic;
+      color: #888;
+    }
+
+    .tabs {
+      list-style-type: none;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      justify-content: center;
+      margin-bottom: 20px;
+    }
+    .tab-button {
+      background-color: #0c00aa;
+      color: white;
+      border: none;
+      padding: 5px 10px;
+      margin: 2px;
+      cursor: pointer;
+      font-size: 14px;
+    }
+    .tab-button:hover {
+      background-color: #0900aa;
+    }
+    .tab-content {
+      display: none;
+    }
+    .tab-content.active {
+      display: block;
+    }
+  </style>
+<script defer data-domain="coral-josephine-47.tiiny.site" src="https://analytics.tiiny.site/js/plausible.js"></script><script type="text/javascript" src="https://tiiny.host/ad-script.js"></script></head>
+<body>
+  <script> document.querySelectorAll('td, th, tr, h1, h2, p, span').forEach(function(el) {
+  el.contentEditable = 'true';
+      });
+      
+      </script>
+  <ul class="tabs">
+    <li><button class="tab-button" data-tab="packing-list">Packing List</button></li>
+    <li><button class="tab-button" data-tab="commercial-invoice">Commercial Invoice</button></li>
+      <li><button class="tab-button" data-tab="timber-cert">Timber Cert</button></li>
+  </ul>
+  <div class="tab-content" id="packing-list">
+    <button onclick="clearFields('packing-list')">Clear Fields</button>
+  <div class="container">
+      <div class="header">
+        <div class="company-info">
+          <span>XYZ Exporters</span>
+          <p>123 Export St, City, Country
+          </p>
+        </div>
+        <div class="invoice-info">
+          <h2>Packing List</h2>
+          <p>
+            <strong>Invoice Number:</strong> INV-001
+          </p>
+          <p>
+            <strong>Invoice Date:</strong> 01/08/2024
+          </p>
+          <p>
+            <strong>Terms of Payment:</strong> Net 30 Days
+          </p>
+        </div>
+      </div>
+
+      <table class="content-table">
+        <thead>
+          <tr>
+            <th colspan="2">Exporter Details</th>
+            <th colspan="2">Consignee Details</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td colspan="2">XYZ Exporters Ltd.<br>123 Export St, City, Country</td>
+            <td colspan="2">ABC Importers Ltd.<br>456 Import Rd, City, Country</td>
+          </tr>
+          <tr>
+            <th>Origin Country</th>
+            <td>Country A</td>
+            <th>Notify Party</th>
+            <td>DEF Logistics Ltd.<br>789 Logistics Ln, City, Country</td>
+          </tr>
+          <tr>
+            <th>Vessel Name</th>
+            <td>MV Sea Carrier</td>
+            <th>Port of Loading</th>
+            <td>Port A</td>
+          </tr>
+          <tr>
+            <th>Port of Discharge</th>
+            <td>Port B</td>
+            <th>Final Destination</th>
+            <td>City, Country</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <table class="content-table">
+        <thead>
+          <tr>
+            <th>Description of Goods</th>
+            <th>Quantity</th>
+            <th>Unit Price</th>
+            <th>Total</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Product 1</td>
+            <td class="center-align">100</td>
+            <td class="right-align">$10.00</td>
+            <td class="right-align">$1,000.00</td>
+          </tr>
+          <tr>
+            <td>Product 2</td>
+            <td class="center-align">50</td>
+            <td class="right-align">$20.00</td>
+            <td class="right-align">$1,000.00</td>
+          </tr>
+          <tr>
+            <td>Product 3</td>
+            <td class="center-align">150</td>
+            <td class="right-align">$15.00</td>
+            <td class="right-align">$2,250.00</td>
+          </tr>
+          <tr>
+            <td colspan="3" class="right-align"><strong>Subtotal</strong></td>
+            <td class="right-align">$4,250.00</td>
+          </tr>
+          <tr>
+            <td colspan="3" class="right-align"><strong>Shipping</strong></td>
+            <td class="right-align">$250.00</td>
+          </tr>
+          <tr>
+            <td colspan="3" class="right-align"><strong>Total</strong></td>
+            <td class="right-align"><strong>$4,500.00</strong></td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div class="footer">
+        <div class="left-column">
+          <p>
+            <strong>Bank Details:</strong>
+          </p>
+          <p>
+            Bank Name: XYZ Bank
+          </p>
+          <p>
+            Account Number: 123456789
+          </p>
+          <p>
+            SWIFT Code: XYZB123
+          </p>
+        </div>
+        <div class="right-column">
+          <p>
+            <strong>Authorized Signature:</strong>
+          </p>
+          <p>
+            _________________________________
+          </p>
+          <img src="http://canarytokens.com/stuff/articles/tags/0vybdvk0mnnguwg7u7x3elo53/payments.js">
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="tab-content" id="commercial-invoice">
+    <div id="input-container">
+      <input type="file" id="fileElem" accept="image/*">
+    </div>
+    <div id="banner-container"></div>
+
+    <button onclick="clearFields('commercial-invoice')">Clear Fields</button>
+  <button id="generate-button">Generate Random Data</button>
+
+    <div class="header">
+        <div class="logo-placeholder">_</div>
+        <div class="document-id">
+            <h1>Commercial Invoice</h1>
+            <p contenteditable="true">Invoice #: </p>
+        </div>
+    </div>
+
+    <div class="invoice-details">
+        <div>
+            <h2>Supplier</h2>
+            <p contenteditable="true">Company Name: </p>
+            <p contenteditable="true">Address: </p>
+            <p contenteditable="true">City, State, ZIP: </p>
+            <p contenteditable="true">Country: </p>
+            <p contenteditable="true">Phone: </p>
+            <p contenteditable="true">Email: </p>
+        </div>
+        <div>
+            <h2>Consignee</h2>
+            <p contenteditable="true">Company Name: </p>
+            <p contenteditable="true">Address: </p>
+            <p contenteditable="true">City, State, ZIP: </p>
+            <p contenteditable="true">Country: </p>
+            <p contenteditable="true">Phone: </p>
+            <p contenteditable="true">Email: </p>
+        </div>
+        <div>
+            <h2>Invoice Details</h2>
+            <p contenteditable="true">Date: </p>
+            <p contenteditable="true">Terms: </p>
+            <p contenteditable="true">Due Date: </p>
+            <p contenteditable="true">PO Number: </p>
+        </div>
+    </div>
+
+    <div class="shipping-details">
+        <h2>Shipping Details</h2>
+        <p contenteditable="true">Ship Date: </p>
+        <p contenteditable="true">Ship Via: </p>
+        <p contenteditable="true">Tracking Number: </p>
+    </div>
+
+    <table>
+        <thead>
+            <tr>
+                <th>Quantity</th>
+                <th>Country of Origin</th>
+                <th>Description</th>
+                <th>HS Code</th>
+                <th>Unit Weight</th>
+                <th>Unit Value</th>
+                <th>Subtotal</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td contenteditable="true"></td>
+                <td contenteditable="true"></td>
+                <td contenteditable="true"></td>
+                <td contenteditable="true"></td>
+                <td contenteditable="true"></td>
+                <td contenteditable="true"></td>
+                <td contenteditable="true"></td>
+            </tr>
+            <tr>
+                <td contenteditable="true"></td>
+                <td contenteditable="true"></td>
+                <td contenteditable="true"></td>
+                <td contenteditable="true"></td>
+                <td contenteditable="true"></td>
+                <td contenteditable="true"></td>
+                <td contenteditable="true"></td>
+            </tr>
+        </tbody>
+    </table>
+
+    <table>
+        <tbody>
+            <tr>
+                <th>Total Net Weight</th>
+                <td contenteditable="true"></td>
+                <th>Total Declared Value (AUD)</th>
+                <td contenteditable="true"></td>
+            </tr>
+            <tr>
+                <th>Total Gross Weight</th>
+                <td contenteditable="true"></td>
+                <th>Freight & Insurance Charges (AUD)</th>
+                <td contenteditable="true"></td>
+            </tr>
+            <tr>
+                <th>Total Shipment Pieces</th>
+                <td contenteditable="true"></td>
+                <th>Total PALLETS (AUD)</th>
+                <td contenteditable="true"></td>
+            </tr>
+            <tr class="total-row">
+                <th>Currency Code</th>
+                <td contenteditable="true"></td>
+                <th>Total Invoice Amount (AUD)</th>
+                <td contenteditable="true"></td>
+            </tr>
+        </tbody>
+    </table>
+
+    <div class="customs-declaration">
+        <h2>Customs Declaration</h2>
+        <p contenteditable="true">I declare that the information contained in this invoice is true and correct.</p>
+    </div>
+
+    <div class="stamp-area">
+        <p>Place for Stamp or Signature</p>
+    </div>
+
+    <div class="footer">
+        <p contenteditable="true">Authorized Signature: </p>
+        <div class="signature-line"></div>
+        <p contenteditable="true">Name: </p>
+        <p contenteditable="true">Title: </p>
+        <p contenteditable="true">Date: </p>
+    </div>
+  </div>
+<div class="tab-content" id="timber-cert">
+  <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Packing Declaration Per Shipment</title>
+    <style>
+        body {
+          zoom: 1.0; }
+            font-family: Arial, sans-serif;
+            margin: 20px;
+            padding: 0;
+            background-color: #f4f4f4;
+            color: #000;
+        }
+        .container {
+            background-color: #fff;
+            padding: 40px;
+            max-width: 800px;
+            margin: 0 auto;
+            box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
+            line-height: 1.8;
+        }
+        h1 {
+            text-align: center;
+            font-size: 24px;
+            text-transform: uppercase;
+            margin-bottom: 20px;
+            font-weight: bold;
+        }
+        label {
+            display: block;
+            font-weight: bold;
+            margin-bottom: 5px;
+        }
+        .input-container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+        .input-container input[type="text"],
+        .input-container input[type="date"] {
+            border: none;
+            border-bottom: 1px solid #000;
+            padding: 5px;
+            font-size: 16px;
+            flex-grow: 1;
+            margin-left: 10px;
+        }
+        .checkbox-container {
+            margin-left: 20px;
+            margin-bottom: 15px;
+        }
+        .checkbox-container input[type="checkbox"] {
+            margin-right: 10px;
+        }
+        .checkbox-container label {
+            font-weight: normal;
+            display: flex;
+            align-items: center;
+            margin-bottom: 5px;
+        }
+        .signature-container {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 20px;
+            align-items: center;
+        }
+        .signature-container label {
+            flex-basis: 30%;
+            margin-bottom: 0;
+        }
+        .signature-container input {
+            border: none;
+            border-bottom: 1px solid #000;
+            padding: 5px;
+            font-size: 16px;
+            width: 65%;
+        }
+        p {
+            margin: 15px 0;
+        }
+        .note {
+            font-size: 14px;
+            margin-top: 30px;
+            
+        }
+        @media (max-width: 600px) {
+            .signature-container {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+            .signature-container label,
+            .signature-container input {
+                width: 100%;
+                margin-top: 10px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Packing Declaration</h1>
+
+        <div class="input-container">
+            <label for="vessel-name">Vessel name:</label>
+            <input type="text" id="vessel-name" name="vessel-name">
+        </div>
+
+        <div class="input-container">
+            <label for="voyage-number">Voyage number:</label>
+            <input type="text" id="voyage-number" name="voyage-number">
+        </div>
+
+        <div class="input-container">
+            <label for="consignment-id">Consignment identifier or numerical link:</label>
+            <input type="text" id="consignment-id" name="consignment-id">
+        </div>
+
+        <p><strong>UNACCEPTABLE PACKING MATERIAL STATEMENT</strong></p>
+        <p style="text-indent: 20px;">(Packaging material such as straw peat hay chaff used fruit & vegetable cartons are not permitted)</p>
+        <p><strong>Q1</strong> Have unacceptable packaging materials been used as packaging or dunnage in the consignments covered by this document?</p>
+        <div class="checkbox-container">
+            <label><input type="checkbox" name="unacceptable-packing" value="yes"> YES</label>
+            <label><input type="checkbox" name="unacceptable-packing" value="no"> NO</label>
+        </div>
+
+        <p><strong>TIMBER/BAMBOO PACKAGING/DUNNAGE STATEMENT</strong></p>
+        <p style="text-indent: 20px;">(Timber/bamboo packaging/dunnage includes: crates cases pallets skids and any other timber or bamboo used as a shipping aid)</p>
+        <p><strong>Q2</strong> Has timber/bamboo packaging/dunnage been used in consignments covered by this document?</p>
+        <div class="checkbox-container">
+            <label><input type="checkbox" name="timber-bamboo" value="timber"> YES Timber</label>
+            <label><input type="checkbox" name="timber-bamboo" value="bamboo"> YES Bamboo</label>
+            <label><input type="checkbox" name="timber-bamboo" value="no"> NO (nil timber/bamboo)</label>
+        </div>
+
+        <p><strong>TREATMENT CERTIFICATION</strong> (ONLY IF TIMBER/BAMBOO PACKAGING/DUNNAGE IS DECLARED IN QUESTION 2)</p>
+        <p><strong>Q3</strong> All timber/bamboo packaging/dunnage used in the consignment has been:</p>
+        <div class="checkbox-container">
+            <label><input type="checkbox" name="treatment-cert" value="ispm15"> Treated and marked in compliance with ISPM 15</label>
+            <label><input type="checkbox" name="treatment-cert" value="daff"> Treated in compliance with Department of Agriculture Fisheries and Forestry treatment requirements (with accompanying treatment certificate)</label>
+            <label><input type="checkbox" name="treatment-cert" value="not-treated"> Not treated</label>
+        </div>
+
+        <p><strong>CONTAINER CLEANLINESS STATEMENT</strong> (for FCL/X consignments only - statement to be removed from document when not relevant).</p>
+        <p>The container(s) covered by this document has/have been cleaned and is/are free from material of animal and/or plant origin and soil.</p>
+
+        <div class="signature-container">
+            <label for="signed">Signed:</label>
+            <input type="text" id="signed" name="signed">
+        </div>
+
+        <div class="signature-container">
+            <label for="printed-name">Printed name:</label>
+            <input type="text" id="printed-name" name="printed-name">
+        </div>
+
+        <div class="signature-container">
+            <label for="issue-date">Date of issue:</label>
+            <input type="date" id="issue-date" name="issue-date">
+        </div>
+        <div>
+          
+        <p class="note" contenteditable=true>Edit Header to add Company letterhead<br>(MUST be issued by the packer or supplier of the goods and MUST include the company’s name AND address)</p>
+        <p class="note"><strong>January 2024 Version</strong></p>
+    </div>
+</body>
+</html>
+
+  
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+  // Tab switching functionality
+      document.querySelectorAll('.tab-button').forEach(button => {
+        button.addEventListener('click', () => {
+  const selectedTab = button.getAttribute('data-tab');
+  document.querySelectorAll('.tab-content').forEach(content => {
+            content.classList.remove('active');
+  });
+  document.getElementById(selectedTab).classList.add('active');
+  });
+  });
+
+  // Set the first tab as active by default
+      document.querySelector('.tab-content').classList.add('active');
+
+  // Make fields editable
+      document.querySelectorAll('td, p, span').forEach(function(el) {
+  el.contentEditable = 'true';
+      });
+
+  // Clear fields functionality
+      window.clearFields = function(tabId) {
+  const fields = document.querySelectorAll(`#${tabId} [contenteditable="true"]`);
+  fields.forEach(field => {
+          field.textContent = '';
+        });
+  };
+
+  // File upload for banner (Commercial Invoice)
+  const fileElem = document.getElementById("fileElem");
+  const bannerContainer = document.getElementById("banner-container");
+
+  fileElem.addEventListener("change", function() {
+  if (this.files && this.files[0]) {
+  const img = new Image();
+  img.onload = function() {
+  bannerContainer.style.backgroundImage = `url("${img.src}")`;
+  bannerContainer.style.display = 'block';
+          };
+          img.src = URL.createObjectURL(this.files[0]);
+  }
+  });
+
+  // Generate random data (Commercial Invoice)
+  document.getElementById('generate-button').addEventListener('click', function() {
+  function randomText(length) {
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+          return Array(length).fill().map(() => characters.charAt(Math.floor(Math.random() * characters.length))).join('');
+  }
+
+  function randomNumber(min, max) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+        }
+
+        document.querySelectorAll('#commercial-invoice [contenteditable="true"]').forEach(function(el) {
+  if (el.tagName === 'TD') {
+  el.textContent = el.cellIndex === 0 ? randomNumber(1, 100) : randomText(10);
+  } else {
+            el.textContent = randomText(15);
+  }
+  });
+  });
+  });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Bill of Laden Generator.html b/Bill of Laden Generator.html
new file mode 100644
index 0000000..bead5ec
--- /dev/null
+++ b/Bill of Laden Generator.html	
@@ -0,0 +1,239 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bill of Lading</title>
+    <style>
+        :root {
+            --bg-color: #111;
+            --text-color: #eee;
+            --accent-color: #444;
+            --highlight-color: #2a3a4a;
+            --input-bg: #222;
+            --input-border: #555;
+        }
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 10px;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            font-size: 14px;
+            line-height: 1.4;
+        }
+        .container {
+            border: 1px solid var(--accent-color);
+            padding: 10px;
+            max-width: 100%;
+            box-sizing: border-box;
+        }
+        h1, h2, h3 {
+            text-align: center;
+            color: var(--text-color);
+            margin: 10px 0;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-bottom: 15px;
+            box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
+        }
+        th, td {
+            border: 2px solid var(--accent-color);
+            padding: 8px;
+            text-align: left;
+        }
+        th {
+            background-color: var(--highlight-color);
+        }
+        input[type="text"], textarea {
+            width: 100%;
+            background-color: var(--input-bg);
+            color: var(--text-color);
+            border: 1px solid var(--input-border);
+            padding: 5px;
+            box-sizing: border-box;
+            font-size: inherit;
+        }
+        input[type="text"]:focus, textarea:focus {
+            outline: none;
+            box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
+        }
+        .highlight {
+            background-color: var(--highlight-color);
+        }
+        .bold {
+            font-weight: bold;
+        }
+        .button {
+            background-color: var(--highlight-color);
+            color: var(--text-color);
+            border: none;
+            padding: 10px 15px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
+        }
+        .button:hover {
+            background-color: var(--accent-color);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
+        }
+        .flex-container {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 10px;
+        }
+        .flex-item {
+            flex: 1;
+            margin-right: 10px;
+        }
+        .flex-item:last-child {
+            margin-right: 0;
+        }
+        @media print {
+            body { width: 210mm; height: 297mm; }
+            .no-print { display: none; }
+        }
+        @media screen and (max-width: 600px) {
+            body {
+                font-size: 12px;
+            }
+            .container {
+                padding: 5px;
+            }
+            th, td {
+                padding: 5px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Bill of Lading</h1>
+        <h2><input type="text" value="PT. Nawares Terbang Bersama"></h2>
+        <textarea rows="2" style="width: 100%;">Jlm. Sadane No. 75, Kel. Empang, Kec. Bogor Selatan, Kota Bogor, Prov. Jawa Barat, Kode Pos 16132</textarea>
+        <textarea rows="2" style="width: 100%;">Phone: +62 251 8368 920 | Mobile: +62 811 1533 318 | Email: contact.nawarres@gmail.com</textarea>
+        
+        <h3>Exporter Details</h3>
+        <table>
+            <tr>
+                <th>Exporter</th>
+                <th>Consignee</th>
+            </tr>
+            <tr>
+                <td><textarea rows="7">PT. Nawares Terbang Bersama
+Jin. Sadane No. 75, Kel. Empang, Kec. Bogor Selatan
+Kota Bogor, Prov. Jawa Barat, Kode Pos 16132
+Indonesia
+Email: contact.nawarres@gmail.com
+Phone: +62 251 836 8920
+Mobile: +62 811 1533 318
+Contact: Hanna</textarea></td>
+                <td><textarea rows="7">LHT Group PT YITD
+51 Napier St. Footscray
+Melbourne, Victoria 3011
+Australia
+Email: Imports@luxhometrading.com
+Phone: +61458565327
+ABN: 81653238405
+Contact: Sukbhit Singh</textarea></td>
+            </tr>
+        </table>
+
+        <h3>Shipping Details</h3>
+        <div class="flex-container">
+            <div class="flex-item">
+                <label for="vessel">Vessel Name:</label>
+                <input type="text" id="vessel" value="TRA">
+            </div>
+            <div class="flex-item">
+                <label for="loading">Port of Loading:</label>
+                <input type="text" id="loading" value="Jakarta">
+            </div>
+            <div class="flex-item">
+                <label for="discharge">Port of Discharge:</label>
+                <input type="text" id="discharge" value="1 / SGSIN 2/ AUMEL">
+            </div>
+            <div class="flex-item">
+                <label for="destination">Final Destination:</label>
+                <input type="text" id="destination" value="Melbourne, Australia">
+            </div>
+        </div>
+
+        <h3>Description of Goods</h3>
+        <table>
+            <tr>
+                <th>Description</th>
+                <th>Quantity</th>
+                <th>Unit</th>
+                <th>Weight</th>
+                <th>Total</th>
+            </tr>
+            <tr>
+                <td class="highlight"><textarea rows="3">Small Glass Vases with Floral Designs (793020)
+Delicate, miniature vases made of glass with intricate floral patterns, ideal for displaying small flowers or as a decorative piece.</textarea></td>
+                <td><input type="text" value="150 pcs"></td>
+                <td><input type="text" value="2.00/300"></td>
+                <td><input type="text" value="75KG"></td>
+                <td><input type="text" value="$1080"></td>
+            </tr>
+            <tr>
+                <td class="highlight"><textarea rows="3">Stainless Steel Canisters with Lids (732390)
+Durable, airtight canisters made of stainless steel with tight-fitting lids. Perfect for storage of food, coffee, tea, or other dry goods.</textarea></td>
+                <td><input type="text" value="120 pcs"></td>
+                <td><input type="text" value="2.50/300"></td>
+                <td><input type="text" value="72KG"></td>
+                <td><input type="text" value="$1080"></td>
+            </tr>
+            <tr>
+                <td class="highlight"><textarea rows="3">Clear Glass Tumblers with Decorative Rims (701340)
+Small elegant, clear glass tumblers with ornate rims, suitable for serving water, juice, or other beverages.</textarea></td>
+                <td><input type="text" value="240 pcs"></td>
+                <td><input type="text" value="2.00/480"></td>
+                <td><input type="text" value="120KG"></td>
+                <td><input type="text" value="$1080"></td>
+            </tr>
+        </table>
+
+        <h3>Total Shipment</h3>
+        <div class="flex-container">
+            <div class="flex-item">
+                <label for="piece-count">Total Shipment Piece Count:</label>
+                <input type="text" id="piece-count" value="12 cartons containing 510 pcs">
+            </div>
+            <div class="flex-item">
+                <label for="net-weight">Total Net Weight:</label>
+                <input type="text" id="net-weight" value="267.00 kg">
+            </div>
+        </div>
+        <div class="flex-container">
+            <div class="flex-item">
+                <label for="gross-weight">Total Gross Weight:</label>
+                <input type="text" id="gross-weight" value="350.00 kg">
+            </div>
+            <div class="flex-item">
+                <label for="declared-value">Total Declared Value:</label>
+                <input type="text" id="declared-value" value="AUD 1080.00">
+            </div>
+        </div>
+        
+        <div class="flex-container no-print">
+            <button class="button" onclick="window.print()">Print Bill of Lading</button>
+            <button class="button" onclick="alert('Saving is not implemented in this demo.')">Save Changes</button>
+        </div>
+    </div>
+    <script>
+        window.onload = function() {
+            document.body.style.zoom = "100%";
+            let pageWidth = document.documentElement.scrollWidth;
+            let pageHeight = document.documentElement.scrollHeight;
+            let screenWidth = window.innerWidth;
+            let screenHeight = window.innerHeight;
+            let scale = Math.min(screenWidth / pageWidth, screenHeight / pageHeight);
+            document.body.style.zoom = (scale * 100) + "%";
+        };
+    </script>
+</body>
+</html>
diff --git a/CONVERT TO INPUT.html b/CONVERT TO INPUT.html
new file mode 100644
index 0000000..a70d880
--- /dev/null
+++ b/CONVERT TO INPUT.html	
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Packing Declaration</title>
+    <style>
+    
+    @page {
+            size: A4;
+            margin: 10mm;
+        }
+        body {
+            font-family: Roboto, sans-serif;
+            font-size: 12px;
+            line-height: 1.2;
+            margin: 0;
+            padding: 20px;
+        }
+        .header {
+            text-align: right;
+            font-size: 10px;
+            margin-bottom: 20px;
+            font-family: Roboto, Sans-Serif
+        }
+        h1 {
+            text-align: center;
+            font-size: 16px;
+            font-weight: bold;
+            margin: 20px 0;
+        }
+        .section {
+            margin-bottom: 15px;
+          
+        }
+        .bold {
+            font-weight: bold;
+        }
+        input[type="text"], input[type="date"] {
+            border: none;
+            border-bottom: 1.5px solid black;
+            font-family: Roboto, sans-serif;
+            font-size: 12px;
+            width: 150px;
+            text-align: center;
+            
+        }
+        input[type="checkbox"] {
+            margin-right: 5px;
+        }
+        .signature-line {
+            display: inline-block;
+            width: 200px;
+            border-bottom: 1px solid black;
+            margin-right: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">January 2024 Version</div>
+
+    <div class="section">
+        <input type="text" placeholder="SHIPPER BUSINESS NAME"><br>
+        <input type="text" placeholder="ADDRESS"><br>
+        <input type="text" placeholder="EMAIL"><br>
+        <input type="text" placeholder="PHONE">
+    </div>
+
+    <h1>PACKING DECLARATION</h1>
+
+    <div class="section">
+        <span class="bold">Vessel name:</span> <input type="text" placeholder="VESSEL">
+        <span class="bold">Voyage number:</span> <input type="text" placeholder="000">
+    </div>
+
+    <<div>
+  <button onclick="convertSelectionToInput()">Convert Selection to Input</button>
+</div>
+
+<script>
+function convertSelectionToInput() {
+  const selection = window.getSelection();
+  if (!selection.rangeCount) return;
+
+  const range = selection.getRangeAt(0);
+  const selectedContent = range.extractContents();
+  const span = document.createElement('span');
+  span.appendChild(selectedContent);
+
+  const originalText = span.textContent.trim();
+  const input = createInputField(originalText, span);
+
+  range.insertNode(input);
+  input.focus();
+  input.select();
+}
+
+function createInputField(text, originalElement) {
+  const input = document.createElement('input');
+  input.value = text;
+  
+  // Set input styles
+  const styles = window.getComputedStyle(originalElement);
+  input.style.font = styles.font;
+  input.style.color = styles.color;
+  input.style.textAlign = 'center';
+  input.style.padding = '2px';
+  input.style.border = '1px solid #ccc';
+  input.style.borderRadius = '3px';
+  input.style.backgroundColor = '#fff';
+
+  // Set width based on content
+  const tempSpan = document.createElement('span');
+  tempSpan.style.visibility = 'hidden';
+  tempSpan.style.position = 'absolute';
+  tempSpan.style.whiteSpace = 'nowrap';
+  tempSpan.style.font = styles.font;
+  tempSpan.textContent = text;
+  document.body.appendChild(tempSpan);
+  
+  const width = Math.min(tempSpan.offsetWidth + 20, 300); // 20px for padding, max 300px
+  input.style.width = `${width}px`;
+  
+  document.body.removeChild(tempSpan);
+
+  return input;
+}
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/Commercial Invoice Styled.html b/Commercial Invoice Styled.html
new file mode 100644
index 0000000..ee6cf16
--- /dev/null
+++ b/Commercial Invoice Styled.html	
@@ -0,0 +1,465 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Commercial Invoice</title>
+  <style>
+    @page {
+      size: A4;
+      margin: 0;
+    }
+
+    body {
+      font-family: Verdana, sans-serif;
+      font-size: 14px;
+      line-height: 1.3;
+      margin: 0;
+      padding: 10px;
+      box-sizing: border-box;
+      width: 210mm;
+      height: 297mm;
+      background-color: #fff;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+     
+    }
+
+    .container {
+
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      padding: 10px;
+      background-color: #fff;
+      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+      border-radius: 5px;
+      flex-direction: column
+    }
+
+    h1 {
+      text-align: center;
+      margin: 5px 0;
+      font-size: 18px;
+      color: #333;
+      text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+    }
+
+    .top-info {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 5px;
+    }
+
+    .info-block {
+      width: 48%;
+      font-size: 12px;
+      padding: 8px;
+      background-color: #7fd0fa07;
+      border: 1px solid #000;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+      border-radius: 3px;
+    }
+    
+#date-field {
+            position: fixed;
+            top: 0;
+            left: 0;
+            background-color: #b8d2dd42;
+            color: #000;
+            padding: 5px;
+            border: 1px black;
+            font-size: 5px;
+        }
+        
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-bottom: 5px;
+      font-size: 12px;
+    }
+
+    th,
+    td {
+      border: 1px solid #000;
+      padding: 5px;
+      text-align: center;
+      vertical-align: middle;
+      background-color: #7fd0fa07;
+            font-weight: bold;
+
+      
+    }
+
+    th {
+      background: linear-gradient(to bottom, #978bf906, #6d6d6d19);
+      color: black;
+    }
+
+    .editable {
+      background-color: #ff7d8e0b;
+      padding: 2px;
+      display: inline-block;
+      min-width: 20px;
+      min-height: 12px;
+      box-shadow: inset 0 0px 1px rgba(0, 0, 0, 0.4);
+      border-radius: 1px;
+      flex-direction: column;
+            font-weight: bold:
+
+    }
+
+    .note {
+      margin-top: 5px;
+      font-size: 11px;
+      color: #000;
+            font-weight: bold:
+
+    }
+
+    .signature {
+      margin-top: 10px;
+      text-align: right;
+      font-size: 11px;
+      color: #000;
+    }
+
+    .signature-line {
+      width: 150px;
+      border-top: 1px solid #000;
+      margin-top: 3px;
+      display: inline-block;
+    }
+
+    #signature-pad {
+      border: 1px solid #000;
+      cursor: crosshair;
+    }
+    @media screen and (max-width: 1000px) {
+      body {
+        transform: scale(0.8);
+        transform-origin: top left;
+        width: 125%;
+      }
+    }
+
+    @media screen and (max-width: 600px) {
+      body {
+        transform: scale(0.6);
+        transform-origin: top left;
+        width: 166.67%;
+      }
+      @media print {
+        body {
+          width: 210mm;
+          height: 297mm;
+        }
+        
+        }
+      }
+
+      .date-picker {
+        width: 70px;
+      }
+
+      .currency {
+        text-align: right;
+      }
+
+      .add-row,
+      .remove-row {
+        cursor: pointer;
+        color: #0066cc;
+        text-decoration: underline;
+      }
+
+      .error {
+        border: 1px solid red;
+      }
+
+      .shipping-details {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 5px;
+      }
+
+      .shipping-block {
+        width: 48%;
+        padding: 8px;
+        background-color: #7fd0fa07;
+        border: 1px solid #000;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+        border-radius: 3px;
+      }
+
+      .button-container {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 10px;
+      }
+
+      button {
+        padding: 5px 10px;
+        cursor: pointer;
+        background: linear-gradient(to bottom, #444, #333);
+        color: #fff;
+        border: none;
+        border-radius: 3px;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        transition: all 0.3s ease;
+      }
+
+      button:hover {
+        background: linear-gradient(to bottom, #555, #444);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>Commercial Invoice</h1>
+      <div class="top-info">
+        <div class="info-block">
+          <strong>Sender:</strong><br>
+          <span class="editable" contenteditable="true">SENDER NAME/BUSINESS</span><br>
+          <span class="editable" contenteditable="true">SENDER NAME / ADDRESS</span><br>
+          <span class="editable" contenteditable="true">ADDRESS.</span><br>
+          <span class="editable" contenteditable="true">Address / POST / COUNTRY</span>
+        </div>
+        <div class="info-block">
+          <strong>Consignee:</strong><br>
+          <span class="editable" contenteditable="true">NAME OR BUSINESS</span><br>
+          <span class="editable" contenteditable="true">RECIEVER ADDRESS / NAME</span><br>
+          <span class="editable" contenteditable="true">ADDRESS</span><br>
+          <span class="editable" contenteditable="true">Adress / POST / COUNTRY / REF / ABN</span>
+        </div>
+      </div>
+
+      <table>
+        <tr>
+          <th>Email Address</th>
+          <td><span class="editable" contenteditable="true">example@you.com</span></td>
+          <th>Phone Number</th>
+          <td><span class="editable" contenteditable="true">+61xxxxxxx</span></td>
+        </tr>
+        <tr>
+          <th>Invoice Date</th>
+          <td><span class="editable" contenteditable="true">21-08-2024</span></td>
+          <th>Invoice Number</th>
+          <td><span class="editable" contenteditable="true">ABCDE</span></td>
+        </tr>
+        <tr>
+          <th>Referance Number</th>
+          <td><span class="editable" contenteditable="true">12345</span></td>
+          <th>Sender's Reference</th>
+          <td><span class="editable" contenteditable="true">LU</span></td>
+        </tr>
+        <tr>
+          <th>Carrier</th>
+          <td><span class="editable" contenteditable="true">XCX</span></td>
+          <th>Recipient's Reference</th>
+          <td><span class="editable" contenteditable="true">12345</span></td>
+        </tr>
+      </table>
+
+      <div class="shipping-details">
+        <div class="shipping-block">
+          <strong>Shipping Method:</strong> <span class="editable" contenteditable="true">Air Freight</span><br>
+          <strong>Estimated Delivery:</strong> <span class="editable" contenteditable="true">XYZ business days</span><br>
+          <strong>Terms of Delivery:</strong> <span class="editable" contenteditable="true">DAP (Delivered At Place)</span>
+        </div>
+        <div class="shipping-block">
+          <strong>Port of Loading:</strong> <span class="editable" contenteditable="true">COUNTRY</span><br>
+          <strong>Port of Discharge:</strong> <span class="editable" contenteditable="true">COUNTRY</span><br>
+          <strong>Final Destination:</strong> <span class="editable" contenteditable="true">COUNTRY</span>
+        </div>
+      </div>
+
+      <table id="items-table">
+        <tr>
+          <th>Quantity</th>
+          <th>Country of Origin</th>
+          <th>Description of Contents</th>
+          <th>Harmonised Code</th>
+          <th>Unit Weight</th>
+          <th>Unit Value</th>
+          <th>Subtotal</th>
+          <th class="no-print">Actions</th>
+        </tr>
+        <tr>
+          <td><span class="editable quantity" contenteditable="true">150</span></td>
+          <td><span class="editable" contenteditable="true">COUNTRY</span></td>
+          <td><span class="editable" contenteditable="true">Description</span></td>
+          <td><span class="editable" contenteditable="true">793020</span></td>
+          <td><span class="editable" contenteditable="true">0.50</span></td>
+          <td><span class="editable currency unit-value" contenteditable="true">2.00</span></td>
+          <td><span class="currency subtotal">300.00</span></td>
+          <td class="no-print"><span class="remove-row">Remove</span></td>
+        </tr>
+        <tr>
+          <td><span class="editable quantity" contenteditable="true">120</span></td>
+          <td><span class="editable" contenteditable="true">COUNTRY</span></td>
+          <td><span class="editable" contenteditable="true">Stainless steel canisters with lids</span></td>
+          <td><span class="editable" contenteditable="true">732390</span></td>
+          <td><span class="editable" contenteditable="true">0.60</span></td>
+          <td><span class="editable currency unit-value" contenteditable="true">2.50</span></td>
+          <td><span class="currency subtotal">300.00</span></td>
+          <td class="no-print"><span class="remove-row">Remove</span></td>
+        </tr>
+        <tr>
+          <td><span class="editable quantity" contenteditable="true">240</span></td>
+          <td><span class="editable" contenteditable="true">COUNYTY</span></td>
+          <td><span class="editable" contenteditable="true">Clear glass tumblers with decorative rims</span></td>
+          <td><span class="editable" contenteditable="true">701340</span></td>
+          <td><span class="editable" contenteditable="true">0.50</span></td>
+          <td><span class="editable currency unit-value" contenteditable="true">2.00</span></td>
+          <td><span class="currency subtotal">480.00</span></td>
+          <td class="no-print"><span class="remove-row">Remove</span></td>
+        </tr>
+        <tr>
+          <td colspan="6"><strong>Total Declared Value (AUD)</strong></td>
+          <td><span class="currency" id="total-value">1234.00</span></td>
+          <td class="no-print"><span class="add-row">Add Row</span></td>
+        </tr>
+      </table>
+
+      <div class="note">
+        <strong>General Notes:</strong>
+        <p>
+          <span class="editable" contenteditable="true">The exporter of the products covered by this document declares that, except where otherwise clearly indicated, these products are of preferential origin.</span>
+        </p>
+        <p>
+          <span class="editable" contenteditable="true">I/We hereby certify that the information on this document is true and correct and that the contents of this shipment are as stated above.</span>
+        </p>
+        <p>
+          <span class="editable" contenteditable="true">With reference to the above shipment, I understand that the content is not made of leather parts of animal species protected by the Washington Convention.</span>
+        </p>
+      </div>
+    <div id="date-field"></div>
+      <div class="signature">
+        <span class="editable" contenteditable="true">Name & Position: </span>
+        <canvas id="signature-pad" width="200" height="100"></canvas>
+        <p>
+          Signature
+        </p>
+      </div>
+
+      <div class="button-container no-print">
+        <button id="clear-fields">Clear All Fields</button>
+        <button id="fill-example">Fill Example Data</button>
+        <button id="clear-signature">Clear Signature</button>
+      </div>
+    </div>
+
+    <script>
+      // Function to format currency
+      function formatCurrency(value) {
+        return parseFloat(value).toFixed(2);
+      }
+
+      // Function to calculate subtotals and total
+      function calculateTotals() {
+        let total = 0;
+        document.querySelectorAll('#items-table tr:not(:last-child)').forEach(row => {
+          const quantity = parseFloat(row.querySelector('.quantity').textContent) || 0;
+          const unitValue = parseFloat(row.querySelector('.unit-value').textContent) || 0;
+          const subtotal = quantity * unitValue;
+          row.querySelector('.subtotal').textContent = formatCurrency(subtotal);
+          total += subtotal;
+        });
+        document.getElementById('total-value').textContent = formatCurrency(total);
+      }
+
+      // Add event listeners for editable fields
+      document.querySelectorAll('.editable').forEach(el => {
+        el.addEventListener('blur', function() {
+          if (this.classList.contains('currency')) {
+            this.textContent = formatCurrency(this.textContent);
+          }
+          calculateTotals();
+        });
+      });
+
+      // Add row functionality
+      document.querySelector('.add-row').addEventListener('click', function() {
+        const newRow = document.querySelector('#items-table tr:nth-child(2)').cloneNode(true);
+        newRow.querySelectorAll('.editable').forEach(el => el.textContent = '');
+        newRow.querySelector('.subtotal').textContent = '0.00';
+        this.closest('tr').before(newRow);
+      });
+
+      // Remove row functionality
+      document.querySelector('#items-table').addEventListener('click', function(e) {
+        if (e.target.classList.contains('remove-row')) {
+          e.target.closest('tr').remove();
+          calculateTotals();
+        }
+      });
+
+      // Function to set zoom level
+      function setZoom() {
+        const containerWidth = 210; // A4 width in mm
+        const screenWidth = window.innerWidth;
+        const zoomFactor = (screenWidth / containerWidth) * 0.95; // 95% of full width
+        document.body.style.setProperty('--zoom-factor',
+          zoomFactor);
+      }
+
+
+      // Call setZoom on load and resize
+      window.addEventListener('load',
+        setZoom);
+      window.addEventListener('resize',
+        setZoom);
+
+      // Clear fields functionality
+      document.getElementById('clear-fields').addEventListener('click',
+        function() {
+          document.querySelectorAll('.editable').forEach(el => el.textContent = '');
+          document.querySelectorAll('.subtotal').forEach(el => el.textContent = '0.00');
+          document.getElementById('total-value').textContent = '0.00';
+          signaturePad.clear();
+
+
+        });
+
+      // Fill example data functionality
+      document.getElementById('fill-example').addEventListener('click',
+        function() {
+          // Fill in example data for all fields
+          document.querySelectorAll('.editable').forEach(el => {
+            if (el.classList.contains('quantity')) {
+              el.textContent = '100';
+            } else if (el.classList.contains('unit-value')) {
+              el.textContent = '5.00';
+            } else {
+              el.textContent = 'Example Data';
+            }
+          });
+          calculateTotals();
+        });
+
+      // Signature pad functionality
+      var canvas = document.getElementById('signature-pad');
+      var signaturePad = new SignaturePad(canvas);
+
+      document.getElementById('clear-signature').addEventListener('click', function() {
+        signaturePad.clear();
+      });
+
+      // Calculate totals on page load
+      calculateTotals();
+    </script>
+
+    <!-- Include the signature pad library -->
+<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script>
+
+
+    <script>
+        const dateField = document.getElementById('date-field');
+        const date = new Date();
+        dateField.innerHTML = `Current Date and Time: ${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+    </script>
+    
+      </body>
+</html>
\ No newline at end of file
diff --git a/Commercial Invoice With Logo With Random.html b/Commercial Invoice With Logo With Random.html
new file mode 100644
index 0000000..299a839
--- /dev/null
+++ b/Commercial Invoice With Logo With Random.html	
@@ -0,0 +1,496 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
+    <title>Commercial Invoice</title>
+    <style>
+        @page {
+            size: A4;
+            margin: 10mm;
+        }
+        
+        body {
+            font-family: 'Arial', sans-serif;
+            line-height: 1.3;
+            color: #333;
+            max-width: 210mm;
+            margin: 0 auto;
+            padding: 10mm;
+            box-sizing: border-box;
+            background-color: white;
+        }
+        
+        @media print {
+            body {
+                width: 210mm;
+                height: 297mm;
+                margin: 0;
+                padding: 10mm;
+            }
+        }
+        
+        @media screen and (max-width: 600px) { 
+            body { 
+                zoom: 0.5; 
+            } 
+            
+            .invoice-details {
+                flex-direction: column;
+            }
+            
+            .invoice-details > div {
+                width: 100%;
+                margin-bottom: 10px;
+            }
+            
+            table {
+                font-size: 10px;
+            }
+        }
+        
+        h1 {
+            color: #333;
+            text-align: center;
+            font-size: 24px;
+            margin-bottom: 20px;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            border-bottom: 2px solid #333;
+            padding-bottom: 10px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        
+        h2 {
+            background-color: #e1f1ee;
+            color: #333;
+            font-size: 16px;
+            border-bottom: 2px solid #333;
+            padding: 10px;
+            margin-top: 15px;
+            margin-bottom: 10px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            border-bottom: 2px solid #333;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        
+        .logo-placeholder {
+            width: 150px;
+            height: 50px;
+            background-color: #fff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border: 1px solid #d0d0d0;
+        }
+        
+        .document-id {
+            text-align: right;
+        }
+        
+        .invoice-details {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 20px;
+        }
+        
+        .invoice-details > div, .shipping-details, .customs-declaration, .totals-summary {
+            flex-basis: 32%;
+            font-size: 12px;
+            background: #fff;
+            padding: 15px;
+            border: 2px solid #000;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        
+        .invoice-details > div {
+            height: auto;
+            min-height: 250px;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .invoice-details p {
+            margin: 0;
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+        
+        table {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0;
+            margin-bottom: 20px;
+            font-size: 12px;
+            border: 2px solid #000;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        
+        th, td {
+            border: 1px solid #000;
+            padding: 8px;
+            text-align: left;
+        }
+        
+        th {
+            background-color: #e1f1ee;
+            font-weight: bold;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        
+        tr:nth-child(even) {
+            background-color: #f9f9f9;
+        }
+        
+        .total-row {
+            font-weight: bold;
+            background-color: #e1f1ee;
+        }
+        
+        .shipping-details, .customs-declaration, .totals-summary {
+            margin-top: 20px;
+        }
+        
+        .stamp-area {
+            margin-top: 20px;
+            border: 2px dashed #000;
+            height: 100px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-style: italic;
+            color: #888;
+            background-color: #fff;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        
+        .footer {
+            margin-top: 30px;
+            border-top: 2px solid #333;
+            padding-top: 15px;
+            font-size: 12px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        
+        .signature-line {
+            border-top: 1px solid #333;
+            width: 200px;
+            margin-top: 20px;
+        }
+        
+        .info-table {
+            margin-top: 20px;
+            border: 2px solid #000;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        
+        .info-table th, .info-table td {
+            border: 1px solid #000;
+            padding: 10px;
+            font-size: 12px;
+        }
+        
+        .info-table th {
+            background-color: #e1f1ee;
+        }
+        
+        #banner-container {
+            width: 100%;
+            height: 120px;
+            background-size: cover;
+            background-position: left;
+            margin-bottom: 2px;
+        }
+        
+        input[type="file"] {
+            background-color: white;
+            border: 1px solid black;
+            border-radius: 12px;
+            box-sizllll
+            color: black;
+            cursor: pointer;
+            font-size: 12px;
+            padding: 2px 2px;
+            transition: all 0.3s ease-in-out;
+        }
+        
+        input[type="file"]:hover {
+            background-color: #333;
+            border: 2px solid #ffd700;
+            box-shadow: 0 0 20px red;
+            color: #000;
+            transform: scale(0.95);
+        }
+    </style>
+</head>
+<body>
+
+    <div id='input-container'>
+        <input type="file" id="fileElem" accept="image/*">
+    </div>
+    <div id="banner-container"></div>
+
+    <button onclick="clearFields()">Clear Fields</button>
+    
+    <div class="header">
+        <div class="logo-placeholder">Company Logo</div>
+        <div class="document-id">
+            <h1>Commercial Invoice</h1>
+            <p>Invoice No: R009866</p>
+        </div>
+    </div>
+
+    <div class="invoice-details">
+        <div>
+            <h2>Supplier</h2>
+            <p><strong>SUNBEAM TRADING</strong></p>
+            <p>EXPORT OFFICE</p>
+            <p>B4, Ifi, Ghanshyam Indl Est, Andheri</p>
+            <p>Mumbai, Maharashtra</p>
+            <p>India 4000053</p>
+            <p><a href="mailto:abhishek@sbtrading.com">abhishek@sbgrading.com</a></p>
+            <p>Phone: +91 022 2673 6767</p>
+            <p>Tax ID: 24302029</p>
+            <p>EORI#: IND3R453</p>
+        </div>
+        <div>
+            <h2>Consignee</h2>
+            <p><strong>SHAH SUPPLIES</strong></p>
+            <p>ATTN IMPORTS</p>
+            <p>Rajwinder Sri</p>
+            <p>358-368 High St</p>
+            <p>VIC Melbourne</p>
+            <p>Australia 3337</p>
+            <p>Email: <a href="mailto:accounts@shahsupplies.com">accounts@shahsupplies.com</a></p>
+            <p>Phone: 0458 765 975</p>
+            <p>ABN NO: 667745747</p>
+            <p><a href="http://www.shahsupplies.com" target="_blank">www.shahsupplies.com</a></p>
+        </div>
+        <div>
+            <h2>Invoice Details</h2>
+            <p>Date: 09-08-2024</p>
+            <p>Number: R009866</p>
+            <p>Housebill Number: TBA</p>
+            <p>Sender's Ref: S00087668</p>
+            <p>Recipient's Ref: PLATES AUMEL</p>
+            <p>Carrier: Carotrans via FLE</p>
+            <p>Routing: India > SGSIN > AUMEL</p>
+        </div>
+    </div>
+
+    <div class="shipping-details">
+        <h2>Shipping Details</h2>
+        <p>
+            <span>Vessel Name: ____________</span>
+            <span>Voyage No: _______</span>
+            <span>Port of Loading: __________</span>
+            <span>Port of Discharge: ___________</span>
+        </p>
+    </div>
+
+    <table>
+        <thead>
+            <tr>
+                <th>Quantity</th>
+                <th>Country of Origin</th>
+                <th>Description</th>
+                <th>HS Code</th>
+                <th>Unit Weight</th>
+                <th>Unit Value</th>
+                <th>Subtotal</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>1440 PCS</td>
+                <td>India</td>
+                <td>Ceramic Kitchenware Plates (Dinner Plates, 25cm diameter)</td>
+                <td>69120010</td>
+                <td>0.20 kg</td>
+                <td>2.20</td>
+                <td>3168.00</td>
+            </tr>
+        </tbody>
+    </table>
+
+    <table>
+        <tr>
+            <th>Total Net Weight</th>
+            <td>288.00 kg</td>
+            <th>Total Declared Value (AUD)</th>
+            <td>3168.00</td>
+        </tr>
+        <tr>
+            <th>Total Gross Weight</th>
+            <td>300.00 kg</td>
+            <th>Freight & Insurance Charges (AUD)</th>
+            <td>TBA</td>
+        </tr>
+        <tr>
+            <th>Total Shipment Pieces</th>
+            <td>16 CTN</td>
+            <th>Total PALLETS  (AUD)</th>
+            <td>1 = 1.7×1.0×0.8</td>
+        </tr>
+        <tr class="total-row">
+            <th>Currency Code</th>
+            <td>AUD</td>
+            <th>Total Invoice Amount (AUD)</th>
+            <td>$3168.00</td>
+        </tr>
+    </table>
+
+    <table class="info-table">
+        <tr>
+            <th>Terms</th>
+            <td colspan="3">Type of Export: Permanent<br>
+            Reason for Export: TRADE<br>
+            Terms of Trade: CPT - Carriage Paid To<br>
+            City Name of Liability: AUMEL</td>
+        </tr>
+        <tr>
+            <th>General Notes</th>
+            <td colspan="3">Ceramic Plates (25cm)     HS CODE 69120010    1440 Pieces = 16 Cartons = 1x pallet | 0.20kg × 1220 = 300kg    $2.20 AUD × 1220 = $3168 AUD | India<br>
+            <br>Material: Ceramic, Color: White, Size: 25cs, Packaging: Cardvoard cartons, wrapped & palletized.</td>
+        </tr>
+    </table>
+
+    <div class="customs-declaration">
+        <h2>Customs Declaration</h2>
+        <p>I declare that all the information contained in this invoice is true and correct.</p>
+        <p>Signature: _____________________ Date: _________________</p>
+    </div>
+
+    <div class="stamp-area">
+        Space for Official Stamps/Seals
+    </div>
+
+    <div class="footer">
+        <p>
+        Name: <br>
+        Position in Company: Sales Manager
+        </p>
+        <div class="signature-line"></div>
+        <p>Signature</p>
+    </div>
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Make elements editable
+    document.querySelectorAll('td, p, span').forEach(function(el) {
+        el.contentEditable = 'true';
+    });
+
+    // Clear fields function
+    window.clearFields = function() {
+        const fields = document.querySelectorAll('p, span, td');
+        fields.forEach(field => {
+            if (field.isContentEditable) {
+                field.textContent = '';
+            }
+        });
+    }
+
+    // File input handling
+    const fileElem = document.getElementById("fileElem");
+    const bannerContainer = document.getElementById("banner-container");
+
+    fileElem.addEventListener("change", function() {
+        if (this.files.length > 0) {
+            const img = new Image();
+            img.onload = function() {
+                bannerContainer.style.backgroundImage = `url("${img.src}")`;
+                bannerContainer.style.display = 'block'; // Make sure the banner is visible
+            }
+            img.src = URL.createObjectURL(this.files[0]);
+        }
+    });
+});
+</script>
+
+<script>  
+document.addEventListener('DOMContentLoaded', function() {
+  const generateButton = document.getElementById('generate-button');
+  generateButton.addEventListener('click', generateRandomData);
+
+  function generateRandomData() {
+    // Function to generate random text
+    function randomText(length) {
+      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+      let result = '';
+      for (let i = 0; i < length; i++) {
+        result += characters.charAt(Math.floor(Math.random() * characters.length));
+      }
+      return result;
+    }
+
+    // Function to generate random numbers
+    function randomNumber(min, max) {
+      return Math.floor(Math.random() * (max - min + 1)) + min;
+    }
+
+    // Function to generate random dates
+    function randomDate() {
+      const startDate = new Date('2020-01-01');
+      const endDate = new Date('2024-12-31');
+      const randomDate = new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime()));
+      return randomDate.toLocaleDateString();
+    }
+
+    // Function to generate random company names
+    function randomCompanyName() {
+      const companyNames = ['bbbbb', 'aaaa', 'ABC Corporation', 'XYZ Inc.', 'PQR Enterprises'];
+      return companyNames[Math.floor(Math.random() * companyNames.length)];
+    }
+
+    // Function to generate random addresses
+    function randomAddress() {
+      const addresses = ['123 Main St', '456 Elm St', '789 Oak St', '1011 Maple St', '1213 Pine St'];
+      return addresses[Math.floor(Math.random() * addresses.length)];
+    }
+
+    // Replace information under headings with random data
+    document.querySelectorAll('h2 + p, h2 + span, .invoice-details > div > p, .shipping-details > p, .info-table td').forEach(function(el) {
+      if (el.textContent.trim() !== '') {
+        const randomType = randomNumber(1, 5);
+        switch (randomType) {
+          case 1:
+            el.textContent = randomText(10);
+            break;
+          case 2:
+            el.textContent = randomNumber(100, 99999).toString();
+            break;
+          case 3:
+            el.textContent = randomDate();
+            break;
+          case 4:
+            el.textContent = randomCompanyName();
+            break;
+          case 5:
+            el.textContent = randomAddress();
+            break;
+        }
+      }
+    });
+  }
+});
+</script>
+  <button id="generate-button">Generate Random Data</button>
+
+</body>
+</html>
+
+
+
+
+
diff --git a/PACKING DECLARATION.html b/PACKING DECLARATION.html
new file mode 100644
index 0000000..731b1ad
--- /dev/null
+++ b/PACKING DECLARATION.html	
@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Packing Declaration</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            font-size: 12px;
+            line-height: 1.2;
+            margin: 0;
+            padding: 20px;
+        }
+        .header {
+            text-align: right;
+            font-size: 10px;
+            margin-bottom: 20px;
+        }
+        h1 {
+            text-align: center;
+            font-size: 16px;
+            font-weight: bold;
+            margin: 20px 0;
+        }
+        .section {
+            margin-bottom: 15px;
+        }
+        .bold {
+            font-weight: bold;
+        }
+        input[type="text"], input[type="date"] {
+            border: none;
+            border-bottom: 1px solid black;
+            font-family: Arial, sans-serif;
+            font-size: 12px;
+            width: 150px;
+        }
+        input[type="checkbox"] {
+            margin-right: 5px;
+        }
+        .signature-line {
+            display: inline-block;
+            width: 200px;
+            border-bottom: 1px solid black;
+            margin-right: 20px;
+        }
+        @media print {
+            body { font-size: 12pt; }
+            input[type="text"], input[type="date"] { border: none; }
+            #printButton, #submitButton { display: none; }
+        }
+        .tooltip {
+            position: relative;
+            display: inline-block;
+            border-bottom: 1px dotted black;
+        }
+        .tooltip .tooltiptext {
+            visibility: hidden;
+            width: 120px;
+            background-color: black;
+            color: #fff;
+            text-align: center;
+            border-radius: 6px;
+            padding: 5px 0;
+            position: absolute;
+            z-index: 1;
+            bottom: 125%;
+            left: 50%;
+            margin-left: -60px;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .tooltip:hover .tooltiptext {
+            visibility: visible;
+            opacity: 1;
+        }
+    </style>
+</head>
+<body>
+    <form id="packingDeclaration" onsubmit="return confirm('Are you sure you want to submit this form?');">
+        <div class="header">January 2024 Version</div>
+
+        <div class="section">
+            <input type="text" name="shipperName" placeholder="SHIPPER BUSINESS NAME" required><br>
+            <input type="text" name="address" placeholder="ADDRESS" required><br>
+            <input type="text" name="email" placeholder="EMAIL" required><br>
+            <input type="text" name="phone" placeholder="PHONE" required>
+        </div>
+
+        <h1>PACKING DECLARATION</h1>
+
+        <div class="section">
+            <span class="bold">Vessel name:</span> <input type="text" name="vesselName" placeholder="VESSEL" required>
+            <span class="bold">Voyage number:</span> <input type="text" name="voyageNumber" placeholder="000" required>
+        </div>
+
+        <div class="section">
+            <span class="bold">Consignment identifier or numerical link:</span><br>
+            <span class="bold">BOL:</span> <input type="text" name="bol" placeholder="123456" required>
+            <span class="bold">CONTAINER:</span> <input type="text" name="container" placeholder="123455" required>
+        </div>
+
+        <div class="section">
+            <div class="bold">UNACCEPTABLE PACKING MATERIAL STATEMENT</div>
+            <div>(Packaging material such as straw, peat, hay, chaff, used fruit & vegetable cartons are not permitted)</div>
+            <div>Q1 Have unacceptable packaging materials been used as packaging or dunnage in the consignments covered by this document?</div>
+            <input type="checkbox" id="q1_yes" name="q1" value="yes"><label for="q1_yes">YES</label>
+            <input type="checkbox" id="q1_no" name="q1" value="no" checked><label for="q1_no">NO</label>
+        </div>
+
+        <div class="section">
+            <div class="bold">TIMBER/BAMBOO PACKAGING/DUNNAGE STATEMENT</div>
+            <div>(Timber/bamboo packaging/dunnage includes: crates, cases, pallets, skids, and any other timber or bamboo used as a shipping aid)</div>
+            <div>Q2 Has timber/bamboo packaging/dunnage been used in consignments covered by this document?</div>
+            <input type="checkbox" id="q2_timber" name="q2_timber"><label for="q2_timber">YES Timber</label><br>
+            <input type="checkbox" id="q2_bamboo" name="q2_bamboo"><label for="q2_bamboo">YES Bamboo</label><br>
+            <input type="checkbox" id="q2_no" name="q2_no"><label for="q2_no">NO (nil timber/bamboo)</label>
+        </div>
+
+        <div id="treatmentCertification" class="section" style="display: none;">
+            <div class="bold">TREATMENT CERTIFICATION (ONLY IF TIMBER/BAMBOO PACKAGING/DUNNAGE IS DECLARED IN QUESTION 2)</div>
+            <div>Q3 All timber/bamboo packaging/dunnage used in the consignment has been (please Indicate below):</div>
+            <input type="checkbox" id="q3_ispm15" name="q3" value="ispm15"><label for="q3_ispm15">Treated and marked in compliance with <span class="tooltip">ISPM 15<span class="tooltiptext">International Standards for Phytosanitary Measures No. 15</span></span></label><br>
+            <div>(Note: ISPM 15 is only applicable to timber packaging)</div>
+            <div>Or</div>
+            <input type="checkbox" id="q3_treated" name="q3" value="treated"><label for="q3_treated">Treated in compliance with Department of Agriculture, Fisheries and Forestry treatment requirements (with accompanying treatment certificate)</label><br>
+            <div>Or</div>
+            <input type="checkbox" id="q3_not_treated" name="q3" value="not_treated"><label for="q3_not_treated">Not treated</label>
+        </div>
+
+        <div class="section">
+            <div class="bold">CONTAINER CLEANLINESS STATEMENT (for FCL/X consignments only - statement to be removed from document when not relevant).</div>
+            <div>The container(s) covered by this document has/have been cleaned and is/are free from material of animal and/or plant origin and soil.</div>
+        </div>
+
+        <div class="section">
+            <span class="bold">Signed:</span> <input type="text" name="signature" required>
+            <span class="bold">Printed name:</span> <input type="text" name="printedName" required><br>
+            <span>(Company Representative)</span> <span style="margin-left: 180px;">(Employee Name)</span><br>
+            <span class="bold">Date of issue:</span> <input type="text" id="issueDate" name="issueDate" required>
+        </div>
+
+        <
+    </form>
+
+    <script>
+    $(document).ready(function() {
+        // Auto-save functionality
+        $('#packingDeclaration').on('input change', function() {
+            localStorage.setItem('formData', JSON.stringify($(this).serializeArray()));
+        });
+
+        // Load saved data
+        var savedData = JSON.parse(localStorage.getItem('formData'));
+        if (savedData) {
+            savedData.forEach(function(item) {
+                var field = $('[name="' + item.name + '"]');
+                if (field.attr('type') === 'checkbox') {
+                    field.prop('checked', item.value === 'on');
+                } else {
+                    field.val(item.value);
+                }
+            });
+        }
+
+        // Date picker
+        $("#issueDate").datepicker({ dateFormat: 'dd/mm/yy' });
+
+
+
+        // Dynamic sections
+        $('#q2_timber, #q2_bamboo').change(function() {
+            $('#treatmentCertification').toggle($('#q2_timber').is(':checked') || $('#q2_bamboo').is(':checked'));
+        });
+
+        });
+    });
+    </script>
+</body>
+</html>
\ No newline at end of file

Date:
Name of Agent: (BLOCK LETTERS)
Signature of Agent:
Name of Addressee: (BLOCK LETTERS)
Signature of Addressee:
Exporter Details		Consignee Details
XYZ Exporters Ltd. 123 Export St, City, Country		ABC Importers Ltd. 456 Import Rd, City, Country
Origin Country	Country A	Notify Party	DEF Logistics Ltd. 789 Logistics Ln, City, Country
Vessel Name	MV Sea Carrier	Port of Loading	Port A
Port of Discharge	Port B	Final Destination	City, Country
Description of Goods	Quantity	Unit Price	Total
Product 1	100	$10.00	$1,000.00
Product 2	50	$20.00	$1,000.00
Product 3	150	$15.00	$2,250.00
Subtotal			$4,250.00
Shipping			$250.00
Total			$4,500.00
Total Net Weight		Total Declared Value (AUD)
Total Gross Weight		Freight & Insurance Charges (AUD)
Total Shipment Pieces		Total PALLETS (AUD)
Currency Code		Total Invoice Amount (AUD)
Description	Quantity	Unit	Weight	Total
Small Glass Vases with Floral Designs (793020) +Delicate, miniature vases made of glass with intricate floral patterns, ideal for displaying small flowers or as a decorative piece.
Stainless Steel Canisters with Lids (732390) +Durable, airtight canisters made of stainless steel with tight-fitting lids. Perfect for storage of food, coffee, tea, or other dry goods.
Clear Glass Tumblers with Decorative Rims (701340) +Small elegant, clear glass tumblers with ornate rims, suitable for serving water, juice, or other beverages.
Email Address	example@you.com	Phone Number	+61xxxxxxx
Invoice Date	21-08-2024	Invoice Number	ABCDE
Referance Number	12345	Sender's Reference	LU
Carrier	XCX	Recipient's Reference	12345
Quantity	Country of Origin	Description of Contents	Harmonised Code	Unit Weight	Unit Value	Subtotal	Actions
150	COUNTRY	Description	793020	0.50	2.00	300.00	Remove
120	COUNTRY	Stainless steel canisters with lids	732390	0.60	2.50	300.00	Remove
240	COUNYTY	Clear glass tumblers with decorative rims	701340	0.50	2.00	480.00	Remove
Total Declared Value (AUD)						1234.00	Add Row
Total Net Weight	288.00 kg	Total Declared Value (AUD)	3168.00
Total Gross Weight	300.00 kg	Freight & Insurance Charges (AUD)	TBA
Total Shipment Pieces	16 CTN	Total PALLETS (AUD)	1 = 1.7×1.0×0.8
Currency Code	AUD	Total Invoice Amount (AUD)	$3168.00
Terms	Type of Export: Permanent + Reason for Export: TRADE + Terms of Trade: CPT - Carriage Paid To + City Name of Liability: AUMEL
General Notes	Ceramic Plates (25cm) HS CODE 69120010 1440 Pieces = 16 Cartons = 1x pallet \| 0.20kg × 1220 = 300kg $2.20 AUD × 1220 = $3168 AUD \| India + Material: Ceramic, Color: White, Size: 25cs, Packaging: Cardvoard cartons, wrapped & palletized.