Initial commit: Kalei app — docs, mockups, logo, pitch deck
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>
This commit is contained in:
332
initial mockups/screens/mirror/15-mirror-home.html
Normal file
332
initial mockups/screens/mirror/15-mirror-home.html
Normal file
@@ -0,0 +1,332 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Mirror</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.mirror-aura {
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(245,158,11,0.14) 0%, transparent 70%);
|
||||
filter: blur(50px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.mirror-greeting {
|
||||
padding: var(--space-5) 0 var(--space-4);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.streak-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: rgba(245,158,11,0.12);
|
||||
border: 1px solid rgba(245,158,11,0.25);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 4px 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--amber-light);
|
||||
}
|
||||
.start-session-card {
|
||||
background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(245,158,11,0.04));
|
||||
border: 1px solid rgba(245,158,11,0.25);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: var(--space-5);
|
||||
box-shadow: 0 0 24px rgba(245,158,11,0.08);
|
||||
}
|
||||
.start-session-card:hover { box-shadow: var(--glow-amber); }
|
||||
.mirror-icon-wrap {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgba(245,158,11,0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.session-card-content { flex: 1; }
|
||||
.session-card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.session-card-sub {
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.recent-session-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) 0;
|
||||
border-bottom: 1px solid rgba(28,34,64,0.5);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.2s ease-out;
|
||||
}
|
||||
.recent-session-item:hover { opacity: 0.72; }
|
||||
.recent-session-item:last-child { border-bottom: none; }
|
||||
.session-dot {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(245,158,11,0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.session-info { flex: 1; }
|
||||
.session-date { font-size: 13px; color: var(--soft-light); font-weight: 500; }
|
||||
.session-stats { font-size: 11px; color: var(--dim-light); margin-top: 2px; }
|
||||
.fragments-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-3);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.fragment-count-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
background: rgba(245,158,11,0.1);
|
||||
border: 1px solid rgba(245,158,11,0.2);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--amber-light);
|
||||
}
|
||||
.fragment-count-num {
|
||||
background: rgba(245,158,11,0.2);
|
||||
border-radius: var(--radius-full);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: var(--amber);
|
||||
}
|
||||
.content-z { position: relative; z-index: 1; }
|
||||
</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="screen-content" style="padding-bottom: 16px;">
|
||||
<div class="mirror-aura"></div>
|
||||
|
||||
<div class="mirror-greeting">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--space-2);">
|
||||
<div class="heading text-pure">Good morning, Alex</div>
|
||||
<div class="streak-badge">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<path d="M7 1L9 5L13 5.5L10 8.5L10.5 13L7 11L3.5 13L4 8.5L1 5.5L5 5Z" fill="var(--amber)" opacity="0.9"/>
|
||||
</svg>
|
||||
14 days
|
||||
</div>
|
||||
</div>
|
||||
<div class="body" style="color: var(--dim-light);">What's on your mind today?</div>
|
||||
</div>
|
||||
|
||||
<!-- Start session card -->
|
||||
<a class="start-session-card" href="16-mirror-session.html">
|
||||
<div class="mirror-icon-wrap">
|
||||
<!-- Mirror hexagon icon -->
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="mirrorGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M14 3L20 7.5L20 16.5L14 21L8 16.5L8 7.5Z" stroke="url(#mirrorGrad)" fill="none" stroke-width="1.5"/>
|
||||
<path d="M14 7L18 10.2V16.8L14 20L10 16.8V10.2Z" fill="url(#mirrorGrad)" opacity="0.3"/>
|
||||
<circle cx="14" cy="12" r="2" fill="url(#mirrorGrad)" opacity="0.6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="session-card-content">
|
||||
<div class="session-card-title">Start a session</div>
|
||||
<div class="session-card-sub">Journal freely — fragments detected automatically</div>
|
||||
</div>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M8 4L14 10L8 16" stroke="var(--amber-light)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- Recent sessions -->
|
||||
<div class="content-z">
|
||||
<div class="section-header">
|
||||
<span class="section-title">Recent Sessions</span>
|
||||
<span class="section-action">See all</span>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-bottom: var(--space-4);">
|
||||
<a class="recent-session-item" href="19-mirror-reflection.html">
|
||||
<div class="session-dot">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M9 2L12.5 6.5L13.5 11L9 14.5L4.5 11L5.5 6.5Z" stroke="var(--amber)" fill="none" stroke-width="1.2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="session-info">
|
||||
<div class="session-date">Feb 21 — Evening</div>
|
||||
<div class="session-stats">12 min · 847 words · 3 fragments</div>
|
||||
</div>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<path d="M5 3L9 7L5 11" stroke="var(--faint-light)" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="recent-session-item" href="19-mirror-reflection.html">
|
||||
<div class="session-dot">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M9 2L12.5 6.5L13.5 11L9 14.5L4.5 11L5.5 6.5Z" stroke="var(--amber)" fill="none" stroke-width="1.2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="session-info">
|
||||
<div class="session-date">Feb 20 — Morning</div>
|
||||
<div class="session-stats">8 min · 524 words · 1 fragment</div>
|
||||
</div>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<path d="M5 3L9 7L5 11" stroke="var(--faint-light)" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="recent-session-item" href="19-mirror-reflection.html">
|
||||
<div class="session-dot">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M9 2L12.5 6.5L13.5 11L9 14.5L4.5 11L5.5 6.5Z" stroke="var(--amber)" fill="none" stroke-width="1.2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="session-info">
|
||||
<div class="session-date">Feb 18 — Night</div>
|
||||
<div class="session-stats">15 min · 1,102 words · 4 fragments</div>
|
||||
</div>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<path d="M5 3L9 7L5 11" stroke="var(--faint-light)" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Your Fragments section -->
|
||||
<div class="content-z">
|
||||
<div class="section-header">
|
||||
<span class="section-title">Your Fragments</span>
|
||||
<span class="section-action">Details</span>
|
||||
</div>
|
||||
|
||||
<div class="fragments-grid">
|
||||
<div class="fragment-count-chip">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<path d="M5 0.5L9 5L5 9.5L1 5Z" fill="var(--amber)" opacity="0.8"/>
|
||||
</svg>
|
||||
Catastrophizing
|
||||
<div class="fragment-count-num">7</div>
|
||||
</div>
|
||||
<div class="fragment-count-chip">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<path d="M5 0.5L9 5L5 9.5L1 5Z" fill="var(--amber)" opacity="0.8"/>
|
||||
</svg>
|
||||
Mind Reading
|
||||
<div class="fragment-count-num">4</div>
|
||||
</div>
|
||||
<div class="fragment-count-chip">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<path d="M5 0.5L9 5L5 9.5L1 5Z" fill="var(--amber)" opacity="0.8"/>
|
||||
</svg>
|
||||
Should Statements
|
||||
<div class="fragment-count-num">3</div>
|
||||
</div>
|
||||
<div class="fragment-count-chip">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<path d="M5 0.5L9 5L5 9.5L1 5Z" fill="var(--amber)" opacity="0.8"/>
|
||||
</svg>
|
||||
Overgeneralization
|
||||
<div class="fragment-count-num">2</div>
|
||||
</div>
|
||||
<div class="fragment-count-chip">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<path d="M5 0.5L9 5L5 9.5L1 5Z" fill="var(--amber)" opacity="0.8"/>
|
||||
</svg>
|
||||
Personalization
|
||||
<div class="fragment-count-num">2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item inactive" data-tab="turn" href="../turn/10-turn-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 2L20 12L12 22L4 12Z" fill="currentColor" opacity="0.9"/><path d="M12 2L20 12L12 12Z" fill="white" opacity="0.15"/></svg>
|
||||
<span class="tab-label">Turn</span>
|
||||
</a>
|
||||
<a class="tab-item active" data-tab="mirror" href="15-mirror-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 3L16 8L18 14L12 19L6 14L8 8Z" stroke="currentColor" fill="none" stroke-width="1.2"/></svg>
|
||||
<span class="tab-label">Mirror</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="lens" href="../lens/20-lens-dashboard.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="currentColor" fill="none" stroke-width="1.2"/><circle cx="12" cy="12" r="4" stroke="currentColor" fill="none" stroke-width="0.8"/></svg>
|
||||
<span class="tab-label">Lens</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="gallery" href="../gallery/31-gallery-all.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><rect x="3" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/></svg>
|
||||
<span class="tab-label">Gallery</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="you" href="../you/35-you-profile.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="9" r="4" stroke="currentColor" fill="none" stroke-width="1.2"/><path d="M4 20C4 16 8 14 12 14C16 14 20 16 20 20" stroke="currentColor" fill="none" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
<span class="tab-label">You</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
219
initial mockups/screens/mirror/16-mirror-session.html
Normal file
219
initial mockups/screens/mirror/16-mirror-session.html
Normal file
@@ -0,0 +1,219 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Mirror Session</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;
|
||||
text-decoration: none;
|
||||
}
|
||||
.send-btn:hover { background: var(--amber-light); box-shadow: 0 0 24px rgba(245,158,11,0.5); }
|
||||
.ai-thinking {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
margin-bottom: var(--space-3);
|
||||
width: 56px;
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
border-bottom-left-radius: var(--space-1);
|
||||
}
|
||||
.thinking-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--amber);
|
||||
animation: thinkingPulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
.thinking-dot:nth-child(2) { animation-delay: 0.2s; }
|
||||
.thinking-dot:nth-child(3) { animation-delay: 0.4s; }
|
||||
@keyframes thinkingPulse {
|
||||
0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
|
||||
40% { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
.session-timer {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.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); }
|
||||
</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="15-mirror-home.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" id="timer">0:00</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">
|
||||
|
||||
<!-- AI opening -->
|
||||
<div class="chat-bubble ai" style="animation: fadeIn 0.4s ease-out;">
|
||||
Welcome back. I'm here to listen and reflect with you. What's on your mind today? There's no right way to start — just begin wherever feels natural.
|
||||
</div>
|
||||
|
||||
<!-- User message 1 -->
|
||||
<div class="chat-bubble user" style="animation: fadeIn 0.4s ease-out 0.1s both; opacity:0;">
|
||||
I gave this big presentation today to the whole department — the quarterly results. I completely bombed it. I lost my place twice, my voice was shaking, and I could see people checking their phones. I just fell apart in front of everyone.
|
||||
</div>
|
||||
|
||||
<!-- AI response 1 -->
|
||||
<div class="chat-bubble ai" style="animation: fadeIn 0.4s ease-out 0.2s both; opacity:0;">
|
||||
That sounds like a really unsettling experience — the kind where you're in the middle of it and every small thing feels amplified. When you say you "completely bombed it," what actually happened from start to finish?
|
||||
</div>
|
||||
|
||||
<!-- User message 2 -->
|
||||
<div class="chat-bubble user" style="animation: fadeIn 0.4s ease-out 0.3s both; opacity:0;">
|
||||
I mean I got through it, technically. But I stumbled on the revenue slide, and my manager was in the front row. She had this expression — I could tell she was embarrassed for me. She probably thinks I'm incompetent now. I always freeze under pressure. I'm just not someone who can handle this kind of visibility.
|
||||
</div>
|
||||
|
||||
<!-- AI response 2 -->
|
||||
<div class="chat-bubble ai" style="animation: fadeIn 0.4s ease-out 0.4s both; opacity:0;">
|
||||
I want to stay with something you said — that you got through it. Then you moved to your manager's expression, then to what she must be thinking, then to a conclusion about who you are as a person. That's a lot of ground covered in a few seconds. What do you actually know about her reaction, versus what you're filling in?
|
||||
</div>
|
||||
|
||||
<!-- User message 3 -->
|
||||
<div class="chat-bubble user" style="animation: fadeIn 0.4s ease-out 0.5s both; opacity:0;">
|
||||
Honestly, I don't know what she was actually thinking. She asked a question at the end about the margin numbers — that could mean anything. I just immediately jumped to the worst interpretation. I always do that.
|
||||
</div>
|
||||
|
||||
<!-- AI response 3 -->
|
||||
<div class="chat-bubble ai" style="animation: fadeIn 0.4s ease-out 0.6s both; opacity:0;">
|
||||
Notice that shift you just made — from "she probably thinks I'm incompetent" to "I don't actually know what she was thinking." That move, right there, is what we're working on. The first version is a story. The second version is honest. Which one do you want to act from?
|
||||
</div>
|
||||
|
||||
<!-- AI thinking indicator -->
|
||||
<div class="ai-thinking" style="animation: fadeIn 0.4s ease-out 0.7s both; opacity:0;">
|
||||
<div class="thinking-dot"></div>
|
||||
<div class="thinking-dot"></div>
|
||||
<div class="thinking-dot"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Input accessory bar -->
|
||||
<div class="input-accessory">
|
||||
<input class="chat-input" type="text" placeholder="Write freely...">
|
||||
<a class="send-btn" href="17-mirror-fragment-highlight.html">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let seconds = 0;
|
||||
const timerEl = document.getElementById('timer');
|
||||
setInterval(() => {
|
||||
seconds++;
|
||||
const m = Math.floor(seconds / 60);
|
||||
const s = seconds % 60;
|
||||
timerEl.textContent = m + ':' + String(s).padStart(2, '0');
|
||||
}, 1000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
262
initial mockups/screens/mirror/17-mirror-fragment-highlight.html
Normal file
262
initial mockups/screens/mirror/17-mirror-fragment-highlight.html
Normal file
@@ -0,0 +1,262 @@
|
||||
<!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>
|
||||
235
initial mockups/screens/mirror/18-mirror-fragment-detail.html
Normal file
235
initial mockups/screens/mirror/18-mirror-fragment-detail.html
Normal file
@@ -0,0 +1,235 @@
|
||||
<!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>
|
||||
382
initial mockups/screens/mirror/19-mirror-reflection.html
Normal file
382
initial mockups/screens/mirror/19-mirror-reflection.html
Normal file
@@ -0,0 +1,382 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Session Reflection</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.summary-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.summary-stats {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.summary-stat {
|
||||
flex: 1;
|
||||
background: var(--deep-glass);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3);
|
||||
text-align: center;
|
||||
}
|
||||
.summary-stat-value {
|
||||
font-family: var(--font-display);
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.summary-stat-label {
|
||||
font-size: 10px;
|
||||
color: var(--dim-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.fragments-found {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.fragments-found-label {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
margin-right: var(--space-1);
|
||||
}
|
||||
.frag-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
height: 24px;
|
||||
padding: 0 9px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
background: rgba(245,158,11,0.12);
|
||||
color: var(--amber-light);
|
||||
border: 1px solid rgba(245,158,11,0.2);
|
||||
}
|
||||
/* Mood check */
|
||||
.mood-section {
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.mood-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--soft-light);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.mood-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.mood-option {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: var(--space-2) 0;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.mood-option.selected {
|
||||
background: rgba(245,158,11,0.08);
|
||||
border-color: rgba(245,158,11,0.3);
|
||||
}
|
||||
.mood-option-label {
|
||||
font-size: 10px;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
/* Themes */
|
||||
.themes-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
.theme-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 28px;
|
||||
padding: 0 12px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
background: var(--deep-glass);
|
||||
color: var(--soft-light);
|
||||
border: 1px solid var(--twilight);
|
||||
}
|
||||
.btn-save-session {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 52px;
|
||||
background: var(--amber);
|
||||
color: var(--void);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-lg);
|
||||
text-decoration: none;
|
||||
box-shadow: var(--glow-amber);
|
||||
margin-bottom: var(--space-3);
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
.btn-save-session:hover { background: var(--amber-light); box-shadow: 0 0 28px rgba(245,158,11,0.4); }
|
||||
.amber-aura {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(245,158,11,0.1) 0%, transparent 70%);
|
||||
filter: blur(40px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
</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="15-mirror-home.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;">Session Reflection</span>
|
||||
<span style="font-size:11px; color:var(--dim-light);">Feb 21 — Evening</span>
|
||||
</div>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-bottom: 24px; position: relative;">
|
||||
<div class="amber-aura"></div>
|
||||
|
||||
<div class="mt-3" style="position:relative;z-index:1;">
|
||||
|
||||
<!-- Summary stats -->
|
||||
<div class="summary-card">
|
||||
<div class="summary-stats">
|
||||
<div class="summary-stat">
|
||||
<div class="summary-stat-value">12</div>
|
||||
<div class="summary-stat-label">Minutes</div>
|
||||
</div>
|
||||
<div class="summary-stat">
|
||||
<div class="summary-stat-value">847</div>
|
||||
<div class="summary-stat-label">Words</div>
|
||||
</div>
|
||||
<div class="summary-stat">
|
||||
<div class="summary-stat-value" style="color: var(--amber-light);">3</div>
|
||||
<div class="summary-stat-label">Fragments</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="label text-dim mb-2">Fragments Detected</div>
|
||||
<div class="fragments-found">
|
||||
<!-- Mind Reading — hexagonal head with inner diamond (icons-distortions.svg) -->
|
||||
<span class="frag-chip">
|
||||
<svg width="10" height="10" viewBox="-12 -12 24 24" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="s19-amGr1" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<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(#s19-amGr1)" opacity="0.8"/>
|
||||
<path d="M 0,-4 L 4,0 L -4,0 Z" fill="#fff" opacity="0.15"/>
|
||||
</svg>
|
||||
Mind Reading
|
||||
</span>
|
||||
<!-- Catastrophizing — cascading shard (icons-distortions.svg) -->
|
||||
<span class="frag-chip">
|
||||
<svg width="10" height="10" viewBox="-12 -12 24 24" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="s19-amGr2" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M 0,-10 L 5,0 L 0,10 L -5,0 Z" fill="url(#s19-amGr2)" opacity="0.9"/>
|
||||
<path d="M 0,-10 L 5,0 L -5,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<path d="M -8,6 L -5,10 L -9,12 L -11,8 Z" fill="#F59E0B" opacity="0.5"/>
|
||||
<path d="M 7,8 L 10,12 L 8,14 L 5,11 Z" fill="#F59E0B" opacity="0.4"/>
|
||||
</svg>
|
||||
Catastrophizing
|
||||
</span>
|
||||
<!-- Should Statements — rigid ruler/bracket (icons-distortions.svg) -->
|
||||
<span class="frag-chip">
|
||||
<svg width="10" height="10" viewBox="-12 -12 24 24" fill="none">
|
||||
<path d="M -6,-10 L -6,10 L 6,10" fill="none" stroke="#F59E0B" stroke-width="1.2" stroke-linejoin="miter"/>
|
||||
<line x1="-6" y1="-6" x2="-3" y2="-6" stroke="#FCD34D" stroke-width="0.6" opacity="0.5"/>
|
||||
<line x1="-6" y1="-2" x2="-3" y2="-2" stroke="#FCD34D" stroke-width="0.6" opacity="0.5"/>
|
||||
<line x1="-6" y1="2" x2="-3" y2="2" stroke="#FCD34D" stroke-width="0.6" opacity="0.5"/>
|
||||
<line x1="-6" y1="6" x2="-3" y2="6" stroke="#FCD34D" stroke-width="0.6" opacity="0.5"/>
|
||||
<path d="M 2,-4 L 3,-1 L 1,-1 Z" fill="#FCD34D" opacity="0.6"/>
|
||||
<circle cx="2" cy="1" r="0.8" fill="#FCD34D" opacity="0.6"/>
|
||||
</svg>
|
||||
Should Statements
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mood check -->
|
||||
<div class="mood-section">
|
||||
<div class="subheading text-pure mb-3">How are you feeling now?</div>
|
||||
<div class="mood-options">
|
||||
|
||||
<!-- Mood 1: Settled (small nested diamond) -->
|
||||
<div class="mood-option" onclick="selectMood(this)">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32">
|
||||
<path d="M16 4L26 16L16 28L6 16Z" fill="var(--twilight)" stroke="var(--faint-light)" stroke-width="1" fill-opacity="0.5"/>
|
||||
<path d="M16 10L22 16L16 22L10 16Z" fill="var(--emerald)" opacity="0.5"/>
|
||||
</svg>
|
||||
<span class="mood-option-label">Settled</span>
|
||||
</div>
|
||||
|
||||
<!-- Mood 2: Lighter (rising diamond) -->
|
||||
<div class="mood-option" onclick="selectMood(this)">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32">
|
||||
<path d="M16 8L24 16L16 24L8 16Z" fill="var(--sapphire)" opacity="0.3" stroke="var(--sapphire-light)" stroke-width="1"/>
|
||||
<path d="M16 4L20 8" stroke="var(--sapphire-light)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M12 4L16 8" stroke="var(--sapphire-light)" stroke-width="1" stroke-linecap="round" opacity="0.5"/>
|
||||
<path d="M20 4L24 8" stroke="var(--sapphire-light)" stroke-width="1" stroke-linecap="round" opacity="0.5"/>
|
||||
</svg>
|
||||
<span class="mood-option-label">Lighter</span>
|
||||
</div>
|
||||
|
||||
<!-- Mood 3: Neutral (balanced diamond) -->
|
||||
<div class="mood-option selected" onclick="selectMood(this)">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32">
|
||||
<path d="M16 6L26 16L16 26L6 16Z" fill="var(--amber)" opacity="0.2" stroke="var(--amber-light)" stroke-width="1.2"/>
|
||||
<line x1="10" y1="16" x2="22" y2="16" stroke="var(--amber-light)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="mood-option-label" style="color:var(--amber-light);">Neutral</span>
|
||||
</div>
|
||||
|
||||
<!-- Mood 4: Heavy (dense diamond) -->
|
||||
<div class="mood-option" onclick="selectMood(this)">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32">
|
||||
<path d="M16 6L26 16L16 26L6 16Z" fill="var(--amethyst)" opacity="0.25" stroke="var(--amethyst-light)" stroke-width="1"/>
|
||||
<path d="M16 10L22 16L16 22L10 16Z" fill="var(--amethyst)" opacity="0.3"/>
|
||||
<path d="M16 13L19 16L16 19L13 16Z" fill="var(--amethyst)" opacity="0.6"/>
|
||||
</svg>
|
||||
<span class="mood-option-label">Heavy</span>
|
||||
</div>
|
||||
|
||||
<!-- Mood 5: Turbulent (spiky diamond) -->
|
||||
<div class="mood-option" onclick="selectMood(this)">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32">
|
||||
<path d="M16 4L20 12L28 12L22 18L24 26L16 22L8 26L10 18L4 12L12 12Z" fill="var(--ruby)" opacity="0.2" stroke="var(--ruby)" stroke-width="0.8"/>
|
||||
</svg>
|
||||
<span class="mood-option-label">Turbulent</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Key themes -->
|
||||
<div class="mb-4">
|
||||
<div class="section-header">
|
||||
<span class="section-title">Key Themes</span>
|
||||
</div>
|
||||
<div class="themes-row">
|
||||
<span class="theme-chip">Public speaking anxiety</span>
|
||||
<span class="theme-chip">Manager judgment</span>
|
||||
<span class="theme-chip">Self-criticism</span>
|
||||
<span class="theme-chip">Freeze response</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- The Guide noticed section -->
|
||||
<div style="position: relative; border-radius: var(--radius-lg); margin-bottom: var(--space-4);">
|
||||
<!-- Prismatic gradient border -->
|
||||
<div style="position: absolute; inset: -1px; border-radius: var(--radius-lg); background: linear-gradient(135deg, #8B5CF6, #3B82F6, #10B981, #F59E0B, #EC4899, #8B5CF6); z-index: 0; background-size: 300% 300%; animation: prismaticShift 6s ease-in-out infinite;"></div>
|
||||
<div style="position: relative; z-index: 1; background: var(--kalei-navy); border-radius: calc(var(--radius-lg) - 1px); padding: var(--space-4);">
|
||||
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3);">
|
||||
<!-- 6-blade kaleidoscope icon -->
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="s19-guideGrad" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#8B5CF6"/>
|
||||
<stop offset="50%" stop-color="#3B82F6"/>
|
||||
<stop offset="100%" stop-color="#10B981"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<polygon points="8,1 15,8 8,15 1,8" fill="none" stroke="url(#s19-guideGrad)" stroke-width="1.5" stroke-linejoin="round"/>
|
||||
<circle cx="8" cy="8" r="2" fill="url(#s19-guideGrad)" opacity="0.7"/>
|
||||
</svg>
|
||||
<span style="font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--soft-light); text-transform: uppercase; letter-spacing: 0.06em;">The Guide noticed...</span>
|
||||
</div>
|
||||
<p style="font-size: 13px; color: var(--dim-light); line-height: 1.6; margin-bottom: var(--space-2);">Today's session connects to your Lens goal <span style="color: var(--emerald-light); font-weight: 500;">"Present with confidence"</span>. The Mind Reading pattern you named — assuming your manager's verdict — is the exact thought that derails you before presentations begin.</p>
|
||||
<p style="font-size: 13px; color: var(--dim-light); line-height: 1.6; margin-bottom: var(--space-3);">Your if-then plan for this goal is ready to rehearse. <span style="color: var(--emerald-light); font-weight: 500;">14-day streak</span> — you're building something real.</p>
|
||||
<a href="../lens/20-lens-dashboard.html" style="font-size: 13px; font-weight: 500; color: var(--emerald-light); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: opacity 0.2s ease-out;">Check your Lens goals
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M4 2l4 4-4 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<a href="#" class="btn-save-session" onclick="this.textContent='Saved'; return false;">
|
||||
Save session
|
||||
</a>
|
||||
<a href="../turn/10-turn-home.html" class="btn btn-secondary" style="text-decoration:none;">
|
||||
Start a Turn
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function selectMood(el) {
|
||||
document.querySelectorAll('.mood-option').forEach(o => {
|
||||
o.classList.remove('selected');
|
||||
o.querySelector('.mood-option-label').style.color = '';
|
||||
});
|
||||
el.classList.add('selected');
|
||||
el.querySelector('.mood-option-label').style.color = 'var(--amber-light)';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user