2026-06-24 11:37:57 +08:00

456 lines
19 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>Agency Center</title>
<link rel="stylesheet" href="../../common/theme.css" />
<link rel="stylesheet" href="../common/center.css" />
<link
rel="stylesheet"
href="./style.css?v=20260605-agency-real-policy"
/>
</head>
<body>
<div class="agency-center" aria-label="Agency 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="agency_center.back"
>
<svg viewBox="0 0 32 32" aria-hidden="true">
<path d="M20 8 12 16l8 8" />
</svg>
</button>
<h1 data-i18n="agency_center.title">Agency 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="agency_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>
</div>
</div>
</nav>
<main class="content">
<section class="card profile-card">
<div class="avatar-shell">
<img class="avatar-image" id="agencyAvatar" alt="" />
<div
class="avatar-fallback"
id="agencyAvatarFallback"
aria-hidden="true"
hidden
>
A
</div>
</div>
<div class="profile-copy">
<div class="name" id="agencyName">-</div>
<div class="meta" id="agencyShortId">ID: -</div>
<div class="bd-row" id="bdRow" hidden>
<span
class="bd-label"
data-i18n="agency_center.bd_label"
>BD:</span
>
<span class="bd-avatar-shell">
<img
class="bd-avatar-image"
id="bdAvatar"
alt=""
/>
<span
class="bd-avatar-fallback"
id="bdAvatarFallback"
aria-hidden="true"
hidden
>B</span
>
</span>
<span class="bd-short-id" id="bdShortId"></span>
</div>
</div>
<button
class="message-button"
id="messageButton"
type="button"
aria-label="Open messages"
data-i18n-aria="agency_center.open_messages"
>
<svg viewBox="0 0 28 28" aria-hidden="true">
<path
d="M5 8.5A3.5 3.5 0 0 1 8.5 5h11A3.5 3.5 0 0 1 23 8.5v7A3.5 3.5 0 0 1 19.5 19H12l-5 4v-4.5A3.5 3.5 0 0 1 5 15.3Z"
/>
<path d="M9 10h10M9 14h6" />
</svg>
<span
class="message-unread-dot"
id="messageUnreadDot"
hidden
></span>
</button>
</section>
<section class="card salary-card">
<div class="salary-head">
<div class="salary-title">
<span data-i18n="agency_center.salary">Salary</span>
<svg viewBox="0 0 20 20" aria-hidden="true">
<circle cx="10" cy="10" r="8" />
<path d="M10 9v5M10 6.3v.2" />
</svg>
</div>
<button
class="salary-link"
id="withdrawExchangeButton"
type="button"
data-i18n="agency_center.withdraw_exchange"
>
Withdraw/Exchange
</button>
</div>
<button
class="salary-value"
id="salaryValueButton"
type="button"
aria-label="Open withdraw and exchange page"
data-i18n-aria="agency_center.open_withdraw_exchange"
>
<span class="salary-currency" aria-hidden="true"
>$</span
>
<span id="currentSalary">0.00</span>
<span class="chevron" aria-hidden="true">&rsaquo;</span>
</button>
</section>
<section class="card menu-card" aria-label="Agency tools">
<button
class="menu-row"
type="button"
data-action="host-list"
>
<span class="menu-icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d="M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" />
<path
d="M2.5 21c.8-4.3 3.3-6.4 6.5-6.4s5.7 2.1 6.5 6.4"
/>
<path d="M17.8 11.5a3.2 3.2 0 1 0-1.2-6" />
<path d="M17.8 15c2.3.5 3.8 2.1 4.4 5" />
</svg>
</span>
<span
class="menu-label"
data-i18n="agency_center.host_list"
>Host List</span
>
<span class="menu-count" id="hostCount">0</span>
<span class="chevron" aria-hidden="true">&rsaquo;</span>
</button>
<button class="menu-row" type="button" data-action="policy">
<span class="menu-icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d="M7 3h8l4 4v18H7Z" />
<path d="M15 3v6h5M10 13h7M10 17h5" />
</svg>
</span>
<span
class="menu-label"
data-i18n="agency_center.agency_policy"
>Agency Policy</span
>
<span class="chevron" aria-hidden="true">&rsaquo;</span>
</button>
<button class="menu-row" type="button" data-action="invite">
<span class="menu-icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d="M12 18v-6" />
<path d="M9 15h6" />
<path
d="M12 3a7 7 0 0 0-7 7c0 5 7 11 7 11s7-6 7-11a7 7 0 0 0-7-7Z"
/>
</svg>
</span>
<span
class="menu-label"
data-i18n="agency_center.invite_host"
>Invite Host</span
>
<span class="chevron" aria-hidden="true">&rsaquo;</span>
</button>
</section>
</main>
<div class="home-indicator" aria-hidden="true"></div>
<div class="sheet-modal" id="hostSheet" hidden aria-hidden="true">
<button
class="modal-backdrop"
type="button"
data-close-sheet="hostSheet"
aria-label="Close"
data-i18n-aria="agency_center.close"
></button>
<section
class="bottom-sheet"
role="dialog"
aria-modal="true"
aria-labelledby="hostListTitle"
>
<div class="sheet-head">
<h2
id="hostListTitle"
data-i18n="agency_center.host_list"
>
Host List
</h2>
<button
class="sheet-close"
type="button"
data-close-sheet="hostSheet"
aria-label="Close"
data-i18n-aria="agency_center.close"
>
&times;
</button>
</div>
<form class="host-search" id="hostSearchForm">
<input
id="hostSearchInput"
type="text"
inputmode="numeric"
autocomplete="off"
placeholder="Enter host ID"
data-i18n-placeholder="agency_center.enter_host_id"
/>
<button type="submit" data-i18n="agency_center.search">
Search
</button>
</form>
<div class="host-list" id="hostList"></div>
<div class="sheet-empty" id="hostListEmpty" hidden></div>
</section>
</div>
<div
class="confirm-modal"
id="removeConfirmModal"
hidden
aria-hidden="true"
>
<button
class="modal-backdrop"
type="button"
data-close-sheet="removeConfirmModal"
aria-label="Cancel"
data-i18n-aria="agency_center.cancel"
></button>
<section
class="confirm-dialog"
role="dialog"
aria-modal="true"
aria-labelledby="removeConfirmTitle"
>
<h2 id="removeConfirmTitle" data-i18n="agency_center.tips">
Tips
</h2>
<p id="removeConfirmText"></p>
<div class="confirm-actions">
<button
class="confirm-cancel"
type="button"
data-close-sheet="removeConfirmModal"
data-i18n="agency_center.cancel"
>
Cancel
</button>
<button
class="confirm-submit"
id="confirmRemoveButton"
type="button"
data-i18n="agency_center.confirm"
>
Confirm
</button>
</div>
</section>
</div>
<div class="sheet-modal" id="policyModal" hidden aria-hidden="true">
<button
class="modal-backdrop"
type="button"
data-close-policy
aria-label="Close"
data-i18n-aria="agency_center.close"
></button>
<section
class="bottom-sheet policy-sheet"
role="dialog"
aria-modal="true"
aria-labelledby="policyTitle"
>
<div class="sheet-head">
<h2
id="policyTitle"
data-i18n="agency_center.agency_policy"
>
Agency Policy
</h2>
<button
class="sheet-close"
type="button"
data-close-policy
aria-label="Close"
data-i18n-aria="agency_center.close"
>
&times;
</button>
</div>
<div class="policy-sheet-body">
<div class="policy-summary">
<strong id="policyName">Current policy</strong>
<span id="policyMeta"></span>
</div>
<div class="policy-empty" id="policyEmpty" hidden></div>
<div
class="policy-level-list"
id="policyLevelList"
></div>
</div>
</section>
</div>
<div class="sheet-modal" id="inviteSheet" hidden aria-hidden="true">
<button
class="modal-backdrop"
type="button"
data-close-sheet="inviteSheet"
aria-label="Close"
data-i18n-aria="agency_center.close"
></button>
<section
class="bottom-sheet"
role="dialog"
aria-modal="true"
aria-labelledby="inviteTitle"
>
<div class="sheet-head">
<h2
id="inviteTitle"
data-i18n="agency_center.invite_host"
>
Invite Host
</h2>
<button
class="sheet-close"
type="button"
data-close-sheet="inviteSheet"
aria-label="Close"
data-i18n-aria="agency_center.close"
>
&times;
</button>
</div>
<form class="host-search" id="inviteHostSearchForm">
<input
id="inviteHostSearchInput"
type="text"
inputmode="text"
autocomplete="off"
placeholder="Enter host ID"
data-i18n-placeholder="agency_center.enter_host_id"
/>
<button
id="inviteHostSearchButton"
type="submit"
data-i18n="agency_center.search"
>
Search
</button>
</form>
<div
class="invite-status"
id="inviteHostStatus"
role="status"
hidden
></div>
<div class="message-list" id="inviteHostList"></div>
<div class="sheet-empty" id="inviteHostEmpty" hidden></div>
</section>
</div>
<div
class="message-modal"
id="messageModal"
hidden
aria-hidden="true"
>
<button
class="modal-backdrop"
type="button"
data-close-sheet="messageModal"
aria-label="Close"
data-i18n-aria="agency_center.close"
></button>
<section
class="message-dialog"
role="dialog"
aria-modal="true"
aria-labelledby="messageTitle"
>
<div class="sheet-head">
<h2
id="messageTitle"
data-i18n="agency_center.messages"
>
Messages
</h2>
<button
class="sheet-close"
type="button"
data-close-sheet="messageModal"
aria-label="Close"
data-i18n-aria="agency_center.close"
>
&times;
</button>
</div>
<div class="message-list" id="messageList"></div>
<div class="sheet-empty" id="messageEmpty" hidden></div>
</section>
</div>
</div>
<script src="../../common/toast.js"></script>
<script src="../../common/api.js?v=20260605-agency-real-policy"></script>
<script src="../../common/params.js?v=20260603-agency-center"></script>
<script src="../../common/jsbridge.js"></script>
<script src="../../common/i18n.js"></script>
<script src="./script.js?v=20260605-agency-real-policy"></script>
</body>
</html>