253 lines
8.9 KiB
HTML
253 lines
8.9 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=390, initial-scale=1">
|
|||
|
|
<title>Kalei — Check-In Summary</title>
|
|||
|
|
<link rel="stylesheet" href="../../assets/design-system.css">
|
|||
|
|
<style>
|
|||
|
|
@keyframes breathing {
|
|||
|
|
0%, 100% { opacity: 0.6; transform: scale(1); }
|
|||
|
|
50% { opacity: 1; transform: scale(1.05); }
|
|||
|
|
}
|
|||
|
|
@keyframes fadeIn {
|
|||
|
|
from { opacity: 0; transform: translateY(8px); }
|
|||
|
|
to { opacity: 1; transform: translateY(0); }
|
|||
|
|
}
|
|||
|
|
.summary-card {
|
|||
|
|
background: var(--kalei-navy);
|
|||
|
|
border-radius: var(--radius-xl);
|
|||
|
|
padding: var(--space-4);
|
|||
|
|
margin-bottom: var(--space-3);
|
|||
|
|
position: relative;
|
|||
|
|
animation: fadeIn 0.35s ease-out both;
|
|||
|
|
}
|
|||
|
|
.summary-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;
|
|||
|
|
}
|
|||
|
|
.card-section-label {
|
|||
|
|
font-size: 10px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
letter-spacing: 0.07em;
|
|||
|
|
color: var(--dim-light);
|
|||
|
|
margin-bottom: var(--space-2);
|
|||
|
|
}
|
|||
|
|
.card-section-title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--pure-light);
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
}
|
|||
|
|
.card-section-meta {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: var(--dim-light);
|
|||
|
|
margin-bottom: var(--space-4);
|
|||
|
|
}
|
|||
|
|
.divider {
|
|||
|
|
height: 1px;
|
|||
|
|
background: var(--twilight);
|
|||
|
|
margin: var(--space-3) 0;
|
|||
|
|
}
|
|||
|
|
/* Plan adjustment */
|
|||
|
|
.plan-adjust-block {
|
|||
|
|
margin-bottom: var(--space-3);
|
|||
|
|
}
|
|||
|
|
.plan-adjust-label {
|
|||
|
|
font-size: 11px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
letter-spacing: 0.06em;
|
|||
|
|
color: var(--dim-light);
|
|||
|
|
margin-bottom: var(--space-2);
|
|||
|
|
}
|
|||
|
|
.plan-new {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: var(--soft-light);
|
|||
|
|
padding: var(--space-2) var(--space-3);
|
|||
|
|
background: rgba(139,92,246,0.08);
|
|||
|
|
border: 1px solid rgba(139,92,246,0.2);
|
|||
|
|
border-radius: var(--radius-md);
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
.plan-new strong {
|
|||
|
|
color: var(--amethyst-light);
|
|||
|
|
}
|
|||
|
|
/* Evidence proof points */
|
|||
|
|
.proof-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: var(--space-2);
|
|||
|
|
}
|
|||
|
|
.proof-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: var(--space-3);
|
|||
|
|
}
|
|||
|
|
.proof-dot {
|
|||
|
|
width: 8px;
|
|||
|
|
height: 8px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
margin-top: 4px;
|
|||
|
|
}
|
|||
|
|
.proof-dot.emerald { background: var(--emerald); box-shadow: 0 0 6px rgba(16,185,129,0.4); }
|
|||
|
|
.proof-dot.amber { background: var(--amber); box-shadow: 0 0 6px rgba(245,158,11,0.4); }
|
|||
|
|
.proof-dot.sapphire{ background: var(--sapphire);box-shadow: 0 0 6px rgba(59,130,246,0.4); }
|
|||
|
|
.proof-item-text {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: var(--soft-light);
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
/* Next check-in */
|
|||
|
|
.next-checkin-card {
|
|||
|
|
background: var(--deep-glass);
|
|||
|
|
border: 1px solid var(--twilight);
|
|||
|
|
border-radius: var(--radius-lg);
|
|||
|
|
padding: var(--space-3) var(--space-4);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: var(--space-3);
|
|||
|
|
margin-bottom: var(--space-3);
|
|||
|
|
animation: fadeIn 0.35s ease-out 0.2s both;
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
.next-checkin-icon {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
border-radius: var(--radius-md);
|
|||
|
|
background: rgba(139,92,246,0.1);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
.next-checkin-info { flex: 1; }
|
|||
|
|
.next-checkin-label {
|
|||
|
|
font-size: 11px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
letter-spacing: 0.06em;
|
|||
|
|
color: var(--amethyst);
|
|||
|
|
margin-bottom: 2px;
|
|||
|
|
}
|
|||
|
|
.next-checkin-date {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--pure-light);
|
|||
|
|
}
|
|||
|
|
.history-footer {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: var(--space-3) 0 var(--space-6);
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: var(--faint-light);
|
|||
|
|
}
|
|||
|
|
.done-btn {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
height: 52px;
|
|||
|
|
background: var(--amethyst);
|
|||
|
|
color: var(--pure-light);
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
border-radius: var(--radius-lg);
|
|||
|
|
text-decoration: none;
|
|||
|
|
box-shadow: 0 0 20px rgba(139,92,246,0.25);
|
|||
|
|
margin-bottom: var(--space-3);
|
|||
|
|
transition: background 0.2s ease-out;
|
|||
|
|
animation: fadeIn 0.35s ease-out 0.3s both;
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
.done-btn:hover { background: var(--amethyst-light); }
|
|||
|
|
</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="nav-header">
|
|||
|
|
<a class="nav-back" href="65-guide-checkin-conversation.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">Check-In Summary</span>
|
|||
|
|
<span class="nav-action"></span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="screen-content" style="padding-top: var(--space-4); padding-bottom: var(--space-6);">
|
|||
|
|
|
|||
|
|
<!-- Main summary card with prismatic border -->
|
|||
|
|
<div class="summary-card">
|
|||
|
|
<div class="card-section-label">What was reviewed</div>
|
|||
|
|
<div class="card-section-title">Present with confidence</div>
|
|||
|
|
<div class="card-section-meta">Week of Feb 16–22, 2026 · Weekly check-in · 65% progress</div>
|
|||
|
|
|
|||
|
|
<div class="divider"></div>
|
|||
|
|
|
|||
|
|
<!-- This week's focus / if-then -->
|
|||
|
|
<div class="plan-adjust-block">
|
|||
|
|
<div class="plan-adjust-label">This week's focus</div>
|
|||
|
|
<div class="plan-new">If I notice I'm freezing at the start of a presentation, <strong>then</strong> I'll say one sentence out loud — anything — to break the silence.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="divider"></div>
|
|||
|
|
|
|||
|
|
<!-- Evidence proof points -->
|
|||
|
|
<div class="card-section-label" style="margin-bottom: var(--space-3);">Evidence highlighted</div>
|
|||
|
|
<div class="proof-list">
|
|||
|
|
<div class="proof-item">
|
|||
|
|
<div class="proof-dot emerald"></div>
|
|||
|
|
<span class="proof-item-text">Pushed back on a timeline in standup — held ground without a deck</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="proof-item">
|
|||
|
|
<div class="proof-dot amber"></div>
|
|||
|
|
<span class="proof-item-text">Manager called Wednesday's presentation "solid" — the freeze was internal, not visible</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="proof-item">
|
|||
|
|
<div class="proof-dot sapphire"></div>
|
|||
|
|
<span class="proof-item-text">3 Turns this week about presentations — you're naming the pattern, not avoiding it</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Next check-in -->
|
|||
|
|
<div class="next-checkin-card">
|
|||
|
|
<div class="next-checkin-icon">
|
|||
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|||
|
|
<rect x="3" y="4" width="14" height="13" rx="2" stroke="var(--amethyst)" stroke-width="1.2"/>
|
|||
|
|
<path d="M7 2v3M13 2v3" stroke="var(--amethyst)" stroke-width="1.2" stroke-linecap="round"/>
|
|||
|
|
<path d="M3 8h14" stroke="var(--amethyst)" stroke-width="1.2"/>
|
|||
|
|
<rect x="7" y="11" width="2" height="2" rx="0.5" fill="var(--amethyst)"/>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
<div class="next-checkin-info">
|
|||
|
|
<div class="next-checkin-label">Next check-in</div>
|
|||
|
|
<div class="next-checkin-date">Sunday, Mar 1, 2026</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<a class="done-btn" href="../lens/27-lens-goal-detail.html">Back to goal</a>
|
|||
|
|
|
|||
|
|
<div class="history-footer">Saved to your coaching history</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|