the-invoice-builder/builder.html at main · Nactore/the-invoice-builder · GitHub

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Invoice Generator</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <style>
      /* --- General Site UI Styling (Minimal) --- */
      body {
        font-family: "Inter", sans-serif;
        display: flex;
        flex-direction: column; /* Changed to column for better layout */
        align-items: center;
        min-height: 100vh;
        padding: 1rem;
        background-color: #f7fafc; /* Light background for the UI */
      }
      .gradient-text {
        background: linear-gradient(to right, #2563eb, #9333ea);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .drop-zone {
        transition: all 0.3s ease;
        border: 4px dashed #8b5cf6;
        background-color: #f3e8ff;
      }
      .drop-zone.highlight {
        border-color: #6d28d9;
        background-color: #f1e6ff;
        box-shadow: 0 0 15px rgba(109, 40, 217, 0.4); /* Glow effect */
      }
      .loading-spinner {
        border-top-color: #6d28d9; /* Purple spinner color */
        animation: spin 1s linear infinite; /* Spin animation */
      }
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      /* Tailwind-like button styling, manually defined since we stripped custom CSS */
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1.5rem;
        border-radius: 0.75rem; /* More rounded buttons */
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        text-decoration: none; /* Remove underline for links acting as buttons */
      }
      .btn-primary {
        background: linear-gradient(
          to right,
          #8b5cf6,
          #6d28d9
        ); /* Gradient button */
        color: white;
        border: none;
      }
      .btn-primary:hover {
        background: linear-gradient(
          to right,
          #6d28d9,
          #5b21b6
        ); /* Darker gradient on hover */
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px); /* Slight lift on hover */
      }

      /* Basic modal styling */
      .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1000; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
        justify-content: center;
        align-items: center;
      }
      .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        max-width: 500px;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        text-align: center;
      }
      .close-button {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
      }
      .close-button:hover,
      .close-button:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
      }

      /* Styles for the HTML invoice preview container */
      #pdfLinks {
        border: 1px solid #e2e8f0; /* Light gray border */
        border-radius: 0.5rem; /* Slightly rounded corners */
        background-color: #ffffff; /* White background */
        padding: 1rem; /* Padding inside the container */
      }

      /* CSS for the invoice content, to be inlined in the generated HTML */
      /* These are the styles that will be applied to the content captured by html2canvas */
      .invoice-container {
        padding: 40px;
        font-family: "Inter", sans-serif;
        width: 800px; /* Fixed width for consistent invoice display */
        page-break-inside: avoid; /* Prevent page breaks within the container */
        background: white;
        box-shadow: none;
        margin: 0 auto;
        margin-bottom: 20px; /* Space between multiple invoices if rendered in a long HTML string */
      }
      table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
      }
      td,
      th {
        border: 1px solid #e5e7eb;
        padding: 12px;
        text-align: center;
      }
      th {
        background-color: #ede9fe;
        font-weight: 600;
        color: #5b21b6;
      }
      .right {
        text-align: right;
      }
      .logo {
        max-width: 150px;
        max-height: 100px;
        object-fit: contain;
      }
      .invoice-header {
        display: flex; /* Use flexbox for layout */
        justify-content: space-between; /* Space out title/details and logo */
        align-items: flex-start; /* Align items to the top */
        padding-top: 0; /* Handled by invoice-container padding */
        margin-bottom: 40px;
        padding-bottom: 20px;
        border-bottom: 2px solid #a78bfa;
        flex-wrap: wrap; /* Allow wrapping for responsiveness */
      }
      .invoice-header h1 {
        font-size: 2.5rem;
        color: #5b21b6;
        margin-bottom: 10px;
        margin-top: 0 !important; /* Force no top margin */
      }
      .invoice-header p {
        font-size: 0.9rem;
        color: #4b5563;
        line-height: 1.5;
        margin-top: 0 !important; /* Force no top margin */
      }
      .invoice-title-block {
        /* New class for the text content */
        flex-grow: 1; /* Allows this block to take available space */
        max-width: calc(
          100% - 160px
        ); /* Adjust based on logo width + some gap */
      }
      /* Specific styling for PDF download links to ensure visibility */
      #pdfList li {
        margin-bottom: 8px; /* Add some spacing between links */
      }
      #pdfList a {
        color: #dc2626 !important; /* Explicitly red color for high visibility */
        font-weight: 700 !important; /* Make it bold */
        text-decoration: underline !important; /* Ensure underline */
        padding: 4px 0; /* Add some vertical padding */
        display: inline-block; /* Allow padding and margin on links */
      }
      #pdfList a:hover {
        color: #b91c1c !important; /* Darker red on hover */
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
  </head>
  <body class="min-h-screen flex flex-col items-center justify-center p-4">
    <nav class="container mx-auto px-6 py-4 flex items-center justify-between">
      <div class="flex items-center space-x-2">
        <div
          class="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center"
        >
          <span class="text-white font-bold text-sm">TIB</span>
        </div>
        <a href="./index.html" class="text-xl font-bold text-gray-900"
          >The Invoice Builder</a
        >
      </div>
    </nav>
    <div class="w-full max-w-7xl bg-white rounded-xl shadow-2xl p-8 space-y-6">
      <h1
        class="text-6xl gradient-text font-extrabold text-center text-purple-800 mb-6 tracking-tight"
      >
        Excel to Invoice PDF Generator
      </h1>
      <div
        class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-2xl p-6 border border-green-200"
      >
        <div class="flex space-x-3 justify-between">
          <div class="flex space-x-3">
            <div
              class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center"
            >
              <svg
                class="w-6 h-6 text-green-600"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                />
              </svg>
            </div>
            <div>
              <h3 class="text-lg font-semibold text-gray-900">Get Started</h3>
              <p class="text-gray-600">
                Download our sample Excel template to see the required format
              </p>
            </div>
          </div>
          <a href="./sample.xlsx">
          <button
            id="downloadTemplate"
            class="ml-auto px-6 py-3 bg-green-600 text-white rounded-xl font-medium hover:bg-green-700 transition-all duration-200 shadow-lg hover:shadow-xl"
          >
            Download Template
          </button>
        </a>
        </div>
      </div>
      <!-- NEW: Sample Excel Preview Section -->
      <div
        id="sampleExcelPreview"
        class="hidden mt-6 p-6 bg-blue-50 border border-blue-300 rounded-xl shadow-md"
      >
        <h2 class="text-xl font-semibold text-blue-700 mb-4">
          Sample Excel Data Preview:
        </h2>
        <div id="excelTableContainer" class="overflow-x-auto">
          <!-- Excel table will be rendered here -->
        </div>
        <p class="text-sm text-gray-500 mt-4">
          This is a preview of the expected Excel data format.
        </p>
      </div>
      <!-- END NEW SECTION -->
      <form id="senderForm" class="space-y-4">
        <label
          for="yourName"
          class="block text-gray-700 font-medium text-lg mb-2"
          ><b>Your Information:</b></label
        >
        <input
          type="text"
          id="yourName"
          placeholder="Your Name"
          class="w-full border rounded-lg px-4 py-3 focus:ring-2 focus:ring-purple-400 focus:border-transparent transition-all duration-200"
        />
        <input
          type="text"
          id="yourAddress"
          placeholder="Your Address"
          class="w-full border rounded-lg px-4 py-3 focus:ring-2 focus:ring-purple-400 focus:border-transparent transition-all duration-200"
        />
        <input
          type="text"
          id="yourTax"
          placeholder="Your Tax Number"
          class="w-full border rounded-lg px-4 py-3 focus:ring-2 focus:ring-purple-400 focus:border-transparent transition-all duration-200"
        />
        <label class="block text-gray-700 font-medium mt-4 text-lg"
          ><b>Company Logo</b> [Optional]</label
        >
        <input
          type="file"
          id="logoInput"
          accept="image/*"
          class="block w-full text-sm text-gray-600 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-purple-100 file:text-purple-700 hover:file:bg-purple-200 cursor-pointer transition-colors duration-200"
        />
      </form>

      <div
        id="dropZone"
        class="drop-zone border-4 border-dashed border-purple-400 rounded-xl p-12 text-center bg-purple-50 hover:bg-purple-100 cursor-pointer flex flex-col items-center justify-center min-h-[220px] shadow-lg"
      >
        <p class="text-3xl text-purple-700 font-bold mb-3">
          Drag & Drop your Excel file here
        </p>
        <p class="text-lg text-gray-600">or click to browse (.xlsx, .xls)</p>
        <input type="file" id="fileInput" accept=".xlsx, .xls" class="hidden" />
        <p id="fileName" class="mt-4 text-lg text-green-700 font-semibold"></p>
      </div>

      <button
        id="generateInvoicesButton"
        class="mt-6 px-6 py-3 btn btn-primary w-full md:w-auto"
        disabled
      >
        Generate PDFs
      </button>

      <div
        id="loadingMessage"
        class="hidden flex items-center justify-center p-4 text-lg text-purple-700 bg-purple-50 rounded-lg shadow-inner"
      >
        <div
          class="loading-spinner w-8 h-8 border-4 border-dotted rounded-full mr-3"
        ></div>
        Processing file and generating PDFs...
      </div>

      <div
        id="pdfLinks"
        class="hidden mt-6 p-6 bg-green-50 border border-green-300 rounded-xl shadow-md"
      >
        <h2 class="text-xl font-semibold text-green-700 mb-4">
          Generated PDFs:
        </h2>
        <ul
          id="pdfList"
          class="list-disc list-inside text-gray-700 space-y-2"
        ></ul>
        <button
          id="downloadZip"
          class="mt-6 px-6 py-3 btn btn-primary w-full md:w-auto"
        >
          Download All as ZIP
        </button>
      </div>
    </div>

    <div id="myModal" class="modal">
      <div class="modal-content">
        <span class="close-button">&timView Demoes;</span>
        <p id="modalMessage" class="text-lg text-gray-800"></p>
        <button
          id="modalCloseBtn"
          class="mt-4 px-4 py-2 bg-purple-600 text-white rounded-lg shadow btn-primary"
        >
          OK
        </button>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>