420 lines
15 KiB
HTML
420 lines
15 KiB
HTML
|
<!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>
|