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>
|