diff --git a/h5/hyapp/host-center/index.html b/h5/hyapp/host-center/index.html index 8006d07..0f621eb 100644 --- a/h5/hyapp/host-center/index.html +++ b/h5/hyapp/host-center/index.html @@ -4,10 +4,10 @@ Host Center - + -
+
-
+ + +
Work Time (min)
@@ -66,7 +74,7 @@
-
+
Salary @@ -87,7 +95,7 @@
-
+
+
+ +
loading....
+
- + diff --git a/h5/hyapp/host-center/locales/ar.json b/h5/hyapp/host-center/locales/ar.json index 3912176..9618490 100644 --- a/h5/hyapp/host-center/locales/ar.json +++ b/h5/hyapp/host-center/locales/ar.json @@ -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": "فتح سياسة المضيف", diff --git a/h5/hyapp/host-center/locales/en.json b/h5/hyapp/host-center/locales/en.json index fa3e258..af3ec0c 100644 --- a/h5/hyapp/host-center/locales/en.json +++ b/h5/hyapp/host-center/locales/en.json @@ -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", diff --git a/h5/hyapp/host-center/locales/id.json b/h5/hyapp/host-center/locales/id.json index cabbc97..9cf3e79 100644 --- a/h5/hyapp/host-center/locales/id.json +++ b/h5/hyapp/host-center/locales/id.json @@ -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", diff --git a/h5/hyapp/host-center/locales/tr.json b/h5/hyapp/host-center/locales/tr.json index 5639964..c98ec34 100644 --- a/h5/hyapp/host-center/locales/tr.json +++ b/h5/hyapp/host-center/locales/tr.json @@ -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ç", diff --git a/h5/hyapp/host-center/script.js b/h5/hyapp/host-center/script.js index 1ae2300..980f0a6 100644 --- a/h5/hyapp/host-center/script.js +++ b/h5/hyapp/host-center/script.js @@ -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(); })(); diff --git a/h5/hyapp/host-center/style.css b/h5/hyapp/host-center/style.css index ad78ca0..2024ea3 100644 --- a/h5/hyapp/host-center/style.css +++ b/h5/hyapp/host-center/style.css @@ -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;