Convert factor to html
This commit is contained in:
marzban-dev
@@ -0,0 +1,393 @@
|
||||
<!doctype html>
|
||||
<html lang="fa" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>صورتحساب الکترونیکی - فروشگاه هیملز</title>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #f8fafc;
|
||||
color: #1e293b;
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
padding: 3rem 1rem;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.pattern-bg {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
left: -50%;
|
||||
top: -50%;
|
||||
background: url("logo-pattern.png") repeat;
|
||||
background-size: 150px;
|
||||
opacity: 0.05;
|
||||
transform: rotate(12deg);
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
width: 100%;
|
||||
max-width: 1300px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.qr-box {
|
||||
position: absolute;
|
||||
left: 48px;
|
||||
bottom: 0;
|
||||
transform: translateY(50%);
|
||||
width: 140px;
|
||||
aspect-ratio: 1;
|
||||
border: 2px solid #6366f1;
|
||||
background: white;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
padding: 4px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.qr-box img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.75rem;
|
||||
font-weight: bold;
|
||||
color: #6366f1;
|
||||
gap: 2.25rem;
|
||||
margin-bottom: 2.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-row img {
|
||||
width: 96px;
|
||||
}
|
||||
|
||||
.grid-row {
|
||||
display: grid;
|
||||
grid-template-columns: 80px 1fr 300px;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.vertical-label {
|
||||
background: #e0e7ff;
|
||||
border: 2px solid #6366f1;
|
||||
color: #6366f1;
|
||||
border-radius: 1rem;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
transform: rotate(180deg);
|
||||
padding: 0.75rem 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.info-panel {
|
||||
background: white;
|
||||
border: 2px solid #6366f1;
|
||||
border-radius: 1rem;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.info-flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem 2rem;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.info-item span:first-child {
|
||||
font-weight: 600;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.doc-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* Buyer row - full width */
|
||||
.buyer-row {
|
||||
height: 100px;
|
||||
display: grid;
|
||||
grid-template-columns: 80px 1fr;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
border: 2px solid #6366f1;
|
||||
border-radius: 1rem;
|
||||
background: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 0.9rem 0.6rem;
|
||||
border: 2px solid #e0e7ff;
|
||||
}
|
||||
|
||||
thead th {
|
||||
background: #e0e7ff;
|
||||
color: #6366f1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.summary-row td {
|
||||
background: #f1f5f9;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.grand-total-row {
|
||||
background: #e0e7ff;
|
||||
}
|
||||
|
||||
.grand-total-row td:last-child {
|
||||
/* border-top: 3px solid #6366f1; */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.signatures {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 1.5rem;
|
||||
padding: 1.25rem;
|
||||
border-top: 2px solid #6366f1;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.sign-item {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sign-item span:first-child {
|
||||
font-weight: 600;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.grid-row {
|
||||
grid-template-columns: 80px 1fr;
|
||||
}
|
||||
.doc-info {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.buyer-row {
|
||||
grid-template-columns: 80px 1fr;
|
||||
}
|
||||
.signatures {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.qr-box {
|
||||
position: static;
|
||||
margin: 2rem auto;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.info-flex,
|
||||
.signatures {
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
.title-row {
|
||||
font-size: 1.4rem;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="pattern-bg"></div>
|
||||
|
||||
<div class="main-container">
|
||||
<!-- QR -->
|
||||
<div class="qr-box">
|
||||
<img src="qr-code.png" alt="QR" />
|
||||
</div>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="title-row">
|
||||
<div class="text-end" style="width: 100%;display: flex;justify-content: end;">صورت حساب الکترونیکی</div>
|
||||
<div>
|
||||
<img src="logo2.png" alt="Logo" />
|
||||
</div>
|
||||
<div class="text-start" style="width: 100%;display: flex;justify-content: start;">فروشگاه هیملز</div>
|
||||
</div>
|
||||
|
||||
<!-- Seller + Document Info -->
|
||||
<div class="grid-row">
|
||||
<div class="vertical-label">فروشگاه<br />هی ملز</div>
|
||||
|
||||
<div class="info-panel">
|
||||
<div class="info-flex">
|
||||
<div class="info-item">
|
||||
<span>فرستنده :</span><span>مقدار</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>شناسه ملی :</span><span>مقدار</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>شماره ثبت :</span><span>مقدار</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>شماره مجوز :</span><span>مقدار</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>نشانی شرکت :</span><span>مقدار</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>کد پستی :</span><span>مقدار</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>تلفن و فکس :</span><span>مقدار</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-panel">
|
||||
<div class="doc-info">
|
||||
<div class="info-item">
|
||||
<span>شماره فاکتور :</span><span>مقدار</span>
|
||||
</div>
|
||||
<div class="info-item"><span>تاریخ :</span><span>مقدار</span></div>
|
||||
<div class="info-item">
|
||||
<span>شماره پیگیری :</span><span>مقدار</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Buyer -->
|
||||
<div class="buyer-row">
|
||||
<div class="vertical-label">خریدار</div>
|
||||
<div class="info-panel">
|
||||
<div class="info-flex">
|
||||
<div class="info-item"><span>خریدار :</span><span>مقدار</span></div>
|
||||
<div class="info-item">
|
||||
<span>شماره ملی :</span><span>مقدار</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>شماره تماس :</span><span>مقدار</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>کد پستی :</span><span>مقدار</span>
|
||||
</div>
|
||||
<div class="info-item"><span>نشانی :</span><span>مقدار</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table + Footer -->
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ردیف</th>
|
||||
<th>شناسه کالا یا خدمات</th>
|
||||
<th>شرح کالا یا خدمات</th>
|
||||
<th>تعداد</th>
|
||||
<th>مبلغ واحد (تومان)</th>
|
||||
<th>مبلغ کل (تومان)</th>
|
||||
<th>تخفیف (تومان)</th>
|
||||
<th>مبلغ کل پس از تخفیف (تومان)</th>
|
||||
<th>جمع مالیات و عوارض ارزش افزوده (تومان)</th>
|
||||
<th>جمع کل پس از تخفیف و مالیات و عوارض (تومان)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- placeholder row -->
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
</tr>
|
||||
|
||||
<tr class="summary-row">
|
||||
<td colspan="3">جمع کل</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
<td>---</td>
|
||||
</tr>
|
||||
|
||||
<tr class="grand-total-row">
|
||||
<td colspan="9" style="text-align: center; border-left: none">
|
||||
جمع کل پس از کسر تخفیف با احتساب مالیات و عوارض (تومان)
|
||||
</td>
|
||||
<td>---</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="signatures">
|
||||
<div class="sign-item">
|
||||
<span>مهر و امضای فروشگاه :</span><span>مقدار</span>
|
||||
</div>
|
||||
<div class="sign-item">
|
||||
<span>تاریخ تحویل :</span><span>مقدار</span>
|
||||
</div>
|
||||
<div class="sign-item">
|
||||
<span>ساعت تحویل :</span><span>مقدار</span>
|
||||
</div>
|
||||
<div class="sign-item">
|
||||
<span>روش های پرداخت :</span><span>مقدار</span>
|
||||
</div>
|
||||
<div class="sign-item">
|
||||
<span>مهر و امضای خریدار :</span><span>مقدار</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user