feat: add host center loading mask
This commit is contained in:
170-carry
parent
483faf1993
commit
a6034bf9c0
@ -4,10 +4,10 @@
|
||||
<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>Host Center</title>
|
||||
<link rel="stylesheet" href="./style.css?v=20260428-2035" />
|
||||
<link rel="stylesheet" href="./style.css?v=20260428-2040" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="host-center" aria-label="Host Center" data-i18n-aria="page_label">
|
||||
<div class="host-center" aria-label="Host Center" data-i18n-aria="page_label" data-loading="true" data-view="loading">
|
||||
<div class="hero-bg" aria-hidden="true"></div>
|
||||
|
||||
<header class="status-bar" aria-hidden="true">
|
||||
@ -51,7 +51,15 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card metrics-card">
|
||||
<section class="card join-agency-card" id="joinAgencyCard" hidden>
|
||||
<div class="join-agency-copy">
|
||||
<div class="join-agency-title" data-i18n="join_agency_title">Join Agency</div>
|
||||
<div class="join-agency-text" data-i18n="join_agency_text">Search for an agency ID and submit your application.</div>
|
||||
</div>
|
||||
<a class="join-agency-action" id="joinAgencyLink" href="../join-agency/index.html" data-i18n="join_agency_action">Join now</a>
|
||||
</section>
|
||||
|
||||
<section class="card metrics-card host-only">
|
||||
<div class="metric">
|
||||
<div class="label" data-i18n-html="streaming_duration">Work Time (min)</div>
|
||||
<div class="value" id="streamingDuration"></div>
|
||||
@ -66,7 +74,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card income-card">
|
||||
<section class="card income-card host-only">
|
||||
<div class="income-head">
|
||||
<div class="income-title">
|
||||
<span data-i18n="my_income">Salary</span>
|
||||
@ -87,7 +95,7 @@
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<section class="card policy-entry-card">
|
||||
<section class="card policy-entry-card host-only">
|
||||
<a class="policy-entry-link" id="anchorPolicyLink" href="./policy.html" aria-label="Open host policy" data-i18n-aria="open_anchor_policy">
|
||||
<span class="policy-entry-left">
|
||||
<svg viewBox="0 0 28 28" aria-hidden="true">
|
||||
@ -117,7 +125,19 @@
|
||||
</div>
|
||||
|
||||
<div class="home-indicator" aria-hidden="true"></div>
|
||||
<div class="loading-mask" id="loadingMask" role="status" aria-live="polite" aria-busy="true">
|
||||
<div class="runner-stick" aria-hidden="true">
|
||||
<span class="runner-head"></span>
|
||||
<span class="runner-body"></span>
|
||||
<span class="runner-arm runner-arm-front"></span>
|
||||
<span class="runner-arm runner-arm-back"></span>
|
||||
<span class="runner-leg runner-leg-front"></span>
|
||||
<span class="runner-leg runner-leg-back"></span>
|
||||
<span class="runner-ground"></span>
|
||||
</div>
|
||||
<div class="loading-copy">loading....</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js?v=20260428-2035" defer></script>
|
||||
<script src="./script.js?v=20260428-2040" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -15,6 +15,9 @@
|
||||
"close": "إغلاق",
|
||||
"open_daily_data": "فتح البيانات اليومية",
|
||||
"my_income": "الراتب",
|
||||
"join_agency_title": "الانضمام إلى وكالة",
|
||||
"join_agency_text": "ابحث عن معرّف وكالة وأرسل طلبك.",
|
||||
"join_agency_action": "انضم الآن",
|
||||
"withdraw_exchange": "سحب/استبدال",
|
||||
"open_withdraw_exchange": "فتح صفحة السحب والاستبدال",
|
||||
"open_anchor_policy": "فتح سياسة المضيف",
|
||||
|
||||
@ -15,6 +15,9 @@
|
||||
"close": "Close",
|
||||
"open_daily_data": "Open daily data",
|
||||
"my_income": "Salary",
|
||||
"join_agency_title": "Join Agency",
|
||||
"join_agency_text": "Search for an agency ID and submit your application.",
|
||||
"join_agency_action": "Join now",
|
||||
"withdraw_exchange": "Withdraw/Exchange",
|
||||
"open_withdraw_exchange": "Open withdraw and exchange page",
|
||||
"open_anchor_policy": "Open host policy",
|
||||
|
||||
@ -15,6 +15,9 @@
|
||||
"close": "Tutup",
|
||||
"open_daily_data": "Buka data harian",
|
||||
"my_income": "Gaji",
|
||||
"join_agency_title": "Gabung Agensi",
|
||||
"join_agency_text": "Cari ID agensi dan kirim pengajuan Anda.",
|
||||
"join_agency_action": "Gabung sekarang",
|
||||
"withdraw_exchange": "Tarik/Tukar",
|
||||
"open_withdraw_exchange": "Buka halaman tarik dan tukar",
|
||||
"open_anchor_policy": "Buka kebijakan host",
|
||||
|
||||
@ -15,6 +15,9 @@
|
||||
"close": "Kapat",
|
||||
"open_daily_data": "Günlük veriyi aç",
|
||||
"my_income": "Maaş",
|
||||
"join_agency_title": "Ajansa Katıl",
|
||||
"join_agency_text": "Ajans ID ile arama yapıp başvurunu gönder.",
|
||||
"join_agency_action": "Şimdi katıl",
|
||||
"withdraw_exchange": "Çek/Değiştir",
|
||||
"open_withdraw_exchange": "Çekme ve değişim sayfasını aç",
|
||||
"open_anchor_policy": "Host politikasını aç",
|
||||
|
||||
@ -26,6 +26,9 @@
|
||||
close: "Close",
|
||||
open_daily_data: "Open daily data",
|
||||
my_income: "Salary",
|
||||
join_agency_title: "Join Agency",
|
||||
join_agency_text: "Search for an agency ID and submit your application.",
|
||||
join_agency_action: "Join now",
|
||||
withdraw_exchange: "Withdraw/Exchange",
|
||||
open_withdraw_exchange: "Open withdraw and exchange page",
|
||||
open_anchor_policy: "Open host policy",
|
||||
@ -59,6 +62,9 @@
|
||||
close: "إغلاق",
|
||||
open_daily_data: "فتح البيانات اليومية",
|
||||
my_income: "الراتب",
|
||||
join_agency_title: "الانضمام إلى وكالة",
|
||||
join_agency_text: "ابحث عن معرّف وكالة وأرسل طلبك.",
|
||||
join_agency_action: "انضم الآن",
|
||||
withdraw_exchange: "سحب/استبدال",
|
||||
open_withdraw_exchange: "فتح صفحة السحب والاستبدال",
|
||||
open_anchor_policy: "فتح سياسة المضيف",
|
||||
@ -92,6 +98,9 @@
|
||||
close: "Kapat",
|
||||
open_daily_data: "Günlük veriyi aç",
|
||||
my_income: "Maaş",
|
||||
join_agency_title: "Ajansa Katıl",
|
||||
join_agency_text: "Ajans ID ile arama yapıp başvurunu gönder.",
|
||||
join_agency_action: "Şimdi katıl",
|
||||
withdraw_exchange: "Çek/Değiştir",
|
||||
open_withdraw_exchange: "Çekme ve değişim sayfasını aç",
|
||||
open_anchor_policy: "Host politikasını aç",
|
||||
@ -125,6 +134,9 @@
|
||||
close: "Tutup",
|
||||
open_daily_data: "Buka data harian",
|
||||
my_income: "Gaji",
|
||||
join_agency_title: "Gabung Agensi",
|
||||
join_agency_text: "Cari ID agensi dan kirim pengajuan Anda.",
|
||||
join_agency_action: "Gabung sekarang",
|
||||
withdraw_exchange: "Tarik/Tukar",
|
||||
open_withdraw_exchange: "Buka halaman tarik dan tukar",
|
||||
open_anchor_policy: "Buka kebijakan host",
|
||||
@ -202,7 +214,7 @@
|
||||
if (window.location.protocol === "file:") return fallbackMessages[normalizedLang];
|
||||
|
||||
try {
|
||||
const response = await fetch(`./locales/${normalizedLang}.json?v=20260428-2035`, { cache: "no-store" });
|
||||
const response = await fetch(`./locales/${normalizedLang}.json?v=20260428-2040`, { cache: "no-store" });
|
||||
if (response.ok) return await response.json();
|
||||
} catch (error) {
|
||||
return fallbackMessages[normalizedLang];
|
||||
@ -407,6 +419,34 @@
|
||||
return !isTruthyIdentityValue(identity.anchor);
|
||||
}
|
||||
|
||||
function setLoading(isLoading) {
|
||||
const root = document.querySelector(".host-center");
|
||||
const loadingMask = document.querySelector("#loadingMask");
|
||||
if (root) root.dataset.loading = isLoading ? "true" : "false";
|
||||
if (loadingMask) {
|
||||
loadingMask.hidden = !isLoading;
|
||||
loadingMask.setAttribute("aria-busy", String(isLoading));
|
||||
}
|
||||
}
|
||||
|
||||
function setIdentityView(identity) {
|
||||
const root = document.querySelector(".host-center");
|
||||
const showJoinAgency = shouldOpenJoinAgency(identity);
|
||||
if (root) root.dataset.view = showJoinAgency ? "join-agency" : "host";
|
||||
|
||||
document.querySelectorAll(".host-only").forEach((node) => {
|
||||
node.hidden = showJoinAgency;
|
||||
});
|
||||
|
||||
const joinAgencyCard = document.querySelector("#joinAgencyCard");
|
||||
if (joinAgencyCard) joinAgencyCard.hidden = !showJoinAgency;
|
||||
|
||||
const agencyButton = document.querySelector(".agency");
|
||||
if (agencyButton) agencyButton.hidden = showJoinAgency;
|
||||
|
||||
syncJoinAgencyLink();
|
||||
}
|
||||
|
||||
function buildPageURL(path) {
|
||||
const url = new URL(path, window.location.href);
|
||||
const nextParams = new URLSearchParams(params);
|
||||
@ -747,6 +787,21 @@
|
||||
document.querySelectorAll('a[href^="../withdraw-exchange/index.html"]').forEach((link) => {
|
||||
link.setAttribute("href", `../withdraw-exchange/index.html${query ? `?${query}` : ""}`);
|
||||
});
|
||||
|
||||
syncJoinAgencyLink();
|
||||
}
|
||||
|
||||
function syncJoinAgencyLink() {
|
||||
const link = document.querySelector("#joinAgencyLink");
|
||||
if (!link) return;
|
||||
|
||||
const nextParams = new URLSearchParams(params);
|
||||
const token = readRawParam("token");
|
||||
if (token) nextParams.set("token", token);
|
||||
if (currentLang) nextParams.set("lang", currentLang);
|
||||
|
||||
const query = nextParams.toString();
|
||||
link.setAttribute("href", `../join-agency/index.html${query ? `?${query}` : ""}`);
|
||||
}
|
||||
|
||||
function syncPolicyLink() {
|
||||
@ -846,21 +901,35 @@
|
||||
|
||||
ensureAvatarFallback("Oscar");
|
||||
|
||||
applyLanguage(currentLang).then(async () => {
|
||||
const identity = await fetchIdentity();
|
||||
if (shouldOpenJoinAgency(identity)) {
|
||||
openJoinAgencyPage();
|
||||
return;
|
||||
}
|
||||
async function initializePage() {
|
||||
setLoading(true);
|
||||
|
||||
fetchAgencyProfile();
|
||||
fetchTeamEntry();
|
||||
fetchUserProfile().then(async (profile) => {
|
||||
const memberId = profile?.id || profile?.account;
|
||||
if (memberId) {
|
||||
await fetchStreamingDuration(memberId);
|
||||
try {
|
||||
await applyLanguage(currentLang);
|
||||
|
||||
const identity = await fetchIdentity();
|
||||
setIdentityView(identity);
|
||||
|
||||
const profile = await fetchUserProfile();
|
||||
const pendingRequests = [];
|
||||
|
||||
if (!shouldOpenJoinAgency(identity)) {
|
||||
pendingRequests.push(fetchAgencyProfile());
|
||||
pendingRequests.push(fetchTeamEntry());
|
||||
pendingRequests.push(fetchBankBalance());
|
||||
|
||||
const memberId = profile?.id || profile?.account;
|
||||
if (memberId) pendingRequests.push(fetchStreamingDuration(memberId));
|
||||
}
|
||||
});
|
||||
fetchBankBalance();
|
||||
});
|
||||
|
||||
await Promise.allSettled(pendingRequests);
|
||||
} catch (error) {
|
||||
console.error("Failed to initialize host center:", error);
|
||||
setIdentityView(currentIdentity);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
initializePage();
|
||||
})();
|
||||
|
||||
@ -44,6 +44,10 @@ a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.host-center {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@ -53,6 +57,136 @@ a {
|
||||
background: var(--page-bg);
|
||||
}
|
||||
|
||||
.host-center[data-loading="true"] .title-bar,
|
||||
.host-center[data-loading="true"] .content,
|
||||
.host-center[data-loading="true"] .home-indicator {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.loading-mask {
|
||||
position: absolute;
|
||||
z-index: 30;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
min-height: 100vh;
|
||||
background:
|
||||
radial-gradient(circle at 50% 35%, rgba(230, 255, 243, 0.98), rgba(246, 247, 247, 0.98) 44%, rgba(246, 247, 247, 0.96) 100%);
|
||||
}
|
||||
|
||||
.loading-mask[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.runner-stick {
|
||||
position: relative;
|
||||
width: 92px;
|
||||
height: 82px;
|
||||
color: #1ecf70;
|
||||
filter: drop-shadow(0 8px 14px rgba(30, 207, 112, 0.22));
|
||||
animation: runner-bob 0.42s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.runner-head,
|
||||
.runner-body,
|
||||
.runner-arm,
|
||||
.runner-leg,
|
||||
.runner-ground {
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.runner-head {
|
||||
top: 5px;
|
||||
left: 39px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 4px solid currentColor;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.runner-body {
|
||||
top: 26px;
|
||||
left: 47px;
|
||||
width: 5px;
|
||||
height: 28px;
|
||||
border-radius: 999px;
|
||||
background: currentColor;
|
||||
transform-origin: 50% 3px;
|
||||
animation: runner-body 0.42s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.runner-arm,
|
||||
.runner-leg {
|
||||
left: 47px;
|
||||
width: 5px;
|
||||
border-radius: 999px;
|
||||
background: currentColor;
|
||||
transform-origin: 50% 2px;
|
||||
}
|
||||
|
||||
.runner-arm {
|
||||
top: 31px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
.runner-arm-front {
|
||||
animation: runner-arm-front 0.42s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.runner-arm-back {
|
||||
animation: runner-arm-back 0.42s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.runner-leg {
|
||||
top: 51px;
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
.runner-leg-front {
|
||||
animation: runner-leg-front 0.42s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.runner-leg-back {
|
||||
animation: runner-leg-back 0.42s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.runner-ground {
|
||||
right: 6px;
|
||||
bottom: 2px;
|
||||
width: 70px;
|
||||
height: 4px;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: rgba(30, 207, 112, 0.18);
|
||||
}
|
||||
|
||||
.runner-ground::before,
|
||||
.runner-ground::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 24px;
|
||||
height: 4px;
|
||||
border-radius: 999px;
|
||||
background: currentColor;
|
||||
animation: runner-ground 0.6s linear infinite;
|
||||
}
|
||||
|
||||
.runner-ground::after {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.loading-copy {
|
||||
color: #139a55;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
inset: 0 0 auto;
|
||||
@ -364,6 +498,50 @@ a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.join-agency-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
min-height: 86px;
|
||||
padding: 17px 18px;
|
||||
}
|
||||
|
||||
.join-agency-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.join-agency-title {
|
||||
color: #24282e;
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.join-agency-text {
|
||||
margin-top: 5px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.join-agency-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 38px;
|
||||
flex: 0 0 auto;
|
||||
padding: 0 15px;
|
||||
border-radius: 8px;
|
||||
background: #25d878;
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
box-shadow: 0 8px 18px rgba(37, 216, 120, 0.26);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@ -581,6 +759,75 @@ a {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@keyframes runner-bob {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes runner-body {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(-7deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(7deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes runner-arm-front {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(62deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-58deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes runner-arm-back {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(-58deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(62deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes runner-leg-front {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(-58deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(54deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes runner-leg-back {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(54deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-58deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes runner-ground {
|
||||
0% {
|
||||
transform: translateX(78px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
}
|
||||
|
||||
.policy-card {
|
||||
min-height: 184px;
|
||||
padding: 18px 16px 16px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user