328 lines
17 KiB
HTML
328 lines
17 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=390, initial-scale=1">
|
||
|
|
<title>Kalei — Your Turn</title>
|
||
|
|
<link rel="stylesheet" href="../../assets/design-system.css">
|
||
|
|
<style>
|
||
|
|
.screen-aura {
|
||
|
|
position: absolute;
|
||
|
|
top: 20%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
width: 300px;
|
||
|
|
height: 300px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: radial-gradient(circle, rgba(139,92,246,0.14) 0%, transparent 70%);
|
||
|
|
filter: blur(60px);
|
||
|
|
animation: breathing 6s ease-in-out infinite;
|
||
|
|
pointer-events: none;
|
||
|
|
z-index: 0;
|
||
|
|
}
|
||
|
|
.original-thought-card {
|
||
|
|
background: var(--deep-glass);
|
||
|
|
border: 1px solid var(--twilight);
|
||
|
|
border-radius: var(--radius-lg);
|
||
|
|
padding: var(--space-3) var(--space-4);
|
||
|
|
margin-bottom: var(--space-4);
|
||
|
|
opacity: 0.8;
|
||
|
|
}
|
||
|
|
.original-thought-label {
|
||
|
|
font-size: 11px;
|
||
|
|
font-weight: 600;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.06em;
|
||
|
|
color: var(--faint-light);
|
||
|
|
margin-bottom: var(--space-1);
|
||
|
|
}
|
||
|
|
.original-thought-text {
|
||
|
|
font-size: 15px;
|
||
|
|
color: var(--dim-light);
|
||
|
|
line-height: 1.5;
|
||
|
|
}
|
||
|
|
.kaleido-divider {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin: var(--space-3) 0;
|
||
|
|
}
|
||
|
|
.distortions-row {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: var(--space-2);
|
||
|
|
margin-bottom: var(--space-4);
|
||
|
|
margin-top: var(--space-2);
|
||
|
|
}
|
||
|
|
.distortion-label {
|
||
|
|
font-size: 11px;
|
||
|
|
font-weight: 600;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.06em;
|
||
|
|
color: var(--dim-light);
|
||
|
|
margin-bottom: var(--space-2);
|
||
|
|
}
|
||
|
|
.actions-row {
|
||
|
|
display: flex;
|
||
|
|
gap: var(--space-3);
|
||
|
|
margin-top: var(--space-4);
|
||
|
|
margin-bottom: var(--space-6);
|
||
|
|
}
|
||
|
|
.action-btn {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
gap: var(--space-1);
|
||
|
|
background: var(--deep-glass);
|
||
|
|
border: 1px solid var(--twilight);
|
||
|
|
border-radius: var(--radius-lg);
|
||
|
|
padding: var(--space-3) var(--space-2);
|
||
|
|
cursor: pointer;
|
||
|
|
text-decoration: none;
|
||
|
|
transition: background 0.2s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out;
|
||
|
|
}
|
||
|
|
.action-btn:hover { background: var(--twilight); border-color: rgba(139,92,246,0.35); box-shadow: 0 0 12px rgba(139,92,246,0.1); }
|
||
|
|
.action-btn-label {
|
||
|
|
font-size: 11px;
|
||
|
|
color: var(--dim-light);
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
/* Distortion chip with extracted icon */
|
||
|
|
.chip-distortion {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 6px;
|
||
|
|
height: 28px;
|
||
|
|
padding: 0 10px;
|
||
|
|
border-radius: var(--radius-full);
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: 500;
|
||
|
|
background: rgba(245,158,11,0.12);
|
||
|
|
color: var(--amber-light);
|
||
|
|
border: 1px solid rgba(245,158,11,0.2);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="device-frame">
|
||
|
|
|
||
|
|
<div class="status-bar">
|
||
|
|
<span class="time">8:15</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="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-bottom: var(--space-6); position: relative;">
|
||
|
|
<div class="screen-aura"></div>
|
||
|
|
|
||
|
|
<!-- Original thought -->
|
||
|
|
<div class="original-thought-card mt-3">
|
||
|
|
<div class="original-thought-label">Your thought</div>
|
||
|
|
<div class="original-thought-text">I completely bombed my presentation today and everyone saw</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Detected distortions — using exact icon paths from icons-distortions.svg -->
|
||
|
|
<div class="distortion-label">Patterns detected</div>
|
||
|
|
<div class="distortions-row">
|
||
|
|
|
||
|
|
<!-- Catastrophizing icon: cascading shard breaking into pieces (from icons-distortions.svg line 25-40) -->
|
||
|
|
<span class="chip-distortion">
|
||
|
|
<svg width="16" height="16" viewBox="-12 -12 24 24" fill="none">
|
||
|
|
<defs>
|
||
|
|
<filter id="s13-gCatastroph" 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="s13-amberGr1" 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(#s13-gCatastroph)">
|
||
|
|
<path d="M 0,-10 L 5,0 L 0,10 L -5,0 Z" fill="url(#s13-amberGr1)" 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"/>
|
||
|
|
<line x1="0" y1="11" x2="0" y2="16" stroke="#FCD34D" stroke-width="0.5" opacity="0.4"/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
Catastrophizing
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<!-- Overgeneralization icon: one dot replicating into many (from icons-distortions.svg line 167-182) -->
|
||
|
|
<span class="chip-distortion">
|
||
|
|
<svg width="16" height="16" viewBox="-12 -12 24 24" fill="none">
|
||
|
|
<defs>
|
||
|
|
<filter id="s13-gOvergen" 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="s13-amberGr2" 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(#s13-gOvergen)">
|
||
|
|
<path d="M -10,0 L -7,-3 L -4,0 L -7,3 Z" fill="url(#s13-amberGr2)" opacity="0.9"/>
|
||
|
|
<path d="M -10,0 L -7,-3 L -4,0 Z" fill="#fff" opacity="0.15"/>
|
||
|
|
<line x1="-3" y1="0" x2="0" y2="0" stroke="#FCD34D" stroke-width="0.5" opacity="0.4"/>
|
||
|
|
<path d="M 2,-6 L 4,-8 L 6,-6 L 4,-4 Z" fill="#F59E0B" opacity="0.7"/>
|
||
|
|
<path d="M 4,0 L 6,-2 L 8,0 L 6,2 Z" fill="#F59E0B" opacity="0.6"/>
|
||
|
|
<path d="M 2,6 L 4,4 L 6,6 L 4,8 Z" fill="#F59E0B" opacity="0.5"/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
Overgeneralization
|
||
|
|
</span>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Kaleidoscope divider — Turn Pattern from patterns-kaleidoscope.svg (6 amethyst blades) -->
|
||
|
|
<div class="kaleido-divider">
|
||
|
|
<img src="../../assets/kalei-logo.svg" width="100" height="100" alt="Kalei" style="filter: drop-shadow(0 0 12px rgba(139,92,246,0.3));">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Reframe blocks -->
|
||
|
|
<div class="reframe-block amethyst" style="animation: fadeIn 0.4s ease-out 0.1s both; opacity:0;">
|
||
|
|
<div class="reframe-label">Perspective Shift</div>
|
||
|
|
<div class="reframe-text">One rough presentation doesn't define your skills or how others see you. The word "bombed" is your brain's catastrophe filter — not an objective review. People in that room were focused on their own reactions, not cataloguing your performance.</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="reframe-block sapphire" style="animation: fadeIn 0.4s ease-out 0.2s both; opacity:0;">
|
||
|
|
<div class="reframe-label">Evidence Check</div>
|
||
|
|
<div class="reframe-text">You've presented before and it has gone well. Those moments are just as real as this one. What specific evidence do you have that "everyone" was watching critically — or is that a feeling your mind dressed up as a fact?</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="reframe-block emerald" style="animation: fadeIn 0.4s ease-out 0.3s both; opacity:0;">
|
||
|
|
<div class="reframe-label">Action Step</div>
|
||
|
|
<div class="reframe-text">Tonight, write down one thing that did go okay in that presentation — one slide, one answer, one moment of clarity. Then write one specific thing to prepare differently next time. That's how you close the loop rather than replay it.</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Guide: If-Then Micro-Action Card — reactive behavior per Section 13B -->
|
||
|
|
<div style="background: var(--kalei-navy); border: 1px solid rgba(16,185,129,0.35); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-3); box-shadow: 0 0 16px rgba(16,185,129,0.08); animation: fadeIn 0.4s ease-out 0.4s both; opacity: 0;">
|
||
|
|
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3);">
|
||
|
|
<svg width="16" height="16" viewBox="0 0 16 16">
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="s13-ifThenFrag" x1="0" y1="0" x2="0" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#6EE7B7"/>
|
||
|
|
<stop offset="100%" stop-color="#047857"/>
|
||
|
|
</linearGradient>
|
||
|
|
<filter id="s13-ifThenGlow" 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 transform="translate(8,8)" filter="url(#s13-ifThenGlow)">
|
||
|
|
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#s13-ifThenFrag)" opacity="0.9"/>
|
||
|
|
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
<span style="font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--emerald-light); letter-spacing: 0.04em; text-transform: uppercase;">◇ Make it real</span>
|
||
|
|
</div>
|
||
|
|
<p style="font-size: 15px; color: var(--soft-light); line-height: 1.55; margin-bottom: var(--space-3);">
|
||
|
|
<strong style="color: var(--pure-light);">If</strong> I start replaying the presentation and feel the shame spiral building,
|
||
|
|
<strong style="color: var(--pure-light);">then</strong> I will open my notes and write down one thing that actually went okay — before I let the story grow.
|
||
|
|
</p>
|
||
|
|
<div style="display: flex; gap: var(--space-3);">
|
||
|
|
<button style="flex: 1; height: 36px; background: var(--emerald); border: none; border-radius: var(--radius-full); font-family: var(--font-primary); font-size: 13px; font-weight: 600; color: var(--pure-light); cursor: pointer; transition: background 0.2s ease-out; box-shadow: 0 0 12px rgba(16,185,129,0.25);" onmouseover="this.style.background='var(--emerald-light)'" onmouseout="this.style.background='var(--emerald)'">Save to Lens</button>
|
||
|
|
<button style="flex: 1; height: 36px; background: transparent; border: 1px solid var(--twilight); border-radius: var(--radius-full); font-family: var(--font-primary); font-size: 13px; font-weight: 500; color: var(--dim-light); cursor: pointer; transition: border-color 0.2s ease-out;" onmouseover="this.style.borderColor='var(--faint-light)'" onmouseout="this.style.borderColor='var(--twilight)'">Skip</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Goal Connection — reactive per Section 13B Turn behavior -->
|
||
|
|
<div style="text-align: center; margin-bottom: var(--space-4); animation: fadeIn 0.4s ease-out 0.5s both; opacity: 0;">
|
||
|
|
<span style="font-size: 13px; color: var(--dim-light);">This connects to your goal: </span>
|
||
|
|
<a href="../lens/27-lens-goal-detail.html" style="font-size: 13px; color: var(--emerald-light); text-decoration: none; font-weight: 500; transition: color 0.2s ease-out;" onmouseover="this.style.color='var(--emerald)'" onmouseout="this.style.color='var(--emerald-light)'">Present with confidence</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Actions row -->
|
||
|
|
<div class="actions-row">
|
||
|
|
<a href="#" class="action-btn" onclick="showToast(); return false;">
|
||
|
|
<!-- Bookmark icon -->
|
||
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||
|
|
<path d="M14 2.5C14.8 2.5 15.5 3.2 15.5 4V16.5L10 14L4.5 16.5V4C4.5 3.2 5.2 2.5 6 2.5H14Z" stroke="var(--amethyst-light)" fill="none" stroke-width="1.3" stroke-linejoin="round"/>
|
||
|
|
</svg>
|
||
|
|
<span class="action-btn-label">Save</span>
|
||
|
|
</a>
|
||
|
|
<a href="../modals/61-pattern-share.html" class="action-btn">
|
||
|
|
<!-- Share icon -->
|
||
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||
|
|
<circle cx="16" cy="4" r="2" stroke="var(--amethyst-light)" fill="none" stroke-width="1.3"/>
|
||
|
|
<circle cx="4" cy="10" r="2" stroke="var(--amethyst-light)" fill="none" stroke-width="1.3"/>
|
||
|
|
<circle cx="16" cy="16" r="2" stroke="var(--amethyst-light)" fill="none" stroke-width="1.3"/>
|
||
|
|
<path d="M6 9L14 5M6 11L14 15" stroke="var(--amethyst-light)" stroke-width="1.3"/>
|
||
|
|
</svg>
|
||
|
|
<span class="action-btn-label">Share</span>
|
||
|
|
</a>
|
||
|
|
<a href="11-turn-input-active.html" class="action-btn">
|
||
|
|
<!-- Refresh icon -->
|
||
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||
|
|
<path d="M16 4C14.5 2.5 12.4 1.5 10 1.5C5.3 1.5 1.5 5.3 1.5 10S5.3 18.5 10 18.5C14 18.5 17.4 15.9 18.3 12.3" stroke="var(--amethyst-light)" fill="none" stroke-width="1.3" stroke-linecap="round"/>
|
||
|
|
<path d="M13 1.5L16.5 4L13 6.5" stroke="var(--amethyst-light)" fill="none" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||
|
|
</svg>
|
||
|
|
<span class="action-btn-label">Try Again</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Toast notification -->
|
||
|
|
<div id="toast" style="
|
||
|
|
position: absolute; top: 75px; left: 50%; transform: translateX(-50%);
|
||
|
|
background: var(--deep-glass); border: 1px solid var(--emerald);
|
||
|
|
border-radius: var(--radius-full); padding: 8px 20px;
|
||
|
|
display: none; align-items: center; gap: var(--space-2);
|
||
|
|
box-shadow: var(--glow-emerald);
|
||
|
|
white-space: nowrap; z-index: 20;
|
||
|
|
">
|
||
|
|
<!-- Fragment diamond SM from fragment-icons.svg -->
|
||
|
|
<svg width="14" height="14" viewBox="-8 -8 16 16" fill="none">
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="s13-grEm" x1="0" y1="0" x2="0" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#6EE7B7"/>
|
||
|
|
<stop offset="100%" stop-color="#059669"/>
|
||
|
|
</linearGradient>
|
||
|
|
<filter id="s13-glowSmToast" 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(#s13-glowSmToast)">
|
||
|
|
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#s13-grEm)" 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>
|
||
|
|
<span class="body-sm text-soft" style="font-weight:500;">Turn saved</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function showToast() {
|
||
|
|
const toast = document.getElementById('toast');
|
||
|
|
toast.style.display = 'flex';
|
||
|
|
toast.style.animation = 'fadeIn 0.3s ease';
|
||
|
|
setTimeout(() => {
|
||
|
|
toast.style.opacity = '0';
|
||
|
|
toast.style.transition = 'opacity 0.3s';
|
||
|
|
setTimeout(() => { toast.style.display = 'none'; toast.style.opacity = '1'; }, 300);
|
||
|
|
}, 2000);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|