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> | |
| <div class="flex justify-between items-center"> | |
| <button | |
| type="submit" | |
| class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded" | |
| > | |
| Generate Quotation | |
| </button> | |
| <div class="space-x-2"> | |
| <button | |
| type="button" | |
| id="clear-data" | |
| class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded" | |
| > | |
| Clear Saved Data | |
| </button> | |
| <button | |
| type="button" | |
| id="show-storage-info" | |
| class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded" | |
| > | |
| Storage Info | |
| </button> | |
| </div> | |
| </div> | |
| </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> | |
| <!-- Storage Information Panel --> | |
| <div | |
| id="storage-info-panel" | |
| class="bg-white shadow-md rounded px-6 pt-4 pb-6 mb-4 hidden" | |
| > | |
| <h3 class="text-lg font-bold mb-3"> | |
| 💾 Storage Information | |
| </h3> | |
| <div class="text-sm space-y-2"> | |
| <div class="bg-blue-50 p-3 rounded"> | |
| <h4 class="font-semibold text-blue-800"> | |
| Company Details | |
| </h4> | |
| <p | |
| id="company-storage-status" | |
| class="text-blue-600" | |
| > | |
| Not saved | |
| </p> | |
| </div> | |
| <div class="bg-green-50 p-3 rounded"> | |
| <h4 class="font-semibold text-green-800"> | |
| Bank Details | |
| </h4> | |
| <p id="bank-storage-status" class="text-green-600"> | |
| Not saved | |
| </p> | |
| </div> | |
| <div class="bg-yellow-50 p-3 rounded"> | |
| <h4 class="font-semibold text-yellow-800"> | |
| Customer Details | |
| </h4> | |
| <p | |
| id="customer-storage-status" | |
| class="text-yellow-600" | |
| > | |
| Not saved (Session only) | |
| </p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded mt-3"> | |
| <h4 class="font-semibold text-gray-800"> | |
| ⚠️ Security Notice | |
| </h4> | |
| <p class="text-gray-600 text-xs"> | |
| Data is stored in your browser's localStorage. | |
| For maximum security: | |
| <br />• Use private/incognito browsing <br />• | |
| Clear data when done <br />• Don't use on shared | |
| computers | |
| </p> | |
| </div> | |
| </div> | |
| <button | |
| id="hide-storage-info" | |
| class="mt-4 bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg shadow-md transition-all duration-200 ease-in-out transform hover:scale-105" | |
| > | |
| Hide | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="quotation-output" style="display: none"></div> | |
| <!-- Data Management Status Modal --> | |
| <div | |
| id="status-modal" | |
| class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden items-center justify-center" | |
| > | |
| <div class="bg-white p-6 rounded-lg shadow-lg max-w-sm mx-auto"> | |
| <div id="modal-content" class="text-center"> | |
| <div id="modal-message" class="mb-4"></div> | |
| <button | |
| id="modal-close" | |
| class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg shadow-md transition-all duration-200 ease-in-out transform hover:scale-105" | |
| > | |
| OK | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="data-manager.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> | |