Matt
38021c4633
Complete project files including: - 73 polished HTML mockup screens (onboarding, turn, mirror, lens, gallery, you, ritual, spectrum, modals, guide) - Design system CSS with Inter font, jewel-tone palette, device frame scaling - Canonical 6-blade kaleidoscope logo (soft-elegance-final) - SVG asset library (fragments, icons, patterns, evidence wall, spectrum viz) - Product docs, brand guidelines, technical architecture, build phases - Pitch deck and cost projections - Logo mockup iterations and finalists Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
236 lines
9.8 KiB
HTML
236 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=390, initial-scale=1">
|
||
<title>Kalei — Fragment Detail</title>
|
||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||
<style>
|
||
.dimmed-chat {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(5,5,8,0.75);
|
||
backdrop-filter: blur(6px);
|
||
z-index: 0;
|
||
}
|
||
.chat-preview {
|
||
padding: calc(var(--status-bar-height) + var(--nav-header-height) + 16px) var(--space-4) var(--space-4);
|
||
opacity: 0.4;
|
||
}
|
||
.modal-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
z-index: 50;
|
||
}
|
||
.modal-sheet {
|
||
width: 100%;
|
||
background: var(--kalei-navy);
|
||
border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
|
||
padding: var(--space-3) var(--space-4) var(--space-8);
|
||
border-top: 1px solid rgba(245,158,11,0.2);
|
||
box-shadow: 0 -8px 40px rgba(245,158,11,0.1);
|
||
animation: slideUp 0.35s cubic-bezier(0.32, 0.72, 0, 1);
|
||
}
|
||
.modal-handle {
|
||
width: 36px;
|
||
height: 4px;
|
||
background: var(--twilight);
|
||
border-radius: var(--radius-full);
|
||
margin: 0 auto var(--space-5);
|
||
}
|
||
.distortion-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
.distortion-icon-wrap {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: var(--radius-lg);
|
||
background: rgba(245,158,11,0.12);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
box-shadow: 0 0 16px rgba(245,158,11,0.15);
|
||
}
|
||
.distortion-name {
|
||
font-family: var(--font-display);
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: var(--amber-light);
|
||
}
|
||
.distortion-type {
|
||
font-size: 11px;
|
||
color: var(--dim-light);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
margin-top: 2px;
|
||
}
|
||
.quote-card {
|
||
background: var(--deep-glass);
|
||
border: 1px solid rgba(245,158,11,0.2);
|
||
border-left: 3px solid var(--amber);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-3) var(--space-4);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
.quote-label {
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
color: var(--amber-light);
|
||
margin-bottom: 6px;
|
||
}
|
||
.quote-text {
|
||
font-size: 14px;
|
||
color: var(--soft-light);
|
||
line-height: 1.5;
|
||
font-style: italic;
|
||
}
|
||
.explanation {
|
||
font-size: 14px;
|
||
color: var(--dim-light);
|
||
line-height: 1.6;
|
||
margin-bottom: var(--space-5);
|
||
}
|
||
.modal-actions {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-2);
|
||
}
|
||
.btn-turn-thought {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--space-2);
|
||
height: 52px;
|
||
background: var(--amethyst);
|
||
color: var(--pure-light);
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
border-radius: var(--radius-lg);
|
||
text-decoration: none;
|
||
box-shadow: var(--glow-amethyst);
|
||
transition: background 0.2s;
|
||
}
|
||
.btn-turn-thought:hover { background: var(--amethyst-light); }
|
||
.btn-dismiss {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 44px;
|
||
background: transparent;
|
||
color: var(--dim-light);
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
border-radius: var(--radius-md);
|
||
text-decoration: none;
|
||
border: 1px solid var(--twilight);
|
||
transition: background 0.15s;
|
||
}
|
||
.btn-dismiss:hover { background: var(--deep-glass); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="device-frame">
|
||
|
||
<div class="status-bar" style="position:absolute; top:0; left:0; right:0; z-index:2; opacity:0.4;">
|
||
<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="dimmed-chat">
|
||
<div class="chat-preview">
|
||
<div class="chat-bubble ai" style="font-size:14px;">Welcome back. What's on your mind today?</div>
|
||
<div class="chat-bubble user" style="font-size:14px;">I got through it technically, but I stumbled on the revenue slide. <span style="text-decoration:underline; text-decoration-color: rgba(245,158,11,0.7);">She probably thinks I'm incompetent now.</span> I always freeze under pressure.</div>
|
||
<div class="chat-bubble ai" style="font-size:14px;">You moved from describing the presentation to predicting your manager's private judgment. What do you actually know about her reaction?</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-overlay">
|
||
<div class="modal-sheet">
|
||
<div class="modal-handle"></div>
|
||
|
||
<div class="distortion-header">
|
||
<div class="distortion-icon-wrap">
|
||
<!-- Mind Reading — exact paths extracted from icons-distortions.svg (lines 57–71) -->
|
||
<!-- Hexagonal head outline + inner diamond + radiating thought waves -->
|
||
<svg width="28" height="28" viewBox="-14 -14 28 28" fill="none">
|
||
<defs>
|
||
<filter id="s18-gAmber" 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="s18-amberGr" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#FDE68A"/>
|
||
<stop offset="100%" stop-color="#D97706"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<g filter="url(#s18-gAmber)">
|
||
<path d="M 0,-10 L 8,-5 L 8,5 L 0,10 L -8,5 L -8,-5 Z" fill="none" stroke="#F59E0B" stroke-width="1" opacity="0.7"/>
|
||
<path d="M 0,-4 L 4,0 L 0,4 L -4,0 Z" fill="url(#s18-amberGr)" opacity="0.8"/>
|
||
<path d="M 0,-4 L 4,0 L -4,0 Z" fill="#fff" opacity="0.15"/>
|
||
<line x1="5" y1="-3" x2="9" y2="-6" stroke="#FCD34D" stroke-width="0.4" opacity="0.35"/>
|
||
<line x1="5" y1="3" x2="9" y2="6" stroke="#FCD34D" stroke-width="0.4" opacity="0.35"/>
|
||
<line x1="-5" y1="-3" x2="-9" y2="-6" stroke="#FCD34D" stroke-width="0.4" opacity="0.35"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<div class="distortion-name">Mind Reading</div>
|
||
<div class="distortion-type">Cognitive distortion</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="quote-card">
|
||
<div class="quote-label">Detected phrase</div>
|
||
<div class="quote-text">"She probably thinks I'm incompetent now"</div>
|
||
</div>
|
||
|
||
<p class="explanation">
|
||
Mind Reading happens when we assume we know what others are thinking — usually something critical or negative about us — without any direct evidence. You saw an expression and immediately filled in a whole verdict about your worth. In reality, your manager may have been processing the numbers, thinking about a question to ask, or dealing with something entirely unrelated to you.
|
||
</p>
|
||
<p class="explanation" style="margin-top: -12px;">
|
||
This pattern is especially common after high-stakes moments. The mind wants certainty, so it invents a story. The cost is that you start responding to a story — not reality.
|
||
</p>
|
||
|
||
<div class="modal-actions">
|
||
<a href="../turn/11-turn-input-active.html" class="btn-turn-thought">
|
||
<!-- Fragment SM amethyst — from fragment-icons.svg SM size section -->
|
||
<svg width="16" height="16" viewBox="-8 -8 16 16" fill="none">
|
||
<defs>
|
||
<linearGradient id="s18-grAm" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||
<stop offset="100%" stop-color="#7C3AED"/>
|
||
</linearGradient>
|
||
<filter id="s18-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>
|
||
<g filter="url(#s18-glowSm)">
|
||
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#s18-grAm)" opacity="0.9"/>
|
||
<path d="M 0,-8 L 8,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||
<path d="M 0,-8 L -8,0 L 0,0 Z" fill="#fff" opacity="0.08"/>
|
||
<line x1="0" y1="-8" x2="0" y2="8" stroke="#fff" stroke-width="0.4" opacity="0.2"/>
|
||
</g>
|
||
</svg>
|
||
Turn this thought
|
||
</a>
|
||
<a href="17-mirror-fragment-highlight.html" class="btn-dismiss">Dismiss</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|