marzban-dev
394 lines
10 KiB
HTML
394 lines
10 KiB
HTML
<!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>
|