60 lines
1.9 KiB
HTML
60 lines
1.9 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">
|
|
<title>Yumi Wheel Local Preview</title>
|
|
<link rel="stylesheet" href="./styles.css">
|
|
</head>
|
|
<body>
|
|
<main class="phone" id="app">
|
|
<section class="wheel-page" id="page">
|
|
<header class="topbar">
|
|
<div>
|
|
<div class="room-name">Yumi Wheel</div>
|
|
<div class="coin-line"><span class="coin-dot"></span><span id="balanceTop">0</span></div>
|
|
</div>
|
|
<button class="icon-button" id="historyBtn" type="button" aria-label="History">H</button>
|
|
</header>
|
|
|
|
<h1>YUMI WHEEL</h1>
|
|
|
|
<nav class="tabs" aria-label="Wheel modes">
|
|
<button type="button" data-mode="classic">Classic</button>
|
|
<button type="button" data-mode="luxury">luxury</button>
|
|
<button type="button" data-mode="advanced">Advanced</button>
|
|
</nav>
|
|
|
|
<div class="ticker" aria-live="polite">
|
|
<div id="tickerTrack"></div>
|
|
</div>
|
|
|
|
<section class="stage" id="stage"></section>
|
|
|
|
<section class="buy-row" id="buyRow"></section>
|
|
|
|
<footer class="balance">
|
|
<span class="coin-dot"></span>
|
|
<strong id="balanceBottom">0</strong>
|
|
</footer>
|
|
</section>
|
|
</main>
|
|
|
|
<dialog id="rewardDialog" class="modal">
|
|
<button class="close" id="closeReward" type="button">x</button>
|
|
<h2>Rewards</h2>
|
|
<div id="rewardList" class="reward-list"></div>
|
|
<p id="rewardText"></p>
|
|
<button class="primary" id="drawAgain" type="button">Draw again</button>
|
|
</dialog>
|
|
|
|
<dialog id="historyDialog" class="modal">
|
|
<button class="close" id="closeHistory" type="button">x</button>
|
|
<h2>History Record</h2>
|
|
<div id="historyList" class="history-list"></div>
|
|
</dialog>
|
|
|
|
<script src="./app.js"></script>
|
|
</body>
|
|
</html>
|