339 lines
13 KiB
HTML
339 lines
13 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=390, initial-scale=1">
|
||
|
|
<title>Kalei — Guide Discovery Bridge</title>
|
||
|
|
<link rel="stylesheet" href="../../assets/design-system.css">
|
||
|
|
<style>
|
||
|
|
.screen-aura {
|
||
|
|
position: absolute;
|
||
|
|
top: 20%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
width: 280px;
|
||
|
|
height: 280px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: radial-gradient(circle, rgba(139,92,246,0.15) 0%, transparent 70%);
|
||
|
|
filter: blur(50px);
|
||
|
|
animation: breathing 6s ease-in-out infinite;
|
||
|
|
pointer-events: none;
|
||
|
|
z-index: 0;
|
||
|
|
}
|
||
|
|
@keyframes breathing {
|
||
|
|
0%, 100% { opacity: 0.6; transform: scale(1) translate(-50%, -50%); }
|
||
|
|
50% { opacity: 1; transform: scale(1.05) translate(-48%, -52%); }
|
||
|
|
}
|
||
|
|
@keyframes fadeIn {
|
||
|
|
from { opacity: 0; transform: translateY(8px); }
|
||
|
|
to { opacity: 1; transform: translateY(0); }
|
||
|
|
}
|
||
|
|
@keyframes slideDown {
|
||
|
|
from { opacity: 0; transform: translateY(-16px); }
|
||
|
|
to { opacity: 1; transform: translateY(0); }
|
||
|
|
}
|
||
|
|
/* Bridge card */
|
||
|
|
.bridge-card {
|
||
|
|
background: var(--kalei-navy);
|
||
|
|
border-radius: var(--radius-xl);
|
||
|
|
padding: var(--space-4);
|
||
|
|
margin-bottom: var(--space-4);
|
||
|
|
position: relative;
|
||
|
|
animation: slideDown 0.4s ease-out both;
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
.bridge-card::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
inset: -1px;
|
||
|
|
border-radius: 17px;
|
||
|
|
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
.bridge-card-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-bottom: var(--space-3);
|
||
|
|
}
|
||
|
|
.bridge-card-title-row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: var(--space-2);
|
||
|
|
}
|
||
|
|
.bridge-guide-icon {
|
||
|
|
width: 28px;
|
||
|
|
height: 28px;
|
||
|
|
border-radius: var(--radius-sm);
|
||
|
|
background: rgba(139,92,246,0.1);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
.bridge-dismiss {
|
||
|
|
width: 28px;
|
||
|
|
height: 28px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: var(--deep-glass);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
cursor: pointer;
|
||
|
|
border: none;
|
||
|
|
color: var(--dim-light);
|
||
|
|
transition: background 0.2s ease-out;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
.bridge-dismiss:hover { background: var(--twilight); }
|
||
|
|
.bridge-card-heading {
|
||
|
|
font-size: 15px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--pure-light);
|
||
|
|
margin-left: 36px;
|
||
|
|
margin-bottom: var(--space-2);
|
||
|
|
}
|
||
|
|
.bridge-card-body {
|
||
|
|
font-size: 14px;
|
||
|
|
color: var(--soft-light);
|
||
|
|
line-height: 1.6;
|
||
|
|
margin-bottom: var(--space-4);
|
||
|
|
}
|
||
|
|
.bridge-card-body strong {
|
||
|
|
color: var(--amber-light);
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
.bridge-actions {
|
||
|
|
display: flex;
|
||
|
|
gap: var(--space-2);
|
||
|
|
}
|
||
|
|
.bridge-btn-primary {
|
||
|
|
flex: 1;
|
||
|
|
height: 44px;
|
||
|
|
background: var(--amethyst);
|
||
|
|
color: var(--pure-light);
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 600;
|
||
|
|
border-radius: var(--radius-md);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
text-decoration: none;
|
||
|
|
box-shadow: 0 0 16px rgba(139,92,246,0.25);
|
||
|
|
transition: background 0.2s ease-out;
|
||
|
|
}
|
||
|
|
.bridge-btn-primary:hover { background: var(--amethyst-light); }
|
||
|
|
.bridge-btn-ghost {
|
||
|
|
flex: 1;
|
||
|
|
height: 44px;
|
||
|
|
background: transparent;
|
||
|
|
color: var(--dim-light);
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 500;
|
||
|
|
border-radius: var(--radius-md);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
text-decoration: none;
|
||
|
|
border: 1px solid var(--twilight);
|
||
|
|
transition: color 0.2s ease-out, border-color 0.2s ease-out;
|
||
|
|
}
|
||
|
|
.bridge-btn-ghost:hover { color: var(--soft-light); border-color: rgba(255,255,255,0.15); }
|
||
|
|
|
||
|
|
/* Turn Home content below the bridge (dimmed) */
|
||
|
|
.home-greeting {
|
||
|
|
padding: var(--space-4) 0 var(--space-3);
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
.textarea-wrapper {
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
margin-bottom: var(--space-4);
|
||
|
|
}
|
||
|
|
.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;
|
||
|
|
opacity: 0.65;
|
||
|
|
}
|
||
|
|
.turn-card-thought {
|
||
|
|
font-size: 14px;
|
||
|
|
color: var(--soft-light);
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
margin-bottom: 3px;
|
||
|
|
}
|
||
|
|
.turn-card-date {
|
||
|
|
font-size: 11px;
|
||
|
|
color: var(--faint-light);
|
||
|
|
}
|
||
|
|
.mini-kaleido-wrap {
|
||
|
|
width: 44px;
|
||
|
|
height: 44px;
|
||
|
|
border-radius: var(--radius-sm);
|
||
|
|
overflow: hidden;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
.section-header-row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-bottom: var(--space-3);
|
||
|
|
}
|
||
|
|
.section-title-label {
|
||
|
|
font-size: 11px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--dim-light);
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.06em;
|
||
|
|
}
|
||
|
|
.turn-btn-wrapper {
|
||
|
|
position: sticky;
|
||
|
|
bottom: calc(var(--tab-bar-height) + 12px);
|
||
|
|
z-index: 5;
|
||
|
|
padding: var(--space-2) 0 0;
|
||
|
|
}
|
||
|
|
.content-pad { padding-bottom: 80px; }
|
||
|
|
</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 content-pad">
|
||
|
|
<div class="screen-aura"></div>
|
||
|
|
|
||
|
|
<!-- Discovery bridge card at top -->
|
||
|
|
<div class="bridge-card" style="margin-top: var(--space-4);">
|
||
|
|
<div class="bridge-card-header">
|
||
|
|
<div class="bridge-card-title-row">
|
||
|
|
<div class="bridge-guide-icon">◇</div>
|
||
|
|
</div>
|
||
|
|
<button class="bridge-dismiss" id="dismissBtn" aria-label="Dismiss">
|
||
|
|
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||
|
|
<path d="M2 2L10 10M10 2L2 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="bridge-card-heading">Work stress keeps coming up</div>
|
||
|
|
<div class="bridge-card-body">
|
||
|
|
I noticed work appeared in <strong>4 Mirror sessions</strong> and <strong>2 Turns</strong> this week — mostly around pressure to perform and feeling unseen. That energy could go somewhere. Want to shape it into a goal?
|
||
|
|
</div>
|
||
|
|
<div class="bridge-actions">
|
||
|
|
<a class="bridge-btn-primary" href="../lens/20-lens-dashboard.html">Open Lens</a>
|
||
|
|
<a class="bridge-btn-ghost" href="../turn/10-turn-home.html">Just noticing</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Turn Home content (dimmed, in background) -->
|
||
|
|
<div class="home-greeting">
|
||
|
|
<div class="heading text-pure">Good morning, Alex</div>
|
||
|
|
<div class="body mt-1" style="color: var(--dim-light);">What's weighing on you?</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="textarea-wrapper">
|
||
|
|
<textarea class="textarea-field" style="min-height:100px; font-size:16px;" placeholder="Something happened today..."></textarea>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section-header-row">
|
||
|
|
<span class="section-title-label">Recent Turns</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Dimmed turn cards — canonical data, correct dates -->
|
||
|
|
<a class="turn-card" href="../turn/13-turn-results.html">
|
||
|
|
<div class="mini-kaleido-wrap">
|
||
|
|
<img src="../../assets/kalei-logo.svg" width="48" height="48" alt="Kalei">
|
||
|
|
</div>
|
||
|
|
<div style="flex:1; overflow:hidden;">
|
||
|
|
<div class="turn-card-thought">"I completely bombed my presentation today and everyone saw"</div>
|
||
|
|
<div class="turn-card-date">Today · Feb 22</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a class="turn-card" href="../turn/13-turn-results.html">
|
||
|
|
<div class="mini-kaleido-wrap">
|
||
|
|
<img src="../../assets/kalei-logo.svg" width="48" height="48" alt="Kalei">
|
||
|
|
</div>
|
||
|
|
<div style="flex:1; overflow:hidden;">
|
||
|
|
<div class="turn-card-thought">"Nobody at work actually cares about my ideas"</div>
|
||
|
|
<div class="turn-card-date">Yesterday · Feb 21</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<div class="turn-btn-wrapper">
|
||
|
|
<a href="../turn/11-turn-input-active.html" class="btn btn-primary" style="text-decoration:none;">
|
||
|
|
<svg width="18" height="18" viewBox="-12 -12 24 24" fill="none">
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="db-btnF" x1="0" y1="0" x2="0" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#C4B5FD"/>
|
||
|
|
<stop offset="100%" stop-color="#7C3AED"/>
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#db-btnF)" opacity="0.9"/>
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
|
|
</svg>
|
||
|
|
Turn the kaleidoscope
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="tab-bar">
|
||
|
|
<a class="tab-item active" data-tab="turn" href="../turn/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>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.getElementById('dismissBtn').addEventListener('click', function() {
|
||
|
|
const card = this.closest('.bridge-card');
|
||
|
|
card.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out, max-height 0.4s ease-out, margin 0.4s ease-out, padding 0.4s ease-out';
|
||
|
|
card.style.opacity = '0';
|
||
|
|
card.style.transform = 'translateY(-8px)';
|
||
|
|
card.style.maxHeight = '0';
|
||
|
|
card.style.overflow = 'hidden';
|
||
|
|
card.style.marginBottom = '0';
|
||
|
|
card.style.padding = '0';
|
||
|
|
document.querySelectorAll('.turn-card').forEach(c => c.style.opacity = '1');
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|