236 lines
9.5 KiB
HTML
236 lines
9.5 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-hy-app-code="fami">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
|
||
/>
|
||
<title>Host Center</title>
|
||
<link rel="stylesheet" href="../../../common/theme.css" />
|
||
<link rel="stylesheet" href="../../products/fami/centers/fami.css" />
|
||
<link rel="stylesheet" href="./style.css" />
|
||
</head>
|
||
<body>
|
||
<div class="fami-page host-center" aria-label="Host Center">
|
||
<div class="fami-status-bar" aria-hidden="true">
|
||
<span class="fami-status-time">9:41</span>
|
||
<img
|
||
class="fami-status-icon fami-status-icon--cellular"
|
||
src="../../products/fami/centers/assets/fami/cellular.svg"
|
||
alt=""
|
||
/>
|
||
<img
|
||
class="fami-status-icon fami-status-icon--wifi"
|
||
src="../../products/fami/centers/assets/fami/wifi.svg"
|
||
alt=""
|
||
/>
|
||
<img
|
||
class="fami-status-icon fami-status-icon--battery"
|
||
src="../../products/fami/centers/assets/fami/battery.svg"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
|
||
<nav class="fami-nav">
|
||
<button
|
||
class="fami-nav__back"
|
||
id="backButton"
|
||
type="button"
|
||
aria-label="Back"
|
||
data-i18n-aria="host_center.back"
|
||
>
|
||
<img
|
||
src="../../products/fami/centers/assets/fami/back.svg"
|
||
alt=""
|
||
/>
|
||
</button>
|
||
<h1 class="fami-nav__title" data-i18n="host_center.title">
|
||
Host Center
|
||
</h1>
|
||
<div class="language-switcher">
|
||
<button
|
||
class="fami-nav__language"
|
||
type="button"
|
||
aria-label="Change language"
|
||
aria-expanded="false"
|
||
data-language-toggle
|
||
data-i18n-aria="host_center.change_language"
|
||
>
|
||
<img
|
||
src="../../products/fami/centers/assets/fami/language.svg"
|
||
alt=""
|
||
/>
|
||
</button>
|
||
<div class="language-menu" data-language-menu hidden>
|
||
<button type="button" data-lang-option="en">EN</button>
|
||
<button type="button" data-lang-option="ar">AR</button>
|
||
<button type="button" data-lang-option="tr">TR</button>
|
||
<button type="button" data-lang-option="es">ES</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<main>
|
||
<section class="fami-card fami-profile host-profile">
|
||
<img
|
||
class="fami-profile__avatar is-round"
|
||
id="profileAvatar"
|
||
alt=""
|
||
/>
|
||
<div class="fami-profile__copy">
|
||
<strong class="fami-profile__name" id="profileName"
|
||
>-</strong
|
||
>
|
||
<span class="fami-profile__meta" id="profileUserId"
|
||
>User ID: -</span
|
||
>
|
||
<span class="fami-profile__meta" id="profileAgencyId"
|
||
>Agency ID: -</span
|
||
>
|
||
<span class="fami-profile__note" id="profileJoinTime"
|
||
>Join time: -</span
|
||
>
|
||
</div>
|
||
</section>
|
||
|
||
<button
|
||
class="fami-card fami-contact"
|
||
id="contactCard"
|
||
type="button"
|
||
aria-label="Edit WhatsApp contact"
|
||
data-i18n-aria="contact_card.open"
|
||
>
|
||
<img
|
||
class="fami-contact__icon"
|
||
src="../../products/fami/centers/assets/fami/whatsapp.svg"
|
||
alt=""
|
||
/>
|
||
<span class="fami-contact__copy">
|
||
<strong class="fami-contact__name" id="contactName"
|
||
>-</strong
|
||
>
|
||
<span class="fami-contact__meta" id="contactUserId"
|
||
>User ID: -</span
|
||
>
|
||
</span>
|
||
<img
|
||
class="fami-contact__edit"
|
||
src="../../products/fami/centers/assets/fami/edit.svg"
|
||
alt=""
|
||
/>
|
||
</button>
|
||
|
||
<section class="fami-balance-card host-balance-card">
|
||
<span
|
||
class="fami-balance-card__label"
|
||
data-i18n="fami.gold_coins"
|
||
>Gold Coins :</span
|
||
>
|
||
<div class="fami-balance-card__value">
|
||
<img
|
||
src="../../products/fami/centers/assets/fami/diamond.png"
|
||
alt=""
|
||
/>
|
||
<strong id="goldBalance">0</strong>
|
||
</div>
|
||
<button
|
||
class="fami-balance-card__withdraw"
|
||
id="withdrawButton"
|
||
type="button"
|
||
data-i18n="fami.withdrawal"
|
||
>
|
||
Withdrawal
|
||
</button>
|
||
</section>
|
||
|
||
<div
|
||
class="fami-date-strip host-date-strip"
|
||
id="dateStrip"
|
||
role="group"
|
||
aria-label="Date"
|
||
data-i18n-aria="fami.date"
|
||
></div>
|
||
|
||
<section class="fami-card host-details">
|
||
<h2 data-i18n="fami.data_details">Data Details</h2>
|
||
<div class="host-metric-grid" id="metricGrid"></div>
|
||
</section>
|
||
</main>
|
||
|
||
<div class="fami-home-indicator" aria-hidden="true"></div>
|
||
|
||
<div class="fami-modal" id="contactModal" hidden aria-hidden="true">
|
||
<button
|
||
class="fami-modal__backdrop"
|
||
type="button"
|
||
data-contact-close
|
||
aria-label="Close"
|
||
data-i18n-aria="contact_card.close"
|
||
></button>
|
||
<section
|
||
class="fami-sheet"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="contactModalTitle"
|
||
>
|
||
<div class="fami-sheet__head">
|
||
<h2
|
||
id="contactModalTitle"
|
||
data-i18n="contact_card.sheet_title"
|
||
>
|
||
WhatsApp Contact
|
||
</h2>
|
||
<button
|
||
class="fami-sheet__close"
|
||
type="button"
|
||
data-contact-close
|
||
aria-label="Close"
|
||
data-i18n-aria="contact_card.close"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
<form id="contactForm">
|
||
<label class="fami-field">
|
||
<span data-i18n="contact_card.field_label"
|
||
>WhatsApp phone or link</span
|
||
>
|
||
<input
|
||
id="contactInput"
|
||
type="text"
|
||
autocomplete="off"
|
||
placeholder="+6512345678"
|
||
data-i18n-placeholder="contact_card.placeholder"
|
||
/>
|
||
</label>
|
||
<button
|
||
class="fami-sheet__action"
|
||
id="contactSaveButton"
|
||
type="submit"
|
||
data-i18n="contact_card.save"
|
||
>
|
||
Save
|
||
</button>
|
||
<p
|
||
class="fami-sheet__status"
|
||
id="contactStatus"
|
||
hidden
|
||
></p>
|
||
</form>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="../../packages/core/product-context.js"></script>
|
||
<script src="../../products/fami/product.js"></script>
|
||
<script src="../../../common/api.js?v=fami-20260716-3"></script>
|
||
<script src="../../../common/params.js"></script>
|
||
<script src="../../../common/i18n.js"></script>
|
||
<script src="../../../common/jsbridge.js"></script>
|
||
<script src="../../../common/toast.js"></script>
|
||
<script src="../../products/fami/centers/fami.js"></script>
|
||
<script src="./script.js"></script>
|
||
</body>
|
||
</html>
|