Initial commit: Kalei app — docs, mockups, logo, pitch deck
Complete project files including: - 73 polished HTML mockup screens (onboarding, turn, mirror, lens, gallery, you, ritual, spectrum, modals, guide) - Design system CSS with Inter font, jewel-tone palette, device frame scaling - Canonical 6-blade kaleidoscope logo (soft-elegance-final) - SVG asset library (fragments, icons, patterns, evidence wall, spectrum viz) - Product docs, brand guidelines, technical architecture, build phases - Pitch deck and cost projections - Logo mockup iterations and finalists Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
373
initial mockups/screens/lens/20-lens-dashboard.html
Normal file
373
initial mockups/screens/lens/20-lens-dashboard.html
Normal file
@@ -0,0 +1,373 @@
|
||||
<!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>
|
||||
156
initial mockups/screens/lens/21-lens-create-step1.html
Normal file
156
initial mockups/screens/lens/21-lens-create-step1.html
Normal file
@@ -0,0 +1,156 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — New Goal Step 1</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.step-dot.active { background: var(--emerald); box-shadow: 0 0 8px rgba(16,185,129,0.4); }
|
||||
.step-dot.completed { background: var(--emerald); opacity: 0.5; }
|
||||
.input-field:focus { border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(16,185,129,0.1); }
|
||||
.step-question {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
line-height: 1.3;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.step-hint {
|
||||
font-size: 14px;
|
||||
color: var(--dim-light);
|
||||
line-height: 1.5;
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
.nav-back { color: var(--emerald-light) !important; }
|
||||
.example-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.example-chip {
|
||||
background: rgba(16,185,129,0.08);
|
||||
border: 1px solid rgba(16,185,129,0.2);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 6px 14px;
|
||||
font-size: 13px;
|
||||
color: var(--emerald-light);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.example-chip:hover { background: rgba(16,185,129,0.15); }
|
||||
.bottom-actions {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: var(--space-4) var(--space-4) var(--space-6);
|
||||
background: linear-gradient(to top, var(--void) 70%, transparent);
|
||||
}
|
||||
.btn-next-emerald {
|
||||
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;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.btn-next-emerald:hover { background: var(--emerald-light); }
|
||||
.screen-content { padding-bottom: 120px; }
|
||||
.aura-small {
|
||||
position: absolute;
|
||||
top: -60px;
|
||||
right: -60px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(16,185,129,0.1) 0%, transparent 70%);
|
||||
filter: blur(40px);
|
||||
pointer-events: none;
|
||||
}
|
||||
</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">New Goal</span>
|
||||
<span class="nav-action body-sm text-dim">1 of 6</span>
|
||||
</div>
|
||||
|
||||
<div class="step-progress">
|
||||
<div class="step-dot active"></div>
|
||||
<div class="step-dot"></div>
|
||||
<div class="step-dot"></div>
|
||||
<div class="step-dot"></div>
|
||||
<div class="step-dot"></div>
|
||||
<div class="step-dot"></div>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-top: var(--space-6); position: relative;">
|
||||
<div class="aura-small"></div>
|
||||
|
||||
<!-- Emerald circle icon -->
|
||||
<div style="margin-bottom: var(--space-5);">
|
||||
<svg width="48" height="48" viewBox="0 0 48 48">
|
||||
<defs>
|
||||
<linearGradient id="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="24" cy="24" r="22" fill="none" stroke="url(#grEm1)" stroke-width="2" opacity="0.6"/>
|
||||
<circle cx="24" cy="24" r="10" fill="none" stroke="url(#grEm1)" stroke-width="1.5"/>
|
||||
<circle cx="24" cy="24" r="4" fill="url(#grEm1)" opacity="0.8"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="step-question">What do you want to achieve?</div>
|
||||
<div class="step-hint">Be specific and ambitious. The clearer your goal, the more effectively you can rehearse achieving it.</div>
|
||||
|
||||
<input type="text" class="input-field" placeholder="e.g. Present with confidence" id="goalInput" style="font-size: 17px; height: 56px;">
|
||||
|
||||
<div class="example-chips">
|
||||
<div class="example-chip" onclick="setGoal(this)">Present with confidence</div>
|
||||
<div class="example-chip" onclick="setGoal(this)">Set boundaries at work</div>
|
||||
<div class="example-chip" onclick="setGoal(this)">Practice self-compassion</div>
|
||||
<div class="example-chip" onclick="setGoal(this)">Ask for a promotion</div>
|
||||
<div class="example-chip" onclick="setGoal(this)">Build a daily habit</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-actions">
|
||||
<a class="btn-next-emerald" href="22-lens-create-step2.html">
|
||||
Next
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M6 4l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function setGoal(el) {
|
||||
document.getElementById('goalInput').value = el.textContent;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
121
initial mockups/screens/lens/22-lens-create-step2.html
Normal file
121
initial mockups/screens/lens/22-lens-create-step2.html
Normal file
@@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — New Goal Step 2</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.step-dot.active { background: var(--emerald); box-shadow: 0 0 8px rgba(16,185,129,0.4); }
|
||||
.step-dot.completed { background: var(--emerald); opacity: 0.5; }
|
||||
.step-question { font-size: 22px; font-weight: 600; color: var(--pure-light); line-height: 1.3; margin-bottom: var(--space-3); }
|
||||
.step-hint { font-size: 14px; color: var(--dim-light); line-height: 1.5; margin-bottom: var(--space-5); }
|
||||
.nav-back { color: var(--emerald-light) !important; }
|
||||
.textarea-field:focus { border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(16,185,129,0.1); }
|
||||
.bottom-actions {
|
||||
position: absolute; bottom: 0; left: 0; right: 0;
|
||||
padding: var(--space-4) var(--space-4) var(--space-6);
|
||||
background: linear-gradient(to top, var(--void) 70%, transparent);
|
||||
display: flex; gap: var(--space-3);
|
||||
}
|
||||
.btn-back-ghost {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
height: 52px; width: 52px;
|
||||
background: var(--deep-glass); color: var(--dim-light);
|
||||
border: 1px solid var(--twilight); border-radius: var(--radius-lg);
|
||||
text-decoration: none; flex-shrink: 0; transition: background 0.2s;
|
||||
}
|
||||
.btn-back-ghost:hover { background: var(--twilight); }
|
||||
.btn-next-emerald {
|
||||
display: flex; align-items: center; justify-content: center; gap: var(--space-2);
|
||||
height: 52px; flex: 1; 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; transition: background 0.2s;
|
||||
}
|
||||
.btn-next-emerald:hover { background: var(--emerald-light); }
|
||||
.screen-content { padding-bottom: 120px; }
|
||||
.why-prompts {
|
||||
display: flex; flex-direction: column; gap: var(--space-2);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
.why-prompt {
|
||||
background: var(--deep-glass); border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
|
||||
font-size: 14px; color: var(--dim-light); cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.why-prompt:hover { border-color: rgba(16,185,129,0.3); color: var(--soft-light); }
|
||||
.goal-chip {
|
||||
background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.2);
|
||||
border-radius: var(--radius-full); padding: 6px 14px; font-size: 13px;
|
||||
color: var(--emerald-light); display: inline-flex; align-items: center; gap: 6px;
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
</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="21-lens-create-step1.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">New Goal</span>
|
||||
<span class="nav-action body-sm text-dim">2 of 6</span>
|
||||
</div>
|
||||
|
||||
<div class="step-progress">
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot active"></div>
|
||||
<div class="step-dot"></div>
|
||||
<div class="step-dot"></div>
|
||||
<div class="step-dot"></div>
|
||||
<div class="step-dot"></div>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-top: var(--space-6);">
|
||||
<div class="goal-chip">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="5" stroke="var(--emerald)" fill="none" stroke-width="1"/><circle cx="6" cy="6" r="2" fill="var(--emerald)"/></svg>
|
||||
Present with confidence
|
||||
</div>
|
||||
|
||||
<div class="step-question">Why does this matter to you?</div>
|
||||
<div class="step-hint">Understanding your deeper motivation keeps you going when things get hard. Be honest with yourself.</div>
|
||||
|
||||
<textarea class="textarea-field" placeholder="This matters to me because..." style="min-height: 140px; font-size: 16px;"></textarea>
|
||||
|
||||
<div class="why-prompts">
|
||||
<div class="why-prompt" onclick="appendText(this)">I want to stop letting fear stop me from sharing ideas I believe in</div>
|
||||
<div class="why-prompt" onclick="appendText(this)">Being visible at work matters for my career growth</div>
|
||||
<div class="why-prompt" onclick="appendText(this)">I want to feel capable and not undermine myself</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-actions">
|
||||
<a class="btn-back-ghost" href="21-lens-create-step1.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>
|
||||
<a class="btn-next-emerald" href="23-lens-create-step3.html">
|
||||
Next
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M6 4l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function appendText(el) {
|
||||
const ta = document.querySelector('.textarea-field');
|
||||
ta.value = el.textContent;
|
||||
ta.focus();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
179
initial mockups/screens/lens/23-lens-create-step3.html
Normal file
179
initial mockups/screens/lens/23-lens-create-step3.html
Normal file
@@ -0,0 +1,179 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — New Goal Step 3</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.step-dot.active { background: var(--emerald); box-shadow: 0 0 8px rgba(16,185,129,0.4); }
|
||||
.step-dot.completed { background: var(--emerald); opacity: 0.5; }
|
||||
.step-question { font-size: 22px; font-weight: 600; color: var(--pure-light); line-height: 1.3; margin-bottom: var(--space-3); }
|
||||
.step-hint { font-size: 14px; color: var(--dim-light); line-height: 1.5; margin-bottom: var(--space-5); }
|
||||
.nav-back { color: var(--emerald-light) !important; }
|
||||
.obstacle-input-row {
|
||||
display: flex; gap: var(--space-2); margin-bottom: var(--space-4);
|
||||
}
|
||||
.obstacle-input {
|
||||
flex: 1; height: 48px; background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight); border-radius: var(--radius-md);
|
||||
padding: 0 14px; font-size: 15px; color: var(--pure-light);
|
||||
outline: none; transition: border-color 0.2s; font-family: var(--font-primary);
|
||||
}
|
||||
.obstacle-input::placeholder { color: var(--faint-light); }
|
||||
.obstacle-input:focus { border-color: var(--emerald); }
|
||||
.add-btn {
|
||||
width: 48px; height: 48px; background: var(--emerald);
|
||||
border: none; border-radius: var(--radius-md); cursor: pointer;
|
||||
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.add-btn:hover { background: var(--emerald-light); }
|
||||
.obstacle-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
|
||||
.obstacle-chip {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25);
|
||||
border-radius: var(--radius-full); padding: 7px 14px;
|
||||
font-size: 13px; font-weight: 500; color: var(--emerald-light);
|
||||
}
|
||||
.obstacle-chip-remove {
|
||||
width: 16px; height: 16px; border-radius: 50%;
|
||||
background: rgba(16,185,129,0.2); border: none; cursor: pointer;
|
||||
display: flex; align-items: center; justify-content: center; color: var(--emerald);
|
||||
font-size: 10px; font-weight: 700; transition: background 0.15s;
|
||||
}
|
||||
.obstacle-chip-remove:hover { background: rgba(16,185,129,0.4); }
|
||||
.suggestions-label { font-size: 12px; color: var(--dim-light); margin: 16px 0 8px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; }
|
||||
.suggestion-chips { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.suggestion-chip {
|
||||
background: var(--deep-glass); border: 1px dashed var(--twilight);
|
||||
border-radius: var(--radius-full); padding: 6px 12px; font-size: 12px;
|
||||
color: var(--dim-light); cursor: pointer; transition: all 0.15s;
|
||||
}
|
||||
.suggestion-chip:hover { border-color: rgba(16,185,129,0.3); color: var(--emerald-light); }
|
||||
.bottom-actions {
|
||||
position: absolute; bottom: 0; left: 0; right: 0;
|
||||
padding: var(--space-4) var(--space-4) var(--space-6);
|
||||
background: linear-gradient(to top, var(--void) 70%, transparent);
|
||||
display: flex; gap: var(--space-3);
|
||||
}
|
||||
.btn-back-ghost {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
height: 52px; width: 52px; background: var(--deep-glass);
|
||||
color: var(--dim-light); border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg); text-decoration: none; flex-shrink: 0;
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.btn-back-ghost:hover { background: var(--twilight); }
|
||||
.btn-next-emerald {
|
||||
display: flex; align-items: center; justify-content: center; gap: var(--space-2);
|
||||
height: 52px; flex: 1; 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; transition: background 0.2s ease-out;
|
||||
}
|
||||
.btn-next-emerald:hover { background: var(--emerald-light); }
|
||||
.screen-content { padding-bottom: 120px; }
|
||||
</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="22-lens-create-step2.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">New Goal</span>
|
||||
<span class="nav-action body-sm text-dim">3 of 6</span>
|
||||
</div>
|
||||
|
||||
<div class="step-progress">
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot active"></div>
|
||||
<div class="step-dot"></div>
|
||||
<div class="step-dot"></div>
|
||||
<div class="step-dot"></div>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-top: var(--space-6);">
|
||||
<div class="step-question">What might get in the way?</div>
|
||||
<div class="step-hint">Anticipating obstacles makes you 2-3x more likely to follow through. Name the real barriers.</div>
|
||||
|
||||
<div class="obstacle-input-row">
|
||||
<input type="text" class="obstacle-input" placeholder="Add an obstacle..." id="obstacleInput">
|
||||
<button class="add-btn" onclick="addObstacle()">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 4v12M4 10h12" stroke="white" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="obstacle-chips" id="obstacleChips">
|
||||
<span class="obstacle-chip">
|
||||
Fear of judgment
|
||||
<button class="obstacle-chip-remove" onclick="removeChip(this)">x</button>
|
||||
</span>
|
||||
<span class="obstacle-chip">
|
||||
Losing my train of thought
|
||||
<button class="obstacle-chip-remove" onclick="removeChip(this)">x</button>
|
||||
</span>
|
||||
<span class="obstacle-chip">
|
||||
Voice shaking under pressure
|
||||
<button class="obstacle-chip-remove" onclick="removeChip(this)">x</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="suggestions-label">Common obstacles</div>
|
||||
<div class="suggestion-chips">
|
||||
<span class="suggestion-chip" onclick="addSuggestion(this)">Catastrophizing before the talk</span>
|
||||
<span class="suggestion-chip" onclick="addSuggestion(this)">Mind going blank</span>
|
||||
<span class="suggestion-chip" onclick="addSuggestion(this)">Manager in the room</span>
|
||||
<span class="suggestion-chip" onclick="addSuggestion(this)">Technical difficulties</span>
|
||||
<span class="suggestion-chip" onclick="addSuggestion(this)">Not enough preparation time</span>
|
||||
<span class="suggestion-chip" onclick="addSuggestion(this)">Imposter syndrome</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-actions">
|
||||
<a class="btn-back-ghost" href="22-lens-create-step2.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>
|
||||
<a class="btn-next-emerald" href="24-lens-create-step4.html">
|
||||
Next
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M6 4l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function addObstacle() {
|
||||
const input = document.getElementById('obstacleInput');
|
||||
if (!input.value.trim()) return;
|
||||
addChip(input.value.trim());
|
||||
input.value = '';
|
||||
}
|
||||
function addSuggestion(el) {
|
||||
addChip(el.textContent);
|
||||
}
|
||||
function addChip(text) {
|
||||
const chips = document.getElementById('obstacleChips');
|
||||
const chip = document.createElement('span');
|
||||
chip.className = 'obstacle-chip';
|
||||
chip.innerHTML = `${text}<button class="obstacle-chip-remove" onclick="removeChip(this)">x</button>`;
|
||||
chips.appendChild(chip);
|
||||
}
|
||||
function removeChip(btn) {
|
||||
btn.parentElement.remove();
|
||||
}
|
||||
document.getElementById('obstacleInput').addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter') addObstacle();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
160
initial mockups/screens/lens/24-lens-create-step4.html
Normal file
160
initial mockups/screens/lens/24-lens-create-step4.html
Normal file
@@ -0,0 +1,160 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — New Goal Step 4</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.step-dot.active { background: var(--emerald); box-shadow: 0 0 8px rgba(16,185,129,0.4); }
|
||||
.step-dot.completed { background: var(--emerald); opacity: 0.5; }
|
||||
.step-question { font-size: 22px; font-weight: 600; color: var(--pure-light); line-height: 1.3; margin-bottom: var(--space-2); }
|
||||
.step-hint { font-size: 14px; color: var(--dim-light); line-height: 1.5; margin-bottom: var(--space-5); }
|
||||
.nav-back { color: var(--emerald-light) !important; }
|
||||
.ifthen-card {
|
||||
background: var(--kalei-navy); border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl); padding: var(--space-4); margin-bottom: var(--space-3);
|
||||
}
|
||||
.obstacle-label {
|
||||
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
||||
letter-spacing: 0.06em; color: var(--dim-light); margin-bottom: 8px;
|
||||
}
|
||||
.obstacle-name {
|
||||
font-size: 14px; font-weight: 500; color: var(--emerald-light);
|
||||
background: rgba(16,185,129,0.08); border-radius: var(--radius-md);
|
||||
padding: 6px 12px; margin-bottom: var(--space-3); display: inline-block;
|
||||
}
|
||||
.ifthen-row {
|
||||
display: flex; align-items: flex-start; gap: 10px; margin-bottom: var(--space-2);
|
||||
}
|
||||
.ifthen-keyword {
|
||||
font-size: 12px; font-weight: 700; color: var(--emerald); text-transform: uppercase;
|
||||
letter-spacing: 0.06em; padding-top: 14px; flex-shrink: 0; width: 30px;
|
||||
}
|
||||
.ifthen-input {
|
||||
flex: 1; min-height: 44px; background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight); border-radius: var(--radius-md);
|
||||
padding: 10px 12px; font-size: 14px; color: var(--pure-light);
|
||||
outline: none; resize: none; font-family: var(--font-primary);
|
||||
transition: border-color 0.2s; line-height: 1.4;
|
||||
}
|
||||
.ifthen-input::placeholder { color: var(--faint-light); }
|
||||
.ifthen-input:focus { border-color: var(--emerald); }
|
||||
.bottom-actions {
|
||||
position: absolute; bottom: 0; left: 0; right: 0;
|
||||
padding: var(--space-4) var(--space-4) var(--space-6);
|
||||
background: linear-gradient(to top, var(--void) 70%, transparent);
|
||||
display: flex; gap: var(--space-3);
|
||||
}
|
||||
.btn-back-ghost {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
height: 52px; width: 52px; background: var(--deep-glass);
|
||||
color: var(--dim-light); border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg); text-decoration: none; flex-shrink: 0;
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.btn-back-ghost:hover { background: var(--twilight); }
|
||||
.btn-next-emerald {
|
||||
display: flex; align-items: center; justify-content: center; gap: var(--space-2);
|
||||
height: 52px; flex: 1; 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; transition: background 0.2s ease-out;
|
||||
}
|
||||
.btn-next-emerald:hover { background: var(--emerald-light); }
|
||||
.screen-content { padding-bottom: 120px; }
|
||||
.info-box {
|
||||
background: rgba(16,185,129,0.05); border: 1px solid rgba(16,185,129,0.15);
|
||||
border-radius: var(--radius-md); padding: var(--space-3);
|
||||
font-size: 13px; color: var(--dim-light); line-height: 1.5;
|
||||
margin-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="nav-header">
|
||||
<a class="nav-back" href="23-lens-create-step3.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">New Goal</span>
|
||||
<span class="nav-action body-sm text-dim">4 of 6</span>
|
||||
</div>
|
||||
|
||||
<div class="step-progress">
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot active"></div>
|
||||
<div class="step-dot"></div>
|
||||
<div class="step-dot"></div>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-top: var(--space-5);">
|
||||
<div class="step-question">Plan your responses</div>
|
||||
<div class="step-hint">If-then plans triple your success rate. Write exactly what you'll do when each obstacle shows up.</div>
|
||||
|
||||
<div class="info-box">
|
||||
Research shows that "If X happens, then I will do Y" plans are 2-3x more effective than general intentions.
|
||||
</div>
|
||||
|
||||
<div class="ifthen-card">
|
||||
<div class="obstacle-label">Obstacle</div>
|
||||
<div class="obstacle-name">Voice shaking under pressure</div>
|
||||
<div class="ifthen-row">
|
||||
<div class="ifthen-keyword">If</div>
|
||||
<textarea class="ifthen-input" rows="2">I feel my voice starting to shake while presenting,</textarea>
|
||||
</div>
|
||||
<div class="ifthen-row">
|
||||
<div class="ifthen-keyword">Then</div>
|
||||
<textarea class="ifthen-input" rows="2" placeholder="I will...">I will pause, take one slow breath, and remind myself: I know this material.</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ifthen-card">
|
||||
<div class="obstacle-label">Obstacle</div>
|
||||
<div class="obstacle-name">Losing my train of thought</div>
|
||||
<div class="ifthen-row">
|
||||
<div class="ifthen-keyword">If</div>
|
||||
<textarea class="ifthen-input" rows="2">I lose my place or blank on a slide,</textarea>
|
||||
</div>
|
||||
<div class="ifthen-row">
|
||||
<div class="ifthen-keyword">Then</div>
|
||||
<textarea class="ifthen-input" rows="2" placeholder="I will...">I will say "Let me back up a moment" — calmly, with no apology — and continue.</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ifthen-card">
|
||||
<div class="obstacle-label">Obstacle</div>
|
||||
<div class="obstacle-name">Fear of judgment</div>
|
||||
<div class="ifthen-row">
|
||||
<div class="ifthen-keyword">If</div>
|
||||
<textarea class="ifthen-input" rows="2">I start to spiral about what my manager thinks,</textarea>
|
||||
</div>
|
||||
<div class="ifthen-row">
|
||||
<div class="ifthen-keyword">Then</div>
|
||||
<textarea class="ifthen-input" rows="2" placeholder="I will...">I will focus on one friendly face in the room and speak directly to them.</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-actions">
|
||||
<a class="btn-back-ghost" href="23-lens-create-step3.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>
|
||||
<a class="btn-next-emerald" href="25-lens-create-step5.html">
|
||||
Next
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M6 4l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
160
initial mockups/screens/lens/25-lens-create-step5.html
Normal file
160
initial mockups/screens/lens/25-lens-create-step5.html
Normal file
@@ -0,0 +1,160 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — New Goal Step 5</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.step-dot.active { background: var(--emerald); box-shadow: 0 0 8px rgba(16,185,129,0.4); }
|
||||
.step-dot.completed { background: var(--emerald); opacity: 0.5; }
|
||||
.step-question { font-size: 22px; font-weight: 600; color: var(--pure-light); line-height: 1.3; margin-bottom: var(--space-3); }
|
||||
.step-hint { font-size: 14px; color: var(--dim-light); line-height: 1.5; margin-bottom: var(--space-5); }
|
||||
.nav-back { color: var(--emerald-light) !important; }
|
||||
.milestone-item {
|
||||
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-3); display: flex; align-items: center; gap: var(--space-3);
|
||||
}
|
||||
.milestone-number {
|
||||
width: 28px; height: 28px; border-radius: 50%;
|
||||
background: rgba(16,185,129,0.1); border: 1.5px solid rgba(16,185,129,0.3);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 13px; font-weight: 700; color: var(--emerald); flex-shrink: 0;
|
||||
}
|
||||
.milestone-inputs { flex: 1; display: flex; flex-direction: column; gap: 8px; }
|
||||
.milestone-text-input {
|
||||
width: 100%; background: var(--deep-glass); border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-md); padding: 8px 12px; font-size: 14px;
|
||||
color: var(--pure-light); outline: none; font-family: var(--font-primary);
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.milestone-text-input::placeholder { color: var(--faint-light); }
|
||||
.milestone-text-input:focus { border-color: var(--emerald); }
|
||||
.milestone-date-input {
|
||||
width: 100%; background: var(--deep-glass); border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-md); padding: 8px 12px; font-size: 13px;
|
||||
color: var(--dim-light); outline: none; font-family: var(--font-primary);
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.milestone-date-input:focus { border-color: var(--emerald); color: var(--pure-light); }
|
||||
.add-milestone-btn {
|
||||
display: flex; align-items: center; justify-content: center; gap: 8px;
|
||||
height: 44px; width: 100%; background: transparent;
|
||||
border: 1px dashed rgba(16,185,129,0.3); border-radius: var(--radius-lg);
|
||||
color: var(--emerald-light); font-size: 14px; font-weight: 500; cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.add-milestone-btn:hover { background: rgba(16,185,129,0.05); border-style: solid; }
|
||||
.bottom-actions {
|
||||
position: absolute; bottom: 0; left: 0; right: 0;
|
||||
padding: var(--space-4) var(--space-4) var(--space-6);
|
||||
background: linear-gradient(to top, var(--void) 70%, transparent);
|
||||
display: flex; gap: var(--space-3);
|
||||
}
|
||||
.btn-back-ghost {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
height: 52px; width: 52px; background: var(--deep-glass);
|
||||
color: var(--dim-light); border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg); text-decoration: none; flex-shrink: 0;
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.btn-back-ghost:hover { background: var(--twilight); }
|
||||
.btn-next-emerald {
|
||||
display: flex; align-items: center; justify-content: center; gap: var(--space-2);
|
||||
height: 52px; flex: 1; 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; transition: background 0.2s ease-out;
|
||||
}
|
||||
.btn-next-emerald:hover { background: var(--emerald-light); }
|
||||
.screen-content { padding-bottom: 120px; }
|
||||
</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="24-lens-create-step4.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">New Goal</span>
|
||||
<span class="nav-action body-sm text-dim">5 of 6</span>
|
||||
</div>
|
||||
|
||||
<div class="step-progress">
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot active"></div>
|
||||
<div class="step-dot"></div>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-top: var(--space-6);">
|
||||
<div class="step-question">Set your milestones</div>
|
||||
<div class="step-hint">Break your goal into stepping stones. Each milestone becomes an Evidence Wall tile when completed.</div>
|
||||
|
||||
<div class="milestone-item">
|
||||
<div class="milestone-number">1</div>
|
||||
<div class="milestone-inputs">
|
||||
<input type="text" class="milestone-text-input" value="Deliver team standup without notes">
|
||||
<input type="text" class="milestone-date-input" value="Target: Mar 1, 2026">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="milestone-item">
|
||||
<div class="milestone-number">2</div>
|
||||
<div class="milestone-inputs">
|
||||
<input type="text" class="milestone-text-input" value="Present sprint retro to the team">
|
||||
<input type="text" class="milestone-date-input" value="Target: Mar 15, 2026">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="milestone-item">
|
||||
<div class="milestone-number">3</div>
|
||||
<div class="milestone-inputs">
|
||||
<input type="text" class="milestone-text-input" value="Present quarterly results to department">
|
||||
<input type="text" class="milestone-date-input" value="Target: Apr 1, 2026">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="milestone-item" style="border: 1.5px dashed rgba(16,185,129,0.2);">
|
||||
<div class="milestone-number" style="opacity: 0.4;">4</div>
|
||||
<div class="milestone-inputs">
|
||||
<input type="text" class="milestone-text-input" placeholder="Add a milestone..." style="opacity: 0.7;">
|
||||
<input type="text" class="milestone-date-input" placeholder="Target date...">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="add-milestone-btn" onclick="addMilestone()">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
Add milestone
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="bottom-actions">
|
||||
<a class="btn-back-ghost" href="24-lens-create-step4.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>
|
||||
<a class="btn-next-emerald" href="26-lens-create-step6.html">
|
||||
Next
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M6 4l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function addMilestone() {
|
||||
// Would add a new milestone row
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
156
initial mockups/screens/lens/26-lens-create-step6.html
Normal file
156
initial mockups/screens/lens/26-lens-create-step6.html
Normal file
@@ -0,0 +1,156 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — New Goal Step 6</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.step-dot.active { background: var(--emerald); box-shadow: 0 0 8px rgba(16,185,129,0.4); }
|
||||
.step-dot.completed { background: var(--emerald); opacity: 0.5; }
|
||||
.nav-back { color: var(--emerald-light) !important; }
|
||||
.viz-aura {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(16,185,129,0.18) 0%, transparent 70%);
|
||||
filter: blur(50px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
.viz-kaleidoscope {
|
||||
margin: 24px auto 20px;
|
||||
display: block;
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
}
|
||||
.prompt-card {
|
||||
background: var(--kalei-navy); border: 1px solid rgba(16,185,129,0.2);
|
||||
border-radius: var(--radius-xl); padding: var(--space-5);
|
||||
margin-bottom: var(--space-4); text-align: center;
|
||||
box-shadow: 0 0 20px rgba(16,185,129,0.08);
|
||||
}
|
||||
.prompt-heading {
|
||||
font-size: 16px; font-weight: 600; color: var(--emerald-light);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.prompt-text {
|
||||
font-size: 15px; color: var(--soft-light); line-height: 1.6;
|
||||
font-style: italic;
|
||||
}
|
||||
.prompt-step {
|
||||
display: flex; align-items: flex-start; gap: 12px;
|
||||
padding: 12px 0; border-bottom: 1px solid rgba(28,34,64,0.6);
|
||||
}
|
||||
.prompt-step:last-child { border-bottom: none; }
|
||||
.prompt-step-num {
|
||||
width: 24px; height: 24px; border-radius: 50%;
|
||||
background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 12px; font-weight: 700; color: var(--emerald); flex-shrink: 0;
|
||||
}
|
||||
.prompt-step-text { font-size: 14px; color: var(--soft-light); line-height: 1.5; }
|
||||
.bottom-actions {
|
||||
position: absolute; bottom: 0; left: 0; right: 0;
|
||||
padding: var(--space-4) var(--space-4) var(--space-6);
|
||||
background: linear-gradient(to top, var(--void) 70%, transparent);
|
||||
display: flex; flex-direction: column; gap: var(--space-2);
|
||||
}
|
||||
.btn-save-emerald {
|
||||
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; transition: background 0.2s;
|
||||
}
|
||||
.btn-save-emerald:hover { background: var(--emerald-light); }
|
||||
.btn-back-row {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.btn-back-text {
|
||||
color: var(--dim-light); font-size: 14px; text-decoration: none;
|
||||
display: flex; align-items: center; gap: 4px;
|
||||
}
|
||||
.screen-content { padding-bottom: 140px; }
|
||||
</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="25-lens-create-step5.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">New Goal</span>
|
||||
<span class="nav-action body-sm text-dim">6 of 6</span>
|
||||
</div>
|
||||
|
||||
<div class="step-progress">
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot active"></div>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-top: 16px; position: relative; overflow: hidden;">
|
||||
<div class="viz-aura"></div>
|
||||
|
||||
<!-- Emerald kaleidoscope -->
|
||||
<img src="../../assets/kalei-logo.svg" width="100" height="100" alt="Kalei" class="viz-kaleidoscope" style="filter: drop-shadow(0 0 12px rgba(139,92,246,0.3));">
|
||||
|
||||
<div class="prompt-card">
|
||||
<div class="prompt-heading">Visualization Prompt</div>
|
||||
<div class="body-sm text-dim" style="margin-bottom: var(--space-4);">Take a moment to close your eyes after reading each step</div>
|
||||
|
||||
<div class="prompt-step">
|
||||
<div class="prompt-step-num">1</div>
|
||||
<div class="prompt-step-text">Find a comfortable position and take three slow, deep breaths.</div>
|
||||
</div>
|
||||
<div class="prompt-step">
|
||||
<div class="prompt-step-num">2</div>
|
||||
<div class="prompt-step-text">Picture yourself standing at the front of the room, composed and ready. Your slides are behind you. The team is watching — and you feel ready.</div>
|
||||
</div>
|
||||
<div class="prompt-step">
|
||||
<div class="prompt-step-num">3</div>
|
||||
<div class="prompt-step-text">Notice the physical sensations — your feet planted, your voice clear and even, your hands still. You are in control of this moment.</div>
|
||||
</div>
|
||||
<div class="prompt-step">
|
||||
<div class="prompt-step-num">4</div>
|
||||
<div class="prompt-step-text">Feel the satisfaction of finishing strong. Someone asks a question. You answer it. The room responds with respect. Hold that feeling.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body-sm text-dim text-center" style="line-height: 1.5;">
|
||||
Regular mental rehearsal activates the same neural pathways as physical practice.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-actions">
|
||||
<a class="btn-save-emerald" href="27-lens-goal-detail.html">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M3 9l5 5 7-8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
Save Goal
|
||||
</a>
|
||||
<div class="btn-back-row">
|
||||
<a class="btn-back-text" href="25-lens-create-step5.html">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M9 3L5 7l4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
Back to milestones
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
251
initial mockups/screens/lens/27-lens-goal-detail.html
Normal file
251
initial mockups/screens/lens/27-lens-goal-detail.html
Normal file
@@ -0,0 +1,251 @@
|
||||
<!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>
|
||||
148
initial mockups/screens/lens/28-lens-affirmation.html
Normal file
148
initial mockups/screens/lens/28-lens-affirmation.html
Normal file
@@ -0,0 +1,148 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Daily Affirmation</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.nav-back { color: var(--emerald-light) !important; }
|
||||
.affirmation-canvas {
|
||||
position: relative;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
flex: 1; padding: 0 var(--space-6); text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.em-aura-large {
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 320px; height: 320px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(16,185,129,0.18) 0%, rgba(16,185,129,0.05) 50%, transparent 70%);
|
||||
filter: blur(60px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
.em-aura-inner {
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 160px; height: 160px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(16,185,129,0.12) 0%, transparent 70%);
|
||||
filter: blur(30px);
|
||||
animation: breathing 6s ease-in-out infinite 0.5s;
|
||||
pointer-events: none;
|
||||
}
|
||||
.mini-kaleidoscope { animation: breathing 6s ease-in-out infinite; margin-bottom: var(--space-6); }
|
||||
.date-label {
|
||||
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
||||
letter-spacing: 0.08em; color: var(--emerald);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.affirmation-quote {
|
||||
font-size: 22px; font-weight: 500; color: var(--pure-light);
|
||||
line-height: 1.4; font-family: var(--font-display);
|
||||
margin-bottom: 28px; position: relative; z-index: 1;
|
||||
}
|
||||
.affirmation-quote::before {
|
||||
content: '"';
|
||||
font-size: 48px; color: var(--emerald); opacity: 0.3;
|
||||
position: absolute; top: -16px; left: -12px;
|
||||
font-family: Georgia, serif; line-height: 1;
|
||||
}
|
||||
.affirmation-subtext {
|
||||
font-size: 14px; color: var(--dim-light); line-height: 1.5;
|
||||
margin-bottom: 32px; position: relative; z-index: 1;
|
||||
}
|
||||
.reflect-btn {
|
||||
display: flex; align-items: center; justify-content: center; gap: 10px;
|
||||
height: 52px; width: 100%; max-width: 300px;
|
||||
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;
|
||||
transition: background 0.2s; position: relative; z-index: 1;
|
||||
}
|
||||
.reflect-btn:hover { background: var(--emerald-light); }
|
||||
.shard-deco {
|
||||
position: absolute; opacity: 0.15;
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
}
|
||||
.new-affirmation-link {
|
||||
position: relative; z-index: 1; margin-top: var(--space-4);
|
||||
font-size: 13px; color: var(--dim-light); text-decoration: none;
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.new-affirmation-link:hover { color: var(--emerald-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="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">Affirmation</span>
|
||||
<span class="nav-action">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" style="color: var(--dim-light);">
|
||||
<path d="M4 10h12M4 6h12M4 14h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="affirmation-canvas">
|
||||
<div class="em-aura-large"></div>
|
||||
<div class="em-aura-inner"></div>
|
||||
|
||||
<!-- Decorative shards -->
|
||||
<svg class="shard-deco" style="top: 10%; left: 5%;" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M12 2L16 12L12 22L8 12Z" fill="var(--emerald)" opacity="0.6"/>
|
||||
</svg>
|
||||
<svg class="shard-deco" style="top: 15%; right: 8%; animation-delay: 2s;" width="16" height="16" viewBox="0 0 16 16">
|
||||
<path d="M8 1L11 8L8 15L5 8Z" fill="var(--emerald)" opacity="0.5"/>
|
||||
</svg>
|
||||
<svg class="shard-deco" style="bottom: 20%; left: 10%; animation-delay: 3s;" width="20" height="20" viewBox="0 0 20 20">
|
||||
<path d="M10 2L14 10L10 18L6 10Z" fill="var(--emerald-light)" opacity="0.4"/>
|
||||
</svg>
|
||||
<svg class="shard-deco" style="bottom: 28%; right: 6%; animation-delay: 1s;" width="12" height="12" viewBox="0 0 12 12">
|
||||
<path d="M6 1L8 6L6 11L4 6Z" fill="var(--emerald)" opacity="0.5"/>
|
||||
</svg>
|
||||
|
||||
<img src="../../assets/kalei-logo.svg" width="48" height="48" alt="Kalei" class="mini-kaleidoscope">
|
||||
|
||||
<div class="date-label">Today — Feb 22, 2026</div>
|
||||
|
||||
<div class="affirmation-quote">
|
||||
I have the strength and clarity to take one step forward, even when the path isn't fully visible yet.
|
||||
</div>
|
||||
|
||||
<div class="affirmation-subtext">
|
||||
This affirmation was crafted from your goal to present with confidence and your Mirror sessions this week — you've been working through exactly what holds you back.
|
||||
</div>
|
||||
|
||||
<a class="reflect-btn" href="../mirror/15-mirror-home.html">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M9 3L12 7L13 11L9 15L5 11L6 7Z" stroke="white" fill="none" stroke-width="1.2"/>
|
||||
</svg>
|
||||
Reflect on this
|
||||
</a>
|
||||
|
||||
<a class="new-affirmation-link" href="#">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5-3.5M2 7l3.5 3.5M2 7h10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
Generate new affirmation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
258
initial mockups/screens/lens/29-rehearsal-session.html
Normal file
258
initial mockups/screens/lens/29-rehearsal-session.html
Normal file
@@ -0,0 +1,258 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Rehearsal Session</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.nav-back { color: var(--emerald-light) !important; }
|
||||
.nav-close-btn { color: var(--dim-light); cursor: pointer; }
|
||||
.session-bg {
|
||||
position: absolute; inset: 0;
|
||||
background: radial-gradient(ellipse at 50% 30%, rgba(16,185,129,0.08) 0%, transparent 65%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.timer-ring-wrap {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin: 16px auto 20px; position: relative;
|
||||
width: 76px; height: 76px;
|
||||
}
|
||||
.timer-ring-wrap svg { transform: rotate(-90deg); position: absolute; }
|
||||
.timer-text {
|
||||
position: relative; z-index: 1; text-align: center;
|
||||
}
|
||||
.timer-time { font-size: 20px; font-weight: 700; color: var(--pure-light); }
|
||||
.timer-label { font-size: 10px; color: var(--emerald); text-transform: uppercase; letter-spacing: 0.06em; }
|
||||
|
||||
.step-indicator {
|
||||
display: flex; align-items: center; justify-content: center; gap: 6px;
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.step-indicator-dot {
|
||||
width: 6px; height: 6px; border-radius: 50%; background: var(--twilight);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.step-indicator-dot.active { background: var(--emerald); width: 18px; border-radius: 3px; }
|
||||
.step-indicator-dot.done { background: var(--emerald); opacity: 0.5; }
|
||||
|
||||
.prompt-area {
|
||||
padding: var(--space-4) var(--space-5);
|
||||
text-align: center;
|
||||
animation: fadeIn 0.5s ease;
|
||||
}
|
||||
.prompt-step-tag {
|
||||
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
||||
letter-spacing: 0.06em; color: var(--emerald); margin-bottom: 12px;
|
||||
}
|
||||
.prompt-main {
|
||||
font-size: 20px; font-weight: 600; color: var(--pure-light);
|
||||
line-height: 1.4; margin-bottom: 12px; font-family: var(--font-display);
|
||||
}
|
||||
.prompt-sub {
|
||||
font-size: 15px; color: var(--dim-light); line-height: 1.6;
|
||||
}
|
||||
|
||||
.breathing-guide {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin: 24px auto 20px;
|
||||
}
|
||||
.breathing-circle {
|
||||
width: 80px; height: 80px; border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(16,185,129,0.25), rgba(16,185,129,0.05));
|
||||
border: 1.5px solid rgba(16,185,129,0.3);
|
||||
animation: breathCycle 8s ease-in-out infinite;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.breathing-circle::after {
|
||||
content: '';
|
||||
position: absolute; inset: 8px; border-radius: 50%;
|
||||
background: rgba(16,185,129,0.1);
|
||||
animation: breathCycleInner 8s ease-in-out infinite;
|
||||
}
|
||||
.breath-label {
|
||||
font-size: 12px; color: var(--emerald); font-weight: 500;
|
||||
letter-spacing: 0.05em; position: relative; z-index: 1;
|
||||
animation: breathLabel 8s ease-in-out infinite;
|
||||
}
|
||||
@keyframes breathCycle {
|
||||
0%, 100% { transform: scale(1); opacity: 0.8; }
|
||||
25% { transform: scale(1.5); opacity: 1; }
|
||||
50% { transform: scale(1.5); opacity: 1; }
|
||||
75% { transform: scale(1); opacity: 0.8; }
|
||||
}
|
||||
@keyframes breathCycleInner {
|
||||
0%, 100% { transform: scale(1); }
|
||||
25% { transform: scale(1.3); }
|
||||
50% { transform: scale(1.3); }
|
||||
75% { transform: scale(1); }
|
||||
}
|
||||
@keyframes breathLabel {
|
||||
0%, 100% { opacity: 0; }
|
||||
10% { opacity: 1; }
|
||||
24% { opacity: 1; }
|
||||
35% { opacity: 0; }
|
||||
50% { opacity: 1; }
|
||||
60% { opacity: 1; }
|
||||
72% { opacity: 0; }
|
||||
}
|
||||
|
||||
.bottom-area {
|
||||
padding: var(--space-4) var(--space-4) var(--space-6);
|
||||
display: flex; flex-direction: column; gap: var(--space-3);
|
||||
}
|
||||
.btn-next-step {
|
||||
display: flex; align-items: center; justify-content: center; gap: 10px;
|
||||
height: 56px; 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); border: none; cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.btn-next-step:hover { background: var(--emerald-light); }
|
||||
.skip-link {
|
||||
text-align: center; font-size: 13px; color: var(--dim-light);
|
||||
cursor: pointer; padding: 4px;
|
||||
}
|
||||
.skip-link:hover { color: var(--soft-light); }
|
||||
|
||||
.screen-content { padding: 0; overflow-y: hidden; display: flex; flex-direction: column; }
|
||||
</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="27-lens-goal-detail.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>
|
||||
<div style="display:flex; flex-direction:column; align-items:center; position:absolute; left:50%; transform:translateX(-50%);">
|
||||
<span class="nav-title" style="position:static; transform:none;">Rehearsal</span>
|
||||
<span style="font-size:11px; color:var(--emerald); font-weight:500;">Present with confidence</span>
|
||||
</div>
|
||||
<a class="nav-close-btn" href="20-lens-dashboard.html">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none">
|
||||
<path d="M6 6l10 10M16 6L6 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="screen-content">
|
||||
<div class="session-bg"></div>
|
||||
|
||||
<!-- Timer ring — extracted from progress-indicators.svg Timer Ring: r=30, stroke-width=3, 76px viewport -->
|
||||
<!-- Full circumference = 2π×30 = 188.5; stroke-dasharray="141 188" = 75% remaining -->
|
||||
<div class="timer-ring-wrap">
|
||||
<svg width="76" height="76" viewBox="0 0 76 76">
|
||||
<defs>
|
||||
<linearGradient id="pr29-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="38" cy="38" r="30" fill="none" stroke="var(--twilight)" stroke-width="3"/>
|
||||
<circle cx="38" cy="38" r="30" fill="none" stroke="url(#pr29-grEm)" stroke-width="3"
|
||||
stroke-dasharray="141 188" stroke-dashoffset="0" stroke-linecap="round" id="timerArc"/>
|
||||
</svg>
|
||||
<div class="timer-text">
|
||||
<div class="timer-time" id="timerDisplay">3:20</div>
|
||||
<div class="timer-label">Remaining</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step indicators -->
|
||||
<div class="step-indicator">
|
||||
<div class="step-indicator-dot done"></div>
|
||||
<div class="step-indicator-dot active"></div>
|
||||
<div class="step-indicator-dot"></div>
|
||||
<div class="step-indicator-dot"></div>
|
||||
<div class="step-indicator-dot"></div>
|
||||
</div>
|
||||
|
||||
<!-- Breathing guide -->
|
||||
<div class="breathing-guide">
|
||||
<div class="breathing-circle">
|
||||
<span class="breath-label">Breathe</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Prompt -->
|
||||
<div class="prompt-area">
|
||||
<div class="prompt-step-tag">Step 2 of 5 — Visualize</div>
|
||||
<div class="prompt-main">Picture yourself beginning the presentation</div>
|
||||
<div class="prompt-sub">Your team lead has just introduced you. You walk to the front. You look out at the room — and you feel ready. Your voice is steady. You know this material.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-area">
|
||||
<button class="btn-next-step" onclick="nextStep()">
|
||||
I can see it
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M6 4l5 5-5 5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</button>
|
||||
<div class="skip-link">Skip this step</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const steps = [
|
||||
{ tag: 'Step 1 of 5 — Settle', main: 'Find a comfortable position', sub: 'Sit upright and close your eyes when you\'re ready. Take three slow, deep breaths. Let your shoulders drop. You\'re safe here.' },
|
||||
{ tag: 'Step 2 of 5 — Visualize', main: 'Picture yourself beginning the presentation', sub: 'Your team lead has just introduced you. You walk to the front. You look out at the room — and you feel ready. Your voice is steady. You know this material.' },
|
||||
{ tag: 'Step 3 of 5 — Feel', main: 'Notice what confidence feels like in your body', sub: 'Your feet are planted. Your breathing is even. When you speak, the words come clearly. Someone nods. You make eye contact and hold it.' },
|
||||
{ tag: 'Step 4 of 5 — If-Then', main: 'Your voice starts to shake — what do you do?', sub: 'You pause. You take one slow breath. You say to yourself: "I know this material." And you continue — because you do. This is the plan working.' },
|
||||
{ tag: 'Step 5 of 5 — Return', main: 'Gently return to the present', sub: 'Take a deep breath and slowly open your eyes. That feeling of calm authority is real. It\'s yours. You can bring it into any room.' }
|
||||
];
|
||||
let currentStep = 1;
|
||||
let timeLeft = 200;
|
||||
|
||||
function nextStep() {
|
||||
if (currentStep < steps.length - 1) {
|
||||
currentStep++;
|
||||
updateUI();
|
||||
} else {
|
||||
window.location.href = '30-rehearsal-complete.html';
|
||||
}
|
||||
}
|
||||
|
||||
function updateUI() {
|
||||
const step = steps[currentStep];
|
||||
document.querySelector('.prompt-step-tag').textContent = step.tag;
|
||||
document.querySelector('.prompt-main').textContent = step.main;
|
||||
document.querySelector('.prompt-sub').textContent = step.sub;
|
||||
|
||||
document.querySelectorAll('.step-indicator-dot').forEach((dot, i) => {
|
||||
dot.className = 'step-indicator-dot';
|
||||
if (i < currentStep) dot.classList.add('done');
|
||||
else if (i === currentStep) dot.classList.add('active');
|
||||
});
|
||||
|
||||
if (currentStep === steps.length - 1) {
|
||||
document.querySelector('.btn-next-step').innerHTML = 'Complete Session <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 9l4 4 8-8" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
|
||||
}
|
||||
}
|
||||
|
||||
// Timer — circumference = 2π×30 = 188.5 (matches progress-indicators.svg Timer Ring r=30)
|
||||
const interval = setInterval(() => {
|
||||
if (timeLeft > 0) {
|
||||
timeLeft--;
|
||||
const m = Math.floor(timeLeft / 60);
|
||||
const s = timeLeft % 60;
|
||||
document.getElementById('timerDisplay').textContent = `${m}:${s.toString().padStart(2,'0')}`;
|
||||
const circumference = 188.5;
|
||||
const totalTime = 300;
|
||||
const filled = circumference * (timeLeft / totalTime);
|
||||
document.getElementById('timerArc').setAttribute('stroke-dasharray', `${filled} ${circumference}`);
|
||||
} else {
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, 1000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
267
initial mockups/screens/lens/30-rehearsal-complete.html
Normal file
267
initial mockups/screens/lens/30-rehearsal-complete.html
Normal file
@@ -0,0 +1,267 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Rehearsal Complete</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.nav-back { color: var(--emerald-light) !important; }
|
||||
.complete-hero {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
padding: 20px var(--space-4) 0; text-align: center;
|
||||
}
|
||||
.success-ring {
|
||||
position: relative; width: 90px; height: 90px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.success-ring svg { position: absolute; }
|
||||
.success-icon { position: relative; z-index: 1; }
|
||||
.complete-title {
|
||||
font-size: 26px; font-weight: 700; color: var(--pure-light);
|
||||
font-family: var(--font-display); margin-bottom: 6px;
|
||||
}
|
||||
.complete-sub {
|
||||
font-size: 15px; color: var(--dim-light); margin-bottom: var(--space-6);
|
||||
}
|
||||
.rating-section {
|
||||
width: 100%; padding: 0 var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.rating-label {
|
||||
font-size: 15px; font-weight: 600; color: var(--soft-light);
|
||||
margin-bottom: 14px; text-align: center;
|
||||
}
|
||||
.vividness-stars {
|
||||
display: flex; gap: 12px; justify-content: center; margin-bottom: 6px;
|
||||
}
|
||||
.fragment-star {
|
||||
cursor: pointer; transition: transform 0.15s;
|
||||
opacity: 0.3;
|
||||
}
|
||||
.fragment-star:hover, .fragment-star.active { opacity: 1; transform: scale(1.1); }
|
||||
.rating-hint {
|
||||
font-size: 12px; color: var(--dim-light); text-align: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.slider-section {
|
||||
width: 100%; padding: 0 var(--space-4);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.slider-label {
|
||||
font-size: 15px; font-weight: 600; color: var(--soft-light);
|
||||
margin-bottom: 12px; text-align: center;
|
||||
}
|
||||
.slider-track {
|
||||
position: relative; height: 6px; background: var(--twilight);
|
||||
border-radius: var(--radius-full); margin-bottom: 8px;
|
||||
}
|
||||
.slider-fill {
|
||||
position: absolute; left: 0; top: 0; bottom: 0;
|
||||
width: 70%; background: var(--emerald); border-radius: var(--radius-full);
|
||||
box-shadow: 0 0 8px rgba(16,185,129,0.4);
|
||||
}
|
||||
.slider-thumb {
|
||||
position: absolute; top: 50%; right: 30%; transform: translate(50%, -50%);
|
||||
width: 20px; height: 20px; border-radius: 50%;
|
||||
background: var(--emerald); box-shadow: 0 0 12px rgba(16,185,129,0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
.slider-labels {
|
||||
display: flex; justify-content: space-between;
|
||||
font-size: 12px; color: var(--dim-light);
|
||||
}
|
||||
input[type=range] {
|
||||
-webkit-appearance: none; width: 100%; height: 6px;
|
||||
background: var(--twilight); border-radius: 3px; outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
|
||||
background: var(--emerald); cursor: pointer;
|
||||
box-shadow: 0 0 10px rgba(16,185,129,0.4);
|
||||
}
|
||||
@keyframes drawRing {
|
||||
from { stroke-dashoffset: 251.3; }
|
||||
to { stroke-dashoffset: 0; }
|
||||
}
|
||||
.evidence-notification {
|
||||
margin: 0 var(--space-4) var(--space-4);
|
||||
background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(59,130,246,0.1));
|
||||
border: 1px solid rgba(16,185,129,0.3);
|
||||
border-radius: var(--radius-xl); padding: var(--space-4);
|
||||
display: flex; align-items: center; gap: var(--space-3);
|
||||
}
|
||||
.evidence-tile-preview {
|
||||
width: 52px; height: 52px; border-radius: var(--radius-md);
|
||||
background: rgba(16,185,129,0.1); border: 1.5px solid var(--emerald);
|
||||
box-shadow: 0 0 12px rgba(16,185,129,0.3);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0; animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
.evidence-info { flex: 1; }
|
||||
.evidence-title { font-size: 14px; font-weight: 600; color: var(--pure-light); margin-bottom: 3px; }
|
||||
.evidence-sub { font-size: 12px; color: var(--dim-light); }
|
||||
.done-btn {
|
||||
height: 52px; margin: 0 var(--space-4) var(--space-6);
|
||||
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; display: flex; align-items: center; justify-content: center;
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.done-btn:hover { background: var(--emerald-light); }
|
||||
.screen-content { padding: 0; }
|
||||
.em-aura {
|
||||
position: absolute; top: 10%; left: 50%; transform: translateX(-50%);
|
||||
width: 240px; height: 240px; 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;
|
||||
}
|
||||
</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="29-rehearsal-session.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">Rehearsal Complete</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="overflow-y: auto; position: relative;">
|
||||
<div class="em-aura"></div>
|
||||
|
||||
<div class="complete-hero" style="position: relative; z-index: 1;">
|
||||
<div class="success-ring">
|
||||
<svg width="90" height="90" viewBox="0 0 90 90">
|
||||
<circle cx="45" cy="45" r="40" fill="none" stroke="var(--twilight)" stroke-width="3"/>
|
||||
<circle cx="45" cy="45" r="40" fill="none" stroke="var(--emerald)" stroke-width="3"
|
||||
stroke-dasharray="251.3" stroke-dashoffset="251.3" stroke-linecap="round"
|
||||
style="animation: drawRing 1s ease 0.3s forwards;"/>
|
||||
</svg>
|
||||
<div class="success-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
|
||||
<path d="M6 16l7 7 13-14" stroke="var(--emerald)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="complete-title">Rehearsal Complete</div>
|
||||
<div class="complete-sub">Present with confidence · Quarterly Results Scenario · 5 min</div>
|
||||
</div>
|
||||
|
||||
<!-- Vividness Rating -->
|
||||
<div class="rating-section">
|
||||
<div class="rating-label">How vivid was your visualization?</div>
|
||||
<div class="vividness-stars" id="stars">
|
||||
<!-- 5 emerald MD fragment diamonds — extracted from fragment-icons.svg Emerald MD -->
|
||||
<!-- MD diamond: M 0,-12 L 12,0 L 0,12 L -12,0 Z, specular M 0,-12 L 12,0 L 0,0 Z opacity=0.18, glow filter glowMd stdDev=3 -->
|
||||
<!-- Shared defs in first SVG only — siblings share defs from same document -->
|
||||
<svg class="fragment-star" onclick="setRating(1)" width="36" height="36" viewBox="0 0 36 36">
|
||||
<defs>
|
||||
<linearGradient id="fr30-grEm" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<filter id="fr30-glowMd" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g transform="translate(18,18)" filter="url(#fr30-glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#fr30-grEm)" opacity="0.9"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||||
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||||
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
</svg>
|
||||
<svg class="fragment-star" onclick="setRating(2)" width="36" height="36" viewBox="0 0 36 36">
|
||||
<g transform="translate(18,18)" filter="url(#fr30-glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#fr30-grEm)" opacity="0.9"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||||
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||||
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
</svg>
|
||||
<svg class="fragment-star active" onclick="setRating(3)" width="36" height="36" viewBox="0 0 36 36">
|
||||
<g transform="translate(18,18)" filter="url(#fr30-glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#fr30-grEm)" opacity="0.9"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||||
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||||
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
</svg>
|
||||
<svg class="fragment-star active" onclick="setRating(4)" width="36" height="36" viewBox="0 0 36 36">
|
||||
<g transform="translate(18,18)" filter="url(#fr30-glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#fr30-grEm)" opacity="0.9"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||||
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||||
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
</svg>
|
||||
<svg class="fragment-star active" onclick="setRating(5)" width="36" height="36" viewBox="0 0 36 36">
|
||||
<g transform="translate(18,18)" filter="url(#fr30-glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#fr30-grEm)" opacity="0.9"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||||
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||||
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="rating-hint" id="ratingHint">Very vivid — you could almost feel it</div>
|
||||
</div>
|
||||
|
||||
<!-- How real slider -->
|
||||
<div class="slider-section">
|
||||
<div class="slider-label">How real did it feel?</div>
|
||||
<input type="range" min="0" max="100" value="70" id="realSlider">
|
||||
<div class="slider-labels">
|
||||
<span>Distant</span>
|
||||
<span>Very real</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Evidence Wall notification -->
|
||||
<div class="evidence-notification">
|
||||
<div class="evidence-tile-preview">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24">
|
||||
<defs><linearGradient id="gsEv" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/></linearGradient></defs>
|
||||
<circle cx="12" cy="12" r="9" fill="url(#gsEv)" opacity="0.8"/>
|
||||
<circle cx="12" cy="12" r="5" fill="none" stroke="white" stroke-width="1.2" opacity="0.6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="evidence-info">
|
||||
<div class="evidence-title">Evidence Wall tile earned!</div>
|
||||
<div class="evidence-sub">Lens Rehearsal · Circle tile added to your mosaic</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="done-btn" href="20-lens-dashboard.html">Done</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentRating = 3;
|
||||
const hints = ['', 'Hard to focus', 'Somewhat clear', 'Pretty vivid', 'Very vivid — you could almost feel it', 'Crystal clear — fully immersive'];
|
||||
|
||||
function setRating(n) {
|
||||
currentRating = n;
|
||||
document.querySelectorAll('.fragment-star').forEach((s, i) => {
|
||||
s.classList.toggle('active', i < n);
|
||||
});
|
||||
document.getElementById('ratingHint').textContent = hints[n];
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user