279 lines
11 KiB
HTML
279 lines
11 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>Host Center</title>
|
||
<link rel="stylesheet" href="../../common/theme.css?v=20260602" />
|
||
<link rel="stylesheet" href="../common/center.css?v=20260602" />
|
||
<link rel="stylesheet" href="./style.css?v=20260604-diamonds-label" />
|
||
</head>
|
||
|
||
<body>
|
||
<div
|
||
class="host-center"
|
||
aria-label="Host 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="host_center.back"
|
||
>
|
||
<svg viewBox="0 0 32 32" aria-hidden="true">
|
||
<path d="M20 8 12 16l8 8" />
|
||
</svg>
|
||
</button>
|
||
<h1 data-i18n="host_center.title">Host 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="host_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
|
||
>
|
||
Y
|
||
</div>
|
||
</div>
|
||
<div class="profile-copy">
|
||
<div class="name" id="profileName"></div>
|
||
<div class="meta" id="profileUID"></div>
|
||
<div class="profile-badge" id="profileBadge"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<div data-contact-card></div>
|
||
|
||
<section class="card income-card">
|
||
<div class="income-head">
|
||
<h2 data-i18n="host_center.available_salary">
|
||
My available salary
|
||
</h2>
|
||
<button
|
||
class="text-link"
|
||
id="incomeWithdrawExchangeButton"
|
||
type="button"
|
||
data-i18n="host_center.withdraw_exchange"
|
||
>
|
||
Withdraw/Exchange
|
||
</button>
|
||
</div>
|
||
<div class="income-value">
|
||
<span class="coin-icon" aria-hidden="true">$</span>
|
||
<span id="availableSalary"></span>
|
||
</div>
|
||
<div class="income-foot" id="incomeFoot"></div>
|
||
</section>
|
||
|
||
<section class="card task-card" aria-labelledby="levelTitle">
|
||
<div class="section-head">
|
||
<h2
|
||
id="levelTitle"
|
||
data-i18n="host_center.level_progress"
|
||
>
|
||
Level progress
|
||
</h2>
|
||
<span class="task-pill" id="levelStatus"></span>
|
||
</div>
|
||
<div class="task-grid">
|
||
<div class="task-item">
|
||
<span data-i18n="host_center.current_level"
|
||
>Current level</span
|
||
>
|
||
<strong id="currentLevel"></strong>
|
||
</div>
|
||
<div class="task-item">
|
||
<span data-i18n="host_center.next_level_need"
|
||
>Needed diamonds for next level</span
|
||
>
|
||
<strong id="nextLevelNeed"></strong>
|
||
</div>
|
||
</div>
|
||
<div class="progress-track" aria-hidden="true">
|
||
<div class="progress-fill" id="levelProgress"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="card menu-card" aria-label="Host 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="host_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"
|
||
type="button"
|
||
data-action="policy"
|
||
data-label="Platform policy"
|
||
>
|
||
<span class="menu-icon" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24">
|
||
<path
|
||
d="M12 3 5 6v5c0 4.5 3 7.8 7 10 4-2.2 7-5.5 7-10V6l-7-3Z"
|
||
/>
|
||
<path d="m9 12 2 2 4-5" />
|
||
</svg>
|
||
</span>
|
||
<span
|
||
class="menu-label"
|
||
data-i18n="host_center.platform_policy"
|
||
>Platform policy</span
|
||
>
|
||
<span class="chevron" aria-hidden="true">›</span>
|
||
</button>
|
||
</section>
|
||
</main>
|
||
|
||
<div
|
||
class="sheet-modal"
|
||
id="policyModal"
|
||
hidden
|
||
aria-hidden="true"
|
||
>
|
||
<button
|
||
class="modal-backdrop"
|
||
type="button"
|
||
data-close-policy
|
||
aria-label="Close"
|
||
></button>
|
||
<section
|
||
class="bottom-sheet policy-sheet"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="policyTitle"
|
||
>
|
||
<div class="sheet-head">
|
||
<h2 id="policyTitle">Platform policy</h2>
|
||
<button
|
||
class="sheet-close"
|
||
type="button"
|
||
data-close-policy
|
||
aria-label="Close"
|
||
>
|
||
×
|
||
</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="message-modal"
|
||
id="messageModal"
|
||
hidden
|
||
aria-hidden="true"
|
||
>
|
||
<button
|
||
class="modal-backdrop"
|
||
id="messageBackdrop"
|
||
type="button"
|
||
aria-label="Close"
|
||
data-i18n-aria="host_center.close"
|
||
></button>
|
||
<section
|
||
class="message-dialog"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="messageTitle"
|
||
>
|
||
<div class="sheet-head">
|
||
<h2 id="messageTitle" data-i18n="host_center.messages">
|
||
Messages
|
||
</h2>
|
||
<button
|
||
class="sheet-close"
|
||
id="messageCloseButton"
|
||
type="button"
|
||
aria-label="Close"
|
||
data-i18n-aria="host_center.close"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
<div class="message-list" id="messageList"></div>
|
||
<div class="sheet-empty" id="messageEmpty" hidden></div>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="home-indicator" aria-hidden="true"></div>
|
||
</div>
|
||
|
||
<script src="../../common/api.js?v=20260604-host-agency"></script>
|
||
<script src="../../common/toast.js"></script>
|
||
<script src="../../common/params.js?v=20260602-api"></script>
|
||
<script src="../../common/jsbridge.js"></script>
|
||
<script src="../../common/i18n.js?v=20260604-diamonds-label"></script>
|
||
<script src="../common/contact-card.js?v=20260629-user-contact"></script>
|
||
<script src="./script.js?v=20260604-no-zero-scroll"></script>
|
||
</body>
|
||
</html>
|