customerTicket/design-prototypes/chaharsu/bank-accounts.html

<!doctype html>
<html lang="fa" dir="rtl" data-static-version="1791111429240969400">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><meta name="theme-color" content="#08376b"><title>شماره حساب‌ها · چهارسو</title>
<link rel="icon" href="../../static/images/favicon.ico?v=1791111429240969400"><link rel="stylesheet" href="../../static/css/tailwind.css?v=1791111429240969400"><link rel="stylesheet" href="service-pages.css?v=1791111429240969400">
<script defer src="payment-demo-data.js?v=1791111429240969400"></script><script defer src="payment-services.js?v=1791111429240969400"></script></head>
<body data-finance-page="accounts">
<!-- DESIGN PROTOTYPE ONLY: صفحهٔ مستقل با URL/view/template مستقل در پیاده‌سازی اصلی؛ به modal خانه تبدیل نشود.
پوسته از base.html و دارایی‌ها از static_asset_version استفاده کنند. هیچ اتصال به دیتابیس یا ارسال واقعی وجود ندارد.
اطلاعات پرداخت تنها برای مشتری مخاطب اعلامیه از بک‌اند تأمین شود؛ فهرست عمومی حساب‌ها نمایش داده نشود.
پنهان کردن شماره‌ها در UI کنترل دسترسی نیست: مجوز مشاهده/ثبت فیش و ارتباط اعلامیه با مشتری باید در سرور بررسی شود.
پارامتر notice فقط شناسهٔ اعلامیه است، نه مبلغ یا شماره حساب؛ سرور دادهٔ معتبر را دوباره دریافت کند. -->
<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden" aria-hidden="true">
<symbol id="i-receipt" viewBox="0 0 24 24"><path d="M5 3h14v18l-3-2-4 2-4-2-3 2ZM9 8h6M9 12h6"/></symbol>
<symbol id="i-bank" viewBox="0 0 24 24"><path d="m3 7 9-4 9 4v3H3ZM5 10v7M10 10v7M14 10v7M19 10v7M3 17h18v4H3"/></symbol>
<symbol id="i-copy" viewBox="0 0 24 24"><rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V3H3v13h5"/></symbol>
<symbol id="i-chevron" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></symbol>
<symbol id="i-upload" viewBox="0 0 24 24"><path d="M12 16V3m-5 5 5-5 5 5M4 16v5h16v-5"/></symbol>
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"/><path d="m15 15 6 6"/></symbol></svg><div class="preview-bar"><b>پیش‌نمایش طراحی چهارسو</b> · داده‌ها ساختگی‌اند؛ پرداخت و ارسال واقعی انجام نمی‌شود.</div>
<header class="page-header"><div class="header-inner"><a class="brand" href="index.html?v=1791111429240969400"><img src="../../static/images/company-logo.png?v=1791111429240969400" alt="لوله گستر گلپایگان" width="300" height="130"><span class="brand-copy"><b>چهارسو</b><small>مرکز خدمات مشتریان</small></span></a><a class="header-home" href="index.html?v=1791111429240969400">بازگشت به خدمات ←</a></div></header>
<main class="service-main"><nav class="breadcrumb" aria-label="مسیر صفحه"><a href="index.html?v=1791111429240969400">خدمات چهارسو</a><span aria-hidden="true">/</span><span aria-current="page">شماره حساب‌ها</span></nav>

