126 lines
5.6 KiB
HTML
126 lines
5.6 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>Stream Center</title>
|
|
<link rel="stylesheet" href="./style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="host-center" aria-label="Stream Center" data-i18n-aria="page_label">
|
|
<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">Stream Center</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">
|
|
<section class="card profile-card">
|
|
<div class="avatar-shell">
|
|
<img class="avatar-image" id="profileAvatar" alt="" hidden />
|
|
<svg class="avatar-fallback" id="profileAvatarFallback" viewBox="0 0 72 72" role="img" aria-label="Oscar avatar">
|
|
<defs>
|
|
<linearGradient id="avatarBg" x1="12" y1="8" x2="60" y2="64">
|
|
<stop stop-color="#5AF6E4" />
|
|
<stop offset="1" stop-color="#D9FFF5" />
|
|
</linearGradient>
|
|
</defs>
|
|
<circle cx="36" cy="36" r="35" fill="url(#avatarBg)" />
|
|
<path d="M22 30 20 18l10 7M50 30l2-12-10 7" fill="#101820" />
|
|
<path d="M20 31c3-9 28-9 32 0 4 10-3 21-16 21S16 41 20 31Z" fill="#F7FBF7" />
|
|
<circle cx="29" cy="36" r="4" fill="#101820" />
|
|
<circle cx="46" cy="36" r="4" fill="#101820" />
|
|
<circle cx="25" cy="41" r="5" fill="#F0B64A" opacity=".9" />
|
|
<path d="M35 42h3l-1.5 2Z" fill="#101820" />
|
|
<path d="M36 45c-2 2-5 3-8 2M38 45c2 2 5 3 8 2" fill="none" stroke="#101820" stroke-width="2" stroke-linecap="round" />
|
|
</svg>
|
|
</div>
|
|
<div class="profile-copy">
|
|
<div class="name" id="profileName">Oscar</div>
|
|
<div class="meta" id="profileUid" data-i18n="uid">UID: 1234567890</div>
|
|
<button class="agency" type="button">
|
|
<span data-i18n="agency">Agency: Bilibili(101013)</span>
|
|
<span class="chevron">›</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card metrics-card">
|
|
<div class="metric">
|
|
<div class="label" data-i18n-html="streaming_duration">Streaming Duration<br />(Minutes)</div>
|
|
<div class="value" id="streamingDuration">0</div>
|
|
</div>
|
|
<div class="vertical-line" aria-hidden="true"></div>
|
|
<div class="metric gift-metric">
|
|
<div class="label" data-i18n="target">Target</div>
|
|
<button class="gift-value" type="button" aria-live="polite">
|
|
<span class="amount-text" id="nextTargetValue">-</span>
|
|
<span class="chevron">›</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card income-card">
|
|
<div class="income-head">
|
|
<div class="income-title">
|
|
<span data-i18n="my_income">My Income</span>
|
|
<svg viewBox="0 0 20 20" aria-hidden="true">
|
|
<circle cx="10" cy="10" r="8" />
|
|
<path d="M10 9v5M10 6.3v.2" />
|
|
</svg>
|
|
</div>
|
|
<a class="cash-link" href="../withdraw-exchange/index.html" aria-label="Open withdraw and exchange page" data-i18n-aria="open_withdraw_exchange">
|
|
<span data-i18n="withdraw_exchange">Withdraw/Exchange</span>
|
|
<span class="chevron">›</span>
|
|
</a>
|
|
</div>
|
|
<a class="income-value" href="../withdraw-exchange/index.html" aria-label="Open withdraw and exchange page" data-i18n-aria="open_withdraw_exchange">
|
|
<span class="income-currency" aria-hidden="true">$</span>
|
|
<span class="amount-text" id="currentSalary">0.00</span>
|
|
<span class="chevron">›</span>
|
|
</a>
|
|
</section>
|
|
|
|
<section class="card policy-entry-card">
|
|
<a class="policy-entry-link" id="anchorPolicyLink" href="./policy.html" aria-label="Open anchor policy" data-i18n-aria="open_anchor_policy">
|
|
<span class="policy-entry-left">
|
|
<svg viewBox="0 0 28 28" aria-hidden="true">
|
|
<path d="M8 5h10l3 3v15H8Z" />
|
|
<path d="M18 5v5h4M11 14h7M11 18h6" />
|
|
</svg>
|
|
<span data-i18n="anchor_policy">Anchor Policy</span>
|
|
</span>
|
|
<span class="chevron">›</span>
|
|
</a>
|
|
</section>
|
|
</main>
|
|
|
|
<div class="home-indicator" aria-hidden="true"></div>
|
|
</div>
|
|
<script src="./script.js" defer></script>
|
|
</body>
|
|
</html>
|