246 lines
7.4 KiB
HTML
246 lines
7.4 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>验证处理 - WeChat Download API</title>
|
||
<style>
|
||
:root {
|
||
--primary-color: #1890ff;
|
||
--warning-color: #fa8c16;
|
||
--error-color: #ff4d4f;
|
||
--text-primary: #262626;
|
||
--text-secondary: #595959;
|
||
--bg-primary: #ffffff;
|
||
--bg-secondary: #fafafa;
|
||
--border-light: #f0f0f0;
|
||
--border-base: #d9d9d9;
|
||
--shadow-base: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||
--radius-base: 8px;
|
||
--radius-large: 12px;
|
||
--font-xs: 12px;
|
||
--font-sm: 14px;
|
||
--font-base: 16px;
|
||
--font-lg: 20px;
|
||
--duration-fast: 200ms;
|
||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||
background: var(--bg-secondary);
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 24px;
|
||
}
|
||
|
||
.container {
|
||
background: var(--bg-primary);
|
||
border: 1px solid var(--border-light);
|
||
border-radius: var(--radius-large);
|
||
box-shadow: var(--shadow-base);
|
||
padding: 40px 32px;
|
||
width: 100%;
|
||
max-width: 480px;
|
||
}
|
||
|
||
h1 {
|
||
font-size: var(--font-lg);
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: var(--font-xs);
|
||
color: var(--text-secondary);
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
label {
|
||
display: block;
|
||
font-size: var(--font-sm);
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
input[type="text"] {
|
||
width: 100%;
|
||
padding: 10px 12px;
|
||
border: 1px solid var(--border-base);
|
||
border-radius: var(--radius-base);
|
||
font-size: var(--font-sm);
|
||
color: var(--text-primary);
|
||
outline: none;
|
||
transition: border-color var(--duration-fast) var(--ease-in-out);
|
||
}
|
||
|
||
input[type="text"]::placeholder {
|
||
color: var(--border-base);
|
||
}
|
||
|
||
input[type="text"]:focus {
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
.btn {
|
||
display: block;
|
||
width: 100%;
|
||
padding: 10px 0;
|
||
border: none;
|
||
border-radius: var(--radius-base);
|
||
background: var(--primary-color);
|
||
color: #fff;
|
||
font-size: var(--font-sm);
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
margin-top: 16px;
|
||
transition: background var(--duration-fast) var(--ease-in-out);
|
||
}
|
||
|
||
.btn:hover { background: #096dd9; }
|
||
|
||
.steps {
|
||
margin-top: 32px;
|
||
padding-top: 24px;
|
||
border-top: 1px solid var(--border-light);
|
||
}
|
||
|
||
.steps-title {
|
||
font-size: var(--font-sm);
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.step {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.step:last-child { margin-bottom: 0; }
|
||
|
||
.step-num {
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--border-light);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: var(--font-xs);
|
||
font-weight: 600;
|
||
color: var(--text-secondary);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.step-content {
|
||
font-size: var(--font-sm);
|
||
color: var(--text-secondary);
|
||
line-height: 1.6;
|
||
padding-top: 2px;
|
||
}
|
||
|
||
.step-content strong {
|
||
color: var(--text-primary);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.note {
|
||
margin-top: 24px;
|
||
padding: 12px 16px;
|
||
background: rgba(250, 140, 22, 0.06);
|
||
border-left: 3px solid var(--warning-color);
|
||
border-radius: 0 var(--radius-base) var(--radius-base) 0;
|
||
font-size: var(--font-xs);
|
||
color: var(--text-secondary);
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.back-link {
|
||
display: block;
|
||
margin-top: 24px;
|
||
text-align: center;
|
||
font-size: var(--font-xs);
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
transition: color var(--duration-fast) var(--ease-in-out);
|
||
}
|
||
|
||
.back-link:hover { color: var(--primary-color); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>验证处理</h1>
|
||
<p class="subtitle">在浏览器中完成微信安全验证</p>
|
||
|
||
<label for="articleUrl">文章 URL</label>
|
||
<input
|
||
type="text"
|
||
id="articleUrl"
|
||
placeholder="https://mp.weixin.qq.com/s/xxx">
|
||
<button class="btn" onclick="openVerify()">在新窗口打开</button>
|
||
|
||
<div class="steps">
|
||
<div class="steps-title">操作步骤</div>
|
||
<div class="step">
|
||
<span class="step-num">1</span>
|
||
<span class="step-content"><strong>粘贴链接</strong> — 输入触发验证的文章 URL</span>
|
||
</div>
|
||
<div class="step">
|
||
<span class="step-num">2</span>
|
||
<span class="step-content"><strong>打开页面</strong> — 点击按钮在新窗口中打开</span>
|
||
</div>
|
||
<div class="step">
|
||
<span class="step-num">3</span>
|
||
<span class="step-content"><strong>完成验证</strong> — 完成滑块或点击验证码</span>
|
||
</div>
|
||
<div class="step">
|
||
<span class="step-num">4</span>
|
||
<span class="step-content"><strong>等待恢复</strong> — 验证通过后等待 5-10 分钟再使用 API</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="note">
|
||
验证通过后，Cookie 会自动更新。建议等待几分钟再继续调用接口，让微信系统恢复稳定。
|
||
</div>
|
||
|
||
<a href="/admin.html" class="back-link">返回管理面板</a>
|
||
</div>
|
||
|
||
<script>
|
||
function openVerify() {
|
||
var url = document.getElementById('articleUrl').value.trim();
|
||
|
||
if (!url) {
|
||
alert('请输入文章 URL');
|
||
return;
|
||
}
|
||
|
||
if (url.indexOf('mp.weixin.qq.com') === -1) {
|
||
alert('请输入有效的微信文章 URL');
|
||
return;
|
||
}
|
||
|
||
var w = window.open(url, '_blank', 'width=1200,height=800');
|
||
if (!w) {
|
||
alert('浏览器阻止了弹出窗口，请允许后重试');
|
||
}
|
||
}
|
||
|
||
document.getElementById('articleUrl').addEventListener('keydown', function (e) {
|
||
if (e.key === 'Enter') openVerify();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|