huwaa 的 rank

common/locales/ar.json

@@ -776,6 +776,7 @@
     "fami_level.next_prefix": "تحتاج للمستوى التالي",
     "fami_level.experience_points": "نقاط خبرة",
     "fami_level.how_to_upgrade": "كيف ترتقي؟",
+    "fami_level.send_gift": "إرسال هدية",
     "fami_level.receive_gift": "تلقي هدية",
     "fami_level.buy_car": "شراء سيارة",
     "fami_level.buy_avatar_frame": "شراء إطار الصورة",
@@ -797,5 +798,7 @@
     "fami_rank.loading": "جارٍ التحميل",
     "fami_rank.empty": "لا توجد بيانات تصنيف بعد",
     "fami_rank.network_error": "تعذر تحميل التصنيف. حاول مرة أخرى.",
-    "fami_rank.unknown": "غير معروف"
+    "fami_rank.unknown": "غير معروف",
+    "huwaa_rank.page_title": "تصنيف هوا",
+    "huwaa_rank.game": "اللعبة"
 }

common/locales/en.json

@@ -782,6 +782,7 @@
     "fami_level.next_prefix": "To the next level need",
     "fami_level.experience_points": "experience points",
     "fami_level.how_to_upgrade": "How to upgrade?",
+    "fami_level.send_gift": "Send a Gift",
     "fami_level.receive_gift": "Receive a Gift",
     "fami_level.buy_car": "Buy a car",
     "fami_level.buy_avatar_frame": "Buy Avatar Frame",
@@ -803,5 +804,7 @@
     "fami_rank.loading": "Loading",
     "fami_rank.empty": "No ranking data yet",
     "fami_rank.network_error": "Unable to load the ranking. Please try again.",
-    "fami_rank.unknown": "Unknown"
+    "fami_rank.unknown": "Unknown",
+    "huwaa_rank.page_title": "Huwaa Ranking",
+    "huwaa_rank.game": "Game"
 }

common/locales/es.json

@@ -776,6 +776,7 @@
     "fami_level.next_prefix": "Para el siguiente nivel necesitas",
     "fami_level.experience_points": "puntos de experiencia",
     "fami_level.how_to_upgrade": "¿Cómo subir de nivel?",
+    "fami_level.send_gift": "Envía un regalo",
     "fami_level.receive_gift": "Recibe un regalo",
     "fami_level.buy_car": "Compra un vehículo",
     "fami_level.buy_avatar_frame": "Compra un marco de avatar",
@@ -797,5 +798,7 @@
     "fami_rank.loading": "Cargando",
     "fami_rank.empty": "Aún no hay datos de clasificación",
     "fami_rank.network_error": "No se pudo cargar la clasificación. Inténtalo de nuevo.",
-    "fami_rank.unknown": "Desconocido"
+    "fami_rank.unknown": "Desconocido",
+    "huwaa_rank.page_title": "Clasificación Huwaa",
+    "huwaa_rank.game": "Juego"
 }

common/locales/tr.json

@@ -743,6 +743,7 @@
     "fami_level.next_prefix": "Sonraki seviye için",
     "fami_level.experience_points": "deneyim puanı",
     "fami_level.how_to_upgrade": "Nasıl yükseltilir?",
+    "fami_level.send_gift": "Hediye gönder",
     "fami_level.receive_gift": "Hediye al",
     "fami_level.buy_car": "Araç satın al",
     "fami_level.buy_avatar_frame": "Avatar çerçevesi satın al",
@@ -764,5 +765,7 @@
     "fami_rank.loading": "Yükleniyor",
     "fami_rank.empty": "Henüz sıralama verisi yok",
     "fami_rank.network_error": "Sıralama yüklenemedi. Lütfen tekrar deneyin.",
-    "fami_rank.unknown": "Bilinmiyor"
+    "fami_rank.unknown": "Bilinmiyor",
+    "huwaa_rank.page_title": "Huwaa Sıralaması",
+    "huwaa_rank.game": "Oyun"
 }

level/fami.html

@@ -19,7 +19,7 @@
                 --header-bg: rgba(13, 11, 32, 0.94);
                 --row-bg: rgba(255, 255, 255, 0.04);
                 --accent: #ffad3d;
-                --atmosphere: url('./fami-assets/wealth-bg.png');
+                --atmosphere: url('./fami-assets/wealth-bg.webp');
             }
 
             html,
