446 lines
19 KiB
HTML
446 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>Withdraw/Exchange</title>
|
||
<link rel="stylesheet" href="../../common/theme.css?v=20260602" />
|
||
<link rel="stylesheet" href="./style.css?v=20260602" />
|
||
</head>
|
||
|
||
<body>
|
||
<div
|
||
class="withdraw-exchange-page"
|
||
aria-label="Withdraw and exchange"
|
||
data-i18n-aria="withdraw_exchange.page_label"
|
||
>
|
||
<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="withdraw_exchange.back"
|
||
>
|
||
<svg viewBox="0 0 32 32" aria-hidden="true">
|
||
<path d="M20 8 12 16l8 8" />
|
||
</svg>
|
||
</button>
|
||
<h1 data-i18n="withdraw_exchange.title">Withdraw/Exchange</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="withdraw_exchange.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="balance-card">
|
||
<div class="balance-head">
|
||
<div
|
||
class="balance-label"
|
||
data-i18n="withdraw_exchange.salary"
|
||
>
|
||
salary
|
||
</div>
|
||
<button
|
||
class="balance-history-button"
|
||
id="salaryHistoryButton"
|
||
type="button"
|
||
aria-label="Salary history"
|
||
data-i18n-aria="withdraw_exchange.salary_history"
|
||
>
|
||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="m9 5 7 7-7 7" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="balance-value">
|
||
<span class="balance-currency" aria-hidden="true"
|
||
>$</span
|
||
>
|
||
<span id="balanceAmount">0.00</span>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="mode-card">
|
||
<div
|
||
class="mode-tabs"
|
||
role="tablist"
|
||
aria-label="Withdraw, exchange, or transfer"
|
||
data-i18n-aria="withdraw_exchange.mode_tabs"
|
||
>
|
||
<button
|
||
class="mode-tab"
|
||
type="button"
|
||
role="tab"
|
||
aria-selected="false"
|
||
data-mode="withdraw"
|
||
data-i18n="withdraw_exchange.withdraw"
|
||
>
|
||
Withdraw
|
||
</button>
|
||
<button
|
||
class="mode-tab"
|
||
type="button"
|
||
role="tab"
|
||
aria-selected="false"
|
||
data-mode="exchange"
|
||
data-i18n="withdraw_exchange.exchange"
|
||
>
|
||
Exchange
|
||
</button>
|
||
<button
|
||
class="mode-tab"
|
||
type="button"
|
||
role="tab"
|
||
aria-selected="false"
|
||
data-mode="transfer"
|
||
data-i18n="withdraw_exchange.transfer"
|
||
>
|
||
Transfer
|
||
</button>
|
||
</div>
|
||
|
||
<div class="mode-panel" data-panel="withdraw">
|
||
<label class="field">
|
||
<span data-i18n="withdraw_exchange.withdraw_amount"
|
||
>Withdraw amount</span
|
||
>
|
||
<div class="field-control amount-control">
|
||
<span aria-hidden="true">$</span>
|
||
<input
|
||
id="withdrawAmount"
|
||
type="number"
|
||
inputmode="decimal"
|
||
min="50"
|
||
step="0.01"
|
||
aria-label="Withdraw amount"
|
||
data-i18n-aria="withdraw_exchange.withdraw_amount"
|
||
/>
|
||
</div>
|
||
</label>
|
||
<div class="hint-row">
|
||
<span data-i18n="withdraw_exchange.minimum"
|
||
>Minimum 50 USD</span
|
||
>
|
||
<button
|
||
class="text-action"
|
||
id="allButton"
|
||
type="button"
|
||
data-i18n="withdraw_exchange.all"
|
||
>
|
||
All
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mode-panel" data-panel="exchange">
|
||
<label class="field">
|
||
<span data-i18n="withdraw_exchange.exchange_amount"
|
||
>Exchange amount</span
|
||
>
|
||
<div class="field-control amount-control">
|
||
<span aria-hidden="true">$</span>
|
||
<input
|
||
id="exchangeAmount"
|
||
type="number"
|
||
inputmode="decimal"
|
||
min="0"
|
||
step="0.01"
|
||
aria-label="Exchange amount"
|
||
data-i18n-aria="withdraw_exchange.exchange_amount"
|
||
/>
|
||
</div>
|
||
</label>
|
||
<div class="exchange-preview">
|
||
<span data-i18n="withdraw_exchange.exchange_rate"
|
||
>Exchange rate</span
|
||
>
|
||
<strong id="exchangeRateText"></strong>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mode-panel" data-panel="transfer">
|
||
<div class="field">
|
||
<span data-i18n="withdraw_exchange.transfer_to"
|
||
>Transfer to</span
|
||
>
|
||
<div class="transfer-search">
|
||
<input
|
||
id="transferAccount"
|
||
type="text"
|
||
inputmode="numeric"
|
||
autocomplete="off"
|
||
aria-label="Transfer to"
|
||
data-i18n-aria="withdraw_exchange.transfer_to"
|
||
/>
|
||
<button
|
||
class="search-payee-button"
|
||
id="searchPayeeButton"
|
||
type="button"
|
||
data-i18n="withdraw_exchange.search"
|
||
>
|
||
Search
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="payee-result" id="payeeResult" hidden></div>
|
||
<label class="field transfer-amount-field">
|
||
<span data-i18n="withdraw_exchange.transfer_amount"
|
||
>Transfer amount</span
|
||
>
|
||
<div class="field-control amount-control">
|
||
<span aria-hidden="true">$</span>
|
||
<input
|
||
id="transferAmount"
|
||
type="number"
|
||
inputmode="decimal"
|
||
min="0"
|
||
step="0.01"
|
||
aria-label="Transfer amount"
|
||
data-i18n-aria="withdraw_exchange.transfer_amount"
|
||
/>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</section>
|
||
|
||
<section
|
||
class="card-section payment-section"
|
||
id="paymentSection"
|
||
>
|
||
<div class="section-head">
|
||
<div>
|
||
<div
|
||
class="section-title"
|
||
data-i18n="withdraw_exchange.payment_method"
|
||
>
|
||
USDT TRC20 address
|
||
</div>
|
||
<div
|
||
class="section-subtitle"
|
||
data-i18n="withdraw_exchange.payment_method_subtitle"
|
||
>
|
||
Withdrawals are sent to your TRC20 USDT address.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="empty-address-state" id="emptyAddressState">
|
||
<div class="empty-icon" aria-hidden="true">
|
||
<svg viewBox="0 0 32 32">
|
||
<path d="M9 16a5 5 0 0 1 5-5h3" />
|
||
<path d="M15 21h-3a5 5 0 0 1 0-10h3" />
|
||
<path d="M17 21h3a5 5 0 0 0 0-10h-3" />
|
||
<path d="M13 16h6" />
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<div
|
||
class="empty-title"
|
||
data-i18n="withdraw_exchange.no_payment_info"
|
||
>
|
||
No USDT address
|
||
</div>
|
||
<div
|
||
class="empty-copy"
|
||
data-i18n="withdraw_exchange.no_payment_info_copy"
|
||
>
|
||
Fill in a TRC20 USDT address before withdrawing.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="address-form" id="addressForm">
|
||
<label class="field">
|
||
<span data-i18n="withdraw_exchange.trc20_address"
|
||
>TRC20 address</span
|
||
>
|
||
<input
|
||
id="trc20Address"
|
||
type="text"
|
||
autocomplete="off"
|
||
/>
|
||
</label>
|
||
<button
|
||
class="primary-button"
|
||
id="saveAddressButton"
|
||
type="button"
|
||
data-i18n="withdraw_exchange.save_address"
|
||
>
|
||
Save address
|
||
</button>
|
||
</div>
|
||
|
||
<div
|
||
class="bound-address-card"
|
||
id="boundAddressCard"
|
||
hidden
|
||
>
|
||
<div class="network-badge" aria-hidden="true">
|
||
TRC20
|
||
</div>
|
||
<div class="bound-copy">
|
||
<div class="bound-network">USDT TRC20</div>
|
||
<div class="bound-address" id="boundAddress">-</div>
|
||
<div
|
||
class="bound-meta"
|
||
data-i18n="withdraw_exchange.usdt_only"
|
||
>
|
||
USDT only
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<button
|
||
class="submit-button"
|
||
id="submitButton"
|
||
type="button"
|
||
disabled
|
||
data-i18n="withdraw_exchange.transfer_now"
|
||
>
|
||
Transfer now
|
||
</button>
|
||
</main>
|
||
|
||
<div class="salary-history-modal" id="salaryHistoryModal" hidden>
|
||
<button
|
||
class="salary-history-backdrop"
|
||
id="salaryHistoryBackdrop"
|
||
type="button"
|
||
aria-label="Close"
|
||
data-i18n-aria="withdraw_exchange.close"
|
||
></button>
|
||
<section
|
||
class="salary-history-dialog"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="salaryHistoryTitle"
|
||
>
|
||
<div class="salary-history-head">
|
||
<h2
|
||
id="salaryHistoryTitle"
|
||
data-i18n="withdraw_exchange.salary_history"
|
||
>
|
||
Salary history
|
||
</h2>
|
||
<button
|
||
class="salary-history-close"
|
||
id="salaryHistoryCloseButton"
|
||
type="button"
|
||
aria-label="Close"
|
||
data-i18n-aria="withdraw_exchange.close"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
<div class="salary-history-summary">
|
||
<span data-i18n="withdraw_exchange.salary">salary</span>
|
||
<strong id="salaryHistoryTotal">$0.00</strong>
|
||
</div>
|
||
<div
|
||
class="salary-history-list"
|
||
id="salaryHistoryList"
|
||
></div>
|
||
</section>
|
||
</div>
|
||
|
||
<div
|
||
class="contact-modal"
|
||
id="contactModal"
|
||
hidden
|
||
aria-hidden="true"
|
||
>
|
||
<button
|
||
class="contact-backdrop"
|
||
id="contactBackdrop"
|
||
type="button"
|
||
aria-label="Close"
|
||
data-i18n-aria="contact_card.close"
|
||
></button>
|
||
<section
|
||
class="contact-dialog"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="contactTitle"
|
||
>
|
||
<div class="contact-head">
|
||
<h2 id="contactTitle" data-i18n="contact_card.sheet_title">
|
||
WhatsApp Contact
|
||
</h2>
|
||
<button
|
||
class="contact-close"
|
||
id="contactCloseButton"
|
||
type="button"
|
||
aria-label="Close"
|
||
data-i18n-aria="contact_card.close"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
<form class="contact-form" id="contactForm">
|
||
<label class="field contact-field">
|
||
<span data-i18n="contact_card.field_label"
|
||
>WhatsApp phone or link</span
|
||
>
|
||
<input
|
||
id="contactInput"
|
||
type="text"
|
||
inputmode="text"
|
||
autocomplete="off"
|
||
placeholder="+6512345678"
|
||
data-i18n-placeholder="contact_card.placeholder"
|
||
/>
|
||
</label>
|
||
<div
|
||
class="contact-status"
|
||
id="contactStatus"
|
||
hidden
|
||
></div>
|
||
<button
|
||
class="primary-button contact-save-button"
|
||
id="saveContactButton"
|
||
type="submit"
|
||
data-i18n="contact_card.save"
|
||
>
|
||
Save
|
||
</button>
|
||
</form>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="home-indicator" aria-hidden="true"></div>
|
||
</div>
|
||
|
||
<script src="../../common/toast.js"></script>
|
||
<script src="../../common/jsbridge.js"></script>
|
||
<script src="../../common/i18n.js?v=20260602"></script>
|
||
<script src="../../common/params.js?v=20260604"></script>
|
||
<script src="../../common/api.js?v=20260604-salary-wallet"></script>
|
||
<script src="./script.js?v=20260629-contact-required"></script>
|
||
</body>
|
||
</html>
|