379 lines
14 KiB
HTML
379 lines
14 KiB
HTML
<!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>
|