253 lines
9.2 KiB
HTML
253 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=390, initial-scale=1">
|
|
<title>Kalei — Guide Evidence (Turn)</title>
|
|
<link rel="stylesheet" href="../../assets/design-system.css">
|
|
<style>
|
|
@keyframes breathing {
|
|
0%, 100% { opacity: 0.6; transform: scale(1); }
|
|
50% { opacity: 1; transform: scale(1.05); }
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(6px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes slideUp {
|
|
from { opacity: 0; transform: translateY(16px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
/* Turn results base (dimmed context) */
|
|
.turn-original-thought {
|
|
font-size: 15px;
|
|
color: var(--dim-light);
|
|
font-style: italic;
|
|
text-align: center;
|
|
padding: var(--space-4) var(--space-2);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.reframe-block {
|
|
background: var(--kalei-navy);
|
|
border-radius: var(--radius-xl);
|
|
padding: var(--space-4);
|
|
margin-bottom: var(--space-3);
|
|
opacity: 0.75;
|
|
}
|
|
.reframe-block.amethyst { border-left: 3px solid var(--amethyst); }
|
|
.reframe-block.sapphire { border-left: 3px solid var(--sapphire); }
|
|
.reframe-block.emerald { border-left: 3px solid var(--emerald); }
|
|
.reframe-label {
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.07em;
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.amethyst .reframe-label { color: var(--amethyst-light); }
|
|
.sapphire .reframe-label { color: var(--sapphire-light); }
|
|
.emerald .reframe-label { color: var(--emerald-light); }
|
|
.reframe-text {
|
|
font-size: 14px;
|
|
color: var(--soft-light);
|
|
line-height: 1.6;
|
|
}
|
|
/* Evidence intervention card */
|
|
.evidence-card {
|
|
background: var(--kalei-navy);
|
|
border-radius: var(--radius-xl);
|
|
padding: var(--space-4);
|
|
margin-bottom: var(--space-3);
|
|
position: relative;
|
|
animation: slideUp 0.4s ease-out 0.2s both;
|
|
}
|
|
.evidence-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -1px;
|
|
border-radius: 17px;
|
|
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
|
z-index: -1;
|
|
}
|
|
.evidence-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.evidence-guide-icon {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.evidence-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--pure-light);
|
|
}
|
|
.evidence-intro {
|
|
font-size: 13px;
|
|
color: var(--soft-light);
|
|
line-height: 1.6;
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.keepsake-quote {
|
|
font-size: 14px;
|
|
font-style: italic;
|
|
color: var(--sapphire-light);
|
|
padding: var(--space-3);
|
|
border-left: 2px solid var(--sapphire);
|
|
background: rgba(59,130,246,0.06);
|
|
border-radius: 0 var(--radius-md) var(--radius-md) 0;
|
|
margin-bottom: var(--space-3);
|
|
line-height: 1.65;
|
|
}
|
|
.keepsake-meta {
|
|
font-size: 11px;
|
|
color: var(--faint-light);
|
|
margin-top: var(--space-1);
|
|
}
|
|
.evidence-stat {
|
|
font-size: 13px;
|
|
color: var(--soft-light);
|
|
padding: var(--space-2) var(--space-3);
|
|
background: rgba(16,185,129,0.06);
|
|
border-radius: var(--radius-md);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
.evidence-stat strong {
|
|
color: var(--emerald-light);
|
|
font-weight: 600;
|
|
}
|
|
/* Action buttons at bottom */
|
|
.turn-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
margin-top: var(--space-3);
|
|
}
|
|
.save-btn {
|
|
height: 52px;
|
|
background: var(--amethyst);
|
|
color: var(--pure-light);
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
border-radius: var(--radius-lg);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-decoration: none;
|
|
box-shadow: 0 0 20px rgba(139,92,246,0.25);
|
|
transition: background 0.2s ease-out;
|
|
}
|
|
.save-btn:hover { background: var(--amethyst-light); }
|
|
.share-btn {
|
|
height: 44px;
|
|
background: var(--deep-glass);
|
|
color: var(--soft-light);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
border-radius: var(--radius-lg);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-decoration: none;
|
|
border: 1px solid var(--twilight);
|
|
}
|
|
.screen-aura {
|
|
position: absolute;
|
|
top: 15%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 220px;
|
|
height: 220px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(139,92,246,0.12) 0%, transparent 70%);
|
|
filter: blur(40px);
|
|
animation: breathing 6s ease-in-out infinite;
|
|
pointer-events: none;
|
|
}
|
|
</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="../turn/10-turn-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>
|
|
<span class="nav-title">Your Turn</span>
|
|
<span class="nav-action"></span>
|
|
</div>
|
|
|
|
<div class="screen-content" style="padding-top: 0; padding-bottom: var(--space-8);">
|
|
<div class="screen-aura"></div>
|
|
|
|
<!-- Canonical Turn from Feb 22 -->
|
|
<div class="turn-original-thought">"I completely bombed my presentation today and everyone saw"</div>
|
|
|
|
<!-- Reframe blocks (dimmed context) -->
|
|
<div class="reframe-block amethyst">
|
|
<div class="reframe-label">Perspective Shift</div>
|
|
<div class="reframe-text">Your manager said the data was solid. What if "bombed" is only the feeling — not what actually landed?</div>
|
|
</div>
|
|
|
|
<div class="reframe-block sapphire">
|
|
<div class="reframe-label">Evidence Check</div>
|
|
<div class="reframe-text">Who told you everyone saw? What specific reaction are you basing this on — a word, a look, a silence?</div>
|
|
</div>
|
|
|
|
<div class="reframe-block emerald">
|
|
<div class="reframe-label">Action Step</div>
|
|
<div class="reframe-text">Before your next presentation, write down one thing you want people to take away — not how you want to seem.</div>
|
|
</div>
|
|
|
|
<!-- Evidence intervention card -->
|
|
<div class="evidence-card">
|
|
<div class="evidence-header">
|
|
<span class="evidence-guide-icon">◇</span>
|
|
<span class="evidence-title">Something interesting</span>
|
|
</div>
|
|
<div class="evidence-intro">
|
|
This thought — "I bombed and everyone saw" — is Catastrophizing. You've Turned this exact shape before, and you kept something worth reading again:
|
|
</div>
|
|
<div class="keepsake-quote">
|
|
"The gap between how I felt in that meeting and what anyone actually said out loud was enormous. The catastrophe lived entirely in my head."
|
|
<div class="keepsake-meta">Saved keepsake · Feb 14, 2026 · Catastrophizing</div>
|
|
</div>
|
|
<div class="evidence-stat">
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
|
<path d="M2 7l3 3L12 3" stroke="var(--emerald)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
You've caught this fragment <strong>7 times</strong> now. Each time you name it, it gets a little smaller.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Standard turn action buttons -->
|
|
<div class="turn-actions">
|
|
<a class="save-btn" href="../turn/13-turn-results.html">Save this Turn</a>
|
|
<a class="share-btn" href="../turn/13-turn-results.html">Share pattern</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|