252 lines
12 KiB
HTML
252 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=390, initial-scale=1">
|
||
<title>Kalei — Goal Detail</title>
|
||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||
<style>
|
||
.nav-back { color: var(--emerald-light) !important; }
|
||
.goal-hero {
|
||
display: flex; flex-direction: column; align-items: center;
|
||
padding: 24px 0 20px;
|
||
}
|
||
.progress-ring-large {
|
||
position: relative; display: inline-flex; align-items: center; justify-content: center;
|
||
width: 120px; height: 120px; margin-bottom: 16px;
|
||
filter: drop-shadow(0 0 12px rgba(16,185,129,0.2));
|
||
animation: breathing 6s ease-in-out infinite;
|
||
}
|
||
.progress-ring-large svg { transform: rotate(-90deg); position: absolute; }
|
||
.progress-ring-large .ring-pct {
|
||
font-size: 28px; font-weight: 700; color: var(--pure-light); position: relative; z-index: 1;
|
||
}
|
||
.progress-ring-large .ring-label {
|
||
position: absolute; top: 62%; font-size: 11px; color: var(--dim-light);
|
||
text-transform: uppercase; letter-spacing: 0.05em; z-index: 1;
|
||
}
|
||
.goal-title-hero {
|
||
font-size: 20px; font-weight: 700; color: var(--pure-light); text-align: center;
|
||
margin-bottom: 6px;
|
||
}
|
||
.goal-date-chip {
|
||
background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.2);
|
||
border-radius: var(--radius-full); padding: 4px 14px; font-size: 13px;
|
||
color: var(--emerald-light); display: inline-flex; align-items: center; gap: 6px;
|
||
}
|
||
.section-card {
|
||
background: var(--kalei-navy); border: 1px solid var(--twilight);
|
||
border-radius: var(--radius-xl); padding: var(--space-4); margin-bottom: var(--space-3);
|
||
}
|
||
.card-section-label {
|
||
font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
|
||
color: var(--dim-light); margin-bottom: 12px;
|
||
}
|
||
.milestone-row {
|
||
display: flex; align-items: center; gap: var(--space-3);
|
||
padding: 8px 0; border-bottom: 1px solid rgba(28,34,64,0.6);
|
||
}
|
||
.milestone-row:last-child { border-bottom: none; }
|
||
.milestone-check {
|
||
width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
|
||
border: 2px solid var(--twilight); display: flex; align-items: center; justify-content: center;
|
||
cursor: pointer; transition: all 0.2s;
|
||
}
|
||
.milestone-check.done {
|
||
border-color: var(--emerald); background: rgba(16,185,129,0.15);
|
||
}
|
||
.milestone-text {
|
||
flex: 1; font-size: 14px; color: var(--soft-light); line-height: 1.4;
|
||
}
|
||
.milestone-text.done { color: var(--dim-light); text-decoration: line-through; }
|
||
.milestone-date { font-size: 12px; color: var(--dim-light); }
|
||
.ifthen-plan {
|
||
background: var(--deep-glass); border-radius: var(--radius-md);
|
||
padding: var(--space-3); margin-bottom: var(--space-2);
|
||
}
|
||
.ifthen-plan:last-child { margin-bottom: 0; }
|
||
.ifthen-plan-text { font-size: 13px; color: var(--soft-light); line-height: 1.5; }
|
||
.ifthen-if { color: var(--emerald); font-weight: 600; }
|
||
.ifthen-then { color: var(--sapphire-light); font-weight: 600; }
|
||
.actions-row {
|
||
display: flex; gap: var(--space-3); margin-bottom: var(--space-4);
|
||
}
|
||
.btn-rehearsal {
|
||
flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
|
||
height: 52px; background: var(--emerald); color: var(--pure-light);
|
||
font-size: 15px; font-weight: 600; border-radius: var(--radius-lg);
|
||
box-shadow: var(--glow-emerald); text-decoration: none; transition: background 0.2s;
|
||
}
|
||
.btn-rehearsal:hover { background: var(--emerald-light); }
|
||
.btn-log {
|
||
flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
|
||
height: 52px; background: var(--deep-glass); color: var(--soft-light);
|
||
font-size: 15px; font-weight: 600; border-radius: var(--radius-lg);
|
||
border: 1px solid var(--twilight); text-decoration: none; transition: all 0.2s ease-out;
|
||
}
|
||
.btn-log:hover { background: var(--twilight); border-color: rgba(16,185,129,0.3); }
|
||
.screen-content { padding-bottom: 24px; }
|
||
</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="20-lens-dashboard.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">Goal</span>
|
||
<span class="nav-action">
|
||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" style="color: var(--dim-light);">
|
||
<circle cx="10" cy="5" r="1.5" fill="currentColor"/>
|
||
<circle cx="10" cy="10" r="1.5" fill="currentColor"/>
|
||
<circle cx="10" cy="15" r="1.5" fill="currentColor"/>
|
||
</svg>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="screen-content">
|
||
<div class="goal-hero">
|
||
<!-- Large progress ring — 65% of circumference (r=52): 2π×52=326.7; 65%=212.4 filled, 114.3 gap -->
|
||
<div class="progress-ring-large">
|
||
<svg width="120" height="120" viewBox="0 0 120 120">
|
||
<defs>
|
||
<linearGradient id="pr27-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="60" cy="60" r="52" fill="none" stroke="var(--twilight)" stroke-width="6"/>
|
||
<circle cx="60" cy="60" r="52" fill="none" stroke="url(#pr27-grEm)" stroke-width="6"
|
||
stroke-dasharray="212.4 114.3" stroke-linecap="round"/>
|
||
</svg>
|
||
<span class="ring-pct">65%</span>
|
||
<span class="ring-label">Complete</span>
|
||
</div>
|
||
<div class="goal-title-hero">Present with confidence</div>
|
||
<div class="body-sm text-dim" style="margin-bottom: var(--space-2);">Started Feb 5 · 12 evidence tiles</div>
|
||
<span class="goal-date-chip">
|
||
<svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="5" stroke="currentColor" fill="none" stroke-width="1"/><path d="M6 3v3l2 1.5" stroke="currentColor" stroke-width="0.8" stroke-linecap="round"/></svg>
|
||
3 if-then plans
|
||
</span>
|
||
</div>
|
||
|
||
<div class="actions-row">
|
||
<a class="btn-rehearsal" href="29-rehearsal-session.html">
|
||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||
<circle cx="9" cy="9" r="7" stroke="white" stroke-width="1.2"/>
|
||
<circle cx="9" cy="9" r="3" stroke="white" stroke-width="0.8"/>
|
||
</svg>
|
||
Start Rehearsal
|
||
</a>
|
||
<a class="btn-log" href="#">
|
||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||
<path d="M9 3v6l4 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||
<circle cx="9" cy="9" r="7" stroke="currentColor" stroke-width="1.2"/>
|
||
</svg>
|
||
Log Progress
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Milestones -->
|
||
<div class="section-card">
|
||
<div class="card-section-label">Milestones</div>
|
||
|
||
<div class="milestone-row" onclick="toggleCheck(this)">
|
||
<div class="milestone-check done">
|
||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="var(--emerald)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</div>
|
||
<div class="flex-col flex" style="flex:1; gap:2px;">
|
||
<div class="milestone-text done">Deliver team standup without notes</div>
|
||
<div class="milestone-date">Completed Feb 10</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="milestone-row" onclick="toggleCheck(this)">
|
||
<div class="milestone-check done">
|
||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="var(--emerald)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</div>
|
||
<div class="flex-col flex" style="flex:1; gap:2px;">
|
||
<div class="milestone-text done">Present sprint retro to the team</div>
|
||
<div class="milestone-date">Completed Feb 18</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="milestone-row" onclick="toggleCheck(this)">
|
||
<div class="milestone-check"></div>
|
||
<div class="flex-col flex" style="flex:1; gap:2px;">
|
||
<div class="milestone-text">Present quarterly results to department</div>
|
||
<div class="milestone-date">Target: Mar 1, 2026</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="milestone-row" onclick="toggleCheck(this)">
|
||
<div class="milestone-check"></div>
|
||
<div class="flex-col flex" style="flex:1; gap:2px;">
|
||
<div class="milestone-text">Volunteer to present at all-hands</div>
|
||
<div class="milestone-date">Target: Mar 28, 2026</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- If-Then Plans -->
|
||
<div class="section-card">
|
||
<div class="card-section-label">If-Then Plans</div>
|
||
|
||
<div class="ifthen-plan">
|
||
<div class="ifthen-plan-text">
|
||
<span class="ifthen-if">If</span> I feel my voice shaking while presenting,
|
||
<span class="ifthen-then">then</span> I will pause, take a breath, and remember I know this material.
|
||
</div>
|
||
</div>
|
||
<div class="ifthen-plan">
|
||
<div class="ifthen-plan-text">
|
||
<span class="ifthen-if">If</span> I start to spiral about what my manager thinks,
|
||
<span class="ifthen-then">then</span> I will focus on one friendly face in the room and speak to them.
|
||
</div>
|
||
</div>
|
||
<div class="ifthen-plan">
|
||
<div class="ifthen-plan-text">
|
||
<span class="ifthen-if">If</span> I lose my place or stumble on a slide,
|
||
<span class="ifthen-then">then</span> I will say "Let me back up a moment" and continue — no apology needed.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Why this matters -->
|
||
<div class="section-card" style="border-color: rgba(16,185,129,0.15);">
|
||
<div class="card-section-label">Why This Matters</div>
|
||
<div class="body text-soft" style="line-height: 1.6; font-style: italic;">
|
||
"I want to stop letting fear of judgment stop me from sharing ideas I actually believe in. Being visible at work matters for my career — and I deserve to be heard."
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function toggleCheck(row) {
|
||
const check = row.querySelector('.milestone-check');
|
||
const text = row.querySelector('.milestone-text');
|
||
const isChecked = check.classList.contains('done');
|
||
if (isChecked) {
|
||
check.classList.remove('done');
|
||
check.innerHTML = '';
|
||
text.classList.remove('done');
|
||
} else {
|
||
check.classList.add('done');
|
||
check.innerHTML = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="var(--emerald)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
|
||
text.classList.add('done');
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|