259 lines
12 KiB
HTML
259 lines
12 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=390, initial-scale=1">
|
|||
|
|
<title>Kalei — Rehearsal Session</title>
|
|||
|
|
<link rel="stylesheet" href="../../assets/design-system.css">
|
|||
|
|
<style>
|
|||
|
|
.nav-back { color: var(--emerald-light) !important; }
|
|||
|
|
.nav-close-btn { color: var(--dim-light); cursor: pointer; }
|
|||
|
|
.session-bg {
|
|||
|
|
position: absolute; inset: 0;
|
|||
|
|
background: radial-gradient(ellipse at 50% 30%, rgba(16,185,129,0.08) 0%, transparent 65%);
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
.timer-ring-wrap {
|
|||
|
|
display: flex; align-items: center; justify-content: center;
|
|||
|
|
margin: 16px auto 20px; position: relative;
|
|||
|
|
width: 76px; height: 76px;
|
|||
|
|
}
|
|||
|
|
.timer-ring-wrap svg { transform: rotate(-90deg); position: absolute; }
|
|||
|
|
.timer-text {
|
|||
|
|
position: relative; z-index: 1; text-align: center;
|
|||
|
|
}
|
|||
|
|
.timer-time { font-size: 20px; font-weight: 700; color: var(--pure-light); }
|
|||
|
|
.timer-label { font-size: 10px; color: var(--emerald); text-transform: uppercase; letter-spacing: 0.06em; }
|
|||
|
|
|
|||
|
|
.step-indicator {
|
|||
|
|
display: flex; align-items: center; justify-content: center; gap: 6px;
|
|||
|
|
margin-bottom: var(--space-5);
|
|||
|
|
}
|
|||
|
|
.step-indicator-dot {
|
|||
|
|
width: 6px; height: 6px; border-radius: 50%; background: var(--twilight);
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
}
|
|||
|
|
.step-indicator-dot.active { background: var(--emerald); width: 18px; border-radius: 3px; }
|
|||
|
|
.step-indicator-dot.done { background: var(--emerald); opacity: 0.5; }
|
|||
|
|
|
|||
|
|
.prompt-area {
|
|||
|
|
padding: var(--space-4) var(--space-5);
|
|||
|
|
text-align: center;
|
|||
|
|
animation: fadeIn 0.5s ease;
|
|||
|
|
}
|
|||
|
|
.prompt-step-tag {
|
|||
|
|
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
|||
|
|
letter-spacing: 0.06em; color: var(--emerald); margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
.prompt-main {
|
|||
|
|
font-size: 20px; font-weight: 600; color: var(--pure-light);
|
|||
|
|
line-height: 1.4; margin-bottom: 12px; font-family: var(--font-display);
|
|||
|
|
}
|
|||
|
|
.prompt-sub {
|
|||
|
|
font-size: 15px; color: var(--dim-light); line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.breathing-guide {
|
|||
|
|
display: flex; align-items: center; justify-content: center;
|
|||
|
|
margin: 24px auto 20px;
|
|||
|
|
}
|
|||
|
|
.breathing-circle {
|
|||
|
|
width: 80px; height: 80px; border-radius: 50%;
|
|||
|
|
background: radial-gradient(circle, rgba(16,185,129,0.25), rgba(16,185,129,0.05));
|
|||
|
|
border: 1.5px solid rgba(16,185,129,0.3);
|
|||
|
|
animation: breathCycle 8s ease-in-out infinite;
|
|||
|
|
display: flex; align-items: center; justify-content: center;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.breathing-circle::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute; inset: 8px; border-radius: 50%;
|
|||
|
|
background: rgba(16,185,129,0.1);
|
|||
|
|
animation: breathCycleInner 8s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
.breath-label {
|
|||
|
|
font-size: 12px; color: var(--emerald); font-weight: 500;
|
|||
|
|
letter-spacing: 0.05em; position: relative; z-index: 1;
|
|||
|
|
animation: breathLabel 8s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
@keyframes breathCycle {
|
|||
|
|
0%, 100% { transform: scale(1); opacity: 0.8; }
|
|||
|
|
25% { transform: scale(1.5); opacity: 1; }
|
|||
|
|
50% { transform: scale(1.5); opacity: 1; }
|
|||
|
|
75% { transform: scale(1); opacity: 0.8; }
|
|||
|
|
}
|
|||
|
|
@keyframes breathCycleInner {
|
|||
|
|
0%, 100% { transform: scale(1); }
|
|||
|
|
25% { transform: scale(1.3); }
|
|||
|
|
50% { transform: scale(1.3); }
|
|||
|
|
75% { transform: scale(1); }
|
|||
|
|
}
|
|||
|
|
@keyframes breathLabel {
|
|||
|
|
0%, 100% { opacity: 0; }
|
|||
|
|
10% { opacity: 1; }
|
|||
|
|
24% { opacity: 1; }
|
|||
|
|
35% { opacity: 0; }
|
|||
|
|
50% { opacity: 1; }
|
|||
|
|
60% { opacity: 1; }
|
|||
|
|
72% { opacity: 0; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom-area {
|
|||
|
|
padding: var(--space-4) var(--space-4) var(--space-6);
|
|||
|
|
display: flex; flex-direction: column; gap: var(--space-3);
|
|||
|
|
}
|
|||
|
|
.btn-next-step {
|
|||
|
|
display: flex; align-items: center; justify-content: center; gap: 10px;
|
|||
|
|
height: 56px; width: 100%; background: var(--emerald); color: var(--pure-light);
|
|||
|
|
font-size: 16px; font-weight: 600; border-radius: var(--radius-lg);
|
|||
|
|
box-shadow: var(--glow-emerald); border: none; cursor: pointer;
|
|||
|
|
transition: background 0.2s;
|
|||
|
|
}
|
|||
|
|
.btn-next-step:hover { background: var(--emerald-light); }
|
|||
|
|
.skip-link {
|
|||
|
|
text-align: center; font-size: 13px; color: var(--dim-light);
|
|||
|
|
cursor: pointer; padding: 4px;
|
|||
|
|
}
|
|||
|
|
.skip-link:hover { color: var(--soft-light); }
|
|||
|
|
|
|||
|
|
.screen-content { padding: 0; overflow-y: hidden; display: flex; flex-direction: column; }
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="device-frame">
|
|||
|
|
<div class="status-bar">
|
|||
|
|
<span class="time">9:41</span>
|
|||
|
|
<div class="icons">
|
|||
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="7" width="2.5" height="5" rx="0.5" fill="#E2E8F0" opacity="0.4"/><rect x="4.5" y="5" width="2.5" height="7" rx="0.5" fill="#E2E8F0" opacity="0.6"/><rect x="8" y="3" width="2.5" height="9" rx="0.5" fill="#E2E8F0" opacity="0.8"/><rect x="11.5" y="1" width="2.5" height="11" rx="0.5" fill="#E2E8F0"/></svg>
|
|||
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M 2,8 C 4,4 12,4 14,8" stroke="#E2E8F0" stroke-width="1.2" fill="none" stroke-linecap="round"/><path d="M 4,10 C 6,7 10,7 12,10" stroke="#E2E8F0" stroke-width="1" fill="none" opacity="0.8" stroke-linecap="round"/><circle cx="8" cy="12" r="1.2" fill="#E2E8F0"/></svg>
|
|||
|
|
<svg width="24" height="12" viewBox="0 0 24 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#E2E8F0" stroke-width="1" opacity="0.5"/><rect x="22" y="3" width="2" height="6" rx="1" fill="#E2E8F0" opacity="0.3"/><rect x="2" y="2" width="16" height="8" rx="1.5" fill="#10B981" opacity="0.9"/></svg>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="nav-header">
|
|||
|
|
<a class="nav-back" href="27-lens-goal-detail.html">
|
|||
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|||
|
|
</a>
|
|||
|
|
<div style="display:flex; flex-direction:column; align-items:center; position:absolute; left:50%; transform:translateX(-50%);">
|
|||
|
|
<span class="nav-title" style="position:static; transform:none;">Rehearsal</span>
|
|||
|
|
<span style="font-size:11px; color:var(--emerald); font-weight:500;">Present with confidence</span>
|
|||
|
|
</div>
|
|||
|
|
<a class="nav-close-btn" href="20-lens-dashboard.html">
|
|||
|
|
<svg width="22" height="22" viewBox="0 0 22 22" fill="none">
|
|||
|
|
<path d="M6 6l10 10M16 6L6 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|||
|
|
</svg>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="screen-content">
|
|||
|
|
<div class="session-bg"></div>
|
|||
|
|
|
|||
|
|
<!-- Timer ring — extracted from progress-indicators.svg Timer Ring: r=30, stroke-width=3, 76px viewport -->
|
|||
|
|
<!-- Full circumference = 2π×30 = 188.5; stroke-dasharray="141 188" = 75% remaining -->
|
|||
|
|
<div class="timer-ring-wrap">
|
|||
|
|
<svg width="76" height="76" viewBox="0 0 76 76">
|
|||
|
|
<defs>
|
|||
|
|
<linearGradient id="pr29-grEm" x1="0" y1="0" x2="0" y2="1">
|
|||
|
|
<stop offset="0%" stop-color="#6EE7B7"/>
|
|||
|
|
<stop offset="100%" stop-color="#059669"/>
|
|||
|
|
</linearGradient>
|
|||
|
|
</defs>
|
|||
|
|
<circle cx="38" cy="38" r="30" fill="none" stroke="var(--twilight)" stroke-width="3"/>
|
|||
|
|
<circle cx="38" cy="38" r="30" fill="none" stroke="url(#pr29-grEm)" stroke-width="3"
|
|||
|
|
stroke-dasharray="141 188" stroke-dashoffset="0" stroke-linecap="round" id="timerArc"/>
|
|||
|
|
</svg>
|
|||
|
|
<div class="timer-text">
|
|||
|
|
<div class="timer-time" id="timerDisplay">3:20</div>
|
|||
|
|
<div class="timer-label">Remaining</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Step indicators -->
|
|||
|
|
<div class="step-indicator">
|
|||
|
|
<div class="step-indicator-dot done"></div>
|
|||
|
|
<div class="step-indicator-dot active"></div>
|
|||
|
|
<div class="step-indicator-dot"></div>
|
|||
|
|
<div class="step-indicator-dot"></div>
|
|||
|
|
<div class="step-indicator-dot"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Breathing guide -->
|
|||
|
|
<div class="breathing-guide">
|
|||
|
|
<div class="breathing-circle">
|
|||
|
|
<span class="breath-label">Breathe</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Prompt -->
|
|||
|
|
<div class="prompt-area">
|
|||
|
|
<div class="prompt-step-tag">Step 2 of 5 — Visualize</div>
|
|||
|
|
<div class="prompt-main">Picture yourself beginning the presentation</div>
|
|||
|
|
<div class="prompt-sub">Your team lead has just introduced you. You walk to the front. You look out at the room — and you feel ready. Your voice is steady. You know this material.</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="bottom-area">
|
|||
|
|
<button class="btn-next-step" onclick="nextStep()">
|
|||
|
|
I can see it
|
|||
|
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M6 4l5 5-5 5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|||
|
|
</button>
|
|||
|
|
<div class="skip-link">Skip this step</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
const steps = [
|
|||
|
|
{ tag: 'Step 1 of 5 — Settle', main: 'Find a comfortable position', sub: 'Sit upright and close your eyes when you\'re ready. Take three slow, deep breaths. Let your shoulders drop. You\'re safe here.' },
|
|||
|
|
{ tag: 'Step 2 of 5 — Visualize', main: 'Picture yourself beginning the presentation', sub: 'Your team lead has just introduced you. You walk to the front. You look out at the room — and you feel ready. Your voice is steady. You know this material.' },
|
|||
|
|
{ tag: 'Step 3 of 5 — Feel', main: 'Notice what confidence feels like in your body', sub: 'Your feet are planted. Your breathing is even. When you speak, the words come clearly. Someone nods. You make eye contact and hold it.' },
|
|||
|
|
{ tag: 'Step 4 of 5 — If-Then', main: 'Your voice starts to shake — what do you do?', sub: 'You pause. You take one slow breath. You say to yourself: "I know this material." And you continue — because you do. This is the plan working.' },
|
|||
|
|
{ tag: 'Step 5 of 5 — Return', main: 'Gently return to the present', sub: 'Take a deep breath and slowly open your eyes. That feeling of calm authority is real. It\'s yours. You can bring it into any room.' }
|
|||
|
|
];
|
|||
|
|
let currentStep = 1;
|
|||
|
|
let timeLeft = 200;
|
|||
|
|
|
|||
|
|
function nextStep() {
|
|||
|
|
if (currentStep < steps.length - 1) {
|
|||
|
|
currentStep++;
|
|||
|
|
updateUI();
|
|||
|
|
} else {
|
|||
|
|
window.location.href = '30-rehearsal-complete.html';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateUI() {
|
|||
|
|
const step = steps[currentStep];
|
|||
|
|
document.querySelector('.prompt-step-tag').textContent = step.tag;
|
|||
|
|
document.querySelector('.prompt-main').textContent = step.main;
|
|||
|
|
document.querySelector('.prompt-sub').textContent = step.sub;
|
|||
|
|
|
|||
|
|
document.querySelectorAll('.step-indicator-dot').forEach((dot, i) => {
|
|||
|
|
dot.className = 'step-indicator-dot';
|
|||
|
|
if (i < currentStep) dot.classList.add('done');
|
|||
|
|
else if (i === currentStep) dot.classList.add('active');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (currentStep === steps.length - 1) {
|
|||
|
|
document.querySelector('.btn-next-step').innerHTML = 'Complete Session <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 9l4 4 8-8" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Timer — circumference = 2π×30 = 188.5 (matches progress-indicators.svg Timer Ring r=30)
|
|||
|
|
const interval = setInterval(() => {
|
|||
|
|
if (timeLeft > 0) {
|
|||
|
|
timeLeft--;
|
|||
|
|
const m = Math.floor(timeLeft / 60);
|
|||
|
|
const s = timeLeft % 60;
|
|||
|
|
document.getElementById('timerDisplay').textContent = `${m}:${s.toString().padStart(2,'0')}`;
|
|||
|
|
const circumference = 188.5;
|
|||
|
|
const totalTime = 300;
|
|||
|
|
const filled = circumference * (timeLeft / totalTime);
|
|||
|
|
document.getElementById('timerArc').setAttribute('stroke-dasharray', `${filled} ${circumference}`);
|
|||
|
|
} else {
|
|||
|
|
clearInterval(interval);
|
|||
|
|
}
|
|||
|
|
}, 1000);
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|