-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
228 lines (217 loc) · 18.4 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>VueInvoice</title>
<!-- Meta for Google -->
<meta name="description" content="VueInvoice simplifies the process of generating invoices, allowing you to quickly customize text fields and download your invoice with ease.">
<!-- Meta for Social Media -->
<meta property="og:title" content="Effortless Invoice Generation with VueInvoice">
<meta property="og:description" content="VueInvoice simplifies the process of generating invoices, allowing you to quickly customize text fields and download your invoice with ease.">
<meta property="og:image" content="URL of the image you want to display on social media">
<meta property="og:url" content="https://helloarman.github.io/vueinvoice">
<meta name="twitter:card" content="./vueinvoice.jpg">
<meta name="twitter:title" content="Effortless Invoice Generation with VueInvoice">
<meta name="twitter:description" content="VueInvoice simplifies the process of generating invoices, allowing you to quickly customize text fields and download your invoice with ease.">
<meta name="twitter:image" content="./vueinvoice.jpg">
<!-- Favicon -->
<link rel="icon" type="image/png" href="./fav.png">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body id="app">
<div class="bg-white">
<header class="absolute inset-x-0 top-0 z-50">
<nav class="container mx-auto flex items-center justify-between p-6 lg:px-8" aria-label="Global">
<div class="flex justify-between">
<a href="/" class="-m-1.5 p-1.5">
<span class="sr-only">VueInvoice</span>
<img class="h-8 w-auto" src="./logo.png" alt="">
</a>
</div>
<a target="_blank" href="https://github.com/helloarman/vueinvoice" class="text-white bg-[#24292F] hover:bg-[#24292F]/90 focus:ring-4 focus:outline-none focus:ring-[#24292F]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-gray-500 dark:hover:bg-[#050708]/30 me-2 mb-2">
<svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z" clip-rule="evenodd"/>
</svg>
Github
</a>
</nav>
</header>
<div class="relative isolate pt-14">
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
<div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
<div class="py-24 sm:py-32 lg:pb-40">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center">
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">Effortless Invoice Generation</h1>
<p class="mt-6 text-lg leading-8 text-gray-600">VueInvoice simplifies the process of generating invoices, allowing you to quickly customize text fields and download your invoice with ease.</p>
<div class="mt-10 flex items-center justify-center gap-x-6">
<a @click="download" href="javascript:void(0)" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" id="download-button">Download PDF</a>
<!-- <a href="#howItWorks" class="text-sm font-semibold leading-6 text-gray-900" id="download-button">Learn more <span aria-hidden="true">→</span></a> -->
</div>
</div>
<div class="mt-16 flow-root sm:mt-24">
<div class="-m-2 w-[1240px] h-[1754px] rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">
<div class="flex justify-center my-3 gap-x-5">
<!-- Color -->
<div class="flex items-center">
<label for="brand-color" class="font-bold">Color: </label>
<input id="brand-color" type="color" v-model="brandColor" class="ms-3 rounded">
</div>
<!-- Note -->
<label class="inline-flex items-center cursor-pointer">
<label for="brand-color" class="font-bold">Letter: </label>
<input type="checkbox" class="sr-only peer" v-model="letter">
<div class="ms-3 relative w-11 h-6 bg-gray-200 peer-focus:outline-none dark:peer-focus:ring-indigo-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600"></div>
</label>
<!-- Currency -->
<div class="flex items-center">
<label for="brand-color" class="font-bold">Currency: </label>
<select v-model="currency" id="countries" class="ms-3 bg-gray-50 border text-gray-900 text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block w-full p-2.5">
<option value="$" selected>Dollar ($)</option>
<option value="৳">Taka (৳)</option>
<option value="€">Euro (€)</option>
<option value="£">Pound (£)</option>
<option value="¥">Yen (¥)</option>
<option value="₹">Rupee (₹)</option>
<option value="₽">Ruble (₽)</option>
<option value="₿">Bitcoin (₿)</option>
<option value="฿">Baht (฿)</option>
<option value="₡">Colon (₡)</option>
<option value="₫">Dong (₫)</option>
<option value="₭">Kip (₭)</option>
<option value="₦">Naira (₦)</option>
<option value="₱">Peso (₱)</option>
<option value="₴">Hryvnia (₴)</option>
<option value="₮">Tugrik (₮)</option>
</select>
</div>
</div>
<div class="bg-white flex flex-col p-[70px] w-[100%] h-[96%]" id="invoice">
<div>
<div class="flex justify-between mb-10">
<h2 :style="{color: brandColor}" class="text-3xl font-bold" contenteditable="true">Your Company Name</h2>
<div class="flex flex-col">
<h2 class="text-3xl font-bold">Invoice</h2>
<p class="text-xl" contenteditable="true">#015789</p>
</div>
</div>
<div class="flex justify-between">
<div class="grid gap-y-0">
<h2 class="text-base font-bold mb-2" contenteditable="true">To,</h2>
<p class="text-sm font-bold" contenteditable="true">Arman Rahman</p>
<p class="text-sm" contenteditable="true">Road #2 House#5 Dhanmondi Dhaka, Bangladesh</p>
<p class="text-sm" contenteditable="true">+8801857899365</p>
<p class="text-sm" contenteditable="true">contact.armanrahman@gmail.com</p>
</div>
<div>
<h2 class="text-base font-bold mb-2 text-end" contenteditable="true">From,</h2>
<p class="text-sm text-end" contenteditable="true">Your Company Address</p>
<p class="text-sm text-end" contenteditable="true">+88018xxxxxxxx</p>
<p class="text-sm text-end" contenteditable="true">info@vueInvoice.com</p>
</div>
</div>
<div v-if="letter">
<div class="text-sm flex justify-between my-5 p-5 border" contenteditable="true">
Dear Arman Rahman,<br><br>
I've provided a breakdown of the costs for the recent work completed below. Kindly make the payment at your earliest convenience. Feel free to reach out if you have any questions.
<br><br>
Thank you,<br>
Your Name
</div>
</div>
<div class="my-5">
<div class="mt-8 flow-root text-sm">
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
<table class="min-w-full divide-y divide-gray-300">
<thead>
<tr :style="{backgroundColor: brandColor}">
<th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-white sm:pl-3">#</th>
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-white" contenteditable="true">Item Description</th>
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-white" contenteditable="true">Quantity</th>
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-white" contenteditable="true">Unit Price ({{ currency }})</th>
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-white" contenteditable="true">Total ({{ currency }})</th>
</tr>
</thead>
<tbody class="bg-white" id="tableBox">
<tr v-for="(row, index) in rowCount" :key="index" class="border-x even:bg-gray-50 divide-x divide-gray-200" >
<td class="whitespace-nowrap py-4 pl-2 pr-3 text-sm font-medium text-gray-900 sm:pl-3">{{ index + 1 }}</td>
<td class="whitespace-nowrap px-3 py-2 text-sm text-gray-500 text-wrap w-96" contenteditable="true"></td>
<td class="whitespace-nowrap px-3 py-2 text-sm text-gray-500"><input class="p-2 bg-transparent" placeholder="0" type="number" v-model.number="rows[index].amount" @input="calculateSubTotal(index)"></td>
<td class="whitespace-nowrap px-3 py-2 text-sm text-gray-500"><input class="p-2 bg-transparent" placeholder="0" type="number" v-model.number="rows[index].unit" @input="calculateSubTotal(index)"></td>
<td class="whitespace-nowrap px-3 py-2 text-sm text-gray-500">{{ rows[index].total }}</td>
</tr>
</tbody>
<tr class="border bg-gray-100 divide-x divide-y divide-gray-200">
<td class="whitespace-nowrap px-3 py-3 text-sm text-gray-500 font-bold" colspan="4">Subtotal</td>
<td class="whitespace-nowrap px-3 py-3 text-sm text-gray-500">{{ subTotal }}</td>
</tr>
<tr class="border bg-gray-100 divide-x divide-y divide-gray-200">
<td class="whitespace-nowrap px-3 py-3 text-sm text-gray-500 font-bold" colspan="4">Tax (<input class="w-5 text-center bg-transparent" placeholder="0" type="text" v-model.number="taxPercentage" @input="calculatePercentage()">%)</td>
<td class="whitespace-nowrap px-3 py-3 text-sm text-gray-500">{{ tax }}</td>
</tr>
<tr class="border bg-gray-100 divide-x divide-y divide-gray-200">
<td class="whitespace-nowrap px-3 py-3 text-sm text-gray-500 font-bold" colspan="4">Total</td>
<td class="whitespace-nowrap px-3 py-3 text-sm text-gray-500 font-bold">{{ total }}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div :style="{borderColor: brandColor}" class="text-sm flex justify-between my-5 p-5 border">
<p contenteditable="true">Thank you for choosing us! I'm excited about the chance to work together again soon.
Payment terms: Please make payment within 60 days.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]" aria-hidden="true">
<div class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
</div>
<div class="fixed bottom-1/2 right-4 z-10 ">
<div class="flex flex-col space-y-2">
<button @click="download" class="rounded-md mb-5 bg-indigo-700 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
Download PDF
</button>
<button @click="addRow" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+ Add Row
</button>
<button @click="removeRow" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
- Remove Row
</button>
</div>
</div>
<footer class="relative">
<div class="mx-auto max-w-7xl px-6 py-12 md:flex md:items-center md:justify-between lg:px-8">
<div class="flex justify-center space-x-6 md:order-2">
<a href="https://www.linkedin.com/in/armanrahman" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">Linkedin</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/>
</svg>
</a>
<a href="https://github.com/helloarman" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">GitHub</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
</svg>
</a>
</div>
<div class="mt-8 md:order-1 md:mt-0">
<p class="text-center text-xs leading-5 text-gray-500">© {{ year }} VueInvoice, Inc. All rights reserved.</p>
</div>
</div>
</footer>
</div>
<script src="./script.js"></script>
</body>
</html>