392 lines
16 KiB
HTML
392 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=390, initial-scale=1">
|
||
<title>Kalei — Spectrum Dashboard</title>
|
||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||
<style>
|
||
.prism-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 3px 10px;
|
||
border-radius: var(--radius-full);
|
||
background: linear-gradient(135deg, rgba(139,92,246,0.25), rgba(59,130,246,0.25), rgba(16,185,129,0.25));
|
||
border: 1px solid rgba(139,92,246,0.4);
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
}
|
||
.prism-badge-text {
|
||
background: linear-gradient(135deg, #C4B5FD, #93C5FD, #6EE7B7);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
.nav-header-right {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.time-selector {
|
||
display: flex;
|
||
gap: 4px;
|
||
padding: 12px 0 8px;
|
||
}
|
||
.time-chip {
|
||
flex: 1;
|
||
height: 32px;
|
||
border-radius: var(--radius-full);
|
||
border: 1px solid var(--twilight);
|
||
background: transparent;
|
||
color: var(--dim-light);
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
font-family: var(--font-primary);
|
||
}
|
||
.time-chip.active {
|
||
background: rgba(139,92,246,0.15);
|
||
border-color: var(--amethyst);
|
||
color: var(--amethyst-light);
|
||
}
|
||
.viz-card {
|
||
background: var(--kalei-navy);
|
||
border: 1px solid var(--twilight);
|
||
border-radius: var(--radius-xl);
|
||
padding: 14px;
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
transition: border-color 0.2s;
|
||
}
|
||
.viz-card:hover { border-color: rgba(139,92,246,0.4); }
|
||
.viz-thumb {
|
||
width: 64px;
|
||
height: 48px;
|
||
border-radius: var(--radius-md);
|
||
background: var(--void);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
overflow: hidden;
|
||
}
|
||
.viz-info { flex: 1; }
|
||
.viz-title {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: var(--pure-light);
|
||
margin-bottom: 2px;
|
||
}
|
||
.viz-desc {
|
||
font-size: 12px;
|
||
color: var(--dim-light);
|
||
}
|
||
.viz-chevron {
|
||
color: var(--faint-light);
|
||
}
|
||
.insight-card {
|
||
background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(59,130,246,0.05));
|
||
border: 1px solid rgba(139,92,246,0.2);
|
||
border-radius: var(--radius-xl);
|
||
padding: 14px;
|
||
margin-top: 4px;
|
||
}
|
||
.insight-label {
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
color: var(--amethyst-light);
|
||
margin-bottom: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.insight-text {
|
||
font-size: 14px;
|
||
color: var(--soft-light);
|
||
line-height: 1.5;
|
||
}
|
||
.summary-links {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-top: 10px;
|
||
}
|
||
.summary-link {
|
||
flex: 1;
|
||
height: 44px;
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid var(--twilight);
|
||
background: var(--deep-glass);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: var(--soft-light);
|
||
text-decoration: none;
|
||
transition: border-color 0.2s;
|
||
}
|
||
.summary-link:hover { border-color: rgba(139,92,246,0.4); }
|
||
.screen-content { padding-bottom: 20px; }
|
||
.spectrum-aura {
|
||
position: absolute;
|
||
top: 80px;
|
||
right: -60px;
|
||
width: 180px;
|
||
height: 180px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, rgba(139,92,246,0.07) 0%, rgba(59,130,246,0.04) 40%, transparent 70%);
|
||
filter: blur(40px);
|
||
pointer-events: none;
|
||
animation: breathing 6s ease-in-out infinite;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="device-frame">
|
||
<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>
|
||
|
||
<div class="nav-header">
|
||
<a class="nav-back" href="../you/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">Spectrum</span>
|
||
<span class="nav-action">
|
||
<div class="prism-badge">
|
||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||
<defs>
|
||
<linearGradient id="prismIcon" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||
<stop offset="50%" stop-color="#93C5FD"/>
|
||
<stop offset="100%" stop-color="#6EE7B7"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<path d="M5 1L9 5L5 9L1 5Z" fill="url(#prismIcon)" opacity="0.9"/>
|
||
</svg>
|
||
<span class="prism-badge-text">Prism</span>
|
||
</div>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="spectrum-aura"></div>
|
||
<div class="screen-content">
|
||
<!-- Time range selector -->
|
||
<div class="time-selector">
|
||
<button class="time-chip active" onclick="selectTime(this)">Week</button>
|
||
<button class="time-chip" onclick="selectTime(this)">Month</button>
|
||
<button class="time-chip" onclick="selectTime(this)">All Time</button>
|
||
</div>
|
||
|
||
<!-- Visualization cards -->
|
||
<a class="viz-card" href="51-spectrum-river.html">
|
||
<div class="viz-thumb">
|
||
<!-- River thumbnail -->
|
||
<svg width="64" height="48" viewBox="0 0 64 48">
|
||
<defs>
|
||
<linearGradient id="riverGrad" x1="0" y1="0" x2="1" y2="0">
|
||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.8"/>
|
||
<stop offset="33%" stop-color="#3B82F6" stop-opacity="0.7"/>
|
||
<stop offset="66%" stop-color="#10B981" stop-opacity="0.7"/>
|
||
<stop offset="100%" stop-color="#F59E0B" stop-opacity="0.8"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<path d="M0 20 C10 14 20 28 30 22 C40 16 50 26 64 20" stroke="url(#riverGrad)" stroke-width="6" fill="none" stroke-linecap="round" opacity="0.9"/>
|
||
<path d="M0 26 C10 20 20 34 30 28 C40 22 50 32 64 26" stroke="url(#riverGrad)" stroke-width="3" fill="none" stroke-linecap="round" opacity="0.5"/>
|
||
<circle cx="12" cy="17" r="2" fill="#C4B5FD"/>
|
||
<circle cx="32" cy="22" r="2" fill="#6EE7B7"/>
|
||
<circle cx="52" cy="21" r="2" fill="#FDE68A"/>
|
||
</svg>
|
||
</div>
|
||
<div class="viz-info">
|
||
<div class="viz-title">The River</div>
|
||
<div class="viz-desc">Emotional patterns over time</div>
|
||
</div>
|
||
<div class="viz-chevron">
|
||
<svg 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>
|
||
</div>
|
||
</a>
|
||
|
||
<a class="viz-card" href="52-spectrum-glass.html">
|
||
<div class="viz-thumb">
|
||
<!-- Faceted gem thumbnail — prismatic faces -->
|
||
<svg width="64" height="48" viewBox="0 0 64 48">
|
||
<defs>
|
||
<linearGradient id="glassAmber" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#FDE68A" stop-opacity="0.8"/>
|
||
<stop offset="100%" stop-color="#D97706" stop-opacity="0.3"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<!-- Outer hex guide -->
|
||
<polygon points="32,4 54,16 54,32 32,44 10,32 10,16" stroke="#1C2240" stroke-width="0.5" fill="none" opacity="0.4"/>
|
||
<!-- Inner guide -->
|
||
<polygon points="32,14 44,21 44,28 32,35 20,28 20,21" stroke="#1C2240" stroke-width="0.5" fill="none" opacity="0.3"/>
|
||
<!-- Gem faces with distinct jewel tones -->
|
||
<polygon points="32,7 42,18 32,24" fill="#8B5CF6" opacity="0.15"/>
|
||
<polygon points="42,18 50,30 32,24" fill="#3B82F6" opacity="0.15"/>
|
||
<polygon points="50,30 42,41 32,24" fill="#10B981" opacity="0.15"/>
|
||
<polygon points="42,41 22,41 32,24" fill="#F59E0B" opacity="0.15"/>
|
||
<polygon points="22,41 14,30 32,24" fill="#EC4899" opacity="0.12"/>
|
||
<polygon points="14,30 22,18 32,24" fill="#6366F1" opacity="0.12"/>
|
||
<!-- Main faceted outline -->
|
||
<polygon points="32,7 50,18 50,30 32,43 14,30 14,18" fill="url(#glassAmber)" fill-opacity="0.06" stroke="#FDE68A" stroke-width="0.8" opacity="0.7"/>
|
||
<!-- Center diamond -->
|
||
<path d="M32 20L35 24L32 28L29 24Z" fill="#F59E0B" opacity="0.4"/>
|
||
</svg>
|
||
</div>
|
||
<div class="viz-info">
|
||
<div class="viz-title">Your Glass</div>
|
||
<div class="viz-desc">Feature balance radar</div>
|
||
</div>
|
||
<div class="viz-chevron">
|
||
<svg 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>
|
||
</div>
|
||
</a>
|
||
|
||
<a class="viz-card" href="53-spectrum-impact.html">
|
||
<div class="viz-thumb">
|
||
<!-- Bar chart thumbnail -->
|
||
<svg width="64" height="48" viewBox="0 0 64 48">
|
||
<rect x="6" y="28" width="7" height="14" rx="2" fill="#EF4444" opacity="0.7"/>
|
||
<rect x="15" y="18" width="7" height="24" rx="2" fill="#10B981" opacity="0.7"/>
|
||
<rect x="26" y="22" width="7" height="20" rx="2" fill="#EF4444" opacity="0.7"/>
|
||
<rect x="35" y="12" width="7" height="30" rx="2" fill="#10B981" opacity="0.7"/>
|
||
<rect x="46" y="26" width="7" height="16" rx="2" fill="#EF4444" opacity="0.7"/>
|
||
<rect x="55" y="14" width="7" height="28" rx="2" fill="#10B981" opacity="0.7"/>
|
||
</svg>
|
||
</div>
|
||
<div class="viz-info">
|
||
<div class="viz-title">Turn Impact</div>
|
||
<div class="viz-desc">Before & after mood shifts</div>
|
||
</div>
|
||
<div class="viz-chevron">
|
||
<svg 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>
|
||
</div>
|
||
</a>
|
||
|
||
<a class="viz-card" href="54-spectrum-rhythm.html">
|
||
<div class="viz-thumb">
|
||
<!-- Bubble chart thumbnail -->
|
||
<svg width="64" height="48" viewBox="0 0 64 48">
|
||
<circle cx="14" cy="36" r="5" fill="#8B5CF6" opacity="0.6"/>
|
||
<circle cx="28" cy="20" r="8" fill="#8B5CF6" opacity="0.8"/>
|
||
<circle cx="42" cy="30" r="4" fill="#3B82F6" opacity="0.6"/>
|
||
<circle cx="54" cy="16" r="6" fill="#10B981" opacity="0.7"/>
|
||
<circle cx="20" cy="10" r="3" fill="#F59E0B" opacity="0.6"/>
|
||
</svg>
|
||
</div>
|
||
<div class="viz-info">
|
||
<div class="viz-title">Rhythm Detection</div>
|
||
<div class="viz-desc">Your activity patterns</div>
|
||
</div>
|
||
<div class="viz-chevron">
|
||
<svg 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>
|
||
</div>
|
||
</a>
|
||
|
||
<a class="viz-card" href="55-spectrum-growth.html">
|
||
<div class="viz-thumb">
|
||
<!-- Line chart thumbnail -->
|
||
<svg width="64" height="48" viewBox="0 0 64 48">
|
||
<defs>
|
||
<linearGradient id="growthArea" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#10B981" stop-opacity="0.3"/>
|
||
<stop offset="100%" stop-color="#10B981" stop-opacity="0"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<path d="M4 38 L18 30 L30 24 L42 16 L56 8" stroke="#10B981" stroke-width="2" fill="none" stroke-linecap="round"/>
|
||
<path d="M4 38 L18 30 L30 24 L42 16 L56 8 L56 44 L4 44Z" fill="url(#growthArea)"/>
|
||
<circle cx="30" cy="24" r="3" fill="#10B981"/>
|
||
<circle cx="56" cy="8" r="3" fill="#10B981"/>
|
||
</svg>
|
||
</div>
|
||
<div class="viz-info">
|
||
<div class="viz-title">Growth Trajectory</div>
|
||
<div class="viz-desc">Wellness score over time</div>
|
||
</div>
|
||
<div class="viz-chevron">
|
||
<svg 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>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- AI Insight Card -->
|
||
<div class="insight-card">
|
||
<div class="insight-label">
|
||
<svg width="12" height="12" viewBox="0 0 12 12">
|
||
<path d="M6 1L11 6L6 11L1 6Z" fill="#A78BFA"/>
|
||
</svg>
|
||
This Week's Pattern
|
||
</div>
|
||
<div class="insight-text">Catastrophizing is down this week — your 14-day ritual streak is doing real work. Morning turns (8–9am) show your highest reframe quality. Mind Reading remains steady; worth watching.</div>
|
||
</div>
|
||
|
||
<!-- Weekly / Monthly summary links -->
|
||
<div class="summary-links">
|
||
<a class="summary-link" href="56-spectrum-weekly.html">
|
||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||
<rect x="1" y="3" width="12" height="10" rx="2" stroke="#94A3B8" stroke-width="1.2"/>
|
||
<path d="M4 1V4M10 1V4" stroke="#94A3B8" stroke-width="1.2" stroke-linecap="round"/>
|
||
</svg>
|
||
Weekly Summary
|
||
</a>
|
||
<a class="summary-link" href="57-spectrum-monthly.html">
|
||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||
<rect x="1" y="3" width="12" height="10" rx="2" stroke="#94A3B8" stroke-width="1.2"/>
|
||
<path d="M4 1V4M10 1V4" stroke="#94A3B8" stroke-width="1.2" stroke-linecap="round"/>
|
||
<path d="M3 8H11M3 10.5H8" stroke="#94A3B8" stroke-width="1" stroke-linecap="round"/>
|
||
</svg>
|
||
Monthly Report
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function selectTime(el) {
|
||
document.querySelectorAll('.time-chip').forEach(c => c.classList.remove('active'));
|
||
el.classList.add('active');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|