Initial commit: Kalei app — docs, mockups, logo, pitch deck
Complete project files including: - 73 polished HTML mockup screens (onboarding, turn, mirror, lens, gallery, you, ritual, spectrum, modals, guide) - Design system CSS with Inter font, jewel-tone palette, device frame scaling - Canonical 6-blade kaleidoscope logo (soft-elegance-final) - SVG asset library (fragments, icons, patterns, evidence wall, spectrum viz) - Product docs, brand guidelines, technical architecture, build phases - Pitch deck and cost projections - Logo mockup iterations and finalists Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
145
initial mockups/screens/turn/11-turn-input-active.html
Normal file
145
initial mockups/screens/turn/11-turn-input-active.html
Normal file
@@ -0,0 +1,145 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user