362 lines
16 KiB
HTML
362 lines
16 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=390, initial-scale=1">
|
|||
|
|
<title>Kalei — 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>
|