268 lines
13 KiB
HTML
268 lines
13 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=390, initial-scale=1">
|
||
|
|
<title>Kalei — Rehearsal Complete</title>
|
||
|
|
<link rel="stylesheet" href="../../assets/design-system.css">
|
||
|
|
<style>
|
||
|
|
.nav-back { color: var(--emerald-light) !important; }
|
||
|
|
.complete-hero {
|
||
|
|
display: flex; flex-direction: column; align-items: center;
|
||
|
|
padding: 20px var(--space-4) 0; text-align: center;
|
||
|
|
}
|
||
|
|
.success-ring {
|
||
|
|
position: relative; width: 90px; height: 90px;
|
||
|
|
display: flex; align-items: center; justify-content: center;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
.success-ring svg { position: absolute; }
|
||
|
|
.success-icon { position: relative; z-index: 1; }
|
||
|
|
.complete-title {
|
||
|
|
font-size: 26px; font-weight: 700; color: var(--pure-light);
|
||
|
|
font-family: var(--font-display); margin-bottom: 6px;
|
||
|
|
}
|
||
|
|
.complete-sub {
|
||
|
|
font-size: 15px; color: var(--dim-light); margin-bottom: var(--space-6);
|
||
|
|
}
|
||
|
|
.rating-section {
|
||
|
|
width: 100%; padding: 0 var(--space-4);
|
||
|
|
margin-bottom: var(--space-4);
|
||
|
|
}
|
||
|
|
.rating-label {
|
||
|
|
font-size: 15px; font-weight: 600; color: var(--soft-light);
|
||
|
|
margin-bottom: 14px; text-align: center;
|
||
|
|
}
|
||
|
|
.vividness-stars {
|
||
|
|
display: flex; gap: 12px; justify-content: center; margin-bottom: 6px;
|
||
|
|
}
|
||
|
|
.fragment-star {
|
||
|
|
cursor: pointer; transition: transform 0.15s;
|
||
|
|
opacity: 0.3;
|
||
|
|
}
|
||
|
|
.fragment-star:hover, .fragment-star.active { opacity: 1; transform: scale(1.1); }
|
||
|
|
.rating-hint {
|
||
|
|
font-size: 12px; color: var(--dim-light); text-align: center;
|
||
|
|
margin-top: 8px;
|
||
|
|
}
|
||
|
|
.slider-section {
|
||
|
|
width: 100%; padding: 0 var(--space-4);
|
||
|
|
margin-bottom: var(--space-5);
|
||
|
|
}
|
||
|
|
.slider-label {
|
||
|
|
font-size: 15px; font-weight: 600; color: var(--soft-light);
|
||
|
|
margin-bottom: 12px; text-align: center;
|
||
|
|
}
|
||
|
|
.slider-track {
|
||
|
|
position: relative; height: 6px; background: var(--twilight);
|
||
|
|
border-radius: var(--radius-full); margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
.slider-fill {
|
||
|
|
position: absolute; left: 0; top: 0; bottom: 0;
|
||
|
|
width: 70%; background: var(--emerald); border-radius: var(--radius-full);
|
||
|
|
box-shadow: 0 0 8px rgba(16,185,129,0.4);
|
||
|
|
}
|
||
|
|
.slider-thumb {
|
||
|
|
position: absolute; top: 50%; right: 30%; transform: translate(50%, -50%);
|
||
|
|
width: 20px; height: 20px; border-radius: 50%;
|
||
|
|
background: var(--emerald); box-shadow: 0 0 12px rgba(16,185,129,0.5);
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.slider-labels {
|
||
|
|
display: flex; justify-content: space-between;
|
||
|
|
font-size: 12px; color: var(--dim-light);
|
||
|
|
}
|
||
|
|
input[type=range] {
|
||
|
|
-webkit-appearance: none; width: 100%; height: 6px;
|
||
|
|
background: var(--twilight); border-radius: 3px; outline: none;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
input[type=range]::-webkit-slider-thumb {
|
||
|
|
-webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
|
||
|
|
background: var(--emerald); cursor: pointer;
|
||
|
|
box-shadow: 0 0 10px rgba(16,185,129,0.4);
|
||
|
|
}
|
||
|
|
@keyframes drawRing {
|
||
|
|
from { stroke-dashoffset: 251.3; }
|
||
|
|
to { stroke-dashoffset: 0; }
|
||
|
|
}
|
||
|
|
.evidence-notification {
|
||
|
|
margin: 0 var(--space-4) var(--space-4);
|
||
|
|
background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(59,130,246,0.1));
|
||
|
|
border: 1px solid rgba(16,185,129,0.3);
|
||
|
|
border-radius: var(--radius-xl); padding: var(--space-4);
|
||
|
|
display: flex; align-items: center; gap: var(--space-3);
|
||
|
|
}
|
||
|
|
.evidence-tile-preview {
|
||
|
|
width: 52px; height: 52px; border-radius: var(--radius-md);
|
||
|
|
background: rgba(16,185,129,0.1); border: 1.5px solid var(--emerald);
|
||
|
|
box-shadow: 0 0 12px rgba(16,185,129,0.3);
|
||
|
|
display: flex; align-items: center; justify-content: center;
|
||
|
|
flex-shrink: 0; animation: pulse 2s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
.evidence-info { flex: 1; }
|
||
|
|
.evidence-title { font-size: 14px; font-weight: 600; color: var(--pure-light); margin-bottom: 3px; }
|
||
|
|
.evidence-sub { font-size: 12px; color: var(--dim-light); }
|
||
|
|
.done-btn {
|
||
|
|
height: 52px; margin: 0 var(--space-4) var(--space-6);
|
||
|
|
background: var(--emerald); color: var(--pure-light); font-size: 16px; font-weight: 600;
|
||
|
|
border-radius: var(--radius-lg); box-shadow: var(--glow-emerald);
|
||
|
|
text-decoration: none; display: flex; align-items: center; justify-content: center;
|
||
|
|
transition: background 0.2s ease-out;
|
||
|
|
}
|
||
|
|
.done-btn:hover { background: var(--emerald-light); }
|
||
|
|
.screen-content { padding: 0; }
|
||
|
|
.em-aura {
|
||
|
|
position: absolute; top: 10%; left: 50%; transform: translateX(-50%);
|
||
|
|
width: 240px; height: 240px; border-radius: 50%;
|
||
|
|
background: radial-gradient(circle, rgba(16,185,129,0.12) 0%, transparent 70%);
|
||
|
|
filter: blur(50px); animation: breathing 6s ease-in-out infinite;
|
||
|
|
pointer-events: none; z-index: 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="device-frame">
|
||
|
|
<div class="status-bar">
|
||
|
|
<span class="time">9:41</span>
|
||
|
|
<div class="icons">
|
||
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="7" width="2.5" height="5" rx="0.5" fill="#E2E8F0" opacity="0.4"/><rect x="4.5" y="5" width="2.5" height="7" rx="0.5" fill="#E2E8F0" opacity="0.6"/><rect x="8" y="3" width="2.5" height="9" rx="0.5" fill="#E2E8F0" opacity="0.8"/><rect x="11.5" y="1" width="2.5" height="11" rx="0.5" fill="#E2E8F0"/></svg>
|
||
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M 2,8 C 4,4 12,4 14,8" stroke="#E2E8F0" stroke-width="1.2" fill="none" stroke-linecap="round"/><path d="M 4,10 C 6,7 10,7 12,10" stroke="#E2E8F0" stroke-width="1" fill="none" opacity="0.8" stroke-linecap="round"/><circle cx="8" cy="12" r="1.2" fill="#E2E8F0"/></svg>
|
||
|
|
<svg width="24" height="12" viewBox="0 0 24 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#E2E8F0" stroke-width="1" opacity="0.5"/><rect x="22" y="3" width="2" height="6" rx="1" fill="#E2E8F0" opacity="0.3"/><rect x="2" y="2" width="16" height="8" rx="1.5" fill="#10B981" opacity="0.9"/></svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="nav-header">
|
||
|
|
<a class="nav-back" href="29-rehearsal-session.html">
|
||
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
|
|
</a>
|
||
|
|
<span class="nav-title">Rehearsal Complete</span>
|
||
|
|
<span class="nav-action"></span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="screen-content" style="overflow-y: auto; position: relative;">
|
||
|
|
<div class="em-aura"></div>
|
||
|
|
|
||
|
|
<div class="complete-hero" style="position: relative; z-index: 1;">
|
||
|
|
<div class="success-ring">
|
||
|
|
<svg width="90" height="90" viewBox="0 0 90 90">
|
||
|
|
<circle cx="45" cy="45" r="40" fill="none" stroke="var(--twilight)" stroke-width="3"/>
|
||
|
|
<circle cx="45" cy="45" r="40" fill="none" stroke="var(--emerald)" stroke-width="3"
|
||
|
|
stroke-dasharray="251.3" stroke-dashoffset="251.3" stroke-linecap="round"
|
||
|
|
style="animation: drawRing 1s ease 0.3s forwards;"/>
|
||
|
|
</svg>
|
||
|
|
<div class="success-icon">
|
||
|
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
|
||
|
|
<path d="M6 16l7 7 13-14" stroke="var(--emerald)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="complete-title">Rehearsal Complete</div>
|
||
|
|
<div class="complete-sub">Present with confidence · Quarterly Results Scenario · 5 min</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Vividness Rating -->
|
||
|
|
<div class="rating-section">
|
||
|
|
<div class="rating-label">How vivid was your visualization?</div>
|
||
|
|
<div class="vividness-stars" id="stars">
|
||
|
|
<!-- 5 emerald MD fragment diamonds — extracted from fragment-icons.svg Emerald MD -->
|
||
|
|
<!-- MD diamond: M 0,-12 L 12,0 L 0,12 L -12,0 Z, specular M 0,-12 L 12,0 L 0,0 Z opacity=0.18, glow filter glowMd stdDev=3 -->
|
||
|
|
<!-- Shared defs in first SVG only — siblings share defs from same document -->
|
||
|
|
<svg class="fragment-star" onclick="setRating(1)" width="36" height="36" viewBox="0 0 36 36">
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="fr30-grEm" x1="0" y1="0" x2="0" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#6EE7B7"/>
|
||
|
|
<stop offset="100%" stop-color="#059669"/>
|
||
|
|
</linearGradient>
|
||
|
|
<filter id="fr30-glowMd" x="-80%" y="-80%" width="260%" height="260%">
|
||
|
|
<feGaussianBlur stdDeviation="3" result="b"/>
|
||
|
|
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||
|
|
</filter>
|
||
|
|
</defs>
|
||
|
|
<g transform="translate(18,18)" filter="url(#fr30-glowMd)">
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#fr30-grEm)" opacity="0.9"/>
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
|
|
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||
|
|
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
<svg class="fragment-star" onclick="setRating(2)" width="36" height="36" viewBox="0 0 36 36">
|
||
|
|
<g transform="translate(18,18)" filter="url(#fr30-glowMd)">
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#fr30-grEm)" opacity="0.9"/>
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
|
|
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||
|
|
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
<svg class="fragment-star active" onclick="setRating(3)" width="36" height="36" viewBox="0 0 36 36">
|
||
|
|
<g transform="translate(18,18)" filter="url(#fr30-glowMd)">
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#fr30-grEm)" opacity="0.9"/>
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
|
|
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||
|
|
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
<svg class="fragment-star active" onclick="setRating(4)" width="36" height="36" viewBox="0 0 36 36">
|
||
|
|
<g transform="translate(18,18)" filter="url(#fr30-glowMd)">
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#fr30-grEm)" opacity="0.9"/>
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
|
|
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||
|
|
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
<svg class="fragment-star active" onclick="setRating(5)" width="36" height="36" viewBox="0 0 36 36">
|
||
|
|
<g transform="translate(18,18)" filter="url(#fr30-glowMd)">
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#fr30-grEm)" opacity="0.9"/>
|
||
|
|
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
|
|
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||
|
|
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="rating-hint" id="ratingHint">Very vivid — you could almost feel it</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- How real slider -->
|
||
|
|
<div class="slider-section">
|
||
|
|
<div class="slider-label">How real did it feel?</div>
|
||
|
|
<input type="range" min="0" max="100" value="70" id="realSlider">
|
||
|
|
<div class="slider-labels">
|
||
|
|
<span>Distant</span>
|
||
|
|
<span>Very real</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Evidence Wall notification -->
|
||
|
|
<div class="evidence-notification">
|
||
|
|
<div class="evidence-tile-preview">
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24">
|
||
|
|
<defs><linearGradient id="gsEv" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/></linearGradient></defs>
|
||
|
|
<circle cx="12" cy="12" r="9" fill="url(#gsEv)" opacity="0.8"/>
|
||
|
|
<circle cx="12" cy="12" r="5" fill="none" stroke="white" stroke-width="1.2" opacity="0.6"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="evidence-info">
|
||
|
|
<div class="evidence-title">Evidence Wall tile earned!</div>
|
||
|
|
<div class="evidence-sub">Lens Rehearsal · Circle tile added to your mosaic</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<a class="done-btn" href="20-lens-dashboard.html">Done</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
let currentRating = 3;
|
||
|
|
const hints = ['', 'Hard to focus', 'Somewhat clear', 'Pretty vivid', 'Very vivid — you could almost feel it', 'Crystal clear — fully immersive'];
|
||
|
|
|
||
|
|
function setRating(n) {
|
||
|
|
currentRating = n;
|
||
|
|
document.querySelectorAll('.fragment-star').forEach((s, i) => {
|
||
|
|
s.classList.toggle('active', i < n);
|
||
|
|
});
|
||
|
|
document.getElementById('ratingHint').textContent = hints[n];
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|