2026-04-28 22:46:19 +08:00

201 lines
9.8 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="./style.css?v=20260428-2120" />
</head>
<body>
<div class="host-center" aria-label="Host Center" data-i18n-aria="page_label" data-loading="true" data-view="loading">
<div class="hero-bg" aria-hidden="true"></div>
<header class="status-bar" aria-hidden="true">
<span class="status-time">9:41</span>
<span class="status-icons">
<span class="cellular"><i></i><i></i><i></i><i></i></span>
<span class="wifi"><i></i><i></i><i></i></span>
<span class="battery"><i></i></span>
</span>
</header>
<nav class="title-bar">
<button class="back-button" type="button" aria-label="Back" data-i18n-aria="back">
<svg viewBox="0 0 32 32" aria-hidden="true">
<path d="M20 8 12 16l8 8" />
</svg>
</button>
<h1 data-i18n="title">Host Center</h1>
<div class="language-switcher">
<button class="language-button" type="button" aria-label="Change language" data-i18n-aria="language_button_aria" aria-expanded="false">EN</button>
<div class="language-menu" hidden>
<button type="button" data-lang="en">EN</button>
<button type="button" data-lang="ar">AR</button>
<button type="button" data-lang="tr">TR</button>
<button type="button" data-lang="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="" hidden />
</div>
<div class="profile-copy">
<div class="name" id="profileName"></div>
<div class="meta" id="profileUid" data-i18n="uid"></div>
<button class="agency" type="button">
<span data-i18n="agency"></span>
</button>
</div>
</section>
<section class="card join-agency-card" id="joinAgencyCard" hidden>
<div class="join-agency-copy">
<div class="join-agency-title" data-i18n="join_agency_title">Join Agency</div>
<div class="join-agency-text" data-i18n="join_agency_text">Search for an agency ID and submit your application.</div>
</div>
<button class="join-agency-action" id="joinAgencyButton" type="button" data-i18n="join_agency_action">Join now</button>
</section>
<section class="card metrics-card host-only">
<div class="metric">
<div class="label" data-i18n-html="streaming_duration">Work Time (min)</div>
<div class="value" id="streamingDuration"></div>
</div>
<div class="vertical-line" aria-hidden="true"></div>
<div class="metric gift-metric">
<div class="label" data-i18n="target">Target</div>
<button class="gift-value" type="button" aria-live="polite" aria-label="Open daily data" data-i18n-aria="open_daily_data">
<span class="amount-text" id="currentGiftValue"></span>
<span class="chevron">&rsaquo;</span>
</button>
</div>
</section>
<section class="card income-card host-only">
<div class="income-head">
<div class="income-title">
<span data-i18n="my_income">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>
<a class="cash-link" href="../withdraw-exchange/index.html" aria-label="Open withdraw and exchange page" data-i18n-aria="open_withdraw_exchange">
<span data-i18n="withdraw_exchange">Withdraw/Exchange</span>
<span class="chevron">&rsaquo;</span>
</a>
</div>
<a class="income-value" href="../withdraw-exchange/index.html" aria-label="Open withdraw and exchange page" data-i18n-aria="open_withdraw_exchange">
<span class="income-currency" aria-hidden="true">$</span>
<span class="amount-text" id="currentSalary"></span>
<span class="chevron">&rsaquo;</span>
</a>
</section>
<section class="card policy-entry-card host-only">
<a class="policy-entry-link" id="anchorPolicyLink" href="./policy.html" aria-label="Open host policy" data-i18n-aria="open_anchor_policy">
<span class="policy-entry-left">
<svg viewBox="0 0 28 28" aria-hidden="true">
<path d="M8 5h10l3 3v15H8Z" />
<path d="M18 5v5h4M11 14h7M11 18h6" />
</svg>
<span data-i18n="anchor_policy">Host Policy</span>
</span>
<span class="chevron">&rsaquo;</span>
</a>
</section>
</main>
<div class="daily-modal" id="dailyModal" hidden>
<div class="daily-backdrop" data-close-daily></div>
<section class="daily-sheet" role="dialog" aria-modal="true" aria-labelledby="dailyTitle">
<div class="daily-sheet-head">
<h2 id="dailyTitle" data-i18n="daily_details">Daily data</h2>
<button class="daily-close" type="button" aria-label="Close" data-i18n-aria="close" data-close-daily>&times;</button>
</div>
<div class="daily-summary">
<span data-i18n="target">Target</span>
<strong id="dailyCurrentGift">0</strong>
</div>
<div class="daily-list" id="dailyList"></div>
</section>
</div>
<div class="join-agency-modal" id="joinAgencyModal" hidden>
<div class="join-agency-backdrop" data-close-join-agency></div>
<section class="join-agency-dialog" role="dialog" aria-modal="true" aria-labelledby="joinAgencyModalTitle">
<div class="join-agency-head">
<h2 id="joinAgencyModalTitle" data-i18n="join_agency_title">Join Agency</h2>
<button class="join-agency-close" type="button" aria-label="Close" data-i18n-aria="close" data-close-join-agency>&times;</button>
</div>
<div class="join-agency-modal-body">
<form class="join-agency-search-form" id="joinAgencySearchForm">
<label class="join-agency-field">
<span data-i18n="agency_id">Agency ID</span>
<div class="join-agency-search-control">
<input id="joinAgencyAccount" type="text" inputmode="numeric" autocomplete="off" placeholder="Enter agency ID" data-i18n-placeholder="enter_agent_id" />
<button class="join-agency-search-button" id="joinAgencySearchButton" type="submit" data-i18n="search">Search</button>
</div>
</label>
</form>
<div class="join-agency-status" id="joinAgencyStatus" role="status" hidden></div>
<section class="join-agency-modal-card" id="joinAgencyResult" hidden>
<div class="join-agency-section-title" data-i18n="agency_label">Agency</div>
<div class="join-agency-profile-row">
<div class="join-agency-avatar">
<img id="joinAgencyAvatar" alt="" hidden />
<span id="joinAgencyAvatarFallback">A</span>
</div>
<div class="join-agency-profile-copy">
<div class="join-agency-profile-name" id="joinAgencyName">-</div>
<div class="join-agency-profile-account" id="joinAgencyAccountText">UID: -</div>
</div>
</div>
<button class="join-agency-apply-button" id="joinAgencyApplyButton" type="button" data-i18n="apply">Apply</button>
</section>
<section class="join-agency-modal-card join-agency-pending-card" id="joinAgencyPending" hidden>
<div class="join-agency-pending-head">
<div class="join-agency-section-title" data-i18n="application_records">Application Records</div>
<span data-i18n="pending">Pending</span>
</div>
<div class="join-agency-profile-row">
<div class="join-agency-avatar">
<img id="joinAgencyPendingAvatar" alt="" hidden />
<span id="joinAgencyPendingAvatarFallback">A</span>
</div>
<div class="join-agency-profile-copy">
<div class="join-agency-profile-name" id="joinAgencyPendingName">-</div>
<div class="join-agency-profile-account" id="joinAgencyPendingAccount">UID: -</div>
</div>
</div>
<p class="join-agency-pending-note" data-i18n="join_pending_note">Application is pending. Please wait for agency approval.</p>
<button class="join-agency-cancel-button" id="joinAgencyCancelButton" type="button" data-i18n="cancel">Cancel</button>
</section>
</div>
</section>
</div>
<div class="home-indicator" aria-hidden="true"></div>
<div class="loading-mask" id="loadingMask" role="status" aria-live="polite" aria-busy="true">
<div class="runner-stick" aria-hidden="true">
<span class="runner-head"></span>
<span class="runner-body"></span>
<span class="runner-arm runner-arm-front"></span>
<span class="runner-arm runner-arm-back"></span>
<span class="runner-leg runner-leg-front"></span>
<span class="runner-leg runner-leg-back"></span>
<span class="runner-ground"></span>
</div>
<div class="loading-copy">loading....</div>
</div>
</div>
<script src="./script.js?v=20260428-2120" defer></script>
</body>
</html>