@@ -54,7 +54,8 @@
             .level-page {
                 position: relative;
                 isolation: isolate;
-                width: min(100%, 375px);
+                /* 页面宽度跟随 WebView，375px 只作为设计基准，不在大屏设备两侧留下空白。 */
+                width: 100%;
                 min-height: 100vh;
                 overflow: visible;
                 padding-bottom: calc(38px + env(safe-area-inset-bottom));
@@ -66,21 +67,21 @@
                 --level-bg: #0d0b20;
                 --header-bg: rgba(13, 11, 32, 0.94);
                 --accent: #ffad3d;
-                --atmosphere: url('./fami-assets/wealth-bg.png');
+                --atmosphere: url('./fami-assets/wealth-bg.webp');
             }
 
             .level-page[data-theme='charm'] {
                 --level-bg: #201a16;
                 --header-bg: rgba(32, 26, 22, 0.94);
                 --accent: #f718e9;
-                --atmosphere: url('./fami-assets/charm-bg.png');
+                --atmosphere: url('./fami-assets/charm-bg.webp');
             }
 
             .level-page[data-theme='game'] {
                 --level-bg: #08140c;
                 --header-bg: rgba(8, 20, 12, 0.94);
                 --accent: #11ef67;
-                --atmosphere: url('./fami-assets/game-bg.png');
+                --atmosphere: url('./fami-assets/game-bg.webp');
             }
 
             .atmosphere {
@@ -243,8 +244,9 @@
             .current-copy {
                 position: absolute;
                 top: 19px;
+                right: 34px;
                 left: 125px;
-                width: 184px;
+                width: auto;
             }
 
             .current-heading {
@@ -287,7 +289,7 @@
                 position: absolute;
                 top: 30px;
                 left: 0;
-                width: 184px;
+                width: 100%;
                 height: 6px;
                 overflow: hidden;
                 border-radius: 32px;
@@ -306,7 +308,7 @@
                 position: absolute;
                 top: 46px;
                 left: 0;
-                width: 184px;
+                width: 100%;
                 font-size: 11px;
                 font-weight: 600;
                 line-height: 14px;
@@ -463,7 +465,8 @@
 
             .method-name,
             .method-rate {
-                font-size: 14px;
+                /* 三列升级方式在 320px 小屏仍需保留列间留白，375px 起恢复设计稿字号。 */
+                font-size: clamp(12px, 3.733vw, 14px);
                 line-height: 18px;
                 white-space: nowrap;
             }
@@ -491,11 +494,6 @@
                     width: calc(100% - 143px);
                 }
 
-                .progress,
-                .next-level {
-                    width: 100%;
-                }
-
                 .row-badge {
                     right: 68px;
                 }
@@ -568,13 +566,13 @@
                 <img
                     id="cardBackground"
                     class="current-card__bg"
-                    src="./fami-assets/wealth-card.png"
+                    src="./fami-assets/wealth-card.webp"
                     alt=""
                 />
                 <img
                     id="avatar"
                     class="avatar"
-                    src="./fami-assets/avatar.png"
+                    src="./fami-assets/avatar.webp"
                     alt=""
                 />
                 <img id="avatarFrame" class="avatar-frame" alt="" />
@@ -588,7 +586,7 @@
                         >
                             <img
                                 id="currentBadgeImage"
-                                src="./fami-assets/level-badge.png"
+                                src="./fami-assets/level-badge.webp"
                                 alt=""
                             />
                             <span id="badgeLevel">81</span>
@@ -640,9 +638,9 @@
                         <img src="./fami-assets/upgrade-gift.svg" alt="" />
                         <div
                             class="method-name"
-                            data-i18n="fami_level.receive_gift"
+                            data-i18n="fami_level.send_gift"
                         >
-                            Receive a Gift
+                            Send a Gift
                         </div>
                         <div
                             class="method-rate"
@@ -761,13 +759,13 @@
                     '100',
                 ];
                 var CARD_ASSETS = {
-                    wealth: './fami-assets/wealth-card.png',
+                    wealth: './fami-assets/wealth-card.webp',
-                    charm: './fami-assets/charm-card-overlay.png',
+                    charm: './fami-assets/charm-card-overlay.webp',
-                    game: './fami-assets/game-card-overlay.png',
+                    game: './fami-assets/game-card-overlay.webp',
                 };
