268 lines
11 KiB
HTML
268 lines
11 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="cpSpace.pageTitle">Best Friend</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-page"
|
|
id="famiPage"
|
|
data-tab="cp"
|
|
aria-label="Best Friend space"
|
|
data-i18n-aria="cpSpace.pageLabel"
|
|
>
|
|
<section class="fami-stage" id="famiStage">
|
|
<div class="fami-design" id="famiDesign">
|
|
<img
|
|
class="fami-background"
|
|
id="famiBackground"
|
|
src="./fami/assets/layers/bg-cp.png"
|
|
alt=""
|
|
draggable="false"
|
|
/>
|
|
|
|
<section class="fami-status-bar" aria-hidden="true">
|
|
<span class="fami-status-time">9:41</span>
|
|
<img
|
|
class="fami-status-cellular"
|
|
src="./fami/assets/layers/cellular.svg"
|
|
alt=""
|
|
/>
|
|
<img
|
|
class="fami-status-wifi"
|
|
src="./fami/assets/layers/wifi.svg"
|
|
alt=""
|
|
/>
|
|
<img
|
|
class="fami-status-battery"
|
|
src="./fami/assets/layers/battery.svg"
|
|
alt=""
|
|
/>
|
|
</section>
|
|
|
|
<header
|
|
class="fami-nav"
|
|
aria-label="Best Friend navigation"
|
|
data-i18n-aria="cpSpace.navLabel"
|
|
>
|
|
<button
|
|
class="fami-nav-button fami-nav-button--back"
|
|
id="famiBackButton"
|
|
type="button"
|
|
aria-label="Back"
|
|
data-i18n-aria="cpSpace.back"
|
|
>
|
|
<img src="./fami/assets/layers/back.svg" alt="" />
|
|
</button>
|
|
<h1 data-i18n="cpSpace.title">Best Friend</h1>
|
|
<button
|
|
class="fami-nav-button fami-nav-button--help"
|
|
id="famiHelpButton"
|
|
type="button"
|
|
aria-label="Help"
|
|
data-i18n-aria="cpSpace.help"
|
|
>
|
|
<img src="./fami/assets/layers/help.svg" alt="" />
|
|
</button>
|
|
</header>
|
|
|
|
<nav
|
|
class="fami-tabs"
|
|
role="tablist"
|
|
aria-label="Best Friend tabs"
|
|
data-i18n-aria="cpSpace.tabsLabel"
|
|
>
|
|
<img
|
|
class="fami-tab-jewel"
|
|
id="famiTabJewel"
|
|
src="./fami/assets/layers/tab-cp.png"
|
|
alt=""
|
|
draggable="false"
|
|
/>
|
|
<button
|
|
id="famiTabCp"
|
|
type="button"
|
|
role="tab"
|
|
aria-controls="famiContent"
|
|
data-tab="cp"
|
|
>
|
|
<span data-i18n="cpSpace.tabCp">CP</span>
|
|
</button>
|
|
<button
|
|
id="famiTabBrother"
|
|
type="button"
|
|
role="tab"
|
|
aria-controls="famiContent"
|
|
data-tab="brother"
|
|
>
|
|
<span data-i18n="cpSpace.tabBrother">Brother</span>
|
|
</button>
|
|
<button
|
|
id="famiTabSister"
|
|
type="button"
|
|
role="tab"
|
|
aria-controls="famiContent"
|
|
data-tab="sister"
|
|
>
|
|
<span data-i18n="cpSpace.tabSister">Sister</span>
|
|
</button>
|
|
</nav>
|
|
|
|
<section
|
|
class="fami-content"
|
|
id="famiContent"
|
|
role="tabpanel"
|
|
aria-labelledby="famiTabCp"
|
|
aria-live="polite"
|
|
aria-busy="true"
|
|
>
|
|
<div
|
|
class="fami-relation-list"
|
|
id="famiRelationList"
|
|
></div>
|
|
<button
|
|
class="fami-state"
|
|
id="famiStateButton"
|
|
type="button"
|
|
hidden
|
|
></button>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<template id="famiRelationTemplate">
|
|
<article class="fami-relation-card">
|
|
<img
|
|
class="fami-card-skin"
|
|
data-layer="card"
|
|
src="./fami/assets/layers/card-cp.png"
|
|
alt=""
|
|
draggable="false"
|
|
/>
|
|
|
|
<figure class="fami-avatar fami-avatar--left">
|
|
<span class="fami-avatar-photo" data-avatar="me"></span>
|
|
<img
|
|
class="fami-avatar-frame"
|
|
src="./fami/assets/layers/avatar-frame.png"
|
|
alt=""
|
|
draggable="false"
|
|
/>
|
|
</figure>
|
|
|
|
<figure class="fami-avatar fami-avatar--right">
|
|
<span
|
|
class="fami-avatar-photo"
|
|
data-avatar="partner"
|
|
></span>
|
|
<img
|
|
class="fami-avatar-frame"
|
|
src="./fami/assets/layers/avatar-frame.png"
|
|
alt=""
|
|
draggable="false"
|
|
/>
|
|
</figure>
|
|
|
|
<div class="fami-center-art-wrap">
|
|
<img
|
|
class="fami-center-art"
|
|
data-layer="center"
|
|
src="./fami/assets/layers/center-cp.png"
|
|
alt=""
|
|
draggable="false"
|
|
/>
|
|
<strong class="fami-days-value" data-value="days">0</strong>
|
|
<span class="fami-days-unit" data-i18n="cpSpace.daysUnit"
|
|
>Days</span
|
|
>
|
|
</div>
|
|
|
|
<div class="fami-exp-pill">
|
|
<span class="fami-exp-pill-skin fami-exp-pill-skin--cp">
|
|
<img
|
|
src="./fami/assets/layers/pill-cp-left.png"
|
|
alt=""
|
|
/>
|
|
<img
|
|
src="./fami/assets/layers/pill-cp-center.png"
|
|
alt=""
|
|
/>
|
|
<img
|
|
src="./fami/assets/layers/pill-cp-right.png"
|
|
alt=""
|
|
/>
|
|
</span>
|
|
<img
|
|
class="fami-exp-pill-skin fami-exp-pill-skin--brother"
|
|
src="./fami/assets/layers/pill-brother.png"
|
|
alt=""
|
|
/>
|
|
<img
|
|
class="fami-exp-pill-skin fami-exp-pill-skin--sister"
|
|
src="./fami/assets/layers/pill-sister.png"
|
|
alt=""
|
|
/>
|
|
<span data-value="exp-away"></span>
|
|
</div>
|
|
|
|
<section class="fami-progress-block">
|
|
<div class="fami-level-badge fami-level-badge--left">
|
|
<img
|
|
data-layer="level"
|
|
src="./fami/assets/layers/level-cp.png"
|
|
alt=""
|
|
draggable="false"
|
|
/>
|
|
<span data-value="level-left"></span>
|
|
</div>
|
|
<div class="fami-progress-track">
|
|
<span
|
|
class="fami-progress-fill"
|
|
data-value="progress"
|
|
></span>
|
|
<strong
|
|
class="fami-progress-text"
|
|
data-value="progress-text"
|
|
>0/0</strong
|
|
>
|
|
</div>
|
|
<div class="fami-level-badge fami-level-badge--right">
|
|
<img
|
|
data-layer="level"
|
|
src="./fami/assets/layers/level-cp.png"
|
|
alt=""
|
|
draggable="false"
|
|
/>
|
|
<span data-value="level-right"></span>
|
|
</div>
|
|
<p class="fami-time-text" data-value="time"></p>
|
|
</section>
|
|
</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>
|