211 lines
11 KiB
HTML
211 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>Recharge Center</title>
|
|
<link rel="stylesheet" href="./style.css?v=20260430-0108" />
|
|
</head>
|
|
<body>
|
|
<div class="recharge-center" aria-label="Recharge Center" data-i18n-aria="page_label" data-loading="true">
|
|
<div class="hero-bg" aria-hidden="true"></div>
|
|
<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">Recharge 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 self-profile-card" aria-label="User profile" data-i18n-aria="profile_card">
|
|
<div class="avatar-shell">
|
|
<img class="avatar-image" id="selfAvatar" alt="" hidden />
|
|
<span class="avatar-fallback" id="selfAvatarFallback">U</span>
|
|
</div>
|
|
<div class="profile-copy">
|
|
<div class="name" id="selfName">-</div>
|
|
<div class="meta" id="selfUid">UID: -</div>
|
|
<div class="meta whatsapp-meta" id="selfWhatsappRow">
|
|
<span class="whatsapp-icon" id="selfWhatsappIcon" aria-hidden="true" hidden>
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M6.2 18.2 4.8 21l3.2-1.1a8.2 8.2 0 1 0-1.8-1.7Z" />
|
|
<path d="M9.4 8.4c.3-.3.8-.3 1 .1l.7 1.2c.2.4.1.8-.2 1.1l-.4.3c.5 1 1.4 1.8 2.4 2.3l.4-.5c.3-.3.7-.4 1.1-.2l1.2.7c.4.2.5.7.2 1-.5.8-1.2 1.1-2.1.9-2.8-.6-5.1-2.8-5.8-5.6-.2-.8.2-1.5 1.5-1.3Z" />
|
|
</svg>
|
|
</span>
|
|
<span id="selfWhatsappText"></span>
|
|
<button class="whatsapp-add-button" id="addWhatsappButton" type="button" data-whatsapp-open data-i18n="add_whatsapp">+ add whatsapp</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card balance-card" aria-label="Coins" data-i18n-aria="balance_title">
|
|
<div class="balance-head">
|
|
<div>
|
|
<div class="balance-label" data-i18n="balance_title">Coins</div>
|
|
</div>
|
|
<button class="history-button" type="button" data-history-open aria-label="History" data-i18n-aria="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>
|
|
<span data-i18n="history">History</span>
|
|
</button>
|
|
</div>
|
|
<div class="balance-value">
|
|
<span class="balance-coin gold-coin-icon" aria-hidden="true">
|
|
<span class="gold-coin-shine"></span>
|
|
</span>
|
|
<strong id="selfBalance">0</strong>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card search-card">
|
|
<div class="section-head">
|
|
<div>
|
|
<div class="section-title" data-i18n="search_title">Recharge user</div>
|
|
<div class="section-subtitle" data-i18n="search_subtitle">Search by user ID</div>
|
|
</div>
|
|
<button class="icon-button" type="button" data-help-open aria-label="Help" data-i18n-aria="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" autocomplete="off">
|
|
<input id="accountInput" type="text" inputmode="text" data-i18n-placeholder="search_placeholder" placeholder="Enter user ID" />
|
|
<button id="searchButton" type="submit" data-i18n="search">Search</button>
|
|
</form>
|
|
<div class="form-status" id="searchStatus" role="status" hidden></div>
|
|
</section>
|
|
|
|
<section class="card profile-card" id="targetCard" hidden>
|
|
<div class="avatar-shell">
|
|
<img class="avatar-image" id="targetAvatar" alt="" hidden />
|
|
<span class="avatar-fallback" id="targetAvatarFallback">U</span>
|
|
</div>
|
|
<div class="profile-copy">
|
|
<div class="role-pill" data-i18n="target_user">Target user</div>
|
|
<div class="name" id="targetName">-</div>
|
|
<div class="meta" id="targetUid">UID: -</div>
|
|
</div>
|
|
<button class="mini-action mini-action-icon" type="button" data-change-target aria-label="Change" data-i18n-aria="change">X</button>
|
|
</section>
|
|
|
|
<section class="card coin-recharge-card" id="coinRechargeCard" hidden>
|
|
<div class="section-head">
|
|
<div>
|
|
<div class="section-title" data-i18n="coin_recharge_title">Recharge coins</div>
|
|
<div class="section-subtitle" data-i18n="coin_recharge_subtitle">Enter coins amount</div>
|
|
</div>
|
|
</div>
|
|
<form class="coin-recharge-form" id="coinRechargeForm" autocomplete="off">
|
|
<div class="coin-input-shell">
|
|
<span class="input-coin gold-coin-icon" aria-hidden="true">
|
|
<span class="gold-coin-shine"></span>
|
|
</span>
|
|
<input id="coinAmountInput" type="text" inputmode="numeric" data-i18n-placeholder="coin_amount_placeholder" placeholder="Enter coins amount" />
|
|
</div>
|
|
<button id="confirmRechargeButton" type="submit" data-i18n="confirm_recharge">Confirm recharge</button>
|
|
</form>
|
|
<div class="form-status" id="coinRechargeStatus" role="status" hidden></div>
|
|
</section>
|
|
</main>
|
|
|
|
<div class="help-modal" id="helpModal" hidden>
|
|
<div class="modal-backdrop" data-help-close></div>
|
|
<section class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="helpTitle">
|
|
<div class="modal-head">
|
|
<h2 id="helpTitle" data-i18n="help">Help</h2>
|
|
<button class="modal-close" type="button" aria-label="Close" data-i18n-aria="close" data-help-close>×</button>
|
|
</div>
|
|
<div class="help-content">
|
|
<h3 data-i18n="faq_title">FAQ</h3>
|
|
<p data-i18n="faq_question_1">How to recharge?</p>
|
|
<p data-i18n="faq_answer_1">Enter the user's ID, enter the coins amount, then confirm recharge.</p>
|
|
<p data-i18n="faq_question_2">How to check recharge result?</p>
|
|
<p data-i18n="faq_answer_2">After payment, return to the app and check the user's wallet balance.</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="history-modal" id="historyModal" hidden>
|
|
<div class="modal-backdrop" data-history-close></div>
|
|
<section class="modal-dialog history-dialog" role="dialog" aria-modal="true" aria-labelledby="historyTitle">
|
|
<div class="modal-head">
|
|
<h2 id="historyTitle" data-i18n="transaction_records">Transaction records</h2>
|
|
<button class="modal-close" type="button" aria-label="Close" data-i18n-aria="close" data-history-close>×</button>
|
|
</div>
|
|
<div class="history-body">
|
|
<form class="history-search-form" id="historySearchForm" autocomplete="off">
|
|
<input id="historySearchInput" type="text" inputmode="text" data-i18n-placeholder="enter_user_id" placeholder="Enter user ID" />
|
|
<button type="submit" data-i18n="search">Search</button>
|
|
<button id="historyClearButton" class="history-clear-button" type="button" data-i18n="cancel">Cancel</button>
|
|
</form>
|
|
<div class="history-tabs" role="tablist" aria-label="Transaction type">
|
|
<button type="button" class="history-tab is-active" data-history-tab="0" data-i18n="income">Income</button>
|
|
<button type="button" class="history-tab" data-history-tab="1" data-i18n="expenditure">Expenditure</button>
|
|
</div>
|
|
<div class="history-status" id="historyStatus" role="status" hidden></div>
|
|
<div class="history-list" id="historyList"></div>
|
|
<button class="history-load-more" id="historyLoadMore" type="button" data-i18n="load_more" hidden>Load more</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="whatsapp-modal" id="whatsappModal" hidden>
|
|
<div class="modal-backdrop" data-whatsapp-close></div>
|
|
<section class="modal-dialog whatsapp-dialog" role="dialog" aria-modal="true" aria-labelledby="whatsappTitle">
|
|
<div class="modal-head">
|
|
<h2 id="whatsappTitle" data-i18n="add_whatsapp_title">Add WhatsApp</h2>
|
|
<button class="modal-close" type="button" aria-label="Close" data-i18n-aria="close" data-whatsapp-close>×</button>
|
|
</div>
|
|
<form class="whatsapp-form" id="whatsappForm" autocomplete="off">
|
|
<div class="whatsapp-input-shell">
|
|
<span class="whatsapp-input-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M6.2 18.2 4.8 21l3.2-1.1a8.2 8.2 0 1 0-1.8-1.7Z" />
|
|
<path d="M9.4 8.4c.3-.3.8-.3 1 .1l.7 1.2c.2.4.1.8-.2 1.1l-.4.3c.5 1 1.4 1.8 2.4 2.3l.4-.5c.3-.3.7-.4 1.1-.2l1.2.7c.4.2.5.7.2 1-.5.8-1.2 1.1-2.1.9-2.8-.6-5.1-2.8-5.8-5.6-.2-.8.2-1.5 1.5-1.3Z" />
|
|
</svg>
|
|
</span>
|
|
<input id="whatsappInput" type="tel" inputmode="tel" data-i18n-placeholder="whatsapp_placeholder" placeholder="Enter WhatsApp" />
|
|
</div>
|
|
<button id="saveWhatsappButton" type="submit" data-i18n="save">Save</button>
|
|
<div class="form-status" id="whatsappStatus" role="status" hidden></div>
|
|
</form>
|
|
</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" data-i18n="loading_mask">loading....</div>
|
|
</div>
|
|
|
|
<div class="toast" id="toast" role="status" aria-live="polite" hidden></div>
|
|
</div>
|
|
<script src="./script.js?v=20260430-0108" defer></script>
|
|
</body>
|
|
</html>
|