314 lines
13 KiB
HTML
314 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 — You're Ready</title>
|
|||
|
|
<link rel="stylesheet" href="../../assets/design-system.css">
|
|||
|
|
<style>
|
|||
|
|
.screen-content.centered {
|
|||
|
|
padding: var(--space-8) var(--space-6);
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bg-shards {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
pointer-events: none;
|
|||
|
|
z-index: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.kalei-pattern {
|
|||
|
|
position: relative;
|
|||
|
|
width: 180px;
|
|||
|
|
height: 180px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-bottom: var(--space-8);
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pattern-aura {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
width: 300px;
|
|||
|
|
height: 300px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: radial-gradient(circle, rgba(139,92,246,0.18) 0%, rgba(59,130,246,0.07) 40%, rgba(16,185,129,0.04) 60%, transparent 70%);
|
|||
|
|
filter: blur(55px);
|
|||
|
|
animation: breathing 6s ease-in-out infinite;
|
|||
|
|
pointer-events: none;
|
|||
|
|
z-index: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pattern-svg {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Burst rings */
|
|||
|
|
.burst-container {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 42%;
|
|||
|
|
left: 50%;
|
|||
|
|
pointer-events: none;
|
|||
|
|
z-index: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.burst-ring {
|
|||
|
|
position: absolute;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border: 1px solid;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
animation: burstExpand 2.4s ease-out forwards;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.burst-ring:nth-child(1) { border-color: rgba(139,92,246,0.4); animation-delay: 0s; }
|
|||
|
|
.burst-ring:nth-child(2) { border-color: rgba(59,130,246,0.3); animation-delay: 0.35s; }
|
|||
|
|
.burst-ring:nth-child(3) { border-color: rgba(16,185,129,0.2); animation-delay: 0.7s; }
|
|||
|
|
|
|||
|
|
@keyframes burstExpand {
|
|||
|
|
0% { width: 40px; height: 40px; opacity: 1; }
|
|||
|
|
100% { width: 280px; height: 280px; opacity: 0; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.setup-stats {
|
|||
|
|
display: flex;
|
|||
|
|
gap: var(--space-3);
|
|||
|
|
margin-bottom: var(--space-10);
|
|||
|
|
z-index: 1;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.setup-stat {
|
|||
|
|
flex: 1;
|
|||
|
|
background: rgba(139,92,246,0.08);
|
|||
|
|
border: 1px solid rgba(139,92,246,0.2);
|
|||
|
|
border-radius: var(--radius-lg);
|
|||
|
|
padding: var(--space-3);
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.setup-stat-icon {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-bottom: var(--space-1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cta-area {
|
|||
|
|
width: 100%;
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-enter {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: var(--space-3);
|
|||
|
|
height: 56px;
|
|||
|
|
width: 100%;
|
|||
|
|
background: var(--amethyst);
|
|||
|
|
color: var(--pure-light);
|
|||
|
|
font-family: var(--font-primary);
|
|||
|
|
font-size: 17px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
border-radius: var(--radius-xl);
|
|||
|
|
text-decoration: none;
|
|||
|
|
box-shadow: 0 0 24px rgba(139,92,246,0.4);
|
|||
|
|
transition: all 0.2s ease-out;
|
|||
|
|
animation: breathing 6s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-enter:hover {
|
|||
|
|
background: var(--amethyst-light);
|
|||
|
|
box-shadow: 0 0 40px rgba(139,92,246,0.6);
|
|||
|
|
}
|
|||
|
|
</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 centered">
|
|||
|
|
|
|||
|
|
<!--
|
|||
|
|
Background floating shards — extracted from decorative-shards.svg → Floating Shards section
|
|||
|
|
6 shaped shard paths repositioned across 390×730 screen, prismatic all-jewel colors
|
|||
|
|
-->
|
|||
|
|
<svg class="bg-shards" viewBox="0 0 390 730" fill="none" preserveAspectRatio="xMidYMid slice">
|
|||
|
|
<defs>
|
|||
|
|
<filter id="s09-glowSm" x="-50%" y="-50%" width="200%" height="200%">
|
|||
|
|
<feGaussianBlur stdDeviation="1.5" result="b"/>
|
|||
|
|
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|||
|
|
</filter>
|
|||
|
|
</defs>
|
|||
|
|
|
|||
|
|
<!-- Amethyst shard upper-left -->
|
|||
|
|
<g transform="translate(40,85)" filter="url(#s09-glowSm)" opacity="0.55">
|
|||
|
|
<path d="M 0,-18 L 10,-4 L 2,16 L -8,6 Z" fill="#C4B5FD" transform="rotate(15)">
|
|||
|
|
<animate attributeName="opacity" values="0.4;0.65;0.4" dur="5s" repeatCount="indefinite"/>
|
|||
|
|
<animateTransform attributeName="transform" type="translate" values="0,0;2,-3;0,0" dur="5s" repeatCount="indefinite" additive="sum"/>
|
|||
|
|
</path>
|
|||
|
|
</g>
|
|||
|
|
|
|||
|
|
<!-- Sapphire shard upper-right -->
|
|||
|
|
<g transform="translate(348,65)" filter="url(#s09-glowSm)" opacity="0.5">
|
|||
|
|
<path d="M 0,-14 L 8,0 L 0,14 L -8,0 Z" fill="#93C5FD" transform="rotate(-25)">
|
|||
|
|
<animate attributeName="opacity" values="0.35;0.6;0.35" dur="7s" repeatCount="indefinite"/>
|
|||
|
|
<animateTransform attributeName="transform" type="translate" values="0,0;-2,2;0,0" dur="7s" repeatCount="indefinite" additive="sum"/>
|
|||
|
|
</path>
|
|||
|
|
</g>
|
|||
|
|
|
|||
|
|
<!-- Emerald shard mid-left -->
|
|||
|
|
<g transform="translate(25,380)" filter="url(#s09-glowSm)" opacity="0.45">
|
|||
|
|
<path d="M 0,-22 L 6,-5 L 0,22 L -6,-5 Z" fill="#6EE7B7" transform="rotate(12)">
|
|||
|
|
<animate attributeName="opacity" values="0.3;0.55;0.3" dur="9s" repeatCount="indefinite"/>
|
|||
|
|
<animateTransform attributeName="transform" type="translate" values="0,0;3,5;0,0" dur="9s" repeatCount="indefinite" additive="sum"/>
|
|||
|
|
</path>
|
|||
|
|
</g>
|
|||
|
|
|
|||
|
|
<!-- Amber shard mid-right -->
|
|||
|
|
<g transform="translate(360,330)" filter="url(#s09-glowSm)" opacity="0.45">
|
|||
|
|
<path d="M 0,-12 L 8,4 L -2,12 L -8,-2 Z" fill="#FDE68A" transform="rotate(-18)">
|
|||
|
|
<animate attributeName="opacity" values="0.3;0.55;0.3" dur="6s" repeatCount="indefinite"/>
|
|||
|
|
<animateTransform attributeName="transform" type="translate" values="0,0;-3,-2;0,0" dur="6s" repeatCount="indefinite" additive="sum"/>
|
|||
|
|
</path>
|
|||
|
|
</g>
|
|||
|
|
|
|||
|
|
<!-- Rose shard lower-left -->
|
|||
|
|
<g transform="translate(55,570)" filter="url(#s09-glowSm)" opacity="0.4">
|
|||
|
|
<path d="M 0,-16 L 10,0 L 2,16 L -10,4 Z" fill="#F9A8D4" transform="rotate(30)">
|
|||
|
|
<animate attributeName="opacity" values="0.25;0.5;0.25" dur="8s" repeatCount="indefinite"/>
|
|||
|
|
<animateTransform attributeName="transform" type="translate" values="0,0;2,5;0,0" dur="8s" repeatCount="indefinite" additive="sum"/>
|
|||
|
|
</path>
|
|||
|
|
</g>
|
|||
|
|
|
|||
|
|
<!-- Indigo shard lower-right -->
|
|||
|
|
<g transform="translate(335,510)" filter="url(#s09-glowSm)" opacity="0.4">
|
|||
|
|
<path d="M 0,-10 L 6,0 L 0,10 L -6,0 Z" fill="#818CF8" transform="rotate(-8)">
|
|||
|
|
<animate attributeName="opacity" values="0.25;0.5;0.25" dur="4.5s" repeatCount="indefinite"/>
|
|||
|
|
<animateTransform attributeName="transform" type="translate" values="0,0;-1,-3;0,0" dur="4.5s" repeatCount="indefinite" additive="sum"/>
|
|||
|
|
</path>
|
|||
|
|
</g>
|
|||
|
|
</svg>
|
|||
|
|
|
|||
|
|
<!-- Burst rings -->
|
|||
|
|
<div class="burst-container">
|
|||
|
|
<div class="burst-ring"></div>
|
|||
|
|
<div class="burst-ring"></div>
|
|||
|
|
<div class="burst-ring"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!--
|
|||
|
|
Hero Kaleidoscope — extracted from patterns-kaleidoscope.svg → Complex 6-blade Prismatic variant
|
|||
|
|
Blades: M 0,0 L 6,-2 L -4,75 L -6,1 Z × 6 at 60° intervals, 6 jewel colors
|
|||
|
|
animateTransform rotate from 0 to 360, dur 90s (Hero pace)
|
|||
|
|
Centred at 80,80 in 160×160 viewport, circClip radius 70
|
|||
|
|
All IDs prefixed s09-k
|
|||
|
|
-->
|
|||
|
|
<div class="kalei-pattern">
|
|||
|
|
<div class="pattern-aura"></div>
|
|||
|
|
<img src="../../assets/kalei-logo.svg" width="100" height="100" alt="Kalei" class="pattern-svg" style="filter: drop-shadow(0 0 12px rgba(139,92,246,0.3));">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h1 class="display-lg text-pure" style="margin-bottom: var(--space-4); z-index:1;">Welcome, Alex</h1>
|
|||
|
|
<p class="body text-dim" style="margin-bottom: var(--space-8); z-index:1; max-width: 280px;">Your kaleidoscope is calibrated. The same thoughts you've always had — now seen from angles you haven't tried yet.</p>
|
|||
|
|
|
|||
|
|
<!--
|
|||
|
|
Setup stat icons — extracted from fragment-icons.svg → SM size (radius 8)
|
|||
|
|
Centred at 0,0 in 18×18 viewport (translate 9,9), canonical diamond path
|
|||
|
|
Gradient IDs prefixed s09-
|
|||
|
|
-->
|
|||
|
|
<div class="setup-stats">
|
|||
|
|
<div class="setup-stat">
|
|||
|
|
<div class="setup-stat-icon">
|
|||
|
|
<svg width="18" height="18" viewBox="0 0 18 18">
|
|||
|
|
<defs>
|
|||
|
|
<linearGradient id="s09-statAmethyst" x1="0" y1="0" x2="0" y2="1">
|
|||
|
|
<stop offset="0%" stop-color="#C4B5FD"/>
|
|||
|
|
<stop offset="100%" stop-color="#7C3AED"/>
|
|||
|
|
</linearGradient>
|
|||
|
|
</defs>
|
|||
|
|
<g transform="translate(9,9)">
|
|||
|
|
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#s09-statAmethyst)" opacity="0.9"/>
|
|||
|
|
<path d="M 0,-8 L 8,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
|||
|
|
<circle cx="-2" cy="-2" r="1" fill="#fff" opacity="0.3"/>
|
|||
|
|
</g>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
<div class="body-sm text-dim">Style chosen</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="setup-stat">
|
|||
|
|
<div class="setup-stat-icon">
|
|||
|
|
<svg width="18" height="18" viewBox="0 0 18 18">
|
|||
|
|
<defs>
|
|||
|
|
<linearGradient id="s09-statEmerald" x1="0" y1="0" x2="0" y2="1">
|
|||
|
|
<stop offset="0%" stop-color="#6EE7B7"/>
|
|||
|
|
<stop offset="100%" stop-color="#047857"/>
|
|||
|
|
</linearGradient>
|
|||
|
|
</defs>
|
|||
|
|
<g transform="translate(9,9)">
|
|||
|
|
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#s09-statEmerald)" opacity="0.9"/>
|
|||
|
|
<path d="M 0,-8 L 8,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
|||
|
|
<circle cx="-2" cy="-2" r="1" fill="#fff" opacity="0.3"/>
|
|||
|
|
</g>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
<div class="body-sm text-dim">Account ready</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="setup-stat">
|
|||
|
|
<div class="setup-stat-icon">
|
|||
|
|
<svg width="18" height="18" viewBox="0 0 18 18">
|
|||
|
|
<defs>
|
|||
|
|
<linearGradient id="s09-statAmber" x1="0" y1="0" x2="0" y2="1">
|
|||
|
|
<stop offset="0%" stop-color="#FDE68A"/>
|
|||
|
|
<stop offset="100%" stop-color="#D97706"/>
|
|||
|
|
</linearGradient>
|
|||
|
|
</defs>
|
|||
|
|
<g transform="translate(9,9)">
|
|||
|
|
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#s09-statAmber)" opacity="0.9"/>
|
|||
|
|
<path d="M 0,-8 L 8,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
|||
|
|
<circle cx="-2" cy="-2" r="1" fill="#fff" opacity="0.3"/>
|
|||
|
|
</g>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
<div class="body-sm text-dim">First Turn logged</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="cta-area">
|
|||
|
|
<a href="../turn/10-turn-home.html" class="btn-enter">
|
|||
|
|
<!--
|
|||
|
|
Button icon — extracted from fragment-icons.svg → Amethyst SM (radius 8)
|
|||
|
|
White fill on coloured button background
|
|||
|
|
-->
|
|||
|
|
<svg width="20" height="20" viewBox="0 0 20 20">
|
|||
|
|
<g transform="translate(10,10)">
|
|||
|
|
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="white" opacity="0.35"/>
|
|||
|
|
<path d="M 0,-8 L 8,0 L 0,0 Z" fill="white" opacity="0.2"/>
|
|||
|
|
<line x1="0" y1="-8" x2="0" y2="8" stroke="#fff" stroke-width="0.5" opacity="0.3"/>
|
|||
|
|
<circle cx="-2" cy="-2" r="1" fill="#fff" opacity="0.5"/>
|
|||
|
|
</g>
|
|||
|
|
</svg>
|
|||
|
|
Enter Kalei
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|