320 lines
13 KiB
HTML
320 lines
13 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=20260630-invite-layout" />
|
|
</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 reward-item-success">
|
|
<img
|
|
class="reward-visual"
|
|
src="./assets/generated/reward-success-visual.png"
|
|
alt=""
|
|
/>
|
|
<strong id="rewardInviteAmount"> +1000 </strong>
|
|
<span data-i18n="invite.successfulInvite">
|
|
Successful Invite
|
|
</span>
|
|
</article>
|
|
<img class="plus" src="./assets/plus.svg" alt="+" />
|
|
<article class="reward-item reward-item-topup">
|
|
<img
|
|
class="reward-visual"
|
|
src="./assets/generated/reward-topup-visual.png"
|
|
alt=""
|
|
/>
|
|
<strong id="rewardTopUpPercent">+1000</strong>
|
|
<span data-i18n="invite.friendTopUp">Friend Gets</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="invite-field">
|
|
<div class="link-box" id="inviteLink">
|
|
http://yourappbalbalanal
|
|
</div>
|
|
<button
|
|
class="copy-icon-button"
|
|
id="copyLinkButton"
|
|
type="button"
|
|
aria-label="Copy invitation link"
|
|
data-i18n-aria="invite.copyInviteLink"
|
|
></button>
|
|
</div>
|
|
<div class="invite-field is-code">
|
|
<div class="link-box invite-code" id="inviteCode">
|
|
ABC123
|
|
</div>
|
|
<button
|
|
class="copy-icon-button"
|
|
id="copyCodeButton"
|
|
type="button"
|
|
aria-label="Copy invitation code"
|
|
data-i18n-aria="invite.copyInviteCode"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="ornate-button bind-invite-button"
|
|
id="bindInviteButton"
|
|
type="button"
|
|
hidden
|
|
data-i18n="invite.linkInviter"
|
|
>
|
|
Bind User
|
|
</button>
|
|
</section>
|
|
|
|
<section class="ornate-panel stats-panel" aria-label="Invite stats">
|
|
<div class="stat">
|
|
<strong id="statInvitees">0</strong>
|
|
<span data-i18n="invite.totalInvitees">
|
|
Total number of invitees
|
|
</span>
|
|
</div>
|
|
<div class="stat">
|
|
<strong id="statEligible">0</strong>
|
|
<span data-i18n="invite.eligibleVoters">
|
|
Number of eligible voters
|
|
</span>
|
|
</div>
|
|
<div class="stat">
|
|
<strong id="statTotalRecharged">0</strong>
|
|
<span data-i18n="invite.totalRecharged">
|
|
Total amount recharged by invitees
|
|
</span>
|
|
</div>
|
|
<div class="stat">
|
|
<strong id="statMyRewards">0</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"
|
|
id="transportTimeline"
|
|
aria-label="Transportation milestones"
|
|
></div>
|
|
<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"
|
|
id="quotaList"
|
|
aria-label="Invitation quota tasks"
|
|
></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>
|
|
|
|
<div
|
|
class="invite-modal"
|
|
id="bindInviteModal"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="bindInviteTitle"
|
|
hidden
|
|
>
|
|
<div class="bind-card">
|
|
<h2 id="bindInviteTitle" data-i18n="invite.bindInviteTitle">
|
|
Bind Referrer
|
|
</h2>
|
|
<div class="bind-input-state" id="bindInputCard">
|
|
<label class="bind-input-shell">
|
|
<input
|
|
id="bindInviteInput"
|
|
type="text"
|
|
inputmode="text"
|
|
autocapitalize="characters"
|
|
autocomplete="off"
|
|
placeholder="Enter Invitation Code"
|
|
data-i18n-placeholder="invite.bindInvitePlaceholder"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="bind-result-state" id="bindResultCard" hidden>
|
|
<article class="inviter-card">
|
|
<img
|
|
id="inviterAvatar"
|
|
src="./assets/rank-avatar.png"
|
|
alt=""
|
|
/>
|
|
<div>
|
|
<strong id="inviterName">--</strong>
|
|
<span id="inviterDisplayId">--</span>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="bind-actions">
|
|
<button
|
|
class="bind-action-button bind-cancel-button"
|
|
id="bindCancelButton"
|
|
type="button"
|
|
data-i18n="invite.cancel"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
class="bind-action-button bind-confirm-button"
|
|
id="confirmBindButton"
|
|
type="button"
|
|
data-i18n="invite.confirm"
|
|
>
|
|
Confirm
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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/api.js?v=20260701-invite-referrer"></script>
|
|
<script src="../../common/params.js?v=20260611-invite-referrer"></script>
|
|
<script src="../../common/toast.js"></script>
|
|
<script src="./script.js?v=20260701-bound-referrer"></script>
|
|
</body>
|
|
</html>
|