diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..e291365
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/.gitignore b/.gitignore
index 849ddff..5994828 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
 dist/
+.DS_Store
diff --git a/h5/activity/week-star/index.html b/h5/activity/week-star/index.html
new file mode 100644
index 0000000..370aadf
--- /dev/null
+++ b/h5/activity/week-star/index.html
@@ -0,0 +1,807 @@
+<!doctype html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
+  <title>yumi周榜</title>
+  <style>
+    :root {
+      --page-width: 375px;
+      --green-850: #0b3209;
+      --green-700: #17532c;
+      --cream-300: #f8efb3;
+      --orange-700: #c56714;
+      --hero-image: url("../../assets/yumi-week-star/hero-en.png");
+      --title-frame-image: url("../../assets/yumi-week-star/title-frame.png");
+      --subtitle-frame-image: url("../../assets/yumi-week-star/subtitle-frame.png");
+      --gift-frame-image: url("../../assets/yumi-week-star/gift-frame.png");
+      --tab-default-image: url("../../assets/yumi-week-star/tab-default.png");
+      --tab-active-image: url("../../assets/yumi-week-star/tab-active.png");
+      --rank-top1-image: url("../../assets/yumi-week-star/rank-top1.png");
+      --rank-top2-image: url("../../assets/yumi-week-star/rank-top2.png");
+      --rank-top3-image: url("../../assets/yumi-week-star/rank-top3.png");
+      --reward-card-frame-image: url("../../assets/yumi-week-star/reward-card-frame.png");
+      --reward-board-image: url("../../assets/yumi-week-star/reward-board.png");
+      --bottom-glow-image: url("../../assets/yumi-week-star/bottom-glow.png");
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    html,
+    body {
+      margin: 0;
+      min-height: 100%;
+      background: #f0f0f0;
+      font-family:
+        -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial,
+        sans-serif;
+    }
+
+    body {
+      color: #ffffff;
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+
+    [x-cloak] {
+      display: none !important;
+    }
+
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    .page {
+      width: min(100%, var(--page-width));
+      min-height: 100vh;
+      margin: 0 auto;
+      background: linear-gradient(180deg, #163a07 0%, #123708 38%, #0d2f08 100%);
+      overflow: hidden;
+    }
+
+    .hero {
+      position: relative;
+      padding-top: env(safe-area-inset-top);
+      background: linear-gradient(180deg, rgba(255, 219, 118, 0.04), rgba(255, 219, 118, 0));
+    }
+
+    .hero-visual {
+      position: relative;
+      aspect-ratio: 1080 / 1027;
+      background: center top / cover no-repeat var(--hero-image);
+    }
+
+    .hero-visual::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 84px;
+      background: linear-gradient(180deg, rgba(16, 55, 8, 0) 0%, rgba(12, 46, 7, 0.78) 100%);
+    }
+
+    .hero-floor,
+    .hero-ribbon,
+    .hero-crown {
+      display: none;
+    }
+
+    .hero-title {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 88px;
+      display: flex;
+      justify-content: center;
+    }
+
+    .hero-period {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: min(72%, 230px);
+      max-width: calc(100% - 44px);
+      aspect-ratio: 665 / 88;
+      padding: 0 24px 6px;
+      background: center / 100% 100% no-repeat var(--subtitle-frame-image);
+      color: #f8e29b;
+      font-size: 13px;
+      line-height: 1.1;
+      font-weight: 700;
+      text-align: center;
+    }
+
+    .top-copy {
+      padding: 18px 22px 0;
+      color: var(--cream-300);
+      font-size: 15px;
+      line-height: 1.14;
+    }
+
+    .gift-grid {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 12px;
+      padding: 14px 15px 0;
+    }
+
+    .gift-card {
+      position: relative;
+      aspect-ratio: 250 / 269;
+      padding: 14px 12px 24px;
+      background: center / 100% 100% no-repeat var(--gift-frame-image);
+    }
+
+    .gift-inner {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .gift-inner img {
+      display: block;
+      width: 74%;
+      height: 74%;
+      object-fit: contain;
+    }
+
+    .gift-empty {
+      opacity: 0.3;
+    }
+
+    .tab-row {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 8px;
+      padding: 14px 15px 0;
+    }
+
+    .tab-button {
+      position: relative;
+      width: 100%;
+      aspect-ratio: 336 / 126;
+      border: 0;
+      appearance: none;
+      background: none;
+    }
+
+    .tab-button::before {
+      content: "";
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      width: 100%;
+      height: 100%;
+      transform: translate(-50%, -50%);
+      background: center / 100% 100% no-repeat var(--tab-default-image);
+    }
+
+    .tab-button.active::before {
+      background-image: var(--tab-active-image);
+      width: 103.4%;
+      height: 109%;
+    }
+
+    .tab-button span {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      padding: 0 12px;
+      color: #fff8ef;
+      font-size: 11px;
+      line-height: 1.04;
+      font-weight: 700;
+      text-align: center;
+    }
+
+    .tab-button.active span {
+      color: #c15f17;
+    }
+
+    .period-strip {
+      padding: 18px 18px 16px;
+      color: #fff8c6;
+      text-align: center;
+      font-size: 18px;
+      line-height: 1.1;
+      font-weight: 700;
+    }
+
+    .rank-stage {
+      position: relative;
+      min-height: 264px;
+      background: linear-gradient(180deg, rgba(14, 53, 11, 0.1), rgba(11, 48, 8, 0));
+    }
+
+    .rank-stage::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 40px;
+      background:
+        center bottom / 100% 100% no-repeat var(--bottom-glow-image),
+        linear-gradient(180deg, rgba(11, 48, 8, 0) 0%, rgba(11, 48, 8, 0.78) 100%);
+    }
+
+    .rank-list {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    .rank-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      min-height: 49px;
+      padding: 5px 16px 5px 10px;
+    }
+
+    .rank-row.light {
+      background: var(--green-700);
+    }
+
+    .rank-row.dark {
+      background: var(--green-850);
+    }
+
+    .rank-row.placeholder {
+      color: transparent;
+    }
+
+    .rank-mark {
+      width: 30px;
+      flex: 0 0 30px;
+      text-align: center;
+    }
+
+    .rank-badge-icon {
+      display: block;
+      width: 26px;
+      height: auto;
+      margin: 0 auto;
+    }
+
+    .rank-mark .plain {
+      display: inline-block;
+      color: #ffffff;
+      font-size: 14px;
+      line-height: 1;
+      font-weight: 700;
+    }
+
+    .rank-avatar {
+      width: 39px;
+      height: 39px;
+      flex: 0 0 39px;
+      border-radius: 999px;
+      overflow: hidden;
+      background: #d9d9d9;
+    }
+
+    .rank-avatar img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .rank-name {
+      flex: 1;
+      min-width: 0;
+      color: #ffffff;
+      font-size: 15px;
+      line-height: 1;
+      font-weight: 700;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .rank-score {
+      flex: 0 0 auto;
+      color: #ffffff;
+      font-size: 15px;
+      line-height: 1;
+      font-weight: 700;
+    }
+
+    .empty-message {
+      padding: 22px 20px 58px;
+      text-align: center;
+      color: var(--cream-300);
+      font-size: 13px;
+      line-height: 1.5;
+    }
+
+    .reward-stage {
+      padding: 22px 12px 10px;
+    }
+
+    .reward-board {
+      position: relative;
+      padding: 15px 12px 18px;
+      background: center / 100% 100% no-repeat var(--reward-board-image);
+    }
+
+    .reward-stage::after {
+      content: "";
+      display: block;
+      height: 36px;
+      background: center top / 100% 100% no-repeat var(--bottom-glow-image);
+    }
+
+    .reward-tier+.reward-tier {
+      margin-top: 14px;
+    }
+
+    .reward-head {
+      width: 268px;
+      max-width: 100%;
+      aspect-ratio: 760 / 130;
+      margin: 0 auto 12px;
+      position: relative;
+      padding: 0 32px;
+      background: center / 100% 100% no-repeat var(--title-frame-image);
+      color: #ffe789;
+    }
+
+    .reward-head-text {
+      position: absolute;
+      left: 32px;
+      right: 32px;
+      top: 57%;
+      transform: translateY(-37%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      font-size: 15px;
+      line-height: 1;
+      font-weight: 800;
+    }
+
+    .reward-grid {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 10px;
+    }
+
+    .reward-card {
+      text-align: center;
+    }
+
+    .reward-thumb {
+      aspect-ratio: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 12px;
+      background: center / 100% 100% no-repeat var(--reward-card-frame-image);
+      overflow: hidden;
+    }
+
+    .reward-thumb img {
+      width: 78%;
+      height: 78%;
+      object-fit: contain;
+      display: block;
+    }
+
+    .reward-label {
+      display: block;
+      margin-top: 7px;
+      color: var(--orange-700);
+      font-size: 10px;
+      line-height: 1.16;
+      font-weight: 700;
+      word-break: break-word;
+    }
+
+    .reward-empty {
+      padding: 18px 14px 10px;
+      text-align: center;
+      color: var(--orange-700);
+      font-size: 12px;
+      line-height: 1.5;
+    }
+
+    @media (max-width: 360px) {
+      .hero-period {
+        width: min(74%, 220px);
+        font-size: 12px;
+      }
+
+      .top-copy {
+        padding-left: 20px;
+        padding-right: 20px;
+      }
+
+      .gift-grid,
+      .tab-row,
+      .reward-stage {
+        padding-left: 12px;
+        padding-right: 12px;
+      }
+
+      .tab-button {
+        font-size: 10px;
+      }
+    }
+  </style>
+  <script>
+    window.__H5_ROUTE_PATH__ = "/activity/week-star";
+  </script>
+  <script src="../../assets/yumi-route-entry.js"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.9/dist/cdn.min.js"></script>
+</head>
+
+<body>
+  <div class="page" x-data="weekStarPage()" x-init="init()" x-cloak>
+    <section class="hero">
+      <div class="hero-visual">
+        <div class="hero-ribbon left" aria-hidden="true"></div>
+        <div class="hero-ribbon right" aria-hidden="true"></div>
+        <div class="hero-floor" aria-hidden="true"></div>
+        <div class="hero-crown" aria-hidden="true">
+          <span class="wing left"></span>
+          <span class="wing right"></span>
+          <span class="core"></span>
+          <span class="gem left"></span>
+          <span class="gem right"></span>
+        </div>
+        <div class="hero-title">
+          <h1 class="sr-only">WEEKLY STAR</h1>
+          <div class="hero-period" x-text="heroPeriodText()"></div>
+        </div>
+      </div>
+
+      <div class="top-copy">
+        Note: Send the following three gifts to participate in the ranking. Users who
+        rank in the top 3 of the leaderboard will receive rewards.
+      </div>
+
+      <div class="gift-grid">
+        <template x-for="gift in giftSlots()" :key="gift.key">
+          <div class="gift-card" :class="{ 'gift-empty': gift.placeholder }" :title="giftTitle(gift)">
+            <div class="gift-inner">
+              <template x-if="!gift.placeholder">
+                <img :src="giftCover(gift)" :alt="giftTitle(gift)" />
+              </template>
+            </div>
+          </div>
+        </template>
+      </div>
+
+      <nav class="tab-row">
+        <button type="button" class="tab-button" :class="{ active: activeTab === 'last' }" @click="activeTab = 'last'">
+          <span>Previous Top 3 Records</span>
+        </button>
+        <button type="button" class="tab-button" :class="{ active: activeTab === 'current' }"
+          @click="activeTab = 'current'">
+          <span>This Week's rank list</span>
+        </button>
+        <button type="button" class="tab-button" :class="{ active: activeTab === 'reward' }"
+          @click="activeTab = 'reward'">
+          <span>Reward Description</span>
+        </button>
+      </nav>
+    </section>
+
+    <template x-if="activeTab !== 'reward'">
+      <div class="period-strip" x-text="activePeriodText()"></div>
+    </template>
+
+    <section class="rank-stage" x-show="activeTab !== 'reward'">
+      <ul class="rank-list">
+        <template x-for="(item, index) in displayRows()" :key="item.key">
+          <li class="rank-row" :class="rowClass(index, item)">
+            <div class="rank-mark">
+              <template x-if="isTopRank(item.rank)">
+                <img class="rank-badge-icon" :src="topRankIcon(item.rank)" :alt="'Top ' + item.rank" />
+              </template>
+              <template x-if="!isTopRank(item.rank)">
+                <span class="plain" x-text="item.rank"></span>
+              </template>
+            </div>
+            <div class="rank-avatar">
+              <template x-if="!item.placeholder">
+                <img :src="avatarOf(item)" :alt="item.userNickname || 'avatar'" />
+              </template>
+            </div>
+            <div class="rank-name" x-text="rowName(item)"></div>
+            <div class="rank-score" x-text="rowScore(item)"></div>
+          </li>
+        </template>
+      </ul>
+
+      <div class="empty-message" x-show="!hasRealRows() && !error">
+        No ranking data yet. Send the selected gifts and the leaderboard will update
+        here.
+      </div>
+      <div class="empty-message" x-show="error" x-text="error"></div>
+    </section>
+
+    <section class="reward-stage" x-show="activeTab === 'reward'">
+      <div class="reward-board">
+        <template x-for="reward in rewardGroups()" :key="reward.key">
+          <div class="reward-tier">
+            <div class="reward-head">
+              <span class="reward-head-text" x-text="'Top' + reward.rank"></span>
+            </div>
+            <div class="reward-grid" x-show="reward.items.length">
+              <template x-for="item in reward.items" :key="item.key">
+                <div class="reward-card">
+                  <div class="reward-thumb">
+                    <img :src="rewardCover(item)" :alt="rewardLabel(item)" />
+                  </div>
+                  <span class="reward-label" x-text="rewardLabel(item)"></span>
+                </div>
+              </template>
+            </div>
+            <div class="reward-empty" x-show="!reward.items.length">
+              Reward group is ready. Detailed items are not available yet.
+            </div>
+          </div>
+        </template>
+      </div>
+    </section>
+  </div>
+
+    <script>
+      const DEFAULT_AVATAR = "../../assets/defaultAvatar-CdxWBK1k-1776148661448.png";
+      const FALLBACK_IMAGE = "../../assets/coin-lz3Tp0nX-1776148661447.png";
+      const DEFAULT_WEEK_STAR_API_BASE = "https://jvapi.haiyihy.com/";
+      const TOP_RANK_ICONS = {
+        1: "../../assets/yumi-week-star/rank-top1.png",
+      2: "../../assets/yumi-week-star/rank-top2.png",
+        3: "../../assets/yumi-week-star/rank-top3.png",
+      };
+
+      function normalizeBaseURL(base) {
+        const value = String(base || "").trim();
+        if (!value) {
+          return DEFAULT_WEEK_STAR_API_BASE;
+        }
+        return value.endsWith("/") ? value : value + "/";
+      }
+
+      function resolveWeekStarAPIBase() {
+        const params = new URLSearchParams(window.location.search);
+        const queryBase = params.get("apiBase");
+        if (queryBase) {
+          return normalizeBaseURL(queryBase);
+        }
+        if (typeof window.__WEEK_STAR_API_BASE__ === "string") {
+          return normalizeBaseURL(window.__WEEK_STAR_API_BASE__);
+        }
+        return normalizeBaseURL(DEFAULT_WEEK_STAR_API_BASE);
+      }
+
+      function weekStarPage() {
+        return {
+        activeTab: "last",
+        data: normalizePageData({}),
+        error: "",
+
+        activePeriodText() {
+          if (this.activeTab === "last") {
+            return this.data.lastPeriodText || this.data.currentPeriodText || "--";
+          }
+          return this.data.currentPeriodText || this.data.lastPeriodText || "--";
+        },
+
+        avatarOf(item) {
+          return item && item.userAvatar ? item.userAvatar : DEFAULT_AVATAR;
+        },
+
+        buildRows(list, minSize, maxSize) {
+          const realRows = (Array.isArray(list) ? list : []).slice(0, maxSize).map((item, index) => {
+            return {
+              ...item,
+              key: "row-" + (item.userId || "u") + "-" + (item.rank || index + 1),
+              placeholder: false,
+              rank: Number(item.rank || index + 1),
+            };
+          });
+          const targetSize = Math.max(realRows.length, minSize);
+          while (realRows.length < targetSize) {
+            realRows.push({
+              key: "placeholder-" + this.activeTab + "-" + realRows.length,
+              placeholder: true,
+              rank: realRows.length + 1,
+            });
+          }
+          return realRows;
+        },
+
+        displayRows() {
+          if (this.activeTab === "current") {
+            return this.buildRows(this.data.thisWeekTop10, 5, 10);
+          }
+          return this.buildRows(this.data.lastWeekTop3, 4, 4);
+        },
+
+          async fetchPage() {
+            this.error = "";
+            try {
+              const url = new URL("/go/public/h5/week-star/page", resolveWeekStarAPIBase());
+              const sysOrigin = new URLSearchParams(window.location.search).get("sysOrigin");
+              if (sysOrigin) {
+                url.searchParams.set("sysOrigin", sysOrigin);
+              }
+            const response = await fetch(url.toString(), {
+              headers: { Accept: "application/json" },
+            });
+            if (!response.ok) {
+              throw new Error("Please retry later.");
+            }
+            const contentType = response.headers.get("content-type") || "";
+            if (!contentType.includes("application/json")) {
+              this.data = normalizePageData({});
+              return;
+            }
+            const json = await response.json();
+            const body = json && (json.body || json.data || json);
+            this.data = normalizePageData(body);
+          } catch (error) {
+            this.error =
+              error && error.name === "TypeError"
+                ? ""
+                : error && error.message
+                  ? error.message
+                  : "Please retry later.";
+            this.data = normalizePageData({});
+          }
+        },
+
+        giftCover(gift) {
+          return gift && gift.giftPhoto ? gift.giftPhoto : FALLBACK_IMAGE;
+        },
+
+        giftSlots() {
+          const slots = (this.data.qualifyingGifts || []).slice(0, 3).map((gift, index) => {
+            return {
+              ...gift,
+              key: "gift-" + (gift.giftId || index),
+              placeholder: false,
+            };
+          });
+          while (slots.length < 3) {
+            slots.push({
+              key: "gift-placeholder-" + slots.length,
+              placeholder: true,
+            });
+          }
+          return slots;
+        },
+
+        giftTitle(gift) {
+          if (!gift || gift.placeholder) {
+            return "Gift";
+          }
+          return gift.giftName || "Gift " + gift.giftId;
+        },
+
+        hasRealRows() {
+          return this.displayRows().some((item) => !item.placeholder);
+        },
+
+        heroPeriodText() {
+          return this.data.currentPeriodText || this.data.lastPeriodText || "--";
+        },
+
+        init() {
+          this.fetchPage();
+        },
+
+        isTopRank(rank) {
+          return Number(rank) >= 1 && Number(rank) <= 3;
+        },
+
+        topRankIcon(rank) {
+          return TOP_RANK_ICONS[Number(rank)] || TOP_RANK_ICONS[3];
+        },
+
+        rewardCover(item) {
+          return item && item.cover ? item.cover : FALLBACK_IMAGE;
+        },
+
+        rewardGroups() {
+          const sourceMap = new Map();
+          (this.data.rewardPreview || []).forEach((group) => {
+            sourceMap.set(Number(group.rank), group || {});
+          });
+          return [1, 2, 3].map((rank) => {
+            const group = sourceMap.get(rank) || {};
+            const items = Array.isArray(group.items) ? group.items : [];
+            return {
+              ...group,
+              key: "reward-group-" + rank,
+              rank,
+              items: items.map((item, index) => ({
+                ...item,
+                key:
+                  "reward-item-" +
+                  rank +
+                  "-" +
+                  (item.id || item.rewardId || item.name || item.content || index),
+              })),
+            };
+          });
+        },
+
+        rewardLabel(item) {
+          const name = item && (item.name || item.content || item.type) ? item.name || item.content || item.type : "Reward";
+          const quantity = Number(item && item.quantity ? item.quantity : 0);
+          return quantity > 0 ? name + " (" + quantity + " days)" : name;
+        },
+
+        rowClass(index, item) {
+          const stripe = index % 2 === 0 ? "light" : "dark";
+          return item.placeholder ? stripe + " placeholder" : stripe;
+        },
+
+        rowName(item) {
+          if (!item || item.placeholder) {
+            return "";
+          }
+          return item.userNickname || ("User " + item.userId);
+        },
+
+        rowScore(item) {
+          if (!item || item.placeholder) {
+            return "";
+          }
+          return toScoreText(item.scoreGold);
+        },
+      };
+    }
+
+    function normalizePageData(raw) {
+      const value = raw || {};
+      return {
+        activityStatus: value.activityStatus || "DISABLED",
+        countdownMillis: Number(value.countdownMillis || 0),
+        currentPeriodText: value.currentPeriodText || "",
+        lastPeriodText: value.lastPeriodText || "",
+        lastWeekTop3: Array.isArray(value.lastWeekTop3) ? value.lastWeekTop3 : [],
+        qualifyingGifts: Array.isArray(value.qualifyingGifts) ? value.qualifyingGifts : [],
+        rewardPreview: Array.isArray(value.rewardPreview) ? value.rewardPreview : [],
+        thisWeekTop10: Array.isArray(value.thisWeekTop10) ? value.thisWeekTop10 : [],
+      };
+    }
+
+    function toScoreText(value) {
+      const number = Number(value || 0);
+      if (!Number.isFinite(number)) {
+        return "0";
+      }
+      return String(Math.max(0, Math.trunc(number)));
+    }
+  </script>
+</body>
+
+</html>
diff --git a/h5/assets/yumi-week-star/README.md b/h5/assets/yumi-week-star/README.md
new file mode 100644
index 0000000..64c969f
--- /dev/null
+++ b/h5/assets/yumi-week-star/README.md
@@ -0,0 +1,17 @@
+Exported Figma assets for the week-star H5 live here.
+
+Current file map:
+- `hero-en.png`
+- `title-frame.png`
+- `subtitle-frame.png`
+- `gift-frame.png`
+- `tab-default.png`
+- `tab-active.png`
+- `rank-top1.png`
+- `rank-top2.png`
+- `rank-top3.png`
+- `reward-card-frame.png`
+- `reward-board.png`
+- `bottom-glow.png`
+
+The page still uses live user, gift, and reward images from the API plus local shared placeholders.
diff --git a/h5/assets/yumi-week-star/bottom-glow.png b/h5/assets/yumi-week-star/bottom-glow.png
new file mode 100644
index 0000000..8c3af36
Binary files /dev/null and b/h5/assets/yumi-week-star/bottom-glow.png differ
diff --git a/h5/assets/yumi-week-star/gift-frame.png b/h5/assets/yumi-week-star/gift-frame.png
new file mode 100644
index 0000000..dedaf9a
Binary files /dev/null and b/h5/assets/yumi-week-star/gift-frame.png differ
diff --git a/h5/assets/yumi-week-star/hero-en.png b/h5/assets/yumi-week-star/hero-en.png
new file mode 100644
index 0000000..7c29a77
Binary files /dev/null and b/h5/assets/yumi-week-star/hero-en.png differ
diff --git a/h5/assets/yumi-week-star/rank-top1.png b/h5/assets/yumi-week-star/rank-top1.png
new file mode 100644
index 0000000..bbc077b
Binary files /dev/null and b/h5/assets/yumi-week-star/rank-top1.png differ
diff --git a/h5/assets/yumi-week-star/rank-top2.png b/h5/assets/yumi-week-star/rank-top2.png
new file mode 100644
index 0000000..7e5d127
Binary files /dev/null and b/h5/assets/yumi-week-star/rank-top2.png differ
diff --git a/h5/assets/yumi-week-star/rank-top3.png b/h5/assets/yumi-week-star/rank-top3.png
new file mode 100644
index 0000000..9dab651
Binary files /dev/null and b/h5/assets/yumi-week-star/rank-top3.png differ
diff --git a/h5/assets/yumi-week-star/reward-board.png b/h5/assets/yumi-week-star/reward-board.png
new file mode 100644
index 0000000..7a81742
Binary files /dev/null and b/h5/assets/yumi-week-star/reward-board.png differ
diff --git a/h5/assets/yumi-week-star/reward-card-frame.png b/h5/assets/yumi-week-star/reward-card-frame.png
new file mode 100644
index 0000000..cdb27e7
Binary files /dev/null and b/h5/assets/yumi-week-star/reward-card-frame.png differ
diff --git a/h5/assets/yumi-week-star/subtitle-frame.png b/h5/assets/yumi-week-star/subtitle-frame.png
new file mode 100644
index 0000000..56fb630
Binary files /dev/null and b/h5/assets/yumi-week-star/subtitle-frame.png differ
diff --git a/h5/assets/yumi-week-star/tab-active.png b/h5/assets/yumi-week-star/tab-active.png
new file mode 100644
index 0000000..d083b46
Binary files /dev/null and b/h5/assets/yumi-week-star/tab-active.png differ
diff --git a/h5/assets/yumi-week-star/tab-default.png b/h5/assets/yumi-week-star/tab-default.png
new file mode 100644
index 0000000..bcb540c
Binary files /dev/null and b/h5/assets/yumi-week-star/tab-default.png differ
diff --git a/h5/assets/yumi-week-star/title-frame.png b/h5/assets/yumi-week-star/title-frame.png
new file mode 100644
index 0000000..b550fb8
Binary files /dev/null and b/h5/assets/yumi-week-star/title-frame.png differ
