feat: 增加 ApiState 多页面监控
This commit is contained in:
root
+184
-138
@@ -1,164 +1,210 @@
|
||||
const page = document.body.dataset.page
|
||||
const $ = (selector) => document.querySelector(selector)
|
||||
const fields = (name) => document.querySelectorAll(`[data-field="${name}"]`)
|
||||
const setField = (name, value) => fields(name).forEach((node) => { node.textContent = String(value) })
|
||||
|
||||
const button = $('#draw-button')
|
||||
const stage = $('.draw-stage')
|
||||
const statusLine = $('#draw-status')
|
||||
const rankingBody = $('#ranking-body')
|
||||
const recordList = $('#record-list')
|
||||
const creditMode = $('#credit-mode')
|
||||
const dialog = $('#winner-dialog')
|
||||
function escapeHtml(value) {
|
||||
const node = document.createElement('span')
|
||||
node.textContent = String(value ?? '')
|
||||
return node.innerHTML
|
||||
}
|
||||
|
||||
let state = null
|
||||
let drawing = false
|
||||
|
||||
function money(value, digits = 2) {
|
||||
return Number(value).toLocaleString('en-US', { minimumFractionDigits: digits, maximumFractionDigits: digits })
|
||||
function number(value, digits = 0) {
|
||||
if (value === null || value === undefined || Number.isNaN(Number(value))) return '—'
|
||||
return Number(value).toLocaleString('zh-CN', { maximumFractionDigits: digits, minimumFractionDigits: digits })
|
||||
}
|
||||
|
||||
function compact(value) {
|
||||
return new Intl.NumberFormat('zh-CN', { notation: 'compact', maximumFractionDigits: 1 }).format(Number(value))
|
||||
if (value === null || value === undefined) return '—'
|
||||
return new Intl.NumberFormat('zh-CN', { notation: 'compact', maximumFractionDigits: 2 }).format(Number(value))
|
||||
}
|
||||
|
||||
function localTime(value) {
|
||||
return new Intl.DateTimeFormat('zh-CN', { timeZone: 'Asia/Shanghai', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false }).format(new Date(value))
|
||||
function percent(value) {
|
||||
return value === null || value === undefined ? '—' : `${number(Number(value) * 100, 1)}%`
|
||||
}
|
||||
|
||||
function renderRanking(ranking) {
|
||||
const rows = ranking?.rows ?? []
|
||||
if (!rows.length) {
|
||||
rankingBody.innerHTML = '<tr><td colspan="4" class="empty">当前窗口暂无用量</td></tr>'
|
||||
return
|
||||
function time(value) {
|
||||
if (!value) return '—'
|
||||
return new Intl.DateTimeFormat('zh-CN', {
|
||||
timeZone: 'Asia/Shanghai', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false,
|
||||
}).format(new Date(value))
|
||||
}
|
||||
|
||||
async function requestJson(url, options = {}, timeoutMs = 20000) {
|
||||
const controller = new AbortController()
|
||||
const timer = setTimeout(() => controller.abort(), timeoutMs)
|
||||
try {
|
||||
const response = await fetch(url, { ...options, signal: controller.signal, headers: { 'content-type': 'application/json', ...(options.headers ?? {}) } })
|
||||
const data = await response.json().catch(() => null)
|
||||
if (response.status === 401 && page !== 'login') {
|
||||
location.assign('/login')
|
||||
throw new Error('登录状态已失效')
|
||||
}
|
||||
if (!response.ok || !data?.ok) throw new Error(data?.error ?? `HTTP ${response.status}`)
|
||||
return data
|
||||
} finally {
|
||||
clearTimeout(timer)
|
||||
}
|
||||
rankingBody.innerHTML = rows.map((row) => `<tr>
|
||||
<td>${String(row.rank).padStart(2, '0')}</td>
|
||||
<td><b>${escapeHtml(row.displayName)}</b></td>
|
||||
<td>$${money(row.actualCost, 3)}</td>
|
||||
<td>${compact(row.requests)} 次<span class="usage-detail">${compact(row.tokens)} tokens</span></td>
|
||||
</tr>`).join('')
|
||||
}
|
||||
|
||||
function renderRecords(records) {
|
||||
if (!records?.length) {
|
||||
recordList.innerHTML = '<li class="empty">第一位幸运用户，会是谁？</li>'
|
||||
return
|
||||
}
|
||||
recordList.innerHTML = records.map((record, index) => `<li>
|
||||
<span class="record-badge">#${String(index + 1).padStart(2, '0')}</span>
|
||||
<span class="record-main"><b>${escapeHtml(record.winnerDisplayName)}</b><small>${localTime(record.drawnAt)} · ${record.eligibleCount} 人等概率</small></span>
|
||||
<span class="record-prize">$${money(record.prizeAmountUsd, 0)}<small>${creditLabel(record.creditStatus)}</small></span>
|
||||
</li>`).join('')
|
||||
function shell() {
|
||||
const mount = $('[data-shell]')
|
||||
if (!mount) return
|
||||
const links = [
|
||||
['scores', '/scores', '账号评分'],
|
||||
['ranking', '/ranking', '用户用量'],
|
||||
['lottery', '/lottery', '额度抽奖'],
|
||||
]
|
||||
mount.innerHTML = `<header class="topbar">
|
||||
<a class="brand" href="/scores"><span class="brand-mark">AS</span><span><b>ApiState</b><small>Sub2API Operations</small></span></a>
|
||||
<nav>${links.map(([id, href, label]) => `<a href="${href}"${page === id ? ' aria-current="page"' : ''}>${label}</a>`).join('')}</nav>
|
||||
<div class="topbar-actions"><span class="live-sign"><i></i> PK01</span><button id="logout" class="text-command" type="button">退出</button></div>
|
||||
</header>`
|
||||
$('#logout').addEventListener('click', async () => {
|
||||
await requestJson('/api/logout', { method: 'POST', body: '{}' }).catch(() => null)
|
||||
location.assign('/login')
|
||||
})
|
||||
}
|
||||
|
||||
async function loginPage() {
|
||||
const form = $('#login-form')
|
||||
form.addEventListener('submit', async (event) => {
|
||||
event.preventDefault()
|
||||
const button = form.querySelector('button')
|
||||
const error = $('#login-error')
|
||||
button.disabled = true
|
||||
error.textContent = ''
|
||||
try {
|
||||
await requestJson('/api/login', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ username: $('#username').value, password: $('#password').value }),
|
||||
})
|
||||
location.assign('/scores')
|
||||
} catch (cause) {
|
||||
error.textContent = cause instanceof Error ? cause.message : String(cause)
|
||||
} finally {
|
||||
button.disabled = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
let scoreRows = []
|
||||
|
||||
function gradeClass(value) {
|
||||
const grade = String(value ?? '').toLowerCase()
|
||||
if (grade === 'excellent' || grade === 'good') return 'grade-good'
|
||||
if (grade === 'poor' || grade === 'critical' || grade === 'insufficient') return 'grade-risk'
|
||||
return 'grade-mid'
|
||||
}
|
||||
|
||||
function renderScoreRows() {
|
||||
const term = ($('#score-filter')?.value ?? '').trim().toLowerCase()
|
||||
const rows = scoreRows.filter((row) => `${row.accountName} ${row.groupName}`.toLowerCase().includes(term))
|
||||
$('#score-body').innerHTML = rows.length ? rows.map((row) => {
|
||||
const usage = row.usage ?? {}
|
||||
return `<tr>
|
||||
<td class="account-cell"><b>${escapeHtml(row.accountName)}</b><small>#${escapeHtml(row.accountId)}</small></td>
|
||||
<td>${escapeHtml(row.groupName)}</td>
|
||||
<td>${number(row.priority)}</td>
|
||||
<td><span class="score-value ${gradeClass(row.grade)}">${number(row.score)}</span></td>
|
||||
<td>${escapeHtml(row.grade ?? '—')}</td>
|
||||
<td>${escapeHtml(row.confidence ?? '—')}</td>
|
||||
<td>${number(row.observedAttempts)}</td>
|
||||
<td>${percent(row.failureRate)}</td>
|
||||
<td>${row.ttftP95Ms == null ? '—' : `${number(row.ttftP95Ms)} ms`}</td>
|
||||
<td>${compact(usage.requestCount)}</td>
|
||||
<td>${compact(usage.tokenCount)}</td>
|
||||
<td>${usage.apiAmountUsd == null ? '—' : `$${number(usage.apiAmountUsd, 3)}`}</td>
|
||||
<td>${number(row.failoverRecovered)} / ${number(row.failoverRequests)}</td>
|
||||
<td><span class="availability ${row.currentlyAvailable ? 'is-up' : 'is-down'}">${row.currentlyAvailable ? '可用' : '不可用'}</span></td>
|
||||
</tr>`
|
||||
}).join('') : '<tr><td colspan="14" class="empty">没有匹配的账号</td></tr>'
|
||||
}
|
||||
|
||||
function renderScores(data) {
|
||||
scoreRows = data.accounts ?? []
|
||||
$('#metric-accounts').textContent = number(scoreRows.length)
|
||||
$('#metric-groups').textContent = number((data.groups ?? []).length)
|
||||
$('#metric-good').textContent = number(scoreRows.filter((row) => Number(row.score) >= 80).length)
|
||||
$('#metric-risk').textContent = number(scoreRows.filter((row) => Number(row.score) < 60).length)
|
||||
$('#metric-window').textContent = data.window ?? '—'
|
||||
$('#score-state').textContent = ({ ready: '已更新', refreshing: '刷新中', stale: '使用旧快照', unavailable: '暂无快照' })[data.status] ?? data.status
|
||||
$('#score-state').dataset.state = data.status
|
||||
$('#score-updated').textContent = data.refreshedAt ? `北京时间 ${time(data.refreshedAt)} · 下次 ${time(data.nextRefreshAt)}` : (data.error ?? '尚无成功快照')
|
||||
renderScoreRows()
|
||||
}
|
||||
|
||||
async function scoresPage() {
|
||||
$('#score-filter').addEventListener('input', renderScoreRows)
|
||||
$('#refresh-scores').addEventListener('click', async () => {
|
||||
const button = $('#refresh-scores')
|
||||
button.disabled = true
|
||||
$('#score-state').textContent = '刷新中'
|
||||
try { renderScores(await requestJson('/api/scores/refresh', { method: 'POST', body: '{}' }, 200000)) }
|
||||
catch (error) { $('#score-updated').textContent = error instanceof Error ? error.message : String(error) }
|
||||
finally { button.disabled = false }
|
||||
})
|
||||
renderScores(await requestJson('/api/scores'))
|
||||
setInterval(async () => {
|
||||
if (!document.hidden) renderScores(await requestJson('/api/scores').catch(() => ({ ok: false, accounts: scoreRows })))
|
||||
}, 30000)
|
||||
}
|
||||
|
||||
async function rankingPage() {
|
||||
const data = await requestJson('/api/ranking')
|
||||
const ranking = data.ranking
|
||||
$('#ranking-range').textContent = `${ranking.startDate} 至 ${ranking.endDate}`
|
||||
$('#ranking-cost').textContent = `$${number(ranking.totals.actualCost, 3)}`
|
||||
$('#ranking-requests').textContent = compact(ranking.totals.requests)
|
||||
$('#ranking-tokens').textContent = compact(ranking.totals.tokens)
|
||||
$('#ranking-body').innerHTML = ranking.rows.length ? ranking.rows.map((row) => `<tr><td>${String(row.rank).padStart(2, '0')}</td><td class="account-cell"><b>${escapeHtml(row.displayName)}</b></td><td>$${number(row.actualCost, 3)}</td><td>${compact(row.requests)}</td><td>${compact(row.tokens)}</td></tr>`).join('') : '<tr><td colspan="5" class="empty">当前窗口暂无用量</td></tr>'
|
||||
}
|
||||
|
||||
function creditLabel(status) {
|
||||
return ({ succeeded: '已充值', dry_run: '模拟充值', disabled: '充值未开启', pending: '充值待确认', failed: '充值失败' })[status] ?? status
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
const node = document.createElement('span')
|
||||
node.textContent = String(value)
|
||||
return node.innerHTML
|
||||
function renderLottery(data) {
|
||||
$('#lottery-prize').textContent = number(data.prizeAmountUsd, 0)
|
||||
$('#lottery-remaining').textContent = number(data.remainingDraws)
|
||||
$('#lottery-eligible').textContent = number(data.eligibleUserCount)
|
||||
$('#lottery-next').textContent = time(data.nextGrantAt)
|
||||
$('#lottery-mode').textContent = data.automaticCredit?.enabled ? creditLabel(data.automaticCredit.mode) : '自动充值关闭'
|
||||
$('#draw-button').disabled = Number(data.remainingDraws) < 1 || Number(data.eligibleUserCount) < 1
|
||||
$('#draw-status').textContent = Number(data.remainingDraws) < 1 ? '今天的机会已用完' : `${data.eligibleUserCount} 名候选用户已就绪`
|
||||
$('#record-list').innerHTML = data.records?.length ? data.records.map((record) => `<li><time>${time(record.drawnAt)}</time><b>${escapeHtml(record.winnerDisplayName)}</b><span>$${number(record.prizeAmountUsd, 0)} · ${creditLabel(record.creditStatus)}</span></li>`).join('') : '<li class="empty">暂无开奖记录</li>'
|
||||
}
|
||||
|
||||
function render(next) {
|
||||
state = next
|
||||
setField('active-hours', next.activeWithinHours)
|
||||
setField('prize', money(next.prizeAmountUsd, 0))
|
||||
setField('remaining', next.remainingDraws)
|
||||
setField('eligible', next.eligibleUserCount ?? '—')
|
||||
setField('daily-grant', next.dailyGrantCount)
|
||||
setField('next-grant', localTime(next.nextGrantAt))
|
||||
setField('ranking-label', next.rankingWindowDays === 1 ? '今日' : `近 ${next.rankingWindowDays} 日`)
|
||||
setField('ranking-total', `$${money(next.ranking?.totals?.actualCost ?? 0)}`)
|
||||
renderRanking(next.ranking)
|
||||
renderRecords(next.records)
|
||||
const autoEnabled = next.automaticCredit?.enabled === true
|
||||
creditMode.textContent = autoEnabled ? (next.automaticCredit.mode === 'live' ? '自动充值已开启' : '自动充值模拟中') : '自动充值暂未开启'
|
||||
button.disabled = drawing || Number(next.remainingDraws) < 1 || Number(next.eligibleUserCount) < 1
|
||||
statusLine.textContent = Number(next.remainingDraws) < 1 ? '今天的机会已用完，明早 06:00 再来' : `${next.eligibleUserCount} 名候选人已就位`
|
||||
async function lotteryPage() {
|
||||
let state = await requestJson('/api/lottery')
|
||||
renderLottery(state)
|
||||
$('#draw-button').addEventListener('click', async () => {
|
||||
const button = $('#draw-button')
|
||||
button.disabled = true
|
||||
$('#draw-status').textContent = '正在抽取活跃用户...'
|
||||
try {
|
||||
const data = await requestJson('/api/lottery/draw', { method: 'POST', body: '{}' })
|
||||
$('#winner-name').textContent = data.record.winnerDisplayName
|
||||
$('#winner-prize').textContent = number(data.record.prizeAmountUsd, 0)
|
||||
$('#winner-meta').textContent = `${data.record.eligibleCount} 人等概率 · ${creditLabel(data.record.creditStatus)}`
|
||||
$('#winner-dialog').showModal()
|
||||
state = await requestJson('/api/lottery')
|
||||
renderLottery(state)
|
||||
} catch (error) {
|
||||
$('#draw-status').textContent = error instanceof Error ? error.message : String(error)
|
||||
button.disabled = false
|
||||
}
|
||||
})
|
||||
$('#winner-close').addEventListener('click', () => $('#winner-dialog').close())
|
||||
}
|
||||
|
||||
async function requestJson(url, options = {}) {
|
||||
const controller = new AbortController()
|
||||
const timeout = setTimeout(() => controller.abort(), 12000)
|
||||
try {
|
||||
const response = await fetch(url, { ...options, signal: controller.signal })
|
||||
const raw = await response.text()
|
||||
let data = null
|
||||
try { data = raw ? JSON.parse(raw) : null } catch { /* handled below */ }
|
||||
if (!response.ok || !data?.ok) throw new Error(data?.error ?? `服务暂不可用（HTTP ${response.status}）`)
|
||||
return data
|
||||
} catch (error) {
|
||||
if (error instanceof DOMException && error.name === 'AbortError') throw new Error('请求超时，请稍后重试')
|
||||
throw error
|
||||
} finally {
|
||||
clearTimeout(timeout)
|
||||
}
|
||||
}
|
||||
|
||||
async function loadState() {
|
||||
const data = await requestJson('/api/public/state', { cache: 'no-store' })
|
||||
render(data)
|
||||
}
|
||||
|
||||
function showStateError(error) {
|
||||
const message = error instanceof Error ? error.message : String(error)
|
||||
statusLine.textContent = `${message}，正在重试…`
|
||||
rankingBody.innerHTML = '<tr><td colspan="4" class="empty">服务暂时不可用，正在重试…</td></tr>'
|
||||
creditMode.textContent = '连接中断'
|
||||
button.disabled = true
|
||||
}
|
||||
|
||||
function sleep(ms) { return new Promise((resolve) => setTimeout(resolve, ms)) }
|
||||
|
||||
async function draw() {
|
||||
if (drawing) return
|
||||
drawing = true
|
||||
button.disabled = true
|
||||
stage.classList.add('is-drawing')
|
||||
const phrases = ['锁定活跃用户…', '打乱候选顺序…', '正在碰撞好运…', '马上揭晓！']
|
||||
let phraseIndex = 0
|
||||
const ticker = setInterval(() => {
|
||||
statusLine.textContent = phrases[phraseIndex % phrases.length]
|
||||
phraseIndex += 1
|
||||
}, 620)
|
||||
try {
|
||||
const request = requestJson('/api/public/draw', { method: 'POST', headers: { 'content-type': 'application/json' } })
|
||||
const [, data] = await Promise.all([sleep(2900), request])
|
||||
$('#winner-name').textContent = data.record.winnerDisplayName
|
||||
$('#winner-prize').textContent = money(data.record.prizeAmountUsd, 0)
|
||||
$('#winner-meta').textContent = `${data.record.eligibleCount} 人等概率 · ${creditLabel(data.record.creditStatus)}`
|
||||
dialog.showModal()
|
||||
await loadState()
|
||||
} catch (error) {
|
||||
statusLine.textContent = error instanceof Error ? error.message : String(error)
|
||||
await loadState().catch((stateError) => {
|
||||
state = null
|
||||
showStateError(stateError)
|
||||
setTimeout(boot, 5000)
|
||||
})
|
||||
} finally {
|
||||
clearInterval(ticker)
|
||||
drawing = false
|
||||
stage.classList.remove('is-drawing')
|
||||
button.disabled = !state || Number(state.remainingDraws) < 1 || Number(state.eligibleUserCount) < 1
|
||||
}
|
||||
}
|
||||
|
||||
button.addEventListener('click', draw)
|
||||
$('#winner-close').addEventListener('click', () => dialog.close())
|
||||
dialog.addEventListener('click', (event) => { if (event.target === dialog) dialog.close() })
|
||||
|
||||
async function boot() {
|
||||
try { await loadState() } catch (error) {
|
||||
showStateError(error)
|
||||
setTimeout(boot, 5000)
|
||||
}
|
||||
if (page === 'login') return await loginPage()
|
||||
shell()
|
||||
if (page === 'scores') return await scoresPage()
|
||||
if (page === 'ranking') return await rankingPage()
|
||||
if (page === 'lottery') return await lotteryPage()
|
||||
}
|
||||
|
||||
boot()
|
||||
|
||||
setInterval(() => {
|
||||
if (!drawing && !document.hidden) loadState().catch(showStateError)
|
||||
}, 30000)
|
||||
boot().catch((error) => {
|
||||
const target = $('.workspace') ?? $('main')
|
||||
if (target) target.insertAdjacentHTML('afterbegin', `<div class="fatal-state">${escapeHtml(error instanceof Error ? error.message : String(error))}</div>`)
|
||||
})
|
||||
|
||||
@@ -1,87 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#10100f" />
|
||||
<title>Sub2Rank 幸运额度站</title>
|
||||
<meta name="description" content="PK01 Sub2API 活跃用户每日等概率抽奖与用量排行榜" />
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%23dfff00'/%3E%3Ctext x='32' y='42' text-anchor='middle' font-size='30' font-family='sans-serif' font-weight='900'%3ES2%3C/text%3E%3C/svg%3E" />
|
||||
<link rel="stylesheet" href="/styles.css" />
|
||||
<script src="/app.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="noise" aria-hidden="true"></div>
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/" aria-label="Sub2Rank 首页">
|
||||
<span class="brand-mark">S2</span>
|
||||
<span><b>SUB2RANK</b><small>幸运额度站</small></span>
|
||||
</a>
|
||||
<div class="live-sign"><i></i> PK01 LIVE</div>
|
||||
<p class="rule-copy">最近 <span data-field="active-hours">24</span> 小时活跃用户 · 等概率</p>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero" aria-labelledby="hero-title">
|
||||
<div class="hero-copy">
|
||||
<p class="eyebrow">DAILY CREDIT DRAW / 每日额度抽奖</p>
|
||||
<h1 id="hero-title">今天，<br /><em>好运值多少钱？</em></h1>
|
||||
<p class="hero-note">任何人都可以按下按钮。开奖瞬间从符合条件的活跃用户中等概率抽出一位。</p>
|
||||
<dl class="stats-strip">
|
||||
<div><dt>本期奖金</dt><dd><span class="currency">$</span><span data-field="prize">—</span></dd></div>
|
||||
<div><dt>剩余次数</dt><dd><span data-field="remaining">—</span><small> 次</small></dd></div>
|
||||
<div><dt>候选人数</dt><dd><span data-field="eligible">—</span><small> 人</small></dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="draw-stage">
|
||||
<div class="orbit orbit-one" aria-hidden="true"></div>
|
||||
<div class="orbit orbit-two" aria-hidden="true"></div>
|
||||
<div class="draw-machine" id="draw-machine">
|
||||
<div class="machine-label"><span>ONE PRESS</span><span>ONE WINNER</span></div>
|
||||
<button class="draw-button" id="draw-button" type="button" disabled>
|
||||
<span class="button-glare" aria-hidden="true"></span>
|
||||
<span class="button-copy"><b>立即抽奖</b><small>PRESS TO DRAW</small></span>
|
||||
</button>
|
||||
<div class="machine-status" aria-live="polite" id="draw-status">正在连接开奖台…</div>
|
||||
</div>
|
||||
<p class="next-grant">下次增加 <b data-field="daily-grant">—</b> 次：<time data-field="next-grant">—</time></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="board-grid">
|
||||
<article class="panel ranking-panel">
|
||||
<header class="panel-head">
|
||||
<div><p class="panel-index">01 / USAGE</p><h2>用量排行榜</h2></div>
|
||||
<div class="range-chip"><span data-field="ranking-label">今日</span><b data-field="ranking-total">$—</b></div>
|
||||
</header>
|
||||
<div class="table-wrap">
|
||||
<table aria-label="Sub2API 用户用量排行榜">
|
||||
<thead><tr><th>名次</th><th>用户</th><th>用量</th><th>请求 / Token</th></tr></thead>
|
||||
<tbody id="ranking-body"><tr><td colspan="4" class="empty">正在载入排行榜…</td></tr></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="panel records-panel">
|
||||
<header class="panel-head">
|
||||
<div><p class="panel-index">02 / ARCHIVE</p><h2>开奖记录</h2></div>
|
||||
<span class="credit-mode" id="credit-mode">充值状态读取中</span>
|
||||
</header>
|
||||
<ol class="record-list" id="record-list"><li class="empty">暂无开奖记录</li></ol>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<dialog id="winner-dialog" class="winner-dialog" aria-labelledby="winner-title">
|
||||
<div class="burst" aria-hidden="true"></div>
|
||||
<p class="winner-kicker">TODAY'S LUCKY USER</p>
|
||||
<h2 id="winner-title">恭喜 <span id="winner-name">—</span></h2>
|
||||
<p class="winner-prize">获得 <b>$<span id="winner-prize">—</span></b> 额度</p>
|
||||
<p class="winner-meta" id="winner-meta"></p>
|
||||
<button id="winner-close" type="button">收下好运</button>
|
||||
</dialog>
|
||||
|
||||
<footer><span>SUB2RANK / PK01</span><span>配置与排除名单由 YAML 控制</span></footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,30 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#111412" />
|
||||
<title>登录 | ApiState</title>
|
||||
<link rel="stylesheet" href="/styles.css" />
|
||||
<script src="/app.js" type="module"></script>
|
||||
</head>
|
||||
<body data-page="login" class="login-page">
|
||||
<main class="login-layout">
|
||||
<section class="login-brand" aria-label="ApiState">
|
||||
<span class="brand-mark">AS</span>
|
||||
<p>SUB2API OPERATIONS</p>
|
||||
<h1>ApiState</h1>
|
||||
<div class="signal-line"><i></i><span>PK01 / ACCOUNT QUALITY</span></div>
|
||||
</section>
|
||||
<section class="login-panel">
|
||||
<form id="login-form" autocomplete="on">
|
||||
<header><p class="eyebrow">CONTROL ROOM ACCESS</p><h2>运维登录</h2></header>
|
||||
<label>用户名<input id="username" name="username" autocomplete="username" required /></label>
|
||||
<label>密码<input id="password" name="password" type="password" autocomplete="current-password" required /></label>
|
||||
<p id="login-error" class="form-error" role="alert"></p>
|
||||
<button class="primary-command" type="submit">登录</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,27 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#111412" />
|
||||
<title>额度抽奖 | ApiState</title>
|
||||
<link rel="stylesheet" href="/styles.css" />
|
||||
<script src="/app.js" type="module"></script>
|
||||
</head>
|
||||
<body data-page="lottery">
|
||||
<div data-shell></div>
|
||||
<main class="workspace lottery-workspace">
|
||||
<header class="page-head"><div><p class="eyebrow">DAILY CREDIT DRAW</p><h1>额度抽奖</h1></div><span id="lottery-mode" class="state-badge">读取中</span></header>
|
||||
<section class="lottery-grid">
|
||||
<div class="draw-console">
|
||||
<p>本期额度</p><strong>$<span id="lottery-prize">—</span></strong>
|
||||
<dl><div><dt>剩余次数</dt><dd id="lottery-remaining">—</dd></div><div><dt>候选用户</dt><dd id="lottery-eligible">—</dd></div><div><dt>下次增加</dt><dd id="lottery-next">—</dd></div></dl>
|
||||
<button id="draw-button" class="primary-command" type="button" disabled>立即抽奖</button>
|
||||
<p id="draw-status" class="command-status">正在读取抽奖状态...</p>
|
||||
</div>
|
||||
<section class="records-section"><header><p class="eyebrow">RECENT RESULTS</p><h2>开奖记录</h2></header><ol id="record-list" class="record-list"><li class="empty">暂无记录</li></ol></section>
|
||||
</section>
|
||||
</main>
|
||||
<dialog id="winner-dialog" class="winner-dialog"><p class="eyebrow">TODAY'S WINNER</p><h2 id="winner-name">—</h2><p>获得 <strong>$<span id="winner-prize">—</span></strong> 额度</p><p id="winner-meta"></p><button id="winner-close" class="primary-command" type="button">关闭</button></dialog>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#111412" />
|
||||
<title>用户用量 | ApiState</title>
|
||||
<link rel="stylesheet" href="/styles.css" />
|
||||
<script src="/app.js" type="module"></script>
|
||||
</head>
|
||||
<body data-page="ranking">
|
||||
<div data-shell></div>
|
||||
<main class="workspace">
|
||||
<header class="page-head"><div><p class="eyebrow">USER FLOW / DAILY</p><h1>用户用量</h1></div><span id="ranking-range" class="state-badge">读取中</span></header>
|
||||
<section class="metric-strip"><div><span>标准 API 用量</span><strong id="ranking-cost">—</strong></div><div><span>请求</span><strong id="ranking-requests">—</strong></div><div><span>Token</span><strong id="ranking-tokens">—</strong></div></section>
|
||||
<section class="table-section"><div class="table-wrap"><table class="data-table"><thead><tr><th>名次</th><th>用户</th><th>API USD</th><th>请求</th><th>Token</th></tr></thead><tbody id="ranking-body"><tr><td colspan="5" class="empty">正在读取用量...</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#111412" />
|
||||
<title>账号评分 | ApiState</title>
|
||||
<link rel="stylesheet" href="/styles.css" />
|
||||
<script src="/app.js" type="module"></script>
|
||||
</head>
|
||||
<body data-page="scores">
|
||||
<div data-shell></div>
|
||||
<main class="workspace">
|
||||
<header class="page-head">
|
||||
<div><p class="eyebrow">ACCOUNT QUALITY / ALL GROUPS</p><h1>上游账号评分</h1></div>
|
||||
<div class="page-actions">
|
||||
<span id="score-state" class="state-badge">读取中</span>
|
||||
<button id="refresh-scores" class="icon-command" type="button" title="立即刷新" aria-label="立即刷新">↻</button>
|
||||
</div>
|
||||
</header>
|
||||
<section class="metric-strip" aria-label="评分概要">
|
||||
<div><span>账号</span><strong id="metric-accounts">—</strong></div>
|
||||
<div><span>分组</span><strong id="metric-groups">—</strong></div>
|
||||
<div><span>优质</span><strong id="metric-good">—</strong></div>
|
||||
<div><span>需关注</span><strong id="metric-risk">—</strong></div>
|
||||
<div><span>评分窗口</span><strong id="metric-window">—</strong></div>
|
||||
</section>
|
||||
<section class="table-section">
|
||||
<div class="table-toolbar">
|
||||
<div class="filter-field"><span>筛选</span><input id="score-filter" type="search" placeholder="账号或分组" /></div>
|
||||
<p id="score-updated">尚无成功快照</p>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table class="data-table" aria-label="所有分组账号评分">
|
||||
<thead><tr><th>账号</th><th>分组</th><th>优先级</th><th>评分</th><th>等级</th><th>置信度</th><th>尝试</th><th>失败率</th><th>TTFT P95</th><th>请求</th><th>Token</th><th>API USD</th><th>切号恢复</th><th>可用</th></tr></thead>
|
||||
<tbody id="score-body"><tr><td colspan="14" class="empty">正在读取评分快照...</td></tr></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
+129
-134
@@ -1,146 +1,141 @@
|
||||
:root {
|
||||
--ink: #11110f;
|
||||
--paper: #f0eadb;
|
||||
--acid: #dfff00;
|
||||
--signal: #ff4d2e;
|
||||
--cyan: #60e8df;
|
||||
--line: rgba(240, 234, 219, 0.19);
|
||||
--muted: #a8a496;
|
||||
--serif: "Bodoni 72", "Noto Serif SC", "Songti SC", Georgia, serif;
|
||||
--sans: "Avenir Next Condensed", "DIN Condensed", "Noto Sans SC", sans-serif;
|
||||
--ink: #111412;
|
||||
--surface: #191d1a;
|
||||
--surface-raised: #222722;
|
||||
--paper: #f4f0e6;
|
||||
--muted: #9ca49d;
|
||||
--line: #343b35;
|
||||
--signal: #b9e447;
|
||||
--alert: #ff6b4a;
|
||||
--info: #70b7d4;
|
||||
--sans: "DIN 2014", "Noto Sans SC", "PingFang SC", sans-serif;
|
||||
--mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html { background: var(--ink); color: var(--paper); scroll-behavior: smooth; }
|
||||
body { margin: 0; min-width: 320px; font-family: var(--sans); background:
|
||||
linear-gradient(90deg, transparent 49.9%, rgba(255,255,255,.026) 50%, transparent 50.1%) 0 0 / 7.5rem 7.5rem,
|
||||
linear-gradient(rgba(255,255,255,.026) 49.9%, transparent 50.1%) 0 0 / 7.5rem 7.5rem,
|
||||
radial-gradient(circle at 78% 24%, rgba(255,77,46,.11), transparent 31rem), var(--ink); }
|
||||
.noise { position: fixed; inset: 0; opacity: .07; pointer-events: none; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
|
||||
html { background: var(--ink); color: var(--paper); }
|
||||
body { margin: 0; min-width: 320px; min-height: 100vh; font-family: var(--sans); letter-spacing: 0; background-color: var(--ink); background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 32px 32px; }
|
||||
button, input { font: inherit; letter-spacing: 0; }
|
||||
button { cursor: pointer; }
|
||||
button:disabled { cursor: wait; opacity: .48; }
|
||||
|
||||
.topbar { min-height: 5.6rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1rem clamp(1.2rem, 4vw, 4.5rem); border-bottom: 1px solid var(--line); }
|
||||
.brand { display: flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; width: fit-content; }
|
||||
.brand-mark { display: grid; place-items: center; width: 2.55rem; aspect-ratio: 1; background: var(--acid); color: var(--ink); font: 900 1rem/1 var(--sans); clip-path: polygon(50% 0, 100% 20%, 90% 100%, 10% 100%, 0 20%); }
|
||||
.brand b { display: block; letter-spacing: .16em; font-size: .86rem; }
|
||||
.brand small { color: var(--muted); font-size: .72rem; }
|
||||
.live-sign { border: 1px solid var(--line); border-radius: 99px; padding: .48rem .8rem; font-size: .68rem; letter-spacing: .16em; }
|
||||
.live-sign i { display: inline-block; width: .46rem; height: .46rem; background: var(--signal); border-radius: 50%; margin-right: .42rem; box-shadow: 0 0 0 .25rem rgba(255,77,46,.15); animation: pulse 1.6s infinite; }
|
||||
.rule-copy { justify-self: end; color: var(--muted); font-size: .78rem; margin: 0; }
|
||||
.topbar { height: 64px; display: grid; grid-template-columns: 260px 1fr auto; align-items: center; border-bottom: 1px solid var(--line); background: rgba(17,20,18,.96); padding: 0 28px; position: sticky; top: 0; z-index: 10; }
|
||||
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
|
||||
.brand-mark { width: 34px; aspect-ratio: 1; display: grid; place-items: center; background: var(--signal); color: var(--ink); font: 800 12px/1 var(--mono); border-radius: 3px; }
|
||||
.brand b, .brand small { display: block; }
|
||||
.brand b { font-size: 15px; }
|
||||
.brand small { color: var(--muted); font: 10px/1.2 var(--mono); text-transform: uppercase; }
|
||||
.topbar nav { display: flex; height: 100%; align-items: stretch; }
|
||||
.topbar nav a { min-width: 104px; display: grid; place-items: center; color: var(--muted); text-decoration: none; border-inline: 1px solid transparent; font-size: 13px; }
|
||||
.topbar nav a:hover { color: var(--paper); background: var(--surface); }
|
||||
.topbar nav a[aria-current="page"] { color: var(--paper); border-inline-color: var(--line); box-shadow: inset 0 -3px var(--signal); background: var(--surface); }
|
||||
.topbar-actions { display: flex; gap: 18px; align-items: center; }
|
||||
.live-sign { color: var(--muted); font: 11px/1 var(--mono); }
|
||||
.live-sign i, .signal-line i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); margin-right: 7px; box-shadow: 0 0 0 4px rgba(185,228,71,.1); }
|
||||
.text-command { border: 0; background: transparent; color: var(--paper); padding: 8px; }
|
||||
|
||||
main { width: min(1500px, 100%); margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 4.5rem) 4rem; }
|
||||
.hero { min-height: 43rem; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(25rem, .98fr); align-items: center; gap: clamp(2rem, 7vw, 8rem); border-bottom: 1px solid var(--line); }
|
||||
.eyebrow, .panel-index { color: var(--acid); letter-spacing: .22em; font-size: .7rem; font-weight: 800; }
|
||||
h1 { max-width: 14ch; font: 400 clamp(3.8rem, 5.7vw, 7.1rem)/.88 var(--serif); letter-spacing: -.065em; margin: 1rem 0 1.8rem; }
|
||||
h1 em { color: var(--acid); font-weight: 400; }
|
||||
.hero-note { max-width: 37rem; color: var(--muted); font: 400 clamp(.9rem, 1.3vw, 1.05rem)/1.75 var(--sans); }
|
||||
.stats-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 3rem 0 0; border-block: 1px solid var(--line); }
|
||||
.stats-strip div { padding: 1.2rem 1rem 1.2rem 0; }
|
||||
.stats-strip div + div { border-left: 1px solid var(--line); padding-left: 1.2rem; }
|
||||
.stats-strip dt { color: var(--muted); font-size: .7rem; letter-spacing: .1em; }
|
||||
.stats-strip dd { margin: .35rem 0 0; font: 500 clamp(1.8rem, 3vw, 2.6rem)/1 var(--serif); }
|
||||
.stats-strip small, .currency { font: 700 .75rem/1 var(--sans); color: var(--acid); }
|
||||
.workspace { width: min(1760px, 100%); margin: 0 auto; padding: 34px 34px 52px; }
|
||||
.page-head { min-height: 76px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
|
||||
.eyebrow { margin: 0 0 8px; color: var(--signal); font: 11px/1 var(--mono); }
|
||||
.page-head h1 { margin: 0; font-size: 28px; font-weight: 650; }
|
||||
.page-actions { display: flex; align-items: center; gap: 10px; }
|
||||
.state-badge { min-height: 32px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font: 11px/1 var(--mono); }
|
||||
.state-badge[data-state="ready"] { color: var(--signal); border-color: rgba(185,228,71,.4); }
|
||||
.state-badge[data-state="stale"], .state-badge[data-state="unavailable"] { color: var(--alert); border-color: rgba(255,107,74,.45); }
|
||||
.icon-command { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); color: var(--paper); font-size: 20px; line-height: 1; }
|
||||
.icon-command:hover { border-color: var(--signal); color: var(--signal); }
|
||||
|
||||
.draw-stage { min-height: 36rem; display: grid; place-items: center; position: relative; isolation: isolate; overflow: clip; }
|
||||
.draw-machine { width: clamp(18rem, 31vw, 29rem); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; position: relative; background: radial-gradient(circle, #373732 0 45%, #171715 46% 58%, #292924 59% 60%, #121210 61%); box-shadow: inset 0 0 2rem #000, 0 3rem 6rem rgba(0,0,0,.55); }
|
||||
.draw-machine::before { content: ""; position: absolute; inset: 5%; border-radius: 50%; border: 1px dashed rgba(223,255,0,.38); animation: rotate 24s linear infinite; }
|
||||
.machine-label { position: absolute; inset: 1.5rem 0 auto; display: flex; justify-content: center; gap: 1.3rem; color: var(--muted); letter-spacing: .18em; font-size: .5rem; }
|
||||
.draw-button { width: 50%; aspect-ratio: 1; border: 0; border-radius: 50%; position: relative; overflow: hidden; cursor: pointer; color: #fff5e9; background: radial-gradient(circle at 36% 26%, #ff9a70, var(--signal) 37%, #c52912 70%); box-shadow: 0 .8rem 0 #76180d, 0 1.4rem 3rem rgba(255,77,46,.32), inset 0 .25rem .35rem rgba(255,255,255,.45); transition: transform .18s, filter .18s, box-shadow .18s; z-index: 2; }
|
||||
.draw-button:not(:disabled):hover { transform: translateY(-.25rem) scale(1.025); filter: saturate(1.2); }
|
||||
.draw-button:focus-visible, .winner-dialog button:focus-visible, .brand:focus-visible { outline: .22rem solid var(--cyan); outline-offset: .3rem; }
|
||||
.draw-button:not(:disabled):active { transform: translateY(.45rem) scale(.98); box-shadow: 0 .25rem 0 #76180d, 0 .6rem 1.6rem rgba(255,77,46,.28), inset 0 .25rem .35rem rgba(255,255,255,.35); }
|
||||
.draw-button:disabled { cursor: not-allowed; filter: grayscale(.65) brightness(.65); }
|
||||
.button-glare { position: absolute; inset: 7% 18% 56%; border-radius: 50%; background: rgba(255,255,255,.24); filter: blur(.35rem); }
|
||||
.button-copy { position: relative; display: grid; gap: .25rem; }
|
||||
.button-copy b { font-size: clamp(1.35rem, 2.4vw, 2.2rem); letter-spacing: .04em; }
|
||||
.button-copy small { font-size: .52rem; letter-spacing: .18em; }
|
||||
.machine-status { position: absolute; bottom: 18%; z-index: 3; width: 70%; text-align: center; color: var(--paper); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.orbit { position: absolute; border-radius: 50%; pointer-events: none; }
|
||||
.orbit-one { width: 88%; aspect-ratio: 1; border: 1px solid rgba(96,232,223,.25); transform: rotate(-14deg) scaleY(.38); }
|
||||
.orbit-two { width: 104%; aspect-ratio: 1; border: 1px solid rgba(223,255,0,.2); transform: rotate(19deg) scaleY(.52); }
|
||||
.next-grant { position: absolute; bottom: 1.1rem; color: var(--muted); font-size: .72rem; letter-spacing: .04em; }
|
||||
.next-grant b { color: var(--acid); }
|
||||
.draw-stage.is-drawing .draw-machine { animation: machineCharge 2.8s cubic-bezier(.32,.02,.26,1); }
|
||||
.draw-stage.is-drawing .draw-button { animation: buttonCharge .38s alternate infinite; }
|
||||
.draw-stage.is-drawing .orbit-one { animation: orbitDash .7s linear infinite; border-color: var(--acid); }
|
||||
.draw-stage.is-drawing .orbit-two { animation: orbitDash .95s linear infinite reverse; border-color: var(--signal); }
|
||||
.metric-strip { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); border-bottom: 1px solid var(--line); }
|
||||
.metric-strip > div { min-height: 92px; padding: 20px 18px; border-right: 1px solid var(--line); }
|
||||
.metric-strip > div:first-child { padding-left: 0; }
|
||||
.metric-strip > div:last-child { border-right: 0; }
|
||||
.metric-strip span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 10px; }
|
||||
.metric-strip strong { font: 600 25px/1 var(--mono); }
|
||||
|
||||
.board-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(22rem, .65fr); border-inline: 1px solid var(--line); }
|
||||
.panel { min-width: 0; padding: clamp(1.3rem, 3vw, 2.4rem); }
|
||||
.panel + .panel { border-left: 1px solid var(--line); }
|
||||
.panel-head { min-height: 5.5rem; display: flex; justify-content: space-between; align-items: start; gap: 1rem; border-bottom: 1px solid var(--line); }
|
||||
.panel-head h2 { margin: .3rem 0 1.2rem; font: 400 clamp(1.8rem, 3.2vw, 2.8rem)/1 var(--serif); }
|
||||
.panel-index { margin: 0; }
|
||||
.range-chip, .credit-mode { text-align: right; color: var(--muted); font-size: .67rem; letter-spacing: .08em; }
|
||||
.range-chip span, .range-chip b { display: block; }
|
||||
.range-chip b { color: var(--paper); font: 400 1.35rem/1.4 var(--serif); }
|
||||
.credit-mode { border: 1px solid var(--line); padding: .5rem .65rem; }
|
||||
.table-wrap { overflow-x: auto; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th { color: var(--muted); font-size: .62rem; letter-spacing: .1em; text-align: left; font-weight: 500; padding: .9rem .5rem; }
|
||||
td { border-top: 1px solid rgba(240,234,219,.1); padding: 1rem .5rem; font-size: .82rem; }
|
||||
td:first-child { width: 4rem; color: var(--acid); font: 400 1.6rem/1 var(--serif); }
|
||||
td:nth-child(3) { font: 400 1.1rem/1 var(--serif); }
|
||||
.usage-detail { display: block; color: var(--muted); font-size: .63rem; margin-top: .3rem; }
|
||||
tbody tr { transition: background .2s, transform .2s; }
|
||||
tbody tr:hover { background: rgba(223,255,0,.04); transform: translateX(.2rem); }
|
||||
.record-list { list-style: none; margin: 0; padding: 0; }
|
||||
.record-list li { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: .8rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid rgba(240,234,219,.1); }
|
||||
.record-badge { display: grid; place-items: center; width: 2.5rem; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--acid); color: var(--acid); font: 700 .6rem/1 var(--sans); }
|
||||
.record-main b { display: block; font: 400 1.05rem/1.25 var(--serif); }
|
||||
.record-main small, .record-prize small { color: var(--muted); font-size: .61rem; }
|
||||
.record-prize { text-align: right; font: 400 1.25rem/1 var(--serif); }
|
||||
.empty { color: var(--muted) !important; text-align: center !important; padding: 2.6rem 1rem !important; font: .75rem/1.5 var(--sans) !important; }
|
||||
.record-list li.empty { display: block; }
|
||||
.table-section { padding-top: 20px; }
|
||||
.table-toolbar { min-height: 48px; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
|
||||
.table-toolbar p { color: var(--muted); font: 11px/1 var(--mono); }
|
||||
.filter-field { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
|
||||
.filter-field input { width: 260px; height: 34px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); color: var(--paper); padding: 0 10px; outline: 0; }
|
||||
.filter-field input:focus { border-color: var(--signal); }
|
||||
.table-wrap { overflow: auto; border: 1px solid var(--line); }
|
||||
.data-table { width: 100%; min-width: 1220px; border-collapse: collapse; font-size: 12px; }
|
||||
.data-table th { height: 40px; padding: 0 12px; position: sticky; top: 0; z-index: 1; text-align: left; white-space: nowrap; background: var(--surface-raised); color: var(--muted); font: 10px/1 var(--mono); border-bottom: 1px solid var(--line); }
|
||||
.data-table td { height: 52px; padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
|
||||
.data-table tbody tr:hover { background: rgba(185,228,71,.045); }
|
||||
.account-cell { min-width: 230px; }
|
||||
.account-cell b { display: block; max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
|
||||
.account-cell small { display: block; color: var(--muted); margin-top: 4px; font: 10px/1 var(--mono); }
|
||||
.score-value { display: inline-grid; place-items: center; width: 34px; height: 26px; border-radius: 3px; font: 700 12px/1 var(--mono); }
|
||||
.grade-good { color: var(--signal); background: rgba(185,228,71,.1); }
|
||||
.grade-mid { color: var(--info); background: rgba(112,183,212,.1); }
|
||||
.grade-risk { color: var(--alert); background: rgba(255,107,74,.1); }
|
||||
.availability { font-size: 11px; }
|
||||
.availability::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; background: currentColor; }
|
||||
.is-up { color: var(--signal); }
|
||||
.is-down { color: var(--alert); }
|
||||
.empty { padding: 32px !important; text-align: center; color: var(--muted); }
|
||||
.fatal-state { padding: 14px; border: 1px solid var(--alert); color: var(--alert); margin-bottom: 18px; }
|
||||
|
||||
.winner-dialog { width: min(38rem, calc(100% - 2rem)); border: 1px solid rgba(223,255,0,.5); color: var(--paper); background: #171714; padding: clamp(2rem, 6vw, 4.5rem); text-align: center; overflow: hidden; box-shadow: 0 2rem 8rem #000; }
|
||||
.winner-dialog::backdrop { background: rgba(5,5,4,.82); backdrop-filter: blur(.7rem); }
|
||||
.winner-dialog[open] { animation: reveal .65s cubic-bezier(.18,.85,.3,1.15); }
|
||||
.winner-kicker { color: var(--acid); font-size: .68rem; letter-spacing: .2em; }
|
||||
.winner-dialog h2 { font: 400 clamp(2.3rem, 7vw, 4rem)/1 var(--serif); margin: 1rem 0; }
|
||||
.winner-dialog h2 span { display: block; color: var(--acid); font-size: clamp(1.65rem, 5vw, 3.3rem); overflow-wrap: anywhere; margin-top: .3rem; }
|
||||
.winner-prize { color: var(--muted); }
|
||||
.winner-prize b { display: block; color: var(--signal); font: 400 clamp(3.4rem, 10vw, 6rem)/1 var(--serif); margin-top: .5rem; }
|
||||
.winner-meta { color: var(--muted); font-size: .72rem; min-height: 1em; }
|
||||
.winner-dialog button { margin-top: 1.5rem; padding: .8rem 1.5rem; border: 0; background: var(--acid); color: var(--ink); font-weight: 800; cursor: pointer; }
|
||||
.burst { position: absolute; inset: 50%; width: 1px; height: 1px; box-shadow: 0 -12rem 0 1px var(--acid), 8rem -8rem 0 1px var(--signal), 12rem 0 0 1px var(--cyan), 8rem 8rem 0 1px var(--acid), 0 12rem 0 1px var(--signal), -8rem 8rem 0 1px var(--cyan), -12rem 0 0 1px var(--acid), -8rem -8rem 0 1px var(--signal); animation: burst 1.4s ease-out both; }
|
||||
footer { display: flex; justify-content: space-between; padding: 1.2rem clamp(1.2rem, 4vw, 4.5rem); border-top: 1px solid var(--line); color: var(--muted); font-size: .6rem; letter-spacing: .12em; }
|
||||
.lottery-grid { display: grid; grid-template-columns: minmax(400px, .8fr) minmax(500px, 1.2fr); min-height: 600px; }
|
||||
.draw-console { display: flex; flex-direction: column; justify-content: center; padding: 48px 56px 48px 0; border-right: 1px solid var(--line); }
|
||||
.draw-console > p:first-child { color: var(--muted); }
|
||||
.draw-console > strong { font: 600 76px/1 var(--mono); color: var(--signal); }
|
||||
.draw-console dl { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); margin: 38px 0 28px; }
|
||||
.draw-console dl div { padding: 18px 12px 18px 0; }
|
||||
.draw-console dl div + div { padding-left: 14px; border-left: 1px solid var(--line); }
|
||||
.draw-console dt { color: var(--muted); font-size: 11px; }
|
||||
.draw-console dd { margin: 8px 0 0; font: 600 17px/1.2 var(--mono); }
|
||||
.primary-command { min-height: 44px; border: 0; border-radius: 3px; padding: 0 20px; background: var(--signal); color: var(--ink); font-weight: 750; }
|
||||
.primary-command:hover { background: var(--paper); }
|
||||
.command-status { color: var(--muted); font-size: 12px; }
|
||||
.records-section { padding: 48px 0 48px 48px; }
|
||||
.records-section h2 { margin: 0; }
|
||||
.record-list { list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid var(--line); }
|
||||
.record-list li { min-height: 68px; display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); }
|
||||
.record-list time, .record-list span { color: var(--muted); font: 11px/1.3 var(--mono); }
|
||||
.winner-dialog { width: min(480px, calc(100% - 32px)); border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--paper); padding: 36px; }
|
||||
.winner-dialog::backdrop { background: rgba(0,0,0,.72); }
|
||||
.winner-dialog h2 { font-size: 32px; }
|
||||
.winner-dialog strong { color: var(--signal); }
|
||||
|
||||
@keyframes pulse { 50% { opacity: .45; } }
|
||||
@keyframes rotate { to { transform: rotate(360deg); } }
|
||||
@keyframes orbitDash { to { rotate: 360deg; } }
|
||||
@keyframes buttonCharge { to { filter: brightness(1.35) saturate(1.4); transform: scale(1.035); } }
|
||||
@keyframes machineCharge { 20% { transform: scale(.98); } 55% { transform: scale(1.035); filter: hue-rotate(20deg); } 100% { transform: scale(1); } }
|
||||
@keyframes reveal { from { opacity: 0; transform: translateY(2rem) scale(.88) rotate(-1deg); } }
|
||||
@keyframes burst { from { transform: scale(.2) rotate(0); opacity: 1; } to { transform: scale(1.4) rotate(50deg); opacity: 0; } }
|
||||
.login-page { background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); }
|
||||
.login-layout { min-height: 100vh; display: grid; grid-template-columns: 1.25fr .75fr; }
|
||||
.login-brand { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 8vw, 120px); border-right: 1px solid var(--line); }
|
||||
.login-brand .brand-mark { width: 54px; margin-bottom: 42px; }
|
||||
.login-brand > p { color: var(--muted); font: 11px/1 var(--mono); }
|
||||
.login-brand h1 { margin: 8px 0 54px; font-size: clamp(58px, 8vw, 116px); line-height: .9; }
|
||||
.signal-line { color: var(--muted); font: 11px/1 var(--mono); }
|
||||
.login-panel { display: grid; place-items: center; padding: 32px; background: rgba(25,29,26,.92); }
|
||||
.login-panel form { width: min(360px, 100%); }
|
||||
.login-panel h2 { margin: 0 0 32px; font-size: 28px; }
|
||||
.login-panel label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 18px; }
|
||||
.login-panel input { width: 100%; height: 44px; margin-top: 8px; border: 1px solid var(--line); border-radius: 3px; background: var(--ink); color: var(--paper); padding: 0 12px; outline: 0; }
|
||||
.login-panel input:focus { border-color: var(--signal); }
|
||||
.login-panel .primary-command { width: 100%; }
|
||||
.form-error { min-height: 22px; color: var(--alert); font-size: 12px; }
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.topbar { grid-template-columns: 1fr auto; }
|
||||
.rule-copy { display: none; }
|
||||
.hero { grid-template-columns: 1fr; padding-block: 4rem 2rem; }
|
||||
.hero-copy { text-align: center; }
|
||||
h1, .hero-note { margin-inline: auto; }
|
||||
.stats-strip { text-align: left; }
|
||||
.draw-stage { min-height: 31rem; }
|
||||
.board-grid { grid-template-columns: 1fr; }
|
||||
.panel + .panel { border-left: 0; border-top: 1px solid var(--line); }
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.topbar { min-height: 4.6rem; padding: .8rem 1rem; }
|
||||
.live-sign { font-size: .55rem; }
|
||||
main { padding-inline: 1rem; }
|
||||
h1 { font-size: 3.4rem; }
|
||||
.stats-strip dd { font-size: 1.7rem; }
|
||||
.draw-stage { min-height: 26rem; }
|
||||
.draw-machine { width: min(21rem, 92vw); }
|
||||
.board-grid { border-inline: 0; }
|
||||
.panel { padding-inline: .5rem; }
|
||||
th:last-child, td:last-child { display: none; }
|
||||
.record-list li { grid-template-columns: 2.6rem 1fr; }
|
||||
.record-prize { grid-column: 2; text-align: left; }
|
||||
footer { gap: 1rem; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
|
||||
@media (max-width: 900px) {
|
||||
.topbar { height: auto; min-height: 58px; grid-template-columns: 1fr auto; padding: 10px 14px; }
|
||||
.topbar nav { grid-column: 1 / -1; order: 3; overflow-x: auto; border-top: 1px solid var(--line); }
|
||||
.topbar nav a { min-width: 92px; height: 42px; }
|
||||
.live-sign { display: none; }
|
||||
.workspace { padding: 24px 14px 40px; }
|
||||
.page-head { min-height: 84px; }
|
||||
.page-head h1 { font-size: 23px; }
|
||||
.metric-strip { grid-template-columns: repeat(2, 1fr); overflow: hidden; }
|
||||
.metric-strip > div { border-bottom: 1px solid var(--line); padding-left: 12px; }
|
||||
.table-toolbar { align-items: stretch; flex-direction: column; padding-bottom: 12px; }
|
||||
.filter-field input { flex: 1; width: auto; }
|
||||
.lottery-grid { grid-template-columns: 1fr; }
|
||||
.draw-console { border-right: 0; border-bottom: 1px solid var(--line); padding: 36px 0; }
|
||||
.draw-console > strong { font-size: 56px; }
|
||||
.records-section { padding: 34px 0; }
|
||||
.record-list li { grid-template-columns: 100px 1fr; }
|
||||
.record-list span { grid-column: 2; }
|
||||
.login-layout { grid-template-columns: 1fr; }
|
||||
.login-brand { min-height: 38vh; padding: 34px; border-right: 0; border-bottom: 1px solid var(--line); }
|
||||
.login-brand .brand-mark { margin-bottom: 18px; }
|
||||
.login-brand h1 { font-size: 58px; margin-bottom: 24px; }
|
||||
.login-panel { min-height: 62vh; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user