351 lines
16 KiB
HTML
351 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 — Your Rhythm</title>
|
||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||
<style>
|
||
.rhythm-container {
|
||
padding: 16px;
|
||
}
|
||
.chart-wrap {
|
||
background: var(--void);
|
||
border: 1px solid var(--twilight);
|
||
border-radius: var(--radius-xl);
|
||
padding: 12px;
|
||
margin-bottom: 14px;
|
||
overflow: hidden;
|
||
}
|
||
.peak-highlight {
|
||
background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(59,130,246,0.06));
|
||
border: 1px solid rgba(139,92,246,0.25);
|
||
border-radius: var(--radius-xl);
|
||
padding: 14px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.peak-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.peak-icon {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 50%;
|
||
background: rgba(139,92,246,0.15);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.peak-info {}
|
||
.peak-title {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: var(--pure-light);
|
||
}
|
||
.peak-desc {
|
||
font-size: 12px;
|
||
color: var(--dim-light);
|
||
margin-top: 2px;
|
||
}
|
||
.legend-row {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 14px;
|
||
}
|
||
.legend-chip {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
font-size: 11px;
|
||
color: var(--dim-light);
|
||
}
|
||
.legend-circle {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
}
|
||
.pattern-card {
|
||
background: var(--kalei-navy);
|
||
border: 1px solid var(--twilight);
|
||
border-radius: var(--radius-xl);
|
||
padding: 14px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.pattern-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.pattern-label {
|
||
font-size: 13px;
|
||
color: var(--soft-light);
|
||
}
|
||
.pattern-time {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
}
|
||
.insight-panel {
|
||
background: linear-gradient(135deg, rgba(139,92,246,0.06), rgba(59,130,246,0.04));
|
||
border: 1px solid rgba(139,92,246,0.2);
|
||
border-radius: var(--radius-xl);
|
||
padding: 14px;
|
||
}
|
||
.insight-label {
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
color: var(--amethyst-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">Your Rhythm</span>
|
||
<span class="nav-action"></span>
|
||
</div>
|
||
|
||
<div class="screen-content no-pad">
|
||
<div class="rhythm-container">
|
||
|
||
<!-- Bubble chart — extracted from spectrum-visualizations.svg "RHYTHM DETECTION" section -->
|
||
<div class="chart-wrap">
|
||
<svg width="334" height="180" viewBox="0 0 334 180" style="display:block;">
|
||
<defs>
|
||
<linearGradient id="s54-grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#C4B5FD"><animate attributeName="stop-color" values="#C4B5FD;#DDD6FE;#C4B5FD" dur="4s" repeatCount="indefinite"/></stop>
|
||
<stop offset="100%" stop-color="#7C3AED"/>
|
||
</linearGradient>
|
||
<linearGradient id="s54-grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#2563EB"/>
|
||
</linearGradient>
|
||
<linearGradient id="s54-grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/>
|
||
</linearGradient>
|
||
<linearGradient id="s54-grAmber" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||
</linearGradient>
|
||
<filter id="s54-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="180" fill="#0A0E1A"/>
|
||
|
||
<!-- Y axis labels (days) -->
|
||
<text x="20" y="28" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">Mon</text>
|
||
<text x="20" y="55" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">Tue</text>
|
||
<text x="20" y="82" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">Wed</text>
|
||
<text x="20" y="109" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">Thu</text>
|
||
<text x="20" y="136" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">Fri</text>
|
||
<text x="20" y="163" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">Sat</text>
|
||
|
||
<!-- X axis time labels -->
|
||
<text x="52" y="173" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">6am</text>
|
||
<text x="103" y="173" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">9am</text>
|
||
<text x="167" y="173" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">12pm</text>
|
||
<text x="219" y="173" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">3pm</text>
|
||
<text x="270" y="173" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">6pm</text>
|
||
|
||
<!-- Horizontal grid lines -->
|
||
<line x1="24" y1="18" x2="320" y2="18" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2,6"/>
|
||
<line x1="24" y1="45" x2="320" y2="45" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2,6"/>
|
||
<line x1="24" y1="72" x2="320" y2="72" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2,6"/>
|
||
<line x1="24" y1="99" x2="320" y2="99" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2,6"/>
|
||
<line x1="24" y1="126" x2="320" y2="126" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2,6"/>
|
||
<line x1="24" y1="153" x2="320" y2="153" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2,6"/>
|
||
|
||
<!-- Peak highlight zone (9am column) -->
|
||
<rect x="88" y="6" width="36" height="158" rx="3" fill="rgba(139,92,246,0.05)" stroke="rgba(139,92,246,0.15)" stroke-width="0.8"/>
|
||
|
||
<!-- Activity bubbles — adapted from spectrum-visualizations.svg Rhythm Detection -->
|
||
<!-- Morning cluster (amethyst, 9am col) -->
|
||
<g filter="url(#s54-glowSm)">
|
||
<!-- Monday row y=18 -->
|
||
<circle cx="78" cy="18" r="4" fill="url(#s54-grAmethyst)" opacity="0.3"/>
|
||
<circle cx="94" cy="18" r="5" fill="url(#s54-grAmethyst)" opacity="0.5"/>
|
||
<circle cx="106" cy="18" r="6" fill="url(#s54-grAmethyst)" opacity="0.7">
|
||
<animate attributeName="opacity" values="0.5;0.8;0.5" dur="3s" repeatCount="indefinite"/>
|
||
</circle>
|
||
<circle cx="148" cy="18" r="4" fill="url(#s54-grAmethyst)" opacity="0.4"/>
|
||
<!-- Midday lull Mon -->
|
||
<circle cx="156" cy="18" r="3" fill="url(#s54-grSapphire)" opacity="0.2"/>
|
||
<circle cx="220" cy="18" r="3" fill="url(#s54-grSapphire)" opacity="0.25"/>
|
||
|
||
<!-- Tuesday row y=45 -->
|
||
<circle cx="100" cy="45" r="7" fill="url(#s54-grAmethyst)" opacity="0.7">
|
||
<animate attributeName="opacity" values="0.5;0.8;0.5" dur="3.5s" repeatCount="indefinite"/>
|
||
</circle>
|
||
<circle cx="115" cy="45" r="5" fill="url(#s54-grAmethyst)" opacity="0.5"/>
|
||
<circle cx="219" cy="45" r="4" fill="url(#s54-grEmerald)" opacity="0.4"/>
|
||
|
||
<!-- Wednesday row y=72 -->
|
||
<circle cx="94" cy="72" r="5" fill="url(#s54-grAmethyst)" opacity="0.6"/>
|
||
<circle cx="150" cy="72" r="4" fill="url(#s54-grEmerald)" opacity="0.5"/>
|
||
<circle cx="205" cy="72" r="3" fill="url(#s54-grSapphire)" opacity="0.4"/>
|
||
|
||
<!-- Thursday row y=99 — afternoon peak -->
|
||
<circle cx="219" cy="99" r="7" fill="url(#s54-grEmerald)" opacity="0.7">
|
||
<animate attributeName="opacity" values="0.5;0.8;0.5" dur="3.5s" repeatCount="indefinite"/>
|
||
</circle>
|
||
<circle cx="235" cy="99" r="5" fill="url(#s54-grEmerald)" opacity="0.5"/>
|
||
<circle cx="96" cy="99" r="4" fill="url(#s54-grAmethyst)" opacity="0.45"/>
|
||
|
||
<!-- Friday row y=126 -->
|
||
<circle cx="102" cy="126" r="6" fill="url(#s54-grAmethyst)" opacity="0.6"/>
|
||
<circle cx="168" cy="126" r="4" fill="url(#s54-grSapphire)" opacity="0.45"/>
|
||
<circle cx="285" cy="126" r="5" fill="url(#s54-grAmber)" opacity="0.5"/>
|
||
|
||
<!-- Saturday row y=153 -->
|
||
<circle cx="125" cy="153" r="4" fill="url(#s54-grAmber)" opacity="0.35"/>
|
||
<circle cx="186" cy="153" r="5" fill="url(#s54-grAmethyst)" opacity="0.45"/>
|
||
<circle cx="249" cy="153" r="4" fill="url(#s54-grEmerald)" opacity="0.4"/>
|
||
</g>
|
||
|
||
<!-- Pattern line (smoothed) — exact from SVG, adapted x-coords -->
|
||
<path d="M 40,20 C 80,-5 112,-15 140,5 C 168,18 190,14 219,-15 C 248,5 275,12 310,15"
|
||
fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.3" stroke-dasharray="4 4"/>
|
||
|
||
<!-- Peak labels -->
|
||
<g filter="url(#s54-glowSm)">
|
||
<path d="M 106,4 L 108,2 L 110,4 L 108,6 Z" fill="url(#s54-grAmethyst)" opacity="0.8"/>
|
||
<text x="106" y="0" font-size="7" fill="#C4B5FD" text-anchor="middle" font-family="Inter" font-weight="500">Morning Peak</text>
|
||
</g>
|
||
<g filter="url(#s54-glowSm)">
|
||
<path d="M 219,88 L 221,86 L 223,88 L 221,90 Z" fill="url(#s54-grEmerald)" opacity="0.8"/>
|
||
<text x="219" y="84" font-size="7" fill="#6EE7B7" text-anchor="middle" font-family="Inter" font-weight="500">Afternoon Peak</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- Legend -->
|
||
<div class="legend-row">
|
||
<div class="legend-chip">
|
||
<div class="legend-circle" style="background: var(--amethyst);"></div>
|
||
Turn
|
||
</div>
|
||
<div class="legend-chip">
|
||
<div class="legend-circle" style="background: var(--emerald);"></div>
|
||
Mirror
|
||
</div>
|
||
<div class="legend-chip">
|
||
<div class="legend-circle" style="background: var(--sapphire);"></div>
|
||
Lens
|
||
</div>
|
||
<div class="legend-chip">
|
||
<div class="legend-circle" style="background: var(--amber);"></div>
|
||
Ritual
|
||
</div>
|
||
<div class="legend-chip">
|
||
<div class="legend-circle" style="background: var(--rose);"></div>
|
||
Gallery
|
||
</div>
|
||
<div class="legend-chip">
|
||
<span style="font-size:9px;">Bubble size = activity level</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Peak time highlight — canonical: most turns 8–9am, secondary 6–8pm -->
|
||
<div class="peak-highlight">
|
||
<div class="peak-row">
|
||
<div class="peak-icon">
|
||
<svg width="20" height="20" viewBox="0 0 20 20">
|
||
<defs>
|
||
<linearGradient id="peakGrad" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||
<stop offset="100%" stop-color="#7C3AED"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<path d="M10 2L18 10L10 18L2 10Z" fill="url(#peakGrad)" opacity="0.9"/>
|
||
</svg>
|
||
</div>
|
||
<div class="peak-info">
|
||
<div class="peak-title">Peak Window: Mon–Fri, 8–9am</div>
|
||
<div class="peak-desc">Before the workday begins — your clearest reflection time</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Pattern cards — aligned to canonical data -->
|
||
<div class="pattern-card">
|
||
<div class="pattern-row">
|
||
<span class="pattern-label">Primary trigger context</span>
|
||
<span class="pattern-time" style="color: var(--amethyst-light);">Work / career (72%)</span>
|
||
</div>
|
||
<div class="divider" style="margin: 10px 0;"></div>
|
||
<div class="pattern-row">
|
||
<span class="pattern-label">Secondary trigger</span>
|
||
<span class="pattern-time" style="color: var(--sapphire-light);">Relationships (18%)</span>
|
||
</div>
|
||
<div class="divider" style="margin: 10px 0;"></div>
|
||
<div class="pattern-row">
|
||
<span class="pattern-label">Evening peak window</span>
|
||
<span class="pattern-time" style="color: var(--emerald-light);">6–8pm</span>
|
||
</div>
|
||
<div class="divider" style="margin: 10px 0;"></div>
|
||
<div class="pattern-row">
|
||
<span class="pattern-label">Quietest time</span>
|
||
<span class="pattern-time" style="color: var(--dim-light);">Weekends after 9pm</span>
|
||
</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="#A78BFA"/>
|
||
</svg>
|
||
Rhythm Reading
|
||
</div>
|
||
<div class="insight-text">Your turns cluster around two windows — 8–9am before work, and 6–8pm after. This is a healthy pattern: processing the anticipation before work, and processing the day after. The morning window produces your deepest reframes.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|