a7ff557942
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
140 lines
5.4 KiB
HTML
140 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>磁力助手</title>
|
||
<style>
|
||
:root {
|
||
--m-bg-deep: #0a0e14;
|
||
--m-bg-primary: #0f1419;
|
||
--m-bg-secondary: #1a1f2e;
|
||
--m-bg-card: rgba(26, 31, 46, 0.92);
|
||
--m-accent: #00d4aa;
|
||
--m-accent-2: #00f5c4;
|
||
--m-danger: #ef4444;
|
||
--m-text-primary: #f0f4f8;
|
||
--m-text-secondary: #8892a4;
|
||
--m-text-muted: #5c6578;
|
||
--m-border: rgba(255,255,255,0.08);
|
||
--m-radius: 12px;
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
margin: 0;
|
||
min-width: 320px;
|
||
background: var(--m-bg-primary);
|
||
color: var(--m-text-primary);
|
||
font: 13px/1.5 "Microsoft YaHei", sans-serif;
|
||
padding: 18px;
|
||
}
|
||
|
||
.header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
|
||
.title { font-size: 18px; font-weight: 700; color: var(--m-accent); }
|
||
.subtitle { font-size: 11px; color: var(--m-text-secondary); }
|
||
.header-status { display:flex; flex-direction:column; align-items:flex-end; gap:6px; min-width:120px; }
|
||
.header-status .status { margin-top:0; }
|
||
.card {
|
||
background: var(--m-bg-card);
|
||
border: 1px solid var(--m-border);
|
||
border-radius: 16px;
|
||
padding: 14px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.card-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
|
||
.meta { color: var(--m-text-secondary); font-size: 12px; }
|
||
.row { display:flex; gap:8px; margin-top:10px; }
|
||
.col { display:flex; flex-direction:column; gap:10px; }
|
||
input {
|
||
width: 100%;
|
||
padding: 10px 12px;
|
||
border-radius: var(--m-radius);
|
||
border: 1px solid var(--m-border);
|
||
background: var(--m-bg-secondary);
|
||
color: var(--m-text-primary);
|
||
outline: none;
|
||
}
|
||
input:focus { border-color: var(--m-accent); }
|
||
button {
|
||
border: none;
|
||
border-radius: var(--m-radius);
|
||
padding: 10px 12px;
|
||
cursor: pointer;
|
||
font-weight: 700;
|
||
}
|
||
.primary { background: linear-gradient(135deg, var(--m-accent), var(--m-accent-2)); color: var(--m-bg-deep); }
|
||
.secondary { background: var(--m-bg-secondary); color: var(--m-text-primary); border: 1px solid var(--m-border); }
|
||
.danger { background: rgba(239,68,68,0.16); color: #ff8585; border: 1px solid rgba(239,68,68,0.25); }
|
||
.status { display:flex; align-items:center; gap:8px; margin-top:8px; }
|
||
.dot { width: 8px; height: 8px; border-radius:50%; background: var(--m-danger); box-shadow: 0 0 8px rgba(239,68,68,.35); }
|
||
.dot.ok { background:#10b981; box-shadow:0 0 8px rgba(16,185,129,.35); }
|
||
.small { font-size: 11px; color: var(--m-text-muted); }
|
||
.hidden { display:none; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<div>
|
||
<div class="title">MAGNET CLOUD</div>
|
||
<div class="subtitle">扩展独立云同步中心</div>
|
||
</div>
|
||
<div class="header-status">
|
||
<div class="status"><span id="accountDot" class="dot"></span><span id="accountText" class="meta">账号状态加载中</span></div>
|
||
<div class="status"><span id="serverDot" class="dot"></span><span id="serverText" class="meta">服务器状态加载中</span></div>
|
||
<div id="syncEmail" class="small"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card col">
|
||
<div class="card-title">云端状态看板</div>
|
||
<div id="cloudStatsSummary" class="meta">正在读取云端统计...</div>
|
||
<div id="cloudStatsLatest" class="small"></div>
|
||
<div id="cloudStatsTables" class="small"></div>
|
||
</div>
|
||
|
||
<div class="card col">
|
||
<div class="card-title">本地状态看板</div>
|
||
<div id="localStatsSummary" class="meta">正在读取本地统计...</div>
|
||
<div id="localStatsStorage" class="small"></div>
|
||
<div id="localStatsMeta" class="small"></div>
|
||
</div>
|
||
|
||
<div id="authLoggedOut" class="card col">
|
||
<div class="card-title">登录 / 注册</div>
|
||
<div class="meta">账号密码只会在扩展页面中输入，不再放在网页里。</div>
|
||
<input id="emailInput" type="text" placeholder="邮箱">
|
||
<input id="passwordInput" type="password" placeholder="密码，至少6位">
|
||
<div class="row">
|
||
<button id="loginBtn" class="primary" type="button">登录</button>
|
||
<button id="registerBtn" class="secondary" type="button">注册</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="authLoggedIn" class="card col hidden">
|
||
<div class="card-title">已登录</div>
|
||
<div id="loggedInEmail" class="meta"></div>
|
||
<div class="row">
|
||
<button id="syncNowBtn" class="primary" type="button">立即同步</button>
|
||
<button id="logoutBtn" class="danger" type="button">退出登录</button>
|
||
</div>
|
||
<div id="syncProgressText" class="small"></div>
|
||
</div>
|
||
|
||
<div class="card col">
|
||
<div class="card-title">下载器推荐</div>
|
||
<div class="meta">如果点击磁力“下载”按钮没有反应，请先安装本地下载器。qBittorrent 更适合磁力资源，Motrix 更适合偏轻量的使用习惯。</div>
|
||
<div class="row">
|
||
<button id="downloadNode2Btn" class="primary" type="button">qB 节点2（推荐）</button>
|
||
<button id="downloadOfficialBtn" class="secondary" type="button">qB 官方节点</button>
|
||
</div>
|
||
<div class="row">
|
||
<button id="downloadMotrixBtn" class="secondary" type="button">Motrix 下载</button>
|
||
</div>
|
||
<div class="small">安装完成后，请确保 qBittorrent 已关联 magnet 磁力链接协议。</div>
|
||
</div>
|
||
|
||
<div id="message" class="small"></div>
|
||
<script src="popup.js"></script>
|
||
</body>
|
||
</html>
|