316 lines
13 KiB
HTML
316 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=390, initial-scale=1">
|
||
<title>Kalei — 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>
|