Initial commit: Kalei app — docs, mockups, logo, pitch deck
Complete project files including: - 73 polished HTML mockup screens (onboarding, turn, mirror, lens, gallery, you, ritual, spectrum, modals, guide) - Design system CSS with Inter font, jewel-tone palette, device frame scaling - Canonical 6-blade kaleidoscope logo (soft-elegance-final) - SVG asset library (fragments, icons, patterns, evidence wall, spectrum viz) - Product docs, brand guidelines, technical architecture, build phases - Pitch deck and cost projections - Logo mockup iterations and finalists Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
250
initial mockups/screens/onboarding/01-splash.html
Normal file
250
initial mockups/screens/onboarding/01-splash.html
Normal file
@@ -0,0 +1,250 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Splash</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.splash-container {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-5);
|
||||
background: var(--void);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logo-wrap {
|
||||
position: relative;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: logoFadeIn 0.8s ease-out forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.kalei-wordmark {
|
||||
font-family: var(--font-display);
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: var(--soft-light);
|
||||
letter-spacing: 0.05em;
|
||||
animation: logoFadeIn 0.8s ease-out 0.4s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tap-hint {
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
color: var(--faint-light);
|
||||
letter-spacing: 0.08em;
|
||||
animation: hintPulse 2s ease-in-out infinite;
|
||||
animation-delay: 2s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes logoFadeIn {
|
||||
from { opacity: 0; transform: scale(0.9); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
@keyframes hintPulse {
|
||||
0% { opacity: 0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
<a class="splash-container" href="02-welcome.html">
|
||||
<div class="logo-wrap">
|
||||
<!-- soft-elegance-final.svg — the actual Kalei logo, scaled to 160x160 -->
|
||||
<svg viewBox="0 0 400 400" width="160" height="160">
|
||||
<defs>
|
||||
<linearGradient id="g0_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#A78BFA"><animate attributeName="stop-color" values="#A78BFA;#C4B5FD;#A78BFA" dur="5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#A78BFA;#8B5CF6" dur="5s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="g0_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#8B5CF6"/><stop offset="100%" stop-color="#5B21B6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g1_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#93C5FD"><animate attributeName="stop-color" values="#93C5FD;#BFDBFE;#93C5FD" dur="5.5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#3B82F6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g1_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#3B82F6"/><stop offset="100%" stop-color="#1D4ED8"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g2_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#A7F3D0;#6EE7B7" dur="6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#10B981"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g2_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#10B981"/><stop offset="100%" stop-color="#047857"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g3_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#FCD34D"><animate attributeName="stop-color" values="#FCD34D;#FDE68A;#FCD34D" dur="4.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#F59E0B"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g3_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#F59E0B"/><stop offset="100%" stop-color="#B45309"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g4_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#F9A8D4"><animate attributeName="stop-color" values="#F9A8D4;#FBCFE8;#F9A8D4" dur="5.2s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#EC4899"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g4_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#EC4899"/><stop offset="100%" stop-color="#BE185D"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g5_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#A5B4FC"><animate attributeName="stop-color" values="#A5B4FC;#C7D2FE;#A5B4FC" dur="5.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#6366F1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="g5_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="#6366F1"/><stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="prismatic" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#FFFFFF"><animate attributeName="stop-color" values="#FFFFFF;#E0D5FF;#FFFFFF" dur="5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="40%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
</radialGradient>
|
||||
<radialGradient id="outerAura" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.08"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="10s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="70%" stop-color="#8B5CF6" stop-opacity="0.03"/>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="coreHalo" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0"/>
|
||||
<stop offset="60%" stop-color="#FFFFFF" stop-opacity="0"/>
|
||||
<stop offset="80%" stop-color="#C4B5FD" stop-opacity="0.08"><animate attributeName="stop-color" values="#C4B5FD;#93C5FD;#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD" dur="8s" repeatCount="indefinite"/><animate attributeName="stop-opacity" values="0.05;0.12;0.05" dur="4s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="coreGlow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="12" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="shimmer" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="wideGlow" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="18" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="bladeTipGlow" x="-200%" y="-200%" width="500%" height="500%">
|
||||
<feGaussianBlur stdDeviation="5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<circle cx="200" cy="200" r="190" fill="url(#outerAura)">
|
||||
<animate attributeName="r" values="175;195;175" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<g transform="translate(200, 200)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="90s" repeatCount="indefinite" additive="sum"/>
|
||||
<g transform="rotate(0)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g0_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round"><animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4s" repeatCount="indefinite"/></path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g0_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"><animate attributeName="fill-opacity" values="0.90;1;0.90" dur="4s" repeatCount="indefinite"/></path>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#C4B5FD" stroke-width="1.2" opacity="0"><animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="0s" repeatCount="indefinite"/></line>
|
||||
</g>
|
||||
<g transform="rotate(60)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g1_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round"><animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.5s" repeatCount="indefinite"/></path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g1_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#93C5FD" stroke-width="1.2" opacity="0"><animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="0.83s" repeatCount="indefinite"/></line>
|
||||
</g>
|
||||
<g transform="rotate(120)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g2_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round"><animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="5s" repeatCount="indefinite"/></path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g2_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#6EE7B7" stroke-width="1.2" opacity="0"><animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="1.66s" repeatCount="indefinite"/></line>
|
||||
</g>
|
||||
<g transform="rotate(180)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g3_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round"><animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.2s" repeatCount="indefinite"/></path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g3_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#FDE68A" stroke-width="1.2" opacity="0"><animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="2.5s" repeatCount="indefinite"/></line>
|
||||
</g>
|
||||
<g transform="rotate(240)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g4_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round"><animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.8s" repeatCount="indefinite"/></path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g4_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#FBCFE8" stroke-width="1.2" opacity="0"><animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="3.33s" repeatCount="indefinite"/></line>
|
||||
</g>
|
||||
<g transform="rotate(300)" style="mix-blend-mode: screen;">
|
||||
<path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g5_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round"><animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.3s" repeatCount="indefinite"/></path>
|
||||
<path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g5_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/>
|
||||
<line x1="40" y1="0" x2="-30" y2="160" stroke="#A5B4FC" stroke-width="1.2" opacity="0"><animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="4.16s" repeatCount="indefinite"/></line>
|
||||
</g>
|
||||
<g filter="url(#bladeTipGlow)">
|
||||
<circle cx="-30" cy="160" r="4" fill="#A78BFA" opacity="0"><animate attributeName="opacity" values="0;0.35;0" dur="4s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="-30" cy="160" r="4" fill="#3B82F6" opacity="0" transform="rotate(60)"><animate attributeName="opacity" values="0;0.35;0" dur="4.5s" begin="0.5s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="-30" cy="160" r="4" fill="#10B981" opacity="0" transform="rotate(120)"><animate attributeName="opacity" values="0;0.35;0" dur="5s" begin="1s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="-30" cy="160" r="4" fill="#F59E0B" opacity="0" transform="rotate(180)"><animate attributeName="opacity" values="0;0.35;0" dur="4.2s" begin="1.5s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="-30" cy="160" r="4" fill="#EC4899" opacity="0" transform="rotate(240)"><animate attributeName="opacity" values="0;0.35;0" dur="4.8s" begin="2s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="-30" cy="160" r="4" fill="#6366F1" opacity="0" transform="rotate(300)"><animate attributeName="opacity" values="0;0.35;0" dur="4.3s" begin="2.5s" repeatCount="indefinite"/></circle>
|
||||
</g>
|
||||
<g filter="url(#coreGlow)">
|
||||
<circle r="45" fill="url(#prismatic)" opacity="0.35"><animate attributeName="opacity" values="0.25;0.45;0.25" dur="5s" repeatCount="indefinite"/></circle>
|
||||
<circle r="55" fill="url(#coreHalo)"><animate attributeName="r" values="50;58;50" dur="4s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.6;1;0.6" dur="4s" repeatCount="indefinite"/></circle>
|
||||
<g opacity="0.35">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="150s" repeatCount="indefinite"/>
|
||||
<polygon points="0,0 2,35 -2,35" fill="#A78BFA"><animate attributeName="opacity" values="0.20;0.40;0.20" dur="4s" repeatCount="indefinite"/></polygon>
|
||||
<polygon points="0,0 2,35 -2,35" fill="#3B82F6" transform="rotate(60)"><animate attributeName="opacity" values="0.20;0.40;0.20" dur="4.2s" begin="0.4s" repeatCount="indefinite"/></polygon>
|
||||
<polygon points="0,0 2,35 -2,35" fill="#10B981" transform="rotate(120)"><animate attributeName="opacity" values="0.20;0.40;0.20" dur="4.4s" begin="0.8s" repeatCount="indefinite"/></polygon>
|
||||
<polygon points="0,0 2,35 -2,35" fill="#F59E0B" transform="rotate(180)"><animate attributeName="opacity" values="0.20;0.40;0.20" dur="4s" begin="1.2s" repeatCount="indefinite"/></polygon>
|
||||
<polygon points="0,0 2,35 -2,35" fill="#EC4899" transform="rotate(240)"><animate attributeName="opacity" values="0.20;0.40;0.20" dur="4.3s" begin="1.6s" repeatCount="indefinite"/></polygon>
|
||||
<polygon points="0,0 2,35 -2,35" fill="#6366F1" transform="rotate(300)"><animate attributeName="opacity" values="0.20;0.40;0.20" dur="4.5s" begin="2s" repeatCount="indefinite"/></polygon>
|
||||
</g>
|
||||
<g opacity="0.3">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="75s" repeatCount="indefinite"/>
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0"><animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4s" begin="0s" repeatCount="indefinite"/></line>
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(30)"><animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.5s" begin="0.3s" repeatCount="indefinite"/></line>
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0" transform="rotate(60)"><animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4.2s" begin="0.6s" repeatCount="indefinite"/></line>
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(90)"><animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.8s" begin="0.9s" repeatCount="indefinite"/></line>
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0" transform="rotate(120)"><animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4s" begin="1.2s" repeatCount="indefinite"/></line>
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(150)"><animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.6s" begin="1.5s" repeatCount="indefinite"/></line>
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0" transform="rotate(180)"><animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4.3s" begin="1.8s" repeatCount="indefinite"/></line>
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(210)"><animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.7s" begin="2.1s" repeatCount="indefinite"/></line>
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0" transform="rotate(240)"><animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4.1s" begin="2.4s" repeatCount="indefinite"/></line>
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(270)"><animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.9s" begin="2.7s" repeatCount="indefinite"/></line>
|
||||
<line x1="0" y1="0" x2="0" y2="50" stroke="#ffffff" stroke-width="0.6" stroke-linecap="round" opacity="0" transform="rotate(300)"><animate attributeName="opacity" values="0;0.30;0;0.15;0" dur="4s" begin="3s" repeatCount="indefinite"/></line>
|
||||
<line x1="0" y1="0" x2="25" y2="43.301" stroke="#ffffff" stroke-width="0.4" stroke-linecap="round" opacity="0" transform="rotate(330)"><animate attributeName="opacity" values="0;0.20;0;0.10;0" dur="3.8s" begin="3.3s" repeatCount="indefinite"/></line>
|
||||
</g>
|
||||
<circle r="12" fill="#ffffff" filter="url(#coreGlow)" opacity="0.95"><animate attributeName="r" values="10;14;10" dur="3s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.85;1;0.85" dur="3s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="-4" cy="-4" r="6" fill="#ffffff" opacity="0.2"><animate attributeName="opacity" values="0.2;0.35;0.2" dur="4s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="3" cy="-3" r="1.5" fill="#ffffff" opacity="0.9" filter="url(#glow)"><animate attributeName="opacity" values="0.6;1;0.6" dur="1.5s" repeatCount="indefinite"/></circle>
|
||||
<circle cx="-2" cy="5" r="2" fill="#FDE68A" opacity="0"><animate attributeName="opacity" values="0;0.15;0" dur="5s" repeatCount="indefinite"/></circle>
|
||||
</g>
|
||||
<g filter="url(#shimmer)">
|
||||
<circle r="2" fill="#A78BFA" opacity="0"><animateMotion dur="7s" repeatCount="indefinite" path="M0,-155 A155,155 0 1 1 -0.1,-155"/><animate attributeName="opacity" values="0;0.9;0;0;0" dur="7s" repeatCount="indefinite"/></circle>
|
||||
<circle r="1.5" fill="#3B82F6" opacity="0"><animateMotion dur="9s" repeatCount="indefinite" path="M0,-140 A140,140 0 1 0 -0.1,-140"/><animate attributeName="opacity" values="0;0;0.8;0;0" dur="9s" repeatCount="indefinite"/></circle>
|
||||
<circle r="1.5" fill="#10B981" opacity="0"><animateMotion dur="6s" repeatCount="indefinite" path="M0,-165 A165,165 0 1 1 -0.1,-165"/><animate attributeName="opacity" values="0;0.7;0;0.5;0" dur="6s" repeatCount="indefinite"/></circle>
|
||||
<circle r="2" fill="#F59E0B" opacity="0"><animateMotion dur="11s" repeatCount="indefinite" path="M0,-130 A130,130 0 1 0 -0.1,-130"/><animate attributeName="opacity" values="0;0;0;0.9;0" dur="11s" repeatCount="indefinite"/></circle>
|
||||
<circle r="1" fill="#EC4899" opacity="0"><animateMotion dur="8s" repeatCount="indefinite" path="M0,-150 A150,150 0 1 1 -0.1,-150"/><animate attributeName="opacity" values="0;0.8;0;0;0.6;0" dur="8s" repeatCount="indefinite"/></circle>
|
||||
<circle r="1.5" fill="#fff" opacity="0"><animateMotion dur="5s" repeatCount="indefinite" path="M0,-120 A120,120 0 1 0 -0.1,-120"/><animate attributeName="opacity" values="0;1;0;0;0" dur="5s" repeatCount="indefinite"/></circle>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<span class="kalei-wordmark">Kalei</span>
|
||||
<span class="body-sm tap-hint">tap to continue</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
setTimeout(function() {
|
||||
window.location.href = '02-welcome.html';
|
||||
}, 3500);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
273
initial mockups/screens/onboarding/02-welcome.html
Normal file
273
initial mockups/screens/onboarding/02-welcome.html
Normal file
@@ -0,0 +1,273 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Welcome</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.screen-content.centered {
|
||||
padding: var(--space-6);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-area {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--space-10);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-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.06) 50%, transparent 70%);
|
||||
filter: blur(55px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.tagline-line1 {
|
||||
display: block;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
|
||||
.tagline-line2 {
|
||||
display: block;
|
||||
color: var(--amethyst-light);
|
||||
}
|
||||
|
||||
.cta-area {
|
||||
width: 100%;
|
||||
margin-top: var(--space-8);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Floating shards background (decorative-shards.svg) */
|
||||
.bg-shards {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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="screen-content centered">
|
||||
<!--
|
||||
Floating shards background extracted from decorative-shards.svg → Floating Shards section
|
||||
Shard paths preserved exactly, repositioned across the 390x730 screen
|
||||
-->
|
||||
<svg class="bg-shards" viewBox="0 0 390 730" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="s02-grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s02-grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/>
|
||||
<stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s02-grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s02-grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s02-grRose" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBCFE8"/>
|
||||
<stop offset="100%" stop-color="#DB2777"/>
|
||||
</linearGradient>
|
||||
<filter id="s02-glowSm" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="s02-glowMd" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="s02-shimmer" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="2" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<!-- Shard 1 — large amethyst, top-left drift (from floating shards, shard 1 shape) -->
|
||||
<g transform="translate(40, 140)" filter="url(#s02-glowMd)">
|
||||
<path d="M 0,-18 L 10,-4 L 2,16 L -8,6 Z" fill="url(#s02-grAmethyst)" opacity="0.18">
|
||||
<animate attributeName="opacity" values="0.1;0.25;0.1" dur="7s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-18 L 10,-4 L -8,6 Z" fill="#fff" opacity="0.06"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="40,140; 45,132; 40,140" dur="12s" repeatCount="indefinite"/>
|
||||
</g>
|
||||
<!-- Shard 2 — sapphire, top-right -->
|
||||
<g transform="translate(340, 100)" filter="url(#s02-glowSm)">
|
||||
<path d="M 0,-10 L 7,2 L -2,12 L -6,0 Z" fill="url(#s02-grSapphire)" opacity="0.15">
|
||||
<animate attributeName="opacity" values="0.08;0.22;0.08" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<animateTransform attributeName="transform" type="translate" values="340,100; 345,92; 340,100" dur="9s" repeatCount="indefinite"/>
|
||||
</g>
|
||||
<!-- Shard 3 — emerald, left mid -->
|
||||
<g transform="translate(28, 460)" filter="url(#s02-glowSm)">
|
||||
<path d="M 0,-6 L 5,0 L 0,8 L -4,2 Z" fill="url(#s02-grEmerald)" opacity="0.15">
|
||||
<animate attributeName="opacity" values="0.08;0.2;0.08" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<animateTransform attributeName="transform" type="translate" values="28,460; 33,452; 28,460" dur="7s" repeatCount="indefinite"/>
|
||||
</g>
|
||||
<!-- Shard 4 — rose, tiny mote top-right -->
|
||||
<g transform="translate(360, 200)" filter="url(#s02-shimmer)">
|
||||
<path d="M 0,-4 L 3,0 L 0,4 L -3,0 Z" fill="url(#s02-grRose)" opacity="0.22">
|
||||
<animate attributeName="opacity" values="0.12;0.35;0.12" dur="3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<animateTransform attributeName="transform" type="translate" values="360,200; 363,195; 360,200" dur="5s" repeatCount="indefinite"/>
|
||||
</g>
|
||||
<!-- Shard 5 — amber, lower-left -->
|
||||
<g transform="translate(50, 580)" filter="url(#s02-shimmer)">
|
||||
<path d="M 0,-5 L 4,0 L 0,5 L -4,0 Z" fill="url(#s02-grAmber)" opacity="0.15">
|
||||
<animate attributeName="opacity" values="0.08;0.22;0.08" dur="6s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<animateTransform attributeName="transform" type="translate" values="50,580; 52,572; 50,580" dur="8s" repeatCount="indefinite"/>
|
||||
</g>
|
||||
<!-- Shard 6 — amethyst, lower-right -->
|
||||
<g transform="translate(330, 560)" filter="url(#s02-glowSm)">
|
||||
<path d="M 0,-8 L 6,0 L 0,8 L -6,0 Z" fill="url(#s02-grAmethyst)" opacity="0.12">
|
||||
<animate attributeName="opacity" values="0.06;0.18;0.06" dur="5.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<animateTransform attributeName="transform" type="translate" values="330,560; 335,553; 330,560" dur="10s" repeatCount="indefinite"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<div class="hero-area">
|
||||
<div class="hero-aura"></div>
|
||||
<!--
|
||||
Complex 6-blade prismatic kaleidoscope extracted from patterns-kaleidoscope.svg → Complex variant
|
||||
Adapted: centred at 100,100, 200x200 viewport with circular clip
|
||||
-->
|
||||
<svg width="200" height="200" viewBox="0 0 200 200" style="position:relative; z-index:1; animation: breathing 6s ease-in-out infinite;">
|
||||
<defs>
|
||||
<linearGradient id="s02-kAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD">
|
||||
<animate attributeName="stop-color" values="#C4B5FD;#DDD6FE;#C4B5FD" dur="4s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s02-kSapphire" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD">
|
||||
<animate attributeName="stop-color" values="#93C5FD;#BFDBFE;#93C5FD" dur="4.5s" repeatCount="indefinite"/>
|
||||
</stop>
|
||||
<stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s02-kEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s02-kAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s02-kRose" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBCFE8"/>
|
||||
<stop offset="100%" stop-color="#DB2777"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s02-kIndigo" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#A5B4FC"/>
|
||||
<stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="s02-coreGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#fff" stop-opacity="0.3"/>
|
||||
<stop offset="50%" stop-color="#8B5CF6" stop-opacity="0.1"/>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<filter id="s02-glowMdK" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="s02-glowSmK" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<clipPath id="s02-circClip">
|
||||
<circle cx="100" cy="100" r="92"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<!-- Navy bg -->
|
||||
<circle cx="100" cy="100" r="92" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<!-- Complex 6-blade pattern (from patterns-kaleidoscope.svg → Complex variant, blade reach ~80px) -->
|
||||
<g clip-path="url(#s02-circClip)">
|
||||
<g filter="url(#s02-glowMdK)" transform="translate(100,100)">
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="70s" repeatCount="indefinite"/>
|
||||
<g style="mix-blend-mode: screen;">
|
||||
<path d="M 0,0 L 6,-2 L -4,80 L -6,1 Z" fill="url(#s02-kAmethyst)" opacity="0.5">
|
||||
<animate attributeName="fill-opacity" values="0.4;0.6;0.4" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,0 L 6,-2 L -4,80 Z" fill="#fff" opacity="0.06"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(60)">
|
||||
<path d="M 0,0 L 6,-2 L -4,80 L -6,1 Z" fill="url(#s02-kSapphire)" opacity="0.45"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(120)">
|
||||
<path d="M 0,0 L 6,-2 L -4,80 L -6,1 Z" fill="url(#s02-kEmerald)" opacity="0.4"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(180)">
|
||||
<path d="M 0,0 L 6,-2 L -4,80 L -6,1 Z" fill="url(#s02-kAmber)" opacity="0.5"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(240)">
|
||||
<path d="M 0,0 L 6,-2 L -4,80 L -6,1 Z" fill="url(#s02-kRose)" opacity="0.45"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(300)">
|
||||
<path d="M 0,0 L 6,-2 L -4,80 L -6,1 Z" fill="url(#s02-kIndigo)" opacity="0.4"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<!-- Core glow -->
|
||||
<circle cx="100" cy="100" r="16" fill="url(#s02-coreGlow)" opacity="0.8">
|
||||
<animate attributeName="opacity" values="0.6;1;0.6" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="100" cy="100" r="6" fill="#fff" opacity="0.65" filter="url(#s02-glowSmK)">
|
||||
<animate attributeName="r" values="5;8;5" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div style="z-index:1;">
|
||||
<span class="display-lg tagline-line1">Same pieces.</span>
|
||||
<span class="display-lg tagline-line2">New angle.</span>
|
||||
</div>
|
||||
|
||||
<p class="body text-dim" style="margin-top: var(--space-4); z-index:1;">
|
||||
Your thoughts haven't changed. Only the angle has. Kalei helps you turn the same fragments until something new comes into focus.
|
||||
</p>
|
||||
|
||||
<div class="cta-area">
|
||||
<a href="03-fragment-intro.html" class="btn btn-primary" style="text-decoration:none;">See how it works</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
315
initial mockups/screens/onboarding/03-fragment-intro.html
Normal file
315
initial mockups/screens/onboarding/03-fragment-intro.html
Normal file
@@ -0,0 +1,315 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Fragment Intro</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.screen-content.centered {
|
||||
padding: var(--space-8) var(--space-6);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Floating shards background */
|
||||
.shards-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* Fragment hero area */
|
||||
.fragment-area {
|
||||
position: relative;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--space-10);
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fragment-aura {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(245,158,11,0.18) 0%, transparent 70%);
|
||||
filter: blur(28px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.fragment-svg-wrap {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
animation: fragmentPulse 2s ease-in-out infinite;
|
||||
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.fragment-svg-wrap.tapped {
|
||||
animation: none;
|
||||
transform: scale(1.35);
|
||||
}
|
||||
|
||||
@keyframes fragmentPulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.07); }
|
||||
}
|
||||
|
||||
/* Glow ring around the fragment (box-shadow approach, no filter:drop-shadow) */
|
||||
.fragment-glow-ring {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-top: -40px;
|
||||
margin-left: -40px;
|
||||
border-radius: var(--radius-sm);
|
||||
box-shadow: 0 0 30px rgba(245,158,11,0.35), 0 0 60px rgba(245,158,11,0.15);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
/* Copy sections */
|
||||
.copy-block {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.copy-initial {
|
||||
transition: opacity 0.4s ease-out;
|
||||
}
|
||||
|
||||
.copy-initial.hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.copy-continued {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.copy-continued.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tap-hint-text {
|
||||
color: var(--faint-light);
|
||||
margin-top: var(--space-3);
|
||||
animation: hintPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.text-amber {
|
||||
color: var(--amber);
|
||||
}
|
||||
|
||||
@keyframes hintPulse {
|
||||
0% { opacity: 0; }
|
||||
50% { opacity: 0.6; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* CTA pinned to bottom */
|
||||
.cta-area {
|
||||
position: absolute;
|
||||
bottom: var(--space-10);
|
||||
left: var(--space-6);
|
||||
right: var(--space-6);
|
||||
z-index: 2;
|
||||
}
|
||||
</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">
|
||||
|
||||
<!--
|
||||
Floating Shards background — extracted from decorative-shards.svg → Floating Shards section
|
||||
5 shaped shard paths repositioned across 390×730 screen area, amber/gold tones
|
||||
-->
|
||||
<svg class="shards-bg" width="390" height="730" viewBox="0 0 390 730" fill="none">
|
||||
<defs>
|
||||
<filter id="s03-glowSm" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="s03-glowMd" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Shard 1 — upper left — amber shaped (from decorative-shards.svg path 1) -->
|
||||
<g transform="translate(48,160)" filter="url(#s03-glowSm)" opacity="0.55">
|
||||
<path d="M 0,-18 L 10,-4 L 2,16 L -8,6 Z" fill="#FDE68A" transform="rotate(20)">
|
||||
<animate attributeName="opacity" values="0.4;0.7;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>
|
||||
|
||||
<!-- Shard 2 — upper right — amber shaped (from decorative-shards.svg path 2) -->
|
||||
<g transform="translate(340,100)" filter="url(#s03-glowSm)" opacity="0.45">
|
||||
<path d="M 0,-14 L 8,0 L 0,14 L -8,0 Z" fill="#F59E0B" transform="rotate(-30)">
|
||||
<animate attributeName="opacity" values="0.3;0.6;0.3" dur="7s" repeatCount="indefinite"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="0,0;-2,2;0,0" dur="7s" repeatCount="indefinite" additive="sum"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Shard 3 — mid left — elongated amber (from decorative-shards.svg path 3) -->
|
||||
<g transform="translate(30,400)" filter="url(#s03-glowSm)" opacity="0.4">
|
||||
<path d="M 0,-22 L 6,-5 L 0,22 L -6,-5 Z" fill="#FDE68A" transform="rotate(15)">
|
||||
<animate attributeName="opacity" values="0.25;0.55;0.25" dur="9s" repeatCount="indefinite"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="0,0;3,4;0,0" dur="9s" repeatCount="indefinite" additive="sum"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Shard 4 — mid right — small amber (from decorative-shards.svg path 4) -->
|
||||
<g transform="translate(355,350)" filter="url(#s03-glowSm)" opacity="0.5">
|
||||
<path d="M 0,-12 L 8,4 L -2,12 L -8,-2 Z" fill="#D97706" transform="rotate(-20)">
|
||||
<animate attributeName="opacity" values="0.35;0.65;0.35" dur="6s" repeatCount="indefinite"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="0,0;-3,-2;0,0" dur="6s" repeatCount="indefinite" additive="sum"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Shard 5 — lower left — medium amber (from decorative-shards.svg path 5) -->
|
||||
<g transform="translate(65,560)" filter="url(#s03-glowMd)" opacity="0.35">
|
||||
<path d="M 0,-16 L 10,0 L 2,16 L -10,4 Z" fill="#FDE68A" transform="rotate(35)">
|
||||
<animate attributeName="opacity" values="0.2;0.45;0.2" dur="8s" repeatCount="indefinite"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="0,0;2,5;0,0" dur="8s" repeatCount="indefinite" additive="sum"/>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
<!-- Shard 6 — lower right — small accent -->
|
||||
<g transform="translate(325,520)" filter="url(#s03-glowSm)" opacity="0.4">
|
||||
<path d="M 0,-10 L 6,0 L 0,10 L -6,0 Z" fill="#F59E0B" transform="rotate(-10)">
|
||||
<animate attributeName="opacity" values="0.3;0.5;0.3" dur="4s" repeatCount="indefinite"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="0,0;-1,-3;0,0" dur="4s" repeatCount="indefinite" additive="sum"/>
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<!--
|
||||
Fragment hero — extracted from fragment-icons.svg → Amber LG fragment
|
||||
Centred at 0,0 in 140×140 viewport (translate 70,70)
|
||||
Paths: M 0,-18 L 18,0 L 0,18 L -18,0 Z (LG = 36px diameter, radius 18)
|
||||
Filters and gradients prefixed s03-
|
||||
-->
|
||||
<div class="fragment-area" id="fragmentArea" onclick="handleTap()">
|
||||
<div class="fragment-aura"></div>
|
||||
<div class="fragment-glow-ring"></div>
|
||||
|
||||
<svg class="fragment-svg-wrap" id="fragmentSvg" width="140" height="140" viewBox="0 0 140 140">
|
||||
<defs>
|
||||
<linearGradient id="s03-grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<filter id="s03-glowLg" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="6" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="s03-glowPulse" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="4" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<g transform="translate(70,70)">
|
||||
<!-- Outer active pulse ring — extracted from fragment-icons.svg active/detected state -->
|
||||
<path d="M 0,-26 L 26,0 L 0,26 L -26,0 Z" fill="none" stroke="#FDE68A" stroke-width="1" opacity="0" filter="url(#s03-glowPulse)">
|
||||
<animate attributeName="opacity" values="0;0.5;0" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;2;1" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
|
||||
<!-- LG Amber fragment — extracted from fragment-icons.svg → Amber LG (radius 18) -->
|
||||
<g filter="url(#s03-glowLg)">
|
||||
<path d="M 0,-18 L 18,0 L 0,18 L -18,0 Z" fill="url(#s03-grAmber)" opacity="0.9"/>
|
||||
<!-- Primary specular highlight (top-right facet) -->
|
||||
<path d="M 0,-18 L 18,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<!-- Secondary shadow facet (bottom-left) -->
|
||||
<path d="M 0,-18 L -18,0 L 0,0 Z" fill="#fff" opacity="0.08"/>
|
||||
<!-- Vertical centre line -->
|
||||
<line x1="0" y1="-18" x2="0" y2="18" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||||
<!-- Horizontal centre line -->
|
||||
<line x1="-18" y1="0" x2="18" y2="0" stroke="#fff" stroke-width="0.4" opacity="0.12"/>
|
||||
<!-- Highlight dot (upper-left) -->
|
||||
<circle cx="-4" cy="-4" r="2" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Initial copy — before tap -->
|
||||
<div class="copy-block copy-initial" id="copyInitial">
|
||||
<h2 class="heading" style="color: var(--pure-light); margin-bottom: var(--space-3);">Every thought is a fragment.</h2>
|
||||
<p class="body text-dim">Shaped by experience, colored by emotion. The same piece of glass can look like a wound or a window — depending on how the light hits it.</p>
|
||||
<p class="body-sm tap-hint-text">Tap the fragment to continue</p>
|
||||
</div>
|
||||
|
||||
<!-- Continued copy — after tap -->
|
||||
<div class="copy-block copy-continued" id="copyContinued">
|
||||
<h2 class="heading" style="color: var(--pure-light); margin-bottom: var(--space-3);">The pieces don't change. The angle does.</h2>
|
||||
<p class="body text-dim" style="margin-bottom: var(--space-4);">Kalei doesn't tell you your feelings are wrong. It shows you there are other ways to arrange the same fragments — until a new pattern emerges.</p>
|
||||
<p class="body text-amber">That's the Turn.</p>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<div class="cta-area">
|
||||
<a href="04-turn-demo.html" class="btn btn-primary" id="nextBtn" style="display:none; text-decoration:none;">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var tapped = false;
|
||||
function handleTap() {
|
||||
if (tapped) return;
|
||||
tapped = true;
|
||||
var svg = document.getElementById('fragmentSvg');
|
||||
var initial = document.getElementById('copyInitial');
|
||||
var continued = document.getElementById('copyContinued');
|
||||
var nextBtn = document.getElementById('nextBtn');
|
||||
|
||||
svg.classList.add('tapped');
|
||||
|
||||
setTimeout(function() {
|
||||
initial.classList.add('hidden');
|
||||
continued.classList.add('visible');
|
||||
nextBtn.style.display = 'flex';
|
||||
}, 300);
|
||||
|
||||
setTimeout(function() {
|
||||
svg.classList.remove('tapped');
|
||||
}, 600);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
242
initial mockups/screens/onboarding/04-turn-demo.html
Normal file
242
initial mockups/screens/onboarding/04-turn-demo.html
Normal file
@@ -0,0 +1,242 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Turn Demo</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.screen-content {
|
||||
padding: var(--space-5) var(--space-4) 100px;
|
||||
}
|
||||
|
||||
.thought-card {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4) var(--space-5);
|
||||
margin-bottom: var(--space-5);
|
||||
transition: opacity 0.3s ease-out, transform 0.3s ease-out;
|
||||
}
|
||||
|
||||
.thought-card.collapsing {
|
||||
animation: collapseCard 0.5s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes collapseCard {
|
||||
0% { opacity: 1; transform: scale(1); }
|
||||
100% { opacity: 0; transform: scale(0.85) translateY(-10px); }
|
||||
}
|
||||
|
||||
.animation-stage {
|
||||
height: 110px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
margin-bottom: var(--space-5);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.animation-stage.visible { opacity: 1; }
|
||||
|
||||
.turn-fragment {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.turn-fragment.f1 { animation: fragmentF1 1.2s ease-out 0.1s forwards; }
|
||||
.turn-fragment.f2 { animation: fragmentF2 1.2s ease-out 0.2s forwards; }
|
||||
.turn-fragment.f3 { animation: fragmentF3 1.2s ease-out 0.3s forwards; }
|
||||
|
||||
@keyframes fragmentF1 {
|
||||
0% { opacity: 0; transform: scale(0.2); }
|
||||
40% { opacity: 1; transform: scale(1.3) translateX(-50px) translateY(-20px); }
|
||||
100% { opacity: 1; transform: scale(1) translateX(-55px) translateY(-10px); }
|
||||
}
|
||||
@keyframes fragmentF2 {
|
||||
0% { opacity: 0; transform: scale(0.2); }
|
||||
40% { opacity: 1; transform: scale(1.3) translateY(-40px); }
|
||||
100% { opacity: 1; transform: scale(1) translateY(-15px); }
|
||||
}
|
||||
@keyframes fragmentF3 {
|
||||
0% { opacity: 0; transform: scale(0.2); }
|
||||
40% { opacity: 1; transform: scale(1.3) translateX(50px) translateY(-20px); }
|
||||
100% { opacity: 1; transform: scale(1) translateX(55px) translateY(-10px); }
|
||||
}
|
||||
|
||||
.reframes-area {
|
||||
opacity: 0;
|
||||
transform: translateY(12px);
|
||||
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
.reframes-area.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.distortion-row {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-3);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.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">
|
||||
<p class="label text-dim" style="margin-bottom: var(--space-3);">Watch the Turn in action</p>
|
||||
|
||||
<div class="thought-card" id="thoughtCard">
|
||||
<p class="body-lg text-soft" style="font-style: italic;">"I completely bombed my presentation today and everyone saw how bad it was."</p>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
Turn animation fragments — extracted from fragment-icons.svg
|
||||
MD size (radius 12), centred at 0,0 in 28×28 viewport (translate 14,14)
|
||||
Three jewel colors: Amethyst (f1), Sapphire (f2), Emerald (f3)
|
||||
Gradient IDs prefixed s04- to avoid conflicts
|
||||
-->
|
||||
<div class="animation-stage" id="animStage">
|
||||
|
||||
<!-- Fragment 1 — Amethyst MD (from fragment-icons.svg Amethyst MD) -->
|
||||
<div class="turn-fragment f1">
|
||||
<svg width="28" height="28" viewBox="0 0 28 28">
|
||||
<defs>
|
||||
<linearGradient id="s04-grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<filter id="s04-glowMdA" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="2.5" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g transform="translate(14,14)" filter="url(#s04-glowMdA)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#s04-grAmethyst)" 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>
|
||||
|
||||
<!-- Fragment 2 — Sapphire MD (from fragment-icons.svg Sapphire MD) -->
|
||||
<div class="turn-fragment f2">
|
||||
<svg width="28" height="28" viewBox="0 0 28 28">
|
||||
<defs>
|
||||
<linearGradient id="s04-grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/>
|
||||
<stop offset="100%" stop-color="#1D4ED8"/>
|
||||
</linearGradient>
|
||||
<filter id="s04-glowMdB" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="2.5" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g transform="translate(14,14)" filter="url(#s04-glowMdB)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#s04-grSapphire)" 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>
|
||||
|
||||
<!-- Fragment 3 — Emerald MD (from fragment-icons.svg Emerald MD) -->
|
||||
<div class="turn-fragment f3">
|
||||
<svg width="28" height="28" viewBox="0 0 28 28">
|
||||
<defs>
|
||||
<linearGradient id="s04-grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#047857"/>
|
||||
</linearGradient>
|
||||
<filter id="s04-glowMdC" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="2.5" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g transform="translate(14,14)" filter="url(#s04-glowMdC)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#s04-grEmerald)" 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>
|
||||
|
||||
<div class="reframes-area" id="reframesArea">
|
||||
<div class="distortion-row">
|
||||
<span class="chip chip-amber">Catastrophizing</span>
|
||||
<span class="chip chip-amber">Overgeneralization</span>
|
||||
</div>
|
||||
|
||||
<p class="label text-dim" style="margin-bottom: var(--space-3);">Three new angles</p>
|
||||
|
||||
<div class="reframe-block amethyst">
|
||||
<div class="reframe-label">Perspective Shift</div>
|
||||
<div class="reframe-text">One rough presentation doesn't define your skills. Every speaker — even the most experienced — has moments that don't land. This is one data point, not your whole story.</div>
|
||||
</div>
|
||||
<div class="reframe-block sapphire">
|
||||
<div class="reframe-label">Evidence Check</div>
|
||||
<div class="reframe-text">Think about the last three times you communicated something clearly and well. Those moments exist too. Your brain is amplifying this one and filtering the others out.</div>
|
||||
</div>
|
||||
<div class="reframe-block emerald">
|
||||
<div class="reframe-label">Action Step</div>
|
||||
<div class="reframe-text">Write down one specific thing that actually went okay in that presentation — even something small. Then name one thing to prepare differently next time. That's how you close the loop.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cta-bar">
|
||||
<a href="05-style-selection.html" class="btn btn-primary" id="ctaBtn" style="opacity:0; transition:opacity 0.5s ease; text-decoration:none;">
|
||||
That's the Turn
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
setTimeout(function() {
|
||||
var thoughtCard = document.getElementById('thoughtCard');
|
||||
var animStage = document.getElementById('animStage');
|
||||
var reframesArea = document.getElementById('reframesArea');
|
||||
var ctaBtn = document.getElementById('ctaBtn');
|
||||
|
||||
thoughtCard.classList.add('collapsing');
|
||||
|
||||
setTimeout(function() {
|
||||
thoughtCard.style.display = 'none';
|
||||
animStage.classList.add('visible');
|
||||
}, 500);
|
||||
|
||||
setTimeout(function() {
|
||||
animStage.style.display = 'none';
|
||||
reframesArea.classList.add('visible');
|
||||
ctaBtn.style.opacity = '1';
|
||||
}, 2000);
|
||||
}, 1000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
262
initial mockups/screens/onboarding/05-style-selection.html
Normal file
262
initial mockups/screens/onboarding/05-style-selection.html
Normal file
@@ -0,0 +1,262 @@
|
||||
<!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>
|
||||
150
initial mockups/screens/onboarding/06-notifications.html
Normal file
150
initial mockups/screens/onboarding/06-notifications.html
Normal file
@@ -0,0 +1,150 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Notifications</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.screen-content.centered {
|
||||
padding: var(--space-8) var(--space-6);
|
||||
}
|
||||
|
||||
.notif-icon-wrap {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--space-10);
|
||||
}
|
||||
|
||||
.notif-aura {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(139,92,246,0.18) 0%, rgba(59,130,246,0.06) 50%, transparent 70%);
|
||||
filter: blur(40px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.reminder-preview {
|
||||
width: 100%;
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-10);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.reminder-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.reminder-time {
|
||||
color: var(--faint-light);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.cta-area {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
</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">
|
||||
<div class="notif-icon-wrap">
|
||||
<div class="notif-aura"></div>
|
||||
<svg width="72" height="72" viewBox="0 0 72 72" fill="none" style="position:relative; z-index:1;">
|
||||
<defs>
|
||||
<linearGradient id="bellGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#A78BFA"/>
|
||||
<stop offset="100%" stop-color="#6D28D9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="fragAccent" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Bell body -->
|
||||
<path d="M36 14C28 14 22 20 22 28L22 44L16 50L56 50L50 44L50 28C50 20 44 14 36 14Z" fill="url(#bellGrad)" opacity="0.85"/>
|
||||
<path d="M32 50C32 52.2 33.8 54 36 54C38.2 54 40 52.2 40 50" fill="none" stroke="#A78BFA" stroke-width="1.5" opacity="0.7"/>
|
||||
<circle cx="36" cy="13" r="2.5" fill="url(#bellGrad)"/>
|
||||
<!--
|
||||
Fragment accent — extracted from fragment-icons.svg → Amber SM (radius 8)
|
||||
Centred at 57,24 (upper-right of bell) in 72×72 viewport
|
||||
-->
|
||||
<g transform="translate(57,24)">
|
||||
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#fragAccent)" 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>
|
||||
|
||||
<h2 class="heading text-pure" style="margin-bottom: var(--space-3);">A nudge, not a nag</h2>
|
||||
<p class="body text-dim" style="margin-bottom: var(--space-6);">Kalei sends one quiet reminder a day — not to create pressure, but to offer a pause. The kind that actually helps.</p>
|
||||
|
||||
<div class="reminder-preview">
|
||||
<div class="reminder-header">
|
||||
<!--
|
||||
Reminder icon — extracted from fragment-icons.svg → Amethyst XS (radius 6)
|
||||
Centred at 0,0 in 14×14 viewport (translate 7,7)
|
||||
-->
|
||||
<svg width="14" height="14" viewBox="0 0 14 14">
|
||||
<defs>
|
||||
<linearGradient id="s06-rfg" 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(7,7)">
|
||||
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#s06-rfg)" opacity="0.85"/>
|
||||
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||||
<circle cx="-1.5" cy="-1.5" r="0.8" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="label text-amethyst">Kalei</span>
|
||||
<span class="body-sm reminder-time">now</span>
|
||||
</div>
|
||||
<p class="subheading text-pure" style="margin-bottom: var(--space-1);">Something on your mind?</p>
|
||||
<p class="body-sm text-dim">Thoughts that go unexamined have a way of growing. A quick Turn takes a minute and often changes the rest of the day.</p>
|
||||
</div>
|
||||
|
||||
<div class="cta-area">
|
||||
<a href="07-account-creation.html" class="btn btn-primary" style="text-decoration:none;">
|
||||
Allow Notifications
|
||||
</a>
|
||||
<a href="07-account-creation.html" class="btn btn-ghost" style="text-decoration:none; color: var(--dim-light);">
|
||||
Not now
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
193
initial mockups/screens/onboarding/07-account-creation.html
Normal file
193
initial mockups/screens/onboarding/07-account-creation.html
Normal file
@@ -0,0 +1,193 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Create Account</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.screen-content {
|
||||
padding: var(--space-6) var(--space-4) var(--space-10);
|
||||
}
|
||||
|
||||
.btn-apple {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-3);
|
||||
height: 52px;
|
||||
background: var(--pure-light);
|
||||
color: var(--void);
|
||||
border-radius: var(--radius-lg);
|
||||
text-decoration: none;
|
||||
transition: opacity 0.2s ease-out;
|
||||
font-family: var(--font-primary);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-apple:hover { opacity: 0.9; }
|
||||
|
||||
.btn-google {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-3);
|
||||
height: 52px;
|
||||
background: transparent;
|
||||
color: var(--soft-light);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--twilight);
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease-out;
|
||||
font-family: var(--font-primary);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-google:hover { border-color: var(--faint-light); background: rgba(255,255,255,0.03); }
|
||||
|
||||
.social-btns {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
.divider-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
.divider-line {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--twilight);
|
||||
}
|
||||
|
||||
.form-fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
.field-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.btn-create {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 52px;
|
||||
width: 100%;
|
||||
background: var(--amethyst);
|
||||
color: var(--pure-light);
|
||||
border-radius: var(--radius-lg);
|
||||
text-decoration: none;
|
||||
box-shadow: var(--glow-amethyst);
|
||||
margin-bottom: var(--space-4);
|
||||
font-family: var(--font-primary);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.btn-create:hover { background: var(--amethyst-light); }
|
||||
|
||||
.signin-link {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.signin-link a {
|
||||
color: var(--amethyst-light);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.privacy-note {
|
||||
text-align: center;
|
||||
color: var(--faint-light);
|
||||
margin-top: var(--space-4);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.privacy-note a {
|
||||
color: var(--dim-light);
|
||||
text-decoration: underline;
|
||||
}
|
||||
</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);">Create your account</h1>
|
||||
<p class="body text-dim" style="margin-bottom: var(--space-6);">Your thoughts stay private. Always.</p>
|
||||
|
||||
<div class="social-btns">
|
||||
<a href="08-first-turn.html" class="btn-apple">
|
||||
<!-- Apple logo SVG (monochrome) -->
|
||||
<svg width="18" height="22" viewBox="0 0 18 22" fill="none">
|
||||
<path d="M14.98 11.47c-.02-2.53 2.07-3.75 2.16-3.81-1.18-1.72-3.01-1.96-3.66-1.98-1.56-.16-3.04.92-3.83.92-.79 0-2.01-.9-3.31-.87C4.59 5.76 3 6.64 2.1 8.06.27 10.93 1.64 15.24 3.42 17.61c.9 1.29 1.96 2.74 3.36 2.69 1.35-.05 1.86-.87 3.49-.87 1.63 0 2.09.87 3.52.84 1.46-.02 2.38-1.32 3.27-2.62.73-1.07 1.02-2.12 1.04-2.17-.02-.01-2.1-.8-2.12-3.01z" fill="#000"/>
|
||||
<path d="M12.44 3.83C13.17 2.94 13.67 1.7 13.53.44c-1.06.04-2.34.71-3.1 1.59-.67.77-1.27 2.01-1.11 3.19 1.18.09 2.39-.59 3.12-1.39z" fill="#000"/>
|
||||
</svg>
|
||||
Sign in with Apple
|
||||
</a>
|
||||
<a href="08-first-turn.html" class="btn-google">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M19.6 10.2c0-.7-.1-1.4-.2-2H10v3.8h5.4c-.2 1.3-1 2.4-2.1 3.1v2.6h3.4c2-1.8 3.1-4.5 3.1-7.5z" fill="#4285F4"/>
|
||||
<path d="M10 20c2.7 0 5-.9 6.6-2.4l-3.4-2.6c-.9.6-2 1-3.2 1-2.5 0-4.6-1.7-5.4-4H1.1v2.7C2.7 17.7 6.1 20 10 20z" fill="#34A853"/>
|
||||
<path d="M4.6 12c-.2-.6-.3-1.3-.3-2s.1-1.4.3-2V5.3H1.1C.4 6.7 0 8.3 0 10s.4 3.3 1.1 4.7l3.5-2.7z" fill="#FBBC05"/>
|
||||
<path d="M10 4c1.4 0 2.6.5 3.6 1.4L16.7 2.4C15 .8 12.7 0 10 0 6.1 0 2.7 2.3 1.1 5.7l3.5 2.7C5.4 5.7 7.5 4 10 4z" fill="#EA4335"/>
|
||||
</svg>
|
||||
Sign in with Google
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="divider-row">
|
||||
<div class="divider-line"></div>
|
||||
<span class="label text-faint">or</span>
|
||||
<div class="divider-line"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-fields">
|
||||
<div class="field-group">
|
||||
<label class="input-label">Email</label>
|
||||
<input type="email" class="input-field" placeholder="you@example.com">
|
||||
</div>
|
||||
<div class="field-group">
|
||||
<label class="input-label">Password</label>
|
||||
<input type="password" class="input-field" placeholder="Create a strong password">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="08-first-turn.html" class="btn-create">Create Account</a>
|
||||
|
||||
<div class="signin-link body-sm text-dim">
|
||||
Already have an account? <a href="#">Sign in</a>
|
||||
</div>
|
||||
|
||||
<div class="privacy-note body-sm">
|
||||
By continuing, you agree to our <a href="#">Terms</a> and <a href="#">Privacy Policy</a>.<br>
|
||||
We never sell your data.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
224
initial mockups/screens/onboarding/08-first-turn.html
Normal file
224
initial mockups/screens/onboarding/08-first-turn.html
Normal file
@@ -0,0 +1,224 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Your First Turn</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.screen-content {
|
||||
padding: var(--space-6) var(--space-4) 120px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.textarea-wrap {
|
||||
position: relative;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.textarea-aura {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 340px;
|
||||
height: 240px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(ellipse, rgba(139,92,246,0.12) 0%, transparent 70%);
|
||||
filter: blur(40px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.thought-textarea {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-5);
|
||||
font-family: var(--font-primary);
|
||||
font-size: 17px;
|
||||
line-height: 1.6;
|
||||
color: var(--pure-light);
|
||||
outline: none;
|
||||
resize: none;
|
||||
transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
|
||||
}
|
||||
|
||||
.thought-textarea::placeholder { color: var(--faint-light); }
|
||||
|
||||
.thought-textarea:focus {
|
||||
border-color: var(--amethyst);
|
||||
box-shadow: 0 0 0 1px rgba(139,92,246,0.2), 0 0 20px rgba(139,92,246,0.3);
|
||||
}
|
||||
|
||||
.fragment-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.hint-icon {
|
||||
flex-shrink: 0;
|
||||
animation: hintIconPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes hintIconPulse {
|
||||
0%, 100% { opacity: 0.75; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.12); }
|
||||
}
|
||||
|
||||
.prompts-label {
|
||||
color: var(--faint-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.prompt-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.prompt-chip {
|
||||
padding: var(--space-1) var(--space-3);
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-full);
|
||||
color: var(--dim-light);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.prompt-chip:hover {
|
||||
border-color: var(--amethyst);
|
||||
background: rgba(139,92,246,0.08);
|
||||
color: var(--amethyst-light);
|
||||
}
|
||||
|
||||
.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) 70%, transparent);
|
||||
}
|
||||
|
||||
.btn-turn {
|
||||
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: 600;
|
||||
border-radius: var(--radius-xl);
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 24px rgba(139,92,246,0.35);
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.btn-turn:hover {
|
||||
background: var(--amethyst-light);
|
||||
box-shadow: 0 0 32px rgba(139,92,246,0.5);
|
||||
}
|
||||
</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);">What's the thought?</h1>
|
||||
<p class="body text-dim" style="margin-bottom: var(--space-5);">Write it exactly as it sounds in your head — raw, unfiltered, even a little ugly. Kalei works better with the real version.</p>
|
||||
|
||||
<div class="textarea-wrap">
|
||||
<div class="textarea-aura"></div>
|
||||
<textarea class="thought-textarea" placeholder="The thought that keeps running on repeat..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="fragment-hint">
|
||||
<!--
|
||||
Hint icon — extracted from fragment-icons.svg → Amethyst XS (radius 6)
|
||||
Centred at 0,0 in 14×14 viewport (translate 7,7)
|
||||
-->
|
||||
<svg class="hint-icon" width="14" height="14" viewBox="0 0 14 14">
|
||||
<defs>
|
||||
<linearGradient id="s08-hintGrad" 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(7,7)">
|
||||
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#s08-hintGrad)" opacity="0.75"/>
|
||||
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||||
<circle cx="-1.5" cy="-1.5" r="0.8" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="body-sm text-faint" style="font-style: italic;">The Turn will show you new angles on this thought</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="body-sm prompts-label">Try a prompt</p>
|
||||
<div class="prompt-chips">
|
||||
<div class="prompt-chip body-sm" onclick="usePrompt('work')">Something at work</div>
|
||||
<div class="prompt-chip body-sm" onclick="usePrompt('relationship')">A relationship</div>
|
||||
<div class="prompt-chip body-sm" onclick="usePrompt('self')">Something about myself</div>
|
||||
<div class="prompt-chip body-sm" onclick="usePrompt('mistake')">A recent mistake</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cta-bar">
|
||||
<a href="09-welcome-complete.html" class="btn-turn">
|
||||
<!--
|
||||
Button icon — extracted from fragment-icons.svg → Amethyst SM (radius 8)
|
||||
Centred at 0,0 in 20×20 viewport (translate 10,10), white fill (on coloured button bg)
|
||||
-->
|
||||
<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>
|
||||
Turn the kaleidoscope
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var prompts = {
|
||||
work: "I feel like I'm constantly behind and my team is starting to notice how much I'm struggling to keep up.",
|
||||
relationship: "I keep pulling away from people I care about — I don't know why I do it, but I always end up alone.",
|
||||
self: "I don't deserve the things I've been given. It's only a matter of time before people figure out I'm not actually that capable.",
|
||||
mistake: "I said something really hurtful and now I can't stop replaying the look on their face. I ruined everything."
|
||||
};
|
||||
|
||||
function usePrompt(key) {
|
||||
var textarea = document.querySelector('.thought-textarea');
|
||||
textarea.value = prompts[key];
|
||||
textarea.focus();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
313
initial mockups/screens/onboarding/09-welcome-complete.html
Normal file
313
initial mockups/screens/onboarding/09-welcome-complete.html
Normal file
@@ -0,0 +1,313 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user