Initial commit: Kalei app — docs, mockups, logo, pitch deck
Complete project files including: - 73 polished HTML mockup screens (onboarding, turn, mirror, lens, gallery, you, ritual, spectrum, modals, guide) - Design system CSS with Inter font, jewel-tone palette, device frame scaling - Canonical 6-blade kaleidoscope logo (soft-elegance-final) - SVG asset library (fragments, icons, patterns, evidence wall, spectrum viz) - Product docs, brand guidelines, technical architecture, build phases - Pitch deck and cost projections - Logo mockup iterations and finalists Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
391
initial mockups/screens/spectrum/50-spectrum-dashboard.html
Normal file
391
initial mockups/screens/spectrum/50-spectrum-dashboard.html
Normal file
@@ -0,0 +1,391 @@
|
||||
<!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>
|
||||
314
initial mockups/screens/spectrum/51-spectrum-river.html
Normal file
314
initial mockups/screens/spectrum/51-spectrum-river.html
Normal file
@@ -0,0 +1,314 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — The River</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.river-container {
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
}
|
||||
.date-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 8px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.date-label {
|
||||
font-size: 10px;
|
||||
color: var(--faint-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
.river-svg-wrap {
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
background: var(--void);
|
||||
border: 1px solid var(--twilight);
|
||||
}
|
||||
.data-points-section {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.data-point-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid rgba(28,34,64,0.5);
|
||||
}
|
||||
.data-point-row:last-child { border-bottom: none; }
|
||||
.dp-date {
|
||||
font-size: 11px;
|
||||
color: var(--faint-light);
|
||||
width: 52px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.dp-diamond { flex-shrink: 0; }
|
||||
.dp-text {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.4;
|
||||
}
|
||||
.dp-tag {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: var(--faint-light);
|
||||
background: rgba(28,34,64,0.8);
|
||||
padding: 2px 7px;
|
||||
border-radius: var(--radius-full);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.dp-mood {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
min-width: 36px;
|
||||
text-align: right;
|
||||
}
|
||||
.insight-panel {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 14px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.insight-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--amethyst-light);
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.insight-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.55;
|
||||
}
|
||||
.screen-content { padding-bottom: 20px; }
|
||||
.mood-dip-note {
|
||||
font-size: 11px;
|
||||
color: var(--rose-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
<div class="status-bar">
|
||||
<span class="time">8:52</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="50-spectrum-dashboard.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">The River</span>
|
||||
<span class="nav-action" style="font-size:11px; color:var(--faint-light);">Feb 1–22</span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content no-pad">
|
||||
<div class="river-container">
|
||||
<!-- Date labels — 3 weeks -->
|
||||
<div class="date-labels">
|
||||
<span class="date-label">Feb 1</span>
|
||||
<span class="date-label">Feb 8</span>
|
||||
<span class="date-label">Feb 15</span>
|
||||
<span class="date-label">Feb 22</span>
|
||||
</div>
|
||||
|
||||
<!-- River SVG — mood trend over 3 weeks with dip around Feb 15 -->
|
||||
<div class="river-svg-wrap">
|
||||
<svg width="358" height="160" viewBox="0 0 358 160" style="display:block;">
|
||||
<defs>
|
||||
<linearGradient id="s51-riverGrad" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.7"/>
|
||||
<stop offset="35%" stop-color="#3B82F6" stop-opacity="0.65"/>
|
||||
<stop offset="55%" stop-color="#EC4899" stop-opacity="0.6"/>
|
||||
<stop offset="70%" stop-color="#EF4444" stop-opacity="0.55"/>
|
||||
<stop offset="85%" stop-color="#3B82F6" stop-opacity="0.65"/>
|
||||
<stop offset="100%" stop-color="#10B981" stop-opacity="0.7"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s51-riverGradFill" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.15"/>
|
||||
<stop offset="35%" stop-color="#3B82F6" stop-opacity="0.10"/>
|
||||
<stop offset="55%" stop-color="#EC4899" stop-opacity="0.08"/>
|
||||
<stop offset="70%" stop-color="#EF4444" stop-opacity="0.10"/>
|
||||
<stop offset="100%" stop-color="#10B981" stop-opacity="0.14"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s51-grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/><stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s51-grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s51-grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s51-grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s51-grRose" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBCFE8"/><stop offset="100%" stop-color="#DB2777"/>
|
||||
</linearGradient>
|
||||
<filter id="s51-glowSm" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<rect width="358" height="160" fill="#0A0E1A"/>
|
||||
|
||||
<!-- Grid lines -->
|
||||
<line x1="24" y1="30" x2="358" y2="30" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="3,6"/>
|
||||
<line x1="24" y1="75" x2="358" y2="75" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="3,6"/>
|
||||
<line x1="24" y1="120" x2="358" y2="120" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="3,6"/>
|
||||
|
||||
<!-- Y-axis labels -->
|
||||
<text x="20" y="33" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">High</text>
|
||||
<text x="20" y="78" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">Mid</text>
|
||||
<text x="20" y="123" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">Low</text>
|
||||
|
||||
<!-- Vertical week dividers -->
|
||||
<line x1="109" y1="20" x2="109" y2="135" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2,6"/>
|
||||
<line x1="218" y1="20" x2="218" y2="135" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2,6"/>
|
||||
|
||||
<!-- River path: gradual rise W1, slight dip around Feb 15, recovery to peak Feb 22 -->
|
||||
<g transform="translate(189, 75)" filter="url(#s51-glowSm)">
|
||||
<!-- Upper bound — rising then dip then surge -->
|
||||
<path d="M -165,-5 C -140,-12 -110,-18 -80,-22 C -50,-26 -30,-20 0,5 C 20,22 40,18 80,0 C 110,-12 140,-22 165,-28"
|
||||
fill="none" stroke="url(#s51-riverGrad)" stroke-width="2" opacity="0.85"/>
|
||||
<!-- Lower bound -->
|
||||
<path d="M -165,15 C -140,10 -110,5 -80,2 C -50,0 -30,8 0,28 C 20,40 40,36 80,20 C 110,8 140,-2 165,-10"
|
||||
fill="none" stroke="url(#s51-riverGrad)" stroke-width="1" opacity="0.45"/>
|
||||
<!-- Fill between bands -->
|
||||
<path d="M -165,-5 C -140,-12 -110,-18 -80,-22 C -50,-26 -30,-20 0,5 C 20,22 40,18 80,0 C 110,-12 140,-22 165,-28
|
||||
L 165,-10 C 140,-2 110,8 80,20 C 40,36 20,40 0,28 C -30,8 -50,0 -80,2 C -110,5 -140,10 -165,15 Z"
|
||||
fill="url(#s51-riverGradFill)" opacity="0.7"/>
|
||||
|
||||
<!-- Data point fragments — key moments in Alex's story -->
|
||||
<!-- Feb 1: start, amethyst, mid-mood -->
|
||||
<path d="M -157,3 L -154,6 L -157,9 L -160,6 Z" fill="url(#s51-grAmethyst)" opacity="0.7"/>
|
||||
<path d="M -157,3 L -154,6 L -157,6 Z" fill="#fff" opacity="0.15"/>
|
||||
|
||||
<!-- Feb 5: gains momentum, sapphire -->
|
||||
<path d="M -109,-15 L -106,-12 L -109,-9 L -112,-12 Z" fill="url(#s51-grSapphire)" opacity="0.7"/>
|
||||
<path d="M -109,-15 L -106,-12 L -109,-12 Z" fill="#fff" opacity="0.15"/>
|
||||
|
||||
<!-- Feb 10: strong week, emerald -->
|
||||
<path d="M -52,-20 L -49,-17 L -52,-14 L -55,-17 Z" fill="url(#s51-grEmerald)" opacity="0.75"/>
|
||||
<path d="M -52,-20 L -49,-17 L -52,-17 Z" fill="#fff" opacity="0.15"/>
|
||||
|
||||
<!-- Feb 15: work stress dip, rose -->
|
||||
<path d="M 0,14 L 3,17 L 0,20 L -3,17 Z" fill="url(#s51-grRose)" opacity="0.8"/>
|
||||
<path d="M 0,14 L 3,17 L 0,17 Z" fill="#fff" opacity="0.15"/>
|
||||
|
||||
<!-- Feb 18: recovery, amber -->
|
||||
<path d="M 52,8 L 55,11 L 52,14 L 49,11 Z" fill="url(#s51-grAmber)" opacity="0.7"/>
|
||||
<path d="M 52,8 L 55,11 L 52,11 Z" fill="#fff" opacity="0.15"/>
|
||||
|
||||
<!-- Feb 22: today, peak, emerald pulse -->
|
||||
<path d="M 157,-26 L 160,-23 L 157,-20 L 154,-23 Z" fill="url(#s51-grEmerald)" opacity="0.9">
|
||||
<animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 157,-26 L 160,-23 L 157,-23 Z" fill="#fff" opacity="0.2"/>
|
||||
</g>
|
||||
|
||||
<!-- Dip annotation -->
|
||||
<text x="178" y="18" text-anchor="middle" fill="#F9A8D4" font-size="7" font-family="Inter" opacity="0.7">Work stress</text>
|
||||
<line x1="178" y1="20" x2="178" y2="105" stroke="#DB2777" stroke-width="0.5" stroke-dasharray="2,4" opacity="0.3"/>
|
||||
|
||||
<!-- X axis labels -->
|
||||
<text x="44" y="148" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Feb 1</text>
|
||||
<text x="109" y="148" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Feb 8</text>
|
||||
<text x="178" y="148" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Feb 15</text>
|
||||
<text x="240" y="148" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Feb 18</text>
|
||||
<text x="320" y="148" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Feb 22</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Key moments trail -->
|
||||
<div class="data-points-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">Key Moments</span>
|
||||
</div>
|
||||
|
||||
<div class="data-point-row">
|
||||
<span class="dp-date">Feb 5</span>
|
||||
<svg class="dp-diamond" width="14" height="14" viewBox="0 0 14 14">
|
||||
<defs><linearGradient id="dpS" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#2563EB"/></linearGradient></defs>
|
||||
<path d="M7 1L13 7L7 13L1 7Z" fill="url(#dpS)"/>
|
||||
</svg>
|
||||
<span class="dp-text">Week 1 momentum builds — first 5-day run</span>
|
||||
<span class="dp-tag">Catastrophizing</span>
|
||||
<span class="dp-mood" style="color: var(--sapphire-light);">+19%</span>
|
||||
</div>
|
||||
|
||||
<div class="data-point-row">
|
||||
<span class="dp-date">Feb 10</span>
|
||||
<svg class="dp-diamond" width="14" height="14" viewBox="0 0 14 14">
|
||||
<defs><linearGradient id="dpE" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/></linearGradient></defs>
|
||||
<path d="M7 1L13 7L7 13L1 7Z" fill="url(#dpE)"/>
|
||||
</svg>
|
||||
<span class="dp-text">Best reframe of the month on a work fear</span>
|
||||
<span class="dp-tag">Should Stmts</span>
|
||||
<span class="dp-mood" style="color: var(--emerald-light);">+34%</span>
|
||||
</div>
|
||||
|
||||
<div class="data-point-row">
|
||||
<span class="dp-date">Feb 15</span>
|
||||
<svg class="dp-diamond" width="14" height="14" viewBox="0 0 14 14">
|
||||
<defs><linearGradient id="dpR" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#FBCFE8"/><stop offset="100%" stop-color="#DB2777"/></linearGradient></defs>
|
||||
<path d="M7 1L13 7L7 13L1 7Z" fill="url(#dpR)"/>
|
||||
</svg>
|
||||
<span class="dp-text">Stressful work week — but ritual held steady</span>
|
||||
<span class="dp-tag">Mind Reading</span>
|
||||
<span class="dp-mood" style="color: var(--rose-light);">−8%</span>
|
||||
</div>
|
||||
|
||||
<div class="data-point-row">
|
||||
<span class="dp-date">Feb 22</span>
|
||||
<svg class="dp-diamond" width="14" height="14" viewBox="0 0 14 14">
|
||||
<defs><linearGradient id="dpA" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/></linearGradient></defs>
|
||||
<path d="M7 1L13 7L7 13L1 7Z" fill="url(#dpA)"/>
|
||||
</svg>
|
||||
<span class="dp-text">Day 14 — highest wellbeing score yet</span>
|
||||
<span class="dp-tag">Ritual</span>
|
||||
<span class="dp-mood" style="color: var(--emerald-light);">+41%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI Insight -->
|
||||
<div class="insight-panel">
|
||||
<div class="insight-label">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12">
|
||||
<path d="M6 1L11 6L6 11L1 6Z" fill="#A78BFA"/>
|
||||
</svg>
|
||||
River Reading
|
||||
</div>
|
||||
<div class="insight-text">Your emotional river tells a clear story: gradual rise in weeks 1–2, a dip around Feb 15 (the work-stress week), then a strong recovery. The dip didn't break your streak — you kept practicing through it. That's the point.</div>
|
||||
<div class="mood-dip-note">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10"><path d="M5 1L9 5L5 9L1 5Z" fill="#F9A8D4" opacity="0.8"/></svg>
|
||||
Feb 15 dip is normal — stress week. You bounced back in 2 days.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
300
initial mockups/screens/spectrum/52-spectrum-glass.html
Normal file
300
initial mockups/screens/spectrum/52-spectrum-glass.html
Normal file
@@ -0,0 +1,300 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Your Glass</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.glass-container {
|
||||
padding: 16px;
|
||||
}
|
||||
.radar-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: var(--void);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 20px 0;
|
||||
}
|
||||
.legend {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.legend-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.legend-label {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
flex: 1;
|
||||
}
|
||||
.legend-value {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.legend-bar-wrap {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
background: var(--twilight);
|
||||
border-radius: var(--radius-full);
|
||||
overflow: hidden;
|
||||
}
|
||||
.legend-bar {
|
||||
height: 100%;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
.balance-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 14px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.balance-header {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.insight-panel {
|
||||
background: linear-gradient(135deg, rgba(139,92,246,0.06), rgba(59,130,246,0.04));
|
||||
border: 1px solid rgba(139,92,246,0.2);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 14px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.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.55;
|
||||
}
|
||||
.screen-content { padding-bottom: 20px; }
|
||||
</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="50-spectrum-dashboard.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">Your Glass</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content no-pad">
|
||||
<div class="glass-container">
|
||||
|
||||
<!-- Faceted Gem / Radar Chart — Your Glass -->
|
||||
<div class="radar-wrap">
|
||||
<svg width="280" height="240" viewBox="0 0 280 240">
|
||||
<defs>
|
||||
<!-- Faceted gem face gradients — prismatic per face -->
|
||||
<linearGradient id="s52-grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s52-grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/><stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s52-grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s52-grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s52-grRose" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBCFE8"/><stop offset="100%" stop-color="#DB2777"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s52-grIndigo" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#A5B4FC"/><stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
<filter id="s52-glowMd" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="s52-glowSm" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="s52-glow" x="-100%" y="-100%" width="300%" height="300%">
|
||||
<feGaussianBlur stdDeviation="8" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Central glow aura -->
|
||||
<ellipse cx="140" cy="115" rx="60" ry="55" fill="#F59E0B" opacity="0.04" filter="url(#s52-glow)"/>
|
||||
|
||||
<!-- Radar chart -->
|
||||
<g transform="translate(140, 115)">
|
||||
<!-- Axis guides -->
|
||||
<g opacity="0.15">
|
||||
<line x1="0" y1="0" x2="0" y2="-70" stroke="#475569" stroke-width="0.5"/>
|
||||
<line x1="0" y1="0" x2="61" y2="-35" stroke="#475569" stroke-width="0.5"/>
|
||||
<line x1="0" y1="0" x2="61" y2="35" stroke="#475569" stroke-width="0.5"/>
|
||||
<line x1="0" y1="0" x2="0" y2="70" stroke="#475569" stroke-width="0.5"/>
|
||||
<line x1="0" y1="0" x2="-61" y2="35" stroke="#475569" stroke-width="0.5"/>
|
||||
<line x1="0" y1="0" x2="-61" y2="-35" stroke="#475569" stroke-width="0.5"/>
|
||||
<path d="M 0,-35 L 30,-17 L 30,17 L 0,35 L -30,17 L -30,-17 Z" fill="none" stroke="#475569" stroke-width="0.3"/>
|
||||
<path d="M 0,-70 L 61,-35 L 61,35 L 0,70 L -61,35 L -61,-35 Z" fill="none" stroke="#475569" stroke-width="0.3"/>
|
||||
</g>
|
||||
|
||||
<!-- Faceted gem faces — each face a different jewel tone -->
|
||||
<g filter="url(#s52-glowMd)">
|
||||
<!-- Top face: amber (Catastrophizing) -->
|
||||
<path d="M 0,0 L -3,-52 L 3,-52 Z" fill="#FDE68A" fill-opacity="0.06"/>
|
||||
<path d="M 0,-55 L 40,-20 L 0,0 Z" fill="#F59E0B" fill-opacity="0.07"/>
|
||||
<!-- Upper-right face: amethyst (Black-White) -->
|
||||
<path d="M 0,0 L 40,-20 L 50,25 Z" fill="#8B5CF6" fill-opacity="0.06"/>
|
||||
<!-- Lower-right face: sapphire (Mind Reading) -->
|
||||
<path d="M 0,0 L 50,25 L 10,50 Z" fill="#3B82F6" fill-opacity="0.06"/>
|
||||
<!-- Bottom face: emerald (Fortune Telling) -->
|
||||
<path d="M 0,0 L 10,50 L -45,30 Z" fill="#10B981" fill-opacity="0.06"/>
|
||||
<!-- Left face: rose (Personalization) -->
|
||||
<path d="M 0,0 L -45,30 L -35,-25 Z" fill="#EC4899" fill-opacity="0.06"/>
|
||||
<!-- Upper-left face: indigo (Should Stmts) -->
|
||||
<path d="M 0,0 L -35,-25 L 0,-55 Z" fill="#6366F1" fill-opacity="0.06"/>
|
||||
|
||||
<!-- Main outline -->
|
||||
<path d="M 0,-55 L 40,-20 L 50,25 L 10,50 L -45,30 L -35,-25 Z"
|
||||
fill="none" stroke="#F59E0B" stroke-width="1.2" opacity="0.5"/>
|
||||
|
||||
<!-- Vertex diamonds — each vertex gets its facet color -->
|
||||
<path d="M 0,-55 L 3,-52 L 0,-49 L -3,-52 Z" fill="url(#s52-grAmber)" opacity="0.9" filter="url(#s52-glowSm)"/>
|
||||
<path d="M 0,-55 L 3,-52 L 0,-52 Z" fill="#fff" opacity="0.2"/>
|
||||
<path d="M 40,-20 L 43,-17 L 40,-14 L 37,-17 Z" fill="url(#s52-grAmethyst)" opacity="0.8" filter="url(#s52-glowSm)"/>
|
||||
<path d="M 40,-20 L 43,-17 L 40,-17 Z" fill="#fff" opacity="0.2"/>
|
||||
<path d="M 50,25 L 53,28 L 50,31 L 47,28 Z" fill="url(#s52-grSapphire)" opacity="0.8" filter="url(#s52-glowSm)"/>
|
||||
<path d="M 50,25 L 53,28 L 50,28 Z" fill="#fff" opacity="0.2"/>
|
||||
<path d="M 10,50 L 13,53 L 10,56 L 7,53 Z" fill="url(#s52-grEmerald)" opacity="0.7" filter="url(#s52-glowSm)"/>
|
||||
<path d="M 10,50 L 13,53 L 10,53 Z" fill="#fff" opacity="0.2"/>
|
||||
<path d="M -45,30 L -42,33 L -45,36 L -48,33 Z" fill="url(#s52-grRose)" opacity="0.8" filter="url(#s52-glowSm)"/>
|
||||
<path d="M -45,30 L -42,33 L -45,33 Z" fill="#fff" opacity="0.2"/>
|
||||
<path d="M -35,-25 L -32,-22 L -35,-19 L -38,-22 Z" fill="url(#s52-grIndigo)" opacity="0.8" filter="url(#s52-glowSm)"/>
|
||||
<path d="M -35,-25 L -32,-22 L -35,-22 Z" fill="#fff" opacity="0.2"/>
|
||||
|
||||
<!-- Central core diamond -->
|
||||
<path d="M 0,-6 L 5,0 L 0,6 L -5,0 Z" fill="#F59E0B" opacity="0.3"/>
|
||||
</g>
|
||||
|
||||
<!-- Axis labels — colored per facet -->
|
||||
<text x="0" y="-78" text-anchor="middle" font-size="9" fill="#FDE68A" font-family="Inter" font-weight="500">Catastrophizing</text>
|
||||
<text x="76" y="-20" text-anchor="start" font-size="9" fill="#C4B5FD" font-family="Inter" font-weight="500">Black-White</text>
|
||||
<text x="76" y="30" text-anchor="start" font-size="9" fill="#93C5FD" font-family="Inter" font-weight="500">Mind Reading</text>
|
||||
<text x="0" y="76" text-anchor="middle" font-size="9" fill="#6EE7B7" font-family="Inter" font-weight="500">Fortune Telling</text>
|
||||
<text x="-76" y="30" text-anchor="end" font-size="9" fill="#F9A8D4" font-family="Inter" font-weight="500">Personalization</text>
|
||||
<text x="-76" y="-20" text-anchor="end" font-size="9" fill="#A5B4FC" font-family="Inter" font-weight="500">Should Stmts</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Fragment pattern balance — maps to Alex's canonical data -->
|
||||
<div class="balance-card">
|
||||
<div class="balance-header">Fragment Patterns — 47 Turns</div>
|
||||
<div class="legend">
|
||||
<div class="legend-item">
|
||||
<div class="legend-dot" style="background: var(--amber);"></div>
|
||||
<div class="legend-label">Catastrophizing</div>
|
||||
<div class="legend-bar-wrap">
|
||||
<div class="legend-bar" style="width:100%; background: linear-gradient(90deg, var(--amber), var(--amber-light));"></div>
|
||||
</div>
|
||||
<div class="legend-value" style="color: var(--amber-light);">7x</div>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-dot" style="background: var(--sapphire);"></div>
|
||||
<div class="legend-label">Mind Reading</div>
|
||||
<div class="legend-bar-wrap">
|
||||
<div class="legend-bar" style="width:57%; background: var(--sapphire);"></div>
|
||||
</div>
|
||||
<div class="legend-value" style="color: var(--sapphire-light);">4x</div>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-dot" style="background: var(--amethyst);"></div>
|
||||
<div class="legend-label">Should Statements</div>
|
||||
<div class="legend-bar-wrap">
|
||||
<div class="legend-bar" style="width:43%; background: var(--amethyst);"></div>
|
||||
</div>
|
||||
<div class="legend-value" style="color: var(--amethyst-light);">3x</div>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-dot" style="background: var(--emerald);"></div>
|
||||
<div class="legend-label">Overgeneralization</div>
|
||||
<div class="legend-bar-wrap">
|
||||
<div class="legend-bar" style="width:28%; background: var(--emerald);"></div>
|
||||
</div>
|
||||
<div class="legend-value" style="color: var(--emerald-light);">2x</div>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-dot" style="background: var(--rose);"></div>
|
||||
<div class="legend-label">Personalization</div>
|
||||
<div class="legend-bar-wrap">
|
||||
<div class="legend-bar" style="width:28%; background: var(--rose);"></div>
|
||||
</div>
|
||||
<div class="legend-value" style="color: var(--rose-light);">2x</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI Insight -->
|
||||
<div class="insight-panel">
|
||||
<div class="insight-label">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12">
|
||||
<path d="M6 1L11 6L6 11L1 6Z" fill="#A78BFA"/>
|
||||
</svg>
|
||||
Glass Reading
|
||||
</div>
|
||||
<div class="insight-text">Catastrophizing is your dominant facet — 7 of your 47 turns. The good news: it's been declining each week. Mind Reading holds steady at 4. Your glass is gradually becoming more balanced as the ritual work lands.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
378
initial mockups/screens/spectrum/53-spectrum-impact.html
Normal file
378
initial mockups/screens/spectrum/53-spectrum-impact.html
Normal file
@@ -0,0 +1,378 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Turn Impact</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.impact-container {
|
||||
padding: 16px;
|
||||
}
|
||||
.stats-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.stat-card {
|
||||
flex: 1;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.stat-val {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.stat-lbl {
|
||||
font-size: 11px;
|
||||
color: var(--dim-light);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.chart-section {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.chart-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
.chart-legend {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 11px;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.legend-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.bar-chart-wrap {
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.impact-row {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 12px 14px;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.impact-thought {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.impact-thought-text {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.impact-date {
|
||||
font-size: 10px;
|
||||
color: var(--faint-light);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.impact-bars {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
width: 100px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.impact-bar-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.impact-bar-bg {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
background: var(--twilight);
|
||||
border-radius: var(--radius-full);
|
||||
overflow: hidden;
|
||||
}
|
||||
.impact-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
.impact-delta {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--emerald-light);
|
||||
width: 32px;
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.insight-panel {
|
||||
background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(239,68,68,0.04));
|
||||
border: 1px solid rgba(16,185,129,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(--emerald-light);
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.insight-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.55;
|
||||
}
|
||||
.screen-content { padding-bottom: 20px; }
|
||||
</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="50-spectrum-dashboard.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">Turn Impact</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content no-pad">
|
||||
<div class="impact-container">
|
||||
<!-- Stats row — aligned to canonical: 47 turns, Week 3: 14 turns -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-val" style="color: var(--emerald-light);">+27%</div>
|
||||
<div class="stat-lbl">Avg. Mood Lift</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-val" style="color: var(--pure-light);">47</div>
|
||||
<div class="stat-lbl">Total Turns</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-val" style="color: var(--amethyst-light);">89%</div>
|
||||
<div class="stat-lbl">Effectiveness</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bar chart overview -->
|
||||
<div class="chart-section">
|
||||
<div class="chart-header">
|
||||
<span class="chart-title">Before vs. After</span>
|
||||
<div class="chart-legend">
|
||||
<div class="legend-item">
|
||||
<div class="legend-dot" style="background: var(--ruby); opacity: 0.7;"></div>
|
||||
Before
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-dot" style="background: var(--emerald);"></div>
|
||||
After
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bar chart — extracted from spectrum-visualizations.svg "TURN IMPACT" section -->
|
||||
<div class="bar-chart-wrap">
|
||||
<svg width="326" height="130" viewBox="0 0 326 130">
|
||||
<defs>
|
||||
<linearGradient id="s53-grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<filter id="s53-glowSm" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Y axis + X axis baselines -->
|
||||
<line x1="28" y1="0" x2="28" y2="100" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<line x1="28" y1="100" x2="326" y2="100" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Grid lines -->
|
||||
<line x1="28" y1="10" x2="326" y2="10" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="3,4"/>
|
||||
<line x1="28" y1="36" x2="326" y2="36" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="3,4"/>
|
||||
<line x1="28" y1="62" x2="326" y2="62" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="3,4"/>
|
||||
|
||||
<!-- Y labels -->
|
||||
<text x="24" y="14" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">10</text>
|
||||
<text x="24" y="40" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">7</text>
|
||||
<text x="24" y="66" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">5</text>
|
||||
|
||||
<!-- Bar pairs — exact proportions from spectrum-visualizations.svg Turn Impact section -->
|
||||
<!-- Adapted: center offset 163, 3 pairs spread across 296px width -->
|
||||
<g filter="url(#s53-glowSm)">
|
||||
<!-- Pair 1: Distress — before: -40 tall (40%), after: -60 tall (60%) -->
|
||||
<rect x="50" y="60" width="14" height="40" rx="2" fill="#EF4444" opacity="0.4"/>
|
||||
<rect x="66" y="40" width="14" height="60" rx="2" fill="url(#s53-grEmerald)" opacity="0.6"/>
|
||||
<text x="65" y="116" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Distress</text>
|
||||
|
||||
<!-- Pair 2: Clarity — before: -25 tall, after: -55 tall -->
|
||||
<rect x="130" y="75" width="14" height="25" rx="2" fill="#EF4444" opacity="0.4"/>
|
||||
<rect x="146" y="45" width="14" height="55" rx="2" fill="url(#s53-grEmerald)" opacity="0.6"/>
|
||||
<text x="145" y="116" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Clarity</text>
|
||||
|
||||
<!-- Pair 3: Hope — before: -20 tall, after: -50 tall -->
|
||||
<rect x="210" y="80" width="14" height="20" rx="2" fill="#EF4444" opacity="0.4"/>
|
||||
<rect x="226" y="50" width="14" height="50" rx="2" fill="url(#s53-grEmerald)" opacity="0.6"/>
|
||||
<text x="225" y="116" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Hope</text>
|
||||
</g>
|
||||
|
||||
<!-- Legend -->
|
||||
<rect x="50" y="122" width="8" height="5" rx="1" fill="#EF4444" opacity="0.4"/>
|
||||
<text x="62" y="127" font-size="8" fill="#94A3B8" font-family="Inter">Before</text>
|
||||
<rect x="110" y="122" width="8" height="5" rx="1" fill="#10B981" opacity="0.6"/>
|
||||
<text x="122" y="127" font-size="8" fill="#94A3B8" font-family="Inter">After</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Individual Turn impact rows -->
|
||||
<div class="section-header">
|
||||
<span class="section-title">Individual Turns</span>
|
||||
</div>
|
||||
|
||||
<!-- Individual turns — work/career context = 72% of Alex's turns -->
|
||||
<div class="impact-row">
|
||||
<div class="impact-thought">
|
||||
<div class="impact-thought-text">"I completely bombed my presentation today..."</div>
|
||||
<div class="impact-date">Feb 22 · 8:51am · Catastrophizing</div>
|
||||
</div>
|
||||
<div class="impact-bars">
|
||||
<div class="impact-bar-row">
|
||||
<div class="impact-bar-bg">
|
||||
<div class="impact-bar-fill" style="width:28%; background: var(--ruby); opacity: 0.7;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="impact-bar-row">
|
||||
<div class="impact-bar-bg">
|
||||
<div class="impact-bar-fill" style="width:80%; background: var(--emerald);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="impact-delta">+52%</div>
|
||||
</div>
|
||||
|
||||
<div class="impact-row">
|
||||
<div class="impact-thought">
|
||||
<div class="impact-thought-text">"Nobody at work actually wants me there..."</div>
|
||||
<div class="impact-date">Feb 21 · 8:33am · Mind Reading</div>
|
||||
</div>
|
||||
<div class="impact-bars">
|
||||
<div class="impact-bar-row">
|
||||
<div class="impact-bar-bg">
|
||||
<div class="impact-bar-fill" style="width:22%; background: var(--ruby); opacity: 0.7;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="impact-bar-row">
|
||||
<div class="impact-bar-bg">
|
||||
<div class="impact-bar-fill" style="width:65%; background: var(--emerald);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="impact-delta">+43%</div>
|
||||
</div>
|
||||
|
||||
<div class="impact-row">
|
||||
<div class="impact-thought">
|
||||
<div class="impact-thought-text">"I should already be further along by now..."</div>
|
||||
<div class="impact-date">Feb 19 · 8:40am · Should Statements</div>
|
||||
</div>
|
||||
<div class="impact-bars">
|
||||
<div class="impact-bar-row">
|
||||
<div class="impact-bar-bg">
|
||||
<div class="impact-bar-fill" style="width:38%; background: var(--ruby); opacity: 0.7;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="impact-bar-row">
|
||||
<div class="impact-bar-bg">
|
||||
<div class="impact-bar-fill" style="width:72%; background: var(--emerald);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="impact-delta">+34%</div>
|
||||
</div>
|
||||
|
||||
<div class="impact-row">
|
||||
<div class="impact-thought">
|
||||
<div class="impact-thought-text">"If I can't handle this, what does that say about me..."</div>
|
||||
<div class="impact-date">Feb 15 · 7:58am · Personalization</div>
|
||||
</div>
|
||||
<div class="impact-bars">
|
||||
<div class="impact-bar-row">
|
||||
<div class="impact-bar-bg">
|
||||
<div class="impact-bar-fill" style="width:18%; background: var(--ruby); opacity: 0.7;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="impact-bar-row">
|
||||
<div class="impact-bar-bg">
|
||||
<div class="impact-bar-fill" style="width:58%; background: var(--emerald);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="impact-delta">+40%</div>
|
||||
</div>
|
||||
|
||||
<!-- Insight -->
|
||||
<div class="insight-panel">
|
||||
<div class="insight-label">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12">
|
||||
<path d="M6 1L11 6L6 11L1 6Z" fill="#34D399"/>
|
||||
</svg>
|
||||
Impact Reading
|
||||
</div>
|
||||
<div class="insight-text">Work and career thoughts make up 72% of your turns — and they show your biggest lifts, averaging +27% per session. Your 8–9am turns (before the workday) consistently outperform afternoon ones. The morning ritual is paying off.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
350
initial mockups/screens/spectrum/54-spectrum-rhythm.html
Normal file
350
initial mockups/screens/spectrum/54-spectrum-rhythm.html
Normal file
@@ -0,0 +1,350 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Your Rhythm</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.rhythm-container {
|
||||
padding: 16px;
|
||||
}
|
||||
.chart-wrap {
|
||||
background: var(--void);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 12px;
|
||||
margin-bottom: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.peak-highlight {
|
||||
background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(59,130,246,0.06));
|
||||
border: 1px solid rgba(139,92,246,0.25);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.peak-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.peak-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
background: rgba(139,92,246,0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.peak-info {}
|
||||
.peak-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.peak-desc {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.legend-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.legend-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 11px;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.legend-circle {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.pattern-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.pattern-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.pattern-label {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
.pattern-time {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.insight-panel {
|
||||
background: linear-gradient(135deg, rgba(139,92,246,0.06), rgba(59,130,246,0.04));
|
||||
border: 1px solid rgba(139,92,246,0.2);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 14px;
|
||||
}
|
||||
.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.55;
|
||||
}
|
||||
.screen-content { padding-bottom: 20px; }
|
||||
</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="50-spectrum-dashboard.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">Your Rhythm</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content no-pad">
|
||||
<div class="rhythm-container">
|
||||
|
||||
<!-- Bubble chart — extracted from spectrum-visualizations.svg "RHYTHM DETECTION" section -->
|
||||
<div class="chart-wrap">
|
||||
<svg width="334" height="180" viewBox="0 0 334 180" style="display:block;">
|
||||
<defs>
|
||||
<linearGradient id="s54-grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"><animate attributeName="stop-color" values="#C4B5FD;#DDD6FE;#C4B5FD" dur="4s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s54-grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s54-grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s54-grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<filter id="s54-glowSm" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Chart background -->
|
||||
<rect width="334" height="180" fill="#0A0E1A"/>
|
||||
|
||||
<!-- Y axis labels (days) -->
|
||||
<text x="20" y="28" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">Mon</text>
|
||||
<text x="20" y="55" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">Tue</text>
|
||||
<text x="20" y="82" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">Wed</text>
|
||||
<text x="20" y="109" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">Thu</text>
|
||||
<text x="20" y="136" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">Fri</text>
|
||||
<text x="20" y="163" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">Sat</text>
|
||||
|
||||
<!-- X axis time labels -->
|
||||
<text x="52" y="173" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">6am</text>
|
||||
<text x="103" y="173" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">9am</text>
|
||||
<text x="167" y="173" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">12pm</text>
|
||||
<text x="219" y="173" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">3pm</text>
|
||||
<text x="270" y="173" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">6pm</text>
|
||||
|
||||
<!-- Horizontal grid lines -->
|
||||
<line x1="24" y1="18" x2="320" y2="18" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2,6"/>
|
||||
<line x1="24" y1="45" x2="320" y2="45" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2,6"/>
|
||||
<line x1="24" y1="72" x2="320" y2="72" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2,6"/>
|
||||
<line x1="24" y1="99" x2="320" y2="99" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2,6"/>
|
||||
<line x1="24" y1="126" x2="320" y2="126" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2,6"/>
|
||||
<line x1="24" y1="153" x2="320" y2="153" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2,6"/>
|
||||
|
||||
<!-- Peak highlight zone (9am column) -->
|
||||
<rect x="88" y="6" width="36" height="158" rx="3" fill="rgba(139,92,246,0.05)" stroke="rgba(139,92,246,0.15)" stroke-width="0.8"/>
|
||||
|
||||
<!-- Activity bubbles — adapted from spectrum-visualizations.svg Rhythm Detection -->
|
||||
<!-- Morning cluster (amethyst, 9am col) -->
|
||||
<g filter="url(#s54-glowSm)">
|
||||
<!-- Monday row y=18 -->
|
||||
<circle cx="78" cy="18" r="4" fill="url(#s54-grAmethyst)" opacity="0.3"/>
|
||||
<circle cx="94" cy="18" r="5" fill="url(#s54-grAmethyst)" opacity="0.5"/>
|
||||
<circle cx="106" cy="18" r="6" fill="url(#s54-grAmethyst)" opacity="0.7">
|
||||
<animate attributeName="opacity" values="0.5;0.8;0.5" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="148" cy="18" r="4" fill="url(#s54-grAmethyst)" opacity="0.4"/>
|
||||
<!-- Midday lull Mon -->
|
||||
<circle cx="156" cy="18" r="3" fill="url(#s54-grSapphire)" opacity="0.2"/>
|
||||
<circle cx="220" cy="18" r="3" fill="url(#s54-grSapphire)" opacity="0.25"/>
|
||||
|
||||
<!-- Tuesday row y=45 -->
|
||||
<circle cx="100" cy="45" r="7" fill="url(#s54-grAmethyst)" opacity="0.7">
|
||||
<animate attributeName="opacity" values="0.5;0.8;0.5" dur="3.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="115" cy="45" r="5" fill="url(#s54-grAmethyst)" opacity="0.5"/>
|
||||
<circle cx="219" cy="45" r="4" fill="url(#s54-grEmerald)" opacity="0.4"/>
|
||||
|
||||
<!-- Wednesday row y=72 -->
|
||||
<circle cx="94" cy="72" r="5" fill="url(#s54-grAmethyst)" opacity="0.6"/>
|
||||
<circle cx="150" cy="72" r="4" fill="url(#s54-grEmerald)" opacity="0.5"/>
|
||||
<circle cx="205" cy="72" r="3" fill="url(#s54-grSapphire)" opacity="0.4"/>
|
||||
|
||||
<!-- Thursday row y=99 — afternoon peak -->
|
||||
<circle cx="219" cy="99" r="7" fill="url(#s54-grEmerald)" opacity="0.7">
|
||||
<animate attributeName="opacity" values="0.5;0.8;0.5" dur="3.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="235" cy="99" r="5" fill="url(#s54-grEmerald)" opacity="0.5"/>
|
||||
<circle cx="96" cy="99" r="4" fill="url(#s54-grAmethyst)" opacity="0.45"/>
|
||||
|
||||
<!-- Friday row y=126 -->
|
||||
<circle cx="102" cy="126" r="6" fill="url(#s54-grAmethyst)" opacity="0.6"/>
|
||||
<circle cx="168" cy="126" r="4" fill="url(#s54-grSapphire)" opacity="0.45"/>
|
||||
<circle cx="285" cy="126" r="5" fill="url(#s54-grAmber)" opacity="0.5"/>
|
||||
|
||||
<!-- Saturday row y=153 -->
|
||||
<circle cx="125" cy="153" r="4" fill="url(#s54-grAmber)" opacity="0.35"/>
|
||||
<circle cx="186" cy="153" r="5" fill="url(#s54-grAmethyst)" opacity="0.45"/>
|
||||
<circle cx="249" cy="153" r="4" fill="url(#s54-grEmerald)" opacity="0.4"/>
|
||||
</g>
|
||||
|
||||
<!-- Pattern line (smoothed) — exact from SVG, adapted x-coords -->
|
||||
<path d="M 40,20 C 80,-5 112,-15 140,5 C 168,18 190,14 219,-15 C 248,5 275,12 310,15"
|
||||
fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.3" stroke-dasharray="4 4"/>
|
||||
|
||||
<!-- Peak labels -->
|
||||
<g filter="url(#s54-glowSm)">
|
||||
<path d="M 106,4 L 108,2 L 110,4 L 108,6 Z" fill="url(#s54-grAmethyst)" opacity="0.8"/>
|
||||
<text x="106" y="0" font-size="7" fill="#C4B5FD" text-anchor="middle" font-family="Inter" font-weight="500">Morning Peak</text>
|
||||
</g>
|
||||
<g filter="url(#s54-glowSm)">
|
||||
<path d="M 219,88 L 221,86 L 223,88 L 221,90 Z" fill="url(#s54-grEmerald)" opacity="0.8"/>
|
||||
<text x="219" y="84" font-size="7" fill="#6EE7B7" text-anchor="middle" font-family="Inter" font-weight="500">Afternoon Peak</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Legend -->
|
||||
<div class="legend-row">
|
||||
<div class="legend-chip">
|
||||
<div class="legend-circle" style="background: var(--amethyst);"></div>
|
||||
Turn
|
||||
</div>
|
||||
<div class="legend-chip">
|
||||
<div class="legend-circle" style="background: var(--emerald);"></div>
|
||||
Mirror
|
||||
</div>
|
||||
<div class="legend-chip">
|
||||
<div class="legend-circle" style="background: var(--sapphire);"></div>
|
||||
Lens
|
||||
</div>
|
||||
<div class="legend-chip">
|
||||
<div class="legend-circle" style="background: var(--amber);"></div>
|
||||
Ritual
|
||||
</div>
|
||||
<div class="legend-chip">
|
||||
<div class="legend-circle" style="background: var(--rose);"></div>
|
||||
Gallery
|
||||
</div>
|
||||
<div class="legend-chip">
|
||||
<span style="font-size:9px;">Bubble size = activity level</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Peak time highlight — canonical: most turns 8–9am, secondary 6–8pm -->
|
||||
<div class="peak-highlight">
|
||||
<div class="peak-row">
|
||||
<div class="peak-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20">
|
||||
<defs>
|
||||
<linearGradient id="peakGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M10 2L18 10L10 18L2 10Z" fill="url(#peakGrad)" opacity="0.9"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="peak-info">
|
||||
<div class="peak-title">Peak Window: Mon–Fri, 8–9am</div>
|
||||
<div class="peak-desc">Before the workday begins — your clearest reflection time</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pattern cards — aligned to canonical data -->
|
||||
<div class="pattern-card">
|
||||
<div class="pattern-row">
|
||||
<span class="pattern-label">Primary trigger context</span>
|
||||
<span class="pattern-time" style="color: var(--amethyst-light);">Work / career (72%)</span>
|
||||
</div>
|
||||
<div class="divider" style="margin: 10px 0;"></div>
|
||||
<div class="pattern-row">
|
||||
<span class="pattern-label">Secondary trigger</span>
|
||||
<span class="pattern-time" style="color: var(--sapphire-light);">Relationships (18%)</span>
|
||||
</div>
|
||||
<div class="divider" style="margin: 10px 0;"></div>
|
||||
<div class="pattern-row">
|
||||
<span class="pattern-label">Evening peak window</span>
|
||||
<span class="pattern-time" style="color: var(--emerald-light);">6–8pm</span>
|
||||
</div>
|
||||
<div class="divider" style="margin: 10px 0;"></div>
|
||||
<div class="pattern-row">
|
||||
<span class="pattern-label">Quietest time</span>
|
||||
<span class="pattern-time" style="color: var(--dim-light);">Weekends after 9pm</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Insight -->
|
||||
<div class="insight-panel">
|
||||
<div class="insight-label">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12">
|
||||
<path d="M6 1L11 6L6 11L1 6Z" fill="#A78BFA"/>
|
||||
</svg>
|
||||
Rhythm Reading
|
||||
</div>
|
||||
<div class="insight-text">Your turns cluster around two windows — 8–9am before work, and 6–8pm after. This is a healthy pattern: processing the anticipation before work, and processing the day after. The morning window produces your deepest reframes.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
361
initial mockups/screens/spectrum/55-spectrum-growth.html
Normal file
361
initial mockups/screens/spectrum/55-spectrum-growth.html
Normal file
@@ -0,0 +1,361 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Growth Trajectory</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.growth-container {
|
||||
padding: 16px;
|
||||
}
|
||||
.growth-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.growth-score {
|
||||
text-align: right;
|
||||
}
|
||||
.score-val {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
.score-label {
|
||||
font-size: 11px;
|
||||
color: var(--dim-light);
|
||||
margin-top: -2px;
|
||||
}
|
||||
.growth-pct {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 3px 8px;
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(16,185,129,0.15);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--emerald-light);
|
||||
margin-top: 4px;
|
||||
}
|
||||
.chart-wrap {
|
||||
background: var(--void);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 16px 12px 12px;
|
||||
margin-bottom: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.milestones-section {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.milestone-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid rgba(28,34,64,0.5);
|
||||
}
|
||||
.milestone-item:last-child { border-bottom: none; }
|
||||
.milestone-dot {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
}
|
||||
.milestone-dot.achieved {
|
||||
background: rgba(16,185,129,0.2);
|
||||
border: 2px solid var(--emerald);
|
||||
}
|
||||
.milestone-dot.upcoming {
|
||||
background: var(--deep-glass);
|
||||
border: 2px solid var(--twilight);
|
||||
}
|
||||
.milestone-info { flex: 1; }
|
||||
.milestone-title {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
.milestone-date {
|
||||
font-size: 11px;
|
||||
color: var(--faint-light);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.insight-panel {
|
||||
background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.03));
|
||||
border: 1px solid rgba(16,185,129,0.25);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 14px;
|
||||
}
|
||||
.insight-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--emerald-light);
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.insight-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.55;
|
||||
}
|
||||
.screen-content { padding-bottom: 20px; }
|
||||
</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="50-spectrum-dashboard.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">Growth</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content no-pad">
|
||||
<div class="growth-container">
|
||||
|
||||
<!-- Header with score -->
|
||||
<div class="growth-header">
|
||||
<div>
|
||||
<div class="subheading" style="color: var(--soft-light);">Wellness Score</div>
|
||||
<div class="body-sm text-dim">This week</div>
|
||||
</div>
|
||||
<div class="growth-score">
|
||||
<div class="score-val" style="color: var(--emerald-light);">78</div>
|
||||
<div class="score-label">/ 100</div>
|
||||
<div class="growth-pct">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none">
|
||||
<path d="M5 8V2M2 5L5 2L8 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
+14% this week
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Line chart — extracted from spectrum-visualizations.svg "GROWTH TRAJECTORY" section -->
|
||||
<div class="chart-wrap">
|
||||
<svg width="334" height="170" viewBox="0 0 334 170" style="display:block;">
|
||||
<defs>
|
||||
<linearGradient id="s55-grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/><stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<!-- Area fill under growth curve — #8B5CF6 with low opacity per SVG -->
|
||||
<linearGradient id="s55-areaFill" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.08"/>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0.01"/>
|
||||
</linearGradient>
|
||||
<filter id="s55-glowMd" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="s55-glowSm" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Chart background -->
|
||||
<rect width="334" height="170" fill="#0A0E1A"/>
|
||||
|
||||
<!-- Axes -->
|
||||
<line x1="30" y1="125" x2="320" y2="125" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<line x1="30" y1="125" x2="30" y2="15" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Grid lines -->
|
||||
<line x1="30" y1="35" x2="320" y2="35" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="3,5"/>
|
||||
<line x1="30" y1="65" x2="320" y2="65" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="3,5"/>
|
||||
<line x1="30" y1="95" x2="320" y2="95" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="3,5"/>
|
||||
|
||||
<!-- Y labels -->
|
||||
<text x="26" y="38" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">100</text>
|
||||
<text x="26" y="68" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">75</text>
|
||||
<text x="26" y="98" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">50</text>
|
||||
|
||||
<!-- Month labels -->
|
||||
<text x="45" y="138" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Jan</text>
|
||||
<text x="97" y="138" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Feb</text>
|
||||
<text x="149" y="138" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Mar</text>
|
||||
<text x="201" y="138" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Apr</text>
|
||||
<text x="253" y="138" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">May</text>
|
||||
<text x="305" y="138" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Jun</text>
|
||||
|
||||
<!-- Growth line + area — adapted from spectrum-visualizations.svg Growth Trajectory -->
|
||||
<!-- Original: M -220,40 C -180,35 -140,20 -80,10 C -20,0 40,-15 100,-25 C 160,-35 200,-40 240,-50 -->
|
||||
<!-- Adapted: center=175, y-baseline=125, scale x: +175 shifts origin, y: +125 for baseline -->
|
||||
<g filter="url(#s55-glowMd)">
|
||||
<!-- Area fill -->
|
||||
<path d="M 45,108 C 68,104 91,95 118,90 C 145,85 168,78 195,72 C 222,66 245,59 268,52 C 291,45 305,40 315,34 L 315,125 L 45,125 Z"
|
||||
fill="url(#s55-areaFill)"/>
|
||||
<!-- Growth line — stroke with amethyst gradient (exact from SVG) -->
|
||||
<path d="M 45,108 C 68,104 91,95 118,90 C 145,85 168,78 195,72 C 222,66 245,59 268,52 C 291,45 305,40 315,34"
|
||||
fill="none" stroke="url(#s55-grAmethyst)" stroke-width="2" stroke-linecap="round" opacity="0.8"/>
|
||||
<!-- Data point fragments — exact diamond+specular pattern from SVG -->
|
||||
<path d="M 45,108 L 48,111 L 45,114 L 42,111 Z" fill="url(#s55-grAmethyst)" opacity="0.6" filter="url(#s55-glowSm)"/>
|
||||
<path d="M 45,108 L 48,111 L 45,111 Z" fill="#fff" opacity="0.15"/>
|
||||
|
||||
<path d="M 97,88 L 100,91 L 97,94 L 94,91 Z" fill="url(#s55-grAmethyst)" opacity="0.7" filter="url(#s55-glowSm)"/>
|
||||
<path d="M 97,88 L 100,91 L 97,91 Z" fill="#fff" opacity="0.15"/>
|
||||
|
||||
<path d="M 149,74 L 152,77 L 149,80 L 146,77 Z" fill="url(#s55-grAmethyst)" opacity="0.7" filter="url(#s55-glowSm)"/>
|
||||
<path d="M 149,74 L 152,77 L 149,77 Z" fill="#fff" opacity="0.15"/>
|
||||
|
||||
<path d="M 201,60 L 204,63 L 201,66 L 198,63 Z" fill="url(#s55-grAmethyst)" opacity="0.8" filter="url(#s55-glowSm)"/>
|
||||
<path d="M 201,60 L 204,63 L 201,63 Z" fill="#fff" opacity="0.15"/>
|
||||
|
||||
<path d="M 253,46 L 256,49 L 253,52 L 250,49 Z" fill="url(#s55-grAmethyst)" opacity="0.8" filter="url(#s55-glowSm)"/>
|
||||
<path d="M 253,46 L 256,49 L 253,49 Z" fill="#fff" opacity="0.15"/>
|
||||
|
||||
<!-- Current point (animated pulse) -->
|
||||
<path d="M 315,34 L 318,37 L 315,40 L 312,37 Z" fill="url(#s55-grAmethyst)" opacity="0.9" filter="url(#s55-glowSm)">
|
||||
<animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 315,34 L 318,37 L 315,37 Z" fill="#fff" opacity="0.15"/>
|
||||
</g>
|
||||
|
||||
<!-- Milestone markers — exact from SVG (circle + label) -->
|
||||
<g filter="url(#s55-glowSm)">
|
||||
<!-- 10th Turn milestone at Feb/Mar -->
|
||||
<circle cx="149" cy="76" r="8" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.4"/>
|
||||
<text x="149" y="68" font-size="7" fill="#6EE7B7" text-anchor="middle" font-family="Inter">10th Turn</text>
|
||||
</g>
|
||||
<g filter="url(#s55-glowSm)">
|
||||
<!-- 30-day streak milestone at May -->
|
||||
<circle cx="253" cy="48" r="8" fill="none" stroke="#F59E0B" stroke-width="0.8" opacity="0.4"/>
|
||||
<text x="253" y="40" font-size="7" fill="#FDE68A" text-anchor="middle" font-family="Inter">30-day streak</text>
|
||||
</g>
|
||||
|
||||
<!-- Y-axis label -->
|
||||
<text x="14" y="80" font-size="7" fill="#475569" transform="rotate(-90, 14, 80)" text-anchor="middle" font-family="Inter">Resilience</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Milestones — aligned to Alex canonical data: Feb 1 start, 47 turns, 14 streak, 3 lens goals -->
|
||||
<div class="milestones-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">Growth Milestones</span>
|
||||
</div>
|
||||
|
||||
<div class="milestone-item">
|
||||
<div class="milestone-dot achieved">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2 6L5 9L10 3" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="milestone-info">
|
||||
<div class="milestone-title">First Turn · Feb 1</div>
|
||||
<div class="milestone-date">Started the practice · +5 wellness points</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="milestone-item">
|
||||
<div class="milestone-dot achieved">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2 6L5 9L10 3" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="milestone-info">
|
||||
<div class="milestone-title">25 Turns completed · Feb 12</div>
|
||||
<div class="milestone-date">Pattern awareness unlocked · +10 wellness points</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="milestone-item">
|
||||
<div class="milestone-dot achieved">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2 6L5 9L10 3" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="milestone-info">
|
||||
<div class="milestone-title">14-day ritual streak · Feb 22</div>
|
||||
<div class="milestone-date">Longest streak · +15 wellness points</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="milestone-item">
|
||||
<div class="milestone-dot achieved">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2 6L5 9L10 3" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="milestone-info">
|
||||
<div class="milestone-title">47 Turns · Feb 22</div>
|
||||
<div class="milestone-date">47 evidence tiles built · +12 wellness points</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="milestone-item">
|
||||
<div class="milestone-dot upcoming">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12">
|
||||
<path d="M6 1L11 6L6 11L1 6Z" fill="#475569" opacity="0.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="milestone-info">
|
||||
<div class="milestone-title" style="color: var(--dim-light);">50 Turns (upcoming)</div>
|
||||
<div class="milestone-date">3 turns away · +8 wellness points</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="milestone-item">
|
||||
<div class="milestone-dot upcoming">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12">
|
||||
<path d="M6 1L11 6L6 11L1 6Z" fill="#475569" opacity="0.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="milestone-info">
|
||||
<div class="milestone-title" style="color: var(--dim-light);">21-day ritual streak (upcoming)</div>
|
||||
<div class="milestone-date">7 days away · +20 wellness points</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Insight -->
|
||||
<div class="insight-panel">
|
||||
<div class="insight-label">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12">
|
||||
<path d="M6 1L11 6L6 11L1 6Z" fill="#34D399"/>
|
||||
</svg>
|
||||
Growth Reading
|
||||
</div>
|
||||
<div class="insight-text">21 days of practice, 47 turns, 14 consecutive rituals — the trajectory is clear. The steepest climb in your score came between Feb 12–22, when the ritual streak took hold. You're 3 turns from hitting 50.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
369
initial mockups/screens/spectrum/56-spectrum-weekly.html
Normal file
369
initial mockups/screens/spectrum/56-spectrum-weekly.html
Normal file
@@ -0,0 +1,369 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Weekly Summary</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.weekly-container {
|
||||
padding: 16px;
|
||||
}
|
||||
.week-label {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.summary-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: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.summary-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--amethyst-light);
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.summary-text {
|
||||
font-size: 15px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.metric-card {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 12px;
|
||||
}
|
||||
.metric-val {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
.metric-lbl {
|
||||
font-size: 11px;
|
||||
color: var(--dim-light);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.distortions-section {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.distortion-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid rgba(28,34,64,0.5);
|
||||
}
|
||||
.distortion-row:last-child { border-bottom: none; }
|
||||
.distortion-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(245,158,11,0.12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.distortion-name {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
.distortion-count {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--amber-light);
|
||||
}
|
||||
.distortion-bar-wrap {
|
||||
width: 60px;
|
||||
height: 6px;
|
||||
background: var(--twilight);
|
||||
border-radius: var(--radius-full);
|
||||
overflow: hidden;
|
||||
}
|
||||
.distortion-bar {
|
||||
height: 100%;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--amber);
|
||||
opacity: 0.7;
|
||||
}
|
||||
.actions-section {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.action-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.action-num {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: rgba(139,92,246,0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--amethyst-light);
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
}
|
||||
.action-text {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.4;
|
||||
}
|
||||
.screen-content { padding-bottom: 20px; }
|
||||
</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="50-spectrum-dashboard.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">Weekly Summary</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content no-pad">
|
||||
<div class="weekly-container">
|
||||
|
||||
<div class="week-label">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<rect x="1" y="2" width="10" height="9" rx="1.5" stroke="#94A3B8" stroke-width="1"/>
|
||||
<path d="M3 1V3M9 1V3" stroke="#94A3B8" stroke-width="1" stroke-linecap="round"/>
|
||||
</svg>
|
||||
Feb 16 – Feb 22, 2026
|
||||
</div>
|
||||
|
||||
<!-- AI Summary -->
|
||||
<div class="summary-card">
|
||||
<div class="summary-label">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12">
|
||||
<path d="M6 1L11 6L6 11L1 6Z" fill="#A78BFA"/>
|
||||
</svg>
|
||||
AI Weekly Narrative
|
||||
</div>
|
||||
<div class="summary-text">Week three landed. You completed 14 turns between Feb 16–22, all but two before 9am — and the quality shows. Catastrophizing appeared 4 times but you caught it faster each time. The Feb 19 "should statements" turn stands out: you reframed a career expectation with remarkable clarity. You're 3 turns from 50 total.</div>
|
||||
</div>
|
||||
|
||||
<!-- Key metrics -->
|
||||
<div class="metrics-grid">
|
||||
<div class="metric-card" style="border-top: 2px solid var(--amethyst); border-radius: var(--radius-lg);">
|
||||
<div style="display:flex; align-items:center; gap:6px; margin-bottom:4px;">
|
||||
<div style="width:8px; height:8px; border-radius:50%; background:var(--amethyst); box-shadow: 0 0 6px rgba(139,92,246,0.5);"></div>
|
||||
<div class="metric-lbl" style="margin-top:0;">Turn</div>
|
||||
</div>
|
||||
<div class="metric-val" style="color: var(--amethyst-light);">14</div>
|
||||
<div class="metric-lbl">Turns completed</div>
|
||||
</div>
|
||||
<div class="metric-card" style="border-top: 2px solid var(--amber); border-radius: var(--radius-lg);">
|
||||
<div style="display:flex; align-items:center; gap:6px; margin-bottom:4px;">
|
||||
<div style="width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow: 0 0 6px rgba(245,158,11,0.5);"></div>
|
||||
<div class="metric-lbl" style="margin-top:0;">Mirror</div>
|
||||
</div>
|
||||
<div class="metric-val" style="color: var(--amber-light);">4</div>
|
||||
<div class="metric-lbl">Sessions</div>
|
||||
</div>
|
||||
<div class="metric-card" style="border-top: 2px solid var(--emerald); border-radius: var(--radius-lg);">
|
||||
<div style="display:flex; align-items:center; gap:6px; margin-bottom:4px;">
|
||||
<div style="width:8px; height:8px; border-radius:50%; background:var(--emerald); box-shadow: 0 0 6px rgba(16,185,129,0.5);"></div>
|
||||
<div class="metric-lbl" style="margin-top:0;">Lens</div>
|
||||
</div>
|
||||
<div class="metric-val" style="color: var(--emerald-light);">3</div>
|
||||
<div class="metric-lbl">Goals active</div>
|
||||
</div>
|
||||
<div class="metric-card" style="border-top: 2px solid var(--rose); border-radius: var(--radius-lg);">
|
||||
<div style="display:flex; align-items:center; gap:6px; margin-bottom:4px;">
|
||||
<div style="width:8px; height:8px; border-radius:50%; background:var(--rose); box-shadow: 0 0 6px rgba(236,72,153,0.5);"></div>
|
||||
<div class="metric-lbl" style="margin-top:0;">Ritual</div>
|
||||
</div>
|
||||
<div class="metric-val" style="color: var(--pure-light);">14</div>
|
||||
<div class="metric-lbl">Day streak</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Top distortions -->
|
||||
<div class="distortions-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">Top Distortions This Week</span>
|
||||
</div>
|
||||
|
||||
<!-- Distortion icons extracted from icons-distortions.svg — aligned to canonical fragment data -->
|
||||
<div class="distortion-row">
|
||||
<div class="distortion-icon">
|
||||
<!-- Catastrophizing icon — from icons-distortions.svg translate(28,60)/translate(12,12) -->
|
||||
<svg width="24" height="24" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<filter id="s56-gAmber1" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="1.8" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<linearGradient id="s56-amberGr1" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="translate(12,12)" filter="url(#s56-gAmber1)">
|
||||
<path d="M 0,-10 L 5,0 L 0,10 L -5,0 Z" fill="url(#s56-amberGr1)" opacity="0.9"/>
|
||||
<path d="M 0,-10 L 5,0 L -5,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<path d="M -8,6 L -5,10 L -9,12 L -11,8 Z" fill="#F59E0B" opacity="0.5"/>
|
||||
<path d="M 7,8 L 10,12 L 8,14 L 5,11 Z" fill="#F59E0B" opacity="0.4"/>
|
||||
<line x1="0" y1="11" x2="0" y2="16" stroke="#FCD34D" stroke-width="0.5" opacity="0.4"/>
|
||||
<line x1="-3" y1="12" x2="-5" y2="17" stroke="#FCD34D" stroke-width="0.4" opacity="0.3"/>
|
||||
<line x1="3" y1="12" x2="5" y2="17" stroke="#FCD34D" stroke-width="0.4" opacity="0.3"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="distortion-name">Catastrophizing</span>
|
||||
<div class="distortion-bar-wrap">
|
||||
<div class="distortion-bar" style="width:100%;"></div>
|
||||
</div>
|
||||
<span class="distortion-count">4x</span>
|
||||
</div>
|
||||
|
||||
<div class="distortion-row">
|
||||
<div class="distortion-icon">
|
||||
<!-- Mind Reading icon -->
|
||||
<svg width="24" height="24" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<filter id="s56-gAmber2" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="1.8" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<linearGradient id="s56-amberGr2" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="translate(12,12)" filter="url(#s56-gAmber2)">
|
||||
<path d="M 0,-10 L -7,0 L 0,10 L 0,0 Z" fill="url(#s56-amberGr2)" opacity="0.85"/>
|
||||
<path d="M 0,-10 L 7,0 L 0,10 L 0,0 Z" fill="none" stroke="#F59E0B" stroke-width="1"/>
|
||||
<line x1="0" y1="-10" x2="0" y2="10" stroke="#FEF3C7" stroke-width="0.6" opacity="0.5"/>
|
||||
<path d="M 0,-10 L -7,0 L 0,0 Z" fill="#fff" opacity="0.12"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="distortion-name">Mind Reading</span>
|
||||
<div class="distortion-bar-wrap">
|
||||
<div class="distortion-bar" style="width:57%;"></div>
|
||||
</div>
|
||||
<span class="distortion-count">2x</span>
|
||||
</div>
|
||||
|
||||
<div class="distortion-row">
|
||||
<div class="distortion-icon">
|
||||
<!-- Should Statements icon -->
|
||||
<svg width="24" height="24" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<filter id="s56-gAmber3" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="1.8" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<linearGradient id="s56-amberGr3" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="translate(12,12)" filter="url(#s56-gAmber3)">
|
||||
<path d="M -10,0 L -7,-3 L -4,0 L -7,3 Z" fill="url(#s56-amberGr3)" opacity="0.9"/>
|
||||
<path d="M -10,0 L -7,-3 L -4,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<line x1="-3" y1="0" x2="0" y2="0" stroke="#FCD34D" stroke-width="0.5" opacity="0.4"/>
|
||||
<path d="M 2,-6 L 4,-8 L 6,-6 L 4,-4 Z" fill="#F59E0B" opacity="0.7"/>
|
||||
<path d="M 4,0 L 6,-2 L 8,0 L 6,2 Z" fill="#F59E0B" opacity="0.6"/>
|
||||
<path d="M 2,6 L 4,4 L 6,6 L 4,8 Z" fill="#F59E0B" opacity="0.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="distortion-name">Should Statements</span>
|
||||
<div class="distortion-bar-wrap">
|
||||
<div class="distortion-bar" style="width:36%;"></div>
|
||||
</div>
|
||||
<span class="distortion-count">2x</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recommended actions -->
|
||||
<div class="actions-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">Recommended Actions</span>
|
||||
</div>
|
||||
|
||||
<div class="action-item">
|
||||
<div class="action-num">1</div>
|
||||
<div class="action-text">Your Catastrophizing peak is work-related — try naming the specific fear underneath the thought next time, not just the outcome. The Feb 22 "bombed my presentation" turn started to do this well.</div>
|
||||
</div>
|
||||
|
||||
<div class="action-item">
|
||||
<div class="action-num">2</div>
|
||||
<div class="action-text">You're 3 turns from 50 total. Keep the morning 8–9am window — your reframe quality there is measurably higher than afternoon turns.</div>
|
||||
</div>
|
||||
|
||||
<div class="action-item">
|
||||
<div class="action-num">3</div>
|
||||
<div class="action-text">Review your Feb 19 "should statements" reframe — it's your sharpest yet. Save it to your Gallery as a reference for similar turns this week.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Share button -->
|
||||
<a class="btn btn-secondary" href="../modals/61-pattern-share.html" style="display:flex; align-items:center; justify-content:center; gap:8px;">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<circle cx="13" cy="3" r="2" stroke="#E2E8F0" stroke-width="1.2"/>
|
||||
<circle cx="3" cy="8" r="2" stroke="#E2E8F0" stroke-width="1.2"/>
|
||||
<circle cx="13" cy="13" r="2" stroke="#E2E8F0" stroke-width="1.2"/>
|
||||
<path d="M5 7L11 4M5 9L11 12" stroke="#E2E8F0" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
Share Summary
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
308
initial mockups/screens/spectrum/57-spectrum-monthly.html
Normal file
308
initial mockups/screens/spectrum/57-spectrum-monthly.html
Normal file
@@ -0,0 +1,308 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Monthly Report</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.monthly-container {
|
||||
padding: 16px;
|
||||
}
|
||||
.month-label {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.summary-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: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.summary-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--amethyst-light);
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.summary-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.comparison-section {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.comparison-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 12px;
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.comp-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.comp-label {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
.comp-prev {
|
||||
font-size: 12px;
|
||||
color: var(--faint-light);
|
||||
width: 36px;
|
||||
text-align: center;
|
||||
}
|
||||
.comp-arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
min-width: 48px;
|
||||
}
|
||||
.comp-arrow.up { color: var(--emerald-light); }
|
||||
.comp-arrow.down { color: var(--ruby); }
|
||||
.comp-arrow.neutral { color: var(--dim-light); }
|
||||
.growth-areas {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.growth-area-card {
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 14px;
|
||||
margin-bottom: 10px;
|
||||
border-left: 3px solid;
|
||||
}
|
||||
.growth-area-card.amethyst {
|
||||
background: rgba(139,92,246,0.06);
|
||||
border-color: var(--amethyst);
|
||||
}
|
||||
.growth-area-card.emerald {
|
||||
background: rgba(16,185,129,0.06);
|
||||
border-color: var(--emerald);
|
||||
}
|
||||
.growth-area-card.amber {
|
||||
background: rgba(245,158,11,0.06);
|
||||
border-color: var(--amber);
|
||||
}
|
||||
.area-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.area-text {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.palette-section {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.palette-card {
|
||||
background: var(--void);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.palette-info { flex: 1; }
|
||||
.palette-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--soft-light);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.palette-desc {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
line-height: 1.4;
|
||||
}
|
||||
.screen-content { padding-bottom: 20px; }
|
||||
</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="50-spectrum-dashboard.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">Monthly Report</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content no-pad">
|
||||
<div class="monthly-container">
|
||||
|
||||
<div class="month-label">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<rect x="1" y="2" width="10" height="9" rx="1.5" stroke="#94A3B8" stroke-width="1"/>
|
||||
<path d="M3 1V3M9 1V3" stroke="#94A3B8" stroke-width="1" stroke-linecap="round"/>
|
||||
</svg>
|
||||
February 2026
|
||||
</div>
|
||||
|
||||
<!-- AI Summary -->
|
||||
<div class="summary-card">
|
||||
<div class="summary-label">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12">
|
||||
<path d="M6 1L11 6L6 11L1 6Z" fill="#A78BFA"/>
|
||||
</svg>
|
||||
AI Monthly Analysis
|
||||
</div>
|
||||
<div class="summary-text">February marked a turning point. Starting Feb 1 with your first Turn and first ritual, you built to 47 turns, a 14-day streak, and 89% ritual completion by Feb 22. Catastrophizing declined week-over-week — 7 instances across 3 weeks, down from a higher baseline. The evidence wall is taking shape.</div>
|
||||
</div>
|
||||
|
||||
<!-- Comparison vs previous month -->
|
||||
<div class="comparison-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">vs. January 2026</span>
|
||||
</div>
|
||||
|
||||
<!-- Canonical: 47 Turns, 23 Mirror, 3 Lens goals, 14-day streak (89% completion), 47 Evidence tiles -->
|
||||
<div class="comparison-row">
|
||||
<div class="comp-dot" style="background: var(--amethyst); box-shadow: 0 0 5px rgba(139,92,246,0.45);"></div>
|
||||
<span class="comp-label">Total Turns</span>
|
||||
<span class="comp-prev">—</span>
|
||||
<span class="comp-arrow up">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none">
|
||||
<path d="M5 8V2M2 5L5 2L8 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
47
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="comparison-row">
|
||||
<div class="comp-dot" style="background: var(--amber); box-shadow: 0 0 5px rgba(245,158,11,0.4);"></div>
|
||||
<span class="comp-label">Mirror Sessions</span>
|
||||
<span class="comp-prev">—</span>
|
||||
<span class="comp-arrow up">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none">
|
||||
<path d="M5 8V2M2 5L5 2L8 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
23
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="comparison-row">
|
||||
<div class="comp-dot" style="background: var(--ruby); box-shadow: 0 0 5px rgba(239,68,68,0.35);"></div>
|
||||
<span class="comp-label">Catastrophizing Instances</span>
|
||||
<span class="comp-prev">—</span>
|
||||
<span class="comp-arrow up" style="color: var(--emerald-light);">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none">
|
||||
<path d="M5 2V8M2 5L5 8L8 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
7 · down
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="comparison-row">
|
||||
<div class="comp-dot" style="background: var(--rose); box-shadow: 0 0 5px rgba(236,72,153,0.35);"></div>
|
||||
<span class="comp-label">Ritual Completion Rate</span>
|
||||
<span class="comp-prev">—</span>
|
||||
<span class="comp-arrow up">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none">
|
||||
<path d="M5 8V2M2 5L5 2L8 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
89%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="comparison-row">
|
||||
<div class="comp-dot" style="background: var(--sapphire); box-shadow: 0 0 5px rgba(59,130,246,0.4);"></div>
|
||||
<span class="comp-label">Evidence tiles saved</span>
|
||||
<span class="comp-prev">—</span>
|
||||
<span class="comp-arrow up">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none">
|
||||
<path d="M5 8V2M2 5L5 2L8 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
47
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Growth areas -->
|
||||
<div class="growth-areas">
|
||||
<div class="section-header">
|
||||
<span class="section-title">Growth Areas</span>
|
||||
</div>
|
||||
|
||||
<div class="growth-area-card amethyst">
|
||||
<div class="area-label" style="color: var(--amethyst-light);">Strongest Growth</div>
|
||||
<div class="area-text">Turn practice — 47 turns in 22 days, averaging 2+ per day in week 3. Your morning turns (8–9am) consistently score highest for reframe quality.</div>
|
||||
</div>
|
||||
|
||||
<div class="growth-area-card emerald">
|
||||
<div class="area-label" style="color: var(--emerald-light);">Breakout Area</div>
|
||||
<div class="area-text">Ritual streak — 14 consecutive days with 89% completion. Started Feb 1, no streak longer in your history. The habit has taken hold.</div>
|
||||
</div>
|
||||
|
||||
<div class="growth-area-card amber">
|
||||
<div class="area-label" style="color: var(--amber-light);">Watch Area</div>
|
||||
<div class="area-text">Mind Reading stayed steady at 4 instances across the month. Worth watching if it climbs — it tends to spike with relationship or social stress.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Monthly kaleidoscope -->
|
||||
<div class="palette-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">February's Emotional Palette</span>
|
||||
</div>
|
||||
|
||||
<div class="palette-card">
|
||||
<img src="../../assets/kalei-logo.svg" width="48" height="48" alt="Kalei" style="flex-shrink:0;">
|
||||
<div class="palette-info">
|
||||
<div class="palette-title">Predominantly Amethyst</div>
|
||||
<div class="palette-desc">Dominated by Turn energy, with growing Emerald streaks of growth and Amber awareness. A kaleidoscope shifting toward equilibrium.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user