Update index.html
更新UI 预览图片：https://ent.img.ac.cn/20250612/1/684a69af77ac5.jpg
This commit is contained in:
绎泽
GitHub
parent
da5b4e5e6c
commit
dae742fc6b
@ -1,66 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<!DOCTYPE html><html lang="zh-CN" data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OpenList Token获取工具</title>
|
||||
<link href="static/style-all.css" rel="stylesheet">
|
||||
<link href="static/bootstrap.css" rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
|
||||
<title>OpenList Token 获取工具</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<style>
|
||||
:root {
|
||||
--bg-color-light: #ffffff;
|
||||
--text-color-light: #000000;
|
||||
--bg-color-dark: #1e1e2f;
|
||||
--text-color-dark: #f0f0f0;
|
||||
--accent-color: #00d1b2;
|
||||
}[data-theme="light"] body {
|
||||
background-color: var(--bg-color-light);
|
||||
color: var(--text-color-light);
|
||||
}
|
||||
|
||||
[data-theme="dark"] body {
|
||||
background-color: var(--bg-color-dark);
|
||||
color: var(--text-color-dark);
|
||||
}
|
||||
|
||||
.form-container {
|
||||
max-width: 800px;
|
||||
margin: 3rem auto;
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
|
||||
background: inherit;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-control:read-only {
|
||||
background-color: #f5f5f5;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toggle-theme {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="form-container" style="max-width: 1600px;">
|
||||
<h1>OpenList Token获取工具</h1>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="site-select">网盘名称</label>
|
||||
<select id="site-select">
|
||||
<option value="official" selected>OneDrive 官方站点</option>
|
||||
<!-- <option value="cn">OneDrive 世纪互联</option>-->
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="client-id">客户端ID(Client ID)</label>
|
||||
<input type="text" id="client-id" name="client-id">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="app-secret">应用机密(App Secret)</label>
|
||||
<input type="text" id="app-secret" name="app-secret">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="callback-url">回调地址(Callback URL)</label>
|
||||
<input type="text" id="callback-url" name="callback-url" value="https://api.oplist.org/onedrive/callback"
|
||||
readonly onclick="autoCopy(this)">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<button class="btn btn-success" onclick="getLogin()">获取Token</button>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="access-token">访问秘钥(Access Token)</label>
|
||||
<textarea type="text" id="access-token" name="access-token" readonly onclick="autoCopy(this)"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="refresh-token">刷新秘钥(Refresh Token)</label>
|
||||
<textarea type="text" id="refresh-token" name="refresh-token" readonly onclick="autoCopy(this)"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
本获取工具不存储任何用户信息，开源于<a href="https://github.com/OpenListTeam/cf-worker-api">CF-Worker-API</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-theme">
|
||||
<button class="btn btn-outline-secondary" onclick="toggleTheme()">切换主题</button>
|
||||
</div><div class="container form-container">
|
||||
<h2 class="text-center mb-4">🔐 OpenList Token 获取工具</h2><div class="mb-3">
|
||||
<label for="site-select" class="form-label">网盘名称</label>
|
||||
<select id="site-select" class="form-select">
|
||||
<option value="official" selected>OneDrive 官方站点</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<div class="mb-3">
|
||||
<label for="client-id" class="form-label">客户端 ID</label>
|
||||
<input type="text" id="client-id" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="app-secret" class="form-label">应用机密</label>
|
||||
<input type="text" id="app-secret" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="callback-url" class="form-label">回调地址</label>
|
||||
<input type="text" id="callback-url" class="form-control" value="https://api.oplist.org/onedrive/callback" readonly onclick="autoCopy(this)">
|
||||
</div>
|
||||
|
||||
<div class="d-grid gap-2 mb-3">
|
||||
<button class="btn btn-primary" onclick="getLogin()">获取 Token</button>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="access-token" class="form-label">访问秘钥</label>
|
||||
<textarea id="access-token" class="form-control" rows="3" readonly onclick="autoCopy(this)"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="refresh-token" class="form-label">刷新秘钥</label>
|
||||
<textarea id="refresh-token" class="form-control" rows="3" readonly onclick="autoCopy(this)"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="text-muted text-center">
|
||||
<p style="text-align:center">
|
||||
本工具不储存任何用户信息<br>
|
||||
开源于 <a href=" " target="_blank">GitHub</a > | by <a href="https://github.com/OpenListTeam" target="_blank">OpenListTeam</a >
|
||||
</p >
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
let intervalId;
|
||||
|
||||
@ -144,5 +184,19 @@
|
||||
}
|
||||
|
||||
getToken();
|
||||
</script>
|
||||
</html>
|
||||
|
||||
//手动切换主题模式
|
||||
function toggleTheme() {
|
||||
const html = document.documentElement;
|
||||
const current = html.getAttribute("data-theme");
|
||||
html.setAttribute("data-theme", current === "dark" ? "light" : "dark");
|
||||
}
|
||||
|
||||
// 自动切换暗黑模式
|
||||
(function () {
|
||||
const hour = new Date().getHours();
|
||||
if (hour < 6 || hour >= 18) document.documentElement.setAttribute("data-theme", "dark");
|
||||
getToken();
|
||||
})();
|
||||
</script></body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user