146 lines
7.0 KiB
HTML
146 lines
7.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<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>Salary Bills</title>
|
|
<link rel="stylesheet" href="../agency-center/style.css?v=20260428-2355" />
|
|
<link rel="stylesheet" href="./style.css?v=20260428-2355" />
|
|
</head>
|
|
<body>
|
|
<div class="agency-center hosts-bill-page" aria-label="Salary Bills" data-i18n-aria="page_label" data-loading="true">
|
|
<div class="hero-bg" aria-hidden="true"></div>
|
|
|
|
<header class="status-bar" aria-hidden="true">
|
|
<span class="status-time">9:41</span>
|
|
<span class="status-icons">
|
|
<span class="cellular"><i></i><i></i><i></i><i></i></span>
|
|
<span class="wifi"><i></i><i></i><i></i></span>
|
|
<span class="battery"><i></i></span>
|
|
</span>
|
|
</header>
|
|
|
|
<nav class="title-bar">
|
|
<button class="back-button" type="button" aria-label="Back" data-i18n-aria="back">
|
|
<svg viewBox="0 0 32 32" aria-hidden="true">
|
|
<path d="M20 8 12 16l8 8" />
|
|
</svg>
|
|
</button>
|
|
<h1 data-i18n="title">Salary Bills</h1>
|
|
<div class="language-switcher">
|
|
<button class="language-button" type="button" aria-label="Change language" data-i18n-aria="language_button_aria" aria-expanded="false">EN</button>
|
|
<div class="language-menu" hidden>
|
|
<button type="button" data-lang="en">EN</button>
|
|
<button type="button" data-lang="ar">AR</button>
|
|
<button type="button" data-lang="tr">TR</button>
|
|
<button type="button" data-lang="id">ID</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="content hosts-bill-content">
|
|
<section class="card bill-summary-card">
|
|
<div class="bill-summary-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 32 32">
|
|
<path d="M8 7h16v18H8Z" />
|
|
<path d="M12 12h8M12 17h6M12 22h5" />
|
|
</svg>
|
|
</div>
|
|
<div class="bill-summary-copy">
|
|
<div class="bill-summary-head">
|
|
<span data-i18n="history_team_income">History team income</span>
|
|
<button class="bill-help-button" type="button" aria-label="Open help" data-i18n-aria="open_help">
|
|
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
<circle cx="10" cy="10" r="8" />
|
|
<path d="M10 13.5v.2M8.7 7.8a1.8 1.8 0 0 1 3.2 1.1c0 1.6-1.9 1.7-1.9 3" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="bill-summary-value" id="historyIncome">$0.00</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bill-stat-grid" aria-label="Bill summary" data-i18n-aria="bill_summary">
|
|
<div class="card bill-stat-card">
|
|
<span data-i18n="total_bills">Total bills</span>
|
|
<strong id="totalBills">0</strong>
|
|
</div>
|
|
<div class="card bill-stat-card">
|
|
<span data-i18n="completed_bills">Completed</span>
|
|
<strong id="completedBills">0</strong>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="work-report-head">
|
|
<h2 data-i18n="work_report">Work report</h2>
|
|
</div>
|
|
<section class="bill-list" id="billList" aria-live="polite"></section>
|
|
<div class="bill-list-status" id="listStatus" role="status"></div>
|
|
</main>
|
|
|
|
<div class="daily-modal bill-detail-modal" id="billDetailModal" hidden>
|
|
<div class="daily-backdrop" data-close-detail></div>
|
|
<section class="daily-sheet bill-detail-sheet" role="dialog" aria-modal="true" aria-labelledby="billDetailTitle">
|
|
<div class="daily-sheet-head">
|
|
<h2 id="billDetailTitle" data-i18n="team_member">Team member</h2>
|
|
<button class="daily-close" type="button" aria-label="Close" data-i18n-aria="close" data-close-detail>×</button>
|
|
</div>
|
|
<div class="bill-detail-meta">
|
|
<div>
|
|
<span id="detailBillDate">-</span>
|
|
<strong id="detailBillTotal">$0.00</strong>
|
|
</div>
|
|
<span class="bill-status-badge" id="detailBillStatus">-</span>
|
|
</div>
|
|
<form class="bill-search-form" id="memberSearchForm">
|
|
<div class="bill-search-control">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="m20 20-4.2-4.2M10.8 18a7.2 7.2 0 1 1 0-14.4 7.2 7.2 0 0 1 0 14.4Z" />
|
|
</svg>
|
|
<input id="memberSearchInput" type="text" inputmode="numeric" autocomplete="off" placeholder="Enter host ID" data-i18n-placeholder="enter_host_id" />
|
|
</div>
|
|
<button class="bill-search-button" id="memberSearchButton" type="submit" data-i18n="search">Search</button>
|
|
<button class="bill-cancel-button" id="memberCancelButton" type="button" data-i18n="cancel" hidden>Cancel</button>
|
|
</form>
|
|
<div class="bill-member-list" id="billMemberList"></div>
|
|
<div class="bill-list-status bill-member-status" id="memberStatus" role="status"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="daily-modal bill-help-modal" id="helpModal" hidden>
|
|
<div class="daily-backdrop" data-close-help></div>
|
|
<section class="daily-sheet bill-help-sheet" role="dialog" aria-modal="true" aria-labelledby="helpTitle">
|
|
<div class="daily-sheet-head">
|
|
<h2 id="helpTitle" data-i18n="help">Help</h2>
|
|
<button class="daily-close" type="button" aria-label="Close" data-i18n-aria="close" data-close-help>×</button>
|
|
</div>
|
|
<div class="bill-help-content">
|
|
<p data-i18n="work_report_description">Work report shows each team bill cycle and salary summary.</p>
|
|
<p data-i18n="status_description">Status describes the current settlement state.</p>
|
|
<p data-i18n="status_completed">Completed: salary has been settled.</p>
|
|
<p data-i18n="status_in_progress">In progress: the bill is still running.</p>
|
|
<p data-i18n="status_out_of_account">Out of account: the bill is suspended or unavailable.</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="toast" id="toast" role="status" aria-live="polite" hidden></div>
|
|
<div class="home-indicator" aria-hidden="true"></div>
|
|
|
|
<div class="loading-mask" id="loadingMask" role="status" aria-live="polite" aria-busy="true">
|
|
<div class="runner-stick" aria-hidden="true">
|
|
<span class="runner-head"></span>
|
|
<span class="runner-body"></span>
|
|
<span class="runner-arm runner-arm-front"></span>
|
|
<span class="runner-arm runner-arm-back"></span>
|
|
<span class="runner-leg runner-leg-front"></span>
|
|
<span class="runner-leg runner-leg-back"></span>
|
|
<span class="runner-ground"></span>
|
|
</div>
|
|
<div class="loading-copy">loading....</div>
|
|
</div>
|
|
</div>
|
|
<script src="./script.js?v=20260428-2355" defer></script>
|
|
</body>
|
|
</html>
|