301 lines
14 KiB
HTML
301 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 — Your Glass</title>
|
|
<link rel="stylesheet" href="../../assets/design-system.css">
|
|
<style>
|
|
.glass-container {
|
|
padding: 16px;
|
|
}
|
|
.radar-wrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
background: var(--void);
|
|
border: 1px solid var(--twilight);
|
|
border-radius: var(--radius-xl);
|
|
padding: 20px 0;
|
|
}
|
|
.legend {
|
|
margin-top: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.legend-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
.legend-label {
|
|
font-size: 13px;
|
|
color: var(--soft-light);
|
|
flex: 1;
|
|
}
|
|
.legend-value {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--pure-light);
|
|
}
|
|
.legend-bar-wrap {
|
|
flex: 1;
|
|
height: 4px;
|
|
background: var(--twilight);
|
|
border-radius: var(--radius-full);
|
|
overflow: hidden;
|
|
}
|
|
.legend-bar {
|
|
height: 100%;
|
|
border-radius: var(--radius-full);
|
|
}
|
|
.balance-card {
|
|
background: var(--kalei-navy);
|
|
border: 1px solid var(--twilight);
|
|
border-radius: var(--radius-xl);
|
|
padding: 14px;
|
|
margin-top: 12px;
|
|
}
|
|
.balance-header {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--dim-light);
|
|
margin-bottom: 10px;
|
|
}
|
|
.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;
|
|
margin-top: 12px;
|
|
}
|
|
.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 Glass</span>
|
|
<span class="nav-action"></span>
|
|
</div>
|
|
|
|
<div class="screen-content no-pad">
|
|
<div class="glass-container">
|
|
|
|
<!-- Faceted Gem / Radar Chart — Your Glass -->
|
|
<div class="radar-wrap">
|
|
<svg width="280" height="240" viewBox="0 0 280 240">
|
|
<defs>
|
|
<!-- Faceted gem face gradients — prismatic per face -->
|
|
<linearGradient id="s52-grAmber" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
|
</linearGradient>
|
|
<linearGradient id="s52-grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#C4B5FD"/><stop offset="100%" stop-color="#7C3AED"/>
|
|
</linearGradient>
|
|
<linearGradient id="s52-grSapphire" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#2563EB"/>
|
|
</linearGradient>
|
|
<linearGradient id="s52-grEmerald" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/>
|
|
</linearGradient>
|
|
<linearGradient id="s52-grRose" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#FBCFE8"/><stop offset="100%" stop-color="#DB2777"/>
|
|
</linearGradient>
|
|
<linearGradient id="s52-grIndigo" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#A5B4FC"/><stop offset="100%" stop-color="#4338CA"/>
|
|
</linearGradient>
|
|
<filter id="s52-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="s52-glowSm" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="1.5" result="b"/>
|
|
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|
</filter>
|
|
<filter id="s52-glow" x="-100%" y="-100%" width="300%" height="300%">
|
|
<feGaussianBlur stdDeviation="8" result="b"/>
|
|
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- Central glow aura -->
|
|
<ellipse cx="140" cy="115" rx="60" ry="55" fill="#F59E0B" opacity="0.04" filter="url(#s52-glow)"/>
|
|
|
|
<!-- Radar chart -->
|
|
<g transform="translate(140, 115)">
|
|
<!-- Axis guides -->
|
|
<g opacity="0.15">
|
|
<line x1="0" y1="0" x2="0" y2="-70" stroke="#475569" stroke-width="0.5"/>
|
|
<line x1="0" y1="0" x2="61" y2="-35" stroke="#475569" stroke-width="0.5"/>
|
|
<line x1="0" y1="0" x2="61" y2="35" stroke="#475569" stroke-width="0.5"/>
|
|
<line x1="0" y1="0" x2="0" y2="70" stroke="#475569" stroke-width="0.5"/>
|
|
<line x1="0" y1="0" x2="-61" y2="35" stroke="#475569" stroke-width="0.5"/>
|
|
<line x1="0" y1="0" x2="-61" y2="-35" stroke="#475569" stroke-width="0.5"/>
|
|
<path d="M 0,-35 L 30,-17 L 30,17 L 0,35 L -30,17 L -30,-17 Z" fill="none" stroke="#475569" stroke-width="0.3"/>
|
|
<path d="M 0,-70 L 61,-35 L 61,35 L 0,70 L -61,35 L -61,-35 Z" fill="none" stroke="#475569" stroke-width="0.3"/>
|
|
</g>
|
|
|
|
<!-- Faceted gem faces — each face a different jewel tone -->
|
|
<g filter="url(#s52-glowMd)">
|
|
<!-- Top face: amber (Catastrophizing) -->
|
|
<path d="M 0,0 L -3,-52 L 3,-52 Z" fill="#FDE68A" fill-opacity="0.06"/>
|
|
<path d="M 0,-55 L 40,-20 L 0,0 Z" fill="#F59E0B" fill-opacity="0.07"/>
|
|
<!-- Upper-right face: amethyst (Black-White) -->
|
|
<path d="M 0,0 L 40,-20 L 50,25 Z" fill="#8B5CF6" fill-opacity="0.06"/>
|
|
<!-- Lower-right face: sapphire (Mind Reading) -->
|
|
<path d="M 0,0 L 50,25 L 10,50 Z" fill="#3B82F6" fill-opacity="0.06"/>
|
|
<!-- Bottom face: emerald (Fortune Telling) -->
|
|
<path d="M 0,0 L 10,50 L -45,30 Z" fill="#10B981" fill-opacity="0.06"/>
|
|
<!-- Left face: rose (Personalization) -->
|
|
<path d="M 0,0 L -45,30 L -35,-25 Z" fill="#EC4899" fill-opacity="0.06"/>
|
|
<!-- Upper-left face: indigo (Should Stmts) -->
|
|
<path d="M 0,0 L -35,-25 L 0,-55 Z" fill="#6366F1" fill-opacity="0.06"/>
|
|
|
|
<!-- Main outline -->
|
|
<path d="M 0,-55 L 40,-20 L 50,25 L 10,50 L -45,30 L -35,-25 Z"
|
|
fill="none" stroke="#F59E0B" stroke-width="1.2" opacity="0.5"/>
|
|
|
|
<!-- Vertex diamonds — each vertex gets its facet color -->
|
|
<path d="M 0,-55 L 3,-52 L 0,-49 L -3,-52 Z" fill="url(#s52-grAmber)" opacity="0.9" filter="url(#s52-glowSm)"/>
|
|
<path d="M 0,-55 L 3,-52 L 0,-52 Z" fill="#fff" opacity="0.2"/>
|
|
<path d="M 40,-20 L 43,-17 L 40,-14 L 37,-17 Z" fill="url(#s52-grAmethyst)" opacity="0.8" filter="url(#s52-glowSm)"/>
|
|
<path d="M 40,-20 L 43,-17 L 40,-17 Z" fill="#fff" opacity="0.2"/>
|
|
<path d="M 50,25 L 53,28 L 50,31 L 47,28 Z" fill="url(#s52-grSapphire)" opacity="0.8" filter="url(#s52-glowSm)"/>
|
|
<path d="M 50,25 L 53,28 L 50,28 Z" fill="#fff" opacity="0.2"/>
|
|
<path d="M 10,50 L 13,53 L 10,56 L 7,53 Z" fill="url(#s52-grEmerald)" opacity="0.7" filter="url(#s52-glowSm)"/>
|
|
<path d="M 10,50 L 13,53 L 10,53 Z" fill="#fff" opacity="0.2"/>
|
|
<path d="M -45,30 L -42,33 L -45,36 L -48,33 Z" fill="url(#s52-grRose)" opacity="0.8" filter="url(#s52-glowSm)"/>
|
|
<path d="M -45,30 L -42,33 L -45,33 Z" fill="#fff" opacity="0.2"/>
|
|
<path d="M -35,-25 L -32,-22 L -35,-19 L -38,-22 Z" fill="url(#s52-grIndigo)" opacity="0.8" filter="url(#s52-glowSm)"/>
|
|
<path d="M -35,-25 L -32,-22 L -35,-22 Z" fill="#fff" opacity="0.2"/>
|
|
|
|
<!-- Central core diamond -->
|
|
<path d="M 0,-6 L 5,0 L 0,6 L -5,0 Z" fill="#F59E0B" opacity="0.3"/>
|
|
</g>
|
|
|
|
<!-- Axis labels — colored per facet -->
|
|
<text x="0" y="-78" text-anchor="middle" font-size="9" fill="#FDE68A" font-family="Inter" font-weight="500">Catastrophizing</text>
|
|
<text x="76" y="-20" text-anchor="start" font-size="9" fill="#C4B5FD" font-family="Inter" font-weight="500">Black-White</text>
|
|
<text x="76" y="30" text-anchor="start" font-size="9" fill="#93C5FD" font-family="Inter" font-weight="500">Mind Reading</text>
|
|
<text x="0" y="76" text-anchor="middle" font-size="9" fill="#6EE7B7" font-family="Inter" font-weight="500">Fortune Telling</text>
|
|
<text x="-76" y="30" text-anchor="end" font-size="9" fill="#F9A8D4" font-family="Inter" font-weight="500">Personalization</text>
|
|
<text x="-76" y="-20" text-anchor="end" font-size="9" fill="#A5B4FC" font-family="Inter" font-weight="500">Should Stmts</text>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Fragment pattern balance — maps to Alex's canonical data -->
|
|
<div class="balance-card">
|
|
<div class="balance-header">Fragment Patterns — 47 Turns</div>
|
|
<div class="legend">
|
|
<div class="legend-item">
|
|
<div class="legend-dot" style="background: var(--amber);"></div>
|
|
<div class="legend-label">Catastrophizing</div>
|
|
<div class="legend-bar-wrap">
|
|
<div class="legend-bar" style="width:100%; background: linear-gradient(90deg, var(--amber), var(--amber-light));"></div>
|
|
</div>
|
|
<div class="legend-value" style="color: var(--amber-light);">7x</div>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-dot" style="background: var(--sapphire);"></div>
|
|
<div class="legend-label">Mind Reading</div>
|
|
<div class="legend-bar-wrap">
|
|
<div class="legend-bar" style="width:57%; background: var(--sapphire);"></div>
|
|
</div>
|
|
<div class="legend-value" style="color: var(--sapphire-light);">4x</div>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-dot" style="background: var(--amethyst);"></div>
|
|
<div class="legend-label">Should Statements</div>
|
|
<div class="legend-bar-wrap">
|
|
<div class="legend-bar" style="width:43%; background: var(--amethyst);"></div>
|
|
</div>
|
|
<div class="legend-value" style="color: var(--amethyst-light);">3x</div>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-dot" style="background: var(--emerald);"></div>
|
|
<div class="legend-label">Overgeneralization</div>
|
|
<div class="legend-bar-wrap">
|
|
<div class="legend-bar" style="width:28%; background: var(--emerald);"></div>
|
|
</div>
|
|
<div class="legend-value" style="color: var(--emerald-light);">2x</div>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-dot" style="background: var(--rose);"></div>
|
|
<div class="legend-label">Personalization</div>
|
|
<div class="legend-bar-wrap">
|
|
<div class="legend-bar" style="width:28%; background: var(--rose);"></div>
|
|
</div>
|
|
<div class="legend-value" style="color: var(--rose-light);">2x</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI 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>
|
|
Glass Reading
|
|
</div>
|
|
<div class="insight-text">Catastrophizing is your dominant facet — 7 of your 47 turns. The good news: it's been declining each week. Mind Reading holds steady at 4. Your glass is gradually becoming more balanced as the ritual work lands.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|