62 lines
2.6 KiB
HTML
62 lines
2.6 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>Exchange Coins</title>
|
|
<link rel="stylesheet" href="./exchange-gold-coins.css" />
|
|
</head>
|
|
<body>
|
|
<div class="exchange-gold-coins">
|
|
<header class="page-header">
|
|
<button class="back-button" type="button" data-action="back" aria-label="Back"><img id="backIcon" alt="" /></button>
|
|
<h1 data-i18n="exchange_gold_coins">Exchange Coins</h1>
|
|
<button class="lang-button" type="button" data-action="language">EN</button>
|
|
</header>
|
|
|
|
<main class="content">
|
|
<section>
|
|
<div class="section-header">
|
|
<div class="section-title" data-i18n="information">Information</div>
|
|
<button class="details-button" type="button" data-route="/information-details">
|
|
<span data-i18n="details">Details</span>
|
|
<img id="detailsArrowIcon" alt="" />
|
|
</button>
|
|
</div>
|
|
|
|
<section class="surface-card salary-card">
|
|
<span class="salary-label" data-i18n="available_salaries">Available salaries</span>
|
|
<span class="loading-text" id="balanceLoading" hidden><span data-i18n="loading">Loading</span>...</span>
|
|
<span class="salary-value" id="balanceValue">0.00</span>
|
|
</section>
|
|
</section>
|
|
|
|
<section>
|
|
<div class="section-title coins-title" data-i18n="exchange_gold_coins">Exchange Coins</div>
|
|
<section class="surface-card coins-card">
|
|
<div class="coin-grid" id="coinGrid"></div>
|
|
</section>
|
|
<div class="action-row">
|
|
<button class="exchange-button" type="button" id="exchangeButton" disabled data-i18n="exchange">Exchange</button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div class="modal-layer" id="confirmModal" hidden>
|
|
<div class="modal-card">
|
|
<div class="modal-title" data-i18n="tips">Tips</div>
|
|
<div class="modal-message" data-i18n="confirm_exchange">Confirm exchange?</div>
|
|
<div class="modal-actions">
|
|
<button class="modal-secondary" type="button" data-action="cancel" data-i18n="cancel">Cancel</button>
|
|
<button class="modal-primary" type="button" data-action="confirm" data-i18n="confirm">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast" id="toast" hidden></div>
|
|
</div>
|
|
|
|
<script type="module" src="./exchange-gold-coins.js"></script>
|
|
</body>
|
|
</html>
|