Spaces:
Running
Running
| <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 flex-col lg:flex-row container mx-auto gap-4"> | |
| <div id="form-container" class="w-full lg:w-1/2"> | |
| <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 rounded-lg" | |
| > | |
| <legend | |
| class="text-lg font-semibold mb-2 text-gray-700" | |
| > | |
| 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 focus:outline-none focus:ring-2 focus:ring-blue-500" | |
| /> | |
| <textarea | |
| id="company-address" | |
| name="company-address" | |
| placeholder="Address" | |
| required | |
| class="w-full p-2 border border-gray-300 rounded mb-2 focus:outline-none focus:ring-2 focus:ring-blue-500" | |
| ></textarea> | |
| <input | |
| type="text" | |
| id="company-phone" | |
| name="company-phone" | |
| placeholder="Phone" | |
| class="w-full p-2 border border-gray-300 rounded mb-2 focus:outline-none focus:ring-2 focus:ring-blue-500" | |
| /> | |
| <input | |
| type="email" | |
| id="company-email" | |
| name="company-email" | |
| placeholder="Email" | |
| class="w-full p-2 border border-gray-300 rounded mb-2 focus:outline-none focus:ring-2 focus:ring-blue-500" | |
| /> | |
| <input | |
| type="text" | |
| id="company-gstin" | |
| name="company-gstin" | |
| placeholder="GSTIN" | |
| class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" | |
| /> | |
| </fieldset> | |
| <fieldset | |
| class="border border-gray-300 p-4 mb-4 rounded-lg" | |
| > | |
| <legend | |
| class="text-lg font-semibold mb-2 text-gray-700" | |
| > | |
| 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 focus:outline-none focus:ring-2 focus:ring-blue-500" | |
| /> | |
| <textarea | |
| id="customer-address" | |
| name="customer-address" | |
| placeholder="Address" | |
| required | |
| class="w-full p-2 border border-gray-300 rounded mb-2 focus:outline-none focus:ring-2 focus:ring-blue-500" | |
| ></textarea> | |
| <input | |
| type="text" | |
| id="customer-phone" | |
| name="customer-phone" | |
| placeholder="Phone" | |
| class="w-full p-2 border border-gray-300 rounded mb-2 focus:outline-none focus:ring-2 focus:ring-blue-500" | |
| /> | |
| <input | |
| type="email" | |
| id="customer-email" | |
| name="customer-email" | |
| placeholder="Email" | |
| class="w-full p-2 border border-gray-300 rounded mb-2 focus:outline-none focus:ring-2 focus:ring-blue-500" | |
| /> | |
| <input | |
| type="text" | |
| id="customer-gstin" | |
| name="customer-gstin" | |
| placeholder="GSTIN" | |
| class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" | |
| /> | |
| </fieldset> | |
| <fieldset | |
| class="border border-gray-300 p-4 mb-4 rounded-lg" | |
| > | |
| <legend | |
| class="text-lg font-semibold mb-2 text-gray-700" | |
| > | |
| 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 focus:outline-none focus:ring-2 focus:ring-blue-500" | |
| /> | |
| <input | |
| type="date" | |
| id="quotation-date" | |
| name="quotation-date" | |
| required | |
| class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" | |
| /> | |
| </fieldset> | |
| <fieldset | |
| class="border border-gray-300 p-4 mb-4 rounded-lg" | |
| > | |
| <legend | |
| class="text-lg font-semibold mb-2 text-gray-700" | |
| > | |
| Items | |
| </legend> | |
| <div | |
| class="bg-blue-50 border border-blue-200 rounded p-2 mb-3 text-xs text-blue-800" | |
| > | |
| <strong>💡 Tips:</strong> | |
| <ul class="list-disc list-inside mt-1 space-y-0.5"> | |
| <li> | |
| Use | |
| <kbd | |
| class="bg-gray-200 px-1 rounded text-xs" | |
| >Enter</kbd | |
| > | |
| to move to the next field or add a new row | |
| </li> | |
| <li> | |
| Use | |
| <kbd | |
| class="bg-gray-200 px-1 rounded text-xs" | |
| >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> | |
| <!-- Items Container --> | |
| <div id="items-container" class="space-y-4"> | |
| <!-- Items will be dynamically added here --> | |
| </div> | |
| <div class="flex justify-center mt-4"> | |
| <button | |
| type="button" | |
| id="add-item" | |
| class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md flex items-center gap-2 shadow-sm" | |
| > | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| class="h-4 w-4" | |
| viewBox="0 0 20 20" | |
| fill="currentColor" | |
| > | |
| <path | |
| fill-rule="evenodd" | |
| d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" | |
| clip-rule="evenodd" | |
| /> | |
| </svg> | |
| Add Another Item | |
| </button> | |
| </div> | |
| </fieldset> | |
| <fieldset | |
| class="border border-gray-300 p-4 mb-4 rounded-lg" | |
| > | |
| <legend | |
| class="text-lg font-semibold mb-2 text-gray-700" | |
| > | |
| 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 focus:outline-none focus:ring-2 focus:ring-blue-500" | |
| /></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 focus:outline-none focus:ring-2 focus:ring-blue-500" | |
| /></label> | |
| </fieldset> | |
| <fieldset | |
| class="border border-gray-300 p-4 mb-4 rounded-lg" | |
| > | |
| <legend | |
| class="text-lg font-semibold mb-2 text-gray-700" | |
| > | |
| 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 focus:outline-none focus:ring-2 focus:ring-blue-500" | |
| /> | |
| <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 focus:outline-none focus:ring-2 focus:ring-blue-500" | |
| /> | |
| <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 focus:outline-none focus:ring-2 focus:ring-blue-500" | |
| /> | |
| <input | |
| type="text" | |
| id="bank-branch" | |
| name="bank-branch" | |
| placeholder="Branch" | |
| required | |
| class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" | |
| /> | |
| </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-lg shadow-md transition-all duration-200 ease-in-out transform hover:scale-105" | |
| > | |
| Generate Quotation | |
| </button> | |
| <button | |
| type="button" | |
| id="clear-data" | |
| class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-lg shadow-md transition-all duration-200 ease-in-out transform hover:scale-105" | |
| > | |
| Clear Saved Data | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <div id="preview-container" class="w-full lg:w-1/2 hidden lg:block"> | |
| <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" | |
| class="hidden fixed inset-0 bg-gray-900 bg-opacity-75 z-50 overflow-y-auto" | |
| > | |
| <div class="flex items-center justify-center min-h-screen"> | |
| <div | |
| class="bg-white p-8 rounded-lg max-w-4xl w-full mx-auto my-8 relative" | |
| > | |
| <button | |
| id="close-quotation" | |
| class="absolute top-4 right-4 text-gray-500 hover:text-gray-800" | |
| > | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| class="h-6 w-6" | |
| fill="none" | |
| viewBox="0 0 24 24" | |
| stroke="currentColor" | |
| > | |
| <path | |
| stroke-linecap="round" | |
| stroke-linejoin="round" | |
| stroke-width="2" | |
| d="M6 18L18 6M6 6l12 12" | |
| /> | |
| </svg> | |
| </button> | |
| <div id="quotation-content"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Data Management Status Modal --> | |
| <div | |
| id="status-modal" | |
| class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden items-center justify-center z-50" | |
| > | |
| <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> | |