268 lines
14 KiB
HTML
268 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=390, initial-scale=1">
|
|
<title>Kalei — Pattern Detail</title>
|
|
<link rel="stylesheet" href="../../assets/design-system.css">
|
|
<style>
|
|
.nav-back { color: var(--sapphire-light) !important; transition: opacity 0.2s; }
|
|
.nav-action { color: var(--sapphire-light) !important; transition: opacity 0.2s; }
|
|
.nav-back:hover, .nav-action:hover { opacity: 0.75; }
|
|
.pattern-hero {
|
|
background: var(--void); position: relative;
|
|
height: 200px; display: flex; align-items: center; justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
.pattern-hero-aura {
|
|
position: absolute; inset: 0;
|
|
background: radial-gradient(ellipse at 50% 50%, rgba(139,92,246,0.2), transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
.pattern-hero-aura-outer {
|
|
position: absolute; inset: 0;
|
|
background: radial-gradient(ellipse at 50% 50%, rgba(59,130,246,0.08), transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
.hero-kaleidoscope { animation: breathing 6s ease-in-out infinite; }
|
|
.hero-shard-1 { position: absolute; top: 20px; left: 20px; opacity: 0.15; animation: breathing 6s ease-in-out infinite; }
|
|
.hero-shard-2 { position: absolute; bottom: 20px; right: 20px; opacity: 0.12; animation: breathing 6s ease-in-out infinite 1s; }
|
|
.original-thought-card {
|
|
margin: var(--space-4) var(--space-4) var(--space-3);
|
|
background: var(--deep-glass); border: 1px solid var(--twilight);
|
|
border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4);
|
|
}
|
|
.original-label {
|
|
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
|
letter-spacing: 0.06em; color: var(--dim-light); margin-bottom: 6px;
|
|
}
|
|
.original-text {
|
|
font-size: 15px; color: var(--soft-light); line-height: 1.5; font-style: italic;
|
|
}
|
|
.reframes-section { padding: 0 var(--space-4); margin-bottom: var(--space-4); }
|
|
.section-label {
|
|
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
|
letter-spacing: 0.06em; color: var(--dim-light); margin-bottom: 10px;
|
|
}
|
|
.distortions-section { padding: 0 var(--space-4); margin-bottom: var(--space-4); }
|
|
.distortion-card {
|
|
background: var(--kalei-navy); border: 1px solid rgba(245,158,11,0.2);
|
|
border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4);
|
|
margin-bottom: var(--space-2); display: flex; gap: var(--space-3); align-items: flex-start;
|
|
}
|
|
.distortion-icon-wrap {
|
|
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;
|
|
}
|
|
.distortion-info { flex: 1; }
|
|
.distortion-name {
|
|
font-size: 14px; font-weight: 600; color: var(--amber-light); margin-bottom: 3px;
|
|
}
|
|
.distortion-explanation {
|
|
font-size: 13px; color: var(--dim-light); line-height: 1.4;
|
|
}
|
|
.actions-section { padding: 0 var(--space-4); margin-bottom: var(--space-4); }
|
|
.meta-row {
|
|
padding: var(--space-3) var(--space-4);
|
|
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
|
}
|
|
.meta-chip {
|
|
background: var(--deep-glass); border: 1px solid var(--twilight);
|
|
border-radius: var(--radius-full); padding: 4px 12px;
|
|
font-size: 12px; color: var(--dim-light);
|
|
}
|
|
.btn-turn-again {
|
|
display: flex; align-items: center; justify-content: center; gap: 8px;
|
|
height: 52px; width: 100%;
|
|
background: var(--amethyst); color: var(--pure-light);
|
|
font-size: 15px; font-weight: 600; border-radius: var(--radius-lg);
|
|
box-shadow: var(--glow-amethyst); text-decoration: none;
|
|
transition: background 0.2s; margin-bottom: var(--space-2);
|
|
}
|
|
.btn-turn-again:hover { background: var(--amethyst-light); }
|
|
.btn-bookmark {
|
|
display: flex; align-items: center; justify-content: center; gap: 8px;
|
|
height: 44px; width: 100%;
|
|
background: var(--deep-glass); color: var(--sapphire-light);
|
|
font-size: 14px; font-weight: 600; border-radius: var(--radius-lg);
|
|
border: 1px solid rgba(59,130,246,0.3); text-decoration: none;
|
|
transition: all 0.2s; cursor: pointer;
|
|
}
|
|
.btn-bookmark:hover { background: rgba(59,130,246,0.1); }
|
|
.screen-content { padding-bottom: 24px; }
|
|
</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="31-gallery-all.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">Pattern</span>
|
|
<a class="nav-action" href="../modals/61-pattern-share.html" style="text-decoration: none;">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
<circle cx="15" cy="4" r="2" stroke="currentColor" stroke-width="1.4"/>
|
|
<circle cx="4" cy="10" r="2" stroke="currentColor" stroke-width="1.4"/>
|
|
<circle cx="15" cy="16" r="2" stroke="currentColor" stroke-width="1.4"/>
|
|
<path d="M6 9l7-4M6 11l7 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="screen-content">
|
|
<!-- Large kaleidoscope pattern hero -->
|
|
<div class="pattern-hero">
|
|
<div class="pattern-hero-aura"></div>
|
|
<div class="pattern-hero-aura-outer"></div>
|
|
<svg class="hero-shard-1" width="28" height="28" viewBox="0 0 28 28"><path d="M14 2L20 14L14 26L8 14Z" fill="var(--amethyst)"/></svg>
|
|
<svg class="hero-shard-2" width="20" height="20" viewBox="0 0 20 20"><path d="M10 2L14 10L10 18L6 10Z" fill="var(--sapphire)"/></svg>
|
|
<!-- Hero kaleidoscope — canonical logo -->
|
|
<img src="../../assets/kalei-logo.svg" width="100" height="100" alt="Kalei" class="hero-kaleidoscope" style="filter: drop-shadow(0 0 12px rgba(139,92,246,0.3));">
|
|
</div>
|
|
|
|
<!-- Original thought -->
|
|
<div class="original-thought-card">
|
|
<div class="original-label">Original Thought — Feb 22, 2026</div>
|
|
<div class="original-text">"I completely bombed my presentation today and everyone saw how unprepared I was."</div>
|
|
</div>
|
|
|
|
<!-- 3 Reframe perspectives -->
|
|
<div class="reframes-section">
|
|
<div class="section-label">3 Perspectives</div>
|
|
<div class="reframe-block amethyst">
|
|
<div class="reframe-label">Perspective Shift</div>
|
|
<div class="reframe-text">What if stumbling through this actually revealed something real about you — not incompetence, but the courage to show up when the stakes felt high? Everyone in that room has had a moment like this.</div>
|
|
</div>
|
|
<div class="reframe-block sapphire">
|
|
<div class="reframe-label">Evidence Check</div>
|
|
<div class="reframe-text">Think of a presentation or high-pressure moment where you felt underprepared — and survived. What did you do that got you through? That same resilience is what brought you here today, too.</div>
|
|
</div>
|
|
<div class="reframe-block emerald">
|
|
<div class="reframe-label">Action Step</div>
|
|
<div class="reframe-text">Write down one thing that went better than expected today, however small. Then name one specific thing you'd adjust next time. That's not failure — that's preparation.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Detected distortions -->
|
|
<div class="distortions-section">
|
|
<div class="section-label">Detected Patterns</div>
|
|
|
|
<div class="distortion-card">
|
|
<div class="distortion-icon-wrap">
|
|
<!-- Extracted from icons-distortions.svg → Catastrophizing (translate 28,60) -->
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
<defs>
|
|
<linearGradient id="d33-amberGr1" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#FDE68A"/>
|
|
<stop offset="100%" stop-color="#D97706"/>
|
|
</linearGradient>
|
|
<filter id="d33-gAmber1" 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(12,12)" filter="url(#d33-gAmber1)">
|
|
<!-- Main falling shard -->
|
|
<path d="M 0,-10 L 5,0 L 0,10 L -5,0 Z" fill="url(#d33-amberGr1)" opacity="0.9"/>
|
|
<path d="M 0,-10 L 5,0 L -5,0 Z" fill="#fff" opacity="0.15"/>
|
|
<!-- Broken fragments -->
|
|
<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"/>
|
|
<!-- Motion line -->
|
|
<line x1="0" y1="11" x2="0" y2="16" stroke="#FCD34D" stroke-width="0.5" opacity="0.4"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="distortion-info">
|
|
<div class="distortion-name">Catastrophizing</div>
|
|
<div class="distortion-explanation">Magnifying the negatives of a situation while minimizing any positives. One setback becomes a total disaster in your mind.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="distortion-card">
|
|
<div class="distortion-icon-wrap">
|
|
<!-- Extracted from icons-distortions.svg → Overgeneralization (translate 448,180) -->
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
<defs>
|
|
<linearGradient id="d33-amberGr2" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#FDE68A"/>
|
|
<stop offset="100%" stop-color="#D97706"/>
|
|
</linearGradient>
|
|
<filter id="d33-gAmber2" 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(12,12)" filter="url(#d33-gAmber2)">
|
|
<!-- Source diamond -->
|
|
<path d="M -10,0 L -7,-3 L -4,0 L -7,3 Z" fill="url(#d33-amberGr2)" opacity="0.9"/>
|
|
<path d="M -10,0 L -7,-3 L -4,0 Z" fill="#fff" opacity="0.15"/>
|
|
<!-- Spreading replicated diamonds -->
|
|
<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,4 L 4,2 L 6,4 L 4,6 Z" fill="#F59E0B" opacity="0.5"/>
|
|
<path d="M 8,-5 L 10,-7 L 12,-5 L 10,-3 Z" fill="#F59E0B" opacity="0.35"/>
|
|
<path d="M 9,3 L 11,1 L 13,3 L 11,5 Z" fill="#F59E0B" opacity="0.3"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="distortion-info">
|
|
<div class="distortion-name">Overgeneralization</div>
|
|
<div class="distortion-explanation">Drawing a broad, absolute conclusion from a single event. "Everyone saw" and "completely bombed" turn one difficult moment into a sweeping verdict about your ability.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Meta info -->
|
|
<div class="meta-row">
|
|
<span class="meta-chip">Feb 22, 2026</span>
|
|
<span class="meta-chip">Compassionate style</span>
|
|
<span class="meta-chip">4 min</span>
|
|
<span class="meta-chip">Turn #47</span>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="actions-section">
|
|
<a class="btn-turn-again" href="../turn/11-turn-input-active.html">
|
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
<path d="M2 9C2 5.1 5.1 2 9 2s7 3.1 7 7-3.1 7-7 7" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
|
<path d="M2 9l2-2M2 9l2 2" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Turn again
|
|
</a>
|
|
<button class="btn-bookmark" onclick="toggleBookmark(this)">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" id="bmIcon">
|
|
<path d="M4 2h8a1 1 0 011 1v11l-5-3-5 3V3a1 1 0 011-1z" stroke="currentColor" stroke-width="1.2" fill="none"/>
|
|
</svg>
|
|
Save to Keepsakes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleBookmark(btn) {
|
|
const icon = document.getElementById('bmIcon');
|
|
const isSaved = btn.textContent.includes('Saved');
|
|
if (isSaved) {
|
|
icon.innerHTML = '<path d="M4 2h8a1 1 0 011 1v11l-5-3-5 3V3a1 1 0 011-1z" stroke="currentColor" stroke-width="1.2" fill="none"/>';
|
|
btn.innerHTML = btn.innerHTML.replace('Saved', 'Save to Keepsakes');
|
|
} else {
|
|
icon.innerHTML = '<path d="M4 2h8a1 1 0 011 1v11l-5-3-5 3V3a1 1 0 011-1z" fill="currentColor"/>';
|
|
btn.innerHTML = btn.innerHTML.replace('Save to Keepsakes', 'Saved');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|