370 lines
16 KiB
HTML
370 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 — 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>
|