Hugging Face's logo

Spaces:
anuragshas
/
invoice-generator
Sleeping

App Files Community
anuragshas commited on
Commit
40032c3
·
1 Parent(s): b95deb6

fix: indentation issue

Browse files
Files changed (1) hide show
  1. index.html +270 -153
index.html CHANGED
@@ -1,160 +1,277 @@
1
  <!doctype html>
2
  <html lang="en">
 
 
 
 
 
 
3
 
4
- <head>
5
- <meta charset="UTF-8" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1" />
7
- <title>Quotation Generator</title>
8
- <link rel="stylesheet" href="style.css" />
9
- </head>
10
-
11
- <body class="bg-gray-100">
12
- <h1 class="text-3xl font-bold text-center my-8" id="top-header">
13
- Quotation Generator
14
- </h1>
15
- <div class="flex container mx-auto">
16
- <div id="form-container" class="w-1/2 pr-4">
17
- <form id="quotation-form" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
18
- <fieldset class="border border-gray-300 p-4 mb-4">
19
- <legend class="text-lg font-semibold mb-2">
20
- Your Company Details
21
- </legend>
22
- <input type="text" id="company-name" name="company-name" placeholder="Company Name" required
23
- class="w-full p-2 border border-gray-300 rounded mb-2" />
24
- <textarea id="company-address" name="company-address" placeholder="Address" required
25
- class="w-full p-2 border border-gray-300 rounded mb-2"></textarea>
26
- <input type="text" id="company-phone" name="company-phone" placeholder="Phone"
27
- class="w-full p-2 border border-gray-300 rounded mb-2" />
28
- <input type="email" id="company-email" name="company-email" placeholder="Email"
29
- class="w-full p-2 border border-gray-300 rounded mb-2" />
30
- <input type="text" id="company-gstin" name="company-gstin" placeholder="GSTIN"
31
- class="w-full p-2 border border-gray-300 rounded" />
32
- </fieldset>
33
- <fieldset class="border border-gray-300 p-4 mb-4">
34
- <legend class="text-lg font-semibold mb-2">
35
- Customer Company Details
36
- </legend>
37
- <input type="text" id="customer-name" name="customer-name" placeholder="Customer Name" required
38
- class="w-full p-2 border border-gray-300 rounded mb-2" />
39
- <textarea id="customer-address" name="customer-address" placeholder="Address" required
40
- class="w-full p-2 border border-gray-300 rounded mb-2"></textarea>
41
- <input type="text" id="customer-phone" name="customer-phone" placeholder="Phone"
42
- class="w-full p-2 border border-gray-300 rounded mb-2" />
43
- <input type="email" id="customer-email" name="customer-email" placeholder="Email"
44
- class="w-full p-2 border border-gray-300 rounded mb-2" />
45
- <input type="text" id="customer-gstin" name="customer-gstin" placeholder="GSTIN"
46
- class="w-full p-2 border border-gray-300 rounded" />
47
- </fieldset>
48
- <fieldset class="border border-gray-300 p-4 mb-4">
49
- <legend class="text-lg font-semibold mb-2">
50
- Quotation Details
51
- </legend>
52
- <input type="text" id="quotation-number" name="quotation-number" placeholder="Quotation Number"
53
- required class="w-full p-2 border border-gray-300 rounded mb-2" />
54
- <input type="date" id="quotation-date" name="quotation-date" required
55
- class="w-full p-2 border border-gray-300 rounded" />
56
- </fieldset>
57
- <fieldset class="border border-gray-300 p-4 mb-4">
58
- <legend class="text-lg font-semibold mb-2">
59
- Items
60
- </legend>
61
- <div class="bg-blue-50 border border-blue-200 rounded p-3 mb-4 text-sm text-blue-800">
62
- <strong>💡 Tips:</strong>
63
- <ul class="list-disc list-inside mt-1 space-y-1">
64
- <li>
65
- Use
66
- <kbd class="bg-gray-200 px-1 rounded">Enter</kbd>
67
- to move to the next field or add a new row
68
- </li>
69
- <li>
70
- Use
71
- <kbd class="bg-gray-200 px-1 rounded">Ctrl+I</kbd>
72
- to quickly add a new item
73
- </li>
74
- <li>
75
- Amounts are calculated automatically as you
76
- type
77
- </li>
78
- <li>
79
- At least one item with description is
80
- required
81
- </li>
82
- </ul>
83
- </div>
84
- <table id="items-table" class="w-full mb-2">
85
- <thead>
86
- <tr class="bg-gray-200">
87
- <th class="p-2 border border-gray-300">
88
- S.No
89
- </th>
90
- <th class="p-2 border border-gray-300">
91
- Description *
92
- </th>
93
- <th class="p-2 border border-gray-300">
94
- HSN Code
95
- </th>
96
- <th class="p-2 border border-gray-300">
97
- Qty *
98
- </th>
99
- <th class="p-2 border border-gray-300">
100
- Unit Price *
101
- </th>
102
- <th class="p-2 border border-gray-300">
103
- Discount (%)
104
- </th>
105
- <th class="p-2 border border-gray-300">
106
- Amount
107
- </th>
108
- <th class="p-2 border border-gray-300">
109
- Action
110
- </th>
111
- </tr>
112
- </thead>
113
- <tbody></tbody>
114
- </table>
115
- <button type="button" id="add-item"
116
- class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
117
- Add Another Item
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
118
  </button>
