195 lines
8.0 KiB
HTML
195 lines
8.0 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>Room Reward Event</title>
|
|
<link rel="stylesheet" href="../../common/theme.css?v=20260606c" />
|
|
<link rel="stylesheet" href="./style.css?v=20260608a" />
|
|
</head>
|
|
<body>
|
|
<div class="app-viewport" id="appViewport">
|
|
<main class="page" id="page">
|
|
<div class="stage-wrap" id="stageWrap">
|
|
<section
|
|
class="stage"
|
|
aria-label="Room Reward Event"
|
|
data-i18n-aria="roomReward.pageLabel"
|
|
>
|
|
<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="roomReward.changeLanguage"
|
|
>
|
|
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>
|
|
<img
|
|
class="hero-bg"
|
|
src="./assets/296_8271.png"
|
|
alt=""
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
<section
|
|
class="target-card"
|
|
aria-label="Current reward target"
|
|
data-i18n-aria="roomReward.currentTarget"
|
|
>
|
|
<img
|
|
class="target-card-img"
|
|
src="./assets/296_8274.png"
|
|
alt=""
|
|
aria-hidden="true"
|
|
/>
|
|
<div class="target-value">
|
|
<img
|
|
class="coin-icon"
|
|
src="./assets/296_8275.png"
|
|
alt=""
|
|
aria-hidden="true"
|
|
/>
|
|
<strong id="targetReward">1000</strong>
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
class="reward-table"
|
|
aria-label="Room reward tiers"
|
|
data-i18n-aria="roomReward.tiersLabel"
|
|
>
|
|
<div class="table-fill" aria-hidden="true"></div>
|
|
<img
|
|
class="table-border table-border-side"
|
|
src="./assets/296_8350.png"
|
|
alt=""
|
|
aria-hidden="true"
|
|
/>
|
|
<img
|
|
class="table-border table-border-top"
|
|
src="./assets/296_8301.png"
|
|
alt=""
|
|
aria-hidden="true"
|
|
/>
|
|
<img
|
|
class="table-border table-border-bottom"
|
|
src="./assets/296_8326.png"
|
|
alt=""
|
|
aria-hidden="true"
|
|
/>
|
|
<div class="table-divider" aria-hidden="true"></div>
|
|
<div class="table-content" id="tierTable"></div>
|
|
</section>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<section
|
|
class="user-panel"
|
|
aria-label="My room reward progress"
|
|
data-i18n-aria="roomReward.progressLabel"
|
|
>
|
|
<img
|
|
class="user-avatar"
|
|
id="userAvatar"
|
|
src="./assets/294_8091.png"
|
|
alt=""
|
|
/>
|
|
<div class="user-name" id="userName">Namename...</div>
|
|
<div class="user-id" id="userId">ID: 123456789</div>
|
|
<div
|
|
class="metric-label contribution-label"
|
|
data-i18n="roomReward.contribution"
|
|
>
|
|
This week's contribution:
|
|
</div>
|
|
<div
|
|
class="metric-label rewards-label"
|
|
data-i18n="roomReward.rewards"
|
|
>
|
|
This week's rewards:
|
|
</div>
|
|
<button
|
|
class="reward-button is-active"
|
|
id="contributionButton"
|
|
type="button"
|
|
aria-label="Contribution reward"
|
|
data-i18n-aria="roomReward.contributionReward"
|
|
data-active-src="./assets/296_8424.png"
|
|
data-inactive-src="./assets/296_8429.png"
|
|
>
|
|
<img src="./assets/296_8424.png" alt="" aria-hidden="true" />
|
|
<span id="contributionValue">100</span>
|
|
</button>
|
|
<button
|
|
class="reward-button is-disabled"
|
|
id="rewardsButton"
|
|
type="button"
|
|
aria-label="Weekly rewards"
|
|
data-i18n-aria="roomReward.weeklyRewards"
|
|
disabled
|
|
data-active-src="./assets/296_8424.png"
|
|
data-inactive-src="./assets/296_8429.png"
|
|
>
|
|
<img src="./assets/296_8429.png" alt="" aria-hidden="true" />
|
|
<span id="weeklyRewardValue">100</span>
|
|
</button>
|
|
</section>
|
|
|
|
<script>
|
|
(function () {
|
|
try {
|
|
var params = new URLSearchParams(window.location.search);
|
|
if (
|
|
!params.get('lang') &&
|
|
!window.localStorage.getItem('room_reward_lang_ready')
|
|
) {
|
|
window.localStorage.setItem('hyapp_h5_lang', 'en');
|
|
window.localStorage.setItem(
|
|
'room_reward_lang_ready',
|
|
'1'
|
|
);
|
|
}
|
|
} catch (error) {
|
|
document.documentElement.lang = 'en';
|
|
}
|
|
})();
|
|
</script>
|
|
<script src="../../common/i18n.js?v=20260606c"></script>
|
|
<script src="../../common/api.js?v=20260606c"></script>
|
|
<script src="./script.js?v=20260629a"></script>
|
|
</body>
|
|
</html>
|