1170 lines
45 KiB
HTML
1170 lines
45 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, viewport-fit=cover" />
|
||
<title>Recharge Reward</title>
|
||
<style>
|
||
:root {
|
||
--scale: 0.4;
|
||
--canvas-width: 1080px;
|
||
--canvas-height: 4240px;
|
||
--page-bg: #290e00;
|
||
--gold-text: #f6e0b2;
|
||
--asset-root: "../../assets/recharge";
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
min-height: 100%;
|
||
background: var(--page-bg);
|
||
font-family:
|
||
"Source Han Sans SC", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
|
||
}
|
||
|
||
body {
|
||
color: var(--gold-text);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
|
||
.page {
|
||
width: calc(var(--canvas-width) * var(--scale));
|
||
max-width: 100vw;
|
||
height: calc(var(--canvas-height) * var(--scale));
|
||
margin: 0 auto;
|
||
overflow: hidden;
|
||
background: var(--page-bg);
|
||
}
|
||
|
||
.canvas {
|
||
position: relative;
|
||
width: var(--canvas-width);
|
||
height: var(--canvas-height);
|
||
transform: scale(var(--scale));
|
||
transform-origin: left top;
|
||
overflow: hidden;
|
||
background: var(--page-bg);
|
||
}
|
||
|
||
.sr-only {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
padding: 0;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
clip: rect(0, 0, 0, 0);
|
||
white-space: nowrap;
|
||
border: 0;
|
||
}
|
||
|
||
.asset {
|
||
position: absolute;
|
||
display: block;
|
||
max-width: none;
|
||
pointer-events: none;
|
||
user-select: none;
|
||
}
|
||
|
||
.hero {
|
||
position: absolute;
|
||
left: 0;
|
||
top: -29px;
|
||
width: 1080px;
|
||
height: 1027px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-bg {
|
||
position: absolute;
|
||
left: -11px;
|
||
top: -158px;
|
||
width: 1101px;
|
||
height: 1468px;
|
||
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 75%, rgba(0, 0, 0, 0) 100%);
|
||
mask-image: linear-gradient(180deg, #000 0%, #000 75%, rgba(0, 0, 0, 0) 100%);
|
||
-webkit-mask-repeat: no-repeat;
|
||
mask-repeat: no-repeat;
|
||
}
|
||
|
||
.hero-bg img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
.hero-title {
|
||
left: 8px;
|
||
top: 64px;
|
||
width: 1058px;
|
||
height: 790px;
|
||
object-fit: cover;
|
||
z-index: 1;
|
||
}
|
||
|
||
.price-frame {
|
||
position: absolute;
|
||
overflow: visible;
|
||
}
|
||
|
||
.price-frame .price-fill {
|
||
position: absolute;
|
||
left: 1.76%;
|
||
right: 1.76%;
|
||
top: 6%;
|
||
height: 84%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.price-frame .price-fill img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
object-position: bottom;
|
||
display: block;
|
||
}
|
||
|
||
.price-frame .price-shade {
|
||
position: absolute;
|
||
left: 1.76%;
|
||
right: 1.76%;
|
||
top: 29%;
|
||
height: 65%;
|
||
overflow: hidden;
|
||
transform: scaleY(-1);
|
||
-webkit-mask-image: url("../../assets/recharge/price-button-mask.png");
|
||
mask-image: url("../../assets/recharge/price-button-mask.png");
|
||
-webkit-mask-repeat: no-repeat;
|
||
mask-repeat: no-repeat;
|
||
-webkit-mask-position: 0 -1px;
|
||
mask-position: 0 -1px;
|
||
-webkit-mask-size: 100% 100%;
|
||
mask-size: 100% 100%;
|
||
}
|
||
|
||
.price-frame .price-shade img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
object-position: bottom;
|
||
display: block;
|
||
}
|
||
|
||
.countdown-frame {
|
||
position: absolute;
|
||
left: 43px;
|
||
top: 836px;
|
||
width: 994px;
|
||
height: 350px;
|
||
background:
|
||
linear-gradient(180deg, rgba(84, 27, 7, 0.92), rgba(42, 10, 2, 0.96)) padding-box,
|
||
linear-gradient(90deg, #ffe8bc, #a9562b 13%, #ffd59a 49%, #a9562b 87%, #ffe8bc) border-box;
|
||
border: 8px solid transparent;
|
||
box-shadow:
|
||
inset 0 0 0 4px rgba(104, 38, 17, 0.96),
|
||
inset 0 0 44px rgba(255, 190, 104, 0.12);
|
||
}
|
||
|
||
.countdown-frame .frame-stretch {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: fill;
|
||
display: block;
|
||
opacity: 0.74;
|
||
}
|
||
|
||
.countdown-item {
|
||
position: absolute;
|
||
width: 113px;
|
||
height: 177px;
|
||
text-align: center;
|
||
color: var(--gold-text);
|
||
}
|
||
|
||
.countdown-item img {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 113px;
|
||
height: 131px;
|
||
display: block;
|
||
}
|
||
|
||
.countdown-value {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 39px;
|
||
width: 113px;
|
||
font-size: 46px;
|
||
line-height: 46px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.countdown-label {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 141px;
|
||
width: 113px;
|
||
font-size: 28px;
|
||
line-height: 36px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.panel {
|
||
position: absolute;
|
||
left: 15px;
|
||
width: 1050px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.panel-edge {
|
||
position: absolute;
|
||
left: 0;
|
||
width: 1050px;
|
||
height: 191px;
|
||
object-fit: fill;
|
||
}
|
||
|
||
.panel-edge.bottom {
|
||
transform: scaleY(-1);
|
||
}
|
||
|
||
.panel-middle {
|
||
position: absolute;
|
||
left: 15.9px;
|
||
width: 1020px;
|
||
height: 236px;
|
||
object-fit: fill;
|
||
}
|
||
|
||
.profile-backdrop {
|
||
position: absolute;
|
||
left: 58px;
|
||
top: 1279px;
|
||
width: 967px;
|
||
height: 560px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.profile-backdrop img {
|
||
position: absolute;
|
||
left: 0;
|
||
top: -265px;
|
||
width: 967px;
|
||
height: 1290px;
|
||
object-fit: cover;
|
||
opacity: 0.09;
|
||
}
|
||
|
||
.ornate-square {
|
||
position: absolute;
|
||
pointer-events: none;
|
||
user-select: none;
|
||
}
|
||
|
||
.ornate-square .square-fill {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: fill;
|
||
}
|
||
|
||
.ornate-square .corner {
|
||
position: absolute;
|
||
width: var(--corner-size);
|
||
height: var(--corner-size);
|
||
object-fit: contain;
|
||
}
|
||
|
||
.ornate-square .corner.tl {
|
||
left: calc(var(--corner-size) * -0.04);
|
||
top: calc(var(--corner-size) * -0.04);
|
||
}
|
||
|
||
.ornate-square .corner.tr {
|
||
right: calc(var(--corner-size) * -0.04);
|
||
top: calc(var(--corner-size) * -0.04);
|
||
transform: scaleX(-1);
|
||
}
|
||
|
||
.ornate-square .corner.bl {
|
||
left: calc(var(--corner-size) * -0.04);
|
||
bottom: calc(var(--corner-size) * -0.04);
|
||
transform: scaleY(-1);
|
||
}
|
||
|
||
.ornate-square .corner.br {
|
||
right: calc(var(--corner-size) * -0.04);
|
||
bottom: calc(var(--corner-size) * -0.04);
|
||
transform: scale(-1);
|
||
}
|
||
|
||
.ornate-square .center-gem {
|
||
position: absolute;
|
||
left: 50%;
|
||
width: var(--gem-width);
|
||
height: var(--gem-height);
|
||
transform: translateX(-50%);
|
||
object-fit: contain;
|
||
}
|
||
|
||
.ornate-square .center-gem.top {
|
||
top: calc(var(--gem-height) * -0.14);
|
||
transform: translateX(-50%) scaleY(-1);
|
||
}
|
||
|
||
.ornate-square .center-gem.bottom {
|
||
bottom: calc(var(--gem-height) * -0.14);
|
||
}
|
||
|
||
.avatar-crop {
|
||
position: absolute;
|
||
left: 411px;
|
||
top: 1341px;
|
||
width: 257px;
|
||
height: 257px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.avatar-crop img {
|
||
position: absolute;
|
||
left: -43px;
|
||
top: -22px;
|
||
width: 322px;
|
||
height: 430px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.avatar-crop img[data-profile-avatar] {
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.avatar-frame {
|
||
left: 389px;
|
||
top: 1319px;
|
||
width: 301px;
|
||
height: 301px;
|
||
--corner-size: 56px;
|
||
--gem-width: 75px;
|
||
--gem-height: 45px;
|
||
}
|
||
|
||
.reward-frame-lg {
|
||
width: 360px;
|
||
height: 360px;
|
||
--corner-size: 62px;
|
||
--gem-width: 0;
|
||
--gem-height: 0;
|
||
}
|
||
|
||
.reward-frame-sm {
|
||
width: 240px;
|
||
height: 240px;
|
||
--corner-size: 42px;
|
||
--gem-width: 0;
|
||
--gem-height: 0;
|
||
}
|
||
|
||
.section-badge {
|
||
width: 340px;
|
||
height: 182px;
|
||
object-fit: fill;
|
||
}
|
||
|
||
.section-title,
|
||
.figure-text {
|
||
position: absolute;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--gold-text);
|
||
font-weight: 500;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.section-title {
|
||
width: 340px;
|
||
height: 44px;
|
||
font-size: 36px;
|
||
line-height: 36px;
|
||
}
|
||
|
||
.profile-name {
|
||
left: 436px;
|
||
top: 1630px;
|
||
width: 207px;
|
||
height: 36px;
|
||
font-size: 36px;
|
||
line-height: 36px;
|
||
}
|
||
|
||
.profile-id {
|
||
left: 460px;
|
||
top: 1676px;
|
||
width: 158px;
|
||
height: 36px;
|
||
font-size: 24px;
|
||
line-height: 36px;
|
||
}
|
||
|
||
.profile-total {
|
||
left: 307px;
|
||
top: 1729px;
|
||
width: 464px;
|
||
height: 36px;
|
||
font-size: 36px;
|
||
line-height: 36px;
|
||
}
|
||
|
||
.reward-icon {
|
||
position: absolute;
|
||
object-fit: contain;
|
||
display: block;
|
||
pointer-events: none;
|
||
user-select: none;
|
||
}
|
||
|
||
.reward-price {
|
||
position: absolute;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 284px;
|
||
height: 100px;
|
||
color: var(--gold-text);
|
||
font-size: 36px;
|
||
line-height: 36px;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.reward-price span {
|
||
position: relative;
|
||
z-index: 1;
|
||
padding-top: 2px;
|
||
max-width: 250px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.reward-price .price-fill,
|
||
.reward-price .price-shade {
|
||
display: none;
|
||
}
|
||
|
||
.reward-price .price-frame::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 5px;
|
||
right: 5px;
|
||
top: 28px;
|
||
height: 50px;
|
||
border: 5px solid transparent;
|
||
background:
|
||
linear-gradient(180deg, #2f0b03 0%, #4b1808 55%, #2b0802 100%) padding-box,
|
||
linear-gradient(90deg, #fff1c4, #c06b3e 16%, #ffe5aa 50%, #c06b3e 84%, #fff1c4) border-box;
|
||
box-shadow:
|
||
inset 0 0 0 2px rgba(103, 40, 18, 0.92),
|
||
inset 0 0 18px rgba(255, 182, 91, 0.16);
|
||
}
|
||
|
||
.reward-price .price-frame::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 10px;
|
||
right: 10px;
|
||
top: 33px;
|
||
height: 1px;
|
||
background: rgba(255, 234, 181, 0.75);
|
||
}
|
||
|
||
.reward-section.is-hidden,
|
||
.reward-slot-frame.is-hidden,
|
||
.reward-icon.is-hidden,
|
||
.reward-price.is-hidden {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<main class="page" aria-labelledby="page-title">
|
||
<div class="canvas" data-node-id="5:692">
|
||
<h1 id="page-title" class="sr-only">Recharge Reward</h1>
|
||
|
||
<div class="hero" data-node-id="5:693">
|
||
<div class="hero-bg">
|
||
<img src="../../assets/recharge/hero-bg.png" alt="" />
|
||
</div>
|
||
<img class="asset hero-title" src="../../assets/recharge/hero-title.png" alt="Recharge Reward" />
|
||
</div>
|
||
|
||
<div class="countdown-frame" aria-hidden="true" data-node-id="5:747">
|
||
<img class="frame-stretch" src="../../assets/recharge/price-button-fill.png" alt="" />
|
||
</div>
|
||
|
||
<div class="countdown-item" style="left: 185px; top: 926px;" data-node-id="5:748">
|
||
<img src="../../assets/recharge/countdown-box.svg" alt="" />
|
||
<div class="countdown-value" data-countdown="days">01</div>
|
||
<div class="countdown-label">Days</div>
|
||
</div>
|
||
<div class="countdown-item" style="left: 387px; top: 926px;" data-node-id="5:752">
|
||
<img src="../../assets/recharge/countdown-box.svg" alt="" />
|
||
<div class="countdown-value" data-countdown="hours">01</div>
|
||
<div class="countdown-label">Hours</div>
|
||
</div>
|
||
<div class="countdown-item" style="left: 588px; top: 926px;" data-node-id="5:756">
|
||
<img src="../../assets/recharge/countdown-box.svg" alt="" />
|
||
<div class="countdown-value" data-countdown="minutes">01</div>
|
||
<div class="countdown-label">Minutes</div>
|
||
</div>
|
||
<div class="countdown-item" style="left: 787px; top: 926px;" data-node-id="5:760">
|
||
<img src="../../assets/recharge/countdown-box.svg" alt="" />
|
||
<div class="countdown-value" data-countdown="seconds">01</div>
|
||
<div class="countdown-label">Seconds</div>
|
||
</div>
|
||
|
||
<div class="profile-backdrop" data-node-id="5:694">
|
||
<img src="../../assets/recharge/profile-panel-bg.jpg" alt="" />
|
||
</div>
|
||
|
||
<section class="panel" style="top: 1223px; height: 658px;" aria-label="Recharge profile" data-node-id="5:697">
|
||
<img class="panel-edge" style="top: 0;" src="../../assets/recharge/panel-edge.png" alt="" />
|
||
<img class="panel-middle" style="top: 191px;" src="../../assets/recharge/panel-middle.png" alt="" />
|
||
<img class="panel-middle" style="top: 316px;" src="../../assets/recharge/panel-middle.png" alt="" />
|
||
<img class="panel-edge bottom" style="top: 467px;" src="../../assets/recharge/panel-edge.png" alt="" />
|
||
</section>
|
||
|
||
<div class="avatar-crop" data-node-id="5:703">
|
||
<img src="../../assets/recharge/avatar-photo.png" alt="" data-profile-avatar />
|
||
</div>
|
||
<div class="ornate-square avatar-frame" aria-hidden="true" data-node-id="5:706">
|
||
<img class="square-fill" src="../../assets/recharge/reward-frame-fill.png" alt="" />
|
||
<img class="corner tl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner tr" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner bl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner br" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="center-gem top" src="../../assets/recharge/reward-frame-center.png" alt="" />
|
||
<img class="center-gem bottom" src="../../assets/recharge/reward-frame-center.png" alt="" />
|
||
</div>
|
||
|
||
<div class="figure-text profile-name" data-node-id="5:707" data-profile-name>nanfangjian</div>
|
||
<div class="figure-text profile-id" data-node-id="5:709" data-profile-id>ID：12345678</div>
|
||
<div class="figure-text profile-total" data-node-id="5:708" data-profile-total>Accumlated Recharge:5998</div>
|
||
|
||
<section class="reward-section" aria-label="Recharge 100 three rewards" data-node-id="5:710" data-level-section="0">
|
||
<div class="panel" style="top: 1937px; height: 618px;" aria-hidden="true">
|
||
<img class="panel-edge" style="top: 0;" src="../../assets/recharge/panel-edge.png" alt="" />
|
||
<img class="panel-middle" style="top: 191px;" src="../../assets/recharge/panel-middle.png" alt="" />
|
||
<img class="panel-middle" style="top: 316px;" src="../../assets/recharge/panel-middle.png" alt="" />
|
||
<img class="panel-edge bottom" style="top: 427px;" src="../../assets/recharge/panel-edge.png" alt="" />
|
||
</div>
|
||
<img class="asset section-badge" style="left: 370px; top: 1891px;" src="../../assets/recharge/section-badge.png" alt="" />
|
||
<div class="section-title" style="left: 370px; top: 1960px;" data-node-id="5:718" data-level-title>Recharge $100</div>
|
||
|
||
<div class="ornate-square reward-frame-sm reward-slot-frame" style="left: 118px; top: 2088px;" aria-hidden="true" data-level-frame="0">
|
||
<img class="square-fill" src="../../assets/recharge/reward-frame-fill.png" alt="" />
|
||
<img class="corner tl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner tr" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner bl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner br" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
</div>
|
||
<div class="ornate-square reward-frame-sm reward-slot-frame" style="left: 420px; top: 2088px;" aria-hidden="true" data-level-frame="1">
|
||
<img class="square-fill" src="../../assets/recharge/reward-frame-fill.png" alt="" />
|
||
<img class="corner tl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner tr" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner bl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner br" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
</div>
|
||
<div class="ornate-square reward-frame-sm reward-slot-frame" style="left: 722px; top: 2088px;" aria-hidden="true" data-level-frame="2">
|
||
<img class="square-fill" src="../../assets/recharge/reward-frame-fill.png" alt="" />
|
||
<img class="corner tl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner tr" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner bl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner br" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
</div>
|
||
<img class="reward-icon" style="left: 138px; top: 2108px; width: 200px; height: 200px;" src="../../assets/recharge/reward-icon.png" alt="" data-reward-image="0" />
|
||
<img class="reward-icon" style="left: 440px; top: 2108px; width: 200px; height: 200px;" src="../../assets/recharge/reward-icon.png" alt="" data-reward-image="1" />
|
||
<img class="reward-icon" style="left: 742px; top: 2108px; width: 200px; height: 200px;" src="../../assets/recharge/reward-icon.png" alt="" data-reward-image="2" />
|
||
|
||
<div class="reward-price" style="left: 96px; top: 2338px;" data-node-id="5:725">
|
||
<div class="price-frame" style="left: 0; top: 0; width: 284px; height: 100px;" aria-hidden="true">
|
||
<div class="price-fill"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
<div class="price-shade"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
</div>
|
||
<span data-reward-label="0">$100</span>
|
||
</div>
|
||
<div class="reward-price" style="left: 398px; top: 2338px;" data-node-id="5:726">
|
||
<div class="price-frame" style="left: 0; top: 0; width: 284px; height: 100px;" aria-hidden="true">
|
||
<div class="price-fill"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
<div class="price-shade"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
</div>
|
||
<span data-reward-label="1">$100</span>
|
||
</div>
|
||
<div class="reward-price" style="left: 700px; top: 2338px;" data-node-id="5:726-3">
|
||
<div class="price-frame" style="left: 0; top: 0; width: 284px; height: 100px;" aria-hidden="true">
|
||
<div class="price-fill"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
<div class="price-shade"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
</div>
|
||
<span data-reward-label="2">$100</span>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="reward-section" aria-label="Recharge 100 three rewards" data-node-id="5:727" data-level-section="1">
|
||
<div class="panel" style="top: 2751px; height: 618px;" aria-hidden="true">
|
||
<img class="panel-edge" style="top: 0;" src="../../assets/recharge/panel-edge.png" alt="" />
|
||
<img class="panel-middle" style="top: 191px;" src="../../assets/recharge/panel-middle.png" alt="" />
|
||
<img class="panel-middle" style="top: 316px;" src="../../assets/recharge/panel-middle.png" alt="" />
|
||
<img class="panel-edge bottom" style="top: 427px;" src="../../assets/recharge/panel-edge.png" alt="" />
|
||
</div>
|
||
<img class="asset section-badge" style="left: 370px; top: 2705px;" src="../../assets/recharge/section-badge.png" alt="" />
|
||
<div class="section-title" style="left: 370px; top: 2774px;" data-node-id="5:734" data-level-title>Recharge $100</div>
|
||
|
||
<div class="ornate-square reward-frame-sm reward-slot-frame" style="left: 118px; top: 2902px;" aria-hidden="true" data-level-frame="0">
|
||
<img class="square-fill" src="../../assets/recharge/reward-frame-fill.png" alt="" />
|
||
<img class="corner tl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner tr" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner bl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner br" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
</div>
|
||
<div class="ornate-square reward-frame-sm reward-slot-frame" style="left: 420px; top: 2902px;" aria-hidden="true" data-level-frame="1">
|
||
<img class="square-fill" src="../../assets/recharge/reward-frame-fill.png" alt="" />
|
||
<img class="corner tl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner tr" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner bl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner br" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
</div>
|
||
<div class="ornate-square reward-frame-sm reward-slot-frame" style="left: 722px; top: 2902px;" aria-hidden="true" data-level-frame="2">
|
||
<img class="square-fill" src="../../assets/recharge/reward-frame-fill.png" alt="" />
|
||
<img class="corner tl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner tr" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner bl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner br" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
</div>
|
||
<img class="reward-icon" style="left: 138px; top: 2922px; width: 200px; height: 200px;" src="../../assets/recharge/reward-icon.png" alt="" data-reward-image="0" />
|
||
<img class="reward-icon" style="left: 440px; top: 2922px; width: 200px; height: 200px;" src="../../assets/recharge/reward-icon.png" alt="" data-reward-image="1" />
|
||
<img class="reward-icon" style="left: 742px; top: 2922px; width: 200px; height: 200px;" src="../../assets/recharge/reward-icon.png" alt="" data-reward-image="2" />
|
||
|
||
<div class="reward-price" style="left: 96px; top: 3152px;" data-node-id="5:744">
|
||
<div class="price-frame" style="left: 0; top: 0; width: 284px; height: 100px;" aria-hidden="true">
|
||
<div class="price-fill"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
<div class="price-shade"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
</div>
|
||
<span data-reward-label="0">$100</span>
|
||
</div>
|
||
<div class="reward-price" style="left: 398px; top: 3152px;" data-node-id="5:745">
|
||
<div class="price-frame" style="left: 0; top: 0; width: 284px; height: 100px;" aria-hidden="true">
|
||
<div class="price-fill"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
<div class="price-shade"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
</div>
|
||
<span data-reward-label="1">$100</span>
|
||
</div>
|
||
<div class="reward-price" style="left: 700px; top: 3152px;" data-node-id="5:746">
|
||
<div class="price-frame" style="left: 0; top: 0; width: 284px; height: 100px;" aria-hidden="true">
|
||
<div class="price-fill"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
<div class="price-shade"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
</div>
|
||
<span data-reward-label="2">$100</span>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="reward-section" aria-label="Recharge 100 three rewards" data-level-section="2">
|
||
<div class="panel" style="top: 3565px; height: 618px;" aria-hidden="true">
|
||
<img class="panel-edge" style="top: 0;" src="../../assets/recharge/panel-edge.png" alt="" />
|
||
<img class="panel-middle" style="top: 191px;" src="../../assets/recharge/panel-middle.png" alt="" />
|
||
<img class="panel-middle" style="top: 316px;" src="../../assets/recharge/panel-middle.png" alt="" />
|
||
<img class="panel-edge bottom" style="top: 427px;" src="../../assets/recharge/panel-edge.png" alt="" />
|
||
</div>
|
||
<img class="asset section-badge" style="left: 370px; top: 3519px;" src="../../assets/recharge/section-badge.png" alt="" />
|
||
<div class="section-title" style="left: 370px; top: 3588px;" data-level-title>Recharge $100</div>
|
||
|
||
<div class="ornate-square reward-frame-sm reward-slot-frame" style="left: 118px; top: 3716px;" aria-hidden="true" data-level-frame="0">
|
||
<img class="square-fill" src="../../assets/recharge/reward-frame-fill.png" alt="" />
|
||
<img class="corner tl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner tr" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner bl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner br" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
</div>
|
||
<div class="ornate-square reward-frame-sm reward-slot-frame" style="left: 420px; top: 3716px;" aria-hidden="true" data-level-frame="1">
|
||
<img class="square-fill" src="../../assets/recharge/reward-frame-fill.png" alt="" />
|
||
<img class="corner tl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner tr" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner bl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner br" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
</div>
|
||
<div class="ornate-square reward-frame-sm reward-slot-frame" style="left: 722px; top: 3716px;" aria-hidden="true" data-level-frame="2">
|
||
<img class="square-fill" src="../../assets/recharge/reward-frame-fill.png" alt="" />
|
||
<img class="corner tl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner tr" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner bl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
<img class="corner br" src="../../assets/recharge/reward-frame-corners.png" alt="" />
|
||
</div>
|
||
<img class="reward-icon" style="left: 138px; top: 3736px; width: 200px; height: 200px;" src="../../assets/recharge/reward-icon.png" alt="" data-reward-image="0" />
|
||
<img class="reward-icon" style="left: 440px; top: 3736px; width: 200px; height: 200px;" src="../../assets/recharge/reward-icon.png" alt="" data-reward-image="1" />
|
||
<img class="reward-icon" style="left: 742px; top: 3736px; width: 200px; height: 200px;" src="../../assets/recharge/reward-icon.png" alt="" data-reward-image="2" />
|
||
|
||
<div class="reward-price" style="left: 96px; top: 3966px;">
|
||
<div class="price-frame" style="left: 0; top: 0; width: 284px; height: 100px;" aria-hidden="true">
|
||
<div class="price-fill"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
<div class="price-shade"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
</div>
|
||
<span data-reward-label="0">$100</span>
|
||
</div>
|
||
<div class="reward-price" style="left: 398px; top: 3966px;">
|
||
<div class="price-frame" style="left: 0; top: 0; width: 284px; height: 100px;" aria-hidden="true">
|
||
<div class="price-fill"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
<div class="price-shade"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
</div>
|
||
<span data-reward-label="1">$100</span>
|
||
</div>
|
||
<div class="reward-price" style="left: 700px; top: 3966px;">
|
||
<div class="price-frame" style="left: 0; top: 0; width: 284px; height: 100px;" aria-hidden="true">
|
||
<div class="price-fill"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
<div class="price-shade"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
|
||
</div>
|
||
<span data-reward-label="2">$100</span>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
|
||
<script>
|
||
window.__H5_ROUTE_PATH__ = "/activity/recharge";
|
||
|
||
(function () {
|
||
var DEFAULT_API_BASE = "https://jvapi.haiyihy.com/";
|
||
var DEFAULT_API_PREFIX = "/go";
|
||
var HOME_ENDPOINT = "/app/h5/recharge-reward/home";
|
||
var DEFAULT_AVATAR = "../../assets/defaultAvatar-CdxWBK1k.png";
|
||
var DEFAULT_REWARD_ICON = "../../assets/recharge/reward-icon.png";
|
||
var COIN_ICON = "../../assets/coin.png";
|
||
var LEVEL_BASE_HEIGHT = 1881;
|
||
var LEVEL_PANEL_TOP = 1937;
|
||
var LEVEL_BADGE_TOP = 1891;
|
||
var LEVEL_TITLE_TOP = 1960;
|
||
var LEVEL_FRAME_TOP = 2088;
|
||
var LEVEL_ICON_TOP = 2108;
|
||
var LEVEL_PRICE_TOP = 2338;
|
||
var LEVEL_GAP = 814;
|
||
var LEVEL_PANEL_HEIGHT = 618;
|
||
var LEVEL_BOTTOM_PADDING = 57;
|
||
var query = buildPageQueryParams();
|
||
var countdownTimer = null;
|
||
var countdownEndsAt = 0;
|
||
|
||
var els = {
|
||
avatar: document.querySelector("[data-profile-avatar]"),
|
||
name: document.querySelector("[data-profile-name]"),
|
||
id: document.querySelector("[data-profile-id]"),
|
||
total: document.querySelector("[data-profile-total]"),
|
||
days: document.querySelector("[data-countdown='days']"),
|
||
hours: document.querySelector("[data-countdown='hours']"),
|
||
minutes: document.querySelector("[data-countdown='minutes']"),
|
||
seconds: document.querySelector("[data-countdown='seconds']"),
|
||
sections: Array.prototype.slice.call(document.querySelectorAll("[data-level-section]")),
|
||
};
|
||
|
||
function trimValue(value) {
|
||
return value == null ? "" : String(value).trim();
|
||
}
|
||
|
||
function buildPageQueryParams() {
|
||
var params = new URLSearchParams(window.location.search || "");
|
||
var hash = window.location.hash || "";
|
||
var queryIndex = hash.indexOf("?");
|
||
if (queryIndex >= 0) {
|
||
var hashParams = new URLSearchParams(hash.slice(queryIndex + 1).split("#")[0]);
|
||
hashParams.forEach(function (value, key) {
|
||
if (!params.has(key)) params.append(key, value);
|
||
});
|
||
}
|
||
return params;
|
||
}
|
||
|
||
function readParam(names) {
|
||
for (var i = 0; i < names.length; i += 1) {
|
||
var value = trimValue(query.get(names[i]));
|
||
if (value) return value;
|
||
}
|
||
return "";
|
||
}
|
||
|
||
function splitHeaderPairs(value) {
|
||
var result = {};
|
||
String(value || "").split(";").forEach(function (item) {
|
||
var index = item.indexOf("=");
|
||
if (index > -1) result[item.slice(0, index).trim()] = item.slice(index + 1).trim();
|
||
});
|
||
return result;
|
||
}
|
||
|
||
function readRequestSysOrigin() {
|
||
var packed = splitHeaderPairs(readParam(["req-sys-origin", "Req-Sys-Origin", "reqSysOrigin", "ReqSysOrigin"]));
|
||
var origin = trimValue(readParam(["sysOrigin", "origin", "Sys-Origin"]) || packed.origin || "LIKEI").toUpperCase();
|
||
var originChild = trimValue(
|
||
readParam(["sysOriginChild", "originChild", "child", "Sys-Origin-Child"]) ||
|
||
packed.originChild ||
|
||
packed.child ||
|
||
origin
|
||
).toUpperCase();
|
||
return { origin: origin, originChild: originChild };
|
||
}
|
||
|
||
function normalizeBaseURL(base) {
|
||
var value = trimValue(base) || DEFAULT_API_BASE;
|
||
return value.endsWith("/") ? value : value + "/";
|
||
}
|
||
|
||
function resolveAPIBase() {
|
||
var override = readParam(["apiBase", "api_base"]);
|
||
if (override) return normalizeBaseURL(override);
|
||
if (typeof window.__RECHARGE_REWARD_API_BASE__ === "string") {
|
||
return normalizeBaseURL(window.__RECHARGE_REWARD_API_BASE__);
|
||
}
|
||
return normalizeBaseURL(DEFAULT_API_BASE);
|
||
}
|
||
|
||
function resolveAPIPrefix(apiBase) {
|
||
var override = readParam(["apiPrefix", "api_prefix"]);
|
||
if (override) return override;
|
||
if (typeof window.__RECHARGE_REWARD_API_PREFIX__ === "string") {
|
||
return trimValue(window.__RECHARGE_REWARD_API_PREFIX__);
|
||
}
|
||
try {
|
||
return new URL(apiBase).origin === new URL(DEFAULT_API_BASE).origin ? DEFAULT_API_PREFIX : "";
|
||
} catch (_) {
|
||
return "";
|
||
}
|
||
}
|
||
|
||
function joinPath() {
|
||
return "/" + Array.prototype.slice.call(arguments)
|
||
.map(function (part) { return trimValue(part).replace(/^\/+|\/+$/g, ""); })
|
||
.filter(Boolean)
|
||
.join("/");
|
||
}
|
||
|
||
function buildURL(path) {
|
||
var apiBase = resolveAPIBase();
|
||
var apiPrefix = resolveAPIPrefix(apiBase);
|
||
return new URL(joinPath(apiPrefix, path).replace(/^\/+/, ""), apiBase);
|
||
}
|
||
|
||
function normalizeAuthorization(value) {
|
||
var token = trimValue(value);
|
||
if (!token) return "";
|
||
if (/^bearer\s+/i.test(token)) {
|
||
return "Bearer " + token.replace(/^bearer\s+/i, "").replace(/ /g, "+");
|
||
}
|
||
return "Bearer " + token.replace(/ /g, "+");
|
||
}
|
||
|
||
function readAuthorization() {
|
||
var direct = readParam(["Authorization", "authorization"]);
|
||
if (direct) return normalizeAuthorization(direct);
|
||
var token = readParam(["token", "accessToken", "access_token"]);
|
||
if (token) return normalizeAuthorization(token);
|
||
if (typeof window.__RECHARGE_REWARD_AUTHORIZATION__ === "string") {
|
||
return normalizeAuthorization(window.__RECHARGE_REWARD_AUTHORIZATION__);
|
||
}
|
||
try {
|
||
return normalizeAuthorization(
|
||
window.localStorage.getItem("Authorization") ||
|
||
window.localStorage.getItem("authorization") ||
|
||
window.localStorage.getItem("token") ||
|
||
window.localStorage.getItem("accessToken")
|
||
);
|
||
} catch (_) {
|
||
return "";
|
||
}
|
||
}
|
||
|
||
function numberValue(value) {
|
||
var number = Number(trimValue(value).replace(/,/g, ""));
|
||
return Number.isFinite(number) ? number : 0;
|
||
}
|
||
|
||
function centsValue(item) {
|
||
var cents = numberValue(item && item.rechargeAmountCents);
|
||
if (cents > 0) return cents;
|
||
var amount = numberValue(item && item.rechargeAmount);
|
||
return Math.round(amount * 100);
|
||
}
|
||
|
||
function formatAmountCents(cents) {
|
||
var safeCents = Math.max(0, Math.trunc(Number(cents) || 0));
|
||
var dollars = Math.floor(safeCents / 100);
|
||
var remainder = String(safeCents % 100).padStart(2, "0");
|
||
return remainder === "00" ? String(dollars) : dollars + "." + remainder;
|
||
}
|
||
|
||
function trimDecimal(value) {
|
||
return Number(value.toFixed(1)).toString();
|
||
}
|
||
|
||
function formatCompact(value) {
|
||
var number = Number(value || 0);
|
||
if (!Number.isFinite(number)) return "0";
|
||
var absolute = Math.abs(number);
|
||
if (absolute >= 1000000) return trimDecimal(number / 1000000) + "M";
|
||
if (absolute >= 1000) return trimDecimal(number / 1000) + "K";
|
||
return new Intl.NumberFormat("en-US").format(Math.trunc(number));
|
||
}
|
||
|
||
function pad2(value) {
|
||
return String(Math.max(0, Math.trunc(value))).padStart(2, "0");
|
||
}
|
||
|
||
function renderCountdown() {
|
||
if (!countdownEndsAt) return;
|
||
var remaining = Math.max(0, countdownEndsAt - Date.now());
|
||
var totalSeconds = Math.floor(remaining / 1000);
|
||
var days = Math.floor(totalSeconds / 86400);
|
||
var hours = Math.floor((totalSeconds % 86400) / 3600);
|
||
var minutes = Math.floor((totalSeconds % 3600) / 60);
|
||
var seconds = totalSeconds % 60;
|
||
if (els.days) els.days.textContent = pad2(days);
|
||
if (els.hours) els.hours.textContent = pad2(hours);
|
||
if (els.minutes) els.minutes.textContent = pad2(minutes);
|
||
if (els.seconds) els.seconds.textContent = pad2(seconds);
|
||
}
|
||
|
||
function startCountdown(milliseconds) {
|
||
var value = Number(milliseconds || 0);
|
||
if (!Number.isFinite(value) || value <= 0) return;
|
||
countdownEndsAt = Date.now() + value;
|
||
renderCountdown();
|
||
if (countdownTimer) window.clearInterval(countdownTimer);
|
||
countdownTimer = window.setInterval(renderCountdown, 1000);
|
||
}
|
||
|
||
function setImage(img, src, fallback) {
|
||
if (!img) return;
|
||
img.onerror = function () {
|
||
if (fallback && img.src.indexOf(fallback) === -1) {
|
||
img.src = fallback;
|
||
}
|
||
};
|
||
img.src = trimValue(src) || fallback || "";
|
||
}
|
||
|
||
function rewardLabel(item) {
|
||
if (!item) return "";
|
||
if (item.kind === "gold") return formatCompact(item.amount || 0);
|
||
var name = trimValue(item.name) || trimValue(item.content) || trimValue(item.type);
|
||
var quantity = Number(item.quantity || 0);
|
||
if (name && quantity > 1) return name + " x" + formatCompact(quantity);
|
||
if (name) return name;
|
||
return quantity > 0 ? "x" + formatCompact(quantity) : "";
|
||
}
|
||
|
||
function levelRewards(level) {
|
||
var result = [];
|
||
var rewardGold = Number(level && level.rewardGold || 0);
|
||
if (Number.isFinite(rewardGold) && rewardGold > 0) {
|
||
result.push({ kind: "gold", amount: rewardGold, cover: COIN_ICON });
|
||
}
|
||
var items = Array.isArray(level && level.rewardItems) ? level.rewardItems : [];
|
||
items.forEach(function (item) {
|
||
var type = trimValue(item && item.type).toUpperCase();
|
||
if (type === "GOLD") {
|
||
result.push({
|
||
kind: "gold",
|
||
amount: numberValue((item && item.content) || (item && item.quantity)),
|
||
cover: COIN_ICON,
|
||
});
|
||
return;
|
||
}
|
||
result.push({
|
||
kind: "item",
|
||
cover: trimValue(item && item.cover) || DEFAULT_REWARD_ICON,
|
||
name: item && item.name,
|
||
content: item && item.content,
|
||
type: item && item.type,
|
||
quantity: item && item.quantity,
|
||
});
|
||
});
|
||
return result;
|
||
}
|
||
|
||
function normalizeLevels(levels) {
|
||
if (!Array.isArray(levels)) return [];
|
||
return levels
|
||
.filter(function (level) { return level && level.enabled !== false && centsValue(level) > 0; })
|
||
.sort(function (a, b) {
|
||
var byAmount = centsValue(a) - centsValue(b);
|
||
return byAmount || Number(a.level || 0) - Number(b.level || 0);
|
||
});
|
||
}
|
||
|
||
function setTop(node, value) {
|
||
if (node) node.style.top = value + "px";
|
||
}
|
||
|
||
function firstLevelPanel(section) {
|
||
return Array.prototype.slice.call(section.children).find(function (node) {
|
||
return node.classList && node.classList.contains("panel");
|
||
});
|
||
}
|
||
|
||
function setCanvasHeight(levelCount) {
|
||
var count = Math.max(0, Number(levelCount) || 0);
|
||
var height = count > 0
|
||
? LEVEL_PANEL_TOP + ((count - 1) * LEVEL_GAP) + LEVEL_PANEL_HEIGHT + LEVEL_BOTTOM_PADDING
|
||
: LEVEL_BASE_HEIGHT;
|
||
document.documentElement.style.setProperty("--canvas-height", height + "px");
|
||
}
|
||
|
||
function layoutLevelSection(section, index) {
|
||
if (!section) return;
|
||
var offset = index * LEVEL_GAP;
|
||
section.setAttribute("data-level-section", String(index));
|
||
section.setAttribute("aria-label", "Recharge level " + (index + 1));
|
||
var panel = firstLevelPanel(section);
|
||
setTop(panel, LEVEL_PANEL_TOP + offset);
|
||
if (panel) panel.style.height = LEVEL_PANEL_HEIGHT + "px";
|
||
setTop(section.querySelector(".section-badge"), LEVEL_BADGE_TOP + offset);
|
||
setTop(section.querySelector("[data-level-title]"), LEVEL_TITLE_TOP + offset);
|
||
Array.prototype.slice.call(section.querySelectorAll("[data-level-frame]")).forEach(function (node) {
|
||
setTop(node, LEVEL_FRAME_TOP + offset);
|
||
});
|
||
Array.prototype.slice.call(section.querySelectorAll("[data-reward-image]")).forEach(function (node) {
|
||
setTop(node, LEVEL_ICON_TOP + offset);
|
||
});
|
||
Array.prototype.slice.call(section.querySelectorAll(".reward-price")).forEach(function (node) {
|
||
setTop(node, LEVEL_PRICE_TOP + offset);
|
||
});
|
||
}
|
||
|
||
function ensureLevelSections(levelCount) {
|
||
var targetCount = Math.max(0, Number(levelCount) || 0);
|
||
var sections = Array.prototype.slice.call(document.querySelectorAll("[data-level-section]"));
|
||
var template = sections[0];
|
||
if (!template) return [];
|
||
while (sections.length < targetCount) {
|
||
var next = template.cloneNode(true);
|
||
template.parentNode.appendChild(next);
|
||
sections.push(next);
|
||
}
|
||
sections.forEach(function (section, index) {
|
||
layoutLevelSection(section, index);
|
||
section.classList.toggle("is-hidden", index >= targetCount);
|
||
});
|
||
setCanvasHeight(targetCount);
|
||
els.sections = sections;
|
||
return sections;
|
||
}
|
||
|
||
function renderLevel(section, level) {
|
||
if (!section) return;
|
||
if (!level) {
|
||
section.classList.add("is-hidden");
|
||
return;
|
||
}
|
||
section.classList.remove("is-hidden");
|
||
var title = section.querySelector("[data-level-title]");
|
||
if (title) title.textContent = "Recharge $" + formatAmountCents(centsValue(level));
|
||
var rewards = levelRewards(level);
|
||
var images = Array.prototype.slice.call(section.querySelectorAll("[data-reward-image]"));
|
||
var labels = Array.prototype.slice.call(section.querySelectorAll("[data-reward-label]"));
|
||
var frames = Array.prototype.slice.call(section.querySelectorAll("[data-level-frame]"));
|
||
var prices = Array.prototype.slice.call(section.querySelectorAll(".reward-price"));
|
||
var count = Math.max(images.length, labels.length, frames.length, prices.length);
|
||
for (var i = 0; i < count; i += 1) {
|
||
var reward = rewards[i];
|
||
[images[i], labels[i], frames[i], prices[i]].forEach(function (node) {
|
||
if (node) node.classList.toggle("is-hidden", !reward);
|
||
});
|
||
if (!reward) continue;
|
||
setImage(images[i], reward.cover, DEFAULT_REWARD_ICON);
|
||
if (labels[i]) labels[i].textContent = rewardLabel(reward);
|
||
}
|
||
}
|
||
|
||
function applyHomeData(body) {
|
||
if (!body || typeof body !== "object") return;
|
||
if (els.name) els.name.textContent = trimValue(body.userNickname) || trimValue(body.userAccount) || els.name.textContent;
|
||
if (els.id) els.id.textContent = "ID:" + (trimValue(body.userAccount) || trimValue(body.userId) || "");
|
||
if (els.total) {
|
||
var totalCents = numberValue(body.accumulatedRechargeAmountCents);
|
||
if (totalCents <= 0) totalCents = Math.round(numberValue(body.accumulatedRechargeAmount) * 100);
|
||
els.total.textContent = "Accumlated Recharge:" + formatAmountCents(totalCents);
|
||
}
|
||
setImage(els.avatar, body.userAvatar, DEFAULT_AVATAR);
|
||
startCountdown(body.countdownMillis);
|
||
var levels = normalizeLevels(body.levelConfigs);
|
||
if (Array.isArray(body.levelConfigs)) {
|
||
ensureLevelSections(levels.length).forEach(function (section, index) {
|
||
renderLevel(section, levels[index]);
|
||
});
|
||
}
|
||
}
|
||
|
||
async function fetchHomeData() {
|
||
var authorization = readAuthorization();
|
||
if (!authorization) return;
|
||
var sysOrigin = readRequestSysOrigin();
|
||
try {
|
||
var response = await fetch(buildURL(HOME_ENDPOINT).toString(), {
|
||
cache: "no-store",
|
||
headers: {
|
||
Accept: "application/json",
|
||
Authorization: authorization,
|
||
"req-client": "H5",
|
||
"req-lang": readParam(["req-lang", "lang"]) || "en",
|
||
"req-version": "V2",
|
||
"req-zone": Intl.DateTimeFormat().resolvedOptions().timeZone || "Asia/Shanghai",
|
||
"req-app-intel": "version=1.0.0;build=1;model=H5;sysVersion=Web;channel=Web",
|
||
"req-sys-origin": "origin=" + sysOrigin.origin + ";originChild=" + sysOrigin.originChild,
|
||
},
|
||
});
|
||
var json = await response.json().catch(function () { return {}; });
|
||
if (!response.ok || json.status === false) {
|
||
throw new Error(json.errorMsg || json.message || "request_failed");
|
||
}
|
||
applyHomeData(json && (json.body || json.data || json));
|
||
} catch (error) {
|
||
console.warn("[RechargeReward] load failed", error);
|
||
}
|
||
}
|
||
|
||
ensureLevelSections(0);
|
||
fetchHomeData();
|
||
})();
|
||
|
||
(function () {
|
||
var root = document.documentElement;
|
||
var maxWidth = 432;
|
||
var canvasWidth = 1080;
|
||
|
||
function updateScale() {
|
||
var width = Math.min(window.innerWidth || maxWidth, maxWidth);
|
||
root.style.setProperty("--scale", String(width / canvasWidth));
|
||
}
|
||
|
||
updateScale();
|
||
window.addEventListener("resize", updateScale, { passive: true });
|
||
window.addEventListener("orientationchange", updateScale, { passive: true });
|
||
})();
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|