fix: ui improvements

index.html

@@ -17,8 +17,12 @@
                     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">
+                    <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
@@ -58,8 +62,12 @@
                             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">
+                    <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
@@ -99,8 +107,12 @@
                             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">
+                    <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
@@ -119,25 +131,31 @@
                             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">
+                    <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-3 mb-4 text-sm text-blue-800"
+                            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-1">
+                            <ul class="list-disc list-inside mt-1 space-y-0.5">
                                 <li>
                                     Use
-                                    <kbd class="bg-gray-200 px-1 rounded"
+                                    <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"
+                                    <kbd
+                                        class="bg-gray-200 px-1 rounded text-xs"
                                         >Ctrl+I</kbd
                                     >
                                     to quickly add a new item
@@ -152,73 +170,38 @@
                                 </li>
                             </ul>
                         </div>
-                        <div class="overflow-x-auto">
-                            <table
-                                id="items-table"
-                                class="w-full mb-2 border-collapse"
+                        <!-- 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"
                             >
-                                <thead class="hidden lg:table-header-group">
-                                    <tr class="bg-gray-200">
-                                        <th
-                                            class="p-2 border border-gray-300 text-left text-sm font-semibold text-gray-700 w-16"
-                                        >
-                                            S.No
-                                        </th>
-                                        <th
-                                            class="p-2 border border-gray-300 text-left text-sm font-semibold text-gray-700 w-2/5"
-                                        >
-                                            Description *
-                                        </th>
-                                        <th
-                                            class="p-2 border border-gray-300 text-left text-sm font-semibold text-gray-700 w-24"
-                                        >
-                                            HSN Code
-                                        </th>
-                                        <th
-                                            class="p-2 border border-gray-300 text-left text-sm font-semibold text-gray-700 w-20"
-                                        >
-                                            Qty *
-                                        </th>
-                                        <th
-                                            class="p-2 border border-gray-300 text-left text-sm font-semibold text-gray-700 w-32"
-                                        >
-                                            Unit Price *
-                                        </th>
-                                        <th
-                                            class="p-2 border border-gray-300 text-left text-sm font-semibold text-gray-700 w-28"
-                                        >
-                                            Discount (%)
-                                        </th>
-                                        <th
-                                            class="p-2 border border-gray-300 text-left text-sm font-semibold text-gray-700 w-32"
-                                        >
-                                            Amount
-                                        </th>
-                                        <th
-                                            class="p-2 border border-gray-300 text-left text-sm font-semibold text-gray-700 w-24"
-                                        >
-                                            Action
-                                        </th>
-                                    </tr>
-                                </thead>
-                                <tbody
-                                    class="divide-y divide-gray-200 lg:table-row-group"
-                                ></tbody>
-                            </table>
+                                <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>
-                        <button
-                            type="button"
-                            id="add-item"
-                            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded flex items-center gap-2 mt-2"
-                        >
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" 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>
                     </fieldset>
-                    <fieldset class="border border-gray-300 p-4 mb-4 rounded-lg">
-                        <legend class="text-lg font-semibold mb-2 text-gray-700">
+                    <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"
@@ -240,8 +223,12 @@
                                 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">
+                    <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
@@ -318,11 +305,22 @@
                 <div
                     id="storage-info-panel"
                     class="absolute z-10 bg-white shadow-lg rounded-lg px-6 pt-4 pb-6 mb-4 hidden w-full max-w-md"
-                    style="top: 50px; right: 0;"
+                    style="top: 50px; right: 0"
                 >
                     <h3 class="text-lg font-bold mb-3 flex items-center gap-2">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.588-3.756z" />
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            class="h-6 w-6 text-gray-600"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"
+                                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.588-3.756z"
+                            />
                         </svg>
                         Storage Information
                     </h3>
@@ -358,9 +356,20 @@
                             </p>
                         </div>
                         <div class="bg-gray-100 p-3 rounded-lg mt-3">
-                            <h4 class="font-semibold text-gray-800 flex items-center gap-1">
-                                <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="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 3.001-1.742 3.001H4.42c-1.53 0-2.493-1.667-1.743-3.001l5.58-9.92zM10 13a1 1 0 110-2 1 1 0 010 2zm-1-8a1 1 0 00-1 1v3a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+                            <h4
+                                class="font-semibold text-gray-800 flex items-center gap-1"
+                            >
+                                <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="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 3.001-1.742 3.001H4.42c-1.53 0-2.493-1.667-1.743-3.001l5.58-9.92zM10 13a1 1 0 110-2 1 1 0 010 2zm-1-8a1 1 0 00-1 1v3a1 1 0 102 0V6a1 1 0 00-1-1z"
+                                        clip-rule="evenodd"
+                                    />
                                 </svg>
                                 Security Notice
                             </h4>
