299 lines
13 KiB
HTML
299 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 Reinforcement 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(16,185,129,0.12) 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 slideDown {
|
|||
|
|
from { opacity: 0; transform: translateY(-16px); }
|
|||
|
|
to { opacity: 1; transform: translateY(0); }
|
|||
|
|
}
|
|||
|
|
.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-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;
|
|||
|
|
}
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
.bridge-dismiss:hover { background: var(--twilight); }
|
|||
|
|
.bridge-card-heading {
|
|||
|
|
font-size: 15px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--pure-light);
|
|||
|
|
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(--amethyst-light);
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
.bridge-card-body em {
|
|||
|
|
color: var(--emerald-light);
|
|||
|
|
font-style: italic;
|
|||
|
|
}
|
|||
|
|
.bridge-actions {
|
|||
|
|
display: flex;
|
|||
|
|
gap: var(--space-2);
|
|||
|
|
}
|
|||
|
|
.bridge-btn-primary {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 44px;
|
|||
|
|
background: var(--emerald);
|
|||
|
|
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(16,185,129,0.25);
|
|||
|
|
transition: background 0.2s ease-out;
|
|||
|
|
}
|
|||
|
|
.bridge-btn-primary:hover { background: var(--emerald-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); }
|
|||
|
|
/* Lens dashboard elements (background, dimmed) */
|
|||
|
|
.lens-heading { color: var(--emerald-light); margin-bottom: 4px; }
|
|||
|
|
.goal-card {
|
|||
|
|
background: var(--kalei-navy);
|
|||
|
|
border: 1px solid var(--twilight);
|
|||
|
|
border-radius: var(--radius-xl);
|
|||
|
|
padding: var(--space-4);
|
|||
|
|
margin-bottom: var(--space-3);
|
|||
|
|
display: flex;
|
|||
|
|
gap: var(--space-3);
|
|||
|
|
align-items: center;
|
|||
|
|
text-decoration: none;
|
|||
|
|
opacity: 0.6;
|
|||
|
|
}
|
|||
|
|
.goal-ring-wrap {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
position: relative;
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 64px;
|
|||
|
|
height: 64px;
|
|||
|
|
}
|
|||
|
|
.goal-ring-wrap svg { transform: rotate(-90deg); position: absolute; }
|
|||
|
|
.goal-ring-pct { font-size: 14px; font-weight: 700; color: var(--pure-light); position: relative; z-index: 1; }
|
|||
|
|
.goal-info { flex: 1; min-width: 0; }
|
|||
|
|
.goal-title { font-size: 15px; font-weight: 600; color: var(--pure-light); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|||
|
|
.goal-meta { font-size: 12px; color: var(--dim-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|||
|
|
</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" style="padding-top: var(--space-4); padding-bottom: 100px;">
|
|||
|
|
<div class="screen-aura"></div>
|
|||
|
|
<div style="position: relative; z-index: 1;">
|
|||
|
|
|
|||
|
|
<!-- Reinforcement bridge card at top -->
|
|||
|
|
<div class="bridge-card">
|
|||
|
|
<div class="bridge-card-header">
|
|||
|
|
<div class="bridge-guide-icon">◇</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">Your Turn connects to something you're building</div>
|
|||
|
|
<div class="bridge-card-body">
|
|||
|
|
Your Tuesday reframe — "I pushed back and held my ground" — is exactly the kind of evidence your goal <em>"Present with confidence"</em> is built on. You're <strong>65% there</strong>, and this week added real proof.
|
|||
|
|
</div>
|
|||
|
|
<div class="bridge-actions">
|
|||
|
|
<a class="bridge-btn-primary" href="../lens/27-lens-goal-detail.html">See the progress</a>
|
|||
|
|
<a class="bridge-btn-ghost" href="../lens/20-lens-dashboard.html">Not now</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Lens dashboard content (dimmed background) -->
|
|||
|
|
<div class="heading lens-heading">Your Lens</div>
|
|||
|
|
<div class="body-sm text-dim" style="margin-bottom: var(--space-4);">3 active goals · 47 evidence tiles</div>
|
|||
|
|
|
|||
|
|
<!-- Goal 1: Present with confidence (emerald, 65%) -->
|
|||
|
|
<a class="goal-card" href="../lens/27-lens-goal-detail.html">
|
|||
|
|
<div class="goal-ring-wrap">
|
|||
|
|
<svg width="64" height="64" viewBox="0 0 64 64">
|
|||
|
|
<defs>
|
|||
|
|
<linearGradient id="rb-grEm" x1="0" y1="0" x2="0" y2="1">
|
|||
|
|
<stop offset="0%" stop-color="#6EE7B7"/>
|
|||
|
|
<stop offset="100%" stop-color="#059669"/>
|
|||
|
|
</linearGradient>
|
|||
|
|
</defs>
|
|||
|
|
<circle cx="32" cy="32" r="27" fill="none" stroke="var(--twilight)" stroke-width="3.5"/>
|
|||
|
|
<!-- 65% of 2π×27 ≈ 169.6: 65% = 110.2, remainder = 59.4 -->
|
|||
|
|
<circle cx="32" cy="32" r="27" fill="none" stroke="url(#rb-grEm)" stroke-width="3.5"
|
|||
|
|
stroke-dasharray="110.2 59.4" stroke-linecap="round"/>
|
|||
|
|
</svg>
|
|||
|
|
<span class="goal-ring-pct">65%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="goal-info">
|
|||
|
|
<div class="goal-title">Present with confidence</div>
|
|||
|
|
<div class="goal-meta">Started Feb 5 · 2 new tiles this week</div>
|
|||
|
|
</div>
|
|||
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="color: var(--faint-light); flex-shrink:0;">
|
|||
|
|
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|||
|
|
</svg>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<!-- Goal 2: Set boundaries at work (sapphire, 40%) -->
|
|||
|
|
<a class="goal-card" href="../lens/27-lens-goal-detail.html">
|
|||
|
|
<div class="goal-ring-wrap">
|
|||
|
|
<svg width="64" height="64" viewBox="0 0 64 64">
|
|||
|
|
<defs>
|
|||
|
|
<linearGradient id="rb-grSa" x1="0" y1="0" x2="0" y2="1">
|
|||
|
|
<stop offset="0%" stop-color="#93C5FD"/>
|
|||
|
|
<stop offset="100%" stop-color="#1D4ED8"/>
|
|||
|
|
</linearGradient>
|
|||
|
|
</defs>
|
|||
|
|
<circle cx="32" cy="32" r="27" fill="none" stroke="var(--twilight)" stroke-width="3.5"/>
|
|||
|
|
<!-- 40% of 169.6 = 67.8, remainder = 101.8 -->
|
|||
|
|
<circle cx="32" cy="32" r="27" fill="none" stroke="url(#rb-grSa)" stroke-width="3.5"
|
|||
|
|
stroke-dasharray="67.8 101.8" stroke-linecap="round"/>
|
|||
|
|
</svg>
|
|||
|
|
<span class="goal-ring-pct">40%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="goal-info">
|
|||
|
|
<div class="goal-title">Set boundaries at work</div>
|
|||
|
|
<div class="goal-meta">Started Feb 10</div>
|
|||
|
|
</div>
|
|||
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="color: var(--faint-light); flex-shrink:0;">
|
|||
|
|
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|||
|
|
</svg>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="tab-bar">
|
|||
|
|
<a class="tab-item inactive" 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 active" 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('.goal-card').forEach(c => c.style.opacity = '1');
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|