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:
354
initial mockups/screens/guide/65-guide-checkin-conversation.html
Normal file
354
initial mockups/screens/guide/65-guide-checkin-conversation.html
Normal file
@@ -0,0 +1,354 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Guide Check-In</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.goal-context-header {
|
||||
background: var(--kalei-navy);
|
||||
border-bottom: 1px solid var(--twilight);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.goal-context-ring {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.goal-context-ring svg { position: absolute; transform: rotate(-90deg); }
|
||||
.goal-context-pct {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--emerald-light);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.goal-context-info { flex: 1; min-width: 0; }
|
||||
.goal-context-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--emerald);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.goal-context-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.chat-frame {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chat-area {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--space-4) var(--space-4) var(--space-2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.chat-area::-webkit-scrollbar { display: none; }
|
||||
/* Guide bubble — prismatic border card */
|
||||
.guide-bubble {
|
||||
background: var(--kalei-navy);
|
||||
border-radius: 16px 16px 16px 4px;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
position: relative;
|
||||
max-width: 85%;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.guide-bubble::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: 17px 17px 17px 5px;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
z-index: -1;
|
||||
}
|
||||
.guide-bubble-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.guide-icon-sm {
|
||||
font-size: 12px;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
.guide-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--amethyst-light);
|
||||
}
|
||||
.guide-bubble p {
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
color: var(--soft-light);
|
||||
margin: 0;
|
||||
}
|
||||
.guide-bubble .stat-highlight {
|
||||
color: var(--emerald-light);
|
||||
font-weight: 600;
|
||||
}
|
||||
/* User bubble */
|
||||
.user-bubble {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: 16px 16px 4px 16px;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
max-width: 80%;
|
||||
align-self: flex-end;
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
.proof-point {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-2);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
background: rgba(16,185,129,0.06);
|
||||
border-radius: var(--radius-md);
|
||||
border-left: 2px solid var(--emerald);
|
||||
}
|
||||
.proof-point-text {
|
||||
font-size: 12px;
|
||||
color: var(--emerald-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
.if-then-block {
|
||||
background: rgba(139,92,246,0.06);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid rgba(139,92,246,0.2);
|
||||
padding: var(--space-3);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
.if-then-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--amethyst-light);
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
.if-then-text {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.input-accessory {
|
||||
height: 64px;
|
||||
background: var(--kalei-navy);
|
||||
border-top: 1px solid var(--twilight);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 0 var(--space-3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.chat-input {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 0 var(--space-4);
|
||||
font-family: var(--font-primary);
|
||||
font-size: 15px;
|
||||
color: var(--pure-light);
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease-out;
|
||||
}
|
||||
.chat-input::placeholder { color: var(--faint-light); }
|
||||
.chat-input:focus { border-color: var(--amethyst); }
|
||||
.send-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--emerald));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 0 12px rgba(139,92,246,0.3);
|
||||
transition: opacity 0.2s ease-out;
|
||||
}
|
||||
.send-btn:hover { opacity: 0.85; }
|
||||
.past-checkins-link {
|
||||
text-align: center;
|
||||
padding: var(--space-2) 0;
|
||||
font-size: 12px;
|
||||
color: var(--amethyst-light);
|
||||
text-decoration: none;
|
||||
flex-shrink: 0;
|
||||
background: var(--kalei-navy);
|
||||
border-top: 1px solid var(--twilight);
|
||||
}
|
||||
@keyframes breathing {
|
||||
0%, 100% { opacity: 0.6; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.05); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(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="../lens/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>
|
||||
<span class="nav-title">Weekly Check-In</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<!-- Goal context banner -->
|
||||
<div class="goal-context-header">
|
||||
<div class="goal-context-ring">
|
||||
<svg width="44" height="44" viewBox="0 0 44 44">
|
||||
<defs>
|
||||
<linearGradient id="ci-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="22" cy="22" r="18" fill="none" stroke="var(--twilight)" stroke-width="2.5"/>
|
||||
<!-- 65% of circumference: 2πr ≈ 113.1, 65% = 73.5, remainder = 39.6 -->
|
||||
<circle cx="22" cy="22" r="18" fill="none" stroke="url(#ci-grEm)" stroke-width="2.5"
|
||||
stroke-dasharray="73.5 39.6" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="goal-context-pct">65%</span>
|
||||
</div>
|
||||
<div class="goal-context-info">
|
||||
<div class="goal-context-label">Active Goal</div>
|
||||
<div class="goal-context-title">Present with confidence</div>
|
||||
</div>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="color: var(--faint-light); flex-shrink: 0;">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="chat-frame">
|
||||
<div class="chat-area">
|
||||
|
||||
<!-- Guide opens with specific data reference -->
|
||||
<div class="guide-bubble" style="animation: fadeIn 0.4s ease-out both;">
|
||||
<div class="guide-bubble-header">
|
||||
<span class="guide-icon-sm">◇</span>
|
||||
<span class="guide-label">The Guide</span>
|
||||
</div>
|
||||
<p>I noticed something this week, Alex. You've had <span class="stat-highlight">3 Turns about presentations</span> in the last 7 days — Wednesday's "I completely bombed my presentation" was the most recent. How did the rest of that day actually go?</p>
|
||||
</div>
|
||||
|
||||
<!-- User response -->
|
||||
<div class="user-bubble" style="animation: fadeIn 0.4s ease-out 0.15s both; opacity: 0;">
|
||||
Honestly, not as bad as I expected. My manager said the data was solid. I just froze at the start and never recovered mentally.
|
||||
</div>
|
||||
|
||||
<!-- Guide follow-up — names the pattern specifically -->
|
||||
<div class="guide-bubble" style="animation: fadeIn 0.4s ease-out 0.3s both; opacity: 0;">
|
||||
<div class="guide-bubble-header">
|
||||
<span class="guide-icon-sm">◇</span>
|
||||
<span class="guide-label">The Guide</span>
|
||||
</div>
|
||||
<p>That gap — between how you experience it and how it lands — keeps showing up. Your mind calls it a bomb; your manager calls it solid. That's Catastrophizing doing its thing.</p>
|
||||
<div class="proof-point">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M6 1L10 6L6 11L2 6Z" fill="var(--emerald)" opacity="0.9"/>
|
||||
</svg>
|
||||
<span class="proof-point-text">Catastrophizing: your most common fragment (7 of 47 Turns)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Guide asks for real-world practice check -->
|
||||
<div class="guide-bubble" style="animation: fadeIn 0.4s ease-out 0.45s both; opacity: 0;">
|
||||
<div class="guide-bubble-header">
|
||||
<span class="guide-icon-sm">◇</span>
|
||||
<span class="guide-label">The Guide</span>
|
||||
</div>
|
||||
<p>Since you started "Present with confidence" on Feb 5, have there been any moments outside the app — even tiny ones — where you held your ground in a room?</p>
|
||||
</div>
|
||||
|
||||
<!-- User response -->
|
||||
<div class="user-bubble" style="animation: fadeIn 0.4s ease-out 0.6s both; opacity: 0;">
|
||||
Yeah, actually. I pushed back on a timeline in a standup last week. Normally I'd just say nothing.
|
||||
</div>
|
||||
|
||||
<!-- Guide closes with celebration and if-then -->
|
||||
<div class="guide-bubble" style="animation: fadeIn 0.4s ease-out 0.75s both; opacity: 0;">
|
||||
<div class="guide-bubble-header">
|
||||
<span class="guide-icon-sm">◇</span>
|
||||
<span class="guide-label">The Guide</span>
|
||||
</div>
|
||||
<p>That's exactly the kind of evidence this goal is built on. Pushing back on a timeline is <span class="stat-highlight">presenting with confidence</span> — just without the slides. Want to save that as evidence?</p>
|
||||
<div class="if-then-block">
|
||||
<div class="if-then-label">This week's focus</div>
|
||||
<div class="if-then-text">If I notice I'm freezing at the start of a presentation, <strong style="color: var(--amethyst-light);">then</strong> I'll say one sentence out loud — anything — to break the silence.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<a class="past-checkins-link" href="66-guide-checkin-summary.html">View check-in summary →</a>
|
||||
|
||||
<div class="input-accessory">
|
||||
<input class="chat-input" type="text" placeholder="Reply to the Guide...">
|
||||
<button class="send-btn">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M13 8L3 3.5L5 8L3 12.5L13 8Z" fill="white"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Stagger chat bubbles on load
|
||||
document.querySelectorAll('.guide-bubble, .user-bubble').forEach((el, i) => {
|
||||
if (!el.style.animationDelay) return;
|
||||
el.style.opacity = '0';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
252
initial mockups/screens/guide/66-guide-checkin-summary.html
Normal file
252
initial mockups/screens/guide/66-guide-checkin-summary.html
Normal file
@@ -0,0 +1,252 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Check-In Summary</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
@keyframes breathing {
|
||||
0%, 100% { opacity: 0.6; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.05); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.summary-card {
|
||||
background: var(--kalei-navy);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-3);
|
||||
position: relative;
|
||||
animation: fadeIn 0.35s ease-out both;
|
||||
}
|
||||
.summary-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: 17px;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
z-index: -1;
|
||||
}
|
||||
.card-section-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.card-section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.card-section-meta {
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--twilight);
|
||||
margin: var(--space-3) 0;
|
||||
}
|
||||
/* Plan adjustment */
|
||||
.plan-adjust-block {
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.plan-adjust-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.plan-new {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
background: rgba(139,92,246,0.08);
|
||||
border: 1px solid rgba(139,92,246,0.2);
|
||||
border-radius: var(--radius-md);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.plan-new strong {
|
||||
color: var(--amethyst-light);
|
||||
}
|
||||
/* Evidence proof points */
|
||||
.proof-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.proof-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.proof-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.proof-dot.emerald { background: var(--emerald); box-shadow: 0 0 6px rgba(16,185,129,0.4); }
|
||||
.proof-dot.amber { background: var(--amber); box-shadow: 0 0 6px rgba(245,158,11,0.4); }
|
||||
.proof-dot.sapphire{ background: var(--sapphire);box-shadow: 0 0 6px rgba(59,130,246,0.4); }
|
||||
.proof-item-text {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.5;
|
||||
}
|
||||
/* Next check-in */
|
||||
.next-checkin-card {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-3);
|
||||
animation: fadeIn 0.35s ease-out 0.2s both;
|
||||
opacity: 0;
|
||||
}
|
||||
.next-checkin-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(139,92,246,0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.next-checkin-info { flex: 1; }
|
||||
.next-checkin-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--amethyst);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.next-checkin-date {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.history-footer {
|
||||
text-align: center;
|
||||
padding: var(--space-3) 0 var(--space-6);
|
||||
font-size: 12px;
|
||||
color: var(--faint-light);
|
||||
}
|
||||
.done-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 52px;
|
||||
background: var(--amethyst);
|
||||
color: var(--pure-light);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-lg);
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 20px rgba(139,92,246,0.25);
|
||||
margin-bottom: var(--space-3);
|
||||
transition: background 0.2s ease-out;
|
||||
animation: fadeIn 0.35s ease-out 0.3s both;
|
||||
opacity: 0;
|
||||
}
|
||||
.done-btn:hover { background: var(--amethyst-light); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="7" width="2.5" height="5" rx="0.5" fill="#E2E8F0" opacity="0.4"/><rect x="4.5" y="5" width="2.5" height="7" rx="0.5" fill="#E2E8F0" opacity="0.6"/><rect x="8" y="3" width="2.5" height="9" rx="0.5" fill="#E2E8F0" opacity="0.8"/><rect x="11.5" y="1" width="2.5" height="11" rx="0.5" fill="#E2E8F0"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M 2,8 C 4,4 12,4 14,8" stroke="#E2E8F0" stroke-width="1.2" fill="none" stroke-linecap="round"/><path d="M 4,10 C 6,7 10,7 12,10" stroke="#E2E8F0" stroke-width="1" fill="none" opacity="0.8" stroke-linecap="round"/><circle cx="8" cy="12" r="1.2" fill="#E2E8F0"/></svg>
|
||||
<svg width="24" height="12" viewBox="0 0 24 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#E2E8F0" stroke-width="1" opacity="0.5"/><rect x="22" y="3" width="2" height="6" rx="1" fill="#E2E8F0" opacity="0.3"/><rect x="2" y="2" width="16" height="8" rx="1.5" fill="#10B981" opacity="0.9"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-header">
|
||||
<a class="nav-back" href="65-guide-checkin-conversation.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Check-In Summary</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-top: var(--space-4); padding-bottom: var(--space-6);">
|
||||
|
||||
<!-- Main summary card with prismatic border -->
|
||||
<div class="summary-card">
|
||||
<div class="card-section-label">What was reviewed</div>
|
||||
<div class="card-section-title">Present with confidence</div>
|
||||
<div class="card-section-meta">Week of Feb 16–22, 2026 · Weekly check-in · 65% progress</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- This week's focus / if-then -->
|
||||
<div class="plan-adjust-block">
|
||||
<div class="plan-adjust-label">This week's focus</div>
|
||||
<div class="plan-new">If I notice I'm freezing at the start of a presentation, <strong>then</strong> I'll say one sentence out loud — anything — to break the silence.</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- Evidence proof points -->
|
||||
<div class="card-section-label" style="margin-bottom: var(--space-3);">Evidence highlighted</div>
|
||||
<div class="proof-list">
|
||||
<div class="proof-item">
|
||||
<div class="proof-dot emerald"></div>
|
||||
<span class="proof-item-text">Pushed back on a timeline in standup — held ground without a deck</span>
|
||||
</div>
|
||||
<div class="proof-item">
|
||||
<div class="proof-dot amber"></div>
|
||||
<span class="proof-item-text">Manager called Wednesday's presentation "solid" — the freeze was internal, not visible</span>
|
||||
</div>
|
||||
<div class="proof-item">
|
||||
<div class="proof-dot sapphire"></div>
|
||||
<span class="proof-item-text">3 Turns this week about presentations — you're naming the pattern, not avoiding it</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Next check-in -->
|
||||
<div class="next-checkin-card">
|
||||
<div class="next-checkin-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<rect x="3" y="4" width="14" height="13" rx="2" stroke="var(--amethyst)" stroke-width="1.2"/>
|
||||
<path d="M7 2v3M13 2v3" stroke="var(--amethyst)" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<path d="M3 8h14" stroke="var(--amethyst)" stroke-width="1.2"/>
|
||||
<rect x="7" y="11" width="2" height="2" rx="0.5" fill="var(--amethyst)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="next-checkin-info">
|
||||
<div class="next-checkin-label">Next check-in</div>
|
||||
<div class="next-checkin-date">Sunday, Mar 1, 2026</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="done-btn" href="../lens/27-lens-goal-detail.html">Back to goal</a>
|
||||
|
||||
<div class="history-footer">Saved to your coaching history</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
338
initial mockups/screens/guide/67-guide-bridge-discovery.html
Normal file
338
initial mockups/screens/guide/67-guide-bridge-discovery.html
Normal file
@@ -0,0 +1,338 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Guide Discovery Bridge</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.screen-aura {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(139,92,246,0.15) 0%, transparent 70%);
|
||||
filter: blur(50px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
@keyframes breathing {
|
||||
0%, 100% { opacity: 0.6; transform: scale(1) translate(-50%, -50%); }
|
||||
50% { opacity: 1; transform: scale(1.05) translate(-48%, -52%); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes slideDown {
|
||||
from { opacity: 0; transform: translateY(-16px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
/* Bridge card */
|
||||
.bridge-card {
|
||||
background: var(--kalei-navy);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
position: relative;
|
||||
animation: slideDown 0.4s ease-out both;
|
||||
z-index: 2;
|
||||
}
|
||||
.bridge-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: 17px;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
z-index: -1;
|
||||
}
|
||||
.bridge-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.bridge-card-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.bridge-guide-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(139,92,246,0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
.bridge-dismiss {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: var(--deep-glass);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
color: var(--dim-light);
|
||||
transition: background 0.2s ease-out;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.bridge-dismiss:hover { background: var(--twilight); }
|
||||
.bridge-card-heading {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
margin-left: 36px;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.bridge-card-body {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.6;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.bridge-card-body strong {
|
||||
color: var(--amber-light);
|
||||
font-weight: 600;
|
||||
}
|
||||
.bridge-actions {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.bridge-btn-primary {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: var(--amethyst);
|
||||
color: var(--pure-light);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 16px rgba(139,92,246,0.25);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.bridge-btn-primary:hover { background: var(--amethyst-light); }
|
||||
.bridge-btn-ghost {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: transparent;
|
||||
color: var(--dim-light);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--twilight);
|
||||
transition: color 0.2s ease-out, border-color 0.2s ease-out;
|
||||
}
|
||||
.bridge-btn-ghost:hover { color: var(--soft-light); border-color: rgba(255,255,255,0.15); }
|
||||
|
||||
/* Turn Home content below the bridge (dimmed) */
|
||||
.home-greeting {
|
||||
padding: var(--space-4) 0 var(--space-3);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.textarea-wrapper {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.turn-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
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-2);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s ease-out, border-color 0.2s ease-out;
|
||||
opacity: 0.65;
|
||||
}
|
||||
.turn-card-thought {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.turn-card-date {
|
||||
font-size: 11px;
|
||||
color: var(--faint-light);
|
||||
}
|
||||
.mini-kaleido-wrap {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.section-header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.section-title-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--dim-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.turn-btn-wrapper {
|
||||
position: sticky;
|
||||
bottom: calc(var(--tab-bar-height) + 12px);
|
||||
z-index: 5;
|
||||
padding: var(--space-2) 0 0;
|
||||
}
|
||||
.content-pad { padding-bottom: 80px; }
|
||||
</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 content-pad">
|
||||
<div class="screen-aura"></div>
|
||||
|
||||
<!-- Discovery bridge card at top -->
|
||||
<div class="bridge-card" style="margin-top: var(--space-4);">
|
||||
<div class="bridge-card-header">
|
||||
<div class="bridge-card-title-row">
|
||||
<div class="bridge-guide-icon">◇</div>
|
||||
</div>
|
||||
<button class="bridge-dismiss" id="dismissBtn" aria-label="Dismiss">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2 2L10 10M10 2L2 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bridge-card-heading">Work stress keeps coming up</div>
|
||||
<div class="bridge-card-body">
|
||||
I noticed work appeared in <strong>4 Mirror sessions</strong> and <strong>2 Turns</strong> this week — mostly around pressure to perform and feeling unseen. That energy could go somewhere. Want to shape it into a goal?
|
||||
</div>
|
||||
<div class="bridge-actions">
|
||||
<a class="bridge-btn-primary" href="../lens/20-lens-dashboard.html">Open Lens</a>
|
||||
<a class="bridge-btn-ghost" href="../turn/10-turn-home.html">Just noticing</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Turn Home content (dimmed, in background) -->
|
||||
<div class="home-greeting">
|
||||
<div class="heading text-pure">Good morning, Alex</div>
|
||||
<div class="body mt-1" style="color: var(--dim-light);">What's weighing on you?</div>
|
||||
</div>
|
||||
|
||||
<div class="textarea-wrapper">
|
||||
<textarea class="textarea-field" style="min-height:100px; font-size:16px;" placeholder="Something happened today..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="section-header-row">
|
||||
<span class="section-title-label">Recent Turns</span>
|
||||
</div>
|
||||
|
||||
<!-- Dimmed turn cards — canonical data, correct dates -->
|
||||
<a class="turn-card" href="../turn/13-turn-results.html">
|
||||
<div class="mini-kaleido-wrap">
|
||||
<img src="../../assets/kalei-logo.svg" width="48" height="48" alt="Kalei">
|
||||
</div>
|
||||
<div style="flex:1; overflow:hidden;">
|
||||
<div class="turn-card-thought">"I completely bombed my presentation today and everyone saw"</div>
|
||||
<div class="turn-card-date">Today · Feb 22</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="turn-card" href="../turn/13-turn-results.html">
|
||||
<div class="mini-kaleido-wrap">
|
||||
<img src="../../assets/kalei-logo.svg" width="48" height="48" alt="Kalei">
|
||||
</div>
|
||||
<div style="flex:1; overflow:hidden;">
|
||||
<div class="turn-card-thought">"Nobody at work actually cares about my ideas"</div>
|
||||
<div class="turn-card-date">Yesterday · Feb 21</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="turn-btn-wrapper">
|
||||
<a href="../turn/11-turn-input-active.html" class="btn btn-primary" style="text-decoration:none;">
|
||||
<svg width="18" height="18" viewBox="-12 -12 24 24" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="db-btnF" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#db-btnF)" opacity="0.9"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||||
</svg>
|
||||
Turn the kaleidoscope
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item active" 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 inactive" data-tab="lens" href="../lens/20-lens-dashboard.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="currentColor" fill="none" stroke-width="1.2"/><circle cx="12" cy="12" r="4" stroke="currentColor" fill="none" stroke-width="0.8"/></svg>
|
||||
<span class="tab-label">Lens</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="gallery" href="../gallery/31-gallery-all.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><rect x="3" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/></svg>
|
||||
<span class="tab-label">Gallery</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="you" href="../you/35-you-profile.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="9" r="4" stroke="currentColor" fill="none" stroke-width="1.2"/><path d="M4 20C4 16 8 14 12 14C16 14 20 16 20 20" stroke="currentColor" fill="none" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
<span class="tab-label">You</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('dismissBtn').addEventListener('click', function() {
|
||||
const card = this.closest('.bridge-card');
|
||||
card.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out, max-height 0.4s ease-out, margin 0.4s ease-out, padding 0.4s ease-out';
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(-8px)';
|
||||
card.style.maxHeight = '0';
|
||||
card.style.overflow = 'hidden';
|
||||
card.style.marginBottom = '0';
|
||||
card.style.padding = '0';
|
||||
document.querySelectorAll('.turn-card').forEach(c => c.style.opacity = '1');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
298
initial mockups/screens/guide/68-guide-bridge-reinforcement.html
Normal file
298
initial mockups/screens/guide/68-guide-bridge-reinforcement.html
Normal file
@@ -0,0 +1,298 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Guide Reinforcement Bridge</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.screen-aura {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(16,185,129,0.12) 0%, transparent 70%);
|
||||
filter: blur(50px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
@keyframes breathing {
|
||||
0%, 100% { opacity: 0.6; transform: scale(1) translate(-50%, -50%); }
|
||||
50% { opacity: 1; transform: scale(1.05) translate(-48%, -52%); }
|
||||
}
|
||||
@keyframes slideDown {
|
||||
from { opacity: 0; transform: translateY(-16px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.bridge-card {
|
||||
background: var(--kalei-navy);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
position: relative;
|
||||
animation: slideDown 0.4s ease-out both;
|
||||
z-index: 2;
|
||||
}
|
||||
.bridge-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: 17px;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
z-index: -1;
|
||||
}
|
||||
.bridge-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.bridge-guide-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(139,92,246,0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.bridge-dismiss {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: var(--deep-glass);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
color: var(--dim-light);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.bridge-dismiss:hover { background: var(--twilight); }
|
||||
.bridge-card-heading {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.bridge-card-body {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.6;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.bridge-card-body strong {
|
||||
color: var(--amethyst-light);
|
||||
font-weight: 600;
|
||||
}
|
||||
.bridge-card-body em {
|
||||
color: var(--emerald-light);
|
||||
font-style: italic;
|
||||
}
|
||||
.bridge-actions {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.bridge-btn-primary {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: var(--emerald);
|
||||
color: var(--pure-light);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 16px rgba(16,185,129,0.25);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.bridge-btn-primary:hover { background: var(--emerald-light); }
|
||||
.bridge-btn-ghost {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: transparent;
|
||||
color: var(--dim-light);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--twilight);
|
||||
transition: color 0.2s ease-out, border-color 0.2s ease-out;
|
||||
}
|
||||
.bridge-btn-ghost:hover { color: var(--soft-light); border-color: rgba(255,255,255,0.15); }
|
||||
/* Lens dashboard elements (background, dimmed) */
|
||||
.lens-heading { color: var(--emerald-light); margin-bottom: 4px; }
|
||||
.goal-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-3);
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.goal-ring-wrap {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
.goal-ring-wrap svg { transform: rotate(-90deg); position: absolute; }
|
||||
.goal-ring-pct { font-size: 14px; font-weight: 700; color: var(--pure-light); position: relative; z-index: 1; }
|
||||
.goal-info { flex: 1; min-width: 0; }
|
||||
.goal-title { font-size: 15px; font-weight: 600; color: var(--pure-light); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.goal-meta { font-size: 12px; color: var(--dim-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="7" width="2.5" height="5" rx="0.5" fill="#E2E8F0" opacity="0.4"/><rect x="4.5" y="5" width="2.5" height="7" rx="0.5" fill="#E2E8F0" opacity="0.6"/><rect x="8" y="3" width="2.5" height="9" rx="0.5" fill="#E2E8F0" opacity="0.8"/><rect x="11.5" y="1" width="2.5" height="11" rx="0.5" fill="#E2E8F0"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M 2,8 C 4,4 12,4 14,8" stroke="#E2E8F0" stroke-width="1.2" fill="none" stroke-linecap="round"/><path d="M 4,10 C 6,7 10,7 12,10" stroke="#E2E8F0" stroke-width="1" fill="none" opacity="0.8" stroke-linecap="round"/><circle cx="8" cy="12" r="1.2" fill="#E2E8F0"/></svg>
|
||||
<svg width="24" height="12" viewBox="0 0 24 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#E2E8F0" stroke-width="1" opacity="0.5"/><rect x="22" y="3" width="2" height="6" rx="1" fill="#E2E8F0" opacity="0.3"/><rect x="2" y="2" width="16" height="8" rx="1.5" fill="#10B981" opacity="0.9"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-top: var(--space-4); padding-bottom: 100px;">
|
||||
<div class="screen-aura"></div>
|
||||
<div style="position: relative; z-index: 1;">
|
||||
|
||||
<!-- Reinforcement bridge card at top -->
|
||||
<div class="bridge-card">
|
||||
<div class="bridge-card-header">
|
||||
<div class="bridge-guide-icon">◇</div>
|
||||
<button class="bridge-dismiss" id="dismissBtn" aria-label="Dismiss">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2 2L10 10M10 2L2 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bridge-card-heading">Your Turn connects to something you're building</div>
|
||||
<div class="bridge-card-body">
|
||||
Your Tuesday reframe — "I pushed back and held my ground" — is exactly the kind of evidence your goal <em>"Present with confidence"</em> is built on. You're <strong>65% there</strong>, and this week added real proof.
|
||||
</div>
|
||||
<div class="bridge-actions">
|
||||
<a class="bridge-btn-primary" href="../lens/27-lens-goal-detail.html">See the progress</a>
|
||||
<a class="bridge-btn-ghost" href="../lens/20-lens-dashboard.html">Not now</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lens dashboard content (dimmed background) -->
|
||||
<div class="heading lens-heading">Your Lens</div>
|
||||
<div class="body-sm text-dim" style="margin-bottom: var(--space-4);">3 active goals · 47 evidence tiles</div>
|
||||
|
||||
<!-- Goal 1: Present with confidence (emerald, 65%) -->
|
||||
<a class="goal-card" href="../lens/27-lens-goal-detail.html">
|
||||
<div class="goal-ring-wrap">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64">
|
||||
<defs>
|
||||
<linearGradient id="rb-grEm" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="32" cy="32" r="27" fill="none" stroke="var(--twilight)" stroke-width="3.5"/>
|
||||
<!-- 65% of 2π×27 ≈ 169.6: 65% = 110.2, remainder = 59.4 -->
|
||||
<circle cx="32" cy="32" r="27" fill="none" stroke="url(#rb-grEm)" stroke-width="3.5"
|
||||
stroke-dasharray="110.2 59.4" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="goal-ring-pct">65%</span>
|
||||
</div>
|
||||
<div class="goal-info">
|
||||
<div class="goal-title">Present with confidence</div>
|
||||
<div class="goal-meta">Started Feb 5 · 2 new tiles this week</div>
|
||||
</div>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="color: var(--faint-light); flex-shrink:0;">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- Goal 2: Set boundaries at work (sapphire, 40%) -->
|
||||
<a class="goal-card" href="../lens/27-lens-goal-detail.html">
|
||||
<div class="goal-ring-wrap">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64">
|
||||
<defs>
|
||||
<linearGradient id="rb-grSa" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/>
|
||||
<stop offset="100%" stop-color="#1D4ED8"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="32" cy="32" r="27" fill="none" stroke="var(--twilight)" stroke-width="3.5"/>
|
||||
<!-- 40% of 169.6 = 67.8, remainder = 101.8 -->
|
||||
<circle cx="32" cy="32" r="27" fill="none" stroke="url(#rb-grSa)" stroke-width="3.5"
|
||||
stroke-dasharray="67.8 101.8" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="goal-ring-pct">40%</span>
|
||||
</div>
|
||||
<div class="goal-info">
|
||||
<div class="goal-title">Set boundaries at work</div>
|
||||
<div class="goal-meta">Started Feb 10</div>
|
||||
</div>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="color: var(--faint-light); flex-shrink:0;">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item inactive" data-tab="turn" href="../turn/10-turn-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 2L20 12L12 22L4 12Z" fill="currentColor" opacity="0.9"/><path d="M12 2L20 12L12 12Z" fill="white" opacity="0.15"/></svg>
|
||||
<span class="tab-label">Turn</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="mirror" href="../mirror/15-mirror-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 3L16 8L18 14L12 19L6 14L8 8Z" stroke="currentColor" fill="none" stroke-width="1.2"/></svg>
|
||||
<span class="tab-label">Mirror</span>
|
||||
</a>
|
||||
<a class="tab-item active" data-tab="lens" href="../lens/20-lens-dashboard.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="currentColor" fill="none" stroke-width="1.2"/><circle cx="12" cy="12" r="4" stroke="currentColor" fill="none" stroke-width="0.8"/></svg>
|
||||
<span class="tab-label">Lens</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="gallery" href="../gallery/31-gallery-all.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><rect x="3" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/></svg>
|
||||
<span class="tab-label">Gallery</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="you" href="../you/35-you-profile.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="9" r="4" stroke="currentColor" fill="none" stroke-width="1.2"/><path d="M4 20C4 16 8 14 12 14C16 14 20 16 20 20" stroke="currentColor" fill="none" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
<span class="tab-label">You</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('dismissBtn').addEventListener('click', function() {
|
||||
const card = this.closest('.bridge-card');
|
||||
card.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out, max-height 0.4s ease-out, margin 0.4s ease-out, padding 0.4s ease-out';
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(-8px)';
|
||||
card.style.maxHeight = '0';
|
||||
card.style.overflow = 'hidden';
|
||||
card.style.marginBottom = '0';
|
||||
card.style.padding = '0';
|
||||
document.querySelectorAll('.goal-card').forEach(c => c.style.opacity = '1');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
293
initial mockups/screens/guide/69-guide-bridge-integration.html
Normal file
293
initial mockups/screens/guide/69-guide-bridge-integration.html
Normal file
@@ -0,0 +1,293 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Guide Integration Bridge</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.chat-area {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--space-4) var(--space-4) var(--space-2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.chat-area::-webkit-scrollbar { display: none; }
|
||||
.chat-session-frame {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(var(--device-height) - var(--status-bar-height) - var(--nav-header-height) - 64px);
|
||||
}
|
||||
.input-accessory {
|
||||
height: 64px;
|
||||
background: var(--kalei-navy);
|
||||
border-top: 1px solid var(--twilight);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 0 var(--space-3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.chat-input {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 0 var(--space-4);
|
||||
font-family: var(--font-primary);
|
||||
font-size: 15px;
|
||||
color: var(--pure-light);
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease-out;
|
||||
}
|
||||
.chat-input::placeholder { color: var(--faint-light); }
|
||||
.chat-input:focus { border-color: var(--amethyst); }
|
||||
.send-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 0 12px rgba(139,92,246,0.3);
|
||||
}
|
||||
.nav-close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--deep-glass);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(16px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
/* Integration bridge card */
|
||||
.integration-card {
|
||||
background: var(--kalei-navy);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
position: relative;
|
||||
animation: slideUp 0.45s ease-out 0.5s both;
|
||||
}
|
||||
.integration-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: 17px;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
z-index: -1;
|
||||
}
|
||||
.integration-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.integration-icon {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.integration-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.keepsake-quote {
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
color: var(--sapphire-light);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border-left: 2px solid var(--sapphire);
|
||||
background: rgba(59,130,246,0.06);
|
||||
border-radius: 0 var(--radius-md) var(--radius-md) 0;
|
||||
margin-bottom: var(--space-3);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.keepsake-meta {
|
||||
font-size: 11px;
|
||||
color: var(--faint-light);
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
.current-quote {
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
color: var(--amber-light);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border-left: 2px solid var(--amber);
|
||||
background: rgba(245,158,11,0.06);
|
||||
border-radius: 0 var(--radius-md) var(--radius-md) 0;
|
||||
margin-bottom: var(--space-3);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.current-meta {
|
||||
font-size: 11px;
|
||||
color: var(--faint-light);
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
.integration-body {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.55;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.integration-actions {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.int-btn-primary {
|
||||
flex: 1;
|
||||
height: 42px;
|
||||
background: var(--amethyst);
|
||||
color: var(--pure-light);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 14px rgba(139,92,246,0.25);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.int-btn-primary:hover { background: var(--amethyst-light); }
|
||||
.int-btn-ghost {
|
||||
flex: 1;
|
||||
height: 42px;
|
||||
background: transparent;
|
||||
color: var(--dim-light);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--twilight);
|
||||
transition: color 0.2s ease-out;
|
||||
}
|
||||
.int-btn-ghost:hover { color: var(--soft-light); }
|
||||
.session-timer {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
</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="../mirror/15-mirror-home.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;">Mirror Session</span>
|
||||
<span class="session-timer">12:47</span>
|
||||
</div>
|
||||
<a class="nav-close" href="../mirror/19-mirror-reflection.html">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<path d="M2 2L12 12M12 2L2 12" stroke="var(--dim-light)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="chat-session-frame">
|
||||
<div class="chat-area">
|
||||
|
||||
<!-- Earlier messages (faded — mirror session in progress) -->
|
||||
<div class="chat-bubble ai" style="opacity: 0.5; animation: fadeIn 0.3s ease-out both;">
|
||||
Welcome, Alex. I'm here to listen. What's been on your mind?
|
||||
</div>
|
||||
|
||||
<div class="chat-bubble user" style="opacity: 0.5; animation: fadeIn 0.3s ease-out 0.1s both;">
|
||||
I've been catastrophizing again. Every meeting I walk out of feeling like I've failed, even when nothing actually went wrong.
|
||||
</div>
|
||||
|
||||
<div class="chat-bubble ai" style="opacity: 0.5; animation: fadeIn 0.3s ease-out 0.2s both;">
|
||||
That gap between what happens and how you experience it — that sounds familiar. What does "failing" feel like in those moments?
|
||||
</div>
|
||||
|
||||
<div class="chat-bubble user" style="opacity: 0.5; animation: fadeIn 0.3s ease-out 0.3s both;">
|
||||
Like everyone noticed and I'm the only one who doesn't belong in the room.
|
||||
</div>
|
||||
|
||||
<!-- Last AI message — picks up the echo -->
|
||||
<div class="chat-bubble ai" style="animation: fadeIn 0.3s ease-out 0.4s both;">
|
||||
"Everyone noticed" — that's a pattern I've heard before. You've turned a version of this thought already, and you wrote something that pushed back on it.
|
||||
</div>
|
||||
|
||||
<!-- Integration bridge card after last message -->
|
||||
<div class="integration-card">
|
||||
<div class="integration-header">
|
||||
<span class="integration-icon">◇</span>
|
||||
<span class="integration-title">A fragment echoes a pattern from your Turns</span>
|
||||
</div>
|
||||
|
||||
<!-- Past Turn keepsake -->
|
||||
<div class="keepsake-quote">
|
||||
"Everyone sees my failures — but nobody actually told me that. I invented their reaction."
|
||||
<div class="keepsake-meta">Saved from Turn · Feb 18, 2026 · Mind Reading</div>
|
||||
</div>
|
||||
|
||||
<!-- Current Mirror fragment -->
|
||||
<div class="current-quote">
|
||||
"Everyone noticed and I'm the only one who doesn't belong."
|
||||
<div class="current-meta">Today's Mirror session · just now · Catastrophizing</div>
|
||||
</div>
|
||||
|
||||
<div class="integration-body">
|
||||
Same story, different day. The first time you named it — then reframed it. Which version is closer to what actually happened in those meetings?
|
||||
</div>
|
||||
|
||||
<div class="integration-actions">
|
||||
<a class="int-btn-primary" href="../you/40-evidence-wall-mid.html">See your Evidence Wall</a>
|
||||
<a class="int-btn-ghost" href="../mirror/16-mirror-session.html">Keep writing</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="input-accessory">
|
||||
<input class="chat-input" type="text" placeholder="Write freely...">
|
||||
<button class="send-btn">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M15 9L3 4L5.5 9L3 14L15 9Z" fill="var(--void)" stroke="none"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
273
initial mockups/screens/guide/70-guide-attention-prompt.html
Normal file
273
initial mockups/screens/guide/70-guide-attention-prompt.html
Normal file
@@ -0,0 +1,273 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Guide Attention Prompt</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(139,92,246,0.12) 0%, transparent 70%);
|
||||
filter: blur(50px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
@keyframes breathing {
|
||||
0%, 100% { opacity: 0.6; transform: scale(1) translate(-50%, -50%); }
|
||||
50% { opacity: 1; transform: scale(1.05) translate(-48%, -52%); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(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;
|
||||
text-decoration: none;
|
||||
transition: border-color 0.2s ease-out;
|
||||
}
|
||||
.goal-card:hover { border-color: rgba(16,185,129,0.4); }
|
||||
.goal-ring-wrap {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
.goal-ring-wrap svg { transform: rotate(-90deg); position: absolute; }
|
||||
.goal-ring-pct { font-size: 14px; font-weight: 700; color: var(--pure-light); position: relative; z-index: 1; }
|
||||
.goal-info { flex: 1; min-width: 0; }
|
||||
.goal-title { font-size: 15px; font-weight: 600; color: var(--pure-light); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.goal-meta { font-size: 12px; color: var(--dim-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
/* Attention prompt card */
|
||||
.attention-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid rgba(139,92,246,0.35);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-3);
|
||||
box-shadow: 0 0 20px rgba(139,92,246,0.08);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
animation: fadeIn 0.35s ease-out 0.1s both;
|
||||
}
|
||||
.attention-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--amethyst), var(--sapphire), var(--emerald), transparent);
|
||||
opacity: 0.7;
|
||||
}
|
||||
.attention-label-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.attention-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--amethyst);
|
||||
box-shadow: 0 0 8px rgba(139,92,246,0.5);
|
||||
animation: breathingDot 2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes breathingDot {
|
||||
0%, 100% { box-shadow: 0 0 4px rgba(139,92,246,0.3); }
|
||||
50% { box-shadow: 0 0 12px rgba(139,92,246,0.7); }
|
||||
}
|
||||
.attention-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--amethyst-light);
|
||||
}
|
||||
.attention-heading {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.attention-body {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.65;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.attention-footer {
|
||||
font-size: 12px;
|
||||
color: var(--faint-light);
|
||||
font-style: italic;
|
||||
padding-top: var(--space-2);
|
||||
border-top: 1px solid var(--twilight);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.attention-footer span {
|
||||
color: var(--amethyst-light);
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
}
|
||||
.attention-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.got-it-btn {
|
||||
height: 48px;
|
||||
background: var(--amethyst);
|
||||
color: var(--pure-light);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 18px rgba(139,92,246,0.25);
|
||||
transition: background 0.2s ease-out;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-family: var(--font-primary);
|
||||
width: 100%;
|
||||
}
|
||||
.got-it-btn:hover { background: var(--amethyst-light); }
|
||||
.log-btn {
|
||||
height: 44px;
|
||||
background: var(--deep-glass);
|
||||
color: var(--amethyst-light);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border: 1px solid rgba(139,92,246,0.25);
|
||||
transition: border-color 0.2s ease-out;
|
||||
}
|
||||
.log-btn:hover { border-color: var(--amethyst); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="7" width="2.5" height="5" rx="0.5" fill="#E2E8F0" opacity="0.4"/><rect x="4.5" y="5" width="2.5" height="7" rx="0.5" fill="#E2E8F0" opacity="0.6"/><rect x="8" y="3" width="2.5" height="9" rx="0.5" fill="#E2E8F0" opacity="0.8"/><rect x="11.5" y="1" width="2.5" height="11" rx="0.5" fill="#E2E8F0"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M 2,8 C 4,4 12,4 14,8" stroke="#E2E8F0" stroke-width="1.2" fill="none" stroke-linecap="round"/><path d="M 4,10 C 6,7 10,7 12,10" stroke="#E2E8F0" stroke-width="1" fill="none" opacity="0.8" stroke-linecap="round"/><circle cx="8" cy="12" r="1.2" fill="#E2E8F0"/></svg>
|
||||
<svg width="24" height="12" viewBox="0 0 24 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#E2E8F0" stroke-width="1" opacity="0.5"/><rect x="22" y="3" width="2" height="6" rx="1" fill="#E2E8F0" opacity="0.3"/><rect x="2" y="2" width="16" height="8" rx="1.5" fill="#10B981" opacity="0.9"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-top: var(--space-4); padding-bottom: 100px;">
|
||||
<div class="screen-aura"></div>
|
||||
<div style="position: relative; z-index: 1;">
|
||||
|
||||
<div class="heading lens-heading">Your Lens</div>
|
||||
<div class="body-sm text-dim" style="margin-bottom: var(--space-4);">3 active goals · 47 evidence tiles</div>
|
||||
|
||||
<!-- Goal card — Present with confidence (emerald, 65%) -->
|
||||
<a class="goal-card" href="../lens/27-lens-goal-detail.html">
|
||||
<div class="goal-ring-wrap">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64">
|
||||
<defs>
|
||||
<linearGradient id="ap-grEm" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="32" cy="32" r="27" fill="none" stroke="var(--twilight)" stroke-width="3.5"/>
|
||||
<!-- 65% of 2π×27 ≈ 169.6: 65% = 110.2, remainder = 59.4 -->
|
||||
<circle cx="32" cy="32" r="27" fill="none" stroke="url(#ap-grEm)" stroke-width="3.5"
|
||||
stroke-dasharray="110.2 59.4" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="goal-ring-pct">65%</span>
|
||||
</div>
|
||||
<div class="goal-info">
|
||||
<div class="goal-title">Present with confidence</div>
|
||||
<div class="goal-meta">Started Feb 5 · 2 new tiles this week</div>
|
||||
</div>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="color: var(--faint-light); flex-shrink:0;">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- Attention prompt card below goals -->
|
||||
<div class="attention-card">
|
||||
<div class="attention-label-row">
|
||||
<div class="attention-dot"></div>
|
||||
<span class="attention-label">Today's Focus: Notice</span>
|
||||
</div>
|
||||
<div class="attention-heading">Notice when you catch yourself catastrophizing</div>
|
||||
<div class="attention-body">
|
||||
Today, see if you can catch the moment your mind jumps from "this went badly" to "everything is ruined." You don't need to stop it — just notice the leap. The awareness itself is the practice.
|
||||
</div>
|
||||
<div class="attention-footer">
|
||||
Linked to your fragment: <span>Catastrophizing (7 of 47 Turns)</span>
|
||||
</div>
|
||||
<div class="attention-actions">
|
||||
<button class="got-it-btn" id="gotItBtn">Got it</button>
|
||||
<a class="log-btn" href="71-guide-moment-log.html" id="logBtn" style="display: none;">Log a moment</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item inactive" data-tab="turn" href="../turn/10-turn-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 2L20 12L12 22L4 12Z" fill="currentColor" opacity="0.9"/><path d="M12 2L20 12L12 12Z" fill="white" opacity="0.15"/></svg>
|
||||
<span class="tab-label">Turn</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="mirror" href="../mirror/15-mirror-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 3L16 8L18 14L12 19L6 14L8 8Z" stroke="currentColor" fill="none" stroke-width="1.2"/></svg>
|
||||
<span class="tab-label">Mirror</span>
|
||||
</a>
|
||||
<a class="tab-item active" data-tab="lens" href="../lens/20-lens-dashboard.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="currentColor" fill="none" stroke-width="1.2"/><circle cx="12" cy="12" r="4" stroke="currentColor" fill="none" stroke-width="0.8"/></svg>
|
||||
<span class="tab-label">Lens</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="gallery" href="../gallery/31-gallery-all.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><rect x="3" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/></svg>
|
||||
<span class="tab-label">Gallery</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="you" href="../you/35-you-profile.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="9" r="4" stroke="currentColor" fill="none" stroke-width="1.2"/><path d="M4 20C4 16 8 14 12 14C16 14 20 16 20 20" stroke="currentColor" fill="none" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
<span class="tab-label">You</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('gotItBtn').addEventListener('click', function() {
|
||||
this.textContent = 'Noted';
|
||||
this.style.background = 'rgba(139,92,246,0.4)';
|
||||
this.style.pointerEvents = 'none';
|
||||
document.getElementById('logBtn').style.display = 'flex';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
281
initial mockups/screens/guide/71-guide-moment-log.html
Normal file
281
initial mockups/screens/guide/71-guide-moment-log.html
Normal file
@@ -0,0 +1,281 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Log a Moment</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
@keyframes breathing {
|
||||
0%, 100% { opacity: 0.6; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.05); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes tileGlow {
|
||||
0%, 100% { box-shadow: 0 0 8px rgba(139,92,246,0.2); }
|
||||
50% { box-shadow: 0 0 24px rgba(139,92,246,0.5); }
|
||||
}
|
||||
.reminder-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid rgba(139,92,246,0.2);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
margin-bottom: var(--space-5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.reminder-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(139,92,246,0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.reminder-text {
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.reminder-text strong {
|
||||
color: var(--soft-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
.input-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.moment-textarea {
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
font-family: var(--font-primary);
|
||||
font-size: 16px;
|
||||
color: var(--pure-light);
|
||||
resize: none;
|
||||
outline: none;
|
||||
line-height: 1.6;
|
||||
transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.moment-textarea::placeholder { color: var(--faint-light); }
|
||||
.moment-textarea:focus {
|
||||
border-color: var(--amethyst);
|
||||
box-shadow: 0 0 0 3px rgba(139,92,246,0.1);
|
||||
}
|
||||
.logged-entry {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.logged-entry-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--faint-light);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.logged-entry-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.logged-entry-meta {
|
||||
font-size: 12px;
|
||||
color: var(--faint-light);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
/* Confirmation card */
|
||||
.confirmation-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid rgba(139,92,246,0.3);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
box-shadow: 0 0 16px rgba(139,92,246,0.08);
|
||||
}
|
||||
.confirmation-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.confirmation-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: rgba(139,92,246,0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.confirmation-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--amethyst-light);
|
||||
}
|
||||
.confirmation-body {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.6;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
/* Evidence tile preview */
|
||||
.evidence-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3);
|
||||
background: rgba(139,92,246,0.05);
|
||||
border: 1px solid rgba(139,92,246,0.15);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
.evidence-tile-mini {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--amethyst);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
animation: tileGlow 3s ease-in-out infinite;
|
||||
}
|
||||
.evidence-tile-info { flex: 1; }
|
||||
.evidence-tile-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--amethyst);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.evidence-tile-text {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
.save-btn {
|
||||
height: 52px;
|
||||
background: var(--amethyst);
|
||||
color: var(--pure-light);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 20px rgba(139,92,246,0.25);
|
||||
margin-bottom: var(--space-3);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.save-btn:hover { background: var(--amethyst-light); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="7" width="2.5" height="5" rx="0.5" fill="#E2E8F0" opacity="0.4"/><rect x="4.5" y="5" width="2.5" height="7" rx="0.5" fill="#E2E8F0" opacity="0.6"/><rect x="8" y="3" width="2.5" height="9" rx="0.5" fill="#E2E8F0" opacity="0.8"/><rect x="11.5" y="1" width="2.5" height="11" rx="0.5" fill="#E2E8F0"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M 2,8 C 4,4 12,4 14,8" stroke="#E2E8F0" stroke-width="1.2" fill="none" stroke-linecap="round"/><path d="M 4,10 C 6,7 10,7 12,10" stroke="#E2E8F0" stroke-width="1" fill="none" opacity="0.8" stroke-linecap="round"/><circle cx="8" cy="12" r="1.2" fill="#E2E8F0"/></svg>
|
||||
<svg width="24" height="12" viewBox="0 0 24 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#E2E8F0" stroke-width="1" opacity="0.5"/><rect x="22" y="3" width="2" height="6" rx="1" fill="#E2E8F0" opacity="0.3"/><rect x="2" y="2" width="16" height="8" rx="1.5" fill="#10B981" opacity="0.9"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-header">
|
||||
<a class="nav-back" href="70-guide-attention-prompt.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">Log a Moment</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-top: var(--space-4); padding-bottom: var(--space-8);">
|
||||
|
||||
<!-- Today's prompt reminder -->
|
||||
<div class="reminder-card">
|
||||
<div class="reminder-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<circle cx="9" cy="9" r="7" stroke="var(--amethyst)" stroke-width="1.2"/>
|
||||
<path d="M9 5v4l3 2" stroke="var(--amethyst)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="reminder-text">
|
||||
Today's prompt: <strong>Notice when you catch yourself catastrophizing</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text input -->
|
||||
<div class="input-label">What did you notice?</div>
|
||||
<textarea class="moment-textarea" placeholder="Describe the moment — what happened, when, what the leap looked like..."></textarea>
|
||||
|
||||
<!-- Mock logged entry (shown as already submitted) -->
|
||||
<div class="logged-entry">
|
||||
<div class="logged-entry-label">Logged today</div>
|
||||
<div class="logged-entry-text">"After the standup I immediately thought 'everyone thinks I'm incompetent now.' Then I caught it — nobody actually said that. My manager even nodded when I pushed back on the timeline."</div>
|
||||
<div class="logged-entry-meta">Today, 10:14 AM · Catastrophizing · Present with confidence</div>
|
||||
</div>
|
||||
|
||||
<!-- Confirmation card -->
|
||||
<div class="confirmation-card">
|
||||
<div class="confirmation-header">
|
||||
<div class="confirmation-icon">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M3 8l3.5 3.5L13 4" stroke="var(--amethyst)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="confirmation-title">That's the pattern — and you saw it</span>
|
||||
</div>
|
||||
<div class="confirmation-body">
|
||||
Catching the leap between "this went badly" and "everything is ruined" — that's awareness in action. You don't have to stop it every time. Noticing it is enough. Added to your Evidence Wall.
|
||||
</div>
|
||||
<!-- Evidence wall tile preview -->
|
||||
<div class="evidence-preview">
|
||||
<div class="evidence-tile-mini">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<linearGradient id="ml-grAm" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M12 2L20 12L12 22L4 12Z" fill="url(#ml-grAm)" opacity="0.9"/>
|
||||
<path d="M12 2L20 12L12 12Z" fill="#fff" opacity="0.15"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="evidence-tile-info">
|
||||
<div class="evidence-tile-label">New tile earned</div>
|
||||
<div class="evidence-tile-text">Moment logged · Feb 22, 2026</div>
|
||||
</div>
|
||||
<a href="../you/40-evidence-wall-mid.html" style="font-size: 12px; color: var(--amethyst-light); text-decoration: none; white-space: nowrap;">View wall →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="save-btn" href="../lens/20-lens-dashboard.html">Done</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
272
initial mockups/screens/guide/72-guide-evidence-mirror.html
Normal file
272
initial mockups/screens/guide/72-guide-evidence-mirror.html
Normal file
@@ -0,0 +1,272 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Guide Evidence (Mirror)</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
@keyframes breathing {
|
||||
0%, 100% { opacity: 0.5; transform: scale(1); }
|
||||
50% { opacity: 0.8; transform: scale(1.03); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
/* Mirror Reflection base styles (dimmed context) */
|
||||
.reflection-section {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-3);
|
||||
opacity: 0.7;
|
||||
}
|
||||
.reflection-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--amber-light);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.reflection-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.65;
|
||||
}
|
||||
.theme-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
.theme-chip {
|
||||
background: rgba(245,158,11,0.1);
|
||||
color: var(--amber-light);
|
||||
border: 1px solid rgba(245,158,11,0.2);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
/* Evidence intervention card */
|
||||
.evidence-card {
|
||||
background: var(--kalei-navy);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-3);
|
||||
position: relative;
|
||||
animation: slideUp 0.4s ease-out both;
|
||||
}
|
||||
.evidence-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: 17px;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
z-index: -1;
|
||||
}
|
||||
.evidence-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.evidence-guide-icon {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.evidence-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.evidence-intro {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.6;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
/* Proof points */
|
||||
.proof-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.proof-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
background: var(--deep-glass);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.proof-number {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
}
|
||||
.proof-number.emerald {
|
||||
background: rgba(16,185,129,0.15);
|
||||
color: var(--emerald-light);
|
||||
box-shadow: 0 0 8px rgba(16,185,129,0.2);
|
||||
}
|
||||
.proof-number.amber {
|
||||
background: rgba(245,158,11,0.15);
|
||||
color: var(--amber-light);
|
||||
box-shadow: 0 0 8px rgba(245,158,11,0.2);
|
||||
}
|
||||
.proof-number.sapphire {
|
||||
background: rgba(59,130,246,0.15);
|
||||
color: var(--sapphire-light);
|
||||
box-shadow: 0 0 8px rgba(59,130,246,0.2);
|
||||
}
|
||||
.proof-text {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.55;
|
||||
}
|
||||
.proof-text strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
.evidence-actions {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.ev-btn-primary {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: var(--amethyst);
|
||||
color: var(--pure-light);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 14px rgba(139,92,246,0.25);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.ev-btn-primary:hover { background: var(--amethyst-light); }
|
||||
.ev-btn-ghost {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: transparent;
|
||||
color: var(--dim-light);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--twilight);
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease-out;
|
||||
}
|
||||
.ev-btn-ghost:hover { color: var(--soft-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="../mirror/16-mirror-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">Reflection</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-top: var(--space-4); padding-bottom: var(--space-8);">
|
||||
|
||||
<!-- Mirror reflection context (dimmed) -->
|
||||
<div class="reflection-section">
|
||||
<div class="reflection-label">Your session themes</div>
|
||||
<div class="reflection-text">Workplace pressure and self-worth ran through today's session — particularly around visibility and being taken seriously.</div>
|
||||
<div class="theme-chips">
|
||||
<span class="theme-chip">Self-doubt</span>
|
||||
<span class="theme-chip">Work pressure</span>
|
||||
<span class="theme-chip">Catastrophizing</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reflection-section">
|
||||
<div class="reflection-label">Fragment detected</div>
|
||||
<div class="reflection-text">"Nobody takes me seriously at work" — this came up twice today. Mind Reading pattern, with no supporting evidence cited.</div>
|
||||
</div>
|
||||
|
||||
<!-- Evidence intervention card -->
|
||||
<div class="evidence-card">
|
||||
<div class="evidence-header">
|
||||
<span class="evidence-guide-icon">◇</span>
|
||||
<span class="evidence-title">Here's what I've seen</span>
|
||||
</div>
|
||||
<div class="evidence-intro">
|
||||
You said nobody takes you seriously. Your own record says something different:
|
||||
</div>
|
||||
<div class="proof-list">
|
||||
<div class="proof-item">
|
||||
<div class="proof-number emerald">1</div>
|
||||
<div class="proof-text"><strong>14-day Mirror streak</strong> — you've shown up to reflect every single day this month. That's not someone who doesn't take themselves seriously.</div>
|
||||
</div>
|
||||
<div class="proof-item">
|
||||
<div class="proof-number amber">2</div>
|
||||
<div class="proof-text"><strong>47 Turns completed</strong> — each one is you choosing to examine a thought instead of just living inside it.</div>
|
||||
</div>
|
||||
<div class="proof-item">
|
||||
<div class="proof-number sapphire">3</div>
|
||||
<div class="proof-text"><strong>Mind Reading appears 4 times</strong> in your fragments — you've been naming this pattern. Naming it is the first move.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="evidence-actions">
|
||||
<a class="ev-btn-primary" href="../you/40-evidence-wall-mid.html">See your full Evidence Wall</a>
|
||||
<button class="ev-btn-ghost" id="dismissEvidence">Maybe later</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('dismissEvidence').addEventListener('click', function() {
|
||||
const card = this.closest('.evidence-card');
|
||||
card.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(-8px)';
|
||||
setTimeout(() => card.style.display = 'none', 300);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
252
initial mockups/screens/guide/73-guide-evidence-turn.html
Normal file
252
initial mockups/screens/guide/73-guide-evidence-turn.html
Normal file
@@ -0,0 +1,252 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Guide Evidence (Turn)</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
@keyframes breathing {
|
||||
0%, 100% { opacity: 0.6; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.05); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(16px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
/* Turn results base (dimmed context) */
|
||||
.turn-original-thought {
|
||||
font-size: 15px;
|
||||
color: var(--dim-light);
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
padding: var(--space-4) var(--space-2);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.reframe-block {
|
||||
background: var(--kalei-navy);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-3);
|
||||
opacity: 0.75;
|
||||
}
|
||||
.reframe-block.amethyst { border-left: 3px solid var(--amethyst); }
|
||||
.reframe-block.sapphire { border-left: 3px solid var(--sapphire); }
|
||||
.reframe-block.emerald { border-left: 3px solid var(--emerald); }
|
||||
.reframe-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.amethyst .reframe-label { color: var(--amethyst-light); }
|
||||
.sapphire .reframe-label { color: var(--sapphire-light); }
|
||||
.emerald .reframe-label { color: var(--emerald-light); }
|
||||
.reframe-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.6;
|
||||
}
|
||||
/* Evidence intervention card */
|
||||
.evidence-card {
|
||||
background: var(--kalei-navy);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-3);
|
||||
position: relative;
|
||||
animation: slideUp 0.4s ease-out 0.2s both;
|
||||
}
|
||||
.evidence-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: 17px;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
z-index: -1;
|
||||
}
|
||||
.evidence-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.evidence-guide-icon {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.evidence-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.evidence-intro {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.6;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.keepsake-quote {
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
color: var(--sapphire-light);
|
||||
padding: var(--space-3);
|
||||
border-left: 2px solid var(--sapphire);
|
||||
background: rgba(59,130,246,0.06);
|
||||
border-radius: 0 var(--radius-md) var(--radius-md) 0;
|
||||
margin-bottom: var(--space-3);
|
||||
line-height: 1.65;
|
||||
}
|
||||
.keepsake-meta {
|
||||
font-size: 11px;
|
||||
color: var(--faint-light);
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
.evidence-stat {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
background: rgba(16,185,129,0.06);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.evidence-stat strong {
|
||||
color: var(--emerald-light);
|
||||
font-weight: 600;
|
||||
}
|
||||
/* Action buttons at bottom */
|
||||
.turn-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
.save-btn {
|
||||
height: 52px;
|
||||
background: var(--amethyst);
|
||||
color: var(--pure-light);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 20px rgba(139,92,246,0.25);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.save-btn:hover { background: var(--amethyst-light); }
|
||||
.share-btn {
|
||||
height: 44px;
|
||||
background: var(--deep-glass);
|
||||
color: var(--soft-light);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--twilight);
|
||||
}
|
||||
.screen-aura {
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(139,92,246,0.12) 0%, transparent 70%);
|
||||
filter: blur(40px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
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="../turn/10-turn-home.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">Your Turn</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-top: 0; padding-bottom: var(--space-8);">
|
||||
<div class="screen-aura"></div>
|
||||
|
||||
<!-- Canonical Turn from Feb 22 -->
|
||||
<div class="turn-original-thought">"I completely bombed my presentation today and everyone saw"</div>
|
||||
|
||||
<!-- Reframe blocks (dimmed context) -->
|
||||
<div class="reframe-block amethyst">
|
||||
<div class="reframe-label">Perspective Shift</div>
|
||||
<div class="reframe-text">Your manager said the data was solid. What if "bombed" is only the feeling — not what actually landed?</div>
|
||||
</div>
|
||||
|
||||
<div class="reframe-block sapphire">
|
||||
<div class="reframe-label">Evidence Check</div>
|
||||
<div class="reframe-text">Who told you everyone saw? What specific reaction are you basing this on — a word, a look, a silence?</div>
|
||||
</div>
|
||||
|
||||
<div class="reframe-block emerald">
|
||||
<div class="reframe-label">Action Step</div>
|
||||
<div class="reframe-text">Before your next presentation, write down one thing you want people to take away — not how you want to seem.</div>
|
||||
</div>
|
||||
|
||||
<!-- Evidence intervention card -->
|
||||
<div class="evidence-card">
|
||||
<div class="evidence-header">
|
||||
<span class="evidence-guide-icon">◇</span>
|
||||
<span class="evidence-title">Something interesting</span>
|
||||
</div>
|
||||
<div class="evidence-intro">
|
||||
This thought — "I bombed and everyone saw" — is Catastrophizing. You've Turned this exact shape before, and you kept something worth reading again:
|
||||
</div>
|
||||
<div class="keepsake-quote">
|
||||
"The gap between how I felt in that meeting and what anyone actually said out loud was enormous. The catastrophe lived entirely in my head."
|
||||
<div class="keepsake-meta">Saved keepsake · Feb 14, 2026 · Catastrophizing</div>
|
||||
</div>
|
||||
<div class="evidence-stat">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<path d="M2 7l3 3L12 3" stroke="var(--emerald)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
You've caught this fragment <strong>7 times</strong> now. Each time you name it, it gets a little smaller.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Standard turn action buttons -->
|
||||
<div class="turn-actions">
|
||||
<a class="save-btn" href="../turn/13-turn-results.html">Save this Turn</a>
|
||||
<a class="share-btn" href="../turn/13-turn-results.html">Share pattern</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
378
initial mockups/screens/guide/74-guide-pulse-report.html
Normal file
378
initial mockups/screens/guide/74-guide-pulse-report.html
Normal file
@@ -0,0 +1,378 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Weekly Pulse (Step 1)</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
@keyframes breathing {
|
||||
0%, 100% { opacity: 0.5; transform: scale(1) translate(-50%, -50%); }
|
||||
50% { opacity: 0.9; transform: scale(1.08) translate(-46%, -54%); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes diamondPulse {
|
||||
0%, 100% { filter: drop-shadow(0 0 4px rgba(245,158,11,0.2)); }
|
||||
50% { filter: drop-shadow(0 0 14px rgba(245,158,11,0.6)); }
|
||||
}
|
||||
.pulse-frame {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding: 0 var(--space-4) var(--space-6);
|
||||
}
|
||||
.step-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-4) 0 var(--space-2);
|
||||
}
|
||||
.step-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.step-dots {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
.step-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--twilight);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.step-dot.active {
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--emerald));
|
||||
box-shadow: 0 0 8px rgba(139,92,246,0.4);
|
||||
}
|
||||
.step-dot.complete { background: var(--dim-light); }
|
||||
.pulse-heading {
|
||||
font-family: var(--font-display);
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--pure-light);
|
||||
margin-bottom: var(--space-2);
|
||||
letter-spacing: -0.01em;
|
||||
animation: fadeIn 0.4s ease-out 0.1s both;
|
||||
opacity: 0;
|
||||
}
|
||||
.pulse-subheading {
|
||||
font-size: 15px;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: var(--space-6);
|
||||
animation: fadeIn 0.4s ease-out 0.2s both;
|
||||
opacity: 0;
|
||||
}
|
||||
/* Diamond scale */
|
||||
.diamond-scale {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-5);
|
||||
animation: fadeIn 0.4s ease-out 0.3s both;
|
||||
opacity: 0;
|
||||
}
|
||||
.scale-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
}
|
||||
.scale-item svg {
|
||||
transition: transform 0.2s ease-out, filter 0.2s ease-out;
|
||||
}
|
||||
.scale-item:hover svg { transform: scale(1.1); }
|
||||
.scale-item.selected svg {
|
||||
animation: diamondPulse 2.5s ease-in-out infinite;
|
||||
}
|
||||
.scale-label {
|
||||
font-size: 10px;
|
||||
color: var(--faint-light);
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.scale-item.selected .scale-label {
|
||||
color: var(--amber-light);
|
||||
font-weight: 600;
|
||||
}
|
||||
/* Gradient background auras */
|
||||
.bg-aura-1 {
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
left: 30%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(139,92,246,0.1) 0%, transparent 70%);
|
||||
filter: blur(50px);
|
||||
animation: breathing 7s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
.bg-aura-2 {
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 60%;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(245,158,11,0.08) 0%, transparent 70%);
|
||||
filter: blur(40px);
|
||||
animation: breathing 9s ease-in-out infinite 2s;
|
||||
pointer-events: none;
|
||||
}
|
||||
/* Write-in field */
|
||||
.writein-label {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: var(--space-2);
|
||||
animation: fadeIn 0.4s ease-out 0.4s both;
|
||||
opacity: 0;
|
||||
}
|
||||
.writein-input {
|
||||
width: 100%;
|
||||
height: 72px;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
font-family: var(--font-primary);
|
||||
font-size: 14px;
|
||||
color: var(--pure-light);
|
||||
resize: none;
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
|
||||
margin-bottom: var(--space-5);
|
||||
animation: fadeIn 0.4s ease-out 0.45s both;
|
||||
opacity: 0;
|
||||
}
|
||||
.writein-input::placeholder { color: var(--faint-light); }
|
||||
.writein-input:focus {
|
||||
border-color: rgba(139,92,246,0.4);
|
||||
box-shadow: 0 0 0 3px rgba(139,92,246,0.08);
|
||||
}
|
||||
.next-btn {
|
||||
height: 52px;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire));
|
||||
color: var(--pure-light);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 24px rgba(139,92,246,0.25);
|
||||
margin-top: auto;
|
||||
transition: opacity 0.2s ease-out;
|
||||
animation: fadeIn 0.4s ease-out 0.5s both;
|
||||
opacity: 0;
|
||||
}
|
||||
.next-btn:hover { opacity: 0.88; }
|
||||
.close-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--deep-glass);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* Week recap mini-stats */
|
||||
.week-recap {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-4);
|
||||
animation: fadeIn 0.4s ease-out 0.25s both;
|
||||
opacity: 0;
|
||||
}
|
||||
.recap-stat {
|
||||
flex: 1;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
text-align: center;
|
||||
}
|
||||
.recap-num {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--pure-light);
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.recap-lbl {
|
||||
font-size: 10px;
|
||||
color: var(--dim-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
<!-- Background auras -->
|
||||
<div class="bg-aura-1"></div>
|
||||
<div class="bg-aura-2"></div>
|
||||
|
||||
<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="pulse-frame">
|
||||
<div class="step-indicator">
|
||||
<span class="step-label">Step 1 of 3</span>
|
||||
<div class="step-dots">
|
||||
<div class="step-dot active"></div>
|
||||
<div class="step-dot"></div>
|
||||
<div class="step-dot"></div>
|
||||
</div>
|
||||
<a class="close-btn" href="../turn/10-turn-home.html">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2 2L10 10M10 2L2 10" stroke="var(--dim-light)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="pulse-heading">Your Weekly Pulse</div>
|
||||
<div class="pulse-subheading">Feb 16–22, 2026 · How did this week feel?</div>
|
||||
|
||||
<!-- Week at-a-glance stats -->
|
||||
<div class="week-recap">
|
||||
<div class="recap-stat">
|
||||
<span class="recap-num" style="color: var(--amethyst-light);">14</span>
|
||||
<span class="recap-lbl">Turns</span>
|
||||
</div>
|
||||
<div class="recap-stat">
|
||||
<span class="recap-num" style="color: var(--sapphire-light);">5</span>
|
||||
<span class="recap-lbl">Mirror</span>
|
||||
</div>
|
||||
<div class="recap-stat">
|
||||
<span class="recap-num" style="color: var(--emerald-light);">2</span>
|
||||
<span class="recap-lbl">Rituals</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 5-diamond scale -->
|
||||
<div class="diamond-scale" id="diamondScale">
|
||||
<!-- 1: Rough -->
|
||||
<div class="scale-item" data-index="0">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40">
|
||||
<defs>
|
||||
<linearGradient id="d1-gr" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#475569"/>
|
||||
<stop offset="100%" stop-color="#1C2240"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M20 4L36 20L20 36L4 20Z" fill="url(#d1-gr)" opacity="0.5"/>
|
||||
<path d="M20 4L36 20L20 20Z" fill="#fff" opacity="0.04"/>
|
||||
<path d="M14 14l4 3M20 8l-2 6" stroke="rgba(255,255,255,0.1)" stroke-width="0.8"/>
|
||||
</svg>
|
||||
<span class="scale-label">Rough</span>
|
||||
</div>
|
||||
<!-- 2: Harder than usual -->
|
||||
<div class="scale-item" data-index="1">
|
||||
<svg width="44" height="44" viewBox="0 0 44 44">
|
||||
<defs>
|
||||
<linearGradient id="d2-gr" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#64748B"/>
|
||||
<stop offset="100%" stop-color="#334155"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M22 4L40 22L22 40L4 22Z" fill="url(#d2-gr)" opacity="0.6"/>
|
||||
<path d="M22 4L40 22L22 22Z" fill="#fff" opacity="0.06"/>
|
||||
</svg>
|
||||
<span class="scale-label">Harder than usual</span>
|
||||
</div>
|
||||
<!-- 3: Steady — selected with amber glow -->
|
||||
<div class="scale-item selected" data-index="2" id="selectedDiamond">
|
||||
<svg width="52" height="52" viewBox="0 0 52 52">
|
||||
<defs>
|
||||
<linearGradient id="d3-gr" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FCD34D"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M26 4L48 26L26 48L4 26Z" fill="url(#d3-gr)" opacity="0.9"/>
|
||||
<path d="M26 4L48 26L26 26Z" fill="#fff" opacity="0.18"/>
|
||||
<path d="M26 4L4 26L26 26Z" fill="#fff" opacity="0.06"/>
|
||||
<line x1="26" y1="4" x2="26" y2="48" stroke="#fff" stroke-width="0.6" opacity="0.15"/>
|
||||
<line x1="4" y1="26" x2="48" y2="26" stroke="#fff" stroke-width="0.6" opacity="0.1"/>
|
||||
<circle cx="20" cy="20" r="2.5" fill="#fff" opacity="0.3"/>
|
||||
</svg>
|
||||
<span class="scale-label">Steady</span>
|
||||
</div>
|
||||
<!-- 4: Good momentum -->
|
||||
<div class="scale-item" data-index="3">
|
||||
<svg width="44" height="44" viewBox="0 0 44 44">
|
||||
<defs>
|
||||
<linearGradient id="d4-gr" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M22 3L41 22L22 41L3 22Z" fill="url(#d4-gr)" opacity="0.8"/>
|
||||
<path d="M22 3L41 22L22 22Z" fill="#fff" opacity="0.14"/>
|
||||
<circle cx="17" cy="17" r="1.8" fill="#fff" opacity="0.2"/>
|
||||
</svg>
|
||||
<span class="scale-label">Good momentum</span>
|
||||
</div>
|
||||
<!-- 5: Breakthrough -->
|
||||
<div class="scale-item" data-index="4">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40">
|
||||
<defs>
|
||||
<linearGradient id="d5-gr" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||||
<stop offset="50%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#FCD34D"/>
|
||||
</linearGradient>
|
||||
<filter id="d5-glow" x="-30%" y="-30%" width="160%" height="160%">
|
||||
<feGaussianBlur stdDeviation="2" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g filter="url(#d5-glow)">
|
||||
<path d="M20 2L38 20L20 38L2 20Z" fill="url(#d5-gr)" opacity="0.7"/>
|
||||
<path d="M20 2L38 20L20 20Z" fill="#fff" opacity="0.2"/>
|
||||
<path d="M20 2L2 20L20 20Z" fill="#fff" opacity="0.1"/>
|
||||
<circle cx="15" cy="15" r="2.5" fill="#fff" opacity="0.4"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="scale-label">Breakthrough week</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="writein-label">Anything else you want to add? (optional)</div>
|
||||
<textarea class="writein-input" placeholder="This week felt..."></textarea>
|
||||
|
||||
<a class="next-btn" href="75-guide-pulse-read.html">Next</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const items = document.querySelectorAll('.scale-item');
|
||||
items.forEach((item) => {
|
||||
item.addEventListener('click', () => {
|
||||
items.forEach(it => it.classList.remove('selected'));
|
||||
item.classList.add('selected');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
230
initial mockups/screens/guide/75-guide-pulse-read.html
Normal file
230
initial mockups/screens/guide/75-guide-pulse-read.html
Normal file
@@ -0,0 +1,230 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Weekly Pulse (Step 2)</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
@keyframes breathing {
|
||||
0%, 100% { opacity: 0.5; transform: scale(1) translate(-50%, -50%); }
|
||||
50% { opacity: 0.8; transform: scale(1.06) translate(-48%, -52%); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.bg-aura {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, transparent 70%);
|
||||
filter: blur(50px);
|
||||
animation: breathing 8s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
.pulse-frame {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding: 0 var(--space-4) var(--space-6);
|
||||
}
|
||||
.step-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-4) 0 var(--space-2);
|
||||
}
|
||||
.step-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.step-dots {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
.step-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--twilight);
|
||||
}
|
||||
.step-dot.complete { background: var(--dim-light); }
|
||||
.step-dot.active {
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire));
|
||||
box-shadow: 0 0 8px rgba(59,130,246,0.4);
|
||||
}
|
||||
.close-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--deep-glass);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pulse-heading {
|
||||
font-family: var(--font-display);
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: var(--pure-light);
|
||||
margin-bottom: var(--space-5);
|
||||
letter-spacing: -0.01em;
|
||||
animation: fadeIn 0.4s ease-out 0.1s both;
|
||||
opacity: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
/* Observation list */
|
||||
.observation-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.observation-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-3);
|
||||
animation: fadeIn 0.4s ease-out both;
|
||||
opacity: 0;
|
||||
}
|
||||
.obs-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.obs-dot.amethyst { background: var(--amethyst); box-shadow: 0 0 8px rgba(139,92,246,0.5); }
|
||||
.obs-dot.amber { background: var(--amber); box-shadow: 0 0 8px rgba(245,158,11,0.5); }
|
||||
.obs-dot.emerald { background: var(--emerald); box-shadow: 0 0 8px rgba(16,185,129,0.5); }
|
||||
.obs-dot.sapphire { background: var(--sapphire); box-shadow: 0 0 8px rgba(59,130,246,0.5); }
|
||||
.obs-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.obs-text strong {
|
||||
color: var(--pure-light);
|
||||
font-weight: 600;
|
||||
}
|
||||
/* Highlighted callout */
|
||||
.callout-card {
|
||||
background: rgba(245,158,11,0.06);
|
||||
border: 1px solid rgba(245,158,11,0.2);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-5);
|
||||
animation: fadeIn 0.4s ease-out 0.55s both;
|
||||
opacity: 0;
|
||||
}
|
||||
.callout-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--amber-light);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.callout-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.65;
|
||||
}
|
||||
.callout-text strong {
|
||||
color: var(--amber-light);
|
||||
}
|
||||
.next-btn {
|
||||
height: 52px;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire));
|
||||
color: var(--pure-light);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 24px rgba(59,130,246,0.2);
|
||||
margin-top: auto;
|
||||
transition: opacity 0.2s ease-out;
|
||||
animation: fadeIn 0.4s ease-out 0.65s both;
|
||||
opacity: 0;
|
||||
}
|
||||
.next-btn:hover { opacity: 0.88; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
<div class="bg-aura"></div>
|
||||
|
||||
<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="pulse-frame">
|
||||
<div class="step-indicator">
|
||||
<span class="step-label">Step 2 of 3</span>
|
||||
<div class="step-dots">
|
||||
<div class="step-dot complete"></div>
|
||||
<div class="step-dot active"></div>
|
||||
<div class="step-dot"></div>
|
||||
</div>
|
||||
<a class="close-btn" href="../turn/10-turn-home.html">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2 2L10 10M10 2L2 10" stroke="var(--dim-light)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="pulse-heading">Here's what I noticed this week</div>
|
||||
|
||||
<div class="observation-list">
|
||||
<!-- 14 Turns — canonical data -->
|
||||
<div class="observation-item" style="animation-delay: 0.15s;">
|
||||
<div class="obs-dot amethyst"></div>
|
||||
<div class="obs-text"><strong>14 Turns</strong> this week — Wednesday was your most active day. That's the day of the presentation. You processed it in real time.</div>
|
||||
</div>
|
||||
<!-- Catastrophizing dropped from 5 last week — canonical -->
|
||||
<div class="observation-item" style="animation-delay: 0.25s;">
|
||||
<div class="obs-dot amber"></div>
|
||||
<div class="obs-text">Catastrophizing appeared <strong>3 times</strong> — down from 5 last week. The pattern is still there, but it's losing frequency.</div>
|
||||
</div>
|
||||
<!-- 5 mirror sessions — canonical -->
|
||||
<div class="observation-item" style="animation-delay: 0.35s;">
|
||||
<div class="obs-dot emerald"></div>
|
||||
<div class="obs-text"><strong>5 Mirror sessions</strong> and your streak hit <strong>14 days</strong> — the longest you've sustained consistent reflection.</div>
|
||||
</div>
|
||||
<!-- Goal evidence tiles — canonical: 2 new for "Present with confidence" -->
|
||||
<div class="observation-item" style="animation-delay: 0.45s;">
|
||||
<div class="obs-dot sapphire"></div>
|
||||
<div class="obs-text"><strong>2 new evidence tiles</strong> added to "Present with confidence" — both from moments this week where you held your ground.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Highlighted callout — feeling vs data gap -->
|
||||
<div class="callout-card">
|
||||
<div class="callout-label">Something to notice</div>
|
||||
<div class="callout-text">
|
||||
You rated this week as <strong>"Steady"</strong> — but the data shows real movement. Catastrophizing down, streak at an all-time high, goal evidence growing. Sometimes the feeling lags behind the evidence. The evidence is real.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="next-btn" href="76-guide-pulse-focus.html">Next</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
419
initial mockups/screens/guide/76-guide-pulse-focus.html
Normal file
419
initial mockups/screens/guide/76-guide-pulse-focus.html
Normal file
@@ -0,0 +1,419 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Weekly Pulse (Step 3)</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
@keyframes breathing {
|
||||
0%, 100% { opacity: 0.5; transform: scale(1) translate(-50%, -50%); }
|
||||
50% { opacity: 0.8; transform: scale(1.06) translate(-48%, -52%); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes prismaticFlash {
|
||||
0% { opacity: 0; transform: scale(0.9); }
|
||||
30% { opacity: 1; transform: scale(1.05); }
|
||||
70% { opacity: 1; transform: scale(1); }
|
||||
100% { opacity: 0; transform: scale(1.1); }
|
||||
}
|
||||
@keyframes completePulse {
|
||||
0%, 100% { box-shadow: 0 0 20px rgba(16,185,129,0.2); }
|
||||
50% { box-shadow: 0 0 40px rgba(16,185,129,0.4); }
|
||||
}
|
||||
.bg-aura {
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
left: 50%;
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(16,185,129,0.1) 0%, transparent 70%);
|
||||
filter: blur(55px);
|
||||
animation: breathing 7s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
.pulse-frame {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding: 0 var(--space-4) var(--space-6);
|
||||
}
|
||||
.step-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-4) 0 var(--space-2);
|
||||
}
|
||||
.step-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.step-dots {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
.step-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--twilight);
|
||||
}
|
||||
.step-dot.complete { background: var(--dim-light); }
|
||||
.step-dot.active {
|
||||
background: var(--emerald);
|
||||
box-shadow: 0 0 8px rgba(16,185,129,0.5);
|
||||
}
|
||||
.close-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--deep-glass);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pulse-heading {
|
||||
font-family: var(--font-display);
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--pure-light);
|
||||
margin-bottom: var(--space-5);
|
||||
letter-spacing: -0.01em;
|
||||
animation: fadeIn 0.4s ease-out 0.1s both;
|
||||
opacity: 0;
|
||||
}
|
||||
/* Focus suggestion — canonical next-week prompt -->
|
||||
.focus-card {
|
||||
background: var(--kalei-navy);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
position: relative;
|
||||
animation: fadeIn 0.4s ease-out 0.2s both;
|
||||
opacity: 0;
|
||||
}
|
||||
.focus-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: 17px;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
z-index: -1;
|
||||
}
|
||||
.focus-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--amethyst-light);
|
||||
margin-bottom: var(--space-2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.focus-icon {
|
||||
font-size: 12px;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.focus-text {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
line-height: 1.5;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.focus-body {
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
line-height: 1.6;
|
||||
}
|
||||
/* Suggestion cards */
|
||||
.suggestion-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);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-3);
|
||||
animation: fadeIn 0.4s ease-out both;
|
||||
opacity: 0;
|
||||
transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
|
||||
}
|
||||
.suggestion-card:hover {
|
||||
border-color: rgba(16,185,129,0.5);
|
||||
box-shadow: 0 0 16px rgba(16,185,129,0.08);
|
||||
}
|
||||
.suggestion-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(16,185,129,0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.suggestion-content { flex: 1; }
|
||||
.suggestion-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--emerald-light);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.suggestion-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.55;
|
||||
}
|
||||
/* Action buttons */
|
||||
.pulse-actions {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
margin-top: auto;
|
||||
animation: fadeIn 0.4s ease-out 0.6s both;
|
||||
opacity: 0;
|
||||
}
|
||||
.sounds-good-btn {
|
||||
flex: 1;
|
||||
height: 52px;
|
||||
background: var(--emerald);
|
||||
color: var(--pure-light);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 20px rgba(16,185,129,0.25);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-family: var(--font-primary);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.sounds-good-btn:hover { background: var(--emerald-light); }
|
||||
.adjust-btn {
|
||||
flex: 1;
|
||||
height: 52px;
|
||||
background: transparent;
|
||||
color: var(--dim-light);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--twilight);
|
||||
transition: color 0.2s ease-out, border-color 0.2s ease-out;
|
||||
}
|
||||
.adjust-btn:hover { color: var(--soft-light); border-color: rgba(255,255,255,0.15); }
|
||||
/* Completion state */
|
||||
.completion-state {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.completion-state.visible { display: flex; }
|
||||
.completion-diamond {
|
||||
margin-bottom: var(--space-6);
|
||||
animation: completePulse 3s ease-in-out infinite;
|
||||
}
|
||||
.completion-heading {
|
||||
font-family: var(--font-display);
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--pure-light);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.completion-subtext {
|
||||
font-size: 15px;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: var(--space-8);
|
||||
}
|
||||
/* Prismatic flash overlay */
|
||||
.prismatic-flash {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(59,130,246,0.15), rgba(16,185,129,0.15), rgba(245,158,11,0.1));
|
||||
border-radius: 44px;
|
||||
pointer-events: none;
|
||||
display: none;
|
||||
}
|
||||
.prismatic-flash.animate {
|
||||
display: block;
|
||||
animation: prismaticFlash 0.8s ease-out forwards;
|
||||
}
|
||||
.done-btn {
|
||||
height: 52px;
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald));
|
||||
color: var(--pure-light);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 24px rgba(16,185,129,0.2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
<div class="bg-aura"></div>
|
||||
<div class="prismatic-flash" id="flash"></div>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- Step 3 active content -->
|
||||
<div class="pulse-frame" id="step3Content">
|
||||
<div class="step-indicator">
|
||||
<span class="step-label">Step 3 of 3</span>
|
||||
<div class="step-dots">
|
||||
<div class="step-dot complete"></div>
|
||||
<div class="step-dot complete"></div>
|
||||
<div class="step-dot active"></div>
|
||||
</div>
|
||||
<a class="close-btn" href="../turn/10-turn-home.html">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2 2L10 10M10 2L2 10" stroke="var(--dim-light)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="pulse-heading">For next week</div>
|
||||
|
||||
<!-- Canonical weekly focus suggestion -->
|
||||
<div class="focus-card">
|
||||
<div class="focus-label">
|
||||
<span class="focus-icon">◇</span>
|
||||
Your focus
|
||||
</div>
|
||||
<div class="focus-text">"Notice the gap between what you fear and what actually happens."</div>
|
||||
<div class="focus-body">This week your data showed Catastrophizing going down. That gap — between the feared outcome and reality — is where your patterns lose their grip. Try to catch it once a day.</div>
|
||||
</div>
|
||||
|
||||
<!-- Suggestion cards — Alex's actual goals, not fitness -->
|
||||
<div class="suggestion-card" style="animation-delay: 0.3s;">
|
||||
<div class="suggestion-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<circle cx="10" cy="10" r="8" stroke="var(--emerald)" stroke-width="1.2"/>
|
||||
<circle cx="10" cy="10" r="3.5" stroke="var(--emerald)" stroke-width="0.8"/>
|
||||
<path d="M10 2v2M10 16v2M2 10h2M16 10h2" stroke="var(--emerald)" stroke-width="0.8" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="suggestion-content">
|
||||
<div class="suggestion-label">Lens · Present with confidence</div>
|
||||
<div class="suggestion-text">Add one more evidence tile — even a micro-moment of holding your ground counts. You're at 65% and moving.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="suggestion-card" style="animation-delay: 0.4s;">
|
||||
<div class="suggestion-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M10 3L14 7L15 12L10 17L5 12L6 7Z" stroke="var(--amber)" fill="none" stroke-width="1.2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="suggestion-content">
|
||||
<div class="suggestion-label">Mirror · Streak</div>
|
||||
<div class="suggestion-text">Your 14-day streak is the longest you've held. Next week it becomes 21. Just keep showing up.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="suggestion-card" style="animation-delay: 0.5s;">
|
||||
<div class="suggestion-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M10 2L18 10L10 18L2 10Z" stroke="var(--amethyst)" fill="none" stroke-width="1.2"/>
|
||||
<path d="M10 2L18 10L10 10Z" fill="rgba(139,92,246,0.15)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="suggestion-content">
|
||||
<div class="suggestion-label">Turn · Boundaries goal</div>
|
||||
<div class="suggestion-text">Your "Set boundaries at work" goal is at 40%. If a work request lands that doesn't feel right, Turn it before you respond.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pulse-actions">
|
||||
<button class="sounds-good-btn" id="soundsGoodBtn">Sounds good</button>
|
||||
<a class="adjust-btn" href="74-guide-pulse-report.html">Adjust</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Completion state (hidden initially) -->
|
||||
<div class="pulse-frame completion-state" id="completionState">
|
||||
<div class="completion-diamond">
|
||||
<svg width="80" height="80" viewBox="0 0 80 80">
|
||||
<defs>
|
||||
<linearGradient id="cp-gr" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||||
<stop offset="33%" stop-color="#34D399"/>
|
||||
<stop offset="66%" stop-color="#60A5FA"/>
|
||||
<stop offset="100%" stop-color="#FCD34D"/>
|
||||
</linearGradient>
|
||||
<filter id="cp-glow" x="-25%" y="-25%" width="150%" height="150%">
|
||||
<feGaussianBlur stdDeviation="4" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g filter="url(#cp-glow)">
|
||||
<path d="M40 4L76 40L40 76L4 40Z" fill="url(#cp-gr)" opacity="0.85"/>
|
||||
<path d="M40 4L76 40L40 40Z" fill="#fff" opacity="0.2"/>
|
||||
<path d="M40 4L4 40L40 40Z" fill="#fff" opacity="0.1"/>
|
||||
<line x1="40" y1="4" x2="40" y2="76" stroke="#fff" stroke-width="0.8" opacity="0.15"/>
|
||||
<line x1="4" y1="40" x2="76" y2="40" stroke="#fff" stroke-width="0.8" opacity="0.1"/>
|
||||
<circle cx="32" cy="28" r="4" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="completion-heading">Pulse complete.</div>
|
||||
<div class="completion-subtext">See you next Saturday, Alex.</div>
|
||||
<a class="done-btn" href="../turn/10-turn-home.html">Done</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('soundsGoodBtn').addEventListener('click', function() {
|
||||
const flash = document.getElementById('flash');
|
||||
const step3 = document.getElementById('step3Content');
|
||||
const completion = document.getElementById('completionState');
|
||||
|
||||
// Trigger prismatic flash
|
||||
flash.classList.add('animate');
|
||||
|
||||
setTimeout(() => {
|
||||
step3.style.display = 'none';
|
||||
completion.classList.add('visible');
|
||||
flash.classList.remove('animate');
|
||||
}, 600);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user