227 lines
12 KiB
HTML
227 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=390, initial-scale=1">
|
|
<title>Kalei — Settings</title>
|
|
<link rel="stylesheet" href="../../assets/design-system.css">
|
|
<style>
|
|
.settings-section {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.settings-group {
|
|
background: var(--kalei-navy);
|
|
border: 1px solid var(--twilight);
|
|
border-radius: var(--radius-xl);
|
|
overflow: hidden;
|
|
}
|
|
.settings-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-3) var(--space-4);
|
|
text-decoration: none;
|
|
transition: background 0.15s;
|
|
border-bottom: 1px solid var(--twilight);
|
|
}
|
|
.settings-item:last-child { border-bottom: none; }
|
|
.settings-item:hover { background: var(--deep-glass); }
|
|
.settings-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: var(--radius-md);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.settings-item-text { flex: 1; }
|
|
.settings-item-label {
|
|
font-size: 15px;
|
|
color: var(--soft-light);
|
|
display: block;
|
|
}
|
|
.settings-item-desc {
|
|
font-size: 12px;
|
|
color: var(--dim-light);
|
|
margin-top: 1px;
|
|
display: block;
|
|
}
|
|
.settings-chevron { color: var(--faint-light); }
|
|
.settings-version {
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: var(--faint-light);
|
|
margin: var(--space-4) 0 var(--space-6);
|
|
}
|
|
.danger-item .settings-item-label { color: var(--ruby); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="device-frame">
|
|
|
|
<!-- STATUS BAR -->
|
|
<div class="status-bar">
|
|
<span class="time">9:41</span>
|
|
<div class="icons">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="7" width="2.5" height="5" rx="0.5" fill="#E2E8F0" opacity="0.4"/><rect x="4.5" y="5" width="2.5" height="7" rx="0.5" fill="#E2E8F0" opacity="0.6"/><rect x="8" y="3" width="2.5" height="9" rx="0.5" fill="#E2E8F0" opacity="0.8"/><rect x="11.5" y="1" width="2.5" height="11" rx="0.5" fill="#E2E8F0"/></svg>
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M 2,8 C 4,4 12,4 14,8" stroke="#E2E8F0" stroke-width="1.2" fill="none" stroke-linecap="round"/><path d="M 4,10 C 6,7 10,7 12,10" stroke="#E2E8F0" stroke-width="1" fill="none" opacity="0.8" stroke-linecap="round"/><circle cx="8" cy="12" r="1.2" fill="#E2E8F0"/></svg>
|
|
<svg width="24" height="12" viewBox="0 0 24 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#E2E8F0" stroke-width="1" opacity="0.5"/><rect x="22" y="3" width="2" height="6" rx="1" fill="#E2E8F0" opacity="0.3"/><rect x="2" y="2" width="16" height="8" rx="1.5" fill="#10B981" opacity="0.9"/></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- NAV HEADER -->
|
|
<div class="nav-header">
|
|
<a class="nav-back" href="35-you-profile.html">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</a>
|
|
<span class="nav-title">Settings</span>
|
|
<span class="nav-action"></span>
|
|
</div>
|
|
|
|
<!-- SCREEN CONTENT -->
|
|
<div class="screen-content" style="padding-top: var(--space-4);">
|
|
|
|
<!-- Profile Section -->
|
|
<div class="settings-section">
|
|
<div class="label text-dim" style="margin-bottom: var(--space-2);">Profile</div>
|
|
<div class="settings-group">
|
|
<div class="settings-item" style="cursor: default;">
|
|
<div class="settings-icon" style="background: rgba(139,92,246,0.1);">
|
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
<circle cx="9" cy="7" r="3" stroke="var(--amethyst-light)" stroke-width="1.2"/>
|
|
<path d="M3 15c0-3 3-4.5 6-4.5s6 1.5 6 4.5" stroke="var(--amethyst-light)" stroke-width="1.2" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="settings-item-text">
|
|
<span class="settings-item-label">Alex</span>
|
|
<span class="settings-item-desc">alex@email.com</span>
|
|
</div>
|
|
</div>
|
|
<a class="settings-item" href="#">
|
|
<div class="settings-icon" style="background: rgba(139,92,246,0.1);">
|
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
<path d="M13 2L16 5L7 14L3 15L4 11L13 2Z" stroke="var(--amethyst-light)" stroke-width="1.2" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="settings-item-text">
|
|
<span class="settings-item-label">Edit Name</span>
|
|
</div>
|
|
<svg class="settings-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</a>
|
|
<a class="settings-item" href="../onboarding/05-style-selection.html">
|
|
<div class="settings-icon" style="background: rgba(139,92,246,0.1);">
|
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
<path d="M9 2L13 8H5L9 2Z" fill="none" stroke="var(--amethyst-light)" stroke-width="1.2" stroke-linejoin="round"/>
|
|
<path d="M5 8L2 14H8L5 8Z" fill="none" stroke="var(--amethyst-light)" stroke-width="1.2" stroke-linejoin="round"/>
|
|
<path d="M13 8L10 14H16L13 8Z" fill="none" stroke="var(--amethyst-light)" stroke-width="1.2" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="settings-item-text">
|
|
<span class="settings-item-label">Coaching Style</span>
|
|
<span class="settings-item-desc">Currently: Compassionate</span>
|
|
</div>
|
|
<svg class="settings-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notifications Section -->
|
|
<div class="settings-section">
|
|
<div class="label text-dim" style="margin-bottom: var(--space-2);">Notifications</div>
|
|
<div class="settings-group">
|
|
<a class="settings-item" href="../system-states/62-notification-settings.html">
|
|
<div class="settings-icon" style="background: rgba(59,130,246,0.1);">
|
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
<path d="M9 2C9 2 5 4 5 9V13L3 15H15L13 13V9C13 4 9 2 9 2Z" stroke="var(--sapphire-light)" stroke-width="1.2" stroke-linejoin="round"/>
|
|
<path d="M7 15c0 1.1.9 2 2 2s2-.9 2-2" stroke="var(--sapphire-light)" stroke-width="1.2" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="settings-item-text">
|
|
<span class="settings-item-label">Notifications</span>
|
|
<span class="settings-item-desc">Reminders & alerts</span>
|
|
</div>
|
|
<svg class="settings-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</a>
|
|
<a class="settings-item" href="#">
|
|
<div class="settings-icon" style="background: rgba(99,102,241,0.1);">
|
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
<circle cx="9" cy="9" r="6" stroke="var(--indigo-light)" stroke-width="1.2"/>
|
|
<path d="M6 9h6M9 6v6" stroke="var(--indigo-light)" stroke-width="1.2" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="settings-item-text">
|
|
<span class="settings-item-label">Appearance</span>
|
|
<span class="settings-item-desc">Themes (coming soon)</span>
|
|
</div>
|
|
<svg class="settings-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data & Privacy -->
|
|
<div class="settings-section">
|
|
<div class="label text-dim" style="margin-bottom: var(--space-2);">Data & Privacy</div>
|
|
<div class="settings-group">
|
|
<a class="settings-item" href="../system-states/63-data-export.html">
|
|
<div class="settings-icon" style="background: rgba(16,185,129,0.1);">
|
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
<path d="M9 2v10M5 8l4 4 4-4" stroke="var(--emerald-light)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M3 14h12" stroke="var(--emerald-light)" stroke-width="1.2" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="settings-item-text">
|
|
<span class="settings-item-label">Export Your Data</span>
|
|
<span class="settings-item-desc">Download all your data</span>
|
|
</div>
|
|
<svg class="settings-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</a>
|
|
<a class="settings-item danger-item" href="../system-states/64-account-deletion.html">
|
|
<div class="settings-icon" style="background: rgba(239,68,68,0.1);">
|
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
<path d="M5 5l8 8M13 5l-8 8" stroke="var(--ruby)" stroke-width="1.5" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="settings-item-text">
|
|
<span class="settings-item-label">Delete Account</span>
|
|
</div>
|
|
<svg class="settings-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- About -->
|
|
<div class="settings-section">
|
|
<div class="label text-dim" style="margin-bottom: var(--space-2);">About</div>
|
|
<div class="settings-group">
|
|
<div class="settings-item" style="cursor: default;">
|
|
<div class="settings-item-text">
|
|
<span class="settings-item-label">Version</span>
|
|
</div>
|
|
<span style="font-size: 13px; color: var(--dim-light);">1.0.0 (42)</span>
|
|
</div>
|
|
<a class="settings-item" href="#">
|
|
<div class="settings-item-text">
|
|
<span class="settings-item-label">Terms of Service</span>
|
|
</div>
|
|
<svg class="settings-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</a>
|
|
<a class="settings-item" href="#">
|
|
<div class="settings-item-text">
|
|
<span class="settings-item-label">Privacy Policy</span>
|
|
</div>
|
|
<svg class="settings-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-version">Kalei — Same pieces. New angle.</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|