383 lines
16 KiB
HTML
383 lines
16 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
|
||
/>
|
||
<meta name="theme-color" content="#000000" />
|
||
<title>VIP</title>
|
||
<link rel="stylesheet" href="../common/theme.css" />
|
||
<link rel="stylesheet" href="./fami.css" />
|
||
</head>
|
||
<body>
|
||
<div class="fami-vip-mount" id="famiVipMount">
|
||
<main
|
||
class="fami-vip"
|
||
id="famiVipPage"
|
||
data-testid="fami-vip-page"
|
||
data-page-state="loading"
|
||
aria-busy="true"
|
||
>
|
||
<div class="fami-vip__scroll" id="pageScroll">
|
||
<img
|
||
class="fami-vip__top-background"
|
||
src="./assets/fami/layers/bg-top.png"
|
||
alt=""
|
||
aria-hidden="true"
|
||
data-figma-node="3639:15064"
|
||
/>
|
||
|
||
<div
|
||
class="fami-vip__status-space"
|
||
aria-hidden="true"
|
||
></div>
|
||
|
||
<div
|
||
class="fami-vip__sticky-navigation"
|
||
id="stickyNavigation"
|
||
data-testid="vip-sticky-navigation"
|
||
>
|
||
<header class="fami-vip__header">
|
||
<button
|
||
class="fami-vip__nav-button fami-vip__back"
|
||
id="backButton"
|
||
type="button"
|
||
aria-label="Back"
|
||
data-i18n-aria="fami_vip.back"
|
||
data-testid="vip-back"
|
||
>
|
||
<img
|
||
src="./assets/fami/layers/nav-back.png"
|
||
alt=""
|
||
aria-hidden="true"
|
||
data-figma-node="3639:15096"
|
||
/>
|
||
</button>
|
||
<img
|
||
class="fami-vip__wordmark"
|
||
src="./assets/fami/layers/wordmark.png"
|
||
alt="VIP"
|
||
data-figma-node="3639:15099"
|
||
/>
|
||
<button
|
||
class="fami-vip__nav-button fami-vip__settings"
|
||
id="settingsButton"
|
||
type="button"
|
||
aria-label="VIP settings"
|
||
data-i18n-aria="fami_vip.settings"
|
||
data-testid="vip-settings"
|
||
>
|
||
<img
|
||
src="./assets/fami/layers/nav-settings.png"
|
||
alt=""
|
||
aria-hidden="true"
|
||
data-figma-node="3639:15103"
|
||
/>
|
||
</button>
|
||
<button
|
||
class="fami-vip__nav-button fami-vip__help"
|
||
id="helpButton"
|
||
type="button"
|
||
aria-label="VIP help"
|
||
data-i18n-aria="fami_vip.help"
|
||
data-testid="vip-help"
|
||
>
|
||
<img
|
||
src="./assets/fami/layers/nav-help.png"
|
||
alt=""
|
||
aria-hidden="true"
|
||
data-figma-node="3639:15100"
|
||
/>
|
||
</button>
|
||
</header>
|
||
|
||
<nav
|
||
class="fami-vip__levels"
|
||
id="levelTabs"
|
||
aria-label="VIP levels"
|
||
data-i18n-aria="fami_vip.levels"
|
||
data-testid="vip-level-tabs"
|
||
></nav>
|
||
</div>
|
||
|
||
<div class="fami-vip__hero" aria-hidden="true">
|
||
<img
|
||
class="fami-vip__hero-layer"
|
||
src="./assets/fami/layers/hero-base.png"
|
||
alt=""
|
||
data-figma-node="3639:15074"
|
||
/>
|
||
<img
|
||
class="fami-vip__hero-layer"
|
||
src="./assets/fami/layers/hero-glow.png"
|
||
alt=""
|
||
data-figma-node="3639:15075"
|
||
/>
|
||
</div>
|
||
|
||
<section class="fami-vip__section fami-vip__outfit-section">
|
||
<h1 class="fami-vip__section-title">
|
||
<img
|
||
class="fami-vip__wreath"
|
||
src="./assets/fami/layers/section-wreath.png"
|
||
alt=""
|
||
aria-hidden="true"
|
||
data-figma-node="3639:15118"
|
||
/>
|
||
<span id="outfitTitle">Exclusive Outfit(0/0)</span>
|
||
<img
|
||
class="fami-vip__wreath fami-vip__wreath--right"
|
||
src="./assets/fami/layers/section-wreath.png"
|
||
alt=""
|
||
aria-hidden="true"
|
||
/>
|
||
</h1>
|
||
<div
|
||
class="fami-vip__outfit-viewport"
|
||
id="outfitViewport"
|
||
data-testid="vip-outfits"
|
||
>
|
||
<div
|
||
class="fami-vip__outfit-list"
|
||
id="outfitList"
|
||
></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section
|
||
class="fami-vip__section fami-vip__privilege-section"
|
||
>
|
||
<h2 class="fami-vip__section-title">
|
||
<img
|
||
class="fami-vip__wreath"
|
||
src="./assets/fami/layers/section-wreath.png"
|
||
alt=""
|
||
aria-hidden="true"
|
||
/>
|
||
<span id="privilegeTitle">VIP Privileges(0/0)</span>
|
||
<img
|
||
class="fami-vip__wreath fami-vip__wreath--right"
|
||
src="./assets/fami/layers/section-wreath.png"
|
||
alt=""
|
||
aria-hidden="true"
|
||
/>
|
||
</h2>
|
||
<div
|
||
class="fami-vip__privilege-grid"
|
||
id="privilegeGrid"
|
||
data-testid="vip-privileges"
|
||
></div>
|
||
</section>
|
||
|
||
<div
|
||
class="fami-vip__content-spacer"
|
||
aria-hidden="true"
|
||
></div>
|
||
</div>
|
||
|
||
<section
|
||
class="fami-vip__bottom-bar"
|
||
id="bottomBar"
|
||
aria-label="VIP purchase"
|
||
data-i18n-aria="fami_vip.purchase_region"
|
||
data-testid="vip-bottom-bar"
|
||
>
|
||
<div class="fami-vip__price" id="priceState">
|
||
<img
|
||
src="./assets/fami/layers/coin.png"
|
||
alt=""
|
||
aria-hidden="true"
|
||
data-figma-node="3639:15466"
|
||
/>
|
||
<span id="priceText">--</span>
|
||
</div>
|
||
<div class="fami-vip__active-state" id="activeState" hidden>
|
||
<strong id="activeLevelText"></strong>
|
||
<span id="expiryText"></span>
|
||
</div>
|
||
<button
|
||
class="fami-vip__cta"
|
||
id="purchaseButton"
|
||
type="button"
|
||
disabled
|
||
data-testid="vip-purchase"
|
||
>
|
||
<img
|
||
src="./assets/fami/layers/cta-skin.png"
|
||
alt=""
|
||
aria-hidden="true"
|
||
data-figma-node="3639:15461"
|
||
/>
|
||
<span id="purchaseText" data-i18n="fami_vip.loading"
|
||
>Loading...</span
|
||
>
|
||
</button>
|
||
</section>
|
||
|
||
<div class="fami-vip__load-layer" id="loadLayer" role="status">
|
||
<div class="fami-vip__spinner" aria-hidden="true"></div>
|
||
<p id="loadMessage" data-i18n="fami_vip.loading">
|
||
Loading...
|
||
</p>
|
||
<button
|
||
class="fami-vip__retry"
|
||
id="retryButton"
|
||
type="button"
|
||
data-i18n="fami_vip.retry"
|
||
hidden
|
||
>
|
||
Retry
|
||
</button>
|
||
</div>
|
||
|
||
<div class="fami-vip__modal" id="detailModal" hidden>
|
||
<button
|
||
class="fami-vip__modal-backdrop"
|
||
type="button"
|
||
data-modal-close="detailModal"
|
||
aria-label="Close"
|
||
data-i18n-aria="fami_vip.close"
|
||
></button>
|
||
<section
|
||
class="fami-vip__dialog"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
>
|
||
<button
|
||
class="fami-vip__dialog-close"
|
||
type="button"
|
||
data-modal-close="detailModal"
|
||
aria-label="Close"
|
||
data-i18n-aria="fami_vip.close"
|
||
>
|
||
×
|
||
</button>
|
||
<div
|
||
class="fami-vip__dialog-icon"
|
||
id="detailIcon"
|
||
></div>
|
||
<h2 id="detailTitle"></h2>
|
||
<p id="detailDescription"></p>
|
||
<span
|
||
class="fami-vip__detail-state"
|
||
id="detailState"
|
||
></span>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="fami-vip__modal" id="helpModal" hidden>
|
||
<button
|
||
class="fami-vip__modal-backdrop"
|
||
type="button"
|
||
data-modal-close="helpModal"
|
||
aria-label="Close"
|
||
data-i18n-aria="fami_vip.close"
|
||
></button>
|
||
<section
|
||
class="fami-vip__dialog"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
>
|
||
<button
|
||
class="fami-vip__dialog-close"
|
||
type="button"
|
||
data-modal-close="helpModal"
|
||
aria-label="Close"
|
||
data-i18n-aria="fami_vip.close"
|
||
>
|
||
×
|
||
</button>
|
||
<h2 data-i18n="fami_vip.help_title">VIP Help</h2>
|
||
<p data-i18n="fami_vip.help_body">
|
||
Benefits and purchase availability are supplied by
|
||
the VIP service for the selected level.
|
||
</p>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="fami-vip__modal" id="settingsModal" hidden>
|
||
<button
|
||
class="fami-vip__modal-backdrop"
|
||
type="button"
|
||
data-modal-close="settingsModal"
|
||
aria-label="Close"
|
||
data-i18n-aria="fami_vip.close"
|
||
></button>
|
||
<section
|
||
class="fami-vip__dialog fami-vip__settings-dialog"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
>
|
||
<button
|
||
class="fami-vip__dialog-close"
|
||
type="button"
|
||
data-modal-close="settingsModal"
|
||
aria-label="Close"
|
||
data-i18n-aria="fami_vip.close"
|
||
>
|
||
×
|
||
</button>
|
||
<h2 data-i18n="fami_vip.settings_title">
|
||
VIP Settings
|
||
</h2>
|
||
<label class="fami-vip__setting-row">
|
||
<span data-i18n="fami_vip.room_entry_notice"
|
||
>Room entry notice</span
|
||
>
|
||
<input id="roomEntrySetting" type="checkbox" />
|
||
<i aria-hidden="true"></i>
|
||
</label>
|
||
<label class="fami-vip__setting-row">
|
||
<span data-i18n="fami_vip.online_notice"
|
||
>Online global notice</span
|
||
>
|
||
<input id="onlineNoticeSetting" type="checkbox" />
|
||
<i aria-hidden="true"></i>
|
||
</label>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="fami-vip__modal" id="mediaModal" hidden>
|
||
<button
|
||
class="fami-vip__modal-backdrop"
|
||
type="button"
|
||
data-modal-close="mediaModal"
|
||
aria-label="Close"
|
||
data-i18n-aria="fami_vip.close"
|
||
></button>
|
||
<section
|
||
class="fami-vip__dialog fami-vip__media-dialog"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
>
|
||
<button
|
||
class="fami-vip__dialog-close"
|
||
type="button"
|
||
data-modal-close="mediaModal"
|
||
aria-label="Close"
|
||
data-i18n-aria="fami_vip.close"
|
||
>
|
||
×
|
||
</button>
|
||
<div
|
||
class="fami-vip__media-stage"
|
||
id="mediaStage"
|
||
></div>
|
||
<h2 id="mediaTitle"></h2>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<script src="../common/api.js"></script>
|
||
<script src="../common/params.js"></script>
|
||
<script src="../common/jsbridge.js"></script>
|
||
<script src="../common/toast.js"></script>
|
||
<script src="../common/effect-player.js"></script>
|
||
<script src="../common/i18n.js"></script>
|
||
<script src="./fami.js"></script>
|
||
</body>
|
||
</html>
|