443 lines
19 KiB
HTML
443 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>Coin Seller Center</title>
|
|
<link rel="stylesheet" href="../../common/theme.css" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="../common/center.css?v=20260604-coinseller"
|
|
/>
|
|
<link rel="stylesheet" href="./style.css?v=20260604" />
|
|
</head>
|
|
|
|
<body>
|
|
<div class="coinseller-center" aria-label="Coin Seller 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="coinseller_center.back"
|
|
>
|
|
<svg viewBox="0 0 32 32" aria-hidden="true">
|
|
<path d="M20 8 12 16l8 8" />
|
|
</svg>
|
|
</button>
|
|
<h1 data-i18n="coinseller_center.title">Coin Seller 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="coinseller_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
|
|
>
|
|
C
|
|
</div>
|
|
</div>
|
|
<div class="profile-copy">
|
|
<div class="name" id="profileName">-</div>
|
|
<div class="meta" id="profileUID">UID: -</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div data-contact-card></div>
|
|
|
|
<section class="card balance-card">
|
|
<div class="balance-head">
|
|
<div>
|
|
<div
|
|
class="balance-label"
|
|
data-i18n="coinseller_center.coins"
|
|
>
|
|
Coins
|
|
</div>
|
|
<div
|
|
class="balance-subtitle"
|
|
data-i18n="coinseller_center.available_stock"
|
|
>
|
|
Available stock
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="round-action"
|
|
id="historyButton"
|
|
type="button"
|
|
aria-label="History"
|
|
data-i18n-aria="coinseller_center.history"
|
|
>
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M12 8v5l3 2" />
|
|
<path d="M3.5 12a8.5 8.5 0 1 0 2.2-5.7" />
|
|
<path d="M3.5 4.5v5h5" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="balance-value">
|
|
<span class="coin-icon" aria-hidden="true">$</span>
|
|
<strong id="coinBalance">0</strong>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card search-card">
|
|
<div class="section-head">
|
|
<div>
|
|
<h2 data-i18n="coinseller_center.recharge_user">
|
|
Recharge user
|
|
</h2>
|
|
<p data-i18n="coinseller_center.search_by_user_id">
|
|
Search by user ID
|
|
</p>
|
|
</div>
|
|
<button
|
|
class="round-action small"
|
|
id="helpButton"
|
|
type="button"
|
|
aria-label="Help"
|
|
data-i18n-aria="coinseller_center.help"
|
|
>
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="9" />
|
|
<path d="M9.5 9a2.7 2.7 0 0 1 5.2.9c0 1.9-2.7 2.2-2.7 4.1" />
|
|
<path d="M12 17h.01" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<form class="search-form" id="searchForm">
|
|
<input
|
|
id="userSearchInput"
|
|
type="text"
|
|
inputmode="text"
|
|
autocomplete="off"
|
|
placeholder="Enter user ID"
|
|
data-i18n-placeholder="coinseller_center.enter_user_id"
|
|
/>
|
|
<button
|
|
id="searchButton"
|
|
type="submit"
|
|
data-i18n="coinseller_center.search"
|
|
>
|
|
Search
|
|
</button>
|
|
</form>
|
|
<div class="form-status" id="searchStatus" hidden></div>
|
|
|
|
<div class="target-card" id="targetCard" hidden>
|
|
<div class="target-avatar" id="targetAvatar"></div>
|
|
<div class="target-main">
|
|
<div
|
|
class="role-pill"
|
|
data-i18n="coinseller_center.target_user"
|
|
>
|
|
Target user
|
|
</div>
|
|
<div class="target-name" id="targetName">-</div>
|
|
<div class="target-meta" id="targetUID">UID: -</div>
|
|
</div>
|
|
<button
|
|
class="target-coin-action"
|
|
id="openRechargeButton"
|
|
type="button"
|
|
aria-label="Recharge coins"
|
|
data-i18n-aria="coinseller_center.recharge_coins"
|
|
>
|
|
<span class="coin-icon" aria-hidden="true">$</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card recent-card">
|
|
<div class="section-head">
|
|
<div>
|
|
<h2 data-i18n="coinseller_center.recent_records">
|
|
Recent records
|
|
</h2>
|
|
<p data-i18n="coinseller_center.today_activity">
|
|
Today's activity
|
|
</p>
|
|
</div>
|
|
<button
|
|
class="text-link"
|
|
id="viewAllHistoryButton"
|
|
type="button"
|
|
data-i18n="coinseller_center.view_all"
|
|
>
|
|
View all
|
|
</button>
|
|
</div>
|
|
<div class="record-list" id="recentList"></div>
|
|
</section>
|
|
</main>
|
|
|
|
<div class="home-indicator" aria-hidden="true"></div>
|
|
|
|
<div
|
|
class="sheet-modal"
|
|
id="historyModal"
|
|
hidden
|
|
aria-hidden="true"
|
|
>
|
|
<button
|
|
class="modal-backdrop"
|
|
type="button"
|
|
data-close-modal="historyModal"
|
|
aria-label="Close"
|
|
data-i18n-aria="coinseller_center.close"
|
|
></button>
|
|
<section
|
|
class="bottom-sheet history-sheet"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="historyTitle"
|
|
>
|
|
<div class="sheet-head">
|
|
<h2
|
|
id="historyTitle"
|
|
data-i18n="coinseller_center.transaction_records"
|
|
>
|
|
Transaction records
|
|
</h2>
|
|
<button
|
|
class="sheet-close"
|
|
type="button"
|
|
data-close-modal="historyModal"
|
|
aria-label="Close"
|
|
data-i18n-aria="coinseller_center.close"
|
|
>
|
|
×
|
|
</button>
|
|
</div>
|
|
<div class="history-body">
|
|
<form class="history-search-form" id="historySearchForm">
|
|
<input
|
|
id="historySearchInput"
|
|
type="text"
|
|
inputmode="text"
|
|
placeholder="Enter user ID"
|
|
data-i18n-placeholder="coinseller_center.enter_user_id"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
data-i18n="coinseller_center.search"
|
|
>
|
|
Search
|
|
</button>
|
|
<button
|
|
class="history-clear-button"
|
|
id="historyClearButton"
|
|
type="button"
|
|
data-i18n="coinseller_center.cancel"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</form>
|
|
<div
|
|
class="history-tabs"
|
|
role="tablist"
|
|
aria-label="Transaction type"
|
|
>
|
|
<button
|
|
class="history-tab is-active"
|
|
type="button"
|
|
role="tab"
|
|
aria-selected="true"
|
|
data-history-tab="income"
|
|
data-i18n="coinseller_center.income"
|
|
>
|
|
Income
|
|
</button>
|
|
<button
|
|
class="history-tab"
|
|
type="button"
|
|
role="tab"
|
|
aria-selected="false"
|
|
data-history-tab="expenditure"
|
|
data-i18n="coinseller_center.expenditure"
|
|
>
|
|
Expenditure
|
|
</button>
|
|
</div>
|
|
<div class="form-status" id="historyStatus" hidden></div>
|
|
<div class="record-list history-records" id="historyList"></div>
|
|
<button
|
|
class="load-more"
|
|
id="loadMoreButton"
|
|
type="button"
|
|
data-i18n="coinseller_center.load_more"
|
|
>
|
|
Load more
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div
|
|
class="sheet-modal"
|
|
id="rechargeModal"
|
|
hidden
|
|
aria-hidden="true"
|
|
>
|
|
<button
|
|
class="modal-backdrop"
|
|
type="button"
|
|
data-close-modal="rechargeModal"
|
|
aria-label="Close"
|
|
data-i18n-aria="coinseller_center.close"
|
|
></button>
|
|
<section
|
|
class="bottom-sheet recharge-sheet"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="rechargeTitle"
|
|
>
|
|
<div class="sheet-head">
|
|
<h2
|
|
id="rechargeTitle"
|
|
data-i18n="coinseller_center.recharge_coins"
|
|
>
|
|
Recharge coins
|
|
</h2>
|
|
<button
|
|
class="sheet-close"
|
|
type="button"
|
|
data-close-modal="rechargeModal"
|
|
aria-label="Close"
|
|
data-i18n-aria="coinseller_center.close"
|
|
>
|
|
×
|
|
</button>
|
|
</div>
|
|
<div class="recharge-sheet-body">
|
|
<div class="recharge-target" id="rechargeTargetName">
|
|
-
|
|
</div>
|
|
<p data-i18n="coinseller_center.enter_coin_amount">
|
|
Enter coins amount
|
|
</p>
|
|
<div class="quick-amounts" id="quickAmounts"></div>
|
|
<form class="recharge-form" id="rechargeForm">
|
|
<label class="coin-input-shell">
|
|
<span class="input-coin" aria-hidden="true"
|
|
>$</span
|
|
>
|
|
<input
|
|
id="coinAmountInput"
|
|
type="text"
|
|
inputmode="numeric"
|
|
autocomplete="off"
|
|
placeholder="Enter coins amount"
|
|
data-i18n-placeholder="coinseller_center.coin_amount_placeholder"
|
|
/>
|
|
</label>
|
|
<button
|
|
id="rechargeButton"
|
|
type="submit"
|
|
disabled
|
|
data-i18n="coinseller_center.recharge_now"
|
|
>
|
|
Recharge now
|
|
</button>
|
|
</form>
|
|
<div
|
|
class="form-status"
|
|
id="rechargeStatus"
|
|
hidden
|
|
></div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div
|
|
class="sheet-modal"
|
|
id="helpModal"
|
|
hidden
|
|
aria-hidden="true"
|
|
>
|
|
<button
|
|
class="modal-backdrop"
|
|
type="button"
|
|
data-close-modal="helpModal"
|
|
aria-label="Close"
|
|
data-i18n-aria="coinseller_center.close"
|
|
></button>
|
|
<section
|
|
class="bottom-sheet help-sheet"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="helpTitle"
|
|
>
|
|
<div class="sheet-head">
|
|
<h2 id="helpTitle" data-i18n="coinseller_center.help">
|
|
Help
|
|
</h2>
|
|
<button
|
|
class="sheet-close"
|
|
type="button"
|
|
data-close-modal="helpModal"
|
|
aria-label="Close"
|
|
data-i18n-aria="coinseller_center.close"
|
|
>
|
|
×
|
|
</button>
|
|
</div>
|
|
<div class="help-content">
|
|
<h3 data-i18n="coinseller_center.faq_title">FAQ</h3>
|
|
<p data-i18n="coinseller_center.faq_question_1">
|
|
How to recharge?
|
|
</p>
|
|
<span data-i18n="coinseller_center.faq_answer_1">
|
|
Search a user, enter the coin amount, then confirm recharge.
|
|
</span>
|
|
<p data-i18n="coinseller_center.faq_question_2">
|
|
How to check records?
|
|
</p>
|
|
<span data-i18n="coinseller_center.faq_answer_2">
|
|
Open history and switch between income and expenditure.
|
|
</span>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../../common/toast.js"></script>
|
|
<script src="../../common/jsbridge.js"></script>
|
|
<script src="../../common/api.js?v=20260604-coinseller-records"></script>
|
|
<script src="../../common/i18n.js?v=20260604-coinseller"></script>
|
|
<script src="../common/contact-card.js?v=20260629-user-contact"></script>
|
|
<script src="./script.js?v=20260604-record-user-profile"></script>
|
|
</body>
|
|
</html>
|