73 lines
2.5 KiB
HTML
73 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>帅库之家Cookie管理 - 设置</title>
|
||
<link rel="stylesheet" href="options.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header class="header">
|
||
<h1>帅库之家Cookie管理</h1>
|
||
<p class="subtitle">插件设置</p>
|
||
</header>
|
||
|
||
<form id="config-form" class="form">
|
||
<div class="form-section">
|
||
<h2>服务器配置</h2>
|
||
|
||
<div class="form-group">
|
||
<label for="serverUrl">服务器地址</label>
|
||
<input type="url" id="serverUrl" name="serverUrl" placeholder="https://api.skzhijia.com" required>
|
||
<p class="help-text">后台API服务器地址，不需要末尾斜杠</p>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="apiKey">API Key</label>
|
||
<div class="input-group">
|
||
<input type="password" id="apiKey" name="apiKey" placeholder="请输入API Key" required>
|
||
<button type="button" id="btn-toggle-key" class="btn-icon">显示</button>
|
||
</div>
|
||
<p class="help-text">从后台管理页面获取的API Key</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<h2>轮询设置</h2>
|
||
|
||
<div class="form-group">
|
||
<label for="pollInterval">轮询间隔（分钟）</label>
|
||
<select id="pollInterval" name="pollInterval">
|
||
<option value="1">1分钟</option>
|
||
<option value="5" selected>5分钟</option>
|
||
<option value="10">10分钟</option>
|
||
<option value="30">30分钟</option>
|
||
</select>
|
||
<p class="help-text">插件自动检查Cookie状态的间隔时间</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">保存设置</button>
|
||
<button type="button" id="btn-test" class="btn btn-secondary">测试连接</button>
|
||
</div>
|
||
|
||
<div id="message" class="message" style="display: none;"></div>
|
||
</form>
|
||
|
||
<div class="info-section">
|
||
<h2>使用说明</h2>
|
||
<ol>
|
||
<li>在后台管理页面的「爬虫管理」中获取API Key</li>
|
||
<li>将API Key填入上方配置并保存</li>
|
||
<li>登录对应平台后，点击插件图标上传Cookie</li>
|
||
<li>插件会定时检查Cookie状态，过期时图标变红</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="options.js"></script>
|
||
</body>
|
||
</html>
|