-                var LOCAL_AVATAR = './fami-assets/avatar.png';
+                var LOCAL_AVATAR = './fami-assets/avatar.webp';
-                var LOCAL_BADGE = './fami-assets/level-badge.png';
+                var LOCAL_BADGE = './fami-assets/level-badge.webp';
-                var LOCAL_FRAME = './fami-assets/level-ring.png';
+                var LOCAL_FRAME = './fami-assets/level-ring.webp';
                 var page = document.getElementById('levelPage');
                 var header = document.getElementById('stickyHeader');
                 var timeline = document.getElementById('timeline');

rank/assets/huwaa/row-charm.svg

@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 355 63" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 2585" d="M345.584 0.5C346.127 3.02517 348.51 7.61259 354.5 9.375V54.0391C352.956 54.2004 350.869 54.7646 349.09 56.002C347.2 57.3167 345.662 59.393 345.513 62.5H9.9082C9.57898 61.034 8.78221 59.0476 7.34277 57.3623C5.83075 55.5921 3.60569 54.152 0.5 54.0117V9.47656C3.14532 9.24455 7.86964 7.1799 9.87207 0.5H345.584Z" fill="var(--fill-0, #211333)" stroke="url(#paint0_linear_0_8)"/>
+<defs>
+<linearGradient id="paint0_linear_0_8" x1="177.5" y1="0" x2="177.5" y2="63" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAE242"/>
+<stop offset="1" stop-color="#FFBE69"/>
+</linearGradient>
+</defs>
+</svg>

rank/assets/huwaa/row-game.svg

@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 355 63" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 2585" d="M345.584 0.5C346.127 3.02517 348.51 7.61259 354.5 9.375V54.0391C352.956 54.2004 350.869 54.7646 349.09 56.002C347.2 57.3167 345.662 59.393 345.513 62.5H9.9082C9.57898 61.034 8.78221 59.0476 7.34277 57.3623C5.83075 55.5921 3.60569 54.152 0.5 54.0117V9.47656C3.14532 9.24455 7.86964 7.1799 9.87207 0.5H345.584Z" fill="var(--fill-0, #372000)" stroke="url(#paint0_linear_0_5)"/>
+<defs>
+<linearGradient id="paint0_linear_0_5" x1="177.5" y1="0" x2="177.5" y2="63" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAE242"/>
+<stop offset="1" stop-color="#FFBE69"/>
+</linearGradient>
+</defs>
+</svg>

rank/assets/huwaa/row-room.svg

@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 355 63" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 2585" d="M345.584 0.5C346.127 3.02517 348.51 7.61259 354.5 9.375V54.0391C352.956 54.2004 350.869 54.7646 349.09 56.002C347.2 57.3167 345.662 59.393 345.513 62.5H9.9082C9.57898 61.034 8.78221 59.0476 7.34277 57.3623C5.83075 55.5921 3.60569 54.152 0.5 54.0117V9.47656C3.14532 9.24455 7.86964 7.1799 9.87207 0.5H345.584Z" fill="var(--fill-0, #001A31)" stroke="url(#paint0_linear_0_43)"/>
+<defs>
+<linearGradient id="paint0_linear_0_43" x1="177.5" y1="0" x2="177.5" y2="63" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAE242"/>
+<stop offset="1" stop-color="#FFBE69"/>
+</linearGradient>
+</defs>
+</svg>

rank/assets/huwaa/row-wealth.svg

@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 355 63" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 2585" d="M345.584 0.5C346.127 3.02517 348.51 7.61259 354.5 9.375V54.0391C352.956 54.2004 350.869 54.7646 349.09 56.002C347.2 57.3167 345.662 59.393 345.513 62.5H9.9082C9.57898 61.034 8.78221 59.0476 7.34277 57.3623C5.83075 55.5921 3.60569 54.152 0.5 54.0117V9.47656C3.14532 9.24455 7.86964 7.1799 9.87207 0.5H345.584Z" fill="var(--fill-0, #372000)" stroke="url(#paint0_linear_0_11)"/>
+<defs>
+<linearGradient id="paint0_linear_0_11" x1="177.5" y1="0" x2="177.5" y2="63" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAE242"/>
+<stop offset="1" stop-color="#FFBE69"/>
+</linearGradient>
+</defs>
+</svg>