Compare commits
2 Commits
ae39abaa02
...
939acdfc31
| Author | SHA1 | Date | |
|---|---|---|---|
|
939acdfc31 | ||
|
f514df9db1 |
BIN
aslan/recharge-activity/assets/recharge-activity/bg-bottom.png
Normal file
BIN
aslan/recharge-activity/assets/recharge-activity/bg-bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
aslan/recharge-activity/assets/recharge-activity/bg-mid-a.png
Normal file
BIN
aslan/recharge-activity/assets/recharge-activity/bg-mid-a.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1022 KiB |
BIN
aslan/recharge-activity/assets/recharge-activity/bg-top.png
Normal file
BIN
aslan/recharge-activity/assets/recharge-activity/bg-top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 456 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 346 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 724 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
aslan/recharge-activity/assets/recharge-activity/reward-icon.png
Normal file
BIN
aslan/recharge-activity/assets/recharge-activity/reward-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 581 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 581 KiB |
98
aslan/recharge-activity/index.html
Normal file
98
aslan/recharge-activity/index.html
Normal file
@ -0,0 +1,98 @@
|
||||
<!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"
|
||||
/>
|
||||
<title>Recharge Reward</title>
|
||||
<link rel="stylesheet" href="../common/theme.css?v=20260707" />
|
||||
<link rel="stylesheet" href="./style.css?v=20260707-modules" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-viewport" id="appViewport">
|
||||
<main class="page" id="page">
|
||||
<section
|
||||
class="stage"
|
||||
aria-label="Recharge Reward activity"
|
||||
data-i18n-aria="rechargeReward.pageLabel"
|
||||
>
|
||||
<img class="bg bg-top" src="./assets/recharge-activity/bg-top.png" alt="" />
|
||||
<img
|
||||
class="bg bg-mid bg-mid-a"
|
||||
src="./assets/recharge-activity/bg-mid-a.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
class="bg bg-mid bg-mid-b"
|
||||
src="./assets/recharge-activity/bg-mid-a.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
class="bg bg-mid bg-mid-c"
|
||||
src="./assets/recharge-activity/bg-mid-a.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
class="bg bg-mid bg-mid-d"
|
||||
src="./assets/recharge-activity/bg-mid-a.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
class="bg bg-mid bg-mid-e"
|
||||
src="./assets/recharge-activity/bg-mid-a.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
class="bg bg-bottom"
|
||||
src="./assets/recharge-activity/bg-bottom.png"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
<section class="countdown" aria-label="Activity countdown">
|
||||
<img
|
||||
class="countdown-frame"
|
||||
src="./assets/recharge-activity/countdown-frame.png"
|
||||
alt=""
|
||||
/>
|
||||
<strong class="count-number" data-count="days">01</strong>
|
||||
<strong class="count-number" data-count="hours">01</strong>
|
||||
<strong class="count-number" data-count="minutes">01</strong>
|
||||
<strong class="count-number" data-count="seconds">01</strong>
|
||||
<span class="count-label" data-i18n="rechargeReward.days">Days</span>
|
||||
<span class="count-label" data-i18n="rechargeReward.hours">Hours</span>
|
||||
<span class="count-label" data-i18n="rechargeReward.minutes">Minutes</span>
|
||||
<span class="count-label" data-i18n="rechargeReward.seconds">Seconds</span>
|
||||
</section>
|
||||
|
||||
<section class="profile-card" aria-label="My recharge status">
|
||||
<img
|
||||
class="profile-frame"
|
||||
src="./assets/recharge-activity/profile-frame.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
class="profile-avatar"
|
||||
src="./assets/recharge-activity/profile-avatar.png"
|
||||
alt=""
|
||||
data-profile-avatar
|
||||
/>
|
||||
<h1 class="profile-name" data-profile-name>nanfangjian</h1>
|
||||
<p class="profile-id" data-profile-id>ID: 12345678</p>
|
||||
<p class="profile-recharge" data-profile-recharge>
|
||||
Accumlated Recharge:5998
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div class="reward-sections" id="rewardSections"></div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
<script>
|
||||
document.documentElement.dataset.hyAppCode = 'aslan';
|
||||
</script>
|
||||
<script src="../common/i18n.js?v=20260707"></script>
|
||||
<script src="./script.js?v=20260707-modules"></script>
|
||||
</body>
|
||||
</html>
|
||||
204
aslan/recharge-activity/script.js
Normal file
204
aslan/recharge-activity/script.js
Normal file
@ -0,0 +1,204 @@
|
||||
(function () {
|
||||
var ASSET_BASE = './assets/recharge-activity/';
|
||||
var viewport = document.getElementById('appViewport');
|
||||
var rewardSections = document.getElementById('rewardSections');
|
||||
var countNodes = {
|
||||
days: document.querySelector('[data-count="days"]'),
|
||||
hours: document.querySelector('[data-count="hours"]'),
|
||||
minutes: document.querySelector('[data-count="minutes"]'),
|
||||
seconds: document.querySelector('[data-count="seconds"]'),
|
||||
};
|
||||
|
||||
var DESIGN_WIDTH = 1080;
|
||||
var DESIGN_HEIGHT = 3273;
|
||||
var VIEWPORT_WIDTH = 375;
|
||||
var countdownEndAt = resolveCountdownEndAt();
|
||||
var activityData = {
|
||||
user: {
|
||||
name: 'nanfangjian',
|
||||
id: '12345678',
|
||||
avatar: ASSET_BASE + 'profile-avatar.png',
|
||||
accumulatedRecharge: '5998',
|
||||
},
|
||||
rewards: [
|
||||
{
|
||||
amount: '$100',
|
||||
top: 1776,
|
||||
background: ASSET_BASE + 'reward-section-a.png',
|
||||
claim: { text: 'Receive', claimable: true, claimed: false },
|
||||
cards: [
|
||||
{ price: '$100', icon: ASSET_BASE + 'reward-icon.png', left: 111, top: 293 },
|
||||
{ price: '$100', icon: ASSET_BASE + 'reward-icon.png', left: 560, top: 293 },
|
||||
],
|
||||
},
|
||||
{
|
||||
amount: '$100',
|
||||
top: 2466,
|
||||
background: ASSET_BASE + 'reward-section-b.png',
|
||||
claim: { text: 'Receive', claimable: true, claimed: false },
|
||||
cards: [
|
||||
{ price: '$100', icon: ASSET_BASE + 'reward-icon.png', left: 70.5, top: 278 },
|
||||
{ price: '$100', icon: ASSET_BASE + 'reward-icon.png', left: 339.5, top: 278 },
|
||||
{ price: '$100', icon: ASSET_BASE + 'reward-icon.png', left: 608.5, top: 278 },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
function getParams() {
|
||||
return new URLSearchParams(window.location.search || '');
|
||||
}
|
||||
|
||||
function t(key, fallback) {
|
||||
return window.HyAppI18n && window.HyAppI18n.t
|
||||
? window.HyAppI18n.t(key, fallback)
|
||||
: fallback || key;
|
||||
}
|
||||
|
||||
function escapeHTML(value) {
|
||||
return String(value || '')
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
function twoDigits(value) {
|
||||
return String(Math.max(0, value)).padStart(2, '0');
|
||||
}
|
||||
|
||||
function resolveCountdownEndAt() {
|
||||
var params = getParams();
|
||||
var explicitEnd = Date.parse(params.get('end_at') || params.get('endAt') || '');
|
||||
if (Number.isFinite(explicitEnd) && explicitEnd > Date.now()) return explicitEnd;
|
||||
|
||||
var hours = Number(params.get('hours'));
|
||||
if (Number.isFinite(hours) && hours > 0) return Date.now() + hours * 60 * 60 * 1000;
|
||||
|
||||
// This page is intentionally interface-free for now; when an API is added,
|
||||
// use the server period end time here and do not recover failed requests with mock data.
|
||||
return Date.now() + 25 * 60 * 60 * 1000 + 61 * 1000;
|
||||
}
|
||||
|
||||
function updateScale() {
|
||||
var scale = Math.min(window.innerWidth / VIEWPORT_WIDTH, 1);
|
||||
var scaledHeight = Math.ceil(DESIGN_HEIGHT * (VIEWPORT_WIDTH / DESIGN_WIDTH));
|
||||
|
||||
document.documentElement.style.setProperty('--app-scale', String(scale));
|
||||
viewport.style.minHeight = scaledHeight + 'px';
|
||||
document.body.style.minHeight = Math.ceil(scaledHeight * scale) + 'px';
|
||||
}
|
||||
|
||||
function updateCountdown() {
|
||||
var diff = Math.max(0, countdownEndAt - Date.now());
|
||||
var totalSeconds = Math.floor(diff / 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;
|
||||
|
||||
countNodes.days.textContent = twoDigits(days);
|
||||
countNodes.hours.textContent = twoDigits(hours);
|
||||
countNodes.minutes.textContent = twoDigits(minutes);
|
||||
countNodes.seconds.textContent = twoDigits(seconds);
|
||||
}
|
||||
|
||||
function renderProfile(user) {
|
||||
document.querySelector('[data-profile-avatar]').src = user.avatar;
|
||||
document.querySelector('[data-profile-name]').textContent = user.name;
|
||||
document.querySelector('[data-profile-id]').textContent =
|
||||
t('rechargeReward.idPrefix', 'ID:') + ' ' + user.id;
|
||||
document.querySelector('[data-profile-recharge]').textContent =
|
||||
t('rechargeReward.accumulatedRecharge', 'Accumlated Recharge:') +
|
||||
user.accumulatedRecharge;
|
||||
}
|
||||
|
||||
function renderRewardCard(card) {
|
||||
return [
|
||||
'<div class="reward-card" style="left:',
|
||||
card.left,
|
||||
'px;top:',
|
||||
card.top,
|
||||
'px">',
|
||||
'<img class="reward-frame" src="',
|
||||
ASSET_BASE,
|
||||
'reward-card-frame.png',
|
||||
'" alt="" />',
|
||||
'<img class="reward-icon" src="',
|
||||
escapeHTML(card.icon),
|
||||
'" alt="" />',
|
||||
'<span class="reward-price">',
|
||||
escapeHTML(card.price),
|
||||
'</span>',
|
||||
'</div>',
|
||||
].join('');
|
||||
}
|
||||
|
||||
function renderClaimButton(claim) {
|
||||
var stateClass = claim.claimed ? ' is-claimed' : claim.claimable ? ' is-claimable' : ' is-disabled';
|
||||
return [
|
||||
'<button class="claim-button',
|
||||
stateClass,
|
||||
'" type="button"',
|
||||
claim.claimable && !claim.claimed ? '' : ' disabled',
|
||||
'>',
|
||||
'<img class="claim-button-bg" src="',
|
||||
ASSET_BASE,
|
||||
'receive-button-bg.png" alt="" />',
|
||||
'<span>',
|
||||
escapeHTML(claim.text || 'Receive'),
|
||||
'</span>',
|
||||
'</button>',
|
||||
].join('');
|
||||
}
|
||||
|
||||
function renderRewards(rewards) {
|
||||
rewardSections.innerHTML = rewards
|
||||
.map(function (section) {
|
||||
var title = t('rechargeReward.rechargeTitle', 'Recharge {amount}').replace(
|
||||
'{amount}',
|
||||
section.amount
|
||||
);
|
||||
return [
|
||||
'<section class="reward-section" style="--section-top:',
|
||||
section.top,
|
||||
'px">',
|
||||
'<img class="reward-section-bg" src="',
|
||||
escapeHTML(section.background),
|
||||
'" alt="" />',
|
||||
'<div class="title-pill">',
|
||||
'<span>',
|
||||
escapeHTML(title),
|
||||
'</span>',
|
||||
'</div>',
|
||||
section.cards
|
||||
.map(function (card) {
|
||||
return renderRewardCard(card);
|
||||
})
|
||||
.join(''),
|
||||
renderClaimButton(section.claim || { text: 'Receive', claimable: false }),
|
||||
'</section>',
|
||||
].join('');
|
||||
})
|
||||
.join('');
|
||||
}
|
||||
|
||||
function renderPage() {
|
||||
document.title = t('rechargeReward.pageTitle', 'Recharge Reward');
|
||||
renderProfile(activityData.user);
|
||||
renderRewards(activityData.rewards);
|
||||
}
|
||||
|
||||
function init() {
|
||||
updateScale();
|
||||
updateCountdown();
|
||||
renderPage();
|
||||
|
||||
window.setInterval(updateCountdown, 1000);
|
||||
window.addEventListener('resize', updateScale);
|
||||
window.addEventListener('hyapp:i18n-ready', renderPage);
|
||||
}
|
||||
|
||||
init();
|
||||
})();
|
||||
399
aslan/recharge-activity/style.css
Normal file
399
aslan/recharge-activity/style.css
Normal file
@ -0,0 +1,399 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
:root {
|
||||
--app-scale: 1;
|
||||
--design-scale: 0.3472222222;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
overflow-x: hidden;
|
||||
background: var(--hy-theme-bg);
|
||||
color: #f6e0b2;
|
||||
font-family:
|
||||
Arial,
|
||||
"Helvetica Neue",
|
||||
Helvetica,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 1137px;
|
||||
}
|
||||
|
||||
.app-viewport {
|
||||
position: relative;
|
||||
width: 375px;
|
||||
min-height: 1137px;
|
||||
margin: 0 auto;
|
||||
transform: scale(var(--app-scale));
|
||||
transform-origin: top center;
|
||||
}
|
||||
|
||||
.page {
|
||||
position: relative;
|
||||
width: 375px;
|
||||
min-height: 1137px;
|
||||
overflow: hidden;
|
||||
background: #1b100d;
|
||||
}
|
||||
|
||||
.stage {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 1080px;
|
||||
height: 3273px;
|
||||
overflow: hidden;
|
||||
transform: scale(var(--design-scale));
|
||||
transform-origin: top left;
|
||||
background: #1b100d;
|
||||
}
|
||||
|
||||
.stage > * {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.bg {
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
width: 1080px;
|
||||
object-fit: fill;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.bg-top {
|
||||
top: 0;
|
||||
height: 1588px;
|
||||
}
|
||||
|
||||
.bg-mid {
|
||||
height: 649px;
|
||||
object-fit: cover;
|
||||
object-position: center center;
|
||||
}
|
||||
|
||||
.bg-mid-a {
|
||||
top: 1000px;
|
||||
}
|
||||
|
||||
.bg-mid-b {
|
||||
top: 1400px;
|
||||
}
|
||||
|
||||
.bg-mid-c {
|
||||
top: 1800px;
|
||||
}
|
||||
|
||||
.bg-mid-d {
|
||||
top: 2200px;
|
||||
}
|
||||
|
||||
.bg-mid-e {
|
||||
top: 2600px;
|
||||
}
|
||||
|
||||
.bg-bottom {
|
||||
top: 2695px;
|
||||
height: 578px;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
left: 90px;
|
||||
top: 696px;
|
||||
width: 900px;
|
||||
height: 378px;
|
||||
}
|
||||
|
||||
.countdown-frame {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 900px;
|
||||
height: 378px;
|
||||
object-fit: fill;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.count-number {
|
||||
position: absolute;
|
||||
top: 156px;
|
||||
width: 96px;
|
||||
height: 74px;
|
||||
color: #ffce95;
|
||||
font-size: 60px;
|
||||
font-weight: 900;
|
||||
line-height: 74px;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
text-shadow:
|
||||
0 2px 0 #47200d,
|
||||
0 0 14px rgba(255, 210, 135, 0.58);
|
||||
}
|
||||
|
||||
.count-number[data-count="days"] {
|
||||
left: 97px;
|
||||
}
|
||||
|
||||
.count-number[data-count="hours"] {
|
||||
left: 301px;
|
||||
}
|
||||
|
||||
.count-number[data-count="minutes"] {
|
||||
left: 506px;
|
||||
}
|
||||
|
||||
.count-number[data-count="seconds"] {
|
||||
left: 706px;
|
||||
}
|
||||
|
||||
.count-label {
|
||||
position: absolute;
|
||||
top: 274px;
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
color: #100800;
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
line-height: 30px;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.count-label:nth-of-type(1) {
|
||||
left: 145px;
|
||||
}
|
||||
|
||||
.count-label:nth-of-type(2) {
|
||||
left: 349px;
|
||||
}
|
||||
|
||||
.count-label:nth-of-type(3) {
|
||||
left: 554px;
|
||||
}
|
||||
|
||||
.count-label:nth-of-type(4) {
|
||||
left: 754px;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
left: 90px;
|
||||
top: 1089px;
|
||||
width: 900px;
|
||||
height: 672px;
|
||||
}
|
||||
|
||||
.profile-frame {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 900px;
|
||||
height: 672px;
|
||||
object-fit: fill;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
position: absolute;
|
||||
left: 334px;
|
||||
top: 157px;
|
||||
width: 232px;
|
||||
height: 232px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.profile-name,
|
||||
.profile-id,
|
||||
.profile-recharge {
|
||||
position: absolute;
|
||||
left: 72px;
|
||||
width: 756px;
|
||||
margin: 0;
|
||||
color: #f6e0b2;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
text-shadow: 0 3px 8px rgba(0, 0, 0, 0.72);
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
top: 425px;
|
||||
font-size: 38px;
|
||||
font-weight: 800;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.profile-id {
|
||||
top: 476px;
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.profile-recharge {
|
||||
top: 520px;
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
line-height: 46px;
|
||||
}
|
||||
|
||||
.reward-sections {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 1080px;
|
||||
height: 3273px;
|
||||
}
|
||||
|
||||
.reward-section {
|
||||
position: absolute;
|
||||
left: 90px;
|
||||
top: var(--section-top);
|
||||
width: 900px;
|
||||
}
|
||||
|
||||
.title-pill {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 4;
|
||||
width: 900px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.reward-section-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
width: 900px;
|
||||
height: 675px;
|
||||
object-fit: fill;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.title-pill span {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 95px;
|
||||
z-index: 4;
|
||||
width: 900px;
|
||||
color: #f6e0b2;
|
||||
font-size: 40px;
|
||||
font-weight: 900;
|
||||
line-height: 48px;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
text-shadow:
|
||||
0 2px 0 #4f2306,
|
||||
0 0 14px rgba(255, 207, 113, 0.45);
|
||||
}
|
||||
|
||||
.reward-card {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: 229px;
|
||||
height: 251px;
|
||||
color: #f6e0b2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reward-frame {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: fill;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.reward-icon {
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
top: 19px;
|
||||
width: 193px;
|
||||
height: 193px;
|
||||
object-fit: contain;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.reward-price {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 196px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
color: #f6e0b2;
|
||||
font-size: 26px;
|
||||
font-weight: 900;
|
||||
line-height: 32px;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
text-shadow:
|
||||
0 2px 0 #3a1704,
|
||||
0 0 10px rgba(255, 207, 113, 0.44);
|
||||
}
|
||||
|
||||
.claim-button {
|
||||
position: absolute;
|
||||
left: 250.5px;
|
||||
top: 538px;
|
||||
z-index: 4;
|
||||
width: 399px;
|
||||
height: 133px;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: #fff8d2;
|
||||
font: inherit;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.claim-button:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.68;
|
||||
}
|
||||
|
||||
.claim-button-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 399px;
|
||||
height: 133px;
|
||||
object-fit: fill;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.claim-button span {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 47px;
|
||||
width: 399px;
|
||||
height: 40px;
|
||||
color: #fff8d2;
|
||||
font-size: 40px;
|
||||
font-weight: 900;
|
||||
line-height: 40px;
|
||||
text-shadow:
|
||||
0 2px 0 #7d2606,
|
||||
0 0 10px rgba(255, 230, 128, 0.68);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (min-width: 431px) {
|
||||
html,
|
||||
body {
|
||||
background: #100806;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user