406 lines
16 KiB
HTML
406 lines
16 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-hy-app-code="aslan">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
|
||
/>
|
||
<meta name="theme-color" content="#140e64" />
|
||
<link rel="icon" href="data:," />
|
||
<title>Game King</title>
|
||
<link rel="stylesheet" href="../../common/theme.css?v=20260717" />
|
||
<link rel="stylesheet" href="./aslan/aslan.css?v=20260717" />
|
||
</head>
|
||
<body>
|
||
<div class="game-king-app" id="gameKingApp" data-node-id="918:4398">
|
||
<header class="hero" data-node-id="918:4400">
|
||
<!-- Approved standalone Figma node 918:32244: title/crown/gamepad
|
||
artwork only. Activity controls and countdown remain live DOM. -->
|
||
<img
|
||
class="hero-art"
|
||
src="./aslan/assets/layers/hero-game-king.png"
|
||
alt=""
|
||
aria-hidden="true"
|
||
data-node-id="918:32244"
|
||
/>
|
||
<h1 class="visually-hidden" data-i18n="gameKing.title">
|
||
Game King
|
||
</h1>
|
||
|
||
<div class="side-actions" aria-label="Activity information">
|
||
<button
|
||
class="side-action"
|
||
id="ruleButton"
|
||
type="button"
|
||
data-node-id="918:4542"
|
||
data-i18n-aria="gameKing.rule"
|
||
>
|
||
<span data-i18n="gameKing.rule">Rule</span>
|
||
</button>
|
||
<button
|
||
class="side-action"
|
||
id="awardButton"
|
||
type="button"
|
||
data-node-id="918:4545"
|
||
data-i18n-aria="gameKing.award"
|
||
>
|
||
<span data-i18n="gameKing.award">Award</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div
|
||
class="countdown"
|
||
id="countdown"
|
||
aria-label="Activity countdown"
|
||
data-i18n-aria="gameKing.countdown"
|
||
>
|
||
<span class="countdown-cell">
|
||
<strong data-countdown="days">--</strong>
|
||
<small data-i18n="gameKing.days">D</small>
|
||
</span>
|
||
<span class="countdown-cell">
|
||
<strong data-countdown="hours">--</strong>
|
||
</span>
|
||
<i aria-hidden="true">:</i>
|
||
<span class="countdown-cell">
|
||
<strong data-countdown="minutes">--</strong>
|
||
</span>
|
||
<i aria-hidden="true">:</i>
|
||
<span class="countdown-cell">
|
||
<strong data-countdown="seconds">--</strong>
|
||
</span>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="event-stage">
|
||
<nav
|
||
class="primary-tabs"
|
||
id="primaryTabs"
|
||
aria-label="Game King sections"
|
||
data-i18n-aria="gameKing.sections"
|
||
data-node-id="918:4555"
|
||
>
|
||
<button
|
||
class="primary-tab is-active"
|
||
type="button"
|
||
data-view="lottery"
|
||
>
|
||
<span data-i18n="gameKing.tabLottery">Lottery</span>
|
||
</button>
|
||
<button
|
||
class="primary-tab"
|
||
type="button"
|
||
data-view="tycoon"
|
||
>
|
||
<span data-i18n="gameKing.tabTycoon">Tycoon King</span>
|
||
</button>
|
||
<button
|
||
class="primary-tab"
|
||
type="button"
|
||
data-view="victorious"
|
||
>
|
||
<span data-i18n="gameKing.tabVictorious"
|
||
>Victorious King</span
|
||
>
|
||
</button>
|
||
</nav>
|
||
|
||
<section
|
||
class="view-panel is-active"
|
||
id="lotteryView"
|
||
data-view-panel="lottery"
|
||
>
|
||
<div
|
||
class="section-state loading-state"
|
||
id="pageLoading"
|
||
role="status"
|
||
>
|
||
<span class="loading-spinner" aria-hidden="true"></span>
|
||
<span data-i18n="gameKing.loading">Loading...</span>
|
||
</div>
|
||
|
||
<div
|
||
class="section-state error-state"
|
||
id="pageError"
|
||
hidden
|
||
>
|
||
<p data-i18n="gameKing.loadFailed">
|
||
Unable to load this activity.
|
||
</p>
|
||
<button
|
||
class="retry-button"
|
||
id="retryButton"
|
||
type="button"
|
||
data-i18n="gameKing.retry"
|
||
>
|
||
Retry
|
||
</button>
|
||
</div>
|
||
|
||
<div class="lottery-content" id="lotteryContent" hidden>
|
||
<div class="wheel" data-node-id="918:4571">
|
||
<img
|
||
class="wheel-frame"
|
||
id="wheelFrame"
|
||
src="./aslan/assets/layers/wheel-frame.png"
|
||
alt=""
|
||
/>
|
||
<ol
|
||
class="wheel-prizes"
|
||
id="wheelPrizes"
|
||
aria-label="Lottery prizes"
|
||
></ol>
|
||
<button
|
||
class="spin-button"
|
||
id="spinButton"
|
||
type="button"
|
||
data-node-id="918:4572"
|
||
data-i18n-aria="gameKing.draw"
|
||
>
|
||
<img
|
||
src="./aslan/assets/layers/spin-center.png"
|
||
alt=""
|
||
/>
|
||
<strong data-i18n="gameKing.spin">Spin</strong>
|
||
<small id="spinChanceBadge">×0</small>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="lottery-progress" aria-live="polite">
|
||
<div>
|
||
<span data-i18n="gameKing.myChances"
|
||
>My chances</span
|
||
>
|
||
<strong id="chanceCount">0</strong>
|
||
</div>
|
||
<button
|
||
class="records-link"
|
||
id="recordsButton"
|
||
type="button"
|
||
>
|
||
<span data-i18n="gameKing.myRewards"
|
||
>My rewards</span
|
||
>
|
||
</button>
|
||
<div class="progress-track" aria-hidden="true">
|
||
<span id="consumptionProgress"></span>
|
||
</div>
|
||
<p id="progressCopy"></p>
|
||
</div>
|
||
|
||
<button
|
||
class="draw-button"
|
||
id="drawButton"
|
||
type="button"
|
||
data-node-id="918:4599"
|
||
>
|
||
<span data-i18n="gameKing.startDraw"
|
||
>Start the lucky draw</span
|
||
>
|
||
</button>
|
||
|
||
<section class="rule-card" data-node-id="918:4601">
|
||
<h2 data-i18n="gameKing.rule">Rule</h2>
|
||
<ol id="ruleSummary"></ol>
|
||
</section>
|
||
</div>
|
||
</section>
|
||
|
||
<section
|
||
class="view-panel ranking-panel"
|
||
id="rankingView"
|
||
data-view-panel="ranking"
|
||
hidden
|
||
>
|
||
<div
|
||
class="period-tabs"
|
||
id="periodTabs"
|
||
data-node-id="918:4661"
|
||
>
|
||
<button
|
||
class="period-tab is-active"
|
||
type="button"
|
||
data-period="DAILY"
|
||
>
|
||
<span data-i18n="gameKing.dailyRankings"
|
||
>Daily Rankings</span
|
||
>
|
||
</button>
|
||
<button
|
||
class="period-tab"
|
||
type="button"
|
||
data-period="OVERALL"
|
||
>
|
||
<span data-i18n="gameKing.overallRankings"
|
||
>Overall Rankings</span
|
||
>
|
||
</button>
|
||
</div>
|
||
|
||
<div
|
||
class="rank-state section-state"
|
||
id="rankLoading"
|
||
hidden
|
||
>
|
||
<span class="loading-spinner" aria-hidden="true"></span>
|
||
<span data-i18n="gameKing.loadingRankings"
|
||
>Loading rankings...</span
|
||
>
|
||
</div>
|
||
<div
|
||
class="rank-state section-state error-state"
|
||
id="rankError"
|
||
hidden
|
||
>
|
||
<p data-i18n="gameKing.rankFailed">
|
||
Unable to load rankings.
|
||
</p>
|
||
<button
|
||
class="retry-button"
|
||
id="rankRetryButton"
|
||
type="button"
|
||
data-i18n="gameKing.retry"
|
||
>
|
||
Retry
|
||
</button>
|
||
</div>
|
||
<div class="rank-empty" id="rankEmpty" hidden>
|
||
<span aria-hidden="true">✦</span>
|
||
<p data-i18n="gameKing.noRankings">
|
||
No ranking data yet.
|
||
</p>
|
||
</div>
|
||
|
||
<div id="rankingContent" hidden>
|
||
<ol class="rank-podium" id="rankPodium"></ol>
|
||
<ol class="rank-list" id="rankList" start="4"></ol>
|
||
<div class="my-rank" id="myRank"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section
|
||
class="view-panel rewards-panel"
|
||
id="rewardsView"
|
||
data-view-panel="rewards"
|
||
hidden
|
||
>
|
||
<button
|
||
class="rewards-back"
|
||
id="rewardsBackButton"
|
||
type="button"
|
||
data-i18n-aria="gameKing.back"
|
||
>
|
||
<span aria-hidden="true">↩</span>
|
||
</button>
|
||
<div class="rewards-heading">
|
||
<span data-i18n="gameKing.rankingRewards"
|
||
>Ranking rewards</span
|
||
>
|
||
<small id="rewardBoardName"></small>
|
||
</div>
|
||
<div class="reward-empty" id="rewardEmpty" hidden>
|
||
<p data-i18n="gameKing.noRewards">
|
||
No reward configuration yet.
|
||
</p>
|
||
</div>
|
||
<div class="reward-tier-list" id="rewardTierList"></div>
|
||
</section>
|
||
</main>
|
||
|
||
<div
|
||
class="toast"
|
||
id="toast"
|
||
role="status"
|
||
aria-live="polite"
|
||
hidden
|
||
></div>
|
||
|
||
<div class="modal-backdrop" id="ruleModal" hidden>
|
||
<section
|
||
class="info-modal rule-modal"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="ruleTitle"
|
||
>
|
||
<button
|
||
class="modal-close"
|
||
type="button"
|
||
data-close-modal="ruleModal"
|
||
aria-label="Close"
|
||
data-i18n-aria="gameKing.close"
|
||
>
|
||
×
|
||
</button>
|
||
<h2 id="ruleTitle" data-i18n="gameKing.rule">Rule</h2>
|
||
<ol id="ruleList"></ol>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="modal-backdrop" id="resultModal" hidden>
|
||
<section
|
||
class="result-modal"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="resultTitle"
|
||
>
|
||
<h2 id="resultTitle" data-i18n="gameKing.congratulations">
|
||
Congratulations
|
||
</h2>
|
||
<div class="result-rewards" id="resultRewards"></div>
|
||
<p id="resultCopy" data-i18n="gameKing.rewardIssued">
|
||
The reward has been automatically issued to your
|
||
account.
|
||
</p>
|
||
<button
|
||
class="result-confirm"
|
||
type="button"
|
||
data-close-modal="resultModal"
|
||
>
|
||
<span data-i18n="gameKing.confirm">Confirm</span>
|
||
</button>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="modal-backdrop" id="recordsModal" hidden>
|
||
<section
|
||
class="info-modal records-modal"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="recordsTitle"
|
||
>
|
||
<button
|
||
class="modal-close"
|
||
type="button"
|
||
data-close-modal="recordsModal"
|
||
aria-label="Close"
|
||
data-i18n-aria="gameKing.close"
|
||
>
|
||
×
|
||
</button>
|
||
<h2 id="recordsTitle" data-i18n="gameKing.myRewards">
|
||
My rewards
|
||
</h2>
|
||
<div class="records-loading" id="recordsLoading" hidden>
|
||
<span class="loading-spinner" aria-hidden="true"></span>
|
||
<span data-i18n="gameKing.loading">Loading...</span>
|
||
</div>
|
||
<div class="records-empty" id="recordsEmpty" hidden>
|
||
<p data-i18n="gameKing.noDrawRecords">
|
||
No draw records yet.
|
||
</p>
|
||
</div>
|
||
<ul class="records-list" id="recordsList"></ul>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
window.HyAppI18nSupported = ['en', 'ar', 'tr', 'es'];
|
||
</script>
|
||
<script src="../../common/i18n.js?v=20260717"></script>
|
||
<script src="../../common_aslan/aslan-common.js?v=20260717-game-king"></script>
|
||
<script src="./aslan/aslan.js?v=20260717"></script>
|
||
</body>
|
||
</html>
|