119
- </fieldset>
120
- <fieldset class="border border-gray-300 p-4 mb-4">
121
- <legend class="text-lg font-semibold mb-2">
122
- Additional Charges
123
- </legend>
124
- <label class="block mb-2">IGST (%)<input type="number" id="igst-rate" name="igst-rate" value="0"
125
- min="0" class="w-full p-2 border border-gray-300 rounded" /></label>
126
- <label class="block">Freight Charges<input type="number" id="freight-charges" name="freight-charges"
127
- value="0" min="0" class="w-full p-2 border border-gray-300 rounded" /></label>
128
- </fieldset>
129
- <fieldset class="border border-gray-300 p-4 mb-4">
130
- <legend class="text-lg font-semibold mb-2">
131
- Bank Details
132
- </legend>
133
- <input type="text" id="bank-name" name="bank-name" placeholder="Bank Name" required
134
- class="w-full p-2 border border-gray-300 rounded mb-2" />
135
- <input type="text" id="bank-account" name="bank-account" placeholder="Account Number" required
136
- class="w-full p-2 border border-gray-300 rounded mb-2" />
137
- <input type="text" id="bank-ifsc" name="bank-ifsc" placeholder="IFSC Code" required
138
- class="w-full p-2 border border-gray-300 rounded mb-2" />
139
- <input type="text" id="bank-branch" name="bank-branch" placeholder="Branch" required
140
- class="w-full p-2 border border-gray-300 rounded" />
141
- </fieldset>
142
- <button type="submit" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
143
- Generate Quotation
144
- </button>
145
- </form>
146
- </div>
147
- <div id="preview-container" class="w-1/2 pl-4">
148
- <div id="quotation-preview" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
149
- <h2 class="text-2xl font-bold text-center mb-4">
150
- Quotation Preview
151
- </h2>
152
- <div id="preview-content"></div>
153
  </div>
154
  </div>
155
- </div>
156
- <div id="quotation-output" style="display: none"></div>
157
- <script src="script.js"></script>
158
- </body>
159
-
160
  </html>
 
1
  <!doctype html>
2
  <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>Quotation Generator</title>
7
+ <link rel="stylesheet" href="style.css" />
8
+ </head>
9
 
