309 lines
11 KiB
HTML
309 lines
11 KiB
HTML
|
<!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>
|