mirror of
https://github.com/cnlimiter/codex-register.git
synced 2026-05-06 20:02:51 +08:00
339 lines
17 KiB
HTML
339 lines
17 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>邮箱服务 - OpenAI 注册系统</title>
|
||
<link rel="stylesheet" href="/static/css/style.css">
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📧</text></svg>">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar">
|
||
<div class="nav-brand">
|
||
<h1>OpenAI 注册系统</h1>
|
||
</div>
|
||
<div class="nav-links">
|
||
<a href="/" class="nav-link">注册</a>
|
||
<a href="/accounts" class="nav-link">账号管理</a>
|
||
<a href="/email-services" class="nav-link active">邮箱服务</a>
|
||
<a href="/settings" class="nav-link">设置</a>
|
||
<a href="/logout" class="nav-link">退出</a>
|
||
</div>
|
||
<button class="theme-toggle" onclick="theme.toggle()" title="切换主题">
|
||
🌙
|
||
</button>
|
||
</nav>
|
||
|
||
<!-- 主内容区 -->
|
||
<main class="main-content">
|
||
<div class="page-header">
|
||
<h2>邮箱服务管理</h2>
|
||
<p class="subtitle">配置和管理注册所需的邮箱服务</p>
|
||
</div>
|
||
|
||
<!-- 统计卡片 -->
|
||
<div class="stats-grid">
|
||
<div class="stat-card info">
|
||
<div class="stat-value" id="outlook-count">0</div>
|
||
<div class="stat-label">Outlook 账户</div>
|
||
</div>
|
||
<div class="stat-card success">
|
||
<div class="stat-value" id="custom-count">0</div>
|
||
<div class="stat-label">自定义域名</div>
|
||
</div>
|
||
<div class="stat-card warning">
|
||
<div class="stat-value" id="tempmail-status">可用</div>
|
||
<div class="stat-label">临时邮箱</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value" id="total-enabled">0</div>
|
||
<div class="stat-label">已启用服务</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Outlook 管理 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>📥 Outlook 批量导入</h3>
|
||
<button class="btn btn-ghost btn-sm" id="toggle-outlook-import">展开</button>
|
||
</div>
|
||
<div class="card-body" id="outlook-import-body" style="display: none;">
|
||
<div class="import-info">
|
||
<p><strong>支持格式：</strong></p>
|
||
<ul>
|
||
<li><code>邮箱----密码</code> （密码认证）</li>
|
||
<li><code>邮箱----密码----client_id----refresh_token</code> （XOAUTH2 认证，推荐）</li>
|
||
</ul>
|
||
<p>每行一个账户，使用四个连字符（----）分隔字段。以 # 开头的行将被忽略。</p>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="outlook-import-data">批量导入数据</label>
|
||
<textarea id="outlook-import-data" rows="8" placeholder="example@outlook.com----password123 test@outlook.com----password456----client_id----refresh_token"></textarea>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>
|
||
<input type="checkbox" id="outlook-import-enabled" checked>
|
||
导入后启用
|
||
</label>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="outlook-import-priority">优先级</label>
|
||
<input type="number" id="outlook-import-priority" value="0" min="0">
|
||
</div>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-primary" id="outlook-import-btn">📥 开始导入</button>
|
||
<button type="button" class="btn btn-secondary" id="clear-import-btn">清空</button>
|
||
</div>
|
||
<div id="import-result" style="display: none; margin-top: var(--spacing-md);"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 自定义域名管理 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>🔗 自定义域名服务</h3>
|
||
<button class="btn btn-primary btn-sm" id="add-custom-btn">➕ 添加服务</button>
|
||
</div>
|
||
<div class="card-body" style="padding: 0;">
|
||
<div class="table-container">
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 40px;"><input type="checkbox" id="select-all-custom"></th>
|
||
<th>名称</th>
|
||
<th style="width: 200px;">API 地址</th>
|
||
<th style="width: 100px;">状态</th>
|
||
<th style="width: 80px;">优先级</th>
|
||
<th style="width: 160px;">最后使用</th>
|
||
<th style="width: 180px;">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="custom-services-table">
|
||
<tr>
|
||
<td colspan="7">
|
||
<div class="empty-state">
|
||
<div class="skeleton skeleton-text"></div>
|
||
<div class="skeleton skeleton-text" style="width: 80%;"></div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Outlook 账户列表 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>📧 Outlook 账户列表</h3>
|
||
<button class="btn btn-danger btn-sm" id="batch-delete-outlook-btn" disabled>🗑️ 批量删除</button>
|
||
</div>
|
||
<div class="card-body" style="padding: 0;">
|
||
<div class="table-container">
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 40px;"><input type="checkbox" id="select-all-outlook"></th>
|
||
<th>邮箱</th>
|
||
<th style="width: 100px;">认证方式</th>
|
||
<th style="width: 100px;">状态</th>
|
||
<th style="width: 80px;">优先级</th>
|
||
<th style="width: 160px;">最后使用</th>
|
||
<th style="width: 140px;">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="outlook-accounts-table">
|
||
<tr>
|
||
<td colspan="7">
|
||
<div class="empty-state">
|
||
<div class="skeleton skeleton-text"></div>
|
||
<div class="skeleton skeleton-text" style="width: 80%;"></div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 临时邮箱配置 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>🌐 临时邮箱配置</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<form id="tempmail-form">
|
||
<div class="form-group">
|
||
<label for="tempmail-api">Tempmail.lol API 地址</label>
|
||
<input type="text" id="tempmail-api" name="api_url" placeholder="https://tempmail.lol/api">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>
|
||
<input type="checkbox" id="tempmail-enabled" checked>
|
||
启用临时邮箱
|
||
</label>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">💾 保存设置</button>
|
||
<button type="button" class="btn btn-secondary" id="test-tempmail-btn">🔌 测试连接</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- 添加自定义域名模态框 -->
|
||
<div class="modal" id="add-custom-modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>➕ 添加自定义域名服务</h3>
|
||
<button class="modal-close" id="close-custom-modal">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="add-custom-form">
|
||
<div class="form-group">
|
||
<label for="custom-name">服务名称</label>
|
||
<input type="text" id="custom-name" name="name" required placeholder="例如：我的域名邮箱">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="custom-api-url">API 地址</label>
|
||
<input type="text" id="custom-api-url" name="api_url" required placeholder="https://api.example.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="custom-api-key">API 密钥 (可选)</label>
|
||
<input type="text" id="custom-api-key" name="api_key" placeholder="API Key">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="custom-domain">邮箱域名</label>
|
||
<input type="text" id="custom-domain" name="domain" placeholder="example.com">
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="custom-priority">优先级</label>
|
||
<input type="number" id="custom-priority" name="priority" value="0" min="0">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>
|
||
<input type="checkbox" id="custom-enabled" name="enabled" checked>
|
||
启用服务
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">添加</button>
|
||
<button type="button" class="btn btn-secondary" id="cancel-add-custom">取消</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 编辑自定义域名模态框 -->
|
||
<div class="modal" id="edit-custom-modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>✏️ 编辑自定义域名服务</h3>
|
||
<button class="modal-close" id="close-edit-custom-modal">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="edit-custom-form">
|
||
<input type="hidden" id="edit-custom-id" name="id">
|
||
<div class="form-group">
|
||
<label for="edit-custom-name">服务名称</label>
|
||
<input type="text" id="edit-custom-name" name="name" required placeholder="例如：我的域名邮箱">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-custom-api-url">API 地址</label>
|
||
<input type="text" id="edit-custom-api-url" name="api_url" required placeholder="https://api.example.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-custom-api-key">API 密钥</label>
|
||
<input type="text" id="edit-custom-api-key" name="api_key" placeholder="API Key">
|
||
<small style="color: var(--text-muted);">留空则保持原值不变</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-custom-domain">邮箱域名</label>
|
||
<input type="text" id="edit-custom-domain" name="domain" placeholder="example.com">
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="edit-custom-priority">优先级</label>
|
||
<input type="number" id="edit-custom-priority" name="priority" value="0" min="0">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>
|
||
<input type="checkbox" id="edit-custom-enabled" name="enabled">
|
||
启用服务
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">保存</button>
|
||
<button type="button" class="btn btn-secondary" id="cancel-edit-custom">取消</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 编辑 Outlook 账户模态框 -->
|
||
<div class="modal" id="edit-outlook-modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>✏️ 编辑 Outlook 账户</h3>
|
||
<button class="modal-close" id="close-edit-outlook-modal">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="edit-outlook-form">
|
||
<input type="hidden" id="edit-outlook-id" name="id">
|
||
<div class="form-group">
|
||
<label for="edit-outlook-email">邮箱地址</label>
|
||
<input type="text" id="edit-outlook-email" name="email" required placeholder="example@outlook.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-outlook-password">密码</label>
|
||
<input type="password" id="edit-outlook-password" name="password" placeholder="留空则保持原值不变">
|
||
<small style="color: var(--text-muted);">留空则保持原值不变</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-outlook-client-id">OAuth Client ID (可选)</label>
|
||
<input type="text" id="edit-outlook-client-id" name="client_id" placeholder="用于 XOAUTH2 认证">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-outlook-refresh-token">OAuth Refresh Token (可选)</label>
|
||
<input type="text" id="edit-outlook-refresh-token" name="refresh_token" placeholder="留空则保持原值不变">
|
||
<small style="color: var(--text-muted);">留空则保持原值不变</small>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="edit-outlook-priority">优先级</label>
|
||
<input type="number" id="edit-outlook-priority" name="priority" value="0" min="0">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>
|
||
<input type="checkbox" id="edit-outlook-enabled" name="enabled">
|
||
启用账户
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">保存</button>
|
||
<button type="button" class="btn btn-secondary" id="cancel-edit-outlook">取消</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/static/js/utils.js"></script>
|
||
<script src="/static/js/email_services.js"></script>
|
||
</body>
|
||
</html>
|