274 lines
14 KiB
HTML
274 lines
14 KiB
HTML
|
<!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>
|