You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
3.4 KiB
PHTML
114 lines
3.4 KiB
PHTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<style>
|
|
* {
|
|
font-size: 10px;
|
|
font-family: 'Times New Roman';
|
|
}
|
|
|
|
td,
|
|
th,
|
|
tr,
|
|
table {
|
|
border-top: 1px solid black;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
td.description,
|
|
th.description {
|
|
width: 85px;
|
|
max-width: 85px;
|
|
}
|
|
|
|
td.quantity,
|
|
th.quantity {
|
|
width: 40px;
|
|
max-width: 40px;
|
|
word-break: break-all;
|
|
}
|
|
|
|
td.price,
|
|
th.price {
|
|
width: 40px;
|
|
max-width: 40px;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.centered {
|
|
text-align: center;
|
|
align-content: center;
|
|
}
|
|
|
|
.ticket {
|
|
width: 155px;
|
|
max-width: 155px;
|
|
}
|
|
|
|
img {
|
|
max-width: inherit;
|
|
width: inherit;
|
|
}
|
|
|
|
@media print {
|
|
.hidden-print,
|
|
.hidden-print * {
|
|
display: none !important;
|
|
}
|
|
}
|
|
@page
|
|
{
|
|
size: auto; /* auto is the initial value */
|
|
/* this affects the margin in the printer settings */
|
|
margin: 2mm 2mm 2mm 2mm;
|
|
}
|
|
</style>
|
|
<title>Receipt example</title>
|
|
</head>
|
|
<body>
|
|
<div class="ticket">
|
|
<img src="./logo.png" alt="Logo">
|
|
<p class="centered">RECEIPT EXAMPLE
|
|
<br>Address line 1
|
|
<br>Address line 2</p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th class="quantity">Q.</th>
|
|
<th class="description">Description</th>
|
|
<th class="price">$$</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="quantity">1.00</td>
|
|
<td class="description">ARDUINO UNO R3</td>
|
|
<td class="price">$25.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="quantity">2.00</td>
|
|
<td class="description">JAVASCRIPT BOOK</td>
|
|
<td class="price">$10.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="quantity">1.00</td>
|
|
<td class="description">STICKER PACK</td>
|
|
<td class="price">$10.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="quantity"></td>
|
|
<td class="description">TOTAL</td>
|
|
<td class="price">$55.00</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p class="centered">Thanks for your purchase!
|
|
<br>parzibyte.me/blog</p>
|
|
</div>
|
|
<button id="btnPrint" class="hidden-print" onclick="window.print()">Print</button>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |