diff --git a/h5/hyapp/host-center/index.html b/h5/hyapp/host-center/index.html index 0f621eb..c645472 100644 --- a/h5/hyapp/host-center/index.html +++ b/h5/hyapp/host-center/index.html @@ -4,7 +4,7 @@ Host Center - +
@@ -126,18 +126,24 @@
-
- + diff --git a/h5/hyapp/host-center/script.js b/h5/hyapp/host-center/script.js index 980f0a6..f1a852e 100644 --- a/h5/hyapp/host-center/script.js +++ b/h5/hyapp/host-center/script.js @@ -214,7 +214,7 @@ if (window.location.protocol === "file:") return fallbackMessages[normalizedLang]; try { - const response = await fetch(`./locales/${normalizedLang}.json?v=20260428-2040`, { cache: "no-store" }); + const response = await fetch(`./locales/${normalizedLang}.json?v=20260428-2045`, { cache: "no-store" }); if (response.ok) return await response.json(); } catch (error) { return fallbackMessages[normalizedLang]; diff --git a/h5/hyapp/host-center/style.css b/h5/hyapp/host-center/style.css index 2024ea3..c0ea34c 100644 --- a/h5/hyapp/host-center/style.css +++ b/h5/hyapp/host-center/style.css @@ -81,103 +81,65 @@ a { display: none; } -.runner-stick { - position: relative; - width: 92px; - height: 82px; +.loading-eagle { + width: 158px; + height: 106px; color: #1ecf70; - filter: drop-shadow(0 8px 14px rgba(30, 207, 112, 0.22)); - animation: runner-bob 0.42s ease-in-out infinite; + filter: drop-shadow(0 10px 18px rgba(30, 207, 112, 0.24)); + animation: eagle-glide 1s ease-in-out infinite; } -.runner-head, -.runner-body, -.runner-arm, -.runner-leg, -.runner-ground { - position: absolute; +.eagle-svg { display: block; + width: 100%; + height: 100%; + overflow: visible; } -.runner-head { - top: 5px; - left: 39px; - width: 18px; - height: 18px; - border: 4px solid currentColor; - border-radius: 50%; +.eagle-shadow { + fill: rgba(30, 207, 112, 0.16); + animation: eagle-shadow 1s ease-in-out infinite; } -.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; +.eagle-fly { + transform-origin: 88px 57px; + animation: eagle-fly 0.58s ease-in-out infinite; } -.runner-arm, -.runner-leg { - left: 47px; - width: 5px; - border-radius: 999px; - background: currentColor; - transform-origin: 50% 2px; +.eagle-wing { + fill: currentColor; + transform-box: fill-box; } -.runner-arm { - top: 31px; - height: 27px; +.eagle-wing-left { + transform-origin: 92% 62%; + animation: eagle-wing-left 0.58s ease-in-out infinite; } -.runner-arm-front { - animation: runner-arm-front 0.42s ease-in-out infinite; +.eagle-wing-right { + transform-origin: 8% 62%; + animation: eagle-wing-right 0.58s ease-in-out infinite; } -.runner-arm-back { - animation: runner-arm-back 0.42s ease-in-out infinite; +.eagle-tail { + fill: #18b85f; } -.runner-leg { - top: 51px; - height: 33px; +.eagle-body, +.eagle-head { + fill: #22cf72; } -.runner-leg-front { - animation: runner-leg-front 0.42s ease-in-out infinite; +.eagle-chest { + fill: #baf8d4; } -.runner-leg-back { - animation: runner-leg-back 0.42s ease-in-out infinite; +.eagle-beak { + fill: #128f50; } -.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; +.eagle-eye { + fill: #07502a; } .loading-copy { @@ -759,72 +721,55 @@ a { font-size: 24px; } -@keyframes runner-bob { +@keyframes eagle-glide { 0%, 100% { transform: translateY(0); } 50% { - transform: translateY(-5px); + transform: translateY(-7px); } } -@keyframes runner-body { +@keyframes eagle-fly { 0%, 100% { - transform: rotate(-7deg); + transform: translateX(-3px) rotate(-2deg); } 50% { - transform: rotate(7deg); + transform: translateX(3px) rotate(2deg); } } -@keyframes runner-arm-front { +@keyframes eagle-wing-left { 0%, 100% { - transform: rotate(62deg); + transform: rotate(12deg) translateY(0); } 50% { - transform: rotate(-58deg); + transform: rotate(-22deg) translateY(9px); } } -@keyframes runner-arm-back { +@keyframes eagle-wing-right { 0%, 100% { - transform: rotate(-58deg); + transform: rotate(-12deg) translateY(0); } 50% { - transform: rotate(62deg); + transform: rotate(22deg) translateY(9px); } } -@keyframes runner-leg-front { +@keyframes eagle-shadow { 0%, 100% { - transform: rotate(-58deg); + opacity: 0.45; + transform: scaleX(0.82); } 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); + opacity: 0.75; + transform: scaleX(1); } }