243 lines
11 KiB
HTML
243 lines
11 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=390, initial-scale=1">
|
||
|
|
<title>Kalei — Turn Home</title>
|
||
|
|
<link rel="stylesheet" href="../../assets/design-system.css">
|
||
|
|
<style>
|
||
|
|
.screen-aura {
|
||
|
|
position: absolute;
|
||
|
|
top: 18%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
width: 320px;
|
||
|
|
height: 320px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: radial-gradient(circle, rgba(139,92,246,0.16) 0%, rgba(59,130,246,0.05) 50%, transparent 70%);
|
||
|
|
filter: blur(60px);
|
||
|
|
animation: breathing 6s ease-in-out infinite;
|
||
|
|
pointer-events: none;
|
||
|
|
z-index: 0;
|
||
|
|
}
|
||
|
|
.home-greeting {
|
||
|
|
padding: var(--space-5) 0 var(--space-4);
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
.textarea-wrapper {
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
margin-bottom: var(--space-5);
|
||
|
|
}
|
||
|
|
.textarea-field.home-textarea {
|
||
|
|
min-height: 100px;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
.turn-btn-wrapper {
|
||
|
|
position: sticky;
|
||
|
|
bottom: calc(var(--tab-bar-height) + 12px);
|
||
|
|
z-index: 5;
|
||
|
|
padding: 0 0 var(--space-1);
|
||
|
|
}
|
||
|
|
.turn-card {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: var(--space-3);
|
||
|
|
background: var(--kalei-navy);
|
||
|
|
border: 1px solid var(--twilight);
|
||
|
|
border-radius: var(--radius-lg);
|
||
|
|
padding: var(--space-3) var(--space-4);
|
||
|
|
margin-bottom: var(--space-2);
|
||
|
|
cursor: pointer;
|
||
|
|
text-decoration: none;
|
||
|
|
transition: background 0.2s ease-out, border-color 0.2s ease-out;
|
||
|
|
}
|
||
|
|
.turn-card:hover { background: var(--deep-glass); border-color: rgba(139,92,246,0.3); }
|
||
|
|
.turn-card-content { flex: 1; overflow: hidden; }
|
||
|
|
.turn-card-thought {
|
||
|
|
font-size: 14px;
|
||
|
|
color: var(--soft-light);
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
margin-bottom: 3px;
|
||
|
|
}
|
||
|
|
.turn-card-meta {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: var(--space-2);
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
.turn-card-date {
|
||
|
|
font-size: 11px;
|
||
|
|
color: var(--faint-light);
|
||
|
|
}
|
||
|
|
.section-header-row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-bottom: var(--space-3);
|
||
|
|
margin-top: var(--space-5);
|
||
|
|
}
|
||
|
|
.section-title-label {
|
||
|
|
font-size: 11px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--dim-light);
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.06em;
|
||
|
|
}
|
||
|
|
.section-link {
|
||
|
|
font-size: 13px;
|
||
|
|
color: var(--amethyst-light);
|
||
|
|
text-decoration: none;
|
||
|
|
transition: color 0.2s ease-out;
|
||
|
|
}
|
||
|
|
.section-link:hover { color: var(--amethyst); }
|
||
|
|
.content-pad {
|
||
|
|
padding-bottom: 80px;
|
||
|
|
}
|
||
|
|
.mini-kaleido-wrap {
|
||
|
|
width: 44px;
|
||
|
|
height: 44px;
|
||
|
|
border-radius: var(--radius-sm);
|
||
|
|
overflow: hidden;
|
||
|
|
flex-shrink: 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="screen-content content-pad">
|
||
|
|
<div class="screen-aura"></div>
|
||
|
|
|
||
|
|
<div class="home-greeting">
|
||
|
|
<div class="heading text-pure">Good morning, Alex</div>
|
||
|
|
<div class="body mt-1" style="color: var(--dim-light);">Day 14 in a row. What's on your mind?</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="textarea-wrapper">
|
||
|
|
<textarea class="textarea-field home-textarea" placeholder="Something happened today..."></textarea>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section-header-row">
|
||
|
|
<span class="section-title-label">Recent Turns</span>
|
||
|
|
<a class="section-link" href="14-turn-history.html">See all</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Turn History Card 1 — Turn Pattern (amethyst 6-blade from patterns-kaleidoscope.svg) -->
|
||
|
|
<a class="turn-card" href="13-turn-results.html">
|
||
|
|
<div class="mini-kaleido-wrap">
|
||
|
|
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: var(--radius-sm);">
|
||
|
|
</div>
|
||
|
|
<div class="turn-card-content">
|
||
|
|
<div class="turn-card-thought">I completely bombed my presentation today and everyone saw</div>
|
||
|
|
<div class="turn-card-meta">
|
||
|
|
<span class="turn-card-date">Today, 8:15 AM</span>
|
||
|
|
<span class="chip chip-amber" style="height:20px;font-size:10px;padding:0 8px;">Catastrophizing</span>
|
||
|
|
<span class="chip chip-amber" style="height:20px;font-size:10px;padding:0 8px;">Overgeneralization</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||
|
|
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Turn History Card 2 — Sapphire tinted 6-blade -->
|
||
|
|
<a class="turn-card" href="13-turn-results.html">
|
||
|
|
<div class="mini-kaleido-wrap">
|
||
|
|
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: var(--radius-sm);">
|
||
|
|
</div>
|
||
|
|
<div class="turn-card-content">
|
||
|
|
<div class="turn-card-thought">Nobody at work actually cares about my ideas</div>
|
||
|
|
<div class="turn-card-meta">
|
||
|
|
<span class="turn-card-date">Yesterday, Feb 21</span>
|
||
|
|
<span class="chip chip-amber" style="height:20px;font-size:10px;padding:0 8px;">Mind Reading</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||
|
|
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Turn History Card 3 — Emerald tinted 6-blade -->
|
||
|
|
<a class="turn-card" href="13-turn-results.html">
|
||
|
|
<div class="mini-kaleido-wrap">
|
||
|
|
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: var(--radius-sm);">
|
||
|
|
</div>
|
||
|
|
<div class="turn-card-content">
|
||
|
|
<div class="turn-card-thought">I should be further along in my career by now</div>
|
||
|
|
<div class="turn-card-meta">
|
||
|
|
<span class="turn-card-date">Feb 20</span>
|
||
|
|
<span class="chip chip-amber" style="height:20px;font-size:10px;padding:0 8px;">Should Statements</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||
|
|
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<!-- Floating CTA -->
|
||
|
|
<div class="turn-btn-wrapper">
|
||
|
|
<a href="11-turn-input-active.html" class="btn btn-primary" style="text-decoration:none;">
|
||
|
|
<!-- Fragment MD from fragment-icons.svg, amethyst, inline -->
|
||
|
|
<svg width="18" height="18" viewBox="-12 -12 24 24" fill="none">
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="s10-btnFrag" x1="0" y1="0" x2="0" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#C4B5FD"/>
|
||
|
|
<stop offset="100%" stop-color="#7C3AED"/>
|
||
|
|
</linearGradient>
|
||
|
|
<filter id="s10-btnGlow" x="-50%" y="-50%" width="200%" height="200%">
|
||
|
|
<feGaussianBlur stdDeviation="1.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||
|
|
</filter>
|
||
|
|
</defs>
|
||
|
|
<g filter="url(#s10-btnGlow)">
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#s10-btnFrag)" opacity="0.9"/>
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
|
|
<path d="M 0,-12 L -12,0 L 0,0 Z" fill="#fff" opacity="0.1"/>
|
||
|
|
<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>
|
||
|
|
Turn the kaleidoscope
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="tab-bar">
|
||
|
|
<a class="tab-item active" data-tab="turn" href="10-turn-home.html">
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 2L20 12L12 22L4 12Z" fill="currentColor" opacity="0.9"/><path d="M12 2L20 12L12 12Z" fill="white" opacity="0.15"/></svg>
|
||
|
|
<span class="tab-label">Turn</span>
|
||
|
|
</a>
|
||
|
|
<a class="tab-item inactive" data-tab="mirror" href="../mirror/15-mirror-home.html">
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 3L16 8L18 14L12 19L6 14L8 8Z" stroke="currentColor" fill="none" stroke-width="1.2"/></svg>
|
||
|
|
<span class="tab-label">Mirror</span>
|
||
|
|
</a>
|
||
|
|
<a class="tab-item inactive" data-tab="lens" href="../lens/20-lens-dashboard.html">
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="currentColor" fill="none" stroke-width="1.2"/><circle cx="12" cy="12" r="4" stroke="currentColor" fill="none" stroke-width="0.8"/></svg>
|
||
|
|
<span class="tab-label">Lens</span>
|
||
|
|
</a>
|
||
|
|
<a class="tab-item inactive" data-tab="gallery" href="../gallery/31-gallery-all.html">
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24"><rect x="3" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/></svg>
|
||
|
|
<span class="tab-label">Gallery</span>
|
||
|
|
</a>
|
||
|
|
<a class="tab-item inactive" data-tab="you" href="../you/35-you-profile.html">
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="9" r="4" stroke="currentColor" fill="none" stroke-width="1.2"/><path d="M4 20C4 16 8 14 12 14C16 14 20 16 20 20" stroke="currentColor" fill="none" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||
|
|
<span class="tab-label">You</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|