Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Quotation Generator</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <h1 class="text-3xl font-bold text-center my-8" id="top-header">Quotation Generator</h1> | |
| <div class="flex container mx-auto"> | |
| <div id="form-container" class="w-1/2 pr-4"> | |
| <form id="quotation-form" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"> | |
| <fieldset class="border border-gray-300 p-4 mb-4"> | |
| <legend class="text-lg font-semibold mb-2">Your Company Details</legend> | |
| <input type="text" id="company-name" name="company-name" placeholder="Company Name" required | |
| class="w-full p-2 border border-gray-300 rounded mb-2"> | |
| <textarea id="company-address" name="company-address" placeholder="Address" required | |
| class="w-full p-2 border border-gray-300 rounded mb-2"></textarea> | |
| <input type="text" id="company-phone" name="company-phone" placeholder="Phone" | |
| class="w-full p-2 border border-gray-300 rounded mb-2"> | |
| <input type="email" id="company-email" name="company-email" placeholder="Email" | |
| class="w-full p-2 border border-gray-300 rounded mb-2"> | |
| <input type="text" id="company-gstin" name="company-gstin" placeholder="GSTIN" | |
| class="w-full p-2 border border-gray-300 rounded"> | |
| </fieldset> | |
| <fieldset class="border border-gray-300 p-4 mb-4"> | |
| <legend class="text-lg font-semibold mb-2">Customer Company Details</legend> | |
| <input type="text" id="customer-name" name="customer-name" placeholder="Customer Name" required | |
| class="w-full p-2 border border-gray-300 rounded mb-2"> | |
| <textarea id="customer-address" name="customer-address" placeholder="Address" required | |
| class="w-full p-2 border border-gray-300 rounded mb-2"></textarea> | |
| <input type="text" id="customer-phone" name="customer-phone" placeholder="Phone" | |
| class="w-full p-2 border border-gray-300 rounded mb-2"> | |
| <input type="email" id="customer-email" name="customer-email" placeholder="Email" | |
| class="w-full p-2 border border-gray-300 rounded mb-2"> | |
| <input type="text" id="customer-gstin" name="customer-gstin" placeholder="GSTIN" | |
| class="w-full p-2 border border-gray-300 rounded"> | |
| </fieldset> | |
| <fieldset class="border border-gray-300 p-4 mb-4"> | |
| <legend class="text-lg font-semibold mb-2">Quotation Details</legend> | |
| <input type="text" id="quotation-number" name="quotation-number" placeholder="Quotation Number" required | |
| class="w-full p-2 border border-gray-300 rounded mb-2"> | |
| <input type="date" id="quotation-date" name="quotation-date" required | |
| class="w-full p-2 border border-gray-300 rounded"> | |
| </fieldset> | |
| <fieldset class="border border-gray-300 p-4 mb-4"> | |
| <legend class="text-lg font-semibold mb-2">Items</legend> | |
| <div class="bg-blue-50 border border-blue-200 rounded p-3 mb-4 text-sm text-blue-800"> | |
| <strong>💡 Tips:</strong> | |
| <ul class="list-disc list-inside mt-1 space-y-1"> | |
| <li>Use <kbd class="bg-gray-200 px-1 rounded">Enter</kbd> to move to the next field or add a new row</li> | |
| <li>Use <kbd class="bg-gray-200 px-1 rounded">Ctrl+I</kbd> to quickly add a new item</li> | |
| <li>Amounts are calculated automatically as you type</li> | |
| <li>At least one item with description is required</li> | |
| </ul> | |
| </div> | |
| <table id="items-table" class="w-full mb-2"> | |
| <thead> | |
| <tr class="bg-gray-200"> | |
| <th class="p-2 border border-gray-300">S.No</th> | |
| <th class="p-2 border border-gray-300">Description *</th> | |
| <th class="p-2 border border-gray-300">HSN Code</th> | |
| <th class="p-2 border border-gray-300">Qty *</th> | |
| <th class="p-2 border border-gray-300">Unit Price *</th> | |
| <th class="p-2 border border-gray-300">Discount (%)</th> | |
| <th class="p-2 border border-gray-300">Amount</th> | |
| <th class="p-2 border border-gray-300">Action</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| </tbody> | |
| </table> | |
| <button type="button" id="add-item" | |
| class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add Another Item</button> | |
| </fieldset> | |
| <fieldset class="border border-gray-300 p-4 mb-4"> | |
| <legend class="text-lg font-semibold mb-2">Additional Charges</legend> | |
| <label class="block mb-2">IGST (%)<input type="number" id="igst-rate" name="igst-rate" value="0" min="0" | |
| class="w-full p-2 border border-gray-300 rounded"></label> | |
| <label class="block">Freight Charges<input type="number" id="freight-charges" name="freight-charges" value="0" | |
| min="0" class="w-full p-2 border border-gray-300 rounded"></label> | |
| </fieldset> | |
| <fieldset class="border border-gray-300 p-4 mb-4"> | |
| <legend class="text-lg font-semibold mb-2">Bank Details</legend> | |
| <input type="text" id="bank-name" name="bank-name" placeholder="Bank Name" required | |
| class="w-full p-2 border border-gray-300 rounded mb-2"> | |
| <input type="text" id="bank-account" name="bank-account" placeholder="Account Number" required | |
| class="w-full p-2 border border-gray-300 rounded mb-2"> | |
| <input type="text" id="bank-ifsc" name="bank-ifsc" placeholder="IFSC Code" required | |
| class="w-full p-2 border border-gray-300 rounded mb-2"> | |
| <input type="text" id="bank-branch" name="bank-branch" placeholder="Branch" required | |
| class="w-full p-2 border border-gray-300 rounded"> | |
| </fieldset> | |
| <button type="submit" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Generate | |
| Quotation</button> | |
| </form> | |
| </div> | |
| <div id="preview-container" class="w-1/2 pl-4"> | |
| <div id="quotation-preview" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"> | |
| <h2 class="text-2xl font-bold text-center mb-4">Quotation Preview</h2> | |
| <div id="preview-content"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="quotation-output" style="display:none;"></div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> | |