357 lines
13 KiB
HTML
357 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport"
|
||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||
<title>Airhub - 设置</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||
<style>
|
||
.page-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16px 20px;
|
||
padding-top: calc(env(safe-area-inset-top, 20px) + 20px);
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
top: 0;
|
||
z-index: 10;
|
||
}
|
||
|
||
.back-btn {
|
||
background: rgba(255, 255, 255, 0.25);
|
||
backdrop-filter: blur(8px);
|
||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 22px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #1F2937;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.back-btn:active {
|
||
transform: scale(0.92);
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #1F2937;
|
||
}
|
||
|
||
.settings-content {
|
||
padding: calc(env(safe-area-inset-top, 20px) + 100px) 20px 40px;
|
||
overflow-y: auto;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.settings-section {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 13px;
|
||
color: #9CA3AF;
|
||
padding: 0 4px 8px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.settings-card {
|
||
background: rgba(255, 255, 255, 0.8);
|
||
backdrop-filter: blur(20px);
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 20px rgba(139, 94, 60, 0.08);
|
||
}
|
||
|
||
.settings-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 16px 20px;
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.settings-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.settings-item:active {
|
||
background: rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
.settings-item-icon {
|
||
width: 24px;
|
||
margin-right: 12px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.settings-item-text {
|
||
flex: 1;
|
||
font-size: 16px;
|
||
color: #1F2937;
|
||
}
|
||
|
||
.settings-item-value {
|
||
font-size: 14px;
|
||
color: #9CA3AF;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.settings-item-arrow {
|
||
color: #D1D5DB;
|
||
font-size: 18px;
|
||
}
|
||
|
||
/* 危险操作 */
|
||
.settings-item.danger .settings-item-text {
|
||
color: #EF4444;
|
||
}
|
||
|
||
.settings-item.danger .settings-item-icon {
|
||
color: #EF4444;
|
||
}
|
||
|
||
/* 版本信息 */
|
||
.version-info {
|
||
text-align: center;
|
||
padding: 32px 20px;
|
||
color: #9CA3AF;
|
||
font-size: 13px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="app-container">
|
||
<div class="gradient-bg">
|
||
<div class="gradient-layer layer-1"></div>
|
||
</div>
|
||
|
||
<header class="page-header">
|
||
<button class="back-btn" onclick="history.back()">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M15 18l-6-6 6-6"></path>
|
||
</svg>
|
||
</button>
|
||
<span class="page-title">设置</span>
|
||
<div style="width: 44px;"></div>
|
||
</header>
|
||
|
||
<main class="settings-content">
|
||
<!-- 账号安全 -->
|
||
<div class="settings-section">
|
||
<div class="section-title">账号安全</div>
|
||
<div class="settings-card">
|
||
<div class="settings-item" onclick="showPhone()">
|
||
<span class="settings-item-icon">📱</span>
|
||
<span class="settings-item-text">绑定手机</span>
|
||
<span class="settings-item-value">138****3069</span>
|
||
<span class="settings-item-arrow">›</span>
|
||
</div>
|
||
<div class="settings-item" onclick="changePassword()">
|
||
<span class="settings-item-icon">🔐</span>
|
||
<span class="settings-item-text">账号密码</span>
|
||
<span class="settings-item-arrow">›</span>
|
||
</div>
|
||
<div class="settings-item" onclick="location.href='products.html'">
|
||
<span class="settings-item-icon">📦</span>
|
||
<span class="settings-item-text">设备管理</span>
|
||
<span class="settings-item-arrow">›</span>
|
||
</div>
|
||
<div class="settings-item" onclick="toggleNotification()">
|
||
<span class="settings-item-icon">🔔</span>
|
||
<span class="settings-item-text">推送通知权限</span>
|
||
<span class="settings-item-value" id="notif-status">已开启</span>
|
||
<span class="settings-item-arrow">›</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 关于 -->
|
||
<div class="settings-section">
|
||
<div class="section-title">关于</div>
|
||
<div class="settings-card">
|
||
<div class="settings-item" onclick="checkUpdate()">
|
||
<span class="settings-item-icon">🔄</span>
|
||
<span class="settings-item-text">检查更新</span>
|
||
<span class="settings-item-value">当前最新 1.0.0</span>
|
||
<span class="settings-item-arrow">›</span>
|
||
</div>
|
||
<div class="settings-item" onclick="showHardwareInfo()">
|
||
<span class="settings-item-icon">💻</span>
|
||
<span class="settings-item-text">硬件信息</span>
|
||
<span class="settings-item-arrow">›</span>
|
||
</div>
|
||
<div class="settings-item" onclick="showAgreement()">
|
||
<span class="settings-item-icon">📄</span>
|
||
<span class="settings-item-text">用户协议</span>
|
||
<span class="settings-item-arrow">›</span>
|
||
</div>
|
||
<div class="settings-item" onclick="showPrivacy()">
|
||
<span class="settings-item-icon">🔒</span>
|
||
<span class="settings-item-text">隐私政策</span>
|
||
<span class="settings-item-arrow">›</span>
|
||
</div>
|
||
<div class="settings-item" onclick="showDataCollection()">
|
||
<span class="settings-item-icon">📋</span>
|
||
<span class="settings-item-text">个人信息收集清单</span>
|
||
<span class="settings-item-arrow">›</span>
|
||
</div>
|
||
<div class="settings-item" onclick="showThirdParty()">
|
||
<span class="settings-item-icon">🔗</span>
|
||
<span class="settings-item-text">第三方信息共享清单</span>
|
||
<span class="settings-item-arrow">›</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 账号操作 -->
|
||
<div class="settings-section">
|
||
<div class="settings-card">
|
||
<div class="settings-item danger" onclick="logout()">
|
||
<span class="settings-item-icon">🚪</span>
|
||
<span class="settings-item-text">退出登录</span>
|
||
<span class="settings-item-arrow">›</span>
|
||
</div>
|
||
<div class="settings-item danger" onclick="deleteAccount()">
|
||
<span class="settings-item-icon">⚠️</span>
|
||
<span class="settings-item-text">账号注销</span>
|
||
<span class="settings-item-arrow">›</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="version-info">
|
||
Airhub v1.0.0<br>
|
||
© 2025 Airhub Team
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- 退出登录确认 -->
|
||
<div class="modal-overlay" id="logout-modal">
|
||
<div class="glass-modal">
|
||
<div class="modal-title">确认退出登录?</div>
|
||
<div class="modal-desc">退出后需要重新登录才能使用。</div>
|
||
<div class="modal-actions">
|
||
<button class="modal-btn cancel" onclick="closeLogoutModal()">取消</button>
|
||
<button class="modal-btn confirm" onclick="confirmLogout()">退出</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 通用提示弹窗 -->
|
||
<div class="modal-overlay" id="message-modal">
|
||
<div class="glass-modal">
|
||
<div class="modal-title" id="msg-title">提示</div>
|
||
<div class="modal-desc" id="msg-desc">内容</div>
|
||
<div class="modal-actions">
|
||
<button class="modal-btn confirm" onclick="closeMessageModal()">确定</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 账号注销确认 -->
|
||
<div class="modal-overlay" id="delete-modal">
|
||
<div class="glass-modal">
|
||
<div class="modal-title">确认注销账号?</div>
|
||
<div class="modal-desc" style="color: #EF4444;">账号注销后所有数据将被永久删除，且无法恢复。</div>
|
||
<div class="modal-actions">
|
||
<button class="modal-btn cancel" onclick="closeDeleteModal()">取消</button>
|
||
<button class="modal-btn confirm" style="background: #EF4444;" onclick="confirmDelete()">确认注销</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Modal Helpers
|
||
function showMessage(title, desc) {
|
||
document.getElementById('msg-title').innerText = title;
|
||
document.getElementById('msg-desc').innerText = desc;
|
||
document.getElementById('message-modal').classList.add('active');
|
||
}
|
||
|
||
function closeMessageModal() {
|
||
document.getElementById('message-modal').classList.remove('active');
|
||
}
|
||
|
||
function showPhone() {
|
||
showMessage('绑定手机', '138****3069');
|
||
}
|
||
|
||
function changePassword() {
|
||
showMessage('提示', '密码修改功能开发中...');
|
||
}
|
||
|
||
function toggleNotification() {
|
||
const el = document.getElementById('notif-status');
|
||
const status = el.innerText === '已开启' ? '已关闭' : '已开启';
|
||
el.innerText = status;
|
||
/* showMessage('推送通知', `推送通知已${status}`); */
|
||
}
|
||
|
||
function checkUpdate() {
|
||
showMessage('检查更新', '当前已是最新版本 v1.0.0');
|
||
}
|
||
|
||
function showHardwareInfo() {
|
||
showMessage('硬件信息', '设备型号: Airhub_5G\n固件版本: 2.1.3\nMAC地址: AA:BB:CC:DD:EE:FF');
|
||
}
|
||
|
||
function showAgreement() {
|
||
location.href = 'agreement.html';
|
||
}
|
||
|
||
function showPrivacy() {
|
||
location.href = 'privacy.html';
|
||
}
|
||
|
||
function showDataCollection() {
|
||
location.href = 'collection-list.html';
|
||
}
|
||
|
||
function showThirdParty() {
|
||
location.href = 'sharing-list.html';
|
||
}
|
||
|
||
function logout() {
|
||
document.getElementById('logout-modal').classList.add('active');
|
||
}
|
||
|
||
function closeLogoutModal() {
|
||
document.getElementById('logout-modal').classList.remove('active');
|
||
}
|
||
|
||
function confirmLogout() {
|
||
closeLogoutModal();
|
||
location.href = 'login.html';
|
||
}
|
||
|
||
function deleteAccount() {
|
||
document.getElementById('delete-modal').classList.add('active');
|
||
}
|
||
|
||
function closeDeleteModal() {
|
||
document.getElementById('delete-modal').classList.remove('active');
|
||
}
|
||
|
||
function confirmDelete() {
|
||
closeDeleteModal();
|
||
showMessage('已提交', '账号注销申请已提交，将在7个工作日内处理。');
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |