157 lines
7.0 KiB
HTML
157 lines
7.0 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
<meta name="theme-color" content="#0f766e">
|
||
<title>热度采集手机版</title>
|
||
<link rel="manifest" href="/manifest.webmanifest">
|
||
<link rel="stylesheet" href="/mobile.css">
|
||
</head>
|
||
<body>
|
||
<section id="auth-gate" class="auth-gate" hidden>
|
||
<form id="auth-form" class="auth-card" action="/auth/login" method="post">
|
||
<div class="auth-title">输入访问密码</div>
|
||
<p>云端使用时需要先验证，验证后这台手机会记住登录状态。</p>
|
||
<input id="auth-password" name="password" type="password" autocomplete="current-password" placeholder="访问密码" required>
|
||
<button id="auth-submit" type="submit">进入手机版</button>
|
||
<div id="auth-message" class="auth-message" aria-live="polite"></div>
|
||
</form>
|
||
</section>
|
||
<main class="mobile-shell">
|
||
<header class="mobile-header">
|
||
<div>
|
||
<h1>节目热度采集</h1>
|
||
<p>移动录入版</p>
|
||
</div>
|
||
<a class="desktop-link" href="/">桌面版</a>
|
||
</header>
|
||
|
||
<section class="device-panel">
|
||
<label class="field">
|
||
<span>这台手机/录入人</span>
|
||
<input id="mobile-device-name" type="text" placeholder="例如：张三手机、商务部手机">
|
||
</label>
|
||
<button id="save-device-name-button" class="secondary-button" type="button">保存名称</button>
|
||
</section>
|
||
|
||
<section class="app-settings-panel">
|
||
<div class="settings-head">
|
||
<div>
|
||
<div class="section-title">手机 App 设置</div>
|
||
<p>绑定电脑或 NAS 地址后，离开局域网再回来也能快速同步。</p>
|
||
</div>
|
||
<span id="mobile-app-state" class="app-state">检测中</span>
|
||
</div>
|
||
<label class="field">
|
||
<span>电脑 / NAS 地址</span>
|
||
<input id="mobile-server-url" type="url" placeholder="例如：http://192.168.18.120:3001">
|
||
</label>
|
||
<div class="setting-actions">
|
||
<button id="save-mobile-server-button" class="secondary-button" type="button">保存地址</button>
|
||
<button id="test-mobile-server-button" class="secondary-button" type="button">测试连接</button>
|
||
</div>
|
||
<div id="mobile-binding-summary" class="binding-summary">尚未绑定固定地址，默认使用当前打开页面。</div>
|
||
</section>
|
||
|
||
<form id="collect-form" class="collect-panel">
|
||
<label class="field">
|
||
<span>节目名</span>
|
||
<input id="program-name" name="name" type="search" placeholder="例如：星愿甜心 生肖奇遇记" autocomplete="off" required>
|
||
</label>
|
||
|
||
<details class="url-box">
|
||
<summary>节目页 URL（可选，自动找不到时填写）</summary>
|
||
<div class="url-fields">
|
||
<input id="url-tencent" name="tencent" type="url" placeholder="腾讯视频 URL">
|
||
<input id="url-youku" name="youku" type="url" placeholder="优酷 URL">
|
||
<input id="url-iqiyi" name="iqiyi" type="url" placeholder="爱奇艺 URL">
|
||
<input id="url-mgtv" name="mgtv" type="url" placeholder="芒果TV URL">
|
||
</div>
|
||
</details>
|
||
|
||
<div class="collect-platforms" aria-label="本次采集平台">
|
||
<span>本次采集</span>
|
||
<label><input type="checkbox" value="tencent" checked>腾讯</label>
|
||
<label><input type="checkbox" value="youku" checked>优酷</label>
|
||
<label><input type="checkbox" value="iqiyi" checked>爱奇艺</label>
|
||
<label><input type="checkbox" value="mgtv" checked>芒果</label>
|
||
</div>
|
||
|
||
<label class="field note-field">
|
||
<span>备注</span>
|
||
<textarea id="mobile-note" rows="3" placeholder="例如：待查上线、朋友推荐、先录入链接"></textarea>
|
||
</label>
|
||
|
||
<div class="actions">
|
||
<button id="collect-button" type="submit">采集一次</button>
|
||
<button id="save-offline-button" class="secondary-button" type="button">保存待同步</button>
|
||
<a id="export-link" class="secondary" href="#" aria-disabled="true">导出 CSV</a>
|
||
</div>
|
||
</form>
|
||
|
||
<section class="notice" aria-live="polite">
|
||
<span id="status-dot" class="dot idle"></span>
|
||
<span id="status-text">等待输入节目名</span>
|
||
</section>
|
||
|
||
<section id="offline-status" class="offline-status">
|
||
<strong>离线录入</strong>
|
||
<span>首次在局域网打开后，会缓存手机版；之后可离线打开并保存待同步。</span>
|
||
</section>
|
||
|
||
<section id="install-hint" class="install-hint">
|
||
<div>
|
||
<strong>安装到手机桌面</strong>
|
||
<span id="install-status">可在手机浏览器菜单中选择“添加到主屏幕”，下次不在局域网也能直接打开录入。</span>
|
||
</div>
|
||
<button id="install-app-button" class="secondary-button" type="button" hidden>安装</button>
|
||
</section>
|
||
|
||
<section class="network">
|
||
<div class="network-title">手机访问地址</div>
|
||
<div id="network-links">正在读取局域网地址...</div>
|
||
<details class="network-help">
|
||
<summary>不在同一 WiFi 怎么办</summary>
|
||
<p>手机连电脑热点最简单；长期使用可以电脑和手机都装 Tailscale；临时外网访问可以用内网穿透转发 3000 端口。</p>
|
||
</details>
|
||
</section>
|
||
|
||
<section class="offline-panel">
|
||
<div class="offline-head">
|
||
<div>
|
||
<div class="section-title">手机待同步</div>
|
||
<p>手机用流量时先存这里，回到局域网后再同步到电脑。</p>
|
||
</div>
|
||
<strong id="offline-count">0</strong>
|
||
</div>
|
||
<div id="offline-list" class="offline-list"></div>
|
||
<div class="draft-actions">
|
||
<button id="sync-offline-button" class="secondary-button" type="button">同步到电脑</button>
|
||
<button id="clear-offline-button" class="secondary-button" type="button">清空待同步</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="batch-panel">
|
||
<div class="section-title">批量离线录入</div>
|
||
<textarea id="mobile-batch-text" rows="5" placeholder="每行一个节目名，可直接粘贴会议名单"></textarea>
|
||
<button id="save-batch-offline-button" class="secondary-button" type="button">批量保存待同步</button>
|
||
</section>
|
||
|
||
<section class="history-strip">
|
||
<div class="section-title">历史节目</div>
|
||
<div id="program-list" class="program-list"></div>
|
||
</section>
|
||
|
||
<section class="results">
|
||
<div class="result-head">
|
||
<div id="table-title" class="result-title">还没有采集结果</div>
|
||
<div id="run-count" class="run-count">0 次</div>
|
||
</div>
|
||
<div id="cards" class="cards"></div>
|
||
</section>
|
||
</main>
|
||
<script src="/mobile.js" type="module"></script>
|
||
</body>
|
||
</html>
|