mirror of
https://github.com/got-feedBack/feedBack.git
synced 2026-07-24 05:41:53 +00:00
99b974a5a1
CodeRabbit follow-up on #936 (the one Major — overlay outside the click root — was verified false: the host mounts every screen.html root inside #plugin-career, ✕-close confirmed working live): - Tabs: aria-selected/aria-controls + role=tabpanel/aria-labelledby. - Book overlay: role=dialog + aria-modal + aria-label; focus moves to the close button on open and returns to the opener on close. - seenBadges(): guard non-object JSON so a corrupt stored value cannot throw on every passport refresh (covered by a new corruption test). - Fresh-session suppression test (badge seen → no re-notification). - Stylelint declaration-empty-line-before nit in .pp-stamp. Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
43 lines
2.5 KiB
HTML
43 lines
2.5 KiB
HTML
<div class="max-w-5xl mx-auto px-4 py-6">
|
|
<div class="flex items-end justify-between flex-wrap gap-3 mb-1">
|
|
<h1 class="text-2xl font-bold text-white">Career</h1>
|
|
<div id="career-stars-summary" class="text-sm text-gray-400"></div>
|
|
</div>
|
|
<div class="career-tabs" role="tablist">
|
|
<button class="career-tab" data-career-tab="venues" role="tab" id="career-tab-btn-venues" aria-controls="career-tab-venues">Venues</button>
|
|
<button class="career-tab" data-career-tab="passports" role="tab" id="career-tab-btn-passports" aria-controls="career-tab-passports">Passports</button>
|
|
</div>
|
|
|
|
<div id="career-tab-venues" role="tabpanel" aria-labelledby="career-tab-btn-venues">
|
|
<p class="text-sm text-gray-400 mb-4">Earn stars by playing songs well — 60% accuracy is a star, 75% two, 85% three. Stars unlock bigger stages, and the crowd plays along with you.</p>
|
|
<div id="career-progress-wrap" class="mb-6">
|
|
<div class="career-bar-track">
|
|
<div id="career-progress-bar" class="career-bar-fill" style="width:0%"></div>
|
|
</div>
|
|
<div id="career-progress-label" class="text-xs text-gray-500 mt-1"></div>
|
|
</div>
|
|
<div id="career-venues" class="career-venues"></div>
|
|
<div class="mt-8">
|
|
<div class="flex items-end justify-between flex-wrap gap-2 mb-2">
|
|
<h2 class="text-lg font-semibold text-white">Your star collection</h2>
|
|
<div id="career-star-summary" class="text-xs text-gray-400"></div>
|
|
</div>
|
|
<div id="career-star-list" class="career-star-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="career-tab-passports" class="hidden" role="tabpanel" aria-labelledby="career-tab-btn-passports">
|
|
<p class="text-sm text-gray-400 mb-4">Commit to an instrument, pick a genre, and stamp your way to its badge — five ★★ songs mint a Bronze. Your passport wall is who you are as a musician.</p>
|
|
<div id="pp-instruments" class="pp-instruments"></div>
|
|
<div id="pp-shelf-wrap" class="mt-5">
|
|
<div id="pp-shelf" class="pp-shelf"></div>
|
|
</div>
|
|
<div id="pp-rack-wrap" class="mt-8">
|
|
<h2 class="text-lg font-semibold text-white mb-1">Explore next</h2>
|
|
<p class="text-xs text-gray-500 mb-3">More genres, whenever you want them — your wall is complete as it is.</p>
|
|
<div id="pp-rack" class="pp-rack"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="pp-overlay" class="pp-overlay hidden"></div>
|