329 lines
11 KiB
HTML
329 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1, viewport-fit=cover"
|
|
/>
|
|
<title data-i18n="diceTips.pageTitle">Game Instructions</title>
|
|
<style>
|
|
:root {
|
|
color-scheme: dark;
|
|
--tips-frame-width: 375px;
|
|
--tips-frame-height: 812px;
|
|
--tips-scale: 1;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
min-width: 100%;
|
|
height: 100%;
|
|
min-height: 100%;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
background: #030623;
|
|
font-family:
|
|
'Source Han Sans SC', 'Helvetica Neue', Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: geometricprecision;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
button {
|
|
padding: 0;
|
|
border: 0;
|
|
color: inherit;
|
|
font: inherit;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.tips-stage {
|
|
position: relative;
|
|
width: calc(var(--tips-frame-width) * var(--tips-scale));
|
|
height: calc(var(--tips-frame-height) * var(--tips-scale));
|
|
overflow: hidden;
|
|
background: #030623;
|
|
}
|
|
|
|
.tips-frame {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: var(--tips-frame-width);
|
|
height: var(--tips-frame-height);
|
|
overflow: hidden;
|
|
background: #030623;
|
|
transform: scale(var(--tips-scale));
|
|
transform-origin: top left;
|
|
}
|
|
|
|
.tips-bg {
|
|
position: absolute;
|
|
top: 16px;
|
|
left: -47px;
|
|
width: 470px;
|
|
height: 834px;
|
|
opacity: 0.2;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
-webkit-mask-image: url('assets/figma/bg-mask.svg');
|
|
mask-image: url('assets/figma/bg-mask.svg');
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-position: 47px -16px;
|
|
mask-position: 47px -16px;
|
|
-webkit-mask-size: 375px 812px;
|
|
mask-size: 375px 812px;
|
|
}
|
|
|
|
.tips-bg img {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: none;
|
|
object-fit: cover;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.nav {
|
|
position: absolute;
|
|
top: 44px;
|
|
left: 0;
|
|
z-index: 5;
|
|
width: 375px;
|
|
height: 44px;
|
|
}
|
|
|
|
.back-button {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 16px;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.back-button img {
|
|
display: block;
|
|
width: 24px;
|
|
height: 24px;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.nav-title {
|
|
position: absolute;
|
|
top: 13px;
|
|
left: 187px;
|
|
margin: 0;
|
|
color: #fff;
|
|
font-family:
|
|
'Source Han Sans SC', 'Helvetica Neue', Arial, sans-serif;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
line-height: 18px;
|
|
text-align: center;
|
|
text-transform: capitalize;
|
|
white-space: nowrap;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.rules {
|
|
position: absolute;
|
|
top: 104px;
|
|
left: 16px;
|
|
z-index: 3;
|
|
width: 343px;
|
|
margin: 0;
|
|
color: #fff;
|
|
font-family:
|
|
'Source Han Sans SC', 'Helvetica Neue', Arial, sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
text-align: justify;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.rules p {
|
|
margin: 0;
|
|
}
|
|
|
|
.rules p + p {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.rules-line {
|
|
display: block;
|
|
overflow: visible;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.rules-line-justify {
|
|
text-align: justify;
|
|
text-align-last: justify;
|
|
}
|
|
|
|
.home-indicator {
|
|
position: absolute;
|
|
left: 120px;
|
|
bottom: 9px;
|
|
z-index: 6;
|
|
width: 135px;
|
|
height: 5px;
|
|
border-radius: 3px;
|
|
background: #fff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main
|
|
class="tips-stage"
|
|
aria-label="Game Instructions"
|
|
data-i18n-aria="diceTips.pageTitle"
|
|
>
|
|
<section class="tips-frame" data-figma-node-id="491:358">
|
|
<div class="tips-bg" aria-hidden="true">
|
|
<img src="../touzi/assets/figma/bg-arena.png" alt="" />
|
|
</div>
|
|
|
|
<nav class="nav" aria-label="Navigation">
|
|
<button
|
|
class="back-button"
|
|
type="button"
|
|
aria-label="Back"
|
|
data-back-button
|
|
>
|
|
<img src="assets/figma/back.svg" alt="" />
|
|
</button>
|
|
<h1 class="nav-title" data-i18n="diceTips.pageTitle">
|
|
Game Instructions
|
|
</h1>
|
|
</nav>
|
|
|
|
<div class="rules">
|
|
<p>
|
|
<span
|
|
class="rules-line rules-line-justify"
|
|
data-i18n="diceTips.ruleOneLineA"
|
|
>1. Players who correctly predict the winner</span
|
|
>
|
|
<span
|
|
class="rules-line"
|
|
data-i18n="diceTips.ruleOneLineB"
|
|
>will receive coins.</span
|
|
>
|
|
</p>
|
|
<p>
|
|
<span
|
|
class="rules-line rules-line-justify"
|
|
data-i18n="diceTips.ruleTwoLineA"
|
|
>2. The ranking of card values is:6 > 5 > 4
|
|
> 3 > 2</span
|
|
>
|
|
<span
|
|
class="rules-line rules-line-justify"
|
|
data-i18n="diceTips.ruleTwoLineB"
|
|
>> 1. The player with the higher card wins;
|
|
if</span
|
|
>
|
|
<span
|
|
class="rules-line"
|
|
data-i18n="diceTips.ruleTwoLineC"
|
|
>the cards are of equal value, it is a tie.</span
|
|
>
|
|
</p>
|
|
<p>
|
|
<span
|
|
class="rules-line rules-line-justify"
|
|
data-i18n="diceTips.ruleThreeLineA"
|
|
>3. The winner of each game pays a 5%</span
|
|
>
|
|
<span
|
|
class="rules-line"
|
|
data-i18n="diceTips.ruleThreeLineB"
|
|
>transaction fee.</span
|
|
>
|
|
</p>
|
|
<p>
|
|
<span
|
|
class="rules-line rules-line-justify"
|
|
data-i18n="diceTips.ruleFourLineA"
|
|
>4. This game is provided by the Lalu Party</span
|
|
>
|
|
<span
|
|
class="rules-line rules-line-justify"
|
|
data-i18n="diceTips.ruleFourLineB"
|
|
>app. Google Play is not a sponsor and is not</span
|
|
>
|
|
<span
|
|
class="rules-line"
|
|
data-i18n="diceTips.ruleFourLineC"
|
|
>involved in this activity in any way.</span
|
|
>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="home-indicator" aria-hidden="true"></div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="../../common/jsbridge.js"></script>
|
|
<script src="../../common/i18n.js?v=dicetips-20260611"></script>
|
|
<script>
|
|
(function () {
|
|
var DESIGN_WIDTH = 375;
|
|
var DESIGN_HEIGHT = 812;
|
|
var root = document.documentElement;
|
|
var backButton = document.querySelector('[data-back-button]');
|
|
|
|
function updateScale() {
|
|
var scale = Math.min(
|
|
window.innerWidth / DESIGN_WIDTH,
|
|
window.innerHeight / DESIGN_HEIGHT
|
|
);
|
|
root.style.setProperty(
|
|
'--tips-scale',
|
|
String(Math.max(scale, 0.1))
|
|
);
|
|
}
|
|
|
|
function goBack() {
|
|
if (window.HyAppBridge && window.HyAppBridge.back) {
|
|
window.HyAppBridge.back();
|
|
return;
|
|
}
|
|
window.history.back();
|
|
}
|
|
|
|
updateScale();
|
|
if (backButton) backButton.addEventListener('click', goBack);
|
|
window.addEventListener('resize', updateScale);
|
|
window.addEventListener('orientationchange', updateScale);
|
|
|
|
if (window.HyAppBridge && window.HyAppBridge.ready) {
|
|
window.HyAppBridge.ready({
|
|
page: 'game/dicetips',
|
|
figma_node_id: '491:358',
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|