225 lines
8.1 KiB
HTML
225 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=390, initial-scale=1">
|
||
<title>Kalei — Your First Turn</title>
|
||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||
<style>
|
||
.screen-content {
|
||
padding: var(--space-6) var(--space-4) 120px;
|
||
position: relative;
|
||
}
|
||
|
||
.textarea-wrap {
|
||
position: relative;
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.textarea-aura {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 340px;
|
||
height: 240px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(ellipse, rgba(139,92,246,0.12) 0%, transparent 70%);
|
||
filter: blur(40px);
|
||
animation: breathing 6s ease-in-out infinite;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
.thought-textarea {
|
||
position: relative;
|
||
z-index: 1;
|
||
width: 100%;
|
||
height: 200px;
|
||
background: var(--deep-glass);
|
||
border: 1px solid var(--twilight);
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--space-5);
|
||
font-family: var(--font-primary);
|
||
font-size: 17px;
|
||
line-height: 1.6;
|
||
color: var(--pure-light);
|
||
outline: none;
|
||
resize: none;
|
||
transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
|
||
}
|
||
|
||
.thought-textarea::placeholder { color: var(--faint-light); }
|
||
|
||
.thought-textarea:focus {
|
||
border-color: var(--amethyst);
|
||
box-shadow: 0 0 0 1px rgba(139,92,246,0.2), 0 0 20px rgba(139,92,246,0.3);
|
||
}
|
||
|
||
.fragment-hint {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
margin-bottom: var(--space-6);
|
||
}
|
||
|
||
.hint-icon {
|
||
flex-shrink: 0;
|
||
animation: hintIconPulse 2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes hintIconPulse {
|
||
0%, 100% { opacity: 0.75; transform: scale(1); }
|
||
50% { opacity: 1; transform: scale(1.12); }
|
||
}
|
||
|
||
.prompts-label {
|
||
color: var(--faint-light);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
|
||
.prompt-chips {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.prompt-chip {
|
||
padding: var(--space-1) var(--space-3);
|
||
background: var(--deep-glass);
|
||
border: 1px solid var(--twilight);
|
||
border-radius: var(--radius-full);
|
||
color: var(--dim-light);
|
||
cursor: pointer;
|
||
transition: all 0.2s ease-out;
|
||
}
|
||
|
||
.prompt-chip:hover {
|
||
border-color: var(--amethyst);
|
||
background: rgba(139,92,246,0.08);
|
||
color: var(--amethyst-light);
|
||
}
|
||
|
||
.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) 70%, transparent);
|
||
}
|
||
|
||
.btn-turn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--space-3);
|
||
height: 56px;
|
||
width: 100%;
|
||
background: var(--amethyst);
|
||
color: var(--pure-light);
|
||
font-family: var(--font-primary);
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
border-radius: var(--radius-xl);
|
||
text-decoration: none;
|
||
box-shadow: 0 0 24px rgba(139,92,246,0.35);
|
||
transition: all 0.2s ease-out;
|
||
}
|
||
|
||
.btn-turn:hover {
|
||
background: var(--amethyst-light);
|
||
box-shadow: 0 0 32px rgba(139,92,246,0.5);
|
||
}
|
||
</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">
|
||
<h1 class="display-md text-pure" style="margin-bottom: var(--space-2);">What's the thought?</h1>
|
||
<p class="body text-dim" style="margin-bottom: var(--space-5);">Write it exactly as it sounds in your head — raw, unfiltered, even a little ugly. Kalei works better with the real version.</p>
|
||
|
||
<div class="textarea-wrap">
|
||
<div class="textarea-aura"></div>
|
||
<textarea class="thought-textarea" placeholder="The thought that keeps running on repeat..."></textarea>
|
||
</div>
|
||
|
||
<div class="fragment-hint">
|
||
<!--
|
||
Hint icon — extracted from fragment-icons.svg → Amethyst XS (radius 6)
|
||
Centred at 0,0 in 14×14 viewport (translate 7,7)
|
||
-->
|
||
<svg class="hint-icon" width="14" height="14" viewBox="0 0 14 14">
|
||
<defs>
|
||
<linearGradient id="s08-hintGrad" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||
<stop offset="100%" stop-color="#7C3AED"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<g transform="translate(7,7)">
|
||
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#s08-hintGrad)" opacity="0.75"/>
|
||
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
<circle cx="-1.5" cy="-1.5" r="0.8" fill="#fff" opacity="0.3"/>
|
||
</g>
|
||
</svg>
|
||
<span class="body-sm text-faint" style="font-style: italic;">The Turn will show you new angles on this thought</span>
|
||
</div>
|
||
|
||
<div>
|
||
<p class="body-sm prompts-label">Try a prompt</p>
|
||
<div class="prompt-chips">
|
||
<div class="prompt-chip body-sm" onclick="usePrompt('work')">Something at work</div>
|
||
<div class="prompt-chip body-sm" onclick="usePrompt('relationship')">A relationship</div>
|
||
<div class="prompt-chip body-sm" onclick="usePrompt('self')">Something about myself</div>
|
||
<div class="prompt-chip body-sm" onclick="usePrompt('mistake')">A recent mistake</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cta-bar">
|
||
<a href="09-welcome-complete.html" class="btn-turn">
|
||
<!--
|
||
Button icon — extracted from fragment-icons.svg → Amethyst SM (radius 8)
|
||
Centred at 0,0 in 20×20 viewport (translate 10,10), white fill (on coloured button bg)
|
||
-->
|
||
<svg width="20" height="20" viewBox="0 0 20 20">
|
||
<g transform="translate(10,10)">
|
||
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="white" opacity="0.35"/>
|
||
<path d="M 0,-8 L 8,0 L 0,0 Z" fill="white" opacity="0.2"/>
|
||
<line x1="0" y1="-8" x2="0" y2="8" stroke="#fff" stroke-width="0.5" opacity="0.3"/>
|
||
<circle cx="-2" cy="-2" r="1" fill="#fff" opacity="0.5"/>
|
||
</g>
|
||
</svg>
|
||
Turn the kaleidoscope
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
var prompts = {
|
||
work: "I feel like I'm constantly behind and my team is starting to notice how much I'm struggling to keep up.",
|
||
relationship: "I keep pulling away from people I care about — I don't know why I do it, but I always end up alone.",
|
||
self: "I don't deserve the things I've been given. It's only a matter of time before people figure out I'm not actually that capable.",
|
||
mistake: "I said something really hurtful and now I can't stop replaying the look on their face. I ruined everything."
|
||
};
|
||
|
||
function usePrompt(key) {
|
||
var textarea = document.querySelector('.thought-textarea');
|
||
textarea.value = prompts[key];
|
||
textarea.focus();
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|