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> | |