hy/chatapp-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add host center loading mask

Browse Source
This commit is contained in:
170-carry 2026-04-28 20:36:28 +08:00
parent 483faf1993
commit a6034bf9c0
7 changed files with 370 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
h5/hyapp/host-center/index.html
View File

@ -4,10 +4,10 @@
<meta charset="UTF-8" /> <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" /> <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> <title>Host Center</title>
<link rel="stylesheet" href="./style.css?v=20260428-2035" /> <link rel="stylesheet" href="./style.css?v=20260428-2040" />
</head> </head>
<body> <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> <div class="hero-bg" aria-hidden="true"></div>
<header class="status-bar" aria-hidden="true"> <header class="status-bar" aria-hidden="true">
@ -51,7 +51,15 @@
</div> </div>
</section> </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="metric">
<div class="label" data-i18n-html="streaming_duration">Work Time (min)</div> <div class="label" data-i18n-html="streaming_duration">Work Time (min)</div>
<div class="value" id="streamingDuration"></div> <div class="value" id="streamingDuration"></div>
@ -66,7 +74,7 @@
</div> </div>
</section> </section>
<section class="card income-card"> <section class="card income-card host-only">
<div class="income-head"> <div class="income-head">
<div class="income-title"> <div class="income-title">
<span data-i18n="my_income">Salary</span> <span data-i18n="my_income">Salary</span>
@ -87,7 +95,7 @@
</a> </a>
</section> </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"> <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"> <span class="policy-entry-left">
<svg viewBox="0 0 28 28" aria-hidden="true"> <svg viewBox="0 0 28 28" aria-hidden="true">
@ -117,7 +125,19 @@
</div> </div>
<div class="home-indicator" aria-hidden="true"></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> </div>
<script src="./script.js?v=20260428-2035" defer></script> <script src="./script.js?v=20260428-2040" defer></script>
</body> </body>
</html> </html>

3
h5/hyapp/host-center/locales/ar.json
View File

@ -15,6 +15,9 @@
"close": "إغلاق", "close": "إغلاق",
"open_daily_data": "فتح البيانات اليومية", "open_daily_data": "فتح البيانات اليومية",
"my_income": "الراتب", "my_income": "الراتب",
"join_agency_title": "الانضمام إلى وكالة",
"join_agency_text": "ابحث عن معرّف وكالة وأرسل طلبك.",
"join_agency_action": "انضم الآن",
"withdraw_exchange": "سحب/استبدال", "withdraw_exchange": "سحب/استبدال",
"open_withdraw_exchange": "فتح صفحة السحب والاستبدال", "open_withdraw_exchange": "فتح صفحة السحب والاستبدال",
"open_anchor_policy": "فتح سياسة المضيف", "open_anchor_policy": "فتح سياسة المضيف",

3
h5/hyapp/host-center/locales/en.json
View File

@ -15,6 +15,9 @@
"close": "Close", "close": "Close",
"open_daily_data": "Open daily data", "open_daily_data": "Open daily data",
"my_income": "Salary", "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", "withdraw_exchange": "Withdraw/Exchange",
"open_withdraw_exchange": "Open withdraw and exchange page", "open_withdraw_exchange": "Open withdraw and exchange page",
"open_anchor_policy": "Open host policy", "open_anchor_policy": "Open host policy",

3
h5/hyapp/host-center/locales/id.json
View File

@ -15,6 +15,9 @@
"close": "Tutup", "close": "Tutup",
"open_daily_data": "Buka data harian", "open_daily_data": "Buka data harian",
"my_income": "Gaji", "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", "withdraw_exchange": "Tarik/Tukar",
"open_withdraw_exchange": "Buka halaman tarik dan tukar", "open_withdraw_exchange": "Buka halaman tarik dan tukar",
"open_anchor_policy": "Buka kebijakan host", "open_anchor_policy": "Buka kebijakan host",

3
h5/hyapp/host-center/locales/tr.json
View File

@ -15,6 +15,9 @@
"close": "Kapat", "close": "Kapat",
"open_daily_data": "Günlük veriyi aç", "open_daily_data": "Günlük veriyi aç",
"my_income": "Maaş", "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", "withdraw_exchange": "Çek/Değiştir",
"open_withdraw_exchange": "Çekme ve değişim sayfasını aç", "open_withdraw_exchange": "Çekme ve değişim sayfasını aç",
"open_anchor_policy": "Host politikasını aç", "open_anchor_policy": "Host politikasını aç",

101
h5/hyapp/host-center/script.js
View File

