374 lines
17 KiB
HTML
374 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=390, initial-scale=1">
|
||
<title>Kalei — Lens Dashboard</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;
|
||
}
|
||
.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;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
|
||
}
|
||
.goal-card:hover { border-color: rgba(16,185,129,0.4); box-shadow: 0 0 20px rgba(16,185,129,0.08); }
|
||
.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-next {
|
||
font-size: 12px;
|
||
color: var(--dim-light);
|
||
margin-bottom: 6px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.days-chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
background: rgba(16,185,129,0.1);
|
||
color: var(--emerald-light);
|
||
border-radius: var(--radius-full);
|
||
padding: 2px 10px;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
}
|
||
.affirmation-card {
|
||
background: var(--kalei-navy);
|
||
border: 1px solid rgba(16,185,129,0.25);
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--space-4);
|
||
margin-bottom: var(--space-3);
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
display: block;
|
||
box-shadow: 0 0 16px rgba(16,185,129,0.08);
|
||
transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
|
||
}
|
||
.affirmation-card:hover { border-color: rgba(16,185,129,0.5); box-shadow: 0 0 24px rgba(16,185,129,0.15); }
|
||
.affirmation-label {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
color: var(--emerald-light);
|
||
margin-bottom: 6px;
|
||
}
|
||
.affirmation-text {
|
||
font-size: 15px;
|
||
line-height: 1.5;
|
||
color: var(--soft-light);
|
||
font-style: italic;
|
||
}
|
||
.rehearsal-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding: var(--space-3) var(--space-4);
|
||
background: var(--deep-glass);
|
||
border: 1px solid var(--twilight);
|
||
border-radius: var(--radius-lg);
|
||
margin-bottom: var(--space-2);
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
transition: border-color 0.2s ease-out, background 0.2s ease-out;
|
||
}
|
||
.rehearsal-row:hover { border-color: rgba(16,185,129,0.3); background: var(--twilight); }
|
||
.rehearsal-icon {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: var(--radius-md);
|
||
background: rgba(16,185,129,0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.rehearsal-info { flex: 1; }
|
||
.rehearsal-title {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--soft-light);
|
||
}
|
||
.rehearsal-meta {
|
||
font-size: 12px;
|
||
color: var(--dim-light);
|
||
}
|
||
.add-goal-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--space-2);
|
||
height: 52px;
|
||
width: 100%;
|
||
background: var(--emerald);
|
||
color: var(--pure-light);
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--glow-emerald);
|
||
text-decoration: none;
|
||
margin-bottom: var(--space-4);
|
||
transition: background 0.2s;
|
||
}
|
||
.add-goal-btn:hover { background: var(--emerald-light); }
|
||
.screen-content { padding-bottom: var(--space-4); }
|
||
</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);">
|
||
<div class="screen-aura"></div>
|
||
<div style="position: relative; z-index: 1;">
|
||
<div class="heading lens-heading">Your Lens</div>
|
||
<div class="body-sm text-dim" style="margin-bottom: var(--space-5);">Track your goals, rehearse success</div>
|
||
|
||
<!-- Goal Cards -->
|
||
<!-- Progress rings: r=27, circumference=169.6; rotate(-90deg) on svg via CSS -->
|
||
<!-- Goal 1: Present with confidence — emerald — 65% -->
|
||
<a class="goal-card" href="27-lens-goal-detail.html">
|
||
<div class="goal-ring-wrap">
|
||
<svg width="64" height="64" viewBox="0 0 64 64">
|
||
<defs>
|
||
<linearGradient id="pr20-grEm1" 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% = 169.6 × 0.65 = 110.2 filled, 59.4 gap -->
|
||
<circle cx="32" cy="32" r="27" fill="none" stroke="url(#pr20-grEm1)" 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-next">Next: Rehearse quarterly results presentation</div>
|
||
<span class="days-chip">
|
||
<svg width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" stroke="currentColor" fill="none" stroke-width="1"/><path d="M5 3v2l1.5 1" stroke="currentColor" stroke-width="0.8" stroke-linecap="round"/></svg>
|
||
Started Feb 5
|
||
</span>
|
||
</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="27-lens-goal-detail.html" style="border-color: rgba(59,130,246,0.2);">
|
||
<div class="goal-ring-wrap">
|
||
<svg width="64" height="64" viewBox="0 0 64 64">
|
||
<defs>
|
||
<linearGradient id="pr20-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% = 169.6 × 0.40 = 67.8 filled, 101.8 gap -->
|
||
<circle cx="32" cy="32" r="27" fill="none" stroke="url(#pr20-grSa)" stroke-width="3.5"
|
||
stroke-dasharray="67.8 101.8" stroke-linecap="round"/>
|
||
</svg>
|
||
<span class="goal-ring-pct" style="color: var(--sapphire-light);">40%</span>
|
||
</div>
|
||
<div class="goal-info">
|
||
<div class="goal-title">Set boundaries at work</div>
|
||
<div class="goal-next">Next: Practice declining the Thursday all-hands</div>
|
||
<span class="days-chip" style="background: rgba(59,130,246,0.1); color: var(--sapphire-light);">
|
||
<svg width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" stroke="currentColor" fill="none" stroke-width="1"/><path d="M5 3v2l1.5 1" stroke="currentColor" stroke-width="0.8" stroke-linecap="round"/></svg>
|
||
Started Feb 10
|
||
</span>
|
||
</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 3: Practice self-compassion — amethyst — 25% -->
|
||
<a class="goal-card" href="27-lens-goal-detail.html" style="border-color: rgba(139,92,246,0.2);">
|
||
<div class="goal-ring-wrap">
|
||
<svg width="64" height="64" viewBox="0 0 64 64">
|
||
<defs>
|
||
<linearGradient id="pr20-grAm" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||
<stop offset="100%" stop-color="#6D28D9"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<circle cx="32" cy="32" r="27" fill="none" stroke="var(--twilight)" stroke-width="3.5"/>
|
||
<!-- 25% = 169.6 × 0.25 = 42.4 filled, 127.2 gap -->
|
||
<circle cx="32" cy="32" r="27" fill="none" stroke="url(#pr20-grAm)" stroke-width="3.5"
|
||
stroke-dasharray="42.4 127.2" stroke-linecap="round"/>
|
||
</svg>
|
||
<span class="goal-ring-pct" style="color: var(--amethyst-light);">25%</span>
|
||
</div>
|
||
<div class="goal-info">
|
||
<div class="goal-title">Practice self-compassion</div>
|
||
<div class="goal-next">Next: Write a letter to yourself after today</div>
|
||
<span class="days-chip" style="background: rgba(139,92,246,0.1); color: var(--amethyst-light);">
|
||
<svg width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" stroke="currentColor" fill="none" stroke-width="1"/><path d="M5 3v2l1.5 1" stroke="currentColor" stroke-width="0.8" stroke-linecap="round"/></svg>
|
||
Started Feb 15
|
||
</span>
|
||
</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>
|
||
|
||
<a class="add-goal-btn" href="21-lens-create-step1.html">
|
||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||
<path d="M10 4v12M4 10h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||
</svg>
|
||
Add New Goal
|
||
</a>
|
||
|
||
<!-- Daily Affirmation -->
|
||
<div class="section-header" style="margin-bottom: var(--space-2);">
|
||
<span class="section-title">Daily Affirmation</span>
|
||
</div>
|
||
<a class="affirmation-card" href="28-lens-affirmation.html">
|
||
<div class="affirmation-label">Today's Affirmation</div>
|
||
<div class="affirmation-text">"I have the strength and clarity to take one step forward, even when the path isn't fully visible yet."</div>
|
||
<div class="body-sm text-emerald" style="margin-top: var(--space-2); font-weight: 500;">Tap to reflect →</div>
|
||
</a>
|
||
|
||
<!-- Rehearsals -->
|
||
<div class="section-header" style="margin-top: var(--space-1); margin-bottom: var(--space-2);">
|
||
<span class="section-title">Rehearsals</span>
|
||
<span class="section-action" style="color: var(--emerald-light);">See all</span>
|
||
</div>
|
||
<a class="rehearsal-row" href="29-rehearsal-session.html">
|
||
<div class="rehearsal-icon">
|
||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||
<circle cx="9" cy="9" r="7" stroke="var(--emerald)" stroke-width="1.2"/>
|
||
<circle cx="9" cy="9" r="3" stroke="var(--emerald)" stroke-width="0.8"/>
|
||
<path d="M9 2v2M9 14v2M2 9h2M14 9h2" stroke="var(--emerald)" stroke-width="0.8" stroke-linecap="round"/>
|
||
</svg>
|
||
</div>
|
||
<div class="rehearsal-info">
|
||
<div class="rehearsal-title">Quarterly Results Presentation</div>
|
||
<div class="rehearsal-meta">Scheduled today · 5 min</div>
|
||
</div>
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="color: var(--faint-light);">
|
||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</a>
|
||
<a class="rehearsal-row" href="29-rehearsal-session.html">
|
||
<div class="rehearsal-icon">
|
||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||
<circle cx="9" cy="9" r="7" stroke="var(--emerald)" stroke-width="1.2"/>
|
||
<circle cx="9" cy="9" r="3" stroke="var(--emerald)" stroke-width="0.8"/>
|
||
<path d="M9 2v2M9 14v2M2 9h2M14 9h2" stroke="var(--emerald)" stroke-width="0.8" stroke-linecap="round"/>
|
||
</svg>
|
||
</div>
|
||
<div class="rehearsal-info">
|
||
<div class="rehearsal-title">Boundary Conversation Practice</div>
|
||
<div class="rehearsal-meta">Yesterday · Completed</div>
|
||
</div>
|
||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" style="color: var(--emerald); flex-shrink:0;">
|
||
<path d="M2 7l3.5 3.5L12 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab Bar -->
|
||
<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="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>
|