72 lines
9.8 KiB
HTML
72 lines
9.8 KiB
HTML
<!doctype html>
|
|
<html lang="fa" dir="rtl">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>پیشنمایش اقدام ارسال فیش · چهارسو</title>
|
|
<style>
|
|
@font-face{font-family:Vazirmatn;src:url("../../static/fonts/vazirmatn-arabic-wght-normal.woff2?v=receipt-preview-1") format("woff2");font-weight:100 900;font-display:swap}
|
|
*{box-sizing:border-box}body{margin:0;background:#eee;color:#08376b;font-family:Vazirmatn,sans-serif;font-size:14px;line-height:1.8}
|
|
button{font:inherit;cursor:pointer}a{color:inherit}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
|
|
.preview-note{padding:9px 16px;background:#fff3da;color:#805300;text-align:center;font-size:12px}
|
|
.header{background:white;border-bottom:1px solid #dce5ed}.header-inner{max-width:1000px;margin:auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between}
|
|
.brand{display:flex;align-items:center;gap:16px}.brand img{width:85px;height:auto}.brand strong{display:block;font-size:20px}.brand small{color:#526c86}
|
|
.main{max-width:900px;padding:28px 24px 48px;margin:auto}.breadcrumb{font-size:12px;color:#526c86;margin-bottom:20px}
|
|
.title{display:flex;align-items:center;gap:16px;margin-bottom:20px}.page-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:#e5f4ff;border:1px solid #cde6f7}.page-icon svg{width:28px;height:28px}h1{font-size:28px;line-height:1.5;margin:0;font-weight:900}.title p{margin:5px 0 0;color:#526c86;font-size:14px}
|
|
.notice{background:white;border:1px solid #dce5ed;border-radius:23px;overflow:hidden}
|
|
.notice-head{padding:20px 22px;border-bottom:1px solid #e7edf2;display:flex;justify-content:space-between;gap:12px}.notice-head strong{font-size:16px}.notice-head small{display:block;color:#526c86;font-size:12px;margin-top:4px}.amount{font-size:20px;font-weight:900;text-align:left}.amount span{font-size:12px;font-weight:400}.state{font-size:12px;color:#526c86;text-align:left}
|
|
.details{padding:20px 22px}.bank{display:flex;justify-content:space-between;gap:8px;margin-bottom:16px}.bank span{color:#526c86}
|
|
.values{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}.value{border:1px solid #dce5ed;background:#fafcfe;border-radius:12px;padding:12px 14px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px}.value dt{font-size:12px;color:#526c86}.value dd{margin:0;grid-column:1/-1;direction:ltr;text-align:right;font-size:16px;overflow-wrap:anywhere}.copy{min-height:44px;border:1px solid #dce5ed;background:white;border-radius:10px;color:#08376b;display:flex;align-items:center;gap:6px;padding:4px 10px;font-size:12px}.copy svg{width:16px;height:16px}
|
|
.warning{padding:12px 14px;border-right:3px solid #fa9f00;background:#fff8eb;border-radius:10px;margin:16px 0 12px;line-height:1.9}
|
|
.copy-all{background:transparent;border:0;color:#08376b;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;text-decoration:underline;text-underline-offset:4px}
|
|
.next-step{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#f0f8fd;border:1px solid #cde6f7;border-radius:16px;padding:20px;margin-top:20px}
|
|
.next-step h2{font-size:18px;font-weight:900;margin:0 0 4px}.next-step p{font-size:14px;color:#526c86;margin:0;max-width:390px}
|
|
.send{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 20px;border:1px solid #08376b;border-radius:12px;background:#08376b;color:white;font-size:16px;font-weight:800;white-space:nowrap;transition:background .15s,box-shadow .15s}.send:hover{background:#0b4c8c;box-shadow:0 3px 10px #08376b1a}.send:active{background:#08376b}
|
|
button:focus-visible{outline:3px solid #1977ce;outline-offset:3px}
|
|
.extra{margin-top:24px;padding-top:20px;border-top:1px solid #e7edf2}.extra h3{font-size:14px;font-weight:800;margin:0 0 8px}.extra p{margin:4px 0;font-size:14px}.extra .muted{color:#526c86}
|
|
.bottom{margin-top:20px;padding-top:16px;border-top:1px solid #e7edf2;display:flex;justify-content:space-between;align-items:center;gap:12px;color:#526c86}.bottom button{color:#08376b;background:transparent;border:0;min-height:44px;padding:0;display:flex;align-items:center;gap:8px;text-decoration:underline;text-underline-offset:4px}
|
|
.feedback{margin-top:20px;background:white;border:1px solid #dce5ed;border-radius:12px;padding:12px 16px;color:#526c86}.feedback:empty{display:none}
|
|
.footer{text-align:center;font-size:12px;color:#526c86;margin-top:24px}
|
|
@media(max-width:639px){.header-inner{padding:12px 16px}.brand{gap:10px}.brand img{width:65px}.header-label{display:none}.main{padding:20px 12px 32px}.title{gap:12px;align-items:flex-start}h1{font-size:24px}.page-icon{width:48px;height:48px;flex-shrink:0}.notice-head{padding:16px;flex-direction:column;gap:8px}.amount,.state{text-align:right}.details{padding:16px}.bank{flex-direction:column;gap:0}.values{grid-template-columns:1fr}.next-step{flex-direction:column;align-items:stretch;gap:16px;padding:18px 16px}.send{width:100%}.bottom{flex-direction:column;align-items:flex-start;gap:0}.extra{margin-top:20px}}
|
|
@media(prefers-reduced-motion:reduce){.send{transition:none}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="preview-note">پیشنمایش پیشنهادی · تمام دادهها ساختگیاند · پرداخت یا ارسال واقعی انجام نمیشود</div>
|
|
<svg style="position:absolute;width:0;height:0;overflow:hidden" aria-hidden="true">
|
|
<symbol id="bank" viewBox="0 0 24 24"><path d="m3 7 9-4 9 4v3H3ZM5 10v7M10 10v7M14 10v7M19 10v7M3 17h18v4H3"/></symbol>
|
|
<symbol id="copy" viewBox="0 0 24 24"><rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V3H3v13h5"/></symbol>
|
|
<symbol id="receipt" viewBox="0 0 24 24"><path d="M5 3h14v18l-3-2-4 2-4-2-3 2ZM9 8h6M9 12h6"/></symbol>
|
|
</svg>
|
|
<header class="header"><div class="header-inner"><div class="brand"><img src="../../static/images/company-logo.png?v=receipt-preview-1" alt="لوله گستر گلپایگان"><div><strong>چهارسو</strong><small>مرکز خدمات مشتریان</small></div></div><span class="header-label">خدمات مشتریان</span></div></header>
|
|
<main class="main">
|
|
<nav class="breadcrumb" aria-label="مسیر صفحه">شماره حسابها / جزئیات واریز</nav>
|
|
<div class="title"><span class="page-icon"><svg aria-hidden="true"><use href="#bank"/></svg></span><div><h1>جزئیات واریز</h1><p>اطلاعات حساب را بردارید؛ پس از واریز، فیش را از همین صفحه ارسال کنید.</p></div></div>
|
|
<article class="notice">
|
|
<header class="notice-head"><div><strong>واریز بابت سفارش لوله و اتصالات</strong><small>اعلامیهٔ نمونه ۱۰۴۲ · ۲۰ مهر ۱۴۰۵</small></div><div><div class="amount">۲۵۰٬۰۰۰٬۰۰۰ <span>ریال</span></div><div class="state">هنوز فیشی ارسال نشده است</div></div></header>
|
|
<div class="details">
|
|
<div class="bank"><strong>حساب نمونهٔ شرکت · بانک نمونه</strong><span>صاحب حساب: شرکت نمونه</span></div>
|
|
<dl class="values">
|
|
<div class="value"><dt>مبلغ (ریال)</dt><button class="copy" type="button"><svg aria-hidden="true"><use href="#copy"/></svg>کپی</button><dd>۲۵۰٬۰۰۰٬۰۰۰</dd></div>
|
|
<div class="value"><dt>شماره حساب · ساختگی</dt><button class="copy" type="button"><svg aria-hidden="true"><use href="#copy"/></svg>کپی</button><dd>0000 0000 0000</dd></div>
|
|
<div class="value"><dt>شبا · ساختگی</dt><button class="copy" type="button"><svg aria-hidden="true"><use href="#copy"/></svg>کپی</button><dd>IR00 0000 0000 0000 0000 0000 00</dd></div>
|
|
<div class="value"><dt>شناسه واریز · ضروری</dt><button class="copy" type="button"><svg aria-hidden="true"><use href="#copy"/></svg>کپی</button><dd>000000000</dd></div>
|
|
</dl>
|
|
<p class="warning">هنگام واریز، حتماً شناسهٔ واریز را در فرم بانکی وارد کنید؛ واریز بدون این شناسه معتبر نخواهد بود.</p>
|
|
<button class="copy-all" type="button"><svg aria-hidden="true"><use href="#copy"/></svg>کپی کامل اطلاعات واریز</button>
|
|
<section class="next-step" aria-labelledby="next-step-title"><div><h2 id="next-step-title">پس از واریز</h2><p>تصویر فیش را برای بررسی این واریز ارسال کنید.</p></div><button class="send" type="button" id="send-preview"><svg aria-hidden="true"><use href="#receipt"/></svg>ارسال فیش این واریز</button></section>
|
|
<section class="extra"><h3>اطلاعات تکمیلی و توضیحات</h3><p>فاکتور: نمونه ۱۲۳۴</p><p class="muted">این توضیح نمونه برای نمایش جایگاه اطلاعات تکمیلی پس از بخش ارسال فیش است.</p></section>
|
|
<div class="bottom"><span>تأییدشده: ۰ ریال · باقیمانده: ۲۵۰٬۰۰۰٬۰۰۰ ریال</span><button type="button"><svg aria-hidden="true"><use href="#copy"/></svg>کپی لینک این صفحه</button></div>
|
|
</div>
|
|
</article>
|
|
<p class="feedback" id="feedback" role="status" aria-live="polite"></p>
|
|
<p class="footer">پیشنمایش مستقل برای بررسی چیدمان · کد اصلی برنامه تغییر نکرده است</p>
|
|
</main>
|
|
<script>
|
|
document.querySelectorAll('button').forEach(button=>button.addEventListener('click',()=>{
|
|
document.getElementById('feedback').textContent=button.id==='send-preview'?'در نسخهٔ اصلی، این دکمه فرم ارسال فیش مرتبط با همین اعلامیه را باز میکند. این پیشنمایش ارسال واقعی ندارد.':'این کنترل در پیشنمایش فقط نمایشی است و اطلاعاتی کپی نمیکند.';
|
|
}));
|
|
</script>
|
|
</body>
|
|
</html>
|