146 lines
5.3 KiB
HTML
146 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=390, initial-scale=1">
|
|
<title>Kalei — New Turn</title>
|
|
<link rel="stylesheet" href="../../assets/design-system.css">
|
|
<style>
|
|
.textarea-wrapper {
|
|
position: relative;
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.textarea-field.focused {
|
|
border-color: var(--amethyst);
|
|
box-shadow: 0 0 0 3px rgba(139,92,246,0.15), var(--glow-amethyst);
|
|
min-height: 160px;
|
|
font-size: 17px;
|
|
}
|
|
.char-count {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 12px;
|
|
font-size: 11px;
|
|
color: var(--faint-light);
|
|
}
|
|
.input-hint {
|
|
font-size: 12px;
|
|
color: var(--faint-light);
|
|
margin-bottom: var(--space-4);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.keyboard-sim {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 260px;
|
|
background: linear-gradient(to top, var(--deep-glass) 0%, transparent 100%);
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
}
|
|
.submit-area {
|
|
margin-top: var(--space-4);
|
|
position: relative;
|
|
z-index: 3;
|
|
}
|
|
.aura-input {
|
|
position: absolute;
|
|
top: 60px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 260px;
|
|
height: 260px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(139,92,246,0.14) 0%, rgba(59,130,246,0.04) 50%, transparent 70%);
|
|
filter: blur(50px);
|
|
animation: breathing 6s ease-in-out infinite;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
</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">New Turn</span>
|
|
<span class="nav-action"></span>
|
|
</div>
|
|
|
|
<div class="screen-content" style="padding-bottom: 20px; position: relative;">
|
|
<div class="aura-input"></div>
|
|
|
|
<div style="margin-top: var(--space-4); position: relative; z-index: 1;">
|
|
<div class="input-hint">
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
|
<path d="M7 1L11 7L7 13L3 7Z" fill="var(--amethyst)" opacity="0.7"/>
|
|
</svg>
|
|
Write freely — the Turn will find new angles
|
|
</div>
|
|
|
|
<div class="textarea-wrapper">
|
|
<textarea class="textarea-field focused" id="mainTextarea">I completely bombed my presentation today and everyone saw</textarea>
|
|
<span class="char-count" id="charCount">58 / 500</span>
|
|
</div>
|
|
|
|
<div class="submit-area">
|
|
<a href="12-turn-animation.html" class="btn btn-primary" style="text-decoration:none;">
|
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
<path d="M9 1.5L15 9L9 16.5L3 9Z" fill="white" opacity="0.85"/>
|
|
<path d="M9 1.5L15 9L9 9Z" fill="white" opacity="0.15"/>
|
|
</svg>
|
|
Turn the kaleidoscope
|
|
</a>
|
|
</div>
|
|
|
|
<div style="margin-top: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--deep-glass); border-radius: var(--radius-md); border: 1px solid var(--twilight);">
|
|
<div class="body-sm text-dim">Kalei will analyze your thought through 3 different cognitive lenses — Perspective Shift, Evidence Check, and Action Step — to reveal new angles on what you're feeling.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Keyboard simulation overlay -->
|
|
<div class="keyboard-sim"></div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
const textarea = document.getElementById('mainTextarea');
|
|
const charCount = document.getElementById('charCount');
|
|
textarea.addEventListener('input', () => {
|
|
charCount.textContent = textarea.value.length + ' / 500';
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|