@ -26,6 +26,9 @@
close: "Close", close: "Close",
open_daily_data: "Open daily data", open_daily_data: "Open daily data",
my_income: "Salary", 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", withdraw_exchange: "Withdraw/Exchange",
open_withdraw_exchange: "Open withdraw and exchange page", open_withdraw_exchange: "Open withdraw and exchange page",
open_anchor_policy: "Open host policy", open_anchor_policy: "Open host policy",
@ -59,6 +62,9 @@
close: "إغلاق", close: "إغلاق",
open_daily_data: "فتح البيانات اليومية", open_daily_data: "فتح البيانات اليومية",
my_income: "الراتب", my_income: "الراتب",
join_agency_title: "الانضمام إلى وكالة",
join_agency_text: "ابحث عن معرّف وكالة وأرسل طلبك.",
join_agency_action: "انضم الآن",
withdraw_exchange: "سحب/استبدال", withdraw_exchange: "سحب/استبدال",
open_withdraw_exchange: "فتح صفحة السحب والاستبدال", open_withdraw_exchange: "فتح صفحة السحب والاستبدال",
open_anchor_policy: "فتح سياسة المضيف", open_anchor_policy: "فتح سياسة المضيف",
@ -92,6 +98,9 @@
close: "Kapat", close: "Kapat",
open_daily_data: "Günlük veriyi aç", open_daily_data: "Günlük veriyi aç",
my_income: "Maaş", 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", withdraw_exchange: "Çek/Değiştir",
open_withdraw_exchange: "Çekme ve değişim sayfasını aç", open_withdraw_exchange: "Çekme ve değişim sayfasını aç",
open_anchor_policy: "Host politikasını aç", open_anchor_policy: "Host politikasını aç",
@ -125,6 +134,9 @@
close: "Tutup", close: "Tutup",
open_daily_data: "Buka data harian", open_daily_data: "Buka data harian",
my_income: "Gaji", 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", withdraw_exchange: "Tarik/Tukar",
open_withdraw_exchange: "Buka halaman tarik dan tukar", open_withdraw_exchange: "Buka halaman tarik dan tukar",
open_anchor_policy: "Buka kebijakan host", open_anchor_policy: "Buka kebijakan host",
@ -202,7 +214,7 @@
if (window.location.protocol === "file:") return fallbackMessages[normalizedLang]; if (window.location.protocol === "file:") return fallbackMessages[normalizedLang];
try { 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(); if (response.ok) return await response.json();
} catch (error) { } catch (error) {
return fallbackMessages[normalizedLang]; return fallbackMessages[normalizedLang];
@ -407,6 +419,34 @@
return !isTruthyIdentityValue(identity.anchor); 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) { function buildPageURL(path) {
const url = new URL(path, window.location.href); const url = new URL(path, window.location.href);
const nextParams = new URLSearchParams(params); const nextParams = new URLSearchParams(params);
@ -747,6 +787,21 @@
document.querySelectorAll('a[href^="../withdraw-exchange/index.html"]').forEach((link) => { document.querySelectorAll('a[href^="../withdraw-exchange/index.html"]').forEach((link) => {
link.setAttribute("href", `../withdraw-exchange/index.html${query ? `?${query}` : ""}`); 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() { function syncPolicyLink() {
@ -846,21 +901,35 @@
ensureAvatarFallback("Oscar"); ensureAvatarFallback("Oscar");
applyLanguage(currentLang).then(async () => { async function initializePage() {
const identity = await fetchIdentity(); setLoading(true);
if (shouldOpenJoinAgency(identity)) {
openJoinAgencyPage();
return;
}
fetchAgencyProfile(); try {
fetchTeamEntry(); await applyLanguage(currentLang);
fetchUserProfile().then(async (profile) => {
const memberId = profile?.id || profile?.account; const identity = await fetchIdentity();
if (memberId) { setIdentityView(identity);
await fetchStreamingDuration(memberId);
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();
})(); })();

247
h5/hyapp/host-center/style.css
View File

@ -44,6 +44,10 @@ a {
text-decoration: none; text-decoration: none;
} }
[hidden] {
display: none !important;
}
.host-center { .host-center {
position: relative; position: relative;
width: 100%; width: 100%;
@ -53,6 +57,136 @@ a {
background: var(--page-bg); 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 { .hero-bg {
position: absolute; position: absolute;
inset: 0 0 auto; inset: 0 0 auto;
@ -364,6 +498,50 @@ a {
white-space: nowrap; 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 { .chevron {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -581,6 +759,75 @@ a {
font-size: 24px; 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 { .policy-card {
min-height: 184px; min-height: 184px;
padding: 18px 16px 16px; padding: 18px 16px 16px;