@@ -382,12 +391,31 @@
                 </div>
             </div>
         </div>
-        <div id="quotation-output" class="hidden fixed inset-0 bg-gray-900 bg-opacity-75 z-50 overflow-y-auto">
+        <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 shadow-2xl 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" />
+                <div
+                    class="bg-white p-8 rounded-lg shadow-2xl 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>

script.js

@@ -58,7 +58,7 @@ function numberToWords(num) {
 if (typeof document !== "undefined") {
     document.addEventListener("DOMContentLoaded", function () {
         const addItemBtn = document.getElementById("add-item");
-        const itemsTableBody = document.querySelector("#items-table tbody");
+        const itemsContainer = document.getElementById("items-container");
         const form = document.getElementById("quotation-form");
         const output = document.getElementById("quotation-output");
         const previewContent = document.getElementById("preview-content");
@@ -93,27 +93,29 @@ if (typeof document !== "undefined") {
                 branch: data.get("bank-branch"),
             };
             const items = [];
-            itemsTableBody.querySelectorAll("tr").forEach((row) => {
-                const desc = row.querySelector(".item-desc").value.trim();
+            itemsContainer.querySelectorAll(".item-card").forEach((card) => {
+                const desc = card.querySelector(".item-desc").value.trim();
                 if (desc) {
-                    // Only include rows with description
+                    // Only include cards with description
                     items.push({
                         description: desc,
-                        hsn: row.querySelector(".item-hsn").value,
+                        hsn: card.querySelector(".item-hsn").value,
                         qty:
-                            parseFloat(row.querySelector(".item-qty").value) ||
+                            parseFloat(card.querySelector(".item-qty").value) ||
                             0,
                         price:
                             parseFloat(
-                                row.querySelector(".item-price").value,
+                                card.querySelector(".item-price").value,
                             ) || 0,
                         discount:
                             parseFloat(
-                                row.querySelector(".item-discount").value,
+                                card.querySelector(".item-discount").value,
                             ) || 0,
                         amount:
                             parseFloat(
-                                row.querySelector(".item-amount").textContent,
+                                card
+                                    .querySelector(".item-amount")
+                                    .textContent.replace("₹", ""),
                             ) || 0,
                     });
                 }
@@ -263,76 +265,78 @@ if (typeof document !== "undefined") {
         }
 
         function updatePreview() {
+            const form = document.getElementById("quotation-form");
             const html = generateQuotationHTML(form);
             previewContent.innerHTML = html;
         }
 
         function updateSerialNumbers() {
-            itemsTableBody.querySelectorAll("tr").forEach((row, i) => {
-                row.querySelector(".item-slno").textContent = i + 1;
+            itemsContainer.querySelectorAll(".item-card").forEach((card, i) => {
+                card.querySelector(".item-slno").textContent = i + 1;
             });
         }
 
         function validateItemInput(input) {
             const value = input.value;
-            const type = input.type;
 
-            input.classList.remove(
-                "border-red-500",
-                "bg-red-100",
-                "border-green-500",
-            );
+            // Remove existing classes
+            input.classList.remove("border-red-500", "border-green-500");
 
-            if (type === "number" && value !== "") {
-                const num = parseFloat(value);
-                if (isNaN(num) || num < 0) {
-                    input.classList.add("border-red-500", "bg-red-100");
-                    return false;
-                } else {
-                    input.classList.add("border-green-500");
+            // Remove loading effect
+            setTimeout(() => {
+                if (input.classList.contains("item-desc")) {
+                    if (value.trim().length < 3) {
+                        input.classList.add("border-red-500");
+                        // Removed tooltip error display
+                    } else {
+                        input.classList.add("border-green-500");
+                        // Removed tooltip error display
+                    }
+                } else if (input.type === "number") {
+                    const numValue = parseFloat(value);
+                    if (isNaN(numValue) || numValue < 0) {
+                        input.classList.add("border-red-500");
+                        // Removed tooltip error display
+                    } else {
+                        input.classList.add("border-green-500");
+                        // Removed tooltip error display
+                    }
                 }
-            } else if (
-                type === "text" &&
-                input.hasAttribute("required") &&
-                value.trim() === ""
-            ) {
-                input.classList.add("border-red-500", "bg-red-100");
-                return false;
-            }
-
-            return true;
+            }, 50);
         }
 
         function handleKeyNavigation(event) {
             if (event.key === "Tab" || event.key === "Enter") {
-                const currentRow = event.target.closest("tr");
-                const inputs = Array.from(currentRow.querySelectorAll("input"));
+                const currentCard = event.target.closest(".item-card");
+                const inputs = Array.from(
+                    currentCard.querySelectorAll("input, textarea"),
+                );
                 const currentIndex = inputs.indexOf(event.target);
 
                 if (event.key === "Enter") {
                     event.preventDefault();
 
-                    // If we're at the last input in the row and it's the last row, add a new row
+                    // If we're at the last input in the card and it's the last card, add a new card
                     if (currentIndex === inputs.length - 1) {
-                        const allRows = Array.from(
-                            itemsTableBody.querySelectorAll("tr"),
+                        const allCards = Array.from(
+                            itemsContainer.querySelectorAll(".item-card"),
                         );
-                        const currentRowIndex = allRows.indexOf(currentRow);
+                        const currentCardIndex = allCards.indexOf(currentCard);
 
-                        if (currentRowIndex === allRows.length - 1) {
-                            // Last row - add new row and focus first input
+                        if (currentCardIndex === allCards.length - 1) {
+                            // Last card - add new card and focus first input
                             addItemRow();
                             setTimeout(() => {
-                                const newRow = itemsTableBody.lastElementChild;
-                                newRow.querySelector(".item-desc").focus();
+                                const newCard = itemsContainer.lastElementChild;
+                                newCard.querySelector(".item-desc").focus();
                             }, 50);
                         } else {
-                            // Not last row - focus next row's first input
-                            const nextRow = allRows[currentRowIndex + 1];
-                            nextRow.querySelector(".item-desc").focus();
+                            // Not last card - focus next card's first input
+                            const nextCard = allCards[currentCardIndex + 1];
+                            nextCard.querySelector(".item-desc").focus();
                         }
                     } else {
-                        // Move to next input in same row
+                        // Move to next input in same card
                         inputs[currentIndex + 1].focus();
                     }
                 }
@@ -340,54 +344,76 @@ if (typeof document !== "undefined") {
         }
 
         function addItemRow() {
-            const row = document.createElement("tr");
-            row.className =
-                "block lg:table-row border-b-2 lg:border-b-0 lg:border-gray-200";
-            row.innerHTML = `
-        <td class="item-slno p-2 border border-gray-300 text-center font-semibold text-gray-600 bg-gray-50 w-16 hidden lg:table-cell" data-label="S.No"></td>
-        <td class="p-2 border border-gray-300 block lg:table-cell" data-label="Description">
-          <div class="tooltip">
-            <input type="text" class="item-desc w-full p-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter item description" required>
-            <span class="tooltiptext">Describe the item or service being quoted</span>
-          </div>
-        </td>
-        <td class="p-2 border border-gray-300 block lg:table-cell" data-label="HSN Code">
-          <div class="tooltip">
-            <input type="text" class="item-hsn w-full p-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="HSN Code">
-            <span class="tooltiptext">Harmonized System of Nomenclature code for tax purposes</span>
-          </div>
-        </td>
-        <td class="p-2 border border-gray-300 block lg:table-cell" data-label="Qty">
-          <div class="tooltip">
-            <input type="number" class="item-qty w-full p-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" value="1" min="0" step="0.01" required>
-            <span class="tooltiptext">Quantity of items</span>
-          </div>
-        </td>
-        <td class="p-2 border border-gray-300 block lg:table-cell" data-label="Unit Price">
-          <div class="tooltip">
-            <input type="number" class="item-price w-full p-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" value="0" min="0" step="0.01" required>
-            <span class="tooltiptext">Price per unit before discount</span>
-          </div>
-        </td>
-        <td class="p-2 border border-gray-300 block lg:table-cell" data-label="Discount (%)">
-          <div class="tooltip">
-            <input type="number" class="item-discount w-full p-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" value="0" min="0" max="100" step="0.01" placeholder="0">
-            <span class="tooltiptext">Discount percentage (0-100)</span>
-          </div>
-        </td>
-        <td class="item-amount p-2 border border-gray-300 text-right font-semibold text-green-700 bg-green-50 font-mono block lg:table-cell" data-label="Amount">0.00</td>
-        <td class="p-2 border border-gray-300 block lg:table-cell" data-label="Action">
-          <button type="button" class="remove-item bg-red-500 hover:bg-red-600 text-white text-xs font-bold py-1 px-2 rounded flex items-center gap-1" title="Remove this item">
-            <span>×</span> Remove
-          </button>
-        </td>
-      `;
-
-            itemsTableBody.appendChild(row);
+            const card = document.createElement("div");
+            card.className =
+                "item-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm";
+            card.innerHTML = `
+                <!-- Unified Card Layout for All Screen Sizes -->
+                <div class="space-y-4">
+                    <div class="flex items-center justify-between border-b border-gray-100 pb-3">
+                        <div class="flex items-center gap-2">
+                            <span class="item-slno bg-blue-100 text-blue-800 text-sm font-semibold px-2 py-1 rounded-full min-w-[1.5rem] text-center"></span>
+                            <span class="text-base font-medium text-gray-800">Item Details</span>
+                        </div>
+                        <button type="button" class="remove-item bg-red-500 hover:bg-red-600 text-white text-sm font-medium py-1.5 px-3 rounded-md flex items-center gap-1" title="Remove this item">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1-1H8a1 1 0 00-1 1v3M4 7h16" />
+                            </svg>
+                            Remove
+                        </button>
+                    </div>
+
+                    <div class="space-y-3">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Description *</label>
+                            <textarea class="item-desc w-full p-3 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none" rows="2" placeholder="Enter item description..." required></textarea>
+                        </div>
+
+                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">HSN Code</label>
+                                <input type="text" class="item-hsn w-full p-3 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="HSN Code">
+                            </div>
+
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Quantity *</label>
+                                <input type="number" class="item-qty w-full p-3 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="1" min="0" step="0.01" required>
+                            </div>
+                        </div>
+
+                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Unit Price *</label>
+                                <div class="relative">
+                                    <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">₹</span>
+                                    <input type="number" class="item-price w-full pl-7 pr-3 py-3 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="0" min="0" step="0.01" required>
+                                </div>
+                            </div>
+
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Discount (%)</label>
+                                <div class="relative">
+                                    <input type="number" class="item-discount w-full pr-7 pl-3 py-3 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="0" min="0" max="100" step="0.01" placeholder="0">
+                                    <span class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">%</span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="bg-green-50 border border-green-200 rounded-md p-3">
+                            <div class="flex items-center justify-between">
+                                <span class="text-sm font-medium text-green-800">Total Amount</span>
+                                <span class="item-amount text-lg font-bold text-green-700 font-mono">₹0.00</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+
+            itemsContainer.appendChild(card);
             updateSerialNumbers();
 
             // Add event listeners to inputs
-            const inputs = row.querySelectorAll("input");
+            const inputs = card.querySelectorAll("input, textarea");
             inputs.forEach((input) => {
                 input.addEventListener("input", (event) => {
                     validateItemInput(event.target);
@@ -403,15 +429,15 @@ if (typeof document !== "undefined") {
             });
 
             // Add remove button listener
-            row.querySelector(".remove-item").addEventListener(
+            card.querySelector(".remove-item").addEventListener(
                 "click",
                 (_event) => {
-                    if (itemsTableBody.children.length > 1) {
-                        row.remove();
+                    if (itemsContainer.children.length > 1) {
+                        card.remove();
                         updateSerialNumbers();
                         updatePreview();
                     } else {
-                        // If it's the last row, just clear it instead of removing
+                        // If it's the last card, just clear it instead of removing
                         inputs.forEach((input) => {
                             if (input.type === "number") {
                                 input.value = input.classList.contains(
@@ -423,53 +449,50 @@ if (typeof document !== "undefined") {
                                 input.value = "";
                             }
                             input.classList.remove(
-                                "input-error",
-                                "input-success",
+                                "border-red-500",
+                                "border-green-500",
                             );
                         });
-                        row.querySelector(".item-amount").textContent = "0.00";
+                        card.querySelector(".item-amount").textContent =
+                            "₹0.00";
                         updatePreview();
                     }
                 },
             );
 
             // Auto-calculate initial amount
-            updateItemAmount({ target: row.querySelector(".item-qty") });
+            updateItemAmount({ target: card.querySelector(".item-qty") });
         }
 
         function updateItemAmount(event) {
-            const row = event.target.closest("tr");
-            if (!row) return;
+            const card = event.target.closest(".item-card");
+            if (!card) return;
 
-            const qty = parseFloat(row.querySelector(".item-qty").value) || 0;
+            const qty = parseFloat(card.querySelector(".item-qty").value) || 0;
             const price =
-                parseFloat(row.querySelector(".item-price").value) || 0;
+                parseFloat(card.querySelector(".item-price").value) || 0;
             const discountRate =
-                parseFloat(row.querySelector(".item-discount").value) || 0;
+                parseFloat(card.querySelector(".item-discount").value) || 0;
 
             const discountAmount = (qty * price * discountRate) / 100;
             const amount = qty * price - discountAmount;
 
-            row.querySelector(".item-amount").textContent = amount.toFixed(2);
+            card.querySelector(".item-amount").textContent =
+                `₹${amount.toFixed(2)}`;
 
-            // Add visual feedback for calculated amount
-            const amountCell = row.querySelector(".item-amount");
-            amountCell.classList.toggle("bg-green-50", amount > 0);
-            amountCell.classList.toggle("text-green-700", amount > 0);
-            amountCell.classList.toggle("bg-red-50", amount <= 0);
-            amountCell.classList.toggle("text-red-700", amount <= 0);
+            // Remove complex visual feedback
         }
 
-        // Enhanced Add Item button
+        // Add Item button
         addItemBtn.addEventListener("click", () => {
             addItemRow();
             updatePreview();
 
-            // Focus the new row's first input
-            const newRow = itemsTableBody.lastElementChild;
-            newRow.scrollIntoView({ behavior: "smooth", block: "center" });
+            // Focus the new card's first input
+            const newCard = itemsContainer.lastElementChild;
+            newCard.scrollIntoView({ behavior: "smooth", block: "center" });
             setTimeout(() => {
-                newRow.querySelector(".item-desc").focus();
+                newCard.querySelector(".item-desc").focus();
             }, 100);
         });
 
@@ -488,9 +511,9 @@ if (typeof document !== "undefined") {
 
             // Validate that we have at least one item with description
             const hasValidItems = Array.from(
-                itemsTableBody.querySelectorAll("tr"),
-            ).some((row) => {
-                return row.querySelector(".item-desc").value.trim() !== "";
+                itemsContainer.querySelectorAll(".item-card"),
+            ).some((card) => {
+                return card.querySelector(".item-desc").value.trim() !== "";
             });
 
             if (!hasValidItems) {
@@ -500,14 +523,37 @@ if (typeof document !== "undefined") {
                 return;
             }
 
-            const quotationContent = document.getElementById("quotation-content");
+            const quotationContent =
+                document.getElementById("quotation-content");
             const html = generateQuotationHTML(form);
             quotationContent.innerHTML = html;
             output.classList.remove("hidden");
         });
 
-        document.getElementById("close-quotation").addEventListener("click", () => {
-            output.classList.add("hidden");
+        document
+            .getElementById("close-quotation")
+            .addEventListener("click", () => {
+                output.classList.add("hidden");
+            });
+
+        // Enhanced keyboard shortcuts
+        document.addEventListener("keydown", (event) => {
+            if (event.ctrlKey || event.metaKey) {
+                if (event.key === "i") {
+                    event.preventDefault();
+                    addItemBtn.click();
+                }
+            }
+        });
+
+        // Auto-save functionality
+        let saveTimeout;
+        form.addEventListener("input", () => {
+            clearTimeout(saveTimeout);
+            saveTimeout = setTimeout(() => {
+                // Auto-save form data (existing functionality)
+                updatePreview();
+            }, 500);
         });
 
         // Initial preview

style.css

@@ -1,34 +1,43 @@
 @import "tailwindcss";
 
-/* Tooltips */
-.tooltip {
+/* Card Layout Optimizations for All Screen Sizes */
+.item-card {
+    border: 1px solid #e5e7eb;
+    margin-bottom: 1rem;
     position: relative;
-    display: inline-block;
+    overflow: hidden;
 }
 
-.tooltip .tooltiptext {
-    visibility: hidden;
-    width: 200px;
-    background-color: #374151;
-    color: white;
-    text-align: center;
-    border-radius: 6px;
-    padding: 5px;
-    position: absolute;
-    z-index: 1;
-    bottom: 125%;
-    left: 50%;
-    margin-left: -100px;
-    opacity: 0;
-    transition: opacity 0.3s;
-    font-size: 0.75rem;
+.item-card input,
+.item-card textarea {
+    font-size: 16px; /* Prevent zoom on iOS */
 }
 
-.tooltip:hover .tooltiptext {
-    visibility: visible;
-    opacity: 1;
+/* Enhanced spacing for larger screens */
+@media (width >= 768px) {
+    .item-card {
+        margin-bottom: 1rem;
+    }
+
+    .item-card input,
+    .item-card textarea {
+        font-size: 16px;
+    }
 }
 
+@media (width >= 768px) {
+    .item-card .grid-cols-1 {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+/* Enhanced amount display */
+.item-amount {
+    text-shadow: 0 1px 2px rgb(0 0 0 / 10%);
+}
+
+/* Removed scroll enhancement and focus ring */
+
 .quotation-print {
     max-width: 800px;
     margin: auto;