401 lines
11 KiB
HTML
401 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
|
|
/>
|
|
<title>Invite Gift</title>
|
|
<style>
|
|
:root {
|
|
--page-width: 420px;
|
|
--text-primary: #fff8de;
|
|
--text-muted: rgba(255, 244, 208, 0.78);
|
|
--panel-top: url("./assets/panel-top.png");
|
|
--panel-middle: url("./assets/panel-middle.png");
|
|
--panel-bottom: url("./assets/panel-bottom.png");
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
background: #071f16;
|
|
color: var(--text-primary);
|
|
overflow-x: hidden;
|
|
font-family:
|
|
-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial,
|
|
sans-serif;
|
|
}
|
|
|
|
button {
|
|
border: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
background: transparent;
|
|
font: inherit;
|
|
}
|
|
|
|
.page {
|
|
position: relative;
|
|
width: min(100%, var(--page-width));
|
|
min-height: 100vh;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
background: #092616;
|
|
}
|
|
|
|
.bg {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
background: #092616;
|
|
}
|
|
|
|
.bg img {
|
|
width: min(195vw, 820px);
|
|
max-width: none;
|
|
height: auto;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
z-index: 1;
|
|
min-height: max(100vh, min(990px, 235.714vw));
|
|
padding: calc(env(safe-area-inset-top) + 45px) 14px calc(env(safe-area-inset-bottom) + 16px);
|
|
background:
|
|
linear-gradient(180deg, rgba(1, 12, 8, 0.02) 0%, rgba(1, 16, 9, 0.12) 38%, rgba(1, 18, 9, 0.34) 100%);
|
|
}
|
|
|
|
.invitee-avatar {
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: 0 auto;
|
|
border: 2px solid #fff0bc;
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
background: rgba(255, 255, 255, 0.12);
|
|
box-shadow:
|
|
0 0 0 1px rgba(113, 54, 23, 0.7),
|
|
0 10px 20px rgba(0, 0, 0, 0.26);
|
|
}
|
|
|
|
.invitee-avatar img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.title {
|
|
max-width: 330px;
|
|
margin: 14px auto 0;
|
|
font-size: 24px;
|
|
line-height: 0.97;
|
|
font-weight: 800;
|
|
text-align: center;
|
|
letter-spacing: -0.35px;
|
|
color: #ffd98f;
|
|
text-shadow:
|
|
0 1px 0 #7d3c17,
|
|
0 -1px 0 #7d3c17,
|
|
1px 0 0 #7d3c17,
|
|
-1px 0 0 #7d3c17,
|
|
0 3px 9px rgba(0, 0, 0, 0.34);
|
|
}
|
|
|
|
.subtitle {
|
|
margin: 13px auto 27px;
|
|
max-width: 350px;
|
|
font-size: 16px;
|
|
line-height: 1.22;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
color: #ffe2a3;
|
|
text-shadow:
|
|
0 1px 0 #714014,
|
|
0 2px 8px rgba(0, 0, 0, 0.28);
|
|
}
|
|
|
|
.ornate-panel {
|
|
position: relative;
|
|
background-color: rgba(9, 53, 14, 0.95);
|
|
background-image: var(--panel-top), var(--panel-bottom), var(--panel-middle);
|
|
background-position: top center, bottom center, top center;
|
|
background-size: 100% auto, 100% auto, 100% auto;
|
|
background-repeat: no-repeat, no-repeat, repeat-y;
|
|
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.23);
|
|
}
|
|
|
|
.gift-panel {
|
|
height: 243px;
|
|
padding: 19px 16px 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.panel-title {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
line-height: 1.15;
|
|
font-weight: 800;
|
|
color: #fff8de;
|
|
}
|
|
|
|
.panel-subtitle {
|
|
margin: 6px 0 21px;
|
|
font-size: 10px;
|
|
line-height: 1.35;
|
|
color: #df956a;
|
|
}
|
|
|
|
.reward {
|
|
position: relative;
|
|
/* width: 112px; */
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.reward-amount {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 5px;
|
|
left: 152px;
|
|
font-size: 22px;
|
|
line-height: 1;
|
|
font-weight: 800;
|
|
color: #fff3d3;
|
|
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.34);
|
|
}
|
|
|
|
.reward-orb {
|
|
position: relative;
|
|
width: 112px;
|
|
height: 112px;
|
|
border-radius: 999px;
|
|
background:
|
|
radial-gradient(circle, rgba(255, 240, 180, 0.48) 0%, rgba(255, 240, 180, 0.08) 58%, transparent 72%),
|
|
rgba(255, 255, 255, 0.02);
|
|
box-shadow:
|
|
inset 0 0 0 1px rgba(255, 245, 209, 0.3),
|
|
0 0 28px rgba(255, 230, 157, 0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.reward-orb img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.gift-note {
|
|
margin: 8px auto 0;
|
|
font-size: 10px;
|
|
line-height: 1.38;
|
|
color: #efe2bb;
|
|
}
|
|
|
|
.phone-grid {
|
|
--phone-card-width: min(49.286vw, 207px);
|
|
--phone-gap: min(5.714vw, 24px);
|
|
margin-top: 18px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.phone-track {
|
|
display: flex;
|
|
width: max-content;
|
|
gap: var(--phone-gap);
|
|
animation: phone-scroll 18s linear infinite;
|
|
will-change: transform;
|
|
}
|
|
|
|
.phone-grid:active .phone-track {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
.phone-card {
|
|
flex: 0 0 var(--phone-card-width);
|
|
border-radius: 13px;
|
|
overflow: hidden;
|
|
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
|
|
}
|
|
|
|
.phone-card img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
@keyframes phone-scroll {
|
|
to {
|
|
transform: translate3d(
|
|
calc(
|
|
0px - var(--phone-card-width) - var(--phone-gap) -
|
|
var(--phone-card-width) - var(--phone-gap) -
|
|
var(--phone-card-width) - var(--phone-gap) -
|
|
var(--phone-card-width) - var(--phone-gap)
|
|
),
|
|
0,
|
|
0
|
|
);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.phone-track {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
.download-button {
|
|
position: fixed;
|
|
/* top: min(865px, 205.952vw); */
|
|
left: 14px;
|
|
right: 14px;
|
|
z-index: 4;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: min(64px, 15.238vw);
|
|
width: auto;
|
|
margin: 0;
|
|
background: center / 100% 100% no-repeat url("./assets/btn-bg.png");
|
|
bottom: 40px;
|
|
}
|
|
|
|
.download-button span {
|
|
color: #ffe8bd;
|
|
font-size: 19px;
|
|
line-height: 1;
|
|
font-weight: 800;
|
|
letter-spacing: 0.2px;
|
|
text-shadow:
|
|
0 1px 0 rgba(120, 62, 20, 0.85),
|
|
0 2px 8px rgba(0, 0, 0, 0.24);
|
|
}
|
|
|
|
.toast {
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: 24px;
|
|
z-index: 20;
|
|
min-width: 120px;
|
|
max-width: calc(100vw - 32px);
|
|
padding: 10px 14px;
|
|
border-radius: 999px;
|
|
background: rgba(2, 16, 6, 0.88);
|
|
color: #fff8de;
|
|
font-size: 12px;
|
|
line-height: 1.2;
|
|
text-align: center;
|
|
opacity: 0;
|
|
transform: translateX(-50%) translateY(14px);
|
|
transition:
|
|
opacity 0.2s ease,
|
|
transform 0.2s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.toast.show {
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="page">
|
|
<div class="bg" aria-hidden="true">
|
|
<img src="./assets/gift-bg.png" alt="" />
|
|
</div>
|
|
|
|
<section class="content">
|
|
<div class="invitee-avatar">
|
|
<img id="inviterAvatar" src="./assets/avatar-sample.png" alt="Inviter avatar" />
|
|
</div>
|
|
|
|
<h1 class="title" id="landingTitle">Your friend [Name]<br />has invited you to join</h1>
|
|
<p class="subtitle">Join him to receive an exclusive welcome gift</p>
|
|
|
|
<div class="ornate-panel gift-panel">
|
|
<p class="panel-title">Your Personal Gift</p>
|
|
<p class="panel-subtitle">(This is a special gift from your friend)</p>
|
|
<div class="reward">
|
|
<div class="reward-amount" id="giftRewardAmount">+1000</div>
|
|
<div class="reward-orb">
|
|
<img src="./assets/reward-bag.png" alt="Personal gift" />
|
|
</div>
|
|
<div style="width: 80px;margin-left: 25px;">
|
|
<span style="
|
|
font-size: 22px;
|
|
line-height: 1;
|
|
font-weight: 800;
|
|
color: #fff3d3;
|
|
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.34);">+</span>
|
|
<img style="width: 100%;margin-left: 40px;" src="./assets/newuser.png" alt="" srcset="">
|
|
</div>
|
|
</div>
|
|
<p class="gift-note">(Available only through this invitation link! Don't miss out!)</p>
|
|
</div>
|
|
|
|
<div class="phone-grid" aria-label="App preview carousel">
|
|
<div class="phone-track">
|
|
<div class="phone-card">
|
|
<img src="./assets/phone-gift.png" alt="App home preview" />
|
|
</div>
|
|
<div class="phone-card">
|
|
<img src="./assets/phone-home.png" alt="Gift preview" />
|
|
</div>
|
|
<div class="phone-card">
|
|
<img src="./assets/p3.png" alt="App reward preview" />
|
|
</div>
|
|
<div class="phone-card">
|
|
<img src="./assets/p1.png" alt="App activity preview" />
|
|
</div>
|
|
<div class="phone-card" aria-hidden="true">
|
|
<img src="./assets/phone-gift.png" alt="" />
|
|
</div>
|
|
<div class="phone-card" aria-hidden="true">
|
|
<img src="./assets/phone-home.png" alt="" />
|
|
</div>
|
|
<div class="phone-card" aria-hidden="true">
|
|
<img src="./assets/p3.png" alt="" />
|
|
</div>
|
|
<div class="phone-card" aria-hidden="true">
|
|
<img src="./assets/p1.png" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
class="download-button"
|
|
id="downloadButton"
|
|
aria-label="Download now and claim your gift"
|
|
>
|
|
<span>Download now and claim your gift</span>
|
|
</button>
|
|
</section>
|
|
</main>
|
|
|
|
<div class="toast" id="pageToast" aria-live="polite"></div>
|
|
|
|
<script type="module" src="./landing.js"></script>
|
|
</body>
|
|
</html>
|