352 lines
15 KiB
HTML
352 lines
15 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 Friends</title>
|
|
<link rel="stylesheet" href="./style.css?v=20260606-9" />
|
|
</head>
|
|
<body>
|
|
<main
|
|
class="invite-page"
|
|
aria-label="Invite friends"
|
|
data-i18n-aria="invite.pageAria"
|
|
>
|
|
<div class="language-switcher">
|
|
<button
|
|
class="language-button"
|
|
type="button"
|
|
aria-label="Change language"
|
|
aria-expanded="false"
|
|
data-language-toggle
|
|
data-current-lang
|
|
data-i18n-aria="invite.changeLanguage"
|
|
>
|
|
EN
|
|
</button>
|
|
<div class="language-menu" data-language-menu hidden>
|
|
<button type="button" data-lang-option="en">EN</button>
|
|
<button type="button" data-lang-option="ar">AR</button>
|
|
<button type="button" data-lang-option="tr">TR</button>
|
|
<button type="button" data-lang-option="es">ES</button>
|
|
<button type="button" data-lang-option="zh">ZH</button>
|
|
<button type="button" data-lang-option="id">ID</button>
|
|
</div>
|
|
</div>
|
|
|
|
<section
|
|
class="hero"
|
|
aria-label="Invite friends make money"
|
|
data-i18n-aria="invite.heroAria"
|
|
>
|
|
<div
|
|
class="countdown-card"
|
|
aria-label="Countdown"
|
|
data-i18n-aria="invite.countdownAria"
|
|
>
|
|
<div class="time-cell">
|
|
<strong id="days">01</strong>
|
|
<span data-i18n="invite.days">Days</span>
|
|
</div>
|
|
<div class="time-cell">
|
|
<strong id="hours">01</strong>
|
|
<span data-i18n="invite.hours">Hours</span>
|
|
</div>
|
|
<div class="time-cell">
|
|
<strong id="minutes">01</strong>
|
|
<span data-i18n="invite.minutes">Minutes</span>
|
|
</div>
|
|
<div class="time-cell">
|
|
<strong id="seconds">01</strong>
|
|
<span data-i18n="invite.seconds">Seconds</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="ornate-panel reward-panel">
|
|
<h2 data-i18n="invite.yourReward">Your Reward</h2>
|
|
<p class="subtle" data-i18n="invite.rewardSubtitle">
|
|
(Earn for every friend you invite)
|
|
</p>
|
|
<div class="reward-grid">
|
|
<article class="reward-item">
|
|
<img
|
|
class="reward-orb"
|
|
src="./assets/reward-orb-bg.png"
|
|
alt=""
|
|
/>
|
|
<img
|
|
class="reward-gold"
|
|
src="./assets/gold-stack.png"
|
|
alt=""
|
|
/>
|
|
<strong>+2000</strong>
|
|
<span data-i18n="invite.invitationReceived">
|
|
Invitation received
|
|
</span>
|
|
</article>
|
|
<img class="plus" src="./assets/plus.svg" alt="+" />
|
|
<article class="reward-item">
|
|
<img
|
|
class="reward-orb"
|
|
src="./assets/reward-orb-bg.png"
|
|
alt=""
|
|
/>
|
|
<img
|
|
class="reward-gold"
|
|
src="./assets/gold-stack.png"
|
|
alt=""
|
|
/>
|
|
<strong>+1000</strong>
|
|
<span data-i18n="invite.topUpViaFriends">
|
|
Top up via friends
|
|
</span>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="invite-copy">
|
|
<h2 data-i18n="invite.startInviting">
|
|
Start inviting people now
|
|
</h2>
|
|
<p class="subtle" data-i18n="invite.copyInviteHint">
|
|
(Copy your invitation link and share it with your friends)
|
|
</p>
|
|
<div class="invite-fields">
|
|
<div class="link-box" id="inviteLink">
|
|
http://yourappbalbalanal
|
|
</div>
|
|
<div class="link-box invite-code" id="inviteCode">
|
|
ABC123
|
|
</div>
|
|
</div>
|
|
<div class="invite-actions">
|
|
<button
|
|
class="ornate-button"
|
|
id="copyLinkButton"
|
|
type="button"
|
|
data-i18n="invite.copy"
|
|
>
|
|
Copy
|
|
</button>
|
|
<button
|
|
class="ornate-button small-copy-button"
|
|
id="copyCodeButton"
|
|
type="button"
|
|
data-i18n="invite.copy"
|
|
>
|
|
Copy
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="ornate-panel stats-panel" aria-label="Invite stats">
|
|
<div class="stat">
|
|
<strong>168</strong>
|
|
<span data-i18n="invite.totalInvitees">
|
|
Total number of invitees
|
|
</span>
|
|
</div>
|
|
<div class="stat">
|
|
<strong>01</strong>
|
|
<span data-i18n="invite.eligibleVoters">
|
|
Number of eligible voters
|
|
</span>
|
|
</div>
|
|
<div class="stat">
|
|
<strong>01</strong>
|
|
<span data-i18n="invite.totalRecharged">
|
|
Total amount recharged by invitees
|
|
</span>
|
|
</div>
|
|
<div class="stat">
|
|
<strong>12354</strong>
|
|
<span data-i18n="invite.myRewards">My Rewards</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="ornate-panel monthly-panel" id="monthlyTask">
|
|
<h2 data-i18n="invite.monthlyTasks">Monthly Tasks</h2>
|
|
<div
|
|
class="task-tabs"
|
|
role="tablist"
|
|
aria-label="Monthly tasks"
|
|
data-i18n-aria="invite.monthlyTasks"
|
|
>
|
|
<button
|
|
class="task-tab is-active"
|
|
id="transportTab"
|
|
type="button"
|
|
role="tab"
|
|
aria-selected="true"
|
|
data-tab="transport"
|
|
>
|
|
<span data-i18n="invite.totalTransportation">
|
|
Total Transportation
|
|
</span>
|
|
<span data-i18n="invite.volume">Volume</span>
|
|
</button>
|
|
<button
|
|
class="task-tab"
|
|
id="quotaTab"
|
|
type="button"
|
|
role="tab"
|
|
aria-selected="false"
|
|
data-tab="quota"
|
|
>
|
|
<span data-i18n="invite.invitationQuota">
|
|
Invitation Quota
|
|
</span>
|
|
<span data-i18n="invite.task">Task</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="task-pane is-active" id="transportPane">
|
|
<div class="timeline" aria-label="Transportation milestones">
|
|
<article class="milestone is-done">
|
|
<h3 data-i18n="invite.milestoneTitle">
|
|
Milestone1:balabalabal
|
|
</h3>
|
|
<p data-i18n="invite.totalSupply">
|
|
Total supply: 49999 coins
|
|
</p>
|
|
</article>
|
|
<article class="milestone is-current">
|
|
<h3 data-i18n="invite.milestoneTitle">
|
|
Milestone1:balabalabal
|
|
</h3>
|
|
<p data-i18n="invite.totalSupply">
|
|
Total supply: 49999 coins
|
|
</p>
|
|
</article>
|
|
<article class="milestone">
|
|
<h3 data-i18n="invite.milestoneTitle">
|
|
Milestone1:balabalabal
|
|
</h3>
|
|
<p data-i18n="invite.totalSupply">
|
|
Total supply: 49999 coins
|
|
</p>
|
|
</article>
|
|
<article class="milestone">
|
|
<h3 data-i18n="invite.milestoneTitle">
|
|
Milestone1:balabalabal
|
|
</h3>
|
|
<p data-i18n="invite.totalSupply">
|
|
Total supply: 49999 coins
|
|
</p>
|
|
</article>
|
|
<article class="milestone">
|
|
<h3 data-i18n="invite.milestoneTitle">
|
|
Milestone1:balabalabal
|
|
</h3>
|
|
<p data-i18n="invite.totalSupply">
|
|
Total supply: 49999 coins
|
|
</p>
|
|
</article>
|
|
</div>
|
|
<button
|
|
class="ornate-button copy-task-button"
|
|
type="button"
|
|
data-i18n="invite.copy"
|
|
>
|
|
Copy
|
|
</button>
|
|
<p class="subtle footnote" data-i18n="invite.transportFootnote">
|
|
(Only the highest-level bonuses may be awarded)
|
|
</p>
|
|
</div>
|
|
|
|
<div class="task-pane" id="quotaPane">
|
|
<div class="quota-list" aria-label="Invitation quota tasks">
|
|
<article class="quota-card">
|
|
<div>
|
|
<h3 data-i18n="invite.milestoneTitle">
|
|
Milestone1:balabalabal
|
|
</h3>
|
|
<p data-i18n="invite.invitePaidFriends">
|
|
Invite 10 friends who have already made a
|
|
payment
|
|
</p>
|
|
</div>
|
|
<button
|
|
class="claim-button is-ready"
|
|
type="button"
|
|
data-i18n="invite.claim"
|
|
>
|
|
Claim
|
|
</button>
|
|
</article>
|
|
<article class="quota-card">
|
|
<div>
|
|
<h3 data-i18n="invite.milestoneTitle">
|
|
Milestone1:balabalabal
|
|
</h3>
|
|
<p data-i18n="invite.invitePaidFriends">
|
|
Invite 10 friends who have already made a
|
|
payment
|
|
</p>
|
|
</div>
|
|
<button
|
|
class="claim-button"
|
|
type="button"
|
|
data-i18n="invite.claim"
|
|
>
|
|
Claim
|
|
</button>
|
|
</article>
|
|
<article class="quota-card">
|
|
<div>
|
|
<h3 data-i18n="invite.milestoneTitle">
|
|
Milestone1:balabalabal
|
|
</h3>
|
|
<p data-i18n="invite.invitePaidFriends">
|
|
Invite 10 friends who have already made a
|
|
payment
|
|
</p>
|
|
</div>
|
|
<button
|
|
class="claim-button"
|
|
type="button"
|
|
data-i18n="invite.claim"
|
|
>
|
|
Claim
|
|
</button>
|
|
</article>
|
|
</div>
|
|
<p class="subtle footnote" data-i18n="invite.quotaFootnote">
|
|
(You'll receive a reward upon reaching each level)
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="ornate-panel rank-panel" id="rankPanel" hidden>
|
|
<h2 data-i18n="invite.rank">Rank</h2>
|
|
<div class="rank-list" id="rankList"></div>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
(function () {
|
|
try {
|
|
var params = new URLSearchParams(window.location.search);
|
|
if (
|
|
!params.get("lang") &&
|
|
!window.localStorage.getItem("invite_lang_ready")
|
|
) {
|
|
window.localStorage.setItem("hyapp_h5_lang", "en");
|
|
window.localStorage.setItem("invite_lang_ready", "1");
|
|
}
|
|
} catch (error) {
|
|
document.documentElement.lang = "en";
|
|
}
|
|
})();
|
|
</script>
|
|
<script src="../../common/i18n.js?v=20260606-1"></script>
|
|
<script src="../../common/toast.js"></script>
|
|
<script src="./script.js?v=20260606-6"></script>
|
|
</body>
|
|
</html>
|