pdf wip
This commit is contained in:
1 parent
8971b8b948
commit
f676ec5a51
51 files changed
+1663
-601
No files matched your search
@@ -0,0 +1,192 @@
|
||||
body {
|
||||
/* font-family: Arial, Helvetica, sans-serif; */
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.6rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.big {
|
||||
font-size: 1.6rem;
|
||||
line-height: 2rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.base {
|
||||
font-size: 1rem;
|
||||
line-height: 1.6rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.7rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.gray {
|
||||
color: #4a5565;
|
||||
}
|
||||
|
||||
.hellgrau {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: red;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
.m10 {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.m20 {
|
||||
margin: 20px 10px 10px;
|
||||
}
|
||||
|
||||
.ml-1 {
|
||||
margin-left: 1mm;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 2mm;
|
||||
}
|
||||
|
||||
.mtop {
|
||||
margin-top: 20mm;
|
||||
}
|
||||
|
||||
.green {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 1.3mm 3mm;
|
||||
margin: 2rem 0;
|
||||
font-size: 1.2rem;
|
||||
border: 0.3mm solid #e5e7eb;
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
font-weight: bold;
|
||||
font-size: 2.2rem;
|
||||
top: 90mm;
|
||||
width: 185mm;
|
||||
}
|
||||
|
||||
.festsetzung {
|
||||
position: absolute;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
font-size: 1.6rem;
|
||||
top: 130mm;
|
||||
width: 185mm;
|
||||
}
|
||||
|
||||
.auftraggeber {
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
bottom: 20mm;
|
||||
right: 15mm;
|
||||
left: 15mm;
|
||||
}
|
||||
|
||||
.table-striped tr:nth-child(2n-1) td {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.deckblatt {
|
||||
/* 210mm x 297mm */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f3f4f6;
|
||||
padding: 10mm;
|
||||
}
|
||||
|
||||
table.table-striped td.head,
|
||||
td.head {
|
||||
font-weight: bold;
|
||||
vertical-align: bottom;
|
||||
background-color: #f3f4f6 !important;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
empty-cells: show;
|
||||
width: 100% !important;
|
||||
margin-top: 10mm;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table.inhalt {
|
||||
margin: 10mm;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.inhalt td {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.text-75 td {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.wp10 {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.wp20 {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.wp25 {
|
||||
width: 29%;
|
||||
}
|
||||
|
||||
.w10p {
|
||||
width: 20mm;
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 0.3mm solid #e5e7eb;
|
||||
}
|
||||
|
||||
.bt {
|
||||
border-top: 0.3mm solid #e5e7eb;
|
||||
}
|
||||
|
||||
.bb {
|
||||
border-bottom: 0.3mm solid #e5e7eb;
|
||||
}
|
||||
|
||||
.bl {
|
||||
border-left: 0.3mm solid #e5e7eb;
|
||||
}
|
||||
|
||||
.br {
|
||||
border-right: 0.3mm solid #e5e7eb;
|
||||
}
|
||||
|
||||
.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512" fill="currentColor">
|
||||
<path d="M48 448V64c0-8.8 7.2-16 16-16H224v80c0 17.7 14.3 32 32 32h80V448c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16zM64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V154.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0H64zm90.9 233.3c-8.1-10.5-23.2-12.3-33.7-4.2s-12.3 23.2-4.2 33.7L161.6 320l-44.5 57.3c-8.1 10.5-6.3 25.5 4.2 33.7s25.5 6.3 33.7-4.2L192 359.1l37.1 47.6c8.1 10.5 23.2 12.3 33.7 4.2s12.3-23.2 4.2-33.7L222.4 320l44.5-57.3c8.1-10.5 6.3-25.5-4.2-33.7s-25.5-6.3-33.7 4.2L192 280.9l-37.1-47.6z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 652 B |
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
|
||||
<path d="M12 17.239a2.857 2.857 0 1 0 0-5.714a2.857 2.857 0 0 0 0 5.714m-.476-7.857h.952m-.476 0v2.143m3.199-1.015l.673.673m-.336-.336l-1.516 1.515M17 13.906v.952m0-.476h-2.143m1.015 3.199l-.673.673m.337-.336l-1.516-1.516m-1.544 2.98h-.952m.476 0v-2.143m-3.199 1.015l-.673-.673m.336.337l1.516-1.516M7 14.858v-.952m0 .476h2.143m-1.015-3.199l.673-.673m-.337.337l1.516 1.515" />
|
||||
<path d="M3.75 12.382v9a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-9m3-1.5l-9.885-9.226a2 2 0 0 0-2.73 0L.75 10.882" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 709 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512" fill="currentColor">
|
||||
<path d="M64 464H96v48H64c-35.3 0-64-28.7-64-64V64C0 28.7 28.7 0 64 0H229.5c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3V288H336V160H256c-17.7 0-32-14.3-32-32V48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16zM176 352h32c30.9 0 56 25.1 56 56s-25.1 56-56 56H192v32c0 8.8-7.2 16-16 16s-16-7.2-16-16V448 368c0-8.8 7.2-16 16-16zm32 80c13.3 0 24-10.7 24-24s-10.7-24-24-24H192v48h16zm96-80h32c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H304c-8.8 0-16-7.2-16-16V368c0-8.8 7.2-16 16-16zm32 128c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H320v96h16zm80-112c0-8.8 7.2-16 16-16h48c8.8 0 16 7.2 16 16s-7.2 16-16 16H448v32h32c8.8 0 16 7.2 16 16s-7.2 16-16 16H448v48c0 8.8-7.2 16-16 16s-16-7.2-16-16V432 368z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 816 B |
@@ -0,0 +1,80 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>Invoice</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="px-2 py-8 max-w-xl mx-auto">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div class="flex items-center">
|
||||
<div class="text-gray-700 font-semibold text-lg">Your Company Name</div>
|
||||
</div>
|
||||
<div class="text-gray-700">
|
||||
<div class="font-bold text-xl mb-2 uppercase">Invoice</div>
|
||||
<div class="text-sm">Date: 01/05/2023</div>
|
||||
<div class="text-sm">Invoice #: {{ $invoiceNumber }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-b-2 border-gray-300 pb-8 mb-8">
|
||||
<h2 class="text-2xl font-bold mb-4">Bill To:</h2>
|
||||
<div class="text-gray-700 mb-2">{{ $customerName }}</div>
|
||||
<div class="text-gray-700 mb-2">123 Main St.</div>
|
||||
<div class="text-gray-700 mb-2">Anytown, USA 12345</div>
|
||||
<div class="text-gray-700">johndoe@example.com</div>
|
||||
</div>
|
||||
<table class="w-full text-left mb-8">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-gray-700 font-bold uppercase py-2">Description</th>
|
||||
<th class="text-gray-700 font-bold uppercase py-2">Quantity</th>
|
||||
<th class="text-gray-700 font-bold uppercase py-2">Price</th>
|
||||
<th class="text-gray-700 font-bold uppercase py-2">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="py-4 text-gray-700">Product 1</td>
|
||||
<td class="py-4 text-gray-700">1</td>
|
||||
<td class="py-4 text-gray-700">$100.00</td>
|
||||
<td class="py-4 text-gray-700">$100.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-4 text-gray-700">Product 2</td>
|
||||
<td class="py-4 text-gray-700">2</td>
|
||||
<td class="py-4 text-gray-700">$50.00</td>
|
||||
<td class="py-4 text-gray-700">$100.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-4 text-gray-700">Product 3</td>
|
||||
<td class="py-4 text-gray-700">3</td>
|
||||
<td class="py-4 text-gray-700">$75.00</td>
|
||||
<td class="py-4 text-gray-700">$225.00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="flex justify-end mb-8">
|
||||
<div class="text-gray-700 mr-2">Subtotal:</div>
|
||||
<div class="text-gray-700">$425.00</div>
|
||||
</div>
|
||||
<div class="text-right mb-8">
|
||||
<div class="text-gray-700 mr-2">Tax:</div>
|
||||
<div class="text-gray-700">$25.50</div>
|
||||
|
||||
</div>
|
||||
<div class="flex justify-end mb-8">
|
||||
<div class="text-gray-700 mr-2">Total:</div>
|
||||
<div class="text-gray-700 font-bold text-xl">$450.50</div>
|
||||
</div>
|
||||
<div class="border-t-2 border-gray-300 pt-8 mb-8">
|
||||
<div class="text-gray-700 mb-2">Payment is due within 30 days. Late payments are subject to fees.</div>
|
||||
<div class="text-gray-700 mb-2">Please make checks payable to Your Company Name and mail to:</div>
|
||||
<div class="text-gray-700">123 Main St., Anytown, USA 12345</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in new issue
Block a user