澶у鎴剁敓鏃ョ壒娆?/title>
<link rel="stylesheet" href="style.css" />
<!-- publish-version: 2026-07-14-ttl30-5e169c04020c4d2fa6e1024cb081d420 -->
</head>
<body>
<main class="page-shell">
<div class="ambient ambient-one"></div>
<div class="ambient ambient-two"></div>
<div class="sparkles" aria-hidden="true">鉁︺€€路銆€鉁с€€銆€鉁︺€€路銆€鉁?/div>
<section class="phone" aria-label="澶у鎴剁敓鏃ョ壒娆婃椿鍕曢爜">
<header class="hero">
<button class="back" aria-label="杩斿洖">鈥?/button>
<div class="balloon balloon-left"><span></span></div>
<div class="balloon balloon-right"><span></span></div>
<h1>澶у鎴?br><span>鐢熸棩鐗规瑠</span></h1>
<button class="rules-btn" id="rulesButton">鐗规瑠瑾槑</button>
</header>
<div class="mode-switch" aria-label="鍘熷瀷鐙€鎱嬪垏鎻?>
<span>闋愯韬唤</span>
<button id="modeToggle" class="active"><b>澶у鎴舵湰浜?/b><i><em></em></i></button>
</div>
<nav class="tabs" aria-label="娲诲嫊鍒嗛爜">
<button id="starsTab" class="selected" aria-selected="true">鏈湀澹芥槦</button>
<button id="benefitsTab" aria-selected="false">鐢熸棩绂忓埄</button>
</nav>
<section class="content stars-panel" id="starsPanel">
<div class="date-simulator" aria-label="妯℃摤鏃ユ湡绡╅伕鍣?>
<span>妯℃摤鏃ユ湡</span>
<label><select id="simulatedMonth"></select><b>鏈?/b></label>
<label><select id="simulatedDay"></select><b>鏃?/b></label>
</div>
<div class="ranking" id="ranking"></div>
</section>
<section class="content benefits-panel" id="benefitsPanel" hidden>
<article class="benefits-profile vip" id="profileCard">
<div class="profile-title"><span>鉁?/span> 鎴戠殑鐢熸棩</div>
<div class="profile-main">
<img src="profile.jpg" alt="鎴戠殑闋儚">
<div class="profile-name" id="profileName"></div>
<div class="profile-birthday"><span>鐢熸棩</span><b id="birthdayText">7鏈?21鏃?/b><button id="editBirthday" aria-label="绶ㄨ集鐢熸棩">鉁?/button></div>
</div>
</article>
<section class="benefits-showcase" aria-label="鐢熸棩绂忓埄鍦栫墖瑾槑">
<div class="showcase-heading"><span>鉁?/span><h2>鐢熸棩绂忓埄</h2><span>鉁?/span></div>
<div class="benefit-thumbnails" id="benefitThumbnails" role="tablist" aria-label="鐢熸棩绂忓埄閬搁爡"></div>
<div class="benefit-stage">
<button class="benefit-arrow previous" id="previousBenefit" aria-label="涓婁竴闋呯鍒?>鈥?/button>
<div id="benefitVisual"></div>
<button class="benefit-arrow next" id="nextBenefit" aria-label="涓嬩竴闋呯鍒?>鈥?/button>
</div>
<div class="benefit-caption"><h3 id="benefitTitle"></h3></div>
</section>
<div class="benefits-heading"><span>鉁?/span><h2>鐢熸棩绂忓埄瑾槑</h2><span>鉁?/span></div>
<div class="benefits-table-wrap">
<table class="benefits-table">
<thead><tr><th>鐢熸棩绂忓埄</th><th>LV.1</th><th>LV.2</th><th>LV.3</th></tr></thead>
<tbody>
<tr><td>鐢熸棩闋儚妗?7d<br>鐢熸棩姘ｆ场*7d<br>鐢熸棩璩囨枡鍗?7d</td><td>鉁?/td><td>鉁?/td><td>鉁?/td></tr>
<tr><td>澹芥槦椐曞埌灏剧噲*7d</td><td>鉁?/td><td>鉁?/td><td>鉁?/td></tr>
<tr class="icon-row"><td>瀹樻柟寤抽粸鍦栨</td><td><small>鐟伴噾铔嬬硶鍦栨*1</small></td><td><small>鐟伴噾铔嬬硶鍦栨*1<br>鑷伕鈮?0钀懡鐭冲湒妯?1</small></td><td><small>鐟伴噾铔嬬硶鍦栨*1<br>鑷伕鈮?0钀懡鐭冲湒妯?1<br>鑷伕鈮?0钀懡鐭冲湒妯?1<br>鑷伕鈮?00钀懡鐭冲湒妯?1</small></td></tr>
<tr><td>灏堝爆鐢熸棩鑳屾櫙*1d</td><td>鉁?/td><td>鉁?/td><td>鉁?/td></tr>
<tr><td>瀹樻柟寤崇敓鏃ユ渻</td><td></td><td></td><td>鉁?/td></tr>
<tr><td>鍏ㄦ湇鐢熸棩绁濈闁嬪睆*1d</td><td></td><td></td><td>鉁?/td></tr>
</tbody>
</table>
</div>
<p class="benefits-note"><b>娉ㄦ剰锛?/b>鐢熸棩瑁濇壆锛堥牠鍍忔銆佹埃娉°€佽硣鏂欏崱銆佸熬鐕堬級鏈冩寜鐓у€嬩汉璩囨枡濉鐨勭敓鏃ワ紝鏂肩暥澶?榛炶嚜鍕曠櫦鏀俱€傚叾浠栫敓鏃ョ鍒╄珛鑱公绠″绯曠硶锛圛D锛?99锛夌櫦鏀撅紝閫炬湡涓嶄簣瑁滅櫦銆?/p>
</section>
</section>
<div class="modal-backdrop" id="editModal" role="presentation" hidden>
<section class="modal" role="dialog" aria-modal="true" aria-labelledby="edit-title">
<div class="modal-icon">鈾?/div><button class="close" id="closeEdit">脳</button>
<h2 id="edit-title">淇敼鐢熸棩鏃ユ湡</h2>
<p class="modal-copy">璜嬬⒑瑾嶆偍鍦ㄧ暥鍓嶉爜闈㈢殑鐢熸棩璩囪▕锛屾瘡鍊嬭嚜鐒跺勾鍍呭彲淇敼涓€娆°€傜暥鍓嶄慨鏀逛笉褰遍熆鍊嬩汉璩囨枡闋佺殑鐢熸棩璩囪▕銆?/p>
<div class="date-fields">
<label>鏈堜唤<select id="monthSelect"></select><span>鏈?/span></label>
<label>鏃ユ湡<select id="daySelect"></select><span>鏃?/span></label>
</div>
<div class="modal-actions">
<button class="cancel" id="cancelEdit">鏆笉淇敼</button>
<button class="confirm" id="saveBirthday">纰鸿獚淇敼</button>
</div>
</section>
</div>
<div class="modal-backdrop" id="rulesModal" role="presentation" hidden>
<section class="modal rules-modal" role="dialog" aria-modal="true" aria-labelledby="rules-title">
<div class="modal-icon">鉁?/div><button class="close" id="closeRules">脳</button>
<h2 id="rules-title">鐗规瑠瑾槑</h2>
<ol class="rules-content">
<li>鐢熸棩鐣跺ぉ闇€淇濇湁澶у鎴惰韩浠斤紝鎵嶅彲闋樺彇鐢熸棩绂忓埄銆傝嫢鐢熸棩鐣跺ぉ鐒″ぇ瀹㈡埗韬唤锛屽墖鐒℃硶闋樺彇銆?/li>
<li>鐢熸棩鏃ユ湡鍙埌鍊嬩汉璩囨枡闋佽嚜琛屼慨鏀癸紝姣忔淇敼闇€鑺辫不1000閼界煶銆傜敓鏃ヨ鎵渻鎸夌収鍊嬩汉璩囨枡濉鐨勭敓鏃ワ紝鏂肩暥澶?榛炶嚜鍕曠櫦鏀俱€傚叾浠栫敓鏃ョ鍒╄珛鑱公绠″绯曠硶锛圛D锛?99锛夌櫦鏀撅紝閫炬湡涓嶄簣瑁滅櫦銆?/li>
<li>姣忎綅澶у鎴舵瘡骞村儏鍙牁鍙?娆＄敓鏃ョ鍒╋紝涓嶅彲澶氭闋樺彇銆?span class="rules-emphasis">鑻ヤ粖骞村凡缍撻牁鍙栭亷鐢熸棩绂忓埄锛屼慨鏀圭敓鏃ヤ笉鑳藉啀娆￠牁鍙栫敓鏃ョ鍒┿€?/span></li>
<li>榛炲湒妯欑鍒╀笉鑳介伕鐣跺墠姝ｅ湪涓婃灦鐨勫湒妯欙紝闇€鍒板畼鏂瑰怀锛圛D锛?99锛夋敹鍦栨锛屼笖鏀剁Ξ蹇冨嫊涓嶇祼绠椼€傚儏闄愮敓鏃ュぇ瀹㈡埗甯宠櫉鏀跺湒妯欙紝涓嶅彲杞夎磮鍏朵粬浜恒€?/li>
</ol>
</section>
</div>
<div class="toast" id="toast" role="status" hidden></div>
</main>
<script>
const stars = [
{ name: "鏋楃煡澶?, date: "7鏈?03鏃?, avatar: "star-1.jpg", crown: true },
{ name: "闄虫槦濡?, date: "7鏈?08鏃?, avatar: "star-2.jpg" },
{ name: "娌堣伩鐧?, date: "7鏈?12鏃?, avatar: "star-3.jpg" },
{ name: "铇囨櫄鏅?, date: "7鏈?18鏃?, avatar: "star-4.jpg" },
{ name: "椤ц█宸?, date: "7鏈?26鏃?, avatar: "star-5.jpg" }
];
const benefitSlides = [
{ title: "鐢熸棩闋儚妗?7d\n鐢熸棩姘ｆ场*7d\n鐢熸棩璩囨枡鍗?7d", description: "", image: "appearance-kit.png" },
{ title: "澹芥槦椐曞埌灏剧噲*7d", description: "", image: "tail-light.png" },
{ title: "瀹樻柟寤抽粸鍦栨", description: "", image: "icon-gifts.png" },
{ title: "灏堝爆鐢熸棩鑳屾櫙*1d", description: "" },
{ title: "瀹樻柟寤崇敓鏃ユ渻", description: "LV.3 澶у鎴跺彲鐛插緱瀹樻柟寤崇敓鏃ユ渻灏堝爆绂亣銆? },
{ title: "鍏ㄦ湇鐢熸棩绁濈闁嬪睆*1d", description: "" }
];
const state = { tab: "stars", simulatedMonth: "7", simulatedDay: "13", benefitIndex: 0, ownerMode: true, birthday: "7鏈?21鏃?, month: "7", day: "21" };
const $ = (id) => document.getElementById(id);
function getDateValue(date) {
const match = date.match(/(\d+)鏈圽s*(\d+)鏃?);
return match ? Number(match[1]) * 100 + Number(match[2]) : 0;
}
function showToast(text) {
const toast = $("toast");
toast.textContent = text;
toast.hidden = false;
window.clearTimeout(showToast.timer);
showToast.timer = window.setTimeout(() => { toast.hidden = true; }, 2200);
}
function renderTabs() {
$("starsTab").classList.toggle("selected", state.tab === "stars");
$("starsTab").setAttribute("aria-selected", state.tab === "stars");
$("benefitsTab").classList.toggle("selected", state.tab === "benefits");
$("benefitsTab").setAttribute("aria-selected", state.tab === "benefits");
$("starsPanel").hidden = state.tab !== "stars";
$("benefitsPanel").hidden = state.tab !== "benefits";
}
function renderStars() {
$("simulatedMonth").value = state.simulatedMonth;
$("simulatedDay").value = state.simulatedDay;
const simulatedDateValue = Number(state.simulatedMonth) * 100 + Number(state.simulatedDay);
const rows = stars
.map((star) => {
const dateValue = getDateValue(star.date);
return { star, dateValue, expired: dateValue < simulatedDateValue };
})
.sort((a, b) => {
if (a.expired !== b.expired) return a.expired ? 1 : -1;
return a.expired ? b.dateValue - a.dateValue : a.dateValue - b.dateValue;
})
.map(({ star, expired }, index) =>
'<article class="star-row ' + (expired ? "expired" : "") + '">'
+ '<div class="rank rank-' + (index + 1) + '">' + (index + 1) + '</div>'
+ '<div class="avatar-wrap">' + (star.crown ? '<span class="crown">鈾?/span>' : '') + '<img src="' + star.avatar + '" alt="' + star.name + '鐨勯牠鍍?></div>'
+ '<div class="identity"><h3>' + star.name + '</h3><p><span>鉁?/span> 鐢熸棩銉? + star.date + '</p></div>'
+ (expired ? '' : '<button class="bless-btn" data-name="' + star.name + '"><span>馃巶</span> 绁濈TA</button>')
+ '</article>').join("");
$("ranking").innerHTML = rows;
document.querySelectorAll(".bless-btn").forEach((button) => {
button.onclick = () => showToast("姝ｅ湪鍓嶅線鑸?" + button.dataset.name + " 鐨勭鑱娾€?);
});
}
function renderProfile() {
$("modeToggle").classList.toggle("active", state.ownerMode);
$("modeToggle").querySelector("b").textContent = state.ownerMode ? "澶у鎴舵湰浜? : "鏅€氳í瀹?;
$("profileCard").className = "benefits-profile " + (state.ownerMode ? "vip" : "locked-profile");
$("profileName").innerHTML = "<h2>瑷辨竻姝?" + (state.ownerMode ? "<b>LV.3</b>" : "") + "</h2>" + (state.ownerMode ? "" : "<p>鏈В閹栧ぇ瀹㈡埗韬唤</p>");
$("birthdayText").textContent = state.birthday;
}
function renderBenefits() {
$("benefitThumbnails").innerHTML = benefitSlides.map((benefit, index) =>
'<button class="' + (index === state.benefitIndex ? "active" : "") + '" role="tab" aria-selected="' + (index === state.benefitIndex) + '" aria-label="' + benefit.title + '" data-index="' + index + '">'
+ (benefit.image ? '<img src="' + benefit.image + '" alt="">' : "<span>鉁?/span>")
+ '</button>').join("");
document.querySelectorAll("#benefitThumbnails button").forEach((button) => {
button.onclick = () => { state.benefitIndex = Number(button.dataset.index); renderBenefits(); };
});
const current = benefitSlides[state.benefitIndex];
$("benefitVisual").innerHTML = current.image ? '<img src="' + current.image + '" alt="' + current.title + '">' : '<div class="benefit-blank"><span>鉁?/span><p>绂忓埄鍦栫墖寰呰鍏?/p></div>';
$("benefitTitle").textContent = current.title;
}
function openEdit() {
showToast("姝ｅ湪鍓嶅線鍊嬩汉璩囨枡绶ㄨ集闋佲€?);
}
function closeEdit() {
$("editModal").hidden = true;
}
function renderAll() {
renderTabs();
renderStars();
renderProfile();
renderBenefits();
}
for (let index = 1; index <= 12; index++) $("monthSelect").insertAdjacentHTML("beforeend", "<option>" + index + "</option>");
for (let index = 1; index <= 31; index++) $("daySelect").insertAdjacentHTML("beforeend", "<option>" + index + "</option>");
for (let index = 1; index <= 12; index++) $("simulatedMonth").insertAdjacentHTML("beforeend", "<option>" + index + "</option>");
for (let index = 1; index <= 31; index++) $("simulatedDay").insertAdjacentHTML("beforeend", "<option>" + index + "</option>");
$("starsTab").onclick = () => { state.tab = "stars"; renderTabs(); };
$("benefitsTab").onclick = () => { state.tab = "benefits"; renderTabs(); };
$("simulatedMonth").onchange = () => { state.simulatedMonth = $("simulatedMonth").value; renderStars(); };
$("simulatedDay").onchange = () => { state.simulatedDay = $("simulatedDay").value; renderStars(); };
$("modeToggle").onclick = () => { state.ownerMode = !state.ownerMode; renderProfile(); };
$("rulesButton").onclick = () => { $("rulesModal").hidden = false; };
$("closeRules").onclick = () => { $("rulesModal").hidden = true; };
$("rulesModal").onclick = (event) => { if (event.target.id === "rulesModal") $("rulesModal").hidden = true; };
$("editBirthday").onclick = openEdit;
$("closeEdit").onclick = closeEdit;
$("cancelEdit").onclick = closeEdit;
$("editModal").onclick = (event) => { if (event.target.id === "editModal") closeEdit(); };
$("saveBirthday").onclick = () => {
state.month = $("monthSelect").value;
state.day = $("daySelect").value;
state.birthday = state.month + "鏈?" + state.day.padStart(2, "0") + "鏃?;
closeEdit();
renderProfile();
showToast("鐢熸棩宸叉洿鏂帮紝鏄庡勾鍙啀娆′慨鏀?);
};
$("previousBenefit").onclick = () => { state.benefitIndex = (state.benefitIndex + benefitSlides.length - 1) % benefitSlides.length; renderBenefits(); };
$("nextBenefit").onclick = () => { state.benefitIndex = (state.benefitIndex + 1) % benefitSlides.length; renderBenefits(); };
renderAll();
</script>
<!--__BP_ANCHORS__-->