263 lines
10 KiB
HTML
263 lines
10 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=390, initial-scale=1">
|
||
|
|
<title>Kalei — Fragment Detected</title>
|
||
|
|
<link rel="stylesheet" href="../../assets/design-system.css">
|
||
|
|
<style>
|
||
|
|
.chat-area {
|
||
|
|
flex: 1;
|
||
|
|
overflow-y: auto;
|
||
|
|
padding: var(--space-4) var(--space-4) var(--space-2);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.chat-area::-webkit-scrollbar { display: none; }
|
||
|
|
.chat-session-frame {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
height: calc(var(--device-height) - var(--status-bar-height) - var(--nav-header-height) - 64px);
|
||
|
|
}
|
||
|
|
.input-accessory {
|
||
|
|
height: 64px;
|
||
|
|
background: var(--kalei-navy);
|
||
|
|
border-top: 1px solid var(--twilight);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: var(--space-2);
|
||
|
|
padding: 0 var(--space-3);
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
.chat-input {
|
||
|
|
flex: 1;
|
||
|
|
height: 40px;
|
||
|
|
background: var(--deep-glass);
|
||
|
|
border: 1px solid var(--twilight);
|
||
|
|
border-radius: var(--radius-full);
|
||
|
|
padding: 0 var(--space-4);
|
||
|
|
font-family: var(--font-primary);
|
||
|
|
font-size: 15px;
|
||
|
|
color: var(--pure-light);
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
.chat-input::placeholder { color: var(--faint-light); }
|
||
|
|
.send-btn {
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: var(--amber);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
cursor: pointer;
|
||
|
|
border: none;
|
||
|
|
flex-shrink: 0;
|
||
|
|
box-shadow: var(--glow-amber);
|
||
|
|
transition: all 0.2s ease-out;
|
||
|
|
}
|
||
|
|
.send-btn:hover { background: var(--amber-light); box-shadow: 0 0 24px rgba(245,158,11,0.5); }
|
||
|
|
.nav-close {
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: var(--deep-glass);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
cursor: pointer;
|
||
|
|
text-decoration: none;
|
||
|
|
transition: background 0.2s ease-out;
|
||
|
|
}
|
||
|
|
.nav-close:hover { background: var(--twilight); }
|
||
|
|
.session-timer {
|
||
|
|
font-size: 12px;
|
||
|
|
color: var(--dim-light);
|
||
|
|
font-variant-numeric: tabular-nums;
|
||
|
|
}
|
||
|
|
/* Fragment highlight styles */
|
||
|
|
.fragment-highlight {
|
||
|
|
position: relative;
|
||
|
|
display: inline;
|
||
|
|
cursor: pointer;
|
||
|
|
text-decoration: none;
|
||
|
|
color: inherit;
|
||
|
|
transition: opacity 0.2s ease-out;
|
||
|
|
}
|
||
|
|
.fragment-highlight:hover { opacity: 0.8; }
|
||
|
|
.fragment-highlight::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
bottom: -2px;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
height: 3px;
|
||
|
|
background: var(--amber);
|
||
|
|
border-radius: 2px;
|
||
|
|
opacity: 0.7;
|
||
|
|
box-shadow: 0 0 10px rgba(245,158,11,0.5);
|
||
|
|
animation: fragmentGlow 2s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
.fragment-icon {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-left: 4px;
|
||
|
|
animation: fragmentPulse 2s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
/* Fragment detected notice */
|
||
|
|
.fragment-notice {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: var(--space-2);
|
||
|
|
margin-left: 0;
|
||
|
|
margin-top: 6px;
|
||
|
|
margin-bottom: var(--space-3);
|
||
|
|
padding: 6px 12px;
|
||
|
|
background: rgba(245,158,11,0.08);
|
||
|
|
border: 1px solid rgba(245,158,11,0.2);
|
||
|
|
border-radius: var(--radius-full);
|
||
|
|
width: fit-content;
|
||
|
|
animation: fadeIn 0.4s ease-out;
|
||
|
|
}
|
||
|
|
.fragment-notice-text {
|
||
|
|
font-size: 11px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--amber-light);
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.06em;
|
||
|
|
}
|
||
|
|
/* Amber glow behind highlighted bubble */
|
||
|
|
.chat-bubble.user.highlighted {
|
||
|
|
box-shadow: 0 0 20px rgba(245,158,11,0.15);
|
||
|
|
border-color: rgba(245,158,11,0.25);
|
||
|
|
}
|
||
|
|
</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="16-mirror-session.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>
|
||
|
|
<div style="display:flex; flex-direction:column; align-items:center; position:absolute; left:50%; transform:translateX(-50%);">
|
||
|
|
<span class="nav-title" style="position:static; transform:none;">Mirror Session</span>
|
||
|
|
<span class="session-timer">4:23</span>
|
||
|
|
</div>
|
||
|
|
<a class="nav-close" href="19-mirror-reflection.html">
|
||
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||
|
|
<path d="M2 2L12 12M12 2L2 12" stroke="var(--dim-light)" stroke-width="1.5" stroke-linecap="round"/>
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="chat-session-frame">
|
||
|
|
<div class="chat-area">
|
||
|
|
|
||
|
|
<!-- Prior context -->
|
||
|
|
<div class="chat-bubble ai">
|
||
|
|
Welcome back. I'm here to listen and reflect with you. What's on your mind today?
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="chat-bubble user">
|
||
|
|
I gave this big presentation today to the whole department. I completely bombed it — lost my place, my voice was shaking. I just fell apart in front of everyone.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="chat-bubble ai">
|
||
|
|
That sounds really unsettling. When you say you "completely bombed it," what actually happened from start to finish?
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Highlighted message with fragment -->
|
||
|
|
<div class="chat-bubble user highlighted">
|
||
|
|
I mean I got through it technically, but I stumbled on the revenue slide.
|
||
|
|
<a class="fragment-highlight" href="18-mirror-fragment-detail.html">She probably thinks I'm incompetent now</a><span class="fragment-icon">
|
||
|
|
<!-- Fragment XS amber — from fragment-icons.svg XS (12px) with specular highlights -->
|
||
|
|
<svg width="12" height="12" viewBox="-6 -6 12 12" fill="none">
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="s17-fragAmber" x1="0" y1="0" x2="0" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#FDE68A"/>
|
||
|
|
<stop offset="100%" stop-color="#D97706"/>
|
||
|
|
</linearGradient>
|
||
|
|
<filter id="s17-fragGlow" 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(#s17-fragGlow)">
|
||
|
|
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#s17-fragAmber)" opacity="0.9"/>
|
||
|
|
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||
|
|
<path d="M 0,-6 L -6,0 L 0,0 Z" fill="#fff" opacity="0.08"/>
|
||
|
|
<line x1="0" y1="-6" x2="0" y2="6" stroke="#fff" stroke-width="0.3" opacity="0.2"/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
</span>. I always do this when I feel criticized — I just freeze.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Fragment detected notice -->
|
||
|
|
<div class="fragment-notice">
|
||
|
|
<!-- Fragment XS amber — extracted from fragment-icons.svg XS size (12px), amber color state -->
|
||
|
|
<svg width="12" height="12" viewBox="-6 -6 12 12" fill="none">
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="s17-grAmber" x1="0" y1="0" x2="0" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#FDE68A"/>
|
||
|
|
<stop offset="100%" stop-color="#D97706"/>
|
||
|
|
</linearGradient>
|
||
|
|
<filter id="s17-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(#s17-glowSm)">
|
||
|
|
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#s17-grAmber)" opacity="0.9"/>
|
||
|
|
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||
|
|
<path d="M 0,-6 L -6,0 L 0,0 Z" fill="#fff" opacity="0.08"/>
|
||
|
|
<line x1="0" y1="-6" x2="0" y2="6" stroke="#fff" stroke-width="0.3" opacity="0.2"/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
<span class="fragment-notice-text">Fragment detected — tap to explore</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- AI response -->
|
||
|
|
<div class="chat-bubble ai">
|
||
|
|
I noticed something in what you just wrote. You moved from describing the presentation to predicting your manager's private judgment about your competence. What do you actually know about her reaction, versus what you're filling in?
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Input accessory bar -->
|
||
|
|
<div class="input-accessory">
|
||
|
|
<input class="chat-input" type="text" placeholder="Write freely...">
|
||
|
|
<button class="send-btn">
|
||
|
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||
|
|
<path d="M15 9L3 4L5.5 9L3 14L15 9Z" fill="var(--void)" stroke="none"/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|