298 lines
13 KiB
HTML
298 lines
13 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
|
||
/>
|
||
<title>Host Center</title>
|
||
<link rel="stylesheet" href="../../../common/theme.css" />
|
||
<link rel="stylesheet" href="../../packages/ui/center.css" />
|
||
<link rel="stylesheet" href="./style.css" />
|
||
<script src="../../packages/core/product-context.js"></script>
|
||
<script src="../../products/fami/product.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="guild-center fami-host-center">
|
||
<header class="center-header">
|
||
<button
|
||
class="icon-button"
|
||
id="backButton"
|
||
type="button"
|
||
aria-label="Back"
|
||
data-i18n-aria="fami_host.back"
|
||
>
|
||
<span aria-hidden="true">‹</span>
|
||
</button>
|
||
<h1 data-i18n="fami_host.title">Host Center</h1>
|
||
<div class="language-switcher">
|
||
<button
|
||
class="language-button"
|
||
type="button"
|
||
data-language-toggle
|
||
data-current-lang
|
||
aria-expanded="false"
|
||
aria-label="Change language"
|
||
data-i18n-aria="fami_host.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>
|
||
</header>
|
||
|
||
<main class="guild-center__content" aria-live="polite">
|
||
<section class="guild-card profile-card">
|
||
<div class="avatar-shell">
|
||
<img id="profileAvatar" alt="" hidden />
|
||
<span id="profileInitial" aria-hidden="true">H</span>
|
||
</div>
|
||
<div class="profile-copy">
|
||
<strong id="profileName">—</strong>
|
||
<span id="profileUID">UID: —</span>
|
||
<span class="agency-pill" id="agencyPill" hidden></span>
|
||
<span class="join-time" id="joinTime" hidden></span>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="guild-card contact-card">
|
||
<span class="contact-icon" aria-hidden="true">☎</span>
|
||
<div>
|
||
<strong data-i18n="fami_host.contact">WhatsApp</strong>
|
||
<span id="contactValue">—</span>
|
||
</div>
|
||
<button
|
||
id="editContactButton"
|
||
type="button"
|
||
data-i18n="fami_host.edit"
|
||
>
|
||
Edit
|
||
</button>
|
||
</section>
|
||
|
||
<section class="guild-card balance-card">
|
||
<div>
|
||
<span
|
||
class="card-label"
|
||
data-i18n="fami_host.diamond_balance"
|
||
>Diamond balance</span
|
||
>
|
||
<strong class="balance-value"
|
||
><span aria-hidden="true">💎</span
|
||
><span id="diamondBalance">—</span></strong
|
||
>
|
||
</div>
|
||
<button
|
||
class="primary-action"
|
||
id="withdrawButton"
|
||
type="button"
|
||
data-i18n="fami_host.withdraw"
|
||
>
|
||
Withdraw
|
||
</button>
|
||
</section>
|
||
|
||
<section class="stats-section" aria-labelledby="statsTitle">
|
||
<div class="section-title-row">
|
||
<h2 id="statsTitle" data-i18n="fami_host.data_details">
|
||
Data details
|
||
</h2>
|
||
<span id="rangeCaption"></span>
|
||
</div>
|
||
<div
|
||
class="guild-filter-bar"
|
||
id="rangeFilters"
|
||
role="group"
|
||
aria-label="Date range"
|
||
>
|
||
<button
|
||
type="button"
|
||
data-range="today"
|
||
data-i18n="fami_range.today"
|
||
>
|
||
Today
|
||
</button>
|
||
<button
|
||
type="button"
|
||
data-range="yesterday"
|
||
data-i18n="fami_range.yesterday"
|
||
>
|
||
Yesterday
|
||
</button>
|
||
<button
|
||
type="button"
|
||
data-range="last_7_days"
|
||
data-i18n="fami_range.last_7_days"
|
||
>
|
||
Last 7 days
|
||
</button>
|
||
<button
|
||
type="button"
|
||
data-range="last_30_days"
|
||
data-i18n="fami_range.last_30_days"
|
||
>
|
||
Last 30 days
|
||
</button>
|
||
<button
|
||
type="button"
|
||
data-range="this_month"
|
||
data-i18n="fami_range.this_month"
|
||
>
|
||
This month
|
||
</button>
|
||
<button
|
||
type="button"
|
||
data-range="last_month"
|
||
data-i18n="fami_range.last_month"
|
||
>
|
||
Last month
|
||
</button>
|
||
<button
|
||
type="button"
|
||
data-range="custom"
|
||
data-i18n="fami_range.custom"
|
||
>
|
||
Custom
|
||
</button>
|
||
</div>
|
||
|
||
<div class="stats-status" id="statsStatus" hidden></div>
|
||
<div class="guild-card metrics-grid" id="metricsGrid">
|
||
<article data-metric="diamond_earnings">
|
||
<strong>—</strong
|
||
><span data-i18n="fami_metric.diamond_earnings"
|
||
>Diamond earnings</span
|
||
>
|
||
</article>
|
||
<article data-metric="diamond_exchanged">
|
||
<strong>—</strong
|
||
><span data-i18n="fami_metric.diamond_exchanged"
|
||
>Diamonds exchanged</span
|
||
>
|
||
</article>
|
||
<article data-metric="gift_senders">
|
||
<strong>—</strong
|
||
><span data-i18n="fami_metric.gift_senders"
|
||
>Gift senders</span
|
||
>
|
||
</article>
|
||
<article data-metric="online_duration_ms">
|
||
<strong>—</strong
|
||
><span data-i18n="fami_metric.online_duration"
|
||
>Online duration</span
|
||
>
|
||
</article>
|
||
<article data-metric="valid_mic_duration_ms">
|
||
<strong>—</strong
|
||
><span data-i18n="fami_metric.valid_mic_duration"
|
||
>Valid mic duration</span
|
||
>
|
||
</article>
|
||
<article data-metric="valid_mic_days">
|
||
<strong>—</strong
|
||
><span data-i18n="fami_metric.valid_mic_days"
|
||
>Valid mic days</span
|
||
>
|
||
</article>
|
||
<article data-metric="private_message_senders">
|
||
<strong>—</strong
|
||
><span
|
||
data-i18n="fami_metric.private_message_senders"
|
||
>Private message users</span
|
||
>
|
||
</article>
|
||
<article data-metric="new_followers">
|
||
<strong>—</strong
|
||
><span data-i18n="fami_metric.new_followers"
|
||
>New followers</span
|
||
>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<dialog class="edit-dialog" id="contactDialog">
|
||
<form method="dialog" id="contactForm">
|
||
<h2 data-i18n="fami_host.edit_contact">Edit WhatsApp</h2>
|
||
<label
|
||
><span data-i18n="fami_host.contact_number"
|
||
>Contact number</span
|
||
><input
|
||
id="contactInput"
|
||
type="text"
|
||
maxlength="64"
|
||
autocomplete="tel"
|
||
/></label>
|
||
<div class="dialog-actions">
|
||
<button
|
||
value="cancel"
|
||
type="button"
|
||
id="cancelContactButton"
|
||
data-i18n="fami_common.cancel"
|
||
>
|
||
Cancel
|
||
</button>
|
||
<button
|
||
class="primary-action"
|
||
value="save"
|
||
type="submit"
|
||
data-i18n="fami_common.save"
|
||
>
|
||
Save
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
|
||
<dialog class="edit-dialog" id="rangeDialog">
|
||
<form method="dialog" id="rangeForm">
|
||
<h2 data-i18n="fami_range.custom_title">
|
||
Custom date range
|
||
</h2>
|
||
<label
|
||
><span data-i18n="fami_range.start">Start date</span
|
||
><input id="rangeStart" type="date" required
|
||
/></label>
|
||
<label
|
||
><span data-i18n="fami_range.end">End date</span
|
||
><input id="rangeEnd" type="date" required
|
||
/></label>
|
||
<div class="dialog-actions">
|
||
<button
|
||
value="cancel"
|
||
type="button"
|
||
id="cancelRangeButton"
|
||
data-i18n="fami_common.cancel"
|
||
>
|
||
Cancel
|
||
</button>
|
||
<button
|
||
class="primary-action"
|
||
value="apply"
|
||
type="submit"
|
||
data-i18n="fami_common.apply"
|
||
>
|
||
Apply
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
</div>
|
||
|
||
<script src="../../../common/api.js"></script>
|
||
<script src="../../../common/params.js"></script>
|
||
<script src="../../../common/i18n.js"></script>
|
||
<script src="../../../common/jsbridge.js"></script>
|
||
<script src="../../../common/toast.js"></script>
|
||
<script src="../../packages/core/date-range.js"></script>
|
||
<script src="../../packages/host-center/host-center.js"></script>
|
||
<script src="./script.js"></script>
|
||
</body>
|
||
</html>
|