326 lines
13 KiB
HTML
326 lines
13 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>Agency</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 agency-center" aria-label="Agency">
|
||
<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="agency_center.back"
|
||
>
|
||
<img
|
||
src="../../products/fami/centers/assets/fami/back.svg"
|
||
alt=""
|
||
/>
|
||
</button>
|
||
<h1 class="fami-nav__title" data-i18n="fami.agency_title">
|
||
agency
|
||
</h1>
|
||
</nav>
|
||
|
||
<main>
|
||
<section class="fami-card fami-profile agency-profile">
|
||
<img
|
||
class="fami-profile__avatar"
|
||
id="agencyAvatar"
|
||
alt=""
|
||
/>
|
||
<div class="fami-profile__copy">
|
||
<strong class="fami-profile__name" id="agencyName"
|
||
>-</strong
|
||
>
|
||
<span class="fami-profile__meta" id="agencyUserId"
|
||
>User ID: -</span
|
||
>
|
||
<span class="fami-profile__note" id="agencyWelcome"
|
||
>Welcome -</span
|
||
>
|
||
</div>
|
||
</section>
|
||
|
||
<button
|
||
class="fami-card fami-contact agency-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>
|
||
</button>
|
||
|
||
<section class="fami-balance-card agency-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="agency-tabs" role="tablist">
|
||
<button
|
||
class="agency-tab"
|
||
id="goldTab"
|
||
type="button"
|
||
role="tab"
|
||
aria-selected="false"
|
||
aria-disabled="true"
|
||
disabled
|
||
data-type="gold"
|
||
data-i18n="fami.gold"
|
||
>
|
||
Gold
|
||
</button>
|
||
<button
|
||
class="agency-tab is-active"
|
||
id="diamondTab"
|
||
type="button"
|
||
role="tab"
|
||
aria-selected="true"
|
||
data-type="diamond"
|
||
data-i18n="fami.diamond"
|
||
>
|
||
Diamond
|
||
</button>
|
||
</div>
|
||
|
||
<section id="summaryView">
|
||
<div
|
||
class="fami-date-strip agency-date-strip"
|
||
id="dateStrip"
|
||
role="group"
|
||
aria-label="Date"
|
||
data-i18n-aria="fami.date"
|
||
></div>
|
||
<div class="fami-card agency-metrics" id="metricGrid"></div>
|
||
<button
|
||
class="fami-primary-button agency-add-host"
|
||
id="addHostButton"
|
||
type="button"
|
||
>
|
||
<img
|
||
class="fami-primary-button__icon"
|
||
src="../../products/fami/centers/assets/fami/add-circle.svg"
|
||
alt=""
|
||
/>
|
||
<span data-i18n="fami.add_host">Add Host</span>
|
||
</button>
|
||
</section>
|
||
|
||
<section id="hostView" hidden>
|
||
<form class="agency-host-search" id="hostSearchForm">
|
||
<div class="agency-host-search__field">
|
||
<img
|
||
src="../../products/fami/centers/assets/fami/search.svg"
|
||
alt=""
|
||
/>
|
||
<input
|
||
id="hostSearchInput"
|
||
type="text"
|
||
inputmode="numeric"
|
||
autocomplete="off"
|
||
placeholder="Enter Host ID"
|
||
data-i18n-placeholder="agency_center.enter_host_id"
|
||
aria-label="Enter Host ID"
|
||
data-i18n-aria="agency_center.enter_host_id"
|
||
/>
|
||
</div>
|
||
<button type="submit" data-i18n="agency_center.search">
|
||
Search
|
||
</button>
|
||
</form>
|
||
<div class="agency-host-table" id="hostTable"></div>
|
||
</section>
|
||
</main>
|
||
|
||
<div class="fami-home-indicator" aria-hidden="true"></div>
|
||
|
||
<div class="fami-modal" id="inviteModal" hidden aria-hidden="true">
|
||
<button
|
||
class="fami-modal__backdrop"
|
||
type="button"
|
||
data-invite-close
|
||
aria-label="Close"
|
||
data-i18n-aria="agency_center.close"
|
||
></button>
|
||
<section
|
||
class="fami-sheet"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="inviteModalTitle"
|
||
>
|
||
<div class="fami-sheet__head">
|
||
<h2 id="inviteModalTitle" data-i18n="fami.add_host">
|
||
Add Host
|
||
</h2>
|
||
<button
|
||
class="fami-sheet__close"
|
||
type="button"
|
||
data-invite-close
|
||
aria-label="Close"
|
||
data-i18n-aria="agency_center.close"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
<form id="inviteSearchForm">
|
||
<label class="fami-field">
|
||
<span data-i18n="agency_center.enter_host_id"
|
||
>Enter Host ID</span
|
||
>
|
||
<span class="fami-search-control">
|
||
<input
|
||
id="inviteSearchInput"
|
||
type="text"
|
||
inputmode="numeric"
|
||
autocomplete="off"
|
||
placeholder="Enter Host ID"
|
||
data-i18n-placeholder="agency_center.enter_host_id"
|
||
/>
|
||
<button
|
||
id="inviteSearchButton"
|
||
type="submit"
|
||
data-i18n="agency_center.search"
|
||
>
|
||
Search
|
||
</button>
|
||
</span>
|
||
</label>
|
||
</form>
|
||
<p class="fami-sheet__status" id="inviteStatus" hidden></p>
|
||
<div id="inviteResult"></div>
|
||
</section>
|
||
</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>
|