<div class="title-row"><span class="page-icon"><svg class="icon" aria-hidden="true"><use href="#i-bank"/></svg></span><div><h1>شماره حساب‌ها</h1><p class="subtitle">اطلاعات واریزهای اعلام‌شده توسط کارشناس.</p></div></div>
<p class="finance-guidance" role="note">از کارشناس بخواهید شماره حساب‌ها و شناسهٔ واریز مرتبط را برای شما ارسال کند.</p>
<section class="notice-section" aria-labelledby="notices-title"><div class="list-heading"><div><h2 id="notices-title">واریزهای شما</h2></div><span id="notice-count" class="meta" role="status"></span></div>
<label class="finance-search" for="notice-search"><svg class="icon" aria-hidden="true"><use href="#i-search"/></svg><span class="sr-only">جست‌وجو در اعلامیه‌های واریز</span><input id="notice-search" type="search" placeholder="جست‌وجو با فاکتور، بانک یا موضوع…" autocomplete="off"></label>
<div id="payment-notices" class="payment-notices"></div>
<div id="notices-empty" class="empty-notices" hidden><h3>موردی پیدا نشد</h3><p>شمارهٔ فاکتور یا عبارت دیگری را جست‌وجو کنید.</p><button id="clear-search" type="button" class="finance-button secondary">پاک کردن جست‌وجو</button></div>
<!-- EMPTY STATE: اگر اعلامیه‌ای وجود ندارد، عنوان «هنوز اطلاعات واریزی برای شما ارسال نشده است» و توضیح انتظار برای کارشناس نمایش داده شود؛ هیچ حساب عمومی یا حساب جایگزین نمایش داده نشود. -->
</section>
<template id="notice-template"><article class="payment-notice"><h3><button type="button" class="notice-toggle" aria-expanded="false"><span class="notice-summary"><span class="notice-top"><strong class="notice-title"></strong><span class="payment-state"></span></span><span class="notice-amount"></span><span class="notice-meta"></span></span><svg class="icon" aria-hidden="true"><use href="#i-chevron"/></svg></button></h3>
<div class="notice-detail" hidden><div class="notice-bank"><b class="notice-bank-name"></b><span class="notice-holder"></span></div><dl class="payment-fields essential-fields"></dl>
<section class="notice-extra" aria-label="اطلاعات تکمیلی و توضیحات"><h4>اطلاعات تکمیلی و توضیحات</h4><div class="notice-context"><span class="notice-author"></span><span class="notice-date"></span></div><dl class="extra-fields"></dl></section>
<!-- IMPLEMENTATION NOTE: کپی تکی فقط مبلغ، شماره حساب، شبا، شماره کارت و شناسهٔ واریز موجود را شامل می‌شود.
بانک، صاحب حساب، فاکتور و توضیحات دکمهٔ کپی تکی ندارند؛ اطلاعات تکمیلی همیشه در کارت بازشده نمایان‌اند و کنترل جمع‌شونده ندارند.
«کپی کامل اطلاعات» باید همیشه از دادهٔ کامل اعلامیه ساخته شود، نه از متنِ قابل مشاهدهٔ DOM؛ خلاصه شدن نمایش یا حذف دکمه‌های کپی نباید بانک، صاحب حساب، فاکتور، تاریخ، مبلغ، شماره‌ها، شناسه یا توضیحات را از متن کامل حذف کند. -->
<div class="notice-actions"><button type="button" class="finance-button secondary copy-complete"><svg class="icon" aria-hidden="true"><use href="#i-copy"/></svg>کپی کامل اطلاعات</button><a class="finance-button receipt-link"><svg class="icon" aria-hidden="true"><use href="#i-receipt"/></svg>ارسال فیش این واریز</a></div></div></article></template>
<div class="service-footer"><a href="index.html?v=1791111429240969400">→ بازگشت به خدمات چهارسو</a></div>
<!-- در نسخهٔ اصلی امضا از developer_credit در تنظیمات برند تأمین شود. -->
<p class="page-footer">طراحی و توسعه: محمد جواد فصاحت <a href="tel:09202202129" dir="ltr">09202202129</a></p></main>
<div id="copy-feedback" class="copy-feedback" role="status" aria-live="polite" aria-atomic="true"></div>
<dialog id="manual-copy" class="manual-copy" aria-labelledby="manual-copy-title"><h2 id="manual-copy-title">کپی اطلاعات</h2><p>کپی خودکار در این مرورگر ممکن نشد. متن را انتخاب کنید و از گزینهٔ کپی دستگاه استفاده کنید.</p><textarea id="manual-copy-text" readonly aria-label="متن آماده برای کپی" dir="auto"></textarea><div><button type="button" id="select-copy-text" class="finance-button">انتخاب متن</button><button type="button" id="close-copy" class="finance-button secondary">بستن</button></div></dialog>
<noscript><p class="service-notice">برای مشاهدهٔ تعامل‌های این نمونه، جاوااسکریپت را فعال کنید.</p></noscript></body></html>