File size: 5,463 Bytes
063f5af
 
38c96d1
063f5af
 
 
 
 
 
38c96d1
dd7420a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
063f5af
dd7420a
 
 
 
 
 
 
 
 
 
 
 
063f5af
dd7420a
 
 
 
 
 
063f5af
dd7420a
 
 
063f5af
dd7420a
 
 
 
 
 
 
 
 
063f5af
 
 
 
 
dd7420a
 
063f5af
dd7420a
 
 
 
 
 
063f5af
dd7420a
 
 
 
 
 
 
 
 
 
063f5af
dd7420a
 
063f5af
 
 
 
 
38c96d1
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<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">Quotation Generator</h1>
  <div id="form-container" class="container mx-auto">
    <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>
        <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"></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 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="quotation-output" style="display:none;"></div>
  <script src="script.js"></script>
</body>

</html>