10
+ <body class="bg-gray-100">
11
+ <h1 class="text-3xl font-bold text-center my-8" id="top-header">
12
+ Quotation Generator
13
+ </h1>
14
+ <div class="flex container mx-auto">
15
+ <div id="form-container" class="w-1/2 pr-4">
16
+ <form
17
+ id="quotation-form"
18
+ class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
19
+ >
20
+ <fieldset class="border border-gray-300 p-4 mb-4">
21
+ <legend class="text-lg font-semibold mb-2">
22
+ Your Company Details
23
+ </legend>
24
+ <input
25
+ type="text"
26
+ id="company-name"
27
+ name="company-name"
28
+ placeholder="Company Name"
29
+ required
30
+ class="w-full p-2 border border-gray-300 rounded mb-2"
31
+ />
32
+ <textarea
33
+ id="company-address"
34
+ name="company-address"
35
+ placeholder="Address"
36
+ required
37
+ class="w-full p-2 border border-gray-300 rounded mb-2"
38
+ ></textarea>
39
+ <input
40
+ type="text"
41
+ id="company-phone"
42
+ name="company-phone"
43
+ placeholder="Phone"
44
+ class="w-full p-2 border border-gray-300 rounded mb-2"
45
+ />
46
+ <input
47
+ type="email"
48
+ id="company-email"
49
+ name="company-email"
50
+ placeholder="Email"
51
+ class="w-full p-2 border border-gray-300 rounded mb-2"
52
+ />
53
+ <input
54
+ type="text"
55
+ id="company-gstin"
56
+ name="company-gstin"
57
+ placeholder="GSTIN"
58
+ class="w-full p-2 border border-gray-300 rounded"
59
+ />
60
+ </fieldset>
61
+ <fieldset class="border border-gray-300 p-4 mb-4">
62
+ <legend class="text-lg font-semibold mb-2">
63
+ Customer Company Details
64
+ </legend>
65
+ <input
66
+ type="text"
67
+ id="customer-name"
68
+ name="customer-name"
69
+ placeholder="Customer Name"
70
+ required
71
+ class="w-full p-2 border border-gray-300 rounded mb-2"
72
+ />
73
+ <textarea
74
+ id="customer-address"
75
+ name="customer-address"
76
+ placeholder="Address"
77
+ required
78
+ class="w-full p-2 border border-gray-300 rounded mb-2"
79
+ ></textarea>
80
+ <input
81
+ type="text"
82
+ id="customer-phone"
83
+ name="customer-phone"
84
+ placeholder="Phone"
85
+ class="w-full p-2 border border-gray-300 rounded mb-2"
86
+ />
87
+ <input
88
+ type="email"
89
+ id="customer-email"
90
+ name="customer-email"
91
+ placeholder="Email"
92
+ class="w-full p-2 border border-gray-300 rounded mb-2"
93
+ />
94
+ <input
95
+ type="text"
96
+ id="customer-gstin"
97
+ name="customer-gstin"
98
+ placeholder="GSTIN"
99
+ class="w-full p-2 border border-gray-300 rounded"
100
+ />
101
+ </fieldset>
102
+ <fieldset class="border border-gray-300 p-4 mb-4">
103
+ <legend class="text-lg font-semibold mb-2">
104
+ Quotation Details
105
+ </legend>
106
+ <input
107
+ type="text"
108
+ id="quotation-number"
109
+ name="quotation-number"
110
+ placeholder="Quotation Number"
111
+ required
112
+ class="w-full p-2 border border-gray-300 rounded mb-2"
113
+ />
114
+ <input
115
+ type="date"
116
+ id="quotation-date"
117
+ name="quotation-date"
118
+ required
119
+ class="w-full p-2 border border-gray-300 rounded"
120
+ />
121
+ </fieldset>
122
+ <fieldset class="border border-gray-300 p-4 mb-4">
123
+ <legend class="text-lg font-semibold mb-2">
124
+ Items
125
+ </legend>
126
+ <div
127
+ class="bg-blue-50 border border-blue-200 rounded p-3 mb-4 text-sm text-blue-800"
128
+ >
129
+ <strong>💡 Tips:</strong>
130
+ <ul class="list-disc list-inside mt-1 space-y-1">
131
+ <li>
132
+ Use
133
+ <kbd class="bg-gray-200 px-1 rounded"
134
+ >Enter</kbd
135
+ >
136
+ to move to the next field or add a new row
137
+ </li>
138
+ <li>
139
+ Use
140
+ <kbd class="bg-gray-200 px-1 rounded"
141
+ >Ctrl+I</kbd
142
+ >
143
+ to quickly add a new item
144
+ </li>
145
+ <li>
146
+ Amounts are calculated automatically as you
147
+ type
148
+ </li>
149
+ <li>
150
+ At least one item with description is
151
+ required
152
+ </li>
153
+ </ul>
154
+ </div>
155
+ <table id="items-table" class="w-full mb-2">
156
+ <thead>
157
+ <tr class="bg-gray-200">
158
+ <th class="p-2 border border-gray-300">
159
+ S.No
160
+ </th>
161
+ <th class="p-2 border border-gray-300">
162
+ Description *
163
+ </th>
164
+ <th class="p-2 border border-gray-300">
165
+ HSN Code
166
+ </th>
167
+ <th class="p-2 border border-gray-300">
168
+ Qty *
169
+ </th>
170
+ <th class="p-2 border border-gray-300">
171
+ Unit Price *
172
+ </th>
173
+ <th class="p-2 border border-gray-300">
174
+ Discount (%)
175
+ </th>
176
+ <th class="p-2 border border-gray-300">
177
+ Amount
178
+ </th>
179
+ <th class="p-2 border border-gray-300">
180
+ Action
181
+ </th>
182
+ </tr>
183
+ </thead>
184
+ <tbody></tbody>
185
+ </table>
186
+ <button
187
+ type="button"
188
+ id="add-item"
189
+ class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
190
+ >
191
+ Add Another Item
192
+ </button>
193
+ </fieldset>
194
+ <fieldset class="border border-gray-300 p-4 mb-4">
195
+ <legend class="text-lg font-semibold mb-2">
196
+ Additional Charges
197
+ </legend>
198
+ <label class="block mb-2"
199
+ >IGST (%)<input
200
+ type="number"
201
+ id="igst-rate"
202
+ name="igst-rate"
203
+ value="0"
204
+ min="0"
205
+ class="w-full p-2 border border-gray-300 rounded"
206
+ /></label>
207
+ <label class="block"
208
+ >Freight Charges<input
209
+ type="number"
210
+ id="freight-charges"
211
+ name="freight-charges"
212
+ value="0"
213
+ min="0"
214
+ class="w-full p-2 border border-gray-300 rounded"
215
+ /></label>
216
+ </fieldset>
217
+ <fieldset class="border border-gray-300 p-4 mb-4">
218
+ <legend class="text-lg font-semibold mb-2">
219
+ Bank Details
220
+ </legend>
221
+ <input
222
+ type="text"
223
+ id="bank-name"
224
+ name="bank-name"
225
+ placeholder="Bank Name"
226
+ required
227
+ class="w-full p-2 border border-gray-300 rounded mb-2"
228
+ />
229
+ <input
230
+ type="text"
231
+ id="bank-account"
232
+ name="bank-account"
233
+ placeholder="Account Number"
234
+ required
235
+ class="w-full p-2 border border-gray-300 rounded mb-2"
236
+ />
237
+ <input
238
+ type="text"
239
+ id="bank-ifsc"
240
+ name="bank-ifsc"
241
+ placeholder="IFSC Code"
242
+ required
243
+ class="w-full p-2 border border-gray-300 rounded mb-2"
244
+ />
245
+ <input
246
+ type="text"
247
+ id="bank-branch"
248
+ name="bank-branch"
249
+ placeholder="Branch"
250
+ required
251
+ class="w-full p-2 border border-gray-300 rounded"
252
+ />
253
+ </fieldset>
254
+ <button
255
+ type="submit"
256
+ class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
257
+ >
258
+ Generate Quotation
259
  </button>
260
+ </form>
261
+ </div>
262
+ <div id="preview-container" class="w-1/2 pl-4">
263
+ <div
264
+ id="quotation-preview"
265
+ class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
266
+ >
267
+ <h2 class="text-2xl font-bold text-center mb-4">
268
+ Quotation Preview
269
+ </h2>
270
+ <div id="preview-content"></div>
271
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
272
  </div>
273
  </div>
274
+ <div id="quotation-output" style="display: none"></div>
275
+ <script src="script.js"></script>
276
+ </body>
 
 
277
  </html>