mirror of
https://github.com/cnlimiter/codex-register.git
synced 2026-07-12 16:01:22 +08:00
4
This commit is contained in:
cnlimiter
240
templates/email_services.html
Normal file
240
templates/email_services.html
Normal file
@@ -0,0 +1,240 @@
|
||||
<!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>
|
||||
</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>
|
||||
|
||||
<script src="/static/js/utils.js"></script>
|
||||
<script src="/static/js/email_services.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user