366 lines
15 KiB
HTML
366 lines
15 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
|
||
/>
|
||
<title>BD Center</title>
|
||
<link rel="stylesheet" href="../../common/theme.css" />
|
||
<link rel="stylesheet" href="../common/center.css" />
|
||
<link
|
||
rel="stylesheet"
|
||
href="./style.css?v=20260604-bd-center-real-skeleton"
|
||
/>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="bd-center" aria-label="BD Center">
|
||
<div class="hero-bg" aria-hidden="true"></div>
|
||
|
||
<nav class="title-bar">
|
||
<button
|
||
class="back-button"
|
||
id="backButton"
|
||
type="button"
|
||
aria-label="Back"
|
||
data-i18n-aria="bd_center.back"
|
||
>
|
||
<svg viewBox="0 0 32 32" aria-hidden="true">
|
||
<path d="M20 8 12 16l8 8" />
|
||
</svg>
|
||
</button>
|
||
<h1 data-i18n="bd_center.title">BD Center</h1>
|
||
<div class="language-switcher">
|
||
<button
|
||
class="language-button"
|
||
type="button"
|
||
aria-label="Change language"
|
||
aria-expanded="false"
|
||
data-language-toggle
|
||
data-current-lang
|
||
data-i18n-aria="bd_center.change_language"
|
||
>
|
||
EN
|
||
</button>
|
||
<div class="language-menu" data-language-menu hidden>
|
||
<button type="button" data-lang-option="en">EN</button>
|
||
<button type="button" data-lang-option="ar">AR</button>
|
||
<button type="button" data-lang-option="tr">TR</button>
|
||
<button type="button" data-lang-option="es">ES</button>
|
||
<button type="button" data-lang-option="zh">ZH</button>
|
||
<button type="button" data-lang-option="id">ID</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<main class="content">
|
||
<section class="card profile-card">
|
||
<div class="avatar-shell">
|
||
<img class="avatar-image" id="profileAvatar" alt="" />
|
||
<div
|
||
class="avatar-fallback"
|
||
id="profileAvatarFallback"
|
||
aria-hidden="true"
|
||
hidden
|
||
>
|
||
B
|
||
</div>
|
||
</div>
|
||
<div class="profile-copy">
|
||
<div class="role-pill" data-i18n="bd_center.role">
|
||
BD
|
||
</div>
|
||
<div class="name" id="profileName">-</div>
|
||
<div class="meta" id="profileUID">UID: -</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div data-contact-card></div>
|
||
|
||
<section class="card salary-card">
|
||
<div class="salary-head">
|
||
<h2 data-i18n="bd_center.salary">Salary</h2>
|
||
<button
|
||
class="text-link"
|
||
id="withdrawExchangeButton"
|
||
type="button"
|
||
data-i18n="bd_center.withdraw_exchange"
|
||
>
|
||
Withdraw/Exchange
|
||
</button>
|
||
</div>
|
||
<div class="salary-value">
|
||
<span class="coin-icon" aria-hidden="true">$</span>
|
||
<strong id="availableBalance">0.00</strong>
|
||
</div>
|
||
</section>
|
||
|
||
<section
|
||
class="card menu-card"
|
||
aria-label="BD tools"
|
||
data-i18n-aria="bd_center.tools"
|
||
>
|
||
<button
|
||
class="menu-row"
|
||
id="messageButton"
|
||
type="button"
|
||
data-action="messages"
|
||
data-label="Messages"
|
||
>
|
||
<span class="menu-icon" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24">
|
||
<path
|
||
d="M4 7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3h-5l-5 4v-4a3 3 0 0 1-3-3Z"
|
||
/>
|
||
<path d="M8 8h8M8 12h5" />
|
||
</svg>
|
||
</span>
|
||
<span class="menu-label" data-i18n="bd_center.messages"
|
||
>Messages</span
|
||
>
|
||
<span
|
||
class="message-unread-dot"
|
||
id="messageUnreadDot"
|
||
hidden
|
||
></span>
|
||
<span class="chevron" aria-hidden="true">›</span>
|
||
</button>
|
||
<button
|
||
class="menu-row"
|
||
id="inviteAgentButton"
|
||
type="button"
|
||
data-action="invite-agent"
|
||
data-label="Invite Agent"
|
||
>
|
||
<span class="menu-icon" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24">
|
||
<path d="M10 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" />
|
||
<path
|
||
d="M3 21c.9-4.7 3.2-7 7-7 2 0 3.7.7 5 2"
|
||
/>
|
||
<path d="M19 9v8" />
|
||
<path d="M15 13h8" />
|
||
</svg>
|
||
</span>
|
||
<span
|
||
class="menu-label"
|
||
data-i18n="bd_center.invite_agent"
|
||
>Invite Agent</span
|
||
>
|
||
<span class="chevron" aria-hidden="true">›</span>
|
||
</button>
|
||
</section>
|
||
|
||
<section class="card team-stats-card">
|
||
<div class="team-list-head">
|
||
<h2 data-i18n="bd_center.agency_statistics">
|
||
Agency Statistics
|
||
</h2>
|
||
</div>
|
||
<div class="team-list-period">
|
||
<label class="month-filter">
|
||
<span data-i18n="bd_center.month">Month</span>
|
||
<button
|
||
class="month-trigger"
|
||
id="billMonthButton"
|
||
type="button"
|
||
aria-label="Month"
|
||
data-i18n-aria="bd_center.month"
|
||
>
|
||
<span id="billMonthText">2026/06</span>
|
||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M7 2v4M17 2v4" />
|
||
<path
|
||
d="M4 8h16M6 4h12a2 2 0 0 1 2 2v14H4V6a2 2 0 0 1 2-2Z"
|
||
/>
|
||
<path
|
||
d="M8 12h2M12 12h2M16 12h2M8 16h2M12 16h2"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
</label>
|
||
</div>
|
||
<div class="team-list-summary" id="teamListSummary"></div>
|
||
</section>
|
||
|
||
<section class="card team-users-card">
|
||
<div class="team-list-head">
|
||
<h2 data-i18n="bd_center.agency_list">Agency List</h2>
|
||
</div>
|
||
<div class="team-list-content" id="teamListContent"></div>
|
||
</section>
|
||
</main>
|
||
|
||
<div class="home-indicator" aria-hidden="true"></div>
|
||
|
||
<div
|
||
class="message-modal"
|
||
id="messageModal"
|
||
hidden
|
||
aria-hidden="true"
|
||
>
|
||
<button
|
||
class="modal-backdrop"
|
||
id="messageBackdrop"
|
||
type="button"
|
||
aria-label="Close"
|
||
data-i18n-aria="bd_center.close"
|
||
></button>
|
||
<section
|
||
class="message-dialog"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="messageTitle"
|
||
>
|
||
<div class="sheet-head">
|
||
<h2 id="messageTitle" data-i18n="bd_center.messages">
|
||
Messages
|
||
</h2>
|
||
<button
|
||
class="sheet-close"
|
||
id="messageCloseButton"
|
||
type="button"
|
||
aria-label="Close"
|
||
data-i18n-aria="bd_center.close"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
<div class="message-list" id="messageList"></div>
|
||
<div class="sheet-empty" id="messageEmpty" hidden></div>
|
||
</section>
|
||
</div>
|
||
|
||
<div
|
||
class="invite-modal"
|
||
id="inviteModal"
|
||
hidden
|
||
aria-hidden="true"
|
||
>
|
||
<button
|
||
class="modal-backdrop"
|
||
id="inviteBackdrop"
|
||
type="button"
|
||
aria-label="Close"
|
||
data-i18n-aria="bd_center.close"
|
||
></button>
|
||
<section
|
||
class="invite-dialog"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="inviteModalTitle"
|
||
>
|
||
<div class="invite-head">
|
||
<h2
|
||
id="inviteModalTitle"
|
||
data-i18n="bd_center.invite_agent"
|
||
>
|
||
Invite Agent
|
||
</h2>
|
||
<button
|
||
class="invite-close"
|
||
id="inviteCloseButton"
|
||
type="button"
|
||
aria-label="Close"
|
||
data-i18n-aria="bd_center.close"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
<div class="invite-body">
|
||
<form class="invite-search-form" id="inviteSearchForm">
|
||
<label class="invite-field">
|
||
<span data-i18n="bd_center.enter_user_id"
|
||
>Enter User ID</span
|
||
>
|
||
<div class="invite-search-control">
|
||
<input
|
||
id="inviteSearchInput"
|
||
type="text"
|
||
inputmode="text"
|
||
placeholder="Enter User ID"
|
||
data-i18n-placeholder="bd_center.enter_user_id"
|
||
/>
|
||
<button
|
||
id="inviteSearchButton"
|
||
type="submit"
|
||
data-i18n="bd_center.search"
|
||
>
|
||
Search
|
||
</button>
|
||
</div>
|
||
</label>
|
||
</form>
|
||
<div
|
||
class="invite-status"
|
||
id="inviteStatus"
|
||
role="status"
|
||
hidden
|
||
></div>
|
||
<div class="invite-list" id="inviteList"></div>
|
||
<div
|
||
class="invite-empty"
|
||
id="inviteEmpty"
|
||
data-i18n="bd_center.no_users_found"
|
||
>
|
||
No users found
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<div
|
||
class="sheet-modal month-sheet-modal"
|
||
id="monthSheet"
|
||
hidden
|
||
aria-hidden="true"
|
||
>
|
||
<button
|
||
class="modal-backdrop"
|
||
id="monthSheetBackdrop"
|
||
type="button"
|
||
aria-label="Close"
|
||
data-i18n-aria="bd_center.close"
|
||
></button>
|
||
<section
|
||
class="bottom-sheet month-sheet"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="monthSheetTitle"
|
||
>
|
||
<div class="sheet-head">
|
||
<h2 id="monthSheetTitle" data-i18n="bd_center.month">
|
||
Month
|
||
</h2>
|
||
<button
|
||
class="sheet-close"
|
||
id="monthSheetCloseButton"
|
||
type="button"
|
||
aria-label="Close"
|
||
data-i18n-aria="bd_center.close"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
<div
|
||
class="month-option-list"
|
||
id="monthOptionList"
|
||
role="listbox"
|
||
aria-label="Month"
|
||
data-i18n-aria="bd_center.month"
|
||
></div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="../../common/toast.js"></script>
|
||
<script src="../../common/jsbridge.js"></script>
|
||
<script src="../../common/i18n.js"></script>
|
||
<script src="../../common/api.js?v=20260604-bd-center"></script>
|
||
<script src="../common/contact-card.js?v=20260629-user-contact"></script>
|
||
<script src="./script.js?v=20260604-bd-center-real-skeleton"></script>
|
||
</body>
|
||
</html>
|