243 lines
10 KiB
HTML
243 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=390, initial-scale=1">
|
||
<title>Kalei — Turn Demo</title>
|
||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||
<style>
|
||
.screen-content {
|
||
padding: var(--space-5) var(--space-4) 100px;
|
||
}
|
||
|
||
.thought-card {
|
||
background: var(--deep-glass);
|
||
border: 1px solid var(--twilight);
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--space-4) var(--space-5);
|
||
margin-bottom: var(--space-5);
|
||
transition: opacity 0.3s ease-out, transform 0.3s ease-out;
|
||
}
|
||
|
||
.thought-card.collapsing {
|
||
animation: collapseCard 0.5s ease forwards;
|
||
}
|
||
|
||
@keyframes collapseCard {
|
||
0% { opacity: 1; transform: scale(1); }
|
||
100% { opacity: 0; transform: scale(0.85) translateY(-10px); }
|
||
}
|
||
|
||
.animation-stage {
|
||
height: 110px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
margin-bottom: var(--space-5);
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.animation-stage.visible { opacity: 1; }
|
||
|
||
.turn-fragment {
|
||
position: absolute;
|
||
opacity: 0;
|
||
}
|
||
|
||
.turn-fragment.f1 { animation: fragmentF1 1.2s ease-out 0.1s forwards; }
|
||
.turn-fragment.f2 { animation: fragmentF2 1.2s ease-out 0.2s forwards; }
|
||
.turn-fragment.f3 { animation: fragmentF3 1.2s ease-out 0.3s forwards; }
|
||
|
||
@keyframes fragmentF1 {
|
||
0% { opacity: 0; transform: scale(0.2); }
|
||
40% { opacity: 1; transform: scale(1.3) translateX(-50px) translateY(-20px); }
|
||
100% { opacity: 1; transform: scale(1) translateX(-55px) translateY(-10px); }
|
||
}
|
||
@keyframes fragmentF2 {
|
||
0% { opacity: 0; transform: scale(0.2); }
|
||
40% { opacity: 1; transform: scale(1.3) translateY(-40px); }
|
||
100% { opacity: 1; transform: scale(1) translateY(-15px); }
|
||
}
|
||
@keyframes fragmentF3 {
|
||
0% { opacity: 0; transform: scale(0.2); }
|
||
40% { opacity: 1; transform: scale(1.3) translateX(50px) translateY(-20px); }
|
||
100% { opacity: 1; transform: scale(1) translateX(55px) translateY(-10px); }
|
||
}
|
||
|
||
.reframes-area {
|
||
opacity: 0;
|
||
transform: translateY(12px);
|
||
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
|
||
}
|
||
|
||
.reframes-area.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.distortion-row {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
margin-bottom: var(--space-3);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.cta-bar {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: var(--space-4) var(--space-4) var(--space-6);
|
||
background: linear-gradient(to top, var(--void) 60%, transparent);
|
||
}
|
||
</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">
|
||
<p class="label text-dim" style="margin-bottom: var(--space-3);">Watch the Turn in action</p>
|
||
|
||
<div class="thought-card" id="thoughtCard">
|
||
<p class="body-lg text-soft" style="font-style: italic;">"I completely bombed my presentation today and everyone saw how bad it was."</p>
|
||
</div>
|
||
|
||
<!--
|
||
Turn animation fragments — extracted from fragment-icons.svg
|
||
MD size (radius 12), centred at 0,0 in 28×28 viewport (translate 14,14)
|
||
Three jewel colors: Amethyst (f1), Sapphire (f2), Emerald (f3)
|
||
Gradient IDs prefixed s04- to avoid conflicts
|
||
-->
|
||
<div class="animation-stage" id="animStage">
|
||
|
||
<!-- Fragment 1 — Amethyst MD (from fragment-icons.svg Amethyst MD) -->
|
||
<div class="turn-fragment f1">
|
||
<svg width="28" height="28" viewBox="0 0 28 28">
|
||
<defs>
|
||
<linearGradient id="s04-grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||
<stop offset="100%" stop-color="#7C3AED"/>
|
||
</linearGradient>
|
||
<filter id="s04-glowMdA" x="-50%" y="-50%" width="200%" height="200%">
|
||
<feGaussianBlur stdDeviation="2.5" result="b"/>
|
||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||
</filter>
|
||
</defs>
|
||
<g transform="translate(14,14)" filter="url(#s04-glowMdA)">
|
||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#s04-grAmethyst)" opacity="0.9"/>
|
||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- Fragment 2 — Sapphire MD (from fragment-icons.svg Sapphire MD) -->
|
||
<div class="turn-fragment f2">
|
||
<svg width="28" height="28" viewBox="0 0 28 28">
|
||
<defs>
|
||
<linearGradient id="s04-grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#93C5FD"/>
|
||
<stop offset="100%" stop-color="#1D4ED8"/>
|
||
</linearGradient>
|
||
<filter id="s04-glowMdB" x="-50%" y="-50%" width="200%" height="200%">
|
||
<feGaussianBlur stdDeviation="2.5" result="b"/>
|
||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||
</filter>
|
||
</defs>
|
||
<g transform="translate(14,14)" filter="url(#s04-glowMdB)">
|
||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#s04-grSapphire)" opacity="0.9"/>
|
||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- Fragment 3 — Emerald MD (from fragment-icons.svg Emerald MD) -->
|
||
<div class="turn-fragment f3">
|
||
<svg width="28" height="28" viewBox="0 0 28 28">
|
||
<defs>
|
||
<linearGradient id="s04-grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||
<stop offset="100%" stop-color="#047857"/>
|
||
</linearGradient>
|
||
<filter id="s04-glowMdC" x="-50%" y="-50%" width="200%" height="200%">
|
||
<feGaussianBlur stdDeviation="2.5" result="b"/>
|
||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||
</filter>
|
||
</defs>
|
||
<g transform="translate(14,14)" filter="url(#s04-glowMdC)">
|
||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#s04-grEmerald)" opacity="0.9"/>
|
||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="reframes-area" id="reframesArea">
|
||
<div class="distortion-row">
|
||
<span class="chip chip-amber">Catastrophizing</span>
|
||
<span class="chip chip-amber">Overgeneralization</span>
|
||
</div>
|
||
|
||
<p class="label text-dim" style="margin-bottom: var(--space-3);">Three new angles</p>
|
||
|
||
<div class="reframe-block amethyst">
|
||
<div class="reframe-label">Perspective Shift</div>
|
||
<div class="reframe-text">One rough presentation doesn't define your skills. Every speaker — even the most experienced — has moments that don't land. This is one data point, not your whole story.</div>
|
||
</div>
|
||
<div class="reframe-block sapphire">
|
||
<div class="reframe-label">Evidence Check</div>
|
||
<div class="reframe-text">Think about the last three times you communicated something clearly and well. Those moments exist too. Your brain is amplifying this one and filtering the others out.</div>
|
||
</div>
|
||
<div class="reframe-block emerald">
|
||
<div class="reframe-label">Action Step</div>
|
||
<div class="reframe-text">Write down one specific thing that actually went okay in that presentation — even something small. Then name one thing to prepare differently next time. That's how you close the loop.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cta-bar">
|
||
<a href="05-style-selection.html" class="btn btn-primary" id="ctaBtn" style="opacity:0; transition:opacity 0.5s ease; text-decoration:none;">
|
||
That's the Turn
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
setTimeout(function() {
|
||
var thoughtCard = document.getElementById('thoughtCard');
|
||
var animStage = document.getElementById('animStage');
|
||
var reframesArea = document.getElementById('reframesArea');
|
||
var ctaBtn = document.getElementById('ctaBtn');
|
||
|
||
thoughtCard.classList.add('collapsing');
|
||
|
||
setTimeout(function() {
|
||
thoughtCard.style.display = 'none';
|
||
animStage.classList.add('visible');
|
||
}, 500);
|
||
|
||
setTimeout(function() {
|
||
animStage.style.display = 'none';
|
||
reframesArea.classList.add('visible');
|
||
ctaBtn.style.opacity = '1';
|
||
}, 2000);
|
||
}, 1000);
|
||
</script>
|
||
</body>
|
||
</html>
|