423 lines
19 KiB
HTML
423 lines
19 KiB
HTML
<!doctype html>
|
|
<html lang="en" dir="ltr" data-hy-app-code="fami">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
|
|
/>
|
|
<title data-i18n="fami_week_star.page_title">Weekly Star</title>
|
|
<link rel="icon" href="data:," />
|
|
<link
|
|
rel="preload"
|
|
href="./fami/assets/fonts/source-han-sans-sc-medium-latin.woff2"
|
|
as="font"
|
|
type="font/woff2"
|
|
crossorigin
|
|
/>
|
|
<link rel="stylesheet" href="../../common/theme.css?v=20260716" />
|
|
<link rel="stylesheet" href="./fami/fami.css?v=20260716" />
|
|
</head>
|
|
<body>
|
|
<main
|
|
class="fami-week-star"
|
|
id="famiWeekStar"
|
|
data-tab="history"
|
|
aria-label="Fami Weekly Star activity"
|
|
data-i18n-aria="fami_week_star.page_aria"
|
|
>
|
|
<section class="fami-stage-wrap" id="famiStageWrap">
|
|
<div class="fami-design" id="famiDesign">
|
|
<div class="fami-hero" aria-hidden="true">
|
|
<img
|
|
class="fami-hero-background"
|
|
src="./fami/assets/layers/body-watermark.webp"
|
|
alt=""
|
|
draggable="false"
|
|
/>
|
|
<span class="fami-hero-star">
|
|
<span class="fami-hero-star-core"></span>
|
|
</span>
|
|
<div class="fami-title-plaque">
|
|
<span class="fami-title-gem"></span>
|
|
</div>
|
|
<svg
|
|
class="fami-owl"
|
|
viewBox="0 0 286 286"
|
|
focusable="false"
|
|
>
|
|
<defs>
|
|
<linearGradient
|
|
id="famiOwlGold"
|
|
x1="0"
|
|
y1="0"
|
|
x2="1"
|
|
y2="1"
|
|
>
|
|
<stop offset="0" stop-color="#fff16b" />
|
|
<stop offset="0.48" stop-color="#f6ad25" />
|
|
<stop offset="1" stop-color="#d85d1c" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="famiOwlTeal"
|
|
x1="0"
|
|
y1="0"
|
|
x2="0.8"
|
|
y2="1"
|
|
>
|
|
<stop offset="0" stop-color="#78f6df" />
|
|
<stop offset="0.5" stop-color="#13b7aa" />
|
|
<stop offset="1" stop-color="#006b66" />
|
|
</linearGradient>
|
|
<radialGradient
|
|
id="famiOwlFace"
|
|
cx="0.48"
|
|
cy="0.32"
|
|
>
|
|
<stop offset="0" stop-color="#fffdf3" />
|
|
<stop offset="0.68" stop-color="#fff1d5" />
|
|
<stop offset="1" stop-color="#f5b97d" />
|
|
</radialGradient>
|
|
</defs>
|
|
<path
|
|
d="M99 247c-17 1-25 10-29 23 12-4 24-2 35 7 7-11 7-21-6-30Zm88 0c17 1 25 10 29 23-12-4-24-2-35 7-7-11-7-21 6-30Z"
|
|
fill="#f2a421"
|
|
stroke="#9b4c12"
|
|
stroke-width="6"
|
|
/>
|
|
<path
|
|
d="M82 111C43 103 14 128 12 164c-2 34 20 66 55 74 17 4 29-8 35-28-15-26-19-61-20-99Z"
|
|
fill="url(#famiOwlGold)"
|
|
stroke="#b55b16"
|
|
stroke-width="8"
|
|
/>
|
|
<path
|
|
d="M204 111c39-8 68 17 70 53 2 34-20 66-55 74-17 4-29-8-35-28 15-26 19-61 20-99Z"
|
|
fill="url(#famiOwlGold)"
|
|
stroke="#b55b16"
|
|
stroke-width="8"
|
|
/>
|
|
<path
|
|
d="M69 137c4-32 31-53 73-53 44 0 71 21 76 55l-7 84c-5 36-30 57-68 57-40 0-66-22-70-58l-4-85Z"
|
|
fill="url(#famiOwlTeal)"
|
|
stroke="#d99a21"
|
|
stroke-width="8"
|
|
/>
|
|
<path
|
|
d="M91 166c18 13 36 18 52 18 18 0 36-6 54-20-1 48-16 82-54 92-36-10-51-42-52-90Z"
|
|
fill="#75dfce"
|
|
opacity="0.78"
|
|
/>
|
|
<path
|
|
d="M98 184c12 12 24 18 36 19m-28 16c12 10 24 14 36 14m46-49c-12 12-24 18-36 19m28 16c-12 10-24 14-36 14"
|
|
fill="none"
|
|
stroke="#087f79"
|
|
stroke-linecap="round"
|
|
stroke-width="6"
|
|
opacity="0.58"
|
|
/>
|
|
<path
|
|
d="M58 78c7-34 33-54 66-45 10-18 28-22 42-4 35-9 61 13 65 49 5 43-24 77-84 84-55-1-91-34-89-84Z"
|
|
fill="url(#famiOwlFace)"
|
|
stroke="#d79120"
|
|
stroke-width="8"
|
|
/>
|
|
<path
|
|
d="M75 58c-4-25 10-41 35-45-1 14 5 23 18 29-18-2-36 3-53 16Z"
|
|
fill="#77c934"
|
|
stroke="#377d27"
|
|
stroke-width="5"
|
|
/>
|
|
<path
|
|
d="M89 43c5-24 22-34 45-31-7 13-6 24 3 34-15-7-31-8-48-3Z"
|
|
fill="#f2d638"
|
|
stroke="#b77b17"
|
|
stroke-width="5"
|
|
/>
|
|
<ellipse
|
|
cx="108"
|
|
cy="94"
|
|
rx="40"
|
|
ry="44"
|
|
fill="#fff"
|
|
stroke="#9c5419"
|
|
stroke-width="7"
|
|
transform="rotate(-8 108 94)"
|
|
/>
|
|
<ellipse
|
|
cx="177"
|
|
cy="91"
|
|
rx="40"
|
|
ry="44"
|
|
fill="#fff"
|
|
stroke="#9c5419"
|
|
stroke-width="7"
|
|
transform="rotate(8 177 91)"
|
|
/>
|
|
<circle cx="112" cy="102" r="25" fill="#784415" />
|
|
<circle cx="174" cy="99" r="25" fill="#784415" />
|
|
<circle cx="114" cy="104" r="16" fill="#111" />
|
|
<circle cx="172" cy="101" r="16" fill="#111" />
|
|
<circle cx="105" cy="91" r="7" fill="#fff" />
|
|
<circle cx="163" cy="88" r="7" fill="#fff" />
|
|
<path
|
|
d="M126 126c9-9 25-9 34 0l-17 28-17-28Z"
|
|
fill="#ef5b24"
|
|
stroke="#a93812"
|
|
stroke-width="5"
|
|
/>
|
|
<path
|
|
d="M116 157c17 10 37 10 55-1"
|
|
fill="none"
|
|
stroke="#c67922"
|
|
stroke-linecap="round"
|
|
stroke-width="5"
|
|
/>
|
|
</svg>
|
|
<div class="fami-date-plaque"></div>
|
|
</div>
|
|
|
|
<h1
|
|
class="fami-wordmark"
|
|
data-i18n="fami_week_star.hero_title"
|
|
>
|
|
Weekly star
|
|
</h1>
|
|
<time class="fami-cycle-range" id="famiCycleRange" dir="ltr"
|
|
>--.-- --:-----.-- --:--(utc+3)</time
|
|
>
|
|
<p class="fami-note" data-i18n="fami_week_star.note">
|
|
Note: Send the following three gifts to participate in
|
|
the ranking. Users who rank in the top 3 of the
|
|
leaderboard will receive rewards.
|
|
</p>
|
|
|
|
<section
|
|
class="fami-gifts"
|
|
id="famiGiftList"
|
|
aria-label="Activity gifts"
|
|
data-i18n-aria="fami_week_star.gifts_aria"
|
|
></section>
|
|
|
|
<nav
|
|
class="fami-tabs"
|
|
role="tablist"
|
|
aria-label="Weekly Star sections"
|
|
data-i18n-aria="fami_week_star.tabs_aria"
|
|
>
|
|
<button
|
|
class="fami-tab is-active"
|
|
type="button"
|
|
role="tab"
|
|
id="famiTabHistory"
|
|
aria-controls="famiPanelHistory"
|
|
aria-selected="true"
|
|
data-tab-target="history"
|
|
>
|
|
<img
|
|
class="fami-tab-skin fami-tab-skin--active"
|
|
src="./fami/assets/layers/tab-active.webp"
|
|
alt=""
|
|
/>
|
|
<img
|
|
class="fami-tab-skin fami-tab-skin--inactive"
|
|
src="./fami/assets/layers/tab-inactive.webp"
|
|
alt=""
|
|
/>
|
|
<span data-i18n="fami_week_star.tab_history"
|
|
>Previous Top 3 Records</span
|
|
>
|
|
</button>
|
|
<button
|
|
class="fami-tab"
|
|
type="button"
|
|
role="tab"
|
|
id="famiTabWeekly"
|
|
aria-controls="famiPanelWeekly"
|
|
aria-selected="false"
|
|
data-tab-target="weekly"
|
|
>
|
|
<img
|
|
class="fami-tab-skin fami-tab-skin--active"
|
|
src="./fami/assets/layers/tab-active.webp"
|
|
alt=""
|
|
/>
|
|
<img
|
|
class="fami-tab-skin fami-tab-skin--inactive"
|
|
src="./fami/assets/layers/tab-inactive.webp"
|
|
alt=""
|
|
/>
|
|
<span data-i18n="fami_week_star.tab_weekly"
|
|
>This Week's rank list</span
|
|
>
|
|
</button>
|
|
<button
|
|
class="fami-tab"
|
|
type="button"
|
|
role="tab"
|
|
id="famiTabRewards"
|
|
aria-controls="famiPanelRewards"
|
|
aria-selected="false"
|
|
data-tab-target="rewards"
|
|
>
|
|
<img
|
|
class="fami-tab-skin fami-tab-skin--active"
|
|
src="./fami/assets/layers/tab-active.webp"
|
|
alt=""
|
|
/>
|
|
<img
|
|
class="fami-tab-skin fami-tab-skin--inactive"
|
|
src="./fami/assets/layers/tab-inactive.webp"
|
|
alt=""
|
|
/>
|
|
<span data-i18n="fami_week_star.tab_rewards"
|
|
>Reward Description</span
|
|
>
|
|
</button>
|
|
</nav>
|
|
|
|
<section
|
|
class="fami-panel fami-panel--history"
|
|
id="famiPanelHistory"
|
|
role="tabpanel"
|
|
aria-labelledby="famiTabHistory"
|
|
>
|
|
<div class="fami-history-heading-band">
|
|
<h2 id="famiHistoryRange" dir="ltr">----</h2>
|
|
</div>
|
|
<div
|
|
class="fami-rank-list fami-rank-list--history"
|
|
id="famiHistoryList"
|
|
aria-live="polite"
|
|
></div>
|
|
</section>
|
|
|
|
<section
|
|
class="fami-panel fami-panel--weekly"
|
|
id="famiPanelWeekly"
|
|
role="tabpanel"
|
|
aria-labelledby="famiTabWeekly"
|
|
hidden
|
|
>
|
|
<div
|
|
class="fami-rank-list fami-rank-list--weekly"
|
|
id="famiWeeklyList"
|
|
aria-live="polite"
|
|
></div>
|
|
</section>
|
|
|
|
<section
|
|
class="fami-panel fami-panel--rewards"
|
|
id="famiPanelRewards"
|
|
role="tabpanel"
|
|
aria-labelledby="famiTabRewards"
|
|
hidden
|
|
>
|
|
<img
|
|
class="fami-reward-panel-skin"
|
|
src="./fami/assets/layers/reward-panel.webp"
|
|
alt=""
|
|
draggable="false"
|
|
/>
|
|
<div
|
|
class="fami-reward-groups"
|
|
id="famiRewardGroups"
|
|
aria-live="polite"
|
|
></div>
|
|
</section>
|
|
|
|
<img
|
|
class="fami-watermark"
|
|
src="./fami/assets/layers/body-watermark.webp"
|
|
alt=""
|
|
draggable="false"
|
|
/>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<template id="famiGiftTemplate">
|
|
<article class="fami-gift-card">
|
|
<img
|
|
class="fami-gift-frame"
|
|
src="./fami/assets/layers/gift-frame.webp"
|
|
alt=""
|
|
draggable="false"
|
|
/>
|
|
<span class="fami-gift-media">
|
|
<img alt="" draggable="false" />
|
|
<span
|
|
class="fami-media-placeholder"
|
|
aria-hidden="true"
|
|
></span>
|
|
</span>
|
|
<span class="fami-visually-hidden" data-gift-name></span>
|
|
</article>
|
|
</template>
|
|
|
|
<template id="famiRankTemplate">
|
|
<article class="fami-rank-row">
|
|
<span class="fami-rank-position">
|
|
<img class="fami-rank-medal" alt="" draggable="false" />
|
|
<strong class="fami-rank-number"></strong>
|
|
</span>
|
|
<span class="fami-rank-avatar">
|
|
<img alt="" draggable="false" />
|
|
<span class="fami-avatar-placeholder"></span>
|
|
</span>
|
|
<strong class="fami-rank-name"></strong>
|
|
<span class="fami-rank-score" dir="ltr"></span>
|
|
</article>
|
|
</template>
|
|
|
|
<template id="famiRewardGroupTemplate">
|
|
<section class="fami-reward-group">
|
|
<div class="fami-reward-heading">
|
|
<img
|
|
src="./fami/assets/layers/reward-heading.webp"
|
|
alt=""
|
|
draggable="false"
|
|
/>
|
|
<h2></h2>
|
|
</div>
|
|
<div class="fami-reward-items"></div>
|
|
</section>
|
|
</template>
|
|
|
|
<template id="famiRewardItemTemplate">
|
|
<article class="fami-reward-item">
|
|
<span class="fami-reward-card">
|
|
<img
|
|
class="fami-reward-frame"
|
|
src="./fami/assets/layers/gift-frame.webp"
|
|
alt=""
|
|
draggable="false"
|
|
/>
|
|
<img
|
|
class="fami-reward-glow"
|
|
src="./fami/assets/layers/gift-glow.webp"
|
|
alt=""
|
|
draggable="false"
|
|
/>
|
|
<span class="fami-reward-media">
|
|
<img alt="" draggable="false" />
|
|
<span
|
|
class="fami-media-placeholder"
|
|
aria-hidden="true"
|
|
></span>
|
|
</span>
|
|
</span>
|
|
<strong class="fami-reward-label"></strong>
|
|
</article>
|
|
</template>
|
|
|
|
<script src="./fami/product.js?v=20260716"></script>
|
|
<script src="../../common/params.js?v=20260716"></script>
|
|
<script src="../../common/i18n.js?v=20260716"></script>
|
|
<script src="../../common/api.js?v=20260716"></script>
|
|
<script src="../../common/jsbridge.js?v=20260716"></script>
|
|
<script src="../../common/toast.js?v=20260716"></script>
|
|
<script src="./fami/fami.js?v=20260716"></script>
|
|
</body>
|
|
</html>
|