315 lines
15 KiB
HTML
315 lines
15 KiB
HTML
<!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>
|