263 lines
11 KiB
HTML
263 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=390, initial-scale=1">
|
||
<title>Kalei — Style Selection</title>
|
||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||
<style>
|
||
.screen-content {
|
||
padding: var(--space-6) var(--space-4) 120px;
|
||
}
|
||
|
||
.style-option {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-4);
|
||
padding: var(--space-4);
|
||
background: var(--deep-glass);
|
||
border: 1px solid var(--twilight);
|
||
border-radius: var(--radius-xl);
|
||
cursor: pointer;
|
||
margin-bottom: var(--space-3);
|
||
transition: all 0.2s ease-out;
|
||
}
|
||
|
||
.style-option:hover:not(.selected) {
|
||
border-color: rgba(139,92,246,0.3);
|
||
background: rgba(139,92,246,0.05);
|
||
}
|
||
|
||
.style-option.selected {
|
||
border-color: var(--amethyst);
|
||
background: rgba(139,92,246,0.08);
|
||
box-shadow: 0 0 20px rgba(139,92,246,0.15);
|
||
}
|
||
|
||
.style-icon-wrap {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: var(--radius-md);
|
||
background: rgba(139,92,246,0.12);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
transition: background 0.2s ease;
|
||
}
|
||
|
||
.style-option.selected .style-icon-wrap {
|
||
background: rgba(139,92,246,0.2);
|
||
}
|
||
|
||
.style-text { flex: 1; }
|
||
|
||
.style-name {
|
||
color: var(--pure-light);
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
|
||
.style-desc {
|
||
color: var(--dim-light);
|
||
}
|
||
|
||
.radio-indicator {
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
border: 2px solid var(--twilight);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
transition: all 0.2s ease-out;
|
||
}
|
||
|
||
.style-option.selected .radio-indicator {
|
||
border-color: var(--amethyst);
|
||
}
|
||
|
||
.radio-dot-inner {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
background: var(--amethyst);
|
||
opacity: 0;
|
||
transform: scale(0);
|
||
transition: all 0.2s ease-out;
|
||
}
|
||
|
||
.style-option.selected .radio-dot-inner {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
|
||
.cta-bar {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: var(--space-4) var(--space-4) var(--space-6);
|
||
background: linear-gradient(to top, var(--void) 60%, transparent);
|
||
}
|
||
</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">
|
||
<h1 class="display-md text-pure" style="margin-bottom: var(--space-2);">Choose your coaching style</h1>
|
||
<p class="body text-dim" style="margin-bottom: var(--space-6);">How do you prefer to be guided when working through difficult thoughts?</p>
|
||
|
||
<!--
|
||
Style icons — extracted from fragment-icons.svg → SM size (radius 8), centred at 0,0
|
||
Each SVG is 22×22, translate(11,11), paths: M 0,-8 L 8,0 L 0,8 L -8,0 Z
|
||
Gradient IDs prefixed s05- to avoid conflicts
|
||
Each style gets a unique jewel color
|
||
-->
|
||
|
||
<!-- Option 1: Stoic Clarity — Amethyst SM fragment -->
|
||
<div class="style-option" data-style="stoic" onclick="selectStyle(this)">
|
||
<div class="style-icon-wrap">
|
||
<svg width="22" height="22" viewBox="0 0 22 22">
|
||
<defs>
|
||
<linearGradient id="s05-grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||
<stop offset="100%" stop-color="#7C3AED"/>
|
||
</linearGradient>
|
||
<filter id="s05-glowSmA" x="-50%" y="-50%" width="200%" height="200%">
|
||
<feGaussianBlur stdDeviation="1.5" result="b"/>
|
||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||
</filter>
|
||
</defs>
|
||
<g transform="translate(11,11)" filter="url(#s05-glowSmA)">
|
||
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#s05-grAmethyst)" opacity="0.9"/>
|
||
<path d="M 0,-8 L 8,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
<line x1="0" y1="-8" x2="0" y2="8" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||
<circle cx="-2" cy="-2" r="1" fill="#fff" opacity="0.3"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="style-text">
|
||
<div class="subheading style-name">Stoic Clarity</div>
|
||
<div class="body-sm style-desc">Direct truths, no softening. Reality-grounded reframes that cut to what's actually true.</div>
|
||
</div>
|
||
<div class="radio-indicator"><div class="radio-dot-inner"></div></div>
|
||
</div>
|
||
|
||
<!-- Option 2: Compassionate — Rose SM fragment -->
|
||
<div class="style-option" data-style="compassionate" onclick="selectStyle(this)">
|
||
<div class="style-icon-wrap">
|
||
<svg width="22" height="22" viewBox="0 0 22 22">
|
||
<defs>
|
||
<linearGradient id="s05-grRose" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#FBCFE8"/>
|
||
<stop offset="100%" stop-color="#BE185D"/>
|
||
</linearGradient>
|
||
<filter id="s05-glowSmB" x="-50%" y="-50%" width="200%" height="200%">
|
||
<feGaussianBlur stdDeviation="1.5" result="b"/>
|
||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||
</filter>
|
||
</defs>
|
||
<g transform="translate(11,11)" filter="url(#s05-glowSmB)">
|
||
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#s05-grRose)" opacity="0.9"/>
|
||
<path d="M 0,-8 L 8,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
<line x1="0" y1="-8" x2="0" y2="8" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||
<circle cx="-2" cy="-2" r="1" fill="#fff" opacity="0.3"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="style-text">
|
||
<div class="subheading style-name">Compassionate</div>
|
||
<div class="body-sm style-desc">Warmth before challenge. You're always met exactly where you are, without judgment.</div>
|
||
</div>
|
||
<div class="radio-indicator"><div class="radio-dot-inner"></div></div>
|
||
</div>
|
||
|
||
<!-- Option 3: Pragmatic — Emerald SM fragment -->
|
||
<div class="style-option" data-style="pragmatic" onclick="selectStyle(this)">
|
||
<div class="style-icon-wrap">
|
||
<svg width="22" height="22" viewBox="0 0 22 22">
|
||
<defs>
|
||
<linearGradient id="s05-grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||
<stop offset="100%" stop-color="#047857"/>
|
||
</linearGradient>
|
||
<filter id="s05-glowSmC" x="-50%" y="-50%" width="200%" height="200%">
|
||
<feGaussianBlur stdDeviation="1.5" result="b"/>
|
||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||
</filter>
|
||
</defs>
|
||
<g transform="translate(11,11)" filter="url(#s05-glowSmC)">
|
||
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#s05-grEmerald)" opacity="0.9"/>
|
||
<path d="M 0,-8 L 8,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
<line x1="0" y1="-8" x2="0" y2="8" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||
<circle cx="-2" cy="-2" r="1" fill="#fff" opacity="0.3"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="style-text">
|
||
<div class="subheading style-name">Pragmatic</div>
|
||
<div class="body-sm style-desc">Skip the philosophy, get to the action. Concrete steps you can take today, every time.</div>
|
||
</div>
|
||
<div class="radio-indicator"><div class="radio-dot-inner"></div></div>
|
||
</div>
|
||
|
||
<!-- Option 4: Growth-Oriented — Sapphire SM fragment -->
|
||
<div class="style-option" data-style="growth" onclick="selectStyle(this)">
|
||
<div class="style-icon-wrap">
|
||
<svg width="22" height="22" viewBox="0 0 22 22">
|
||
<defs>
|
||
<linearGradient id="s05-grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#93C5FD"/>
|
||
<stop offset="100%" stop-color="#1D4ED8"/>
|
||
</linearGradient>
|
||
<filter id="s05-glowSmD" x="-50%" y="-50%" width="200%" height="200%">
|
||
<feGaussianBlur stdDeviation="1.5" result="b"/>
|
||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||
</filter>
|
||
</defs>
|
||
<g transform="translate(11,11)" filter="url(#s05-glowSmD)">
|
||
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#s05-grSapphire)" opacity="0.9"/>
|
||
<path d="M 0,-8 L 8,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||
<line x1="0" y1="-8" x2="0" y2="8" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||
<circle cx="-2" cy="-2" r="1" fill="#fff" opacity="0.3"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="style-text">
|
||
<div class="subheading style-name">Growth-Oriented</div>
|
||
<div class="body-sm style-desc">Challenge me to stretch beyond comfort. Reframes that ask more of you, not less.</div>
|
||
</div>
|
||
<div class="radio-indicator"><div class="radio-dot-inner"></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cta-bar">
|
||
<a href="06-notifications.html" class="btn btn-primary btn-disabled" id="continueBtn" style="text-decoration:none;">
|
||
Continue
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function selectStyle(el) {
|
||
document.querySelectorAll('.style-option').forEach(function(opt) {
|
||
opt.classList.remove('selected');
|
||
});
|
||
el.classList.add('selected');
|
||
var btn = document.getElementById('continueBtn');
|
||
btn.classList.remove('btn-disabled');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|