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:
42
initial mockups/assets/ASSET-INDEX.md
Normal file
42
initial mockups/assets/ASSET-INDEX.md
Normal file
@@ -0,0 +1,42 @@
|
||||
# Kalei SVG Asset Library — Index
|
||||
|
||||
All assets derive their visual language from the **soft-elegance-final.svg** logo: crystalline geometry, jewel tone gradients, glow filters, breathing animations, and prismatic color cycling.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description | Elements |
|
||||
|------|-------------|----------|
|
||||
| `design-system.css` | Shared CSS with all design tokens, components, animations | Colors, typography, buttons, cards, inputs, utilities |
|
||||
| `icons-tab-bar.svg` | 5 navigation tab icons | Turn ◇, Mirror ✦, Lens ◎, Gallery ▦, You ● — active + inactive states |
|
||||
| `icons-distortions.svg` | 10 cognitive distortion type icons | Catastrophizing, Black-and-White, Mind Reading, Fortune Telling, Personalization, Discounting Positives, Emotional Reasoning, Should Statements, Labeling, Overgeneralization |
|
||||
| `icons-actions.svg` | 30 action/UI icons | Navigation, actions, status, feature-specific, media controls |
|
||||
| `fragment-icons.svg` | Fragment ◇ variants + highlight effects | 5 sizes (xs-xl), 8 color states, highlight underline, highlight bubble |
|
||||
| `decorative-shards.svg` | Background decorative elements | Breathing aura, floating shards, prismatic divider, corner accent, hero shard, shard cluster, orbiting motes, edge shimmer |
|
||||
| `patterns-kaleidoscope.svg` | 7 kaleidoscope pattern variants | Turn pattern, Mirror pattern, Ritual pattern, Simple, Complex, Thumbnail, Hero |
|
||||
| `progress-indicators.svg` | 8 progress visualization types | Large/small rings, linear bar, step dots, streak calendar, ritual bar, timer, evidence counter |
|
||||
| `evidence-wall.svg` | Evidence Wall mosaic system | 5 tile shapes, 3 mosaic stages (early/mid/full), connection lines, empty state |
|
||||
| `loading-animations.svg` | 10 loading/animation states | Spinners, skeleton shimmers, Turn animation, breathing logo, AI thinking, success burst |
|
||||
| `device-chrome.svg` | 8 device frame elements | Status bar, tab bar frame, nav header, iOS keyboard, device frame, modal scrim, toast, input accessory |
|
||||
| `spectrum-visualizations.svg` | 5 Spectrum analytics visualizations | The River, Your Glass, Turn Impact, Rhythm Detection, Growth Trajectory |
|
||||
|
||||
## Color Reference
|
||||
|
||||
| Token | Hex | Usage |
|
||||
|-------|-----|-------|
|
||||
| Void | `#050508` | Deepest background |
|
||||
| Kalei Navy | `#0A0E1A` | Primary surfaces |
|
||||
| Deep Glass | `#121628` | Elevated surfaces, inputs |
|
||||
| Twilight | `#1C2240` | Borders, dividers |
|
||||
| Amethyst | `#8B5CF6` | Primary accent, Turn |
|
||||
| Sapphire | `#3B82F6` | Info, Gallery |
|
||||
| Emerald | `#10B981` | Success, Lens |
|
||||
| Amber | `#F59E0B` | Fragments, Mirror |
|
||||
| Rose | `#EC4899` | Social, sharing |
|
||||
| Ruby | `#EF4444` | Error, destructive |
|
||||
| Indigo | `#6366F1` | Extended palette |
|
||||
|
||||
## Total Asset Count
|
||||
|
||||
- **11 SVG files** containing **100+ individual elements**
|
||||
- **1 CSS design system** with complete component library
|
||||
- All assets use consistent prismatic color palette and crystalline design language
|
||||
299
initial mockups/assets/decorative-shards.svg
Normal file
299
initial mockups/assets/decorative-shards.svg
Normal file
@@ -0,0 +1,299 @@
|
||||
<svg viewBox="0 0 700 880" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="grAmethyst" 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="grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grRose" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBCFE8"/><stop offset="100%" stop-color="#DB2777"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grIndigo" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#A5B4FC"/><stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="prismaticH" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="50%" stop-color="#10B981"><animate attributeName="stop-color" values="#10B981;#F59E0B;#EC4899;#8B5CF6;#3B82F6;#10B981" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#EC4899"><animate attributeName="stop-color" values="#EC4899;#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899" dur="8s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
<radialGradient id="auraGrad" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.15"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="10s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="60%" stop-color="#8B5CF6" stop-opacity="0.04"/>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<filter id="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="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="glowLg" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="8" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glowXl" x="-100%" y="-100%" width="300%" height="300%">
|
||||
<feGaussianBlur stdDeviation="14" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="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>
|
||||
|
||||
<style>
|
||||
text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
|
||||
.lbl { font-size: 9px; fill: #94A3B8; text-anchor: middle; font-weight: 500; }
|
||||
.section-lbl { font-size: 11px; fill: #64748B; font-weight: 600; letter-spacing: 0.08em; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect width="700" height="880" fill="#050508"/>
|
||||
<text x="350" y="28" font-size="13" font-weight="700" fill="#94A3B8" text-anchor="middle" letter-spacing="0.12em">DECORATIVE SHARD ELEMENTS</text>
|
||||
<text x="350" y="44" font-size="9" fill="#475569" text-anchor="middle">Background auras, floating shards, prismatic dividers, corner accents, edge shimmers</text>
|
||||
|
||||
<!-- 1. BREATHING AURA -->
|
||||
<text x="24" y="74" class="section-lbl">BREATHING AURA</text>
|
||||
<line x1="24" y1="80" x2="670" y2="80" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<g transform="translate(175, 160)">
|
||||
<circle r="70" fill="url(#auraGrad)">
|
||||
<animate attributeName="r" values="60;75;60" dur="6s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.6;1;0.6" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="40" fill="#8B5CF6" opacity="0.05" filter="url(#glowXl)">
|
||||
<animate attributeName="r" values="35;45;35" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<text x="0" y="100" class="lbl">Behind cards, hero sections</text>
|
||||
</g>
|
||||
|
||||
<!-- 2. FLOATING SHARDS -->
|
||||
<g transform="translate(475, 100)">
|
||||
<text x="0" y="-14" class="section-lbl" text-anchor="middle">FLOATING SHARDS</text>
|
||||
<!-- Shard 1 - large, slow drift -->
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-18 L 10,-4 L 2,16 L -8,6 Z" fill="url(#grAmethyst)" opacity="0.25">
|
||||
<animate attributeName="opacity" values="0.15;0.35;0.15" 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="0,0;5,-8;0,0" dur="12s" repeatCount="indefinite"/>
|
||||
</g>
|
||||
<!-- Shard 2 - medium, angled -->
|
||||
<g transform="translate(50, 30)" filter="url(#glowSm)">
|
||||
<path d="M 0,-10 L 7,2 L -2,12 L -6,0 Z" fill="url(#grSapphire)" opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.1;0.3;0.1" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<animateTransform attributeName="transform" type="translate" values="50,30;55,22;50,30" dur="9s" repeatCount="indefinite"/>
|
||||
</g>
|
||||
<!-- Shard 3 - small, faster -->
|
||||
<g transform="translate(-40, 50)" filter="url(#glowSm)">
|
||||
<path d="M 0,-6 L 5,0 L 0,8 L -4,2 Z" fill="url(#grEmerald)" opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.1;0.25;0.1" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<animateTransform attributeName="transform" type="translate" values="-40,50;-35,42;-40,50" dur="7s" repeatCount="indefinite"/>
|
||||
</g>
|
||||
<!-- Shard 4 - tiny mote -->
|
||||
<g transform="translate(30, -20)" filter="url(#shimmer)">
|
||||
<path d="M 0,-4 L 3,0 L 0,4 L -3,0 Z" fill="url(#grRose)" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.15;0.4;0.15" dur="3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<animateTransform attributeName="transform" type="translate" values="30,-20;33,-25;30,-20" dur="5s" repeatCount="indefinite"/>
|
||||
</g>
|
||||
<!-- Shard 5 - amber fleck -->
|
||||
<g transform="translate(-60, -10)" filter="url(#shimmer)">
|
||||
<path d="M 0,-5 L 4,0 L 0,5 L -4,0 Z" fill="url(#grAmber)" opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.1;0.3;0.1" dur="6s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<animateTransform attributeName="transform" type="translate" values="-60,-10;-58,-16;-60,-10" dur="8s" repeatCount="indefinite"/>
|
||||
</g>
|
||||
<text x="0" y="100" class="lbl">Scattered across backgrounds, parallax layers</text>
|
||||
</g>
|
||||
|
||||
<!-- 3. PRISMATIC DIVIDER -->
|
||||
<text x="24" y="274" class="section-lbl">PRISMATIC DIVIDER</text>
|
||||
<line x1="24" y1="280" x2="670" y2="280" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<g transform="translate(350, 320)" filter="url(#glowMd)">
|
||||
<!-- Main prismatic line -->
|
||||
<line x1="-280" y1="0" x2="280" y2="0" stroke="url(#prismaticH)" stroke-width="1.5" opacity="0.6"/>
|
||||
<!-- Glow underneath -->
|
||||
<line x1="-280" y1="0" x2="280" y2="0" stroke="url(#prismaticH)" stroke-width="4" opacity="0.15"/>
|
||||
<!-- Center diamond accent -->
|
||||
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#grAmethyst)" opacity="0.7" filter="url(#shimmer)">
|
||||
<animate attributeName="opacity" values="0.5;0.8;0.5" dur="3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<!-- Shimmer sweep -->
|
||||
<rect x="-280" y="-1" width="40" height="2" fill="#fff" opacity="0" rx="1">
|
||||
<animate attributeName="opacity" values="0;0.3;0" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="x" values="-280;280" dur="3s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<!-- End shards -->
|
||||
<g transform="translate(-280, 0)" filter="url(#glowSm)">
|
||||
<path d="M 0,-3 L 3,0 L 0,3 L -3,0 Z" fill="#8B5CF6" opacity="0.4"/>
|
||||
</g>
|
||||
<g transform="translate(280, 0)" filter="url(#glowSm)">
|
||||
<path d="M 0,-3 L 3,0 L 0,3 L -3,0 Z" fill="#EC4899" opacity="0.4"/>
|
||||
</g>
|
||||
<text x="0" y="30" class="lbl">Section divider with cycling prismatic gradient</text>
|
||||
</g>
|
||||
|
||||
<!-- 4. CORNER ACCENTS -->
|
||||
<text x="24" y="384" class="section-lbl">CORNER ACCENTS</text>
|
||||
<line x1="24" y1="390" x2="670" y2="390" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Demo card with corner accents -->
|
||||
<g transform="translate(100, 420)">
|
||||
<rect width="200" height="120" rx="12" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.8"/>
|
||||
<!-- Top-left corner -->
|
||||
<g filter="url(#glowSm)">
|
||||
<path d="M 0,20 L 0,0 L 20,0" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.5"/>
|
||||
<path d="M 0,-2 L 4,2 L 0,6 L -4,2 Z" fill="url(#grAmethyst)" opacity="0.6" transform="translate(0,0)"/>
|
||||
</g>
|
||||
<!-- Top-right corner -->
|
||||
<g filter="url(#glowSm)" transform="translate(200, 0)">
|
||||
<path d="M 0,20 L 0,0 L -20,0" fill="none" stroke="#3B82F6" stroke-width="1" opacity="0.5"/>
|
||||
<path d="M 0,-2 L 4,2 L 0,6 L -4,2 Z" fill="url(#grSapphire)" opacity="0.6"/>
|
||||
</g>
|
||||
<!-- Bottom-left corner -->
|
||||
<g filter="url(#glowSm)" transform="translate(0, 120)">
|
||||
<path d="M 0,-20 L 0,0 L 20,0" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
|
||||
<path d="M 0,-2 L 4,2 L 0,6 L -4,2 Z" fill="url(#grEmerald)" opacity="0.6"/>
|
||||
</g>
|
||||
<!-- Bottom-right corner -->
|
||||
<g filter="url(#glowSm)" transform="translate(200, 120)">
|
||||
<path d="M 0,-20 L 0,0 L -20,0" fill="none" stroke="#F59E0B" stroke-width="1" opacity="0.5"/>
|
||||
<path d="M 0,-2 L 4,2 L 0,6 L -4,2 Z" fill="url(#grAmber)" opacity="0.6"/>
|
||||
</g>
|
||||
<text x="100" y="65" font-size="10" fill="#475569" text-anchor="middle">Card Content</text>
|
||||
<text x="100" y="152" class="lbl">Corner accent marks on cards</text>
|
||||
</g>
|
||||
|
||||
<!-- 5. HERO SHARD BURST -->
|
||||
<g transform="translate(475, 490)">
|
||||
<text x="0" y="-70" class="section-lbl" text-anchor="middle">HERO SHARD BURST</text>
|
||||
<!-- Central glow -->
|
||||
<circle r="30" fill="#8B5CF6" opacity="0.08" filter="url(#glowXl)">
|
||||
<animate attributeName="r" values="25;35;25" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<!-- Radiating shards -->
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-40 L 4,-20 L 0,-15 L -4,-20 Z" fill="url(#grAmethyst)" opacity="0.5">
|
||||
<animate attributeName="opacity" values="0.3;0.6;0.3" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 35,-20 L 20,-16 L 15,-20 L 20,-24 Z" fill="url(#grSapphire)" opacity="0.4" transform="rotate(30)">
|
||||
<animate attributeName="opacity" values="0.2;0.5;0.2" dur="4.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 40,0 L 22,4 L 18,0 L 22,-4 Z" fill="url(#grEmerald)" opacity="0.4">
|
||||
<animate attributeName="opacity" values="0.25;0.5;0.25" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 20,35 L 16,18 L 20,14 L 24,18 Z" fill="url(#grAmber)" opacity="0.35" transform="rotate(-20)">
|
||||
<animate attributeName="opacity" values="0.2;0.45;0.2" dur="3.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M -35,20 L -18,16 L -14,20 L -18,24 Z" fill="url(#grRose)" opacity="0.35">
|
||||
<animate attributeName="opacity" values="0.2;0.5;0.2" dur="4.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M -20,-35 L -16,-18 L -20,-14 L -24,-18 Z" fill="url(#grIndigo)" opacity="0.4">
|
||||
<animate attributeName="opacity" values="0.25;0.55;0.25" dur="3.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
<!-- Orbiting mote -->
|
||||
<g filter="url(#shimmer)">
|
||||
<circle r="2" fill="#A78BFA" opacity="0">
|
||||
<animateMotion dur="8s" repeatCount="indefinite" path="M0,-50 A50,50 0 1 1 -0.1,-50"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0;0;0" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#3B82F6" opacity="0">
|
||||
<animateMotion dur="6s" repeatCount="indefinite" path="M0,-45 A45,45 0 1 0 -0.1,-45"/>
|
||||
<animate attributeName="opacity" values="0;0;0.7;0;0" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
<text x="0" y="80" class="lbl">Hero/splash background accent</text>
|
||||
</g>
|
||||
|
||||
<!-- 6. SHARD CLUSTER -->
|
||||
<text x="24" y="604" class="section-lbl">SHARD CLUSTER</text>
|
||||
<line x1="24" y1="610" x2="670" y2="610" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<g transform="translate(175, 690)">
|
||||
<g filter="url(#glowMd)">
|
||||
<!-- Primary large shard -->
|
||||
<path d="M 0,-20 L 12,0 L 0,20 L -12,0 Z" fill="url(#grAmethyst)" opacity="0.5">
|
||||
<animate attributeName="opacity" values="0.4;0.6;0.4" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-20 L 12,0 L 0,0 Z" fill="#fff" opacity="0.1"/>
|
||||
</g>
|
||||
<g filter="url(#glowSm)">
|
||||
<!-- Secondary shard, offset -->
|
||||
<path d="M 18,-12 L 26,-2 L 20,10 L 14,0 Z" fill="url(#grSapphire)" opacity="0.35">
|
||||
<animate attributeName="opacity" values="0.25;0.45;0.25" dur="4s" begin="0.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- Tertiary small shard -->
|
||||
<path d="M -16,8 L -10,14 L -14,22 L -20,16 Z" fill="url(#grEmerald)" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.2;0.4;0.2" dur="3.5s" begin="1s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- Tiny accent shards -->
|
||||
<path d="M 8,-18 L 12,-14 L 10,-10 L 6,-14 Z" fill="url(#grAmber)" opacity="0.25"/>
|
||||
<path d="M -20,-8 L -16,-12 L -12,-8 L -16,-4 Z" fill="url(#grRose)" opacity="0.2"/>
|
||||
</g>
|
||||
<text x="0" y="50" class="lbl">Decorative cluster for empty states, backgrounds</text>
|
||||
</g>
|
||||
|
||||
<!-- 7. EDGE SHIMMER -->
|
||||
<g transform="translate(475, 660)">
|
||||
<text x="0" y="-34" class="section-lbl" text-anchor="middle">EDGE SHIMMER</text>
|
||||
<!-- Demo card edge -->
|
||||
<rect x="-80" y="-20" width="160" height="80" rx="10" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.8"/>
|
||||
<!-- Left edge shimmer -->
|
||||
<line x1="-80" y1="-18" x2="-80" y2="58" stroke="url(#prismaticH)" stroke-width="1.5" opacity="0.3"/>
|
||||
<!-- Shimmer travel -->
|
||||
<rect x="-81" y="-20" width="2" height="16" rx="1" fill="#fff" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.4;0" dur="2.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="y" values="-20;60" dur="2.5s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<!-- Top edge subtle shimmer -->
|
||||
<line x1="-78" y1="-20" x2="78" y2="-20" stroke="#8B5CF6" stroke-width="0.5" opacity="0.15"/>
|
||||
<rect x="-78" y="-21" width="24" height="2" rx="1" fill="#C4B5FD" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.25;0" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="x" values="-78;78" dur="3s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<text x="0" y="20" font-size="10" fill="#475569" text-anchor="middle">Card Content</text>
|
||||
<text x="0" y="90" class="lbl">Edge shimmer on focused/hovered cards</text>
|
||||
</g>
|
||||
|
||||
<!-- 8. ORBITING MOTES (standalone) -->
|
||||
<text x="24" y="784" class="section-lbl">ORBITING MOTES</text>
|
||||
<line x1="24" y1="790" x2="670" y2="790" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<g transform="translate(350, 840)" filter="url(#shimmer)">
|
||||
<!-- Mote orbit paths (faint) -->
|
||||
<circle r="30" fill="none" stroke="#1C2240" stroke-width="0.3" stroke-dasharray="2 4"/>
|
||||
<circle r="22" fill="none" stroke="#1C2240" stroke-width="0.3" stroke-dasharray="2 4"/>
|
||||
<!-- Orbiting motes -->
|
||||
<circle r="2.5" fill="#A78BFA" opacity="0">
|
||||
<animateMotion dur="5s" repeatCount="indefinite" path="M0,-30 A30,30 0 1 1 -0.1,-30"/>
|
||||
<animate attributeName="opacity" values="0;0.9;0;0;0" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#3B82F6" opacity="0">
|
||||
<animateMotion dur="7s" repeatCount="indefinite" path="M0,-30 A30,30 0 1 0 -0.1,-30"/>
|
||||
<animate attributeName="opacity" values="0;0;0.8;0;0" dur="7s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="#10B981" opacity="0">
|
||||
<animateMotion dur="4s" repeatCount="indefinite" path="M0,-22 A22,22 0 1 1 -0.1,-22"/>
|
||||
<animate attributeName="opacity" values="0;0.7;0;0.5;0" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#F59E0B" opacity="0">
|
||||
<animateMotion dur="6s" repeatCount="indefinite" path="M0,-22 A22,22 0 1 0 -0.1,-22"/>
|
||||
<animate attributeName="opacity" values="0;0;0;0.9;0" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="1" fill="#EC4899" opacity="0">
|
||||
<animateMotion dur="9s" repeatCount="indefinite" path="M0,-30 A30,30 0 1 1 -0.1,-30" begin="2s"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0;0;0.5;0" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<text x="0" y="52" class="lbl">Floating motes around logos, loaders, hero elements</text>
|
||||
</g>
|
||||
|
||||
<text x="350" y="874" font-size="8" fill="#334155" text-anchor="middle">Decorative elements use breathing animations, prismatic color cycling, glow filters from the soft-elegance visual language</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 17 KiB |
762
initial mockups/assets/design-system.css
Normal file
762
initial mockups/assets/design-system.css
Normal file
@@ -0,0 +1,762 @@
|
||||
/* ============================================
|
||||
KALEI DESIGN SYSTEM
|
||||
Extracted from soft-elegance-final.svg
|
||||
============================================ */
|
||||
|
||||
/* --- CSS Custom Properties (Design Tokens) --- */
|
||||
:root {
|
||||
/* Backgrounds */
|
||||
--void: #050508;
|
||||
--kalei-navy: #0A0E1A;
|
||||
--deep-glass: #121628;
|
||||
--twilight: #1C2240;
|
||||
|
||||
/* Jewel Tones */
|
||||
--amethyst: #8B5CF6;
|
||||
--amethyst-light: #A78BFA;
|
||||
--amethyst-dark: #6D28D9;
|
||||
--sapphire: #3B82F6;
|
||||
--sapphire-light: #60A5FA;
|
||||
--sapphire-dark: #1D4ED8;
|
||||
--emerald: #10B981;
|
||||
--emerald-light: #34D399;
|
||||
--emerald-dark: #047857;
|
||||
--ruby: #EF4444;
|
||||
--amber: #F59E0B;
|
||||
--amber-light: #FCD34D;
|
||||
--amber-dark: #B45309;
|
||||
--rose: #EC4899;
|
||||
--rose-light: #F9A8D4;
|
||||
--indigo: #6366F1;
|
||||
--indigo-light: #818CF8;
|
||||
|
||||
/* Text */
|
||||
--pure-light: #FFFFFF;
|
||||
--soft-light: #E2E8F0;
|
||||
--dim-light: #94A3B8;
|
||||
--faint-light: #475569;
|
||||
|
||||
/* Prismatic Gradient */
|
||||
--prismatic: linear-gradient(135deg, #8B5CF6, #3B82F6, #10B981, #F59E0B, #EC4899);
|
||||
--prismatic-subtle: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(59,130,246,0.15), rgba(16,185,129,0.15), rgba(245,158,11,0.15), rgba(236,72,153,0.15));
|
||||
|
||||
/* Typography */
|
||||
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
--font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
|
||||
/* Spacing */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-10: 40px;
|
||||
--space-12: 48px;
|
||||
|
||||
/* Radii */
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 10px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
--radius-2xl: 20px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Shadows (glow-based, not drop-shadow) */
|
||||
--glow-amethyst: 0 0 20px rgba(139, 92, 246, 0.3);
|
||||
--glow-sapphire: 0 0 20px rgba(59, 130, 246, 0.3);
|
||||
--glow-emerald: 0 0 20px rgba(16, 185, 129, 0.3);
|
||||
--glow-amber: 0 0 20px rgba(245, 158, 11, 0.3);
|
||||
--glow-rose: 0 0 20px rgba(236, 72, 153, 0.3);
|
||||
--glow-white: 0 0 16px rgba(255, 255, 255, 0.15);
|
||||
|
||||
/* Device frame */
|
||||
--device-width: 390px;
|
||||
--device-height: 844px;
|
||||
--status-bar-height: 54px;
|
||||
--tab-bar-height: 83px;
|
||||
--nav-header-height: 56px;
|
||||
}
|
||||
|
||||
/* --- Reset & Base --- */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
|
||||
|
||||
body {
|
||||
background: #000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
font-family: var(--font-primary);
|
||||
color: var(--pure-light);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* --- Device Frame --- */
|
||||
.device-frame {
|
||||
width: var(--device-width);
|
||||
height: var(--device-height);
|
||||
background: var(--void);
|
||||
border-radius: 44px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: 0 0 0 2px rgba(255,255,255,0.06), 0 20px 60px rgba(0,0,0,0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform: scale(var(--device-scale, 1.2));
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
/* --- Status Bar --- */
|
||||
.status-bar {
|
||||
height: var(--status-bar-height);
|
||||
padding: 14px 28px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
.status-bar .time {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.status-bar .icons {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
.status-bar .icons svg { width: 16px; height: 16px; }
|
||||
|
||||
/* --- Navigation Header --- */
|
||||
.nav-header {
|
||||
height: var(--nav-header-height);
|
||||
padding: 0 var(--space-4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
.nav-header .nav-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.nav-header .nav-back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: var(--amethyst-light);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-header .nav-back svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.nav-header .nav-action {
|
||||
color: var(--dim-light);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* --- Screen Content Area --- */
|
||||
.screen-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 var(--space-4);
|
||||
position: relative;
|
||||
}
|
||||
.screen-content::-webkit-scrollbar { display: none; }
|
||||
.screen-content.no-pad { padding: 0; }
|
||||
.screen-content.centered {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* --- Tab Bar --- */
|
||||
.tab-bar {
|
||||
height: var(--tab-bar-height);
|
||||
background: var(--kalei-navy);
|
||||
border-top: 1px solid var(--twilight);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-around;
|
||||
padding-top: 8px;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
.tab-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
min-width: 60px;
|
||||
}
|
||||
.tab-item svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.tab-item .tab-label {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.tab-item.inactive svg { fill: var(--dim-light); stroke: var(--dim-light); }
|
||||
.tab-item.inactive .tab-label { color: var(--faint-light); }
|
||||
.tab-item.active .tab-label { color: var(--pure-light); }
|
||||
|
||||
/* Active tab colors by type */
|
||||
.tab-item.active[data-tab="turn"] svg { fill: var(--amethyst); stroke: var(--amethyst); }
|
||||
.tab-item.active[data-tab="turn"] .tab-label { color: var(--amethyst-light); }
|
||||
.tab-item.active[data-tab="mirror"] svg { fill: var(--amber); stroke: var(--amber); }
|
||||
.tab-item.active[data-tab="mirror"] .tab-label { color: var(--amber-light); }
|
||||
.tab-item.active[data-tab="lens"] svg { fill: var(--emerald); stroke: var(--emerald); }
|
||||
.tab-item.active[data-tab="lens"] .tab-label { color: var(--emerald-light); }
|
||||
.tab-item.active[data-tab="gallery"] svg { fill: var(--sapphire); stroke: var(--sapphire); }
|
||||
.tab-item.active[data-tab="gallery"] .tab-label { color: var(--sapphire-light); }
|
||||
.tab-item.active[data-tab="you"] svg { fill: var(--soft-light); stroke: var(--soft-light); }
|
||||
.tab-item.active[data-tab="you"] .tab-label { color: var(--soft-light); }
|
||||
|
||||
/* --- Typography --- */
|
||||
.display-xl { font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1.1; }
|
||||
.display-lg { font-family: var(--font-display); font-size: 32px; font-weight: 700; line-height: 1.15; }
|
||||
.display-md { font-size: 24px; font-weight: 600; line-height: 1.2; }
|
||||
.heading { font-size: 20px; font-weight: 600; line-height: 1.3; }
|
||||
.subheading { font-size: 16px; font-weight: 600; line-height: 1.4; }
|
||||
.body-lg { font-size: 17px; font-weight: 400; line-height: 1.5; }
|
||||
.body { font-size: 15px; font-weight: 400; line-height: 1.5; }
|
||||
.body-sm { font-size: 13px; font-weight: 400; line-height: 1.5; }
|
||||
.label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
|
||||
|
||||
.text-pure { color: var(--pure-light); }
|
||||
.text-soft { color: var(--soft-light); }
|
||||
.text-dim { color: var(--dim-light); }
|
||||
.text-faint { color: var(--faint-light); }
|
||||
.text-amethyst { color: var(--amethyst-light); }
|
||||
.text-sapphire { color: var(--sapphire-light); }
|
||||
.text-emerald { color: var(--emerald-light); }
|
||||
.text-amber { color: var(--amber-light); }
|
||||
.text-rose { color: var(--rose-light); }
|
||||
|
||||
.text-prismatic {
|
||||
background: var(--prismatic);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* --- Buttons --- */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
font-family: var(--font-primary);
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-out;
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn-primary {
|
||||
height: 52px;
|
||||
padding: 0 var(--space-6);
|
||||
background: var(--amethyst);
|
||||
color: var(--pure-light);
|
||||
font-size: 16px;
|
||||
border-radius: var(--radius-lg);
|
||||
width: 100%;
|
||||
box-shadow: var(--glow-amethyst);
|
||||
}
|
||||
.btn-primary:hover { background: var(--amethyst-light); }
|
||||
.btn-primary.btn-emerald { background: var(--emerald); box-shadow: var(--glow-emerald); }
|
||||
.btn-primary.btn-amber { background: var(--amber); box-shadow: var(--glow-amber); color: var(--void); }
|
||||
.btn-primary.btn-rose { background: var(--rose); box-shadow: var(--glow-rose); }
|
||||
|
||||
.btn-secondary {
|
||||
height: 44px;
|
||||
padding: 0 var(--space-5);
|
||||
background: var(--deep-glass);
|
||||
color: var(--soft-light);
|
||||
font-size: 15px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--twilight);
|
||||
width: 100%;
|
||||
}
|
||||
.btn-secondary:hover { background: var(--twilight); }
|
||||
|
||||
.btn-ghost {
|
||||
height: 40px;
|
||||
padding: 0 var(--space-4);
|
||||
background: transparent;
|
||||
color: var(--amethyst-light);
|
||||
font-size: 15px;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.btn-ghost:hover { background: rgba(139, 92, 246, 0.1); }
|
||||
|
||||
.btn-sm { height: 36px; font-size: 13px; padding: 0 var(--space-3); border-radius: var(--radius-sm); }
|
||||
.btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--radius-md); }
|
||||
.btn-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
|
||||
|
||||
/* --- Inputs --- */
|
||||
.input-field {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0 14px;
|
||||
font-family: var(--font-primary);
|
||||
font-size: 16px;
|
||||
color: var(--pure-light);
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease-out;
|
||||
}
|
||||
.input-field::placeholder { color: var(--faint-light); }
|
||||
.input-field:focus { border-color: var(--amethyst); }
|
||||
|
||||
.textarea-field {
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 14px;
|
||||
font-family: var(--font-primary);
|
||||
font-size: 17px;
|
||||
line-height: 1.5;
|
||||
color: var(--pure-light);
|
||||
outline: none;
|
||||
resize: none;
|
||||
transition: border-color 0.2s ease-out;
|
||||
}
|
||||
.textarea-field::placeholder { color: var(--faint-light); }
|
||||
.textarea-field:focus { border-color: var(--amethyst); }
|
||||
|
||||
.input-label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: var(--space-2);
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* --- Cards --- */
|
||||
.card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid rgba(28, 34, 64, 0.6);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-elevated {
|
||||
background: var(--deep-glass);
|
||||
border-color: var(--twilight);
|
||||
}
|
||||
.card-pattern {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-pattern .pattern-visual {
|
||||
height: 160px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--void);
|
||||
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-pattern .pattern-content {
|
||||
padding: var(--space-3) var(--space-4);
|
||||
}
|
||||
|
||||
.card-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.card-action:hover { background: var(--deep-glass); }
|
||||
.card-action .card-action-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.card-action .card-action-text { flex: 1; }
|
||||
.card-action .card-action-chevron { color: var(--faint-light); }
|
||||
|
||||
/* --- Chips / Tags --- */
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
height: 28px;
|
||||
padding: 0 var(--space-3);
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.chip-amethyst { background: rgba(139,92,246,0.15); color: var(--amethyst-light); }
|
||||
.chip-sapphire { background: rgba(59,130,246,0.15); color: var(--sapphire-light); }
|
||||
.chip-emerald { background: rgba(16,185,129,0.15); color: var(--emerald-light); }
|
||||
.chip-amber { background: rgba(245,158,11,0.15); color: var(--amber-light); }
|
||||
.chip-rose { background: rgba(236,72,153,0.15); color: var(--rose-light); }
|
||||
|
||||
/* --- Fragment Highlight --- */
|
||||
.fragment-highlight {
|
||||
position: relative;
|
||||
display: inline;
|
||||
}
|
||||
.fragment-highlight::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--amber);
|
||||
border-radius: 2px;
|
||||
opacity: 0.6;
|
||||
box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
|
||||
animation: fragmentGlow 2s ease-in-out infinite;
|
||||
}
|
||||
.fragment-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-left: 4px;
|
||||
color: var(--amber);
|
||||
animation: fragmentPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* --- Chat Bubbles (Mirror) --- */
|
||||
.chat-bubble {
|
||||
max-width: 80%;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-radius: var(--radius-xl);
|
||||
margin-bottom: var(--space-3);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.chat-bubble.user {
|
||||
background: rgba(139, 92, 246, 0.15);
|
||||
border: 1px solid rgba(139, 92, 246, 0.2);
|
||||
margin-left: auto;
|
||||
border-bottom-right-radius: var(--space-1);
|
||||
}
|
||||
.chat-bubble.ai {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
margin-right: auto;
|
||||
border-bottom-left-radius: var(--space-1);
|
||||
color: var(--soft-light);
|
||||
}
|
||||
|
||||
/* --- Progress Ring --- */
|
||||
.progress-ring {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.progress-ring svg { transform: rotate(-90deg); }
|
||||
.progress-ring .progress-text {
|
||||
position: absolute;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.progress-ring .progress-label {
|
||||
position: absolute;
|
||||
top: 58%;
|
||||
font-size: 11px;
|
||||
color: var(--dim-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* --- Modals --- */
|
||||
.modal-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(5, 5, 8, 0.7);
|
||||
backdrop-filter: blur(8px);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
z-index: 50;
|
||||
}
|
||||
.modal-overlay.centered { align-items: center; }
|
||||
|
||||
.modal-sheet {
|
||||
width: 100%;
|
||||
max-height: 70%;
|
||||
background: var(--kalei-navy);
|
||||
border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
|
||||
padding: var(--space-6) var(--space-4) var(--space-8);
|
||||
position: relative;
|
||||
}
|
||||
.modal-sheet .modal-handle {
|
||||
width: 36px;
|
||||
height: 4px;
|
||||
background: var(--twilight);
|
||||
border-radius: var(--radius-full);
|
||||
margin: 0 auto var(--space-5);
|
||||
}
|
||||
.modal-card {
|
||||
width: 340px;
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-2xl);
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
/* --- Dividers --- */
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--twilight);
|
||||
margin: var(--space-4) 0;
|
||||
}
|
||||
|
||||
/* --- Section Headers --- */
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.section-header .section-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--dim-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.section-header .section-action {
|
||||
font-size: 13px;
|
||||
color: var(--amethyst-light);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* --- Stat Block --- */
|
||||
.stat-row {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.stat-block {
|
||||
flex: 1;
|
||||
background: var(--deep-glass);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3);
|
||||
text-align: center;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 11px;
|
||||
color: var(--dim-light);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* --- Toggle / Radio --- */
|
||||
.radio-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
cursor: pointer;
|
||||
margin-bottom: var(--space-2);
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
.radio-option.selected {
|
||||
border-color: var(--amethyst);
|
||||
background: rgba(139, 92, 246, 0.08);
|
||||
}
|
||||
.radio-dot {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--twilight);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.radio-option.selected .radio-dot {
|
||||
border-color: var(--amethyst);
|
||||
}
|
||||
.radio-option.selected .radio-dot::after {
|
||||
content: '';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--amethyst);
|
||||
}
|
||||
|
||||
/* --- Step Progress --- */
|
||||
.step-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-3) 0;
|
||||
}
|
||||
.step-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--twilight);
|
||||
}
|
||||
.step-dot.active { background: var(--amethyst); box-shadow: 0 0 8px rgba(139, 92, 246, 0.4); }
|
||||
.step-dot.completed { background: var(--emerald); }
|
||||
.step-label {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
margin-left: var(--space-2);
|
||||
}
|
||||
|
||||
/* --- Reframe Blocks --- */
|
||||
.reframe-block {
|
||||
padding: var(--space-4);
|
||||
border-radius: var(--radius-lg);
|
||||
margin-bottom: var(--space-3);
|
||||
border-left: 3px solid;
|
||||
}
|
||||
.reframe-block.amethyst { border-color: var(--amethyst); background: rgba(139,92,246,0.06); }
|
||||
.reframe-block.sapphire { border-color: var(--sapphire); background: rgba(59,130,246,0.06); }
|
||||
.reframe-block.emerald { border-color: var(--emerald); background: rgba(16,185,129,0.06); }
|
||||
.reframe-block .reframe-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.reframe-block.amethyst .reframe-label { color: var(--amethyst-light); }
|
||||
.reframe-block.sapphire .reframe-label { color: var(--sapphire-light); }
|
||||
.reframe-block.emerald .reframe-label { color: var(--emerald-light); }
|
||||
.reframe-block .reframe-text {
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
|
||||
/* --- Animations (from soft-elegance SVG language) --- */
|
||||
@keyframes breathing {
|
||||
0%, 100% { opacity: 0.6; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.03); }
|
||||
}
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 0.7; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
@keyframes fragmentGlow {
|
||||
0%, 100% { opacity: 0.4; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
@keyframes fragmentPulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes slideUp {
|
||||
from { transform: translateY(100%); }
|
||||
to { transform: translateY(0); }
|
||||
}
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes hintPulse {
|
||||
0% { opacity: 0; }
|
||||
50% { opacity: 0.6; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
@keyframes prismaticShift {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
/* Loading shimmer effect */
|
||||
.loading-shimmer {
|
||||
background: linear-gradient(90deg, var(--deep-glass) 25%, rgba(28,34,64,0.6) 50%, var(--deep-glass) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s ease-in-out infinite;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
/* Breathing aura (decorative background) */
|
||||
.aura {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(60px);
|
||||
opacity: 0.15;
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* --- Utilities --- */
|
||||
.mt-1 { margin-top: var(--space-1); }
|
||||
.mt-2 { margin-top: var(--space-2); }
|
||||
.mt-3 { margin-top: var(--space-3); }
|
||||
.mt-4 { margin-top: var(--space-4); }
|
||||
.mt-5 { margin-top: var(--space-5); }
|
||||
.mt-6 { margin-top: var(--space-6); }
|
||||
.mt-8 { margin-top: var(--space-8); }
|
||||
.mb-2 { margin-bottom: var(--space-2); }
|
||||
.mb-3 { margin-bottom: var(--space-3); }
|
||||
.mb-4 { margin-bottom: var(--space-4); }
|
||||
.mb-6 { margin-bottom: var(--space-6); }
|
||||
.gap-2 { gap: var(--space-2); }
|
||||
.gap-3 { gap: var(--space-3); }
|
||||
.gap-4 { gap: var(--space-4); }
|
||||
.flex { display: flex; }
|
||||
.flex-col { flex-direction: column; }
|
||||
.items-center { align-items: center; }
|
||||
.justify-center { justify-content: center; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.text-center { text-align: center; }
|
||||
.w-full { width: 100%; }
|
||||
.relative { position: relative; }
|
||||
.overflow-hidden { overflow: hidden; }
|
||||
199
initial mockups/assets/device-chrome.svg
Normal file
199
initial mockups/assets/device-chrome.svg
Normal file
@@ -0,0 +1,199 @@
|
||||
<svg viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/><stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="prismaticH" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#8B5CF6"/><stop offset="25%" stop-color="#3B82F6"/><stop offset="50%" stop-color="#10B981"/><stop offset="75%" stop-color="#F59E0B"/><stop offset="100%" stop-color="#EC4899"/>
|
||||
</linearGradient>
|
||||
|
||||
<filter id="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="glowMd" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<style>
|
||||
text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
|
||||
.lbl { font-size: 9px; fill: #94A3B8; text-anchor: middle; font-weight: 500; }
|
||||
.section-lbl { font-size: 11px; fill: #64748B; font-weight: 600; letter-spacing: 0.08em; }
|
||||
.chrome-text { font-size: 10px; fill: #E2E8F0; font-weight: 600; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect width="700" height="700" fill="#050508"/>
|
||||
<text x="350" y="28" font-size="13" font-weight="700" fill="#94A3B8" text-anchor="middle" letter-spacing="0.12em">DEVICE CHROME ELEMENTS</text>
|
||||
<text x="350" y="44" font-size="9" fill="#475569" text-anchor="middle">Status bar, tab bar, nav header, keyboard, device frame, modal scrim, toast, input accessory</text>
|
||||
|
||||
<!-- 1. STATUS BAR (iPhone 14 style) -->
|
||||
<text x="24" y="74" class="section-lbl">STATUS BAR</text>
|
||||
<line x1="24" y1="80" x2="670" y2="80" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<g transform="translate(350, 110)">
|
||||
<rect x="-195" y="-15" width="390" height="30" fill="#050508"/>
|
||||
<!-- Time -->
|
||||
<text x="-170" y="3" font-size="12" fill="#E2E8F0" font-weight="600">9:41</text>
|
||||
<!-- Dynamic island -->
|
||||
<rect x="-40" y="-8" width="80" height="16" rx="8" fill="#000"/>
|
||||
<!-- Right side indicators -->
|
||||
<!-- Signal -->
|
||||
<g transform="translate(130, -4)">
|
||||
<rect x="0" y="4" width="3" height="4" rx="0.5" fill="#E2E8F0" opacity="0.4"/>
|
||||
<rect x="4" y="2" width="3" height="6" rx="0.5" fill="#E2E8F0" opacity="0.6"/>
|
||||
<rect x="8" y="0" width="3" height="8" rx="0.5" fill="#E2E8F0" opacity="0.8"/>
|
||||
<rect x="12" y="-2" width="3" height="10" rx="0.5" fill="#E2E8F0"/>
|
||||
</g>
|
||||
<!-- WiFi -->
|
||||
<g transform="translate(152, 0)">
|
||||
<path d="M 0,-4 C 3,-4 5,-2 6,0" fill="none" stroke="#E2E8F0" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<path d="M -2,-1 C 2,-1 4,0 5,2" fill="none" stroke="#E2E8F0" stroke-width="1" stroke-linecap="round" opacity="0.8"/>
|
||||
<circle cx="2" cy="3" r="1" fill="#E2E8F0"/>
|
||||
</g>
|
||||
<!-- Battery -->
|
||||
<g transform="translate(166, -4)">
|
||||
<rect x="0" y="0" width="22" height="9" rx="2" fill="none" stroke="#E2E8F0" stroke-width="1" opacity="0.5"/>
|
||||
<rect x="22" y="2" width="2" height="5" rx="1" fill="#E2E8F0" opacity="0.3"/>
|
||||
<rect x="1.5" y="1.5" width="16" height="6" rx="1" fill="#10B981" opacity="0.9"/>
|
||||
</g>
|
||||
<text x="0" y="30" class="lbl">iOS Status Bar — 390px wide, #050508 background</text>
|
||||
</g>
|
||||
|
||||
<!-- 2. NAV HEADER -->
|
||||
<text x="24" y="164" class="section-lbl">NAVIGATION HEADER</text>
|
||||
<line x1="24" y1="170" x2="670" y2="170" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<g transform="translate(350, 208)">
|
||||
<rect x="-195" y="-22" width="390" height="44" fill="#0A0E1A"/>
|
||||
<line x1="-195" y1="22" x2="195" y2="22" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<!-- Back chevron -->
|
||||
<path d="M -175,-2 L -170,-7 M -175,-2 L -170,3" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<!-- Title -->
|
||||
<text x="0" y="4" font-size="14" fill="#E2E8F0" font-weight="700" text-anchor="middle" font-family="'Space Grotesk', sans-serif">Mirror</text>
|
||||
<!-- Right action (settings gear outline) -->
|
||||
<circle cx="172" cy="0" r="7" fill="none" stroke="#94A3B8" stroke-width="1"/>
|
||||
<circle cx="172" cy="0" r="2" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
|
||||
<text x="0" y="44" class="lbl">Nav Header — back chevron, centered title, right action</text>
|
||||
</g>
|
||||
|
||||
<!-- 3. TAB BAR FRAME -->
|
||||
<text x="24" y="280" class="section-lbl">TAB BAR FRAME</text>
|
||||
<line x1="24" y1="286" x2="670" y2="286" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<g transform="translate(350, 330)">
|
||||
<rect x="-195" y="-28" width="390" height="56" fill="#0A0E1A"/>
|
||||
<!-- Top border with subtle prismatic -->
|
||||
<line x1="-195" y1="-28" x2="195" y2="-28" stroke="url(#prismaticH)" stroke-width="0.5" opacity="0.3"/>
|
||||
<!-- 5 tab slots -->
|
||||
<g font-size="8" fill="#475569" text-anchor="middle" font-weight="500">
|
||||
<!-- Turn (active) -->
|
||||
<g transform="translate(-156, 0)">
|
||||
<g filter="url(#glowSm)">
|
||||
<path d="M 0,-10 L 8,0 L 0,10 L -8,0 Z" fill="url(#grAmethyst)" opacity="0.8"/>
|
||||
<path d="M 0,-10 L 8,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
</g>
|
||||
<text x="0" y="20" fill="#A78BFA" font-weight="600">Turn</text>
|
||||
</g>
|
||||
<!-- Mirror (inactive) -->
|
||||
<g transform="translate(-78, 0)">
|
||||
<path d="M 0,-6 L 4,-3 L 6,3 L 0,7 L -6,3 L -4,-3 Z" fill="none" stroke="#475569" stroke-width="0.8"/>
|
||||
<text x="0" y="20">Mirror</text>
|
||||
</g>
|
||||
<!-- Lens (inactive) -->
|
||||
<g transform="translate(0, 0)">
|
||||
<circle r="7" fill="none" stroke="#475569" stroke-width="0.8"/>
|
||||
<circle r="3" fill="none" stroke="#475569" stroke-width="0.5"/>
|
||||
<text x="0" y="20">Lens</text>
|
||||
</g>
|
||||
<!-- Gallery (inactive) -->
|
||||
<g transform="translate(78, 0)">
|
||||
<rect x="-6" y="-6" width="5" height="5" rx="1" fill="none" stroke="#475569" stroke-width="0.7"/>
|
||||
<rect x="1" y="-6" width="5" height="5" rx="1" fill="none" stroke="#475569" stroke-width="0.7"/>
|
||||
<rect x="-6" y="1" width="5" height="5" rx="1" fill="none" stroke="#475569" stroke-width="0.7"/>
|
||||
<rect x="1" y="1" width="5" height="5" rx="1" fill="none" stroke="#475569" stroke-width="0.7"/>
|
||||
<text x="0" y="20">Gallery</text>
|
||||
</g>
|
||||
<!-- You (inactive) -->
|
||||
<g transform="translate(156, 0)">
|
||||
<circle r="6" fill="none" stroke="#475569" stroke-width="0.8"/>
|
||||
<circle r="2.5" fill="none" stroke="#475569" stroke-width="0.6" cy="-1"/>
|
||||
<text x="0" y="20">You</text>
|
||||
</g>
|
||||
</g>
|
||||
<!-- Home indicator -->
|
||||
<rect x="-50" y="30" width="100" height="4" rx="2" fill="#475569" opacity="0.3"/>
|
||||
<text x="0" y="52" class="lbl">Tab Bar — 5 tabs, prismatic top border, home indicator</text>
|
||||
</g>
|
||||
|
||||
<!-- 4. MODAL SCRIM -->
|
||||
<text x="24" y="410" class="section-lbl">MODAL SCRIM AND TOAST</text>
|
||||
<line x1="24" y1="416" x2="670" y2="416" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<g transform="translate(200, 500)">
|
||||
<!-- Scrim background -->
|
||||
<rect x="-100" y="-50" width="200" height="100" rx="4" fill="#050508" opacity="0.7"/>
|
||||
<rect x="-100" y="-50" width="200" height="100" rx="4" fill="none" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<!-- Modal card on top -->
|
||||
<rect x="-70" y="-30" width="140" height="60" rx="12" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.8"/>
|
||||
<!-- Grab handle -->
|
||||
<rect x="-16" y="-26" width="32" height="3" rx="1.5" fill="#475569" opacity="0.4"/>
|
||||
<text x="0" y="0" font-size="10" fill="#E2E8F0" text-anchor="middle" font-weight="600">Modal Content</text>
|
||||
<text x="0" y="14" font-size="8" fill="#64748B" text-anchor="middle">60% backdrop blur scrim</text>
|
||||
<text x="0" y="68" class="lbl">Modal Scrim — #050508 at 70% + backdrop blur</text>
|
||||
</g>
|
||||
|
||||
<!-- Toast -->
|
||||
<g transform="translate(530, 480)">
|
||||
<g filter="url(#glowSm)">
|
||||
<rect x="-90" y="-16" width="180" height="32" rx="16" fill="#121628" stroke="#10B981" stroke-width="0.6"/>
|
||||
<!-- Emerald fragment -->
|
||||
<g transform="translate(-68, 0)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#grEmerald)" opacity="0.8"/>
|
||||
<path d="M 0,-5 L 5,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
</g>
|
||||
<text x="4" y="4" font-size="10" fill="#E2E8F0" text-anchor="middle" font-weight="500">Turn saved</text>
|
||||
</g>
|
||||
<text x="0" y="34" class="lbl">Success Toast — pill shape, emerald accent</text>
|
||||
</g>
|
||||
|
||||
<!-- Error Toast -->
|
||||
<g transform="translate(530, 540)">
|
||||
<g filter="url(#glowSm)">
|
||||
<rect x="-90" y="-16" width="180" height="32" rx="16" fill="#121628" stroke="#EF4444" stroke-width="0.6"/>
|
||||
<g transform="translate(-68, 0)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="#EF4444" opacity="0.8"/>
|
||||
</g>
|
||||
<text x="4" y="4" font-size="10" fill="#E2E8F0" text-anchor="middle" font-weight="500">Connection lost</text>
|
||||
</g>
|
||||
<text x="0" y="34" class="lbl">Error Toast — pill shape, ruby accent</text>
|
||||
</g>
|
||||
|
||||
<!-- 5. INPUT ACCESSORY / KEYBOARD TOP -->
|
||||
<text x="24" y="600" class="section-lbl">INPUT ACCESSORY</text>
|
||||
<line x1="24" y1="606" x2="670" y2="606" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<g transform="translate(350, 648)">
|
||||
<rect x="-195" y="-20" width="390" height="40" fill="#0A0E1A"/>
|
||||
<line x1="-195" y1="-20" x2="195" y2="-20" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<!-- Text input area -->
|
||||
<rect x="-180" y="-12" width="310" height="24" rx="12" fill="#121628" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<text x="-168" y="3" font-size="10" fill="#475569">Type your thought...</text>
|
||||
<!-- Send button -->
|
||||
<g transform="translate(165, 0)" filter="url(#glowSm)">
|
||||
<circle r="12" fill="url(#grAmethyst)" opacity="0.8"/>
|
||||
<path d="M -3,-3 L 4,0 L -3,3" fill="none" stroke="#fff" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<text x="0" y="36" class="lbl">Input Accessory Bar — text field + send button, above keyboard</text>
|
||||
</g>
|
||||
|
||||
<text x="350" y="692" font-size="8" fill="#334155" text-anchor="middle">Device chrome at 390x844px (iPhone 14) — all elements use Kalei dark theme with jewel tone accents</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
250
initial mockups/assets/evidence-wall.svg
Normal file
250
initial mockups/assets/evidence-wall.svg
Normal file
@@ -0,0 +1,250 @@
|
||||
<svg viewBox="0 0 700 680" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/><stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grRose" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBCFE8"/><stop offset="100%" stop-color="#DB2777"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grIndigo" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#A5B4FC"/><stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
|
||||
<filter id="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="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="glowLg" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<style>
|
||||
text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
|
||||
.lbl { font-size: 9px; fill: #94A3B8; text-anchor: middle; font-weight: 500; }
|
||||
.section-lbl { font-size: 11px; fill: #64748B; font-weight: 600; letter-spacing: 0.08em; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect width="700" height="680" fill="#050508"/>
|
||||
<text x="350" y="28" font-size="13" font-weight="700" fill="#94A3B8" text-anchor="middle" letter-spacing="0.12em">EVIDENCE WALL MOSAIC</text>
|
||||
<text x="350" y="44" font-size="9" fill="#475569" text-anchor="middle">5 tile shapes, 3 mosaic stages (early/mid/full), connection lines, empty state</text>
|
||||
|
||||
<!-- TILE SHAPES -->
|
||||
<text x="24" y="74" class="section-lbl">TILE SHAPES</text>
|
||||
<line x1="24" y1="80" x2="670" y2="80" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Tile 1: Diamond -->
|
||||
<g transform="translate(80, 130)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-24 L 24,0 L 0,24 L -24,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.8"/>
|
||||
<path d="M 0,-24 L 24,0 L 0,0 Z" fill="#8B5CF6" opacity="0.06"/>
|
||||
<!-- Inner fragment -->
|
||||
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#grAmethyst)" opacity="0.5" filter="url(#glowSm)"/>
|
||||
<path d="M 0,-8 L 8,0 L 0,0 Z" fill="#fff" opacity="0.1"/>
|
||||
</g>
|
||||
<text x="0" y="44" class="lbl">Diamond</text>
|
||||
</g>
|
||||
|
||||
<!-- Tile 2: Tall Hex -->
|
||||
<g transform="translate(200, 130)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-28 L 20,-14 L 20,14 L 0,28 L -20,14 L -20,-14 Z" fill="#121628" stroke="#3B82F6" stroke-width="0.8"/>
|
||||
<path d="M 0,-28 L 20,-14 L 0,0 L -20,-14 Z" fill="#3B82F6" opacity="0.05"/>
|
||||
<path d="M 0,-10 L 10,0 L 0,10 L -10,0 Z" fill="url(#grSapphire)" opacity="0.4" filter="url(#glowSm)"/>
|
||||
</g>
|
||||
<text x="0" y="48" class="lbl">Tall Hex</text>
|
||||
</g>
|
||||
|
||||
<!-- Tile 3: Wide Rectangle -->
|
||||
<g transform="translate(340, 130)">
|
||||
<g filter="url(#glowMd)">
|
||||
<rect x="-30" y="-18" width="60" height="36" rx="4" fill="#121628" stroke="#10B981" stroke-width="0.8"/>
|
||||
<rect x="-30" y="-18" width="60" height="18" rx="4" fill="#10B981" opacity="0.04"/>
|
||||
<path d="M -8,-6 L 0,-12 L 8,-6 L 0,6 Z" fill="url(#grEmerald)" opacity="0.45" filter="url(#glowSm)"/>
|
||||
</g>
|
||||
<text x="0" y="38" class="lbl">Wide Rect</text>
|
||||
</g>
|
||||
|
||||
<!-- Tile 4: Pentagon -->
|
||||
<g transform="translate(470, 130)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-24 L 23,-7 L 14,20 L -14,20 L -23,-7 Z" fill="#121628" stroke="#F59E0B" stroke-width="0.8"/>
|
||||
<path d="M 0,-24 L 23,-7 L 0,0 L -23,-7 Z" fill="#F59E0B" opacity="0.05"/>
|
||||
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#grAmber)" opacity="0.45" filter="url(#glowSm)"/>
|
||||
</g>
|
||||
<text x="0" y="42" class="lbl">Pentagon</text>
|
||||
</g>
|
||||
|
||||
<!-- Tile 5: Triangle -->
|
||||
<g transform="translate(600, 130)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-26 L 24,18 L -24,18 Z" fill="#121628" stroke="#EC4899" stroke-width="0.8"/>
|
||||
<path d="M 0,-26 L 24,18 L 0,0 Z" fill="#EC4899" opacity="0.05"/>
|
||||
<path d="M 0,-6 L 6,4 L -6,4 Z" fill="url(#grRose)" opacity="0.45" filter="url(#glowSm)"/>
|
||||
</g>
|
||||
<text x="0" y="42" class="lbl">Triangle</text>
|
||||
</g>
|
||||
|
||||
<!-- MOSAIC STAGES -->
|
||||
<text x="24" y="210" class="section-lbl">MOSAIC STAGES</text>
|
||||
<line x1="24" y1="216" x2="670" y2="216" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Early Stage (3 tiles) -->
|
||||
<g transform="translate(120, 320)">
|
||||
<g filter="url(#glowSm)">
|
||||
<!-- Tile A -->
|
||||
<path d="M 0,-20 L 18,0 L 0,20 L -18,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.6"/>
|
||||
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#grAmethyst)" opacity="0.4"/>
|
||||
<!-- Tile B -->
|
||||
<g transform="translate(30, 25)">
|
||||
<rect x="-16" y="-10" width="32" height="20" rx="3" fill="#121628" stroke="#10B981" stroke-width="0.6"/>
|
||||
<path d="M 0,-4 L 4,0 L 0,4 L -4,0 Z" fill="url(#grEmerald)" opacity="0.35"/>
|
||||
</g>
|
||||
<!-- Tile C -->
|
||||
<g transform="translate(-25, 30)">
|
||||
<path d="M 0,-14 L 14,8 L -14,8 Z" fill="#121628" stroke="#F59E0B" stroke-width="0.6"/>
|
||||
<path d="M 0,-4 L 4,2 L -4,2 Z" fill="url(#grAmber)" opacity="0.35"/>
|
||||
</g>
|
||||
<!-- Connection lines -->
|
||||
<line x1="10" y1="10" x2="22" y2="18" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2 3"/>
|
||||
<line x1="-10" y1="10" x2="-18" y2="22" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2 3"/>
|
||||
</g>
|
||||
<text x="0" y="66" class="lbl">Early (3 tiles)</text>
|
||||
</g>
|
||||
|
||||
<!-- Mid Stage (8 tiles) -->
|
||||
<g transform="translate(350, 310)">
|
||||
<g filter="url(#glowSm)">
|
||||
<!-- Row 1 -->
|
||||
<path d="M 0,-30 L 14,-16 L 0,-2 L -14,-16 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.5"/>
|
||||
<path d="M 0,-20 L 4,-16 L 0,-12 L -4,-16 Z" fill="url(#grAmethyst)" opacity="0.4"/>
|
||||
|
||||
<g transform="translate(28, -22)">
|
||||
<rect x="-12" y="-8" width="24" height="16" rx="2" fill="#121628" stroke="#3B82F6" stroke-width="0.5"/>
|
||||
<path d="M 0,-3 L 3,0 L 0,3 L -3,0 Z" fill="url(#grSapphire)" opacity="0.35"/>
|
||||
</g>
|
||||
<g transform="translate(-28, -20)">
|
||||
<path d="M 0,-12 L 10,6 L -10,6 Z" fill="#121628" stroke="#EC4899" stroke-width="0.5"/>
|
||||
<path d="M 0,-4 L 3,2 L -3,2 Z" fill="url(#grRose)" opacity="0.35"/>
|
||||
</g>
|
||||
<!-- Row 2 -->
|
||||
<g transform="translate(20, 8)">
|
||||
<path d="M 0,-14 L 12,0 L 0,14 L -12,0 Z" fill="#121628" stroke="#10B981" stroke-width="0.5"/>
|
||||
<path d="M 0,-4 L 4,0 L 0,4 L -4,0 Z" fill="url(#grEmerald)" opacity="0.35"/>
|
||||
</g>
|
||||
<g transform="translate(-20, 10)">
|
||||
<path d="M 0,-12 L 10,-4 L 10,8 L -10,8 L -10,-4 Z" fill="#121628" stroke="#F59E0B" stroke-width="0.5"/>
|
||||
<path d="M 0,-3 L 3,0 L 0,3 L -3,0 Z" fill="url(#grAmber)" opacity="0.35"/>
|
||||
</g>
|
||||
<!-- Row 3 -->
|
||||
<g transform="translate(0, 30)">
|
||||
<rect x="-14" y="-8" width="28" height="16" rx="2" fill="#121628" stroke="#6366F1" stroke-width="0.5"/>
|
||||
<path d="M 0,-3 L 3,0 L 0,3 L -3,0 Z" fill="url(#grIndigo)" opacity="0.35"/>
|
||||
</g>
|
||||
<g transform="translate(30, 28)">
|
||||
<path d="M 0,-10 L 8,4 L -8,4 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.5"/>
|
||||
</g>
|
||||
<g transform="translate(-32, 28)">
|
||||
<path d="M 0,-10 L 10,0 L 0,10 L -10,0 Z" fill="#121628" stroke="#3B82F6" stroke-width="0.5"/>
|
||||
</g>
|
||||
<!-- Connection lines between tiles -->
|
||||
<line x1="8" y1="-8" x2="18" y2="-16" stroke="#1C2240" stroke-width="0.4" stroke-dasharray="2 2"/>
|
||||
<line x1="-8" y1="-10" x2="-20" y2="-14" stroke="#1C2240" stroke-width="0.4" stroke-dasharray="2 2"/>
|
||||
<line x1="10" y1="6" x2="14" y2="4" stroke="#1C2240" stroke-width="0.4" stroke-dasharray="2 2"/>
|
||||
<line x1="-10" y1="8" x2="-14" y2="8" stroke="#1C2240" stroke-width="0.4" stroke-dasharray="2 2"/>
|
||||
</g>
|
||||
<text x="0" y="66" class="lbl">Mid (8 tiles, connections forming)</text>
|
||||
</g>
|
||||
|
||||
<!-- Full Stage (dense mosaic) -->
|
||||
<g transform="translate(580, 305)">
|
||||
<g filter="url(#glowMd)">
|
||||
<!-- Dense mosaic of tiles -->
|
||||
<path d="M 0,-38 L 12,-26 L 0,-14 L -12,-26 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.5"/>
|
||||
<path d="M 0,-30 L 4,-26 L 0,-22 L -4,-26 Z" fill="url(#grAmethyst)" opacity="0.5"/>
|
||||
|
||||
<g transform="translate(20, -30)">
|
||||
<rect x="-8" y="-6" width="16" height="12" rx="2" fill="#121628" stroke="#3B82F6" stroke-width="0.4"/>
|
||||
<path d="M 0,-2 L 2,0 L 0,2 L -2,0 Z" fill="url(#grSapphire)" opacity="0.4"/>
|
||||
</g>
|
||||
<g transform="translate(-20, -28)">
|
||||
<path d="M 0,-8 L 8,4 L -8,4 Z" fill="#121628" stroke="#EC4899" stroke-width="0.4"/>
|
||||
<path d="M 0,-3 L 2,1 L -2,1 Z" fill="url(#grRose)" opacity="0.35"/>
|
||||
</g>
|
||||
<g transform="translate(16, -12)">
|
||||
<path d="M 0,-10 L 8,0 L 0,10 L -8,0 Z" fill="#121628" stroke="#10B981" stroke-width="0.4"/>
|
||||
<path d="M 0,-3 L 3,0 L 0,3 L -3,0 Z" fill="url(#grEmerald)" opacity="0.4"/>
|
||||
</g>
|
||||
<g transform="translate(-18, -10)">
|
||||
<path d="M 0,-8 L 7,-3 L 7,5 L -7,5 L -7,-3 Z" fill="#121628" stroke="#F59E0B" stroke-width="0.4"/>
|
||||
<path d="M 0,-2 L 2,0 L 0,2 L -2,0 Z" fill="url(#grAmber)" opacity="0.4"/>
|
||||
</g>
|
||||
<g transform="translate(0, 6)">
|
||||
<rect x="-10" y="-6" width="20" height="12" rx="2" fill="#121628" stroke="#6366F1" stroke-width="0.4"/>
|
||||
<path d="M 0,-2 L 2,0 L 0,2 L -2,0 Z" fill="url(#grIndigo)" opacity="0.4"/>
|
||||
</g>
|
||||
<g transform="translate(-22, 8)">
|
||||
<path d="M 0,-8 L 6,0 L 0,8 L -6,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.4"/>
|
||||
</g>
|
||||
<g transform="translate(22, 8)">
|
||||
<path d="M 0,-6 L 6,4 L -6,4 Z" fill="#121628" stroke="#3B82F6" stroke-width="0.4"/>
|
||||
</g>
|
||||
<g transform="translate(10, 22)">
|
||||
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="#121628" stroke="#10B981" stroke-width="0.4"/>
|
||||
<path d="M 0,-3 L 3,0 L 0,3 L -3,0 Z" fill="url(#grEmerald)" opacity="0.35"/>
|
||||
</g>
|
||||
<g transform="translate(-12, 22)">
|
||||
<rect x="-8" y="-6" width="16" height="12" rx="2" fill="#121628" stroke="#EC4899" stroke-width="0.4"/>
|
||||
</g>
|
||||
<g transform="translate(0, 36)">
|
||||
<path d="M 0,-8 L 10,4 L -10,4 Z" fill="#121628" stroke="#F59E0B" stroke-width="0.4"/>
|
||||
</g>
|
||||
<!-- Glowing connection web -->
|
||||
<g stroke="#1C2240" stroke-width="0.3" opacity="0.5">
|
||||
<line x1="0" y1="-20" x2="14" y2="-14"/>
|
||||
<line x1="0" y1="-20" x2="-14" y2="-14"/>
|
||||
<line x1="12" y1="-6" x2="6" y2="4"/>
|
||||
<line x1="-12" y1="-4" x2="-6" y2="6"/>
|
||||
<line x1="6" y1="10" x2="8" y2="18"/>
|
||||
<line x1="-6" y1="10" x2="-8" y2="18"/>
|
||||
</g>
|
||||
</g>
|
||||
<text x="0" y="66" class="lbl">Full (dense mosaic with connections)</text>
|
||||
</g>
|
||||
|
||||
<!-- EMPTY STATE -->
|
||||
<text x="24" y="420" class="section-lbl">EMPTY STATE</text>
|
||||
<line x1="24" y1="426" x2="670" y2="426" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<g transform="translate(350, 540)">
|
||||
<!-- Ghost tiles -->
|
||||
<g opacity="0.15">
|
||||
<path d="M 0,-30 L 16,-16 L 0,-2 L -16,-16 Z" fill="none" stroke="#475569" stroke-width="0.8" stroke-dasharray="3 3"/>
|
||||
<path d="M 24,-20 L 36,-8 L 24,4 L 12,-8 Z" fill="none" stroke="#475569" stroke-width="0.8" stroke-dasharray="3 3"/>
|
||||
<path d="M -24,-18 L -12,-6 L -24,6 L -36,-6 Z" fill="none" stroke="#475569" stroke-width="0.8" stroke-dasharray="3 3"/>
|
||||
<rect x="-14" y="6" width="28" height="18" rx="3" fill="none" stroke="#475569" stroke-width="0.8" stroke-dasharray="3 3"/>
|
||||
</g>
|
||||
<!-- Central message area -->
|
||||
<g filter="url(#glowSm)">
|
||||
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#grAmethyst)" opacity="0.2">
|
||||
<animate attributeName="opacity" values="0.1;0.3;0.1" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
<text x="0" y="52" font-size="10" fill="#64748B" text-anchor="middle" font-weight="500">Start collecting evidence</text>
|
||||
<text x="0" y="66" font-size="8" fill="#475569" text-anchor="middle">Each Turn adds a tile to your wall</text>
|
||||
<text x="0" y="100" class="lbl">Empty state — dashed ghost tiles with CTA</text>
|
||||
</g>
|
||||
|
||||
<text x="350" y="672" font-size="8" fill="#334155" text-anchor="middle">Evidence Wall tiles use mixed shapes, jewel tones per feature, dashed connection lines, and glow on new additions</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 13 KiB |
322
initial mockups/assets/fragment-icons.svg
Normal file
322
initial mockups/assets/fragment-icons.svg
Normal file
@@ -0,0 +1,322 @@
|
||||
<svg viewBox="0 0 700 520" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Prismatic gradients for each jewel tone -->
|
||||
<linearGradient id="grAmethyst" 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="grSapphire" 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="grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#A7F3D0;#6EE7B7" dur="5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"><animate attributeName="stop-color" values="#FDE68A;#FEF3C7;#FDE68A" dur="4.2s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grRose" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBCFE8"><animate attributeName="stop-color" values="#FBCFE8;#FCE7F3;#FBCFE8" dur="4.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#DB2777"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grRuby" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FCA5A5"/><stop offset="100%" stop-color="#DC2626"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grIndigo" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#A5B4FC"><animate attributeName="stop-color" values="#A5B4FC;#C7D2FE;#A5B4FC" dur="5.2s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grSoftLight" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#F1F5F9"/><stop offset="100%" stop-color="#94A3B8"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grPrismatic" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#3B82F6"><animate attributeName="stop-color" values="#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6;#3B82F6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
|
||||
<filter id="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="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="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="glowXl" x="-100%" y="-100%" width="300%" height="300%">
|
||||
<feGaussianBlur stdDeviation="10" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="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>
|
||||
|
||||
<style>
|
||||
text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
|
||||
.lbl { font-size: 9px; fill: #94A3B8; text-anchor: middle; font-weight: 500; }
|
||||
.section-lbl { font-size: 11px; fill: #64748B; font-weight: 600; letter-spacing: 0.08em; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect width="700" height="520" fill="#050508"/>
|
||||
<text x="350" y="28" font-size="13" font-weight="700" fill="#94A3B8" text-anchor="middle" letter-spacing="0.12em">FRAGMENT ICONS AND HIGHLIGHT EFFECTS</text>
|
||||
<text x="350" y="44" font-size="9" fill="#475569" text-anchor="middle">The core diamond fragment in 5 sizes, 8 color states, highlight underline, highlight bubble</text>
|
||||
|
||||
<!-- SECTION 1: Five Sizes -->
|
||||
<text x="24" y="74" class="section-lbl">FIVE SIZES</text>
|
||||
<line x1="24" y1="80" x2="670" y2="80" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- XS: 12x12 -->
|
||||
<g transform="translate(80, 120)">
|
||||
<g filter="url(#glowSm)">
|
||||
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#grAmethyst)" opacity="0.9"/>
|
||||
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<path d="M 0,-6 L -6,0 L 0,0 Z" fill="#fff" opacity="0.08"/>
|
||||
<line x1="0" y1="-6" x2="0" y2="6" stroke="#fff" stroke-width="0.3" opacity="0.2"/>
|
||||
</g>
|
||||
<text x="0" y="24" class="lbl">XS (12px)</text>
|
||||
</g>
|
||||
|
||||
<!-- SM: 16x16 -->
|
||||
<g transform="translate(180, 120)">
|
||||
<g filter="url(#glowSm)">
|
||||
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#grAmethyst)" opacity="0.9"/>
|
||||
<path d="M 0,-8 L 8,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<path d="M 0,-8 L -8,0 L 0,0 Z" fill="#fff" opacity="0.08"/>
|
||||
<line x1="0" y1="-8" x2="0" y2="8" stroke="#fff" stroke-width="0.4" opacity="0.2"/>
|
||||
<line x1="-8" y1="0" x2="8" y2="0" stroke="#fff" stroke-width="0.3" opacity="0.1"/>
|
||||
</g>
|
||||
<text x="0" y="24" class="lbl">SM (16px)</text>
|
||||
</g>
|
||||
|
||||
<!-- MD: 24x24 -->
|
||||
<g transform="translate(300, 120)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#grAmethyst)" opacity="0.9">
|
||||
<animate attributeName="fill-opacity" values="0.85;1;0.85" dur="3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||||
<path d="M 0,-12 L -12,0 L 0,0 Z" fill="#fff" opacity="0.1"/>
|
||||
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||||
<line x1="-12" y1="0" x2="12" y2="0" stroke="#fff" stroke-width="0.3" opacity="0.12"/>
|
||||
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="0" y="28" class="lbl">MD (24px)</text>
|
||||
</g>
|
||||
|
||||
<!-- LG: 36x36 -->
|
||||
<g transform="translate(440, 120)">
|
||||
<g filter="url(#glowLg)">
|
||||
<path d="M 0,-18 L 18,0 L 0,18 L -18,0 Z" fill="url(#grAmethyst)" opacity="0.85">
|
||||
<animate attributeName="fill-opacity" values="0.80;0.95;0.80" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-18 L 18,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<path d="M 0,-18 L -18,0 L 0,0 Z" fill="#fff" opacity="0.08"/>
|
||||
<line x1="0" y1="-18" x2="0" y2="18" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||||
<line x1="-18" y1="0" x2="18" y2="0" stroke="#fff" stroke-width="0.4" opacity="0.12"/>
|
||||
<line x1="-9" y1="-9" x2="9" y2="9" stroke="#fff" stroke-width="0.3" opacity="0.08"/>
|
||||
<circle cx="-5" cy="-5" r="2" fill="#fff" opacity="0.25"/>
|
||||
<circle cx="3" cy="-2" r="1" fill="#fff" opacity="0.4"/>
|
||||
</g>
|
||||
<text x="0" y="36" class="lbl">LG (36px)</text>
|
||||
</g>
|
||||
|
||||
<!-- XL: 48x48 -->
|
||||
<g transform="translate(600, 120)">
|
||||
<g filter="url(#glowXl)">
|
||||
<path d="M 0,-24 L 24,0 L 0,24 L -24,0 Z" fill="url(#grAmethyst)" opacity="0.85">
|
||||
<animate attributeName="fill-opacity" values="0.75;0.95;0.75" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-24 L 24,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<path d="M 0,-24 L -24,0 L 0,0 Z" fill="#fff" opacity="0.08"/>
|
||||
<path d="M 0,24 L 24,0 L 0,0 Z" fill="#000" opacity="0.08"/>
|
||||
<line x1="0" y1="-24" x2="0" y2="24" stroke="#fff" stroke-width="0.6" opacity="0.2"/>
|
||||
<line x1="-24" y1="0" x2="24" y2="0" stroke="#fff" stroke-width="0.5" opacity="0.15"/>
|
||||
<line x1="-12" y1="-12" x2="12" y2="12" stroke="#fff" stroke-width="0.3" opacity="0.08"/>
|
||||
<line x1="12" y1="-12" x2="-12" y2="12" stroke="#fff" stroke-width="0.3" opacity="0.08"/>
|
||||
<circle cx="-7" cy="-7" r="3" fill="#fff" opacity="0.2"/>
|
||||
<circle cx="4" cy="-3" r="1.5" fill="#fff" opacity="0.4"/>
|
||||
<line x1="0" y1="-24" x2="24" y2="0" stroke="#C4B5FD" stroke-width="0.8" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.4;0" dur="3s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="-24" x2="-24" y2="0" stroke="#E9D5FF" stroke-width="0.8" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.3;0" dur="3s" begin="1.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
<text x="0" y="44" class="lbl">XL (48px)</text>
|
||||
</g>
|
||||
|
||||
<!-- SECTION 2: Eight Color States -->
|
||||
<text x="24" y="204" class="section-lbl">EIGHT COLOR STATES</text>
|
||||
<line x1="24" y1="210" x2="670" y2="210" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Amethyst -->
|
||||
<g transform="translate(56, 252)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#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>
|
||||
<text x="0" y="28" class="lbl">Amethyst</text>
|
||||
</g>
|
||||
|
||||
<!-- Sapphire -->
|
||||
<g transform="translate(138, 252)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#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>
|
||||
<text x="0" y="28" class="lbl">Sapphire</text>
|
||||
</g>
|
||||
|
||||
<!-- Emerald -->
|
||||
<g transform="translate(220, 252)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#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>
|
||||
<text x="0" y="28" class="lbl">Emerald</text>
|
||||
</g>
|
||||
|
||||
<!-- Amber -->
|
||||
<g transform="translate(302, 252)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#grAmber)" 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>
|
||||
<text x="0" y="28" class="lbl">Amber</text>
|
||||
</g>
|
||||
|
||||
<!-- Rose -->
|
||||
<g transform="translate(384, 252)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#grRose)" 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>
|
||||
<text x="0" y="28" class="lbl">Rose</text>
|
||||
</g>
|
||||
|
||||
<!-- Ruby -->
|
||||
<g transform="translate(466, 252)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#grRuby)" 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>
|
||||
<text x="0" y="28" class="lbl">Ruby</text>
|
||||
</g>
|
||||
|
||||
<!-- Indigo -->
|
||||
<g transform="translate(548, 252)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#grIndigo)" 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>
|
||||
<text x="0" y="28" class="lbl">Indigo</text>
|
||||
</g>
|
||||
|
||||
<!-- Soft Light -->
|
||||
<g transform="translate(630, 252)">
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#grSoftLight)" 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>
|
||||
<text x="0" y="28" class="lbl">Soft Light</text>
|
||||
</g>
|
||||
|
||||
<!-- SECTION 3: Special States and Highlights -->
|
||||
<text x="24" y="330" class="section-lbl">SPECIAL STATES AND HIGHLIGHTS</text>
|
||||
<line x1="24" y1="336" x2="670" y2="336" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Active/Detected glow -->
|
||||
<g transform="translate(80, 390)">
|
||||
<g filter="url(#glowLg)">
|
||||
<path d="M 0,-14 L 14,0 L 0,14 L -14,0 Z" fill="url(#grAmethyst)" opacity="0.95">
|
||||
<animate attributeName="fill-opacity" values="0.85;1;0.85" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-14 L 14,0 L 0,0 Z" fill="#fff" opacity="0.2"/>
|
||||
<line x1="0" y1="-14" x2="0" y2="14" stroke="#fff" stroke-width="0.5" opacity="0.25"/>
|
||||
<circle cx="-4" cy="-4" r="2" fill="#fff" opacity="0.35"/>
|
||||
<path d="M 0,-18 L 18,0 L 0,18 L -18,0 Z" fill="none" stroke="#A78BFA" stroke-width="1" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.5;0" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="stroke-width" values="1;0.3;1" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-22 L 22,0 L 0,22 L -22,0 Z" fill="none" stroke="#A78BFA" stroke-width="0.5" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.3;0" dur="2s" begin="0.3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
<text x="0" y="44" class="lbl">Active / Detected</text>
|
||||
</g>
|
||||
|
||||
<!-- Prismatic cycling -->
|
||||
<g transform="translate(220, 390)">
|
||||
<g filter="url(#glowLg)">
|
||||
<path d="M 0,-14 L 14,0 L 0,14 L -14,0 Z" fill="url(#grPrismatic)" opacity="0.9">
|
||||
<animate attributeName="fill-opacity" values="0.8;1;0.8" dur="3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-14 L 14,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<line x1="0" y1="-14" x2="0" y2="14" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||||
<circle cx="-4" cy="-4" r="2" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="0" y="44" class="lbl">Prismatic Cycle</text>
|
||||
</g>
|
||||
|
||||
<!-- Dimmed / Inactive -->
|
||||
<g transform="translate(360, 390)">
|
||||
<path d="M 0,-14 L 14,0 L 0,14 L -14,0 Z" fill="none" stroke="#475569" stroke-width="0.8" opacity="0.5"/>
|
||||
<line x1="0" y1="-14" x2="0" y2="14" stroke="#475569" stroke-width="0.3" opacity="0.3"/>
|
||||
<text x="0" y="44" class="lbl">Dimmed / Inactive</text>
|
||||
</g>
|
||||
|
||||
<!-- Highlight Underline -->
|
||||
<g transform="translate(500, 380)">
|
||||
<text x="0" y="0" font-size="11" fill="#E2E8F0" text-anchor="middle" font-weight="500">highlighted text</text>
|
||||
<g filter="url(#shimmer)">
|
||||
<rect x="-48" y="4" width="96" height="3" rx="1.5" fill="url(#grAmethyst)" opacity="0.6">
|
||||
<animate attributeName="opacity" values="0.4;0.7;0.4" dur="3s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="-48" y="4" width="20" height="3" rx="1.5" fill="#fff" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.3;0" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="x" values="-48;48" dur="2s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g>
|
||||
<g transform="translate(-52, 5)">
|
||||
<path d="M 0,-3 L 3,0 L 0,3 L -3,0 Z" fill="url(#grAmethyst)" opacity="0.8" filter="url(#glowSm)"/>
|
||||
</g>
|
||||
<text x="0" y="30" class="lbl">Highlight Underline</text>
|
||||
</g>
|
||||
|
||||
<!-- Highlight Bubble -->
|
||||
<g transform="translate(350, 470)">
|
||||
<g filter="url(#glowMd)">
|
||||
<rect x="-80" y="-18" width="160" height="36" rx="18" fill="#121628" stroke="#8B5CF6" stroke-width="0.8" opacity="0.9"/>
|
||||
<rect x="-78" y="-16" width="156" height="32" rx="16" fill="#8B5CF6" opacity="0.06"/>
|
||||
<g transform="translate(-56, 0)">
|
||||
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#grAmethyst)" opacity="0.9" filter="url(#glowSm)"/>
|
||||
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
</g>
|
||||
<text x="4" y="4" font-size="10" fill="#C4B5FD" text-anchor="middle" font-weight="500">Catastrophizing</text>
|
||||
<rect x="-82" y="-20" width="164" height="40" rx="20" fill="none" stroke="#8B5CF6" stroke-width="0.5" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.3;0" dur="3s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g>
|
||||
<text x="0" y="38" class="lbl">Highlight Bubble (distortion detected in text)</text>
|
||||
</g>
|
||||
|
||||
<text x="350" y="510" font-size="8" fill="#334155" text-anchor="middle">Fragment — Core visual element of Kalei — Crystalline faceted diamond with gradient fills, specular highlights, glow filters</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 17 KiB |
380
initial mockups/assets/icons-actions.svg
Normal file
380
initial mockups/assets/icons-actions.svg
Normal file
@@ -0,0 +1,380 @@
|
||||
<svg viewBox="0 0 560 560" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<filter id="gl" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="1.5" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<linearGradient id="gAme" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/><stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="gSoft" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#F1F5F9"/><stop offset="100%" stop-color="#94A3B8"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="gEm" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#047857"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="gSap" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#1D4ED8"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="gAmb" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="gRose" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBCFE8"/><stop offset="100%" stop-color="#BE185D"/>
|
||||
</linearGradient>
|
||||
<style>
|
||||
text { font-family: 'Inter', -apple-system, sans-serif; }
|
||||
.lbl { font-size: 8px; fill: #64748B; text-anchor: middle; font-weight: 500; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect width="560" height="560" fill="#050508"/>
|
||||
<text x="280" y="22" font-size="12" font-weight="600" fill="#94A3B8" text-anchor="middle" letter-spacing="0.1em">ACTION & UI ICONS</text>
|
||||
|
||||
<!-- === ROW 1: NAVIGATION (Soft Light #E2E8F0 strokes) === -->
|
||||
<text x="20" y="50" font-size="9" fill="#475569" font-weight="600" letter-spacing="0.08em">NAVIGATION</text>
|
||||
|
||||
<!-- Back chevron -->
|
||||
<g transform="translate(30, 60)">
|
||||
<path d="M 14,4 L 6,12 L 14,20" fill="none" stroke="#E2E8F0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<text x="12" y="34" class="lbl">Back</text>
|
||||
</g>
|
||||
|
||||
<!-- Close X -->
|
||||
<g transform="translate(90, 60)">
|
||||
<path d="M 6,6 L 18,18 M 18,6 L 6,18" fill="none" stroke="#E2E8F0" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<text x="12" y="34" class="lbl">Close</text>
|
||||
</g>
|
||||
|
||||
<!-- More (3 diamonds) -->
|
||||
<g transform="translate(150, 60)">
|
||||
<path d="M 12,4 L 14,6 L 12,8 L 10,6 Z" fill="#E2E8F0" opacity="0.8"/>
|
||||
<path d="M 12,10 L 14,12 L 12,14 L 10,12 Z" fill="#E2E8F0" opacity="0.8"/>
|
||||
<path d="M 12,16 L 14,18 L 12,20 L 10,18 Z" fill="#E2E8F0" opacity="0.8"/>
|
||||
<text x="12" y="34" class="lbl">More</text>
|
||||
</g>
|
||||
|
||||
<!-- Chevron right -->
|
||||
<g transform="translate(210, 60)">
|
||||
<path d="M 10,4 L 18,12 L 10,20" fill="none" stroke="#94A3B8" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<text x="12" y="34" class="lbl">Next</text>
|
||||
</g>
|
||||
|
||||
<!-- Up (scroll to top / expand) -->
|
||||
<g transform="translate(270, 60)">
|
||||
<path d="M 4,16 L 12,6 L 20,16" fill="none" stroke="#E2E8F0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<text x="12" y="34" class="lbl">Up</text>
|
||||
</g>
|
||||
|
||||
<!-- Down -->
|
||||
<g transform="translate(330, 60)">
|
||||
<path d="M 4,8 L 12,18 L 20,8" fill="none" stroke="#E2E8F0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<text x="12" y="34" class="lbl">Down</text>
|
||||
</g>
|
||||
|
||||
<!-- === ROW 2: PRIMARY ACTIONS (Amethyst) === -->
|
||||
<text x="20" y="120" font-size="9" fill="#475569" font-weight="600" letter-spacing="0.08em">PRIMARY ACTIONS</text>
|
||||
|
||||
<!-- Save / Bookmark (gem shape) -->
|
||||
<g transform="translate(30, 130)" filter="url(#gl)">
|
||||
<path d="M 12,3 L 20,8 L 20,21 L 12,17 L 4,21 L 4,8 Z" fill="url(#gAme)" opacity="0.85"/>
|
||||
<path d="M 12,3 L 20,8 L 4,8 Z" fill="#fff" opacity="0.12"/>
|
||||
<text x="12" y="34" class="lbl">Save</text>
|
||||
</g>
|
||||
|
||||
<!-- Share (angular arrow up-right) -->
|
||||
<g transform="translate(90, 130)" filter="url(#gl)">
|
||||
<path d="M 12,4 L 18,4 L 18,10" fill="none" stroke="#A78BFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M 18,4 L 6,16" fill="none" stroke="#A78BFA" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M 6,8 L 6,20 L 18,20" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.5"/>
|
||||
<text x="12" y="34" class="lbl">Share</text>
|
||||
</g>
|
||||
|
||||
<!-- Copy -->
|
||||
<g transform="translate(150, 130)">
|
||||
<rect x="8" y="6" width="12" height="14" rx="2" fill="none" stroke="#A78BFA" stroke-width="1.2"/>
|
||||
<rect x="4" y="4" width="12" height="14" rx="2" fill="none" stroke="#8B5CF6" stroke-width="1"/>
|
||||
<text x="12" y="34" class="lbl">Copy</text>
|
||||
</g>
|
||||
|
||||
<!-- Delete -->
|
||||
<g transform="translate(210, 130)">
|
||||
<path d="M 6,8 L 18,8" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<path d="M 8,8 L 8,20 L 16,20 L 16,8" fill="none" stroke="#EF4444" stroke-width="1"/>
|
||||
<path d="M 10,6 L 10,8 M 14,6 L 14,8" stroke="#EF4444" stroke-width="1" stroke-linecap="round"/>
|
||||
<line x1="10" y1="11" x2="10" y2="17" stroke="#EF4444" stroke-width="0.8" opacity="0.5"/>
|
||||
<line x1="14" y1="11" x2="14" y2="17" stroke="#EF4444" stroke-width="0.8" opacity="0.5"/>
|
||||
<text x="12" y="34" class="lbl">Delete</text>
|
||||
</g>
|
||||
|
||||
<!-- Edit -->
|
||||
<g transform="translate(270, 130)">
|
||||
<path d="M 4,20 L 4,16 L 16,4 L 20,8 L 8,20 Z" fill="none" stroke="#A78BFA" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
<line x1="14" y1="6" x2="18" y2="10" stroke="#A78BFA" stroke-width="0.8" opacity="0.5"/>
|
||||
<text x="12" y="34" class="lbl">Edit</text>
|
||||
</g>
|
||||
|
||||
<!-- Refresh (angular cycle) -->
|
||||
<g transform="translate(330, 130)">
|
||||
<path d="M 18,10 A 7,7 0 1 0 16,18" fill="none" stroke="#A78BFA" stroke-width="1.3" stroke-linecap="round"/>
|
||||
<path d="M 18,6 L 18,11 L 13,11" fill="none" stroke="#A78BFA" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<text x="12" y="34" class="lbl">Refresh</text>
|
||||
</g>
|
||||
|
||||
<!-- Send (angular arrow) -->
|
||||
<g transform="translate(390, 130)" filter="url(#gl)">
|
||||
<path d="M 4,20 L 4,12 L 20,4 L 12,20 L 10,14 Z" fill="url(#gAme)" opacity="0.8"/>
|
||||
<path d="M 4,12 L 20,4 L 10,14 Z" fill="#fff" opacity="0.1"/>
|
||||
<text x="12" y="34" class="lbl">Send</text>
|
||||
</g>
|
||||
|
||||
<!-- === ROW 3: STATUS (contextual colors) === -->
|
||||
<text x="20" y="190" font-size="9" fill="#475569" font-weight="600" letter-spacing="0.08em">STATUS & FEEDBACK</text>
|
||||
|
||||
<!-- Checkmark (Emerald, animated subtle pulse) -->
|
||||
<g transform="translate(30, 200)" filter="url(#gl)">
|
||||
<circle cx="12" cy="12" r="10" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.5"/>
|
||||
<path d="M 7,12 L 11,16 L 18,8" fill="none" stroke="url(#gEm)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<animate attributeName="opacity" values="0.7;1;0.7" dur="3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<text x="12" y="34" class="lbl">Success</text>
|
||||
</g>
|
||||
|
||||
<!-- Warning (Amber triangle) -->
|
||||
<g transform="translate(90, 200)" filter="url(#gl)">
|
||||
<path d="M 12,3 L 22,21 L 2,21 Z" fill="none" stroke="#F59E0B" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
<path d="M 12,3 L 22,21 L 2,21 Z" fill="#F59E0B" opacity="0.08"/>
|
||||
<line x1="12" y1="10" x2="12" y2="15" stroke="#FCD34D" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<circle cx="12" cy="18" r="1" fill="#FCD34D"/>
|
||||
<text x="12" y="34" class="lbl">Warning</text>
|
||||
</g>
|
||||
|
||||
<!-- Info (hexagonal i) -->
|
||||
<g transform="translate(150, 200)">
|
||||
<path d="M 12,2 L 20,7 L 20,17 L 12,22 L 4,17 L 4,7 Z" fill="none" stroke="#3B82F6" stroke-width="1" opacity="0.6"/>
|
||||
<circle cx="12" cy="8" r="1" fill="#60A5FA"/>
|
||||
<line x1="12" y1="11" x2="12" y2="17" stroke="#60A5FA" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<text x="12" y="34" class="lbl">Info</text>
|
||||
</g>
|
||||
|
||||
<!-- Lock -->
|
||||
<g transform="translate(210, 200)">
|
||||
<rect x="6" y="12" width="12" height="10" rx="2" fill="none" stroke="#94A3B8" stroke-width="1.2"/>
|
||||
<path d="M 9,12 L 9,8 A 3,3 0 0 1 15,8 L 15,12" fill="none" stroke="#94A3B8" stroke-width="1.2"/>
|
||||
<circle cx="12" cy="17" r="1.2" fill="#94A3B8"/>
|
||||
<text x="12" y="34" class="lbl">Lock</text>
|
||||
</g>
|
||||
|
||||
<!-- Unlock -->
|
||||
<g transform="translate(270, 200)">
|
||||
<rect x="6" y="12" width="12" height="10" rx="2" fill="none" stroke="#10B981" stroke-width="1.2"/>
|
||||
<path d="M 9,12 L 9,8 A 3,3 0 0 1 15,8 L 15,6" fill="none" stroke="#10B981" stroke-width="1.2"/>
|
||||
<circle cx="12" cy="17" r="1.2" fill="#10B981"/>
|
||||
<text x="12" y="34" class="lbl">Unlock</text>
|
||||
</g>
|
||||
|
||||
<!-- Error (Ruby X in circle) -->
|
||||
<g transform="translate(330, 200)">
|
||||
<circle cx="12" cy="12" r="10" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.5"/>
|
||||
<path d="M 8,8 L 16,16 M 16,8 L 8,16" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<text x="12" y="34" class="lbl">Error</text>
|
||||
</g>
|
||||
|
||||
<!-- === ROW 4: FEATURE-SPECIFIC (mixed jewel tones) === -->
|
||||
<text x="20" y="260" font-size="9" fill="#475569" font-weight="600" letter-spacing="0.08em">FEATURE ICONS</text>
|
||||
|
||||
<!-- Turn/Rotate (animated slowly) -->
|
||||
<g transform="translate(30, 270)" filter="url(#gl)">
|
||||
<path d="M 12,4 L 18,12 L 12,20 L 6,12 Z" fill="url(#gAme)" opacity="0.7"/>
|
||||
<path d="M 12,4 L 18,12 L 6,12 Z" fill="#fff" opacity="0.1"/>
|
||||
<!-- Rotation arc -->
|
||||
<path d="M 20,6 A 9,9 0 0 1 20,18" fill="none" stroke="#C4B5FD" stroke-width="0.8" opacity="0.5">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="12s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<text x="12" y="34" class="lbl">Rotate</text>
|
||||
</g>
|
||||
|
||||
<!-- Streak flame (Amber, animated flicker) -->
|
||||
<g transform="translate(90, 270)" filter="url(#gl)">
|
||||
<path d="M 12,3 Q 16,8 15,14 Q 18,10 17,6 Q 20,12 16,20 L 8,20 Q 4,12 7,6 Q 6,10 9,14 Q 8,8 12,3 Z" fill="url(#gAmb)" opacity="0.85">
|
||||
<animate attributeName="opacity" values="0.75;0.95;0.75" dur="1.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 12,3 Q 14,7 13,10 L 11,10 Q 10,7 12,3 Z" fill="#fff" opacity="0.15"/>
|
||||
<text x="12" y="34" class="lbl">Streak</text>
|
||||
</g>
|
||||
|
||||
<!-- Bell (notification) -->
|
||||
<g transform="translate(150, 270)">
|
||||
<path d="M 12,3 L 12,5 M 8,20 Q 12,23 16,20" fill="none" stroke="#E2E8F0" stroke-width="1" stroke-linecap="round"/>
|
||||
<path d="M 6,18 L 6,12 Q 6,6 12,5 Q 18,6 18,12 L 18,18 Z" fill="none" stroke="#E2E8F0" stroke-width="1.2"/>
|
||||
<!-- Notification dot -->
|
||||
<circle cx="17" cy="6" r="2.5" fill="#EF4444" opacity="0.9">
|
||||
<animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<text x="12" y="34" class="lbl">Notify</text>
|
||||
</g>
|
||||
|
||||
<!-- Heart (angular, Rose) -->
|
||||
<g transform="translate(210, 270)" filter="url(#gl)">
|
||||
<path d="M 12,19 L 4,11 L 4,7 L 8,3 L 12,7 L 16,3 L 20,7 L 20,11 Z" fill="url(#gRose)" opacity="0.8"/>
|
||||
<path d="M 12,7 L 8,3 L 4,7 L 4,11 Z" fill="#fff" opacity="0.1"/>
|
||||
<text x="12" y="34" class="lbl">Heart</text>
|
||||
</g>
|
||||
|
||||
<!-- Star (6-pointed crystalline) -->
|
||||
<g transform="translate(270, 270)" filter="url(#gl)">
|
||||
<path d="M 12,2 L 14,9 L 21,9 L 16,14 L 18,21 L 12,17 L 6,21 L 8,14 L 3,9 L 10,9 Z" fill="url(#gAmb)" opacity="0.75"/>
|
||||
<path d="M 12,2 L 14,9 L 10,9 Z" fill="#fff" opacity="0.12"/>
|
||||
<text x="12" y="34" class="lbl">Star</text>
|
||||
</g>
|
||||
|
||||
<!-- Settings (hexagonal gear) -->
|
||||
<g transform="translate(330, 270)">
|
||||
<path d="M 10,2 L 14,2 L 16,5 L 20,5 L 22,9 L 20,12 L 22,15 L 20,19 L 16,19 L 14,22 L 10,22 L 8,19 L 4,19 L 2,15 L 4,12 L 2,9 L 4,5 L 8,5 Z" fill="none" stroke="#94A3B8" stroke-width="1"/>
|
||||
<circle cx="12" cy="12" r="4" fill="none" stroke="#94A3B8" stroke-width="1"/>
|
||||
<text x="12" y="34" class="lbl">Settings</text>
|
||||
</g>
|
||||
|
||||
<!-- Calendar -->
|
||||
<g transform="translate(390, 270)">
|
||||
<rect x="4" y="6" width="16" height="16" rx="2" fill="none" stroke="#94A3B8" stroke-width="1"/>
|
||||
<line x1="4" y1="10" x2="20" y2="10" stroke="#94A3B8" stroke-width="0.8"/>
|
||||
<line x1="8" y1="4" x2="8" y2="8" stroke="#94A3B8" stroke-width="1" stroke-linecap="round"/>
|
||||
<line x1="16" y1="4" x2="16" y2="8" stroke="#94A3B8" stroke-width="1" stroke-linecap="round"/>
|
||||
<!-- Date dots -->
|
||||
<circle cx="8" cy="14" r="1" fill="#94A3B8" opacity="0.5"/>
|
||||
<circle cx="12" cy="14" r="1" fill="#8B5CF6" opacity="0.8"/>
|
||||
<circle cx="16" cy="14" r="1" fill="#94A3B8" opacity="0.5"/>
|
||||
<circle cx="8" cy="18" r="1" fill="#94A3B8" opacity="0.5"/>
|
||||
<circle cx="12" cy="18" r="1" fill="#94A3B8" opacity="0.5"/>
|
||||
<text x="12" y="34" class="lbl">Calendar</text>
|
||||
</g>
|
||||
|
||||
<!-- === ROW 5: MEDIA & UI CONTROLS === -->
|
||||
<text x="20" y="330" font-size="9" fill="#475569" font-weight="600" letter-spacing="0.08em">MEDIA & CONTROLS</text>
|
||||
|
||||
<!-- Play -->
|
||||
<g transform="translate(30, 340)">
|
||||
<path d="M 7,4 L 20,12 L 7,20 Z" fill="url(#gAme)" opacity="0.8"/>
|
||||
<path d="M 7,4 L 20,12 L 7,12 Z" fill="#fff" opacity="0.08"/>
|
||||
<text x="12" y="34" class="lbl">Play</text>
|
||||
</g>
|
||||
|
||||
<!-- Pause -->
|
||||
<g transform="translate(90, 340)">
|
||||
<rect x="6" y="5" width="4" height="14" rx="1" fill="#E2E8F0" opacity="0.8"/>
|
||||
<rect x="14" y="5" width="4" height="14" rx="1" fill="#E2E8F0" opacity="0.8"/>
|
||||
<text x="12" y="34" class="lbl">Pause</text>
|
||||
</g>
|
||||
|
||||
<!-- Filter / Funnel -->
|
||||
<g transform="translate(150, 340)">
|
||||
<path d="M 3,5 L 21,5 L 14,14 L 14,20 L 10,22 L 10,14 Z" fill="none" stroke="#94A3B8" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
<text x="12" y="34" class="lbl">Filter</text>
|
||||
</g>
|
||||
|
||||
<!-- Search -->
|
||||
<g transform="translate(210, 340)">
|
||||
<circle cx="10" cy="10" r="7" fill="none" stroke="#94A3B8" stroke-width="1.3"/>
|
||||
<line x1="15" y1="15" x2="21" y2="21" stroke="#94A3B8" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<text x="12" y="34" class="lbl">Search</text>
|
||||
</g>
|
||||
|
||||
<!-- Eye / View -->
|
||||
<g transform="translate(270, 340)">
|
||||
<path d="M 2,12 Q 12,4 22,12 Q 12,20 2,12 Z" fill="none" stroke="#94A3B8" stroke-width="1.1"/>
|
||||
<!-- Diamond pupil -->
|
||||
<path d="M 12,8 L 15,12 L 12,16 L 9,12 Z" fill="#94A3B8" opacity="0.6"/>
|
||||
<text x="12" y="34" class="lbl">View</text>
|
||||
</g>
|
||||
|
||||
<!-- Expand -->
|
||||
<g transform="translate(330, 340)">
|
||||
<path d="M 4,4 L 10,4 M 4,4 L 4,10" stroke="#94A3B8" stroke-width="1.3" stroke-linecap="round"/>
|
||||
<path d="M 20,4 L 14,4 M 20,4 L 20,10" stroke="#94A3B8" stroke-width="1.3" stroke-linecap="round"/>
|
||||
<path d="M 4,20 L 10,20 M 4,20 L 4,14" stroke="#94A3B8" stroke-width="1.3" stroke-linecap="round"/>
|
||||
<path d="M 20,20 L 14,20 M 20,20 L 20,14" stroke="#94A3B8" stroke-width="1.3" stroke-linecap="round"/>
|
||||
<text x="12" y="34" class="lbl">Expand</text>
|
||||
</g>
|
||||
|
||||
<!-- Clock / Timer -->
|
||||
<g transform="translate(390, 340)">
|
||||
<path d="M 12,2 L 18,5 L 21,11 L 18,17 L 12,20 L 6,17 L 3,11 L 6,5 Z" fill="none" stroke="#94A3B8" stroke-width="1"/>
|
||||
<line x1="12" y1="7" x2="12" y2="11" stroke="#E2E8F0" stroke-width="1" stroke-linecap="round"/>
|
||||
<line x1="12" y1="11" x2="16" y2="14" stroke="#E2E8F0" stroke-width="1" stroke-linecap="round"/>
|
||||
<text x="12" y="34" class="lbl">Timer</text>
|
||||
</g>
|
||||
|
||||
<!-- === ROW 6: SPECIAL PURPOSE === -->
|
||||
<text x="20" y="400" font-size="9" fill="#475569" font-weight="600" letter-spacing="0.08em">SPECIAL PURPOSE</text>
|
||||
|
||||
<!-- Upgrade / Crown (prismatic animated) -->
|
||||
<g transform="translate(30, 410)" filter="url(#gl)">
|
||||
<path d="M 4,18 L 4,10 L 8,14 L 12,6 L 16,14 L 20,10 L 20,18 Z" fill="url(#gAme)" opacity="0.8">
|
||||
<animate attributeName="opacity" values="0.7;0.95;0.7" dur="3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 4,10 L 8,14 L 12,6 L 16,14 L 20,10 Z" fill="#fff" opacity="0.1"/>
|
||||
<text x="12" y="34" class="lbl">Premium</text>
|
||||
</g>
|
||||
|
||||
<!-- Science / Beaker -->
|
||||
<g transform="translate(90, 410)">
|
||||
<path d="M 9,4 L 9,12 L 4,20 L 20,20 L 15,12 L 15,4" fill="none" stroke="#60A5FA" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
<line x1="7" y1="4" x2="17" y2="4" stroke="#60A5FA" stroke-width="1"/>
|
||||
<circle cx="10" cy="16" r="1.5" fill="#60A5FA" opacity="0.4"/>
|
||||
<circle cx="14" cy="18" r="1" fill="#60A5FA" opacity="0.3"/>
|
||||
<text x="12" y="34" class="lbl">Science</text>
|
||||
</g>
|
||||
|
||||
<!-- Habit / Loop (animated subtle rotation) -->
|
||||
<g transform="translate(150, 410)">
|
||||
<path d="M 12,4 A 8,8 0 1 1 4,12" fill="none" stroke="#10B981" stroke-width="1.3" stroke-linecap="round">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="20s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 12,4 L 14,7 L 10,7 Z" fill="#10B981"/>
|
||||
<circle cx="12" cy="12" r="3" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.4"/>
|
||||
<text x="12" y="34" class="lbl">Habit</text>
|
||||
</g>
|
||||
|
||||
<!-- Breathe / Meditation -->
|
||||
<g transform="translate(210, 410)">
|
||||
<circle cx="12" cy="12" r="8" fill="none" stroke="#6366F1" stroke-width="1" opacity="0.4">
|
||||
<animate attributeName="r" values="6;10;6" dur="4s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.2;0.5;0.2" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="12" cy="12" r="3" fill="#818CF8" opacity="0.6">
|
||||
<animate attributeName="r" values="2;4;2" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<text x="12" y="34" class="lbl">Breathe</text>
|
||||
</g>
|
||||
|
||||
<!-- Evidence (diamond mosaic) -->
|
||||
<g transform="translate(270, 410)" filter="url(#gl)">
|
||||
<path d="M 8,6 L 12,3 L 16,6 L 12,9 Z" fill="#8B5CF6" opacity="0.6"/>
|
||||
<path d="M 4,12 L 8,9 L 12,12 L 8,15 Z" fill="#3B82F6" opacity="0.5"/>
|
||||
<path d="M 12,12 L 16,9 L 20,12 L 16,15 Z" fill="#10B981" opacity="0.5"/>
|
||||
<path d="M 8,18 L 12,15 L 16,18 L 12,21 Z" fill="#F59E0B" opacity="0.5"/>
|
||||
<text x="12" y="34" class="lbl">Evidence</text>
|
||||
</g>
|
||||
|
||||
<!-- Fragment (the core ◇) -->
|
||||
<g transform="translate(330, 410)" filter="url(#gl)">
|
||||
<path d="M 12,2 L 20,12 L 12,22 L 4,12 Z" fill="url(#gAmb)" opacity="0.85"/>
|
||||
<path d="M 12,2 L 20,12 L 4,12 Z" fill="#fff" opacity="0.12"/>
|
||||
<line x1="4" y1="12" x2="20" y2="12" stroke="#fff" stroke-width="0.4" opacity="0.3"/>
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2.5s" repeatCount="indefinite"/>
|
||||
<text x="12" y="34" class="lbl">Fragment</text>
|
||||
</g>
|
||||
|
||||
<!-- Spectrum (prismatic bar) -->
|
||||
<g transform="translate(390, 410)">
|
||||
<rect x="4" y="8" width="4" height="8" rx="1" fill="#8B5CF6" opacity="0.7"/>
|
||||
<rect x="9" y="6" width="4" height="12" rx="1" fill="#3B82F6" opacity="0.7"/>
|
||||
<rect x="14" y="10" width="4" height="6" rx="1" fill="#10B981" opacity="0.7"/>
|
||||
<rect x="4" y="18" width="14" height="2" rx="1" fill="#1C2240"/>
|
||||
<text x="12" y="34" class="lbl">Spectrum</text>
|
||||
</g>
|
||||
|
||||
<!-- Totals -->
|
||||
<text x="280" y="480" font-size="9" fill="#475569" text-anchor="middle">38 icons — 24×24px each — Glow filters on primary actions — Animations on streak, breathe, rotate, notify</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 19 KiB |
187
initial mockups/assets/icons-distortions.svg
Normal file
187
initial mockups/assets/icons-distortions.svg
Normal file
@@ -0,0 +1,187 @@
|
||||
<svg viewBox="0 0 560 320" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<filter id="gAmber" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="1.8" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<linearGradient id="amberGr" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<style>
|
||||
text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
|
||||
.lbl { font-size: 9px; fill: #94A3B8; text-anchor: middle; font-weight: 500; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect width="560" height="320" fill="#050508"/>
|
||||
<text x="280" y="24" font-size="12" font-weight="600" fill="#94A3B8" text-anchor="middle" letter-spacing="0.12em">COGNITIVE DISTORTION ICONS</text>
|
||||
<text x="280" y="38" font-size="9" fill="#475569" text-anchor="middle">10 fragment types — Amber (#F59E0B) default, each with unique crystalline geometry</text>
|
||||
|
||||
<!-- Row 1: 5 icons -->
|
||||
<!-- Each icon is 24x24, rendered in a 100x100 cell with label -->
|
||||
|
||||
<!-- 1. CATASTROPHIZING — A downward-cascading shard breaking into pieces -->
|
||||
<g transform="translate(28, 60)" filter="url(#gAmber)">
|
||||
<g transform="translate(12,12)">
|
||||
<!-- Main shard falling -->
|
||||
<path d="M 0,-10 L 5,0 L 0,10 L -5,0 Z" fill="url(#amberGr)" opacity="0.9"/>
|
||||
<path d="M 0,-10 L 5,0 L -5,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<!-- Smaller fragment broken off, lower-left -->
|
||||
<path d="M -8,6 L -5,10 L -9,12 L -11,8 Z" fill="#F59E0B" opacity="0.5"/>
|
||||
<!-- Smaller fragment, lower-right -->
|
||||
<path d="M 7,8 L 10,12 L 8,14 L 5,11 Z" fill="#F59E0B" opacity="0.4"/>
|
||||
<!-- Downward motion lines -->
|
||||
<line x1="0" y1="11" x2="0" y2="16" stroke="#FCD34D" stroke-width="0.5" opacity="0.4"/>
|
||||
<line x1="-3" y1="12" x2="-5" y2="17" stroke="#FCD34D" stroke-width="0.4" opacity="0.3"/>
|
||||
<line x1="3" y1="12" x2="5" y2="17" stroke="#FCD34D" stroke-width="0.4" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="12" y="42" class="lbl">Catastrophizing</text>
|
||||
</g>
|
||||
|
||||
<!-- 2. BLACK-AND-WHITE — A diamond split in half: one side filled, one side outline -->
|
||||
<g transform="translate(140, 60)" filter="url(#gAmber)">
|
||||
<g transform="translate(12,12)">
|
||||
<!-- Left half: filled -->
|
||||
<path d="M 0,-10 L -7,0 L 0,10 L 0,0 Z" fill="url(#amberGr)" opacity="0.85"/>
|
||||
<!-- Right half: outline only -->
|
||||
<path d="M 0,-10 L 7,0 L 0,10 L 0,0 Z" fill="none" stroke="#F59E0B" stroke-width="1"/>
|
||||
<!-- Center dividing line -->
|
||||
<line x1="0" y1="-10" x2="0" y2="10" stroke="#FEF3C7" stroke-width="0.6" opacity="0.5"/>
|
||||
<!-- Top facet highlight on filled side -->
|
||||
<path d="M 0,-10 L -7,0 L 0,0 Z" fill="#fff" opacity="0.12"/>
|
||||
</g>
|
||||
<text x="12" y="42" class="lbl">Black-and-White</text>
|
||||
</g>
|
||||
|
||||
<!-- 3. MIND READING — A hexagonal head with a small eye/diamond inside -->
|
||||
<g transform="translate(252, 60)" filter="url(#gAmber)">
|
||||
<g transform="translate(12,12)">
|
||||
<!-- Hexagonal head outline -->
|
||||
<path d="M 0,-10 L 8,-5 L 8,5 L 0,10 L -8,5 L -8,-5 Z" fill="none" stroke="#F59E0B" stroke-width="1" opacity="0.7"/>
|
||||
<!-- Inner diamond (the "read" thought) -->
|
||||
<path d="M 0,-4 L 4,0 L 0,4 L -4,0 Z" fill="url(#amberGr)" opacity="0.8"/>
|
||||
<path d="M 0,-4 L 4,0 L -4,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<!-- Radiating lines from inner diamond (thought waves) -->
|
||||
<line x1="5" y1="-3" x2="9" y2="-6" stroke="#FCD34D" stroke-width="0.4" opacity="0.35"/>
|
||||
<line x1="5" y1="3" x2="9" y2="6" stroke="#FCD34D" stroke-width="0.4" opacity="0.35"/>
|
||||
<line x1="-5" y1="-3" x2="-9" y2="-6" stroke="#FCD34D" stroke-width="0.4" opacity="0.35"/>
|
||||
</g>
|
||||
<text x="12" y="42" class="lbl">Mind Reading</text>
|
||||
</g>
|
||||
|
||||
<!-- 4. FORTUNE TELLING — A crystal ball shape with forward-pointing shard -->
|
||||
<g transform="translate(364, 60)" filter="url(#gAmber)">
|
||||
<g transform="translate(12,12)">
|
||||
<!-- Crystal ball: faceted circle (octagon) -->
|
||||
<path d="M 0,-9 L 6,-6 L 9,0 L 6,6 L 0,9 L -6,6 L -9,0 L -6,-6 Z" fill="none" stroke="#F59E0B" stroke-width="0.8" opacity="0.6"/>
|
||||
<!-- Inner glow -->
|
||||
<circle cx="0" cy="0" r="4" fill="#F59E0B" opacity="0.15"/>
|
||||
<!-- Forward arrow shard -->
|
||||
<path d="M 2,0 L 10,-3 L 14,0 L 10,3 Z" fill="url(#amberGr)" opacity="0.8"/>
|
||||
<path d="M 2,0 L 10,-3 L 14,0 Z" fill="#fff" opacity="0.12"/>
|
||||
<!-- Base -->
|
||||
<path d="M -5,9 L 5,9 L 3,12 L -3,12 Z" fill="#F59E0B" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="12" y="42" class="lbl">Fortune Telling</text>
|
||||
</g>
|
||||
|
||||
<!-- 5. PERSONALIZATION — Inward-pointing shard arrows converging on center -->
|
||||
<g transform="translate(476, 60)" filter="url(#gAmber)">
|
||||
<g transform="translate(12,12)">
|
||||
<!-- Center dot -->
|
||||
<circle cx="0" cy="0" r="2.5" fill="url(#amberGr)" opacity="0.8"/>
|
||||
<!-- Four inward-pointing shards -->
|
||||
<path d="M 0,-12 L 2,-6 L 0,-4 L -2,-6 Z" fill="#F59E0B" opacity="0.7"/>
|
||||
<path d="M 12,0 L 6,2 L 4,0 L 6,-2 Z" fill="#F59E0B" opacity="0.6"/>
|
||||
<path d="M 0,12 L -2,6 L 0,4 L 2,6 Z" fill="#F59E0B" opacity="0.6"/>
|
||||
<path d="M -12,0 L -6,-2 L -4,0 L -6,2 Z" fill="#F59E0B" opacity="0.7"/>
|
||||
<!-- Subtle connecting lines -->
|
||||
<line x1="0" y1="-4" x2="0" y2="-2.5" stroke="#FCD34D" stroke-width="0.4" opacity="0.3"/>
|
||||
<line x1="4" y1="0" x2="2.5" y2="0" stroke="#FCD34D" stroke-width="0.4" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="12" y="42" class="lbl">Personalization</text>
|
||||
</g>
|
||||
|
||||
<!-- Row 2: 5 icons -->
|
||||
|
||||
<!-- 6. DISCOUNTING POSITIVES — A star/gem shape with a line through it -->
|
||||
<g transform="translate(28, 180)" filter="url(#gAmber)">
|
||||
<g transform="translate(12,12)">
|
||||
<!-- 6-pointed star -->
|
||||
<path d="M 0,-10 L 3,-4 L 9,-4 L 5,1 L 7,7 L 0,4 L -7,7 L -5,1 L -9,-4 L -3,-4 Z" fill="url(#amberGr)" opacity="0.5"/>
|
||||
<path d="M 0,-10 L 3,-4 L -3,-4 Z" fill="#fff" opacity="0.1"/>
|
||||
<!-- Strike-through line (discounting) -->
|
||||
<line x1="-10" y1="4" x2="10" y2="-4" stroke="#FEF3C7" stroke-width="1.2" opacity="0.7"/>
|
||||
<!-- Dimmed effect on the star -->
|
||||
<path d="M 0,-10 L 3,-4 L 9,-4 L 5,1 L 7,7 L 0,4 L -7,7 L -5,1 L -9,-4 L -3,-4 Z" fill="#050508" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="12" y="42" class="lbl">Discounting +</text>
|
||||
</g>
|
||||
|
||||
<!-- 7. EMOTIONAL REASONING — A heart shape made of angular geometry with = sign -->
|
||||
<g transform="translate(140, 180)" filter="url(#gAmber)">
|
||||
<g transform="translate(12,12)">
|
||||
<!-- Angular heart: two triangles forming a V-heart -->
|
||||
<path d="M 0,8 L -8,-1 L -5,-7 L 0,-3 L 5,-7 L 8,-1 Z" fill="url(#amberGr)" opacity="0.7"/>
|
||||
<path d="M 0,-3 L -5,-7 L -8,-1 Z" fill="#fff" opacity="0.12"/>
|
||||
<!-- Equals sign next to it -->
|
||||
<line x1="9" y1="-2" x2="14" y2="-2" stroke="#FCD34D" stroke-width="1" opacity="0.6"/>
|
||||
<line x1="9" y1="2" x2="14" y2="2" stroke="#FCD34D" stroke-width="1" opacity="0.6"/>
|
||||
</g>
|
||||
<text x="12" y="42" class="lbl">Emotional Reasoning</text>
|
||||
</g>
|
||||
|
||||
<!-- 8. SHOULD STATEMENTS — A rigid angular ruler/bracket shape -->
|
||||
<g transform="translate(252, 180)" filter="url(#gAmber)">
|
||||
<g transform="translate(12,12)">
|
||||
<!-- Rigid L-bracket -->
|
||||
<path d="M -6,-10 L -6,10 L 6,10" fill="none" stroke="#F59E0B" stroke-width="1.2" stroke-linejoin="miter"/>
|
||||
<!-- Tick marks along the ruler -->
|
||||
<line x1="-6" y1="-6" x2="-3" y2="-6" stroke="#FCD34D" stroke-width="0.6" opacity="0.5"/>
|
||||
<line x1="-6" y1="-2" x2="-3" y2="-2" stroke="#FCD34D" stroke-width="0.6" opacity="0.5"/>
|
||||
<line x1="-6" y1="2" x2="-3" y2="2" stroke="#FCD34D" stroke-width="0.6" opacity="0.5"/>
|
||||
<line x1="-6" y1="6" x2="-3" y2="6" stroke="#FCD34D" stroke-width="0.6" opacity="0.5"/>
|
||||
<!-- Angular exclamation inside -->
|
||||
<path d="M 2,-4 L 3,-1 L 1,-1 Z" fill="#FCD34D" opacity="0.6"/>
|
||||
<circle cx="2" cy="1" r="0.8" fill="#FCD34D" opacity="0.6"/>
|
||||
</g>
|
||||
<text x="12" y="42" class="lbl">Should Statements</text>
|
||||
</g>
|
||||
|
||||
<!-- 9. LABELING — An angular tag/label shape -->
|
||||
<g transform="translate(364, 180)" filter="url(#gAmber)">
|
||||
<g transform="translate(12,12)">
|
||||
<!-- Tag shape: pentagon pointing right -->
|
||||
<path d="M -8,-7 L 5,-7 L 10,0 L 5,7 L -8,7 Z" fill="url(#amberGr)" opacity="0.6"/>
|
||||
<path d="M -8,-7 L 5,-7 L 10,0 Z" fill="#fff" opacity="0.1"/>
|
||||
<!-- Hole in tag -->
|
||||
<circle cx="-3" cy="0" r="2" fill="#050508" opacity="0.6" stroke="#FCD34D" stroke-width="0.5"/>
|
||||
<!-- Inner line -->
|
||||
<line x1="1" y1="-3" x2="1" y2="3" stroke="#FEF3C7" stroke-width="0.4" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="12" y="42" class="lbl">Labeling</text>
|
||||
</g>
|
||||
|
||||
<!-- 10. OVERGENERALIZATION — One dot replicating into many -->
|
||||
<g transform="translate(476, 180)" filter="url(#gAmber)">
|
||||
<g transform="translate(12,12)">
|
||||
<!-- Single source diamond -->
|
||||
<path d="M -10,0 L -7,-3 L -4,0 L -7,3 Z" fill="url(#amberGr)" opacity="0.9"/>
|
||||
<path d="M -10,0 L -7,-3 L -4,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<!-- Arrow -->
|
||||
<line x1="-3" y1="0" x2="0" y2="0" stroke="#FCD34D" stroke-width="0.5" opacity="0.4"/>
|
||||
<!-- Multiple replicated diamonds (spreading out) -->
|
||||
<path d="M 2,-6 L 4,-8 L 6,-6 L 4,-4 Z" fill="#F59E0B" opacity="0.7"/>
|
||||
<path d="M 4,0 L 6,-2 L 8,0 L 6,2 Z" fill="#F59E0B" opacity="0.6"/>
|
||||
<path d="M 2,6 L 4,4 L 6,6 L 4,8 Z" fill="#F59E0B" opacity="0.5"/>
|
||||
<path d="M 8,-4 L 10,-6 L 12,-4 L 10,-2 Z" fill="#F59E0B" opacity="0.4"/>
|
||||
<path d="M 8,4 L 10,2 L 12,4 L 10,6 Z" fill="#F59E0B" opacity="0.35"/>
|
||||
</g>
|
||||
<text x="12" y="42" class="lbl">Overgeneralization</text>
|
||||
</g>
|
||||
|
||||
<!-- Color reference -->
|
||||
<text x="280" y="278" font-size="9" fill="#475569" text-anchor="middle">Primary: #F59E0B (Amber) — Gradient: #FDE68A to #D97706 — Highlight: #FCD34D</text>
|
||||
<text x="280" y="292" font-size="9" fill="#475569" text-anchor="middle">All icons 24x24px — Glow filter for active/detected state — Outlined for reference/guide</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 10 KiB |
258
initial mockups/assets/icons-tab-bar.svg
Normal file
258
initial mockups/assets/icons-tab-bar.svg
Normal file
@@ -0,0 +1,258 @@
|
||||
<svg viewBox="0 0 520 480" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Glow filters matched to soft-elegance: layered gaussian blur + source merge -->
|
||||
<filter id="gAmethyst" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="2.5" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="gAmber" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="2.5" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="gEmerald" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="2.5" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="gSapphire" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="2.5" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="gSoft" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Gradients — mimicking the soft-elegance per-blade gradient approach -->
|
||||
<linearGradient id="grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#047857"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/>
|
||||
<stop offset="100%" stop-color="#1D4ED8"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grSoftLight" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#F1F5F9"/>
|
||||
<stop offset="100%" stop-color="#CBD5E1"/>
|
||||
</linearGradient>
|
||||
|
||||
<style>
|
||||
text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect width="520" height="480" fill="#050508"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="260" y="32" font-size="14" font-weight="600" fill="#94A3B8" text-anchor="middle" letter-spacing="0.12em">TAB BAR ICONS</text>
|
||||
|
||||
<!-- ================================================ -->
|
||||
<!-- ROW 1: ACTIVE STATES -->
|
||||
<!-- ================================================ -->
|
||||
<text x="260" y="68" font-size="11" fill="#475569" text-anchor="middle" letter-spacing="0.08em">ACTIVE</text>
|
||||
|
||||
<!-- ◇ TURN — Active (Amethyst) -->
|
||||
<g transform="translate(52, 100)">
|
||||
<g filter="url(#gAmethyst)">
|
||||
<!-- Outer diamond -->
|
||||
<path d="M 24,2 L 44,24 L 24,46 L 4,24 Z" fill="url(#grAmethyst)" opacity="0.9"/>
|
||||
<!-- Inner facet: horizontal midline creating top/bottom facets -->
|
||||
<line x1="4" y1="24" x2="44" y2="24" stroke="#fff" stroke-width="0.5" opacity="0.35"/>
|
||||
<!-- Inner facet: vertical center line -->
|
||||
<line x1="24" y1="2" x2="24" y2="46" stroke="#fff" stroke-width="0.4" opacity="0.2"/>
|
||||
<!-- Top facet highlight -->
|
||||
<path d="M 24,2 L 44,24 L 4,24 Z" fill="#fff" opacity="0.12"/>
|
||||
<!-- Specular glint -->
|
||||
<circle cx="18" cy="18" r="2" fill="#fff" opacity="0.4"/>
|
||||
<!-- Small rotating inner shard (suggests kaleidoscope turn) -->
|
||||
<path d="M 24,12 L 30,24 L 24,36 L 18,24 Z" fill="none" stroke="#E9D5FF" stroke-width="0.6" opacity="0.5"/>
|
||||
</g>
|
||||
<text x="24" y="64" font-size="10" font-weight="600" fill="#C4B5FD" text-anchor="middle" letter-spacing="0.06em">TURN</text>
|
||||
</g>
|
||||
|
||||
<!-- ✦ MIRROR — Active (Amber) -->
|
||||
<g transform="translate(152, 100)">
|
||||
<g filter="url(#gAmber)">
|
||||
<!-- Hexagonal mirror shape -->
|
||||
<path d="M 24,3 L 42,14 L 42,35 L 24,46 L 6,35 L 6,14 Z" fill="url(#grAmber)" opacity="0.9"/>
|
||||
<!-- Horizontal reflection line -->
|
||||
<line x1="6" y1="24.5" x2="42" y2="24.5" stroke="#fff" stroke-width="0.6" opacity="0.4"/>
|
||||
<!-- Inner hexagon (mirror reflection) -->
|
||||
<path d="M 24,10 L 35,17 L 35,32 L 24,39 L 13,32 L 13,17 Z" fill="none" stroke="#FEF3C7" stroke-width="0.5" opacity="0.4"/>
|
||||
<!-- Top facet light -->
|
||||
<path d="M 24,3 L 42,14 L 6,14 Z" fill="#fff" opacity="0.1"/>
|
||||
<!-- Specular -->
|
||||
<circle cx="19" cy="17" r="1.8" fill="#fff" opacity="0.35"/>
|
||||
</g>
|
||||
<text x="24" y="64" font-size="10" font-weight="600" fill="#FCD34D" text-anchor="middle" letter-spacing="0.06em">MIRROR</text>
|
||||
</g>
|
||||
|
||||
<!-- ◎ LENS — Active (Emerald) -->
|
||||
<g transform="translate(252, 100)">
|
||||
<g filter="url(#gEmerald)">
|
||||
<!-- Outer lens circle -->
|
||||
<circle cx="24" cy="24" r="20" fill="none" stroke="url(#grEmerald)" stroke-width="2" opacity="0.9"/>
|
||||
<!-- Middle ring -->
|
||||
<circle cx="24" cy="24" r="13" fill="none" stroke="#6EE7B7" stroke-width="1" opacity="0.5"/>
|
||||
<!-- Inner core (focus point) -->
|
||||
<circle cx="24" cy="24" r="5" fill="url(#grEmerald)" opacity="0.8"/>
|
||||
<!-- Cross-hair lines suggesting focus/precision -->
|
||||
<line x1="24" y1="6" x2="24" y2="14" stroke="#A7F3D0" stroke-width="0.5" opacity="0.4"/>
|
||||
<line x1="24" y1="34" x2="24" y2="42" stroke="#A7F3D0" stroke-width="0.5" opacity="0.4"/>
|
||||
<line x1="6" y1="24" x2="14" y2="24" stroke="#A7F3D0" stroke-width="0.5" opacity="0.4"/>
|
||||
<line x1="34" y1="24" x2="42" y2="24" stroke="#A7F3D0" stroke-width="0.5" opacity="0.4"/>
|
||||
<!-- Specular -->
|
||||
<circle cx="19" cy="19" r="2.5" fill="#fff" opacity="0.2"/>
|
||||
</g>
|
||||
<text x="24" y="64" font-size="10" font-weight="600" fill="#6EE7B7" text-anchor="middle" letter-spacing="0.06em">LENS</text>
|
||||
</g>
|
||||
|
||||
<!-- ▦ GALLERY — Active (Sapphire) -->
|
||||
<g transform="translate(352, 100)">
|
||||
<g filter="url(#gSapphire)">
|
||||
<!-- 2x2 grid of small faceted shapes -->
|
||||
<!-- Top-left diamond -->
|
||||
<path d="M 12,6 L 20,12 L 12,18 L 4,12 Z" fill="url(#grSapphire)" opacity="0.85"/>
|
||||
<path d="M 12,6 L 20,12 L 4,12 Z" fill="#fff" opacity="0.1"/>
|
||||
<!-- Top-right diamond -->
|
||||
<path d="M 36,6 L 44,12 L 36,18 L 28,12 Z" fill="url(#grSapphire)" opacity="0.75"/>
|
||||
<path d="M 36,6 L 44,12 L 28,12 Z" fill="#fff" opacity="0.08"/>
|
||||
<!-- Bottom-left diamond -->
|
||||
<path d="M 12,28 L 20,34 L 12,40 L 4,34 Z" fill="url(#grSapphire)" opacity="0.7"/>
|
||||
<path d="M 12,28 L 20,34 L 4,34 Z" fill="#fff" opacity="0.08"/>
|
||||
<!-- Bottom-right diamond -->
|
||||
<path d="M 36,28 L 44,34 L 36,40 L 28,34 Z" fill="url(#grSapphire)" opacity="0.85"/>
|
||||
<path d="M 36,28 L 44,34 L 28,34 Z" fill="#fff" opacity="0.1"/>
|
||||
<!-- Thin connecting lines -->
|
||||
<line x1="20" y1="12" x2="28" y2="12" stroke="#93C5FD" stroke-width="0.4" opacity="0.3"/>
|
||||
<line x1="12" y1="18" x2="12" y2="28" stroke="#93C5FD" stroke-width="0.4" opacity="0.3"/>
|
||||
<line x1="36" y1="18" x2="36" y2="28" stroke="#93C5FD" stroke-width="0.4" opacity="0.3"/>
|
||||
<line x1="20" y1="34" x2="28" y2="34" stroke="#93C5FD" stroke-width="0.4" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="24" y="64" font-size="10" font-weight="600" fill="#93C5FD" text-anchor="middle" letter-spacing="0.06em">GALLERY</text>
|
||||
</g>
|
||||
|
||||
<!-- ● YOU — Active (Soft Light) -->
|
||||
<g transform="translate(452, 100)">
|
||||
<g filter="url(#gSoft)">
|
||||
<!-- Angular avatar: hexagonal head + angular shoulders -->
|
||||
<path d="M 24,4 L 32,10 L 32,20 L 24,26 L 16,20 L 16,10 Z" fill="url(#grSoftLight)" opacity="0.85"/>
|
||||
<path d="M 24,4 L 32,10 L 16,10 Z" fill="#fff" opacity="0.12"/>
|
||||
<!-- Shoulders: angular trapezoid -->
|
||||
<path d="M 8,46 L 14,32 L 24,28 L 34,32 L 40,46 Z" fill="url(#grSoftLight)" opacity="0.65"/>
|
||||
<path d="M 14,32 L 24,28 L 34,32 Z" fill="#fff" opacity="0.08"/>
|
||||
<!-- Specular on face -->
|
||||
<circle cx="20" cy="14" r="1.5" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
<text x="24" y="64" font-size="10" font-weight="600" fill="#E2E8F0" text-anchor="middle" letter-spacing="0.06em">YOU</text>
|
||||
</g>
|
||||
|
||||
<!-- ================================================ -->
|
||||
<!-- ROW 2: INACTIVE STATES -->
|
||||
<!-- ================================================ -->
|
||||
<text x="260" y="212" font-size="11" fill="#475569" text-anchor="middle" letter-spacing="0.08em">INACTIVE</text>
|
||||
|
||||
<!-- ◇ TURN — Inactive -->
|
||||
<g transform="translate(52, 240)">
|
||||
<path d="M 24,2 L 44,24 L 24,46 L 4,24 Z" fill="none" stroke="#475569" stroke-width="1.2"/>
|
||||
<line x1="4" y1="24" x2="44" y2="24" stroke="#475569" stroke-width="0.4" opacity="0.3"/>
|
||||
<path d="M 24,12 L 30,24 L 24,36 L 18,24 Z" fill="none" stroke="#475569" stroke-width="0.5" opacity="0.3"/>
|
||||
<text x="24" y="64" font-size="10" font-weight="500" fill="#475569" text-anchor="middle" letter-spacing="0.06em">TURN</text>
|
||||
</g>
|
||||
|
||||
<!-- ✦ MIRROR — Inactive -->
|
||||
<g transform="translate(152, 240)">
|
||||
<path d="M 24,3 L 42,14 L 42,35 L 24,46 L 6,35 L 6,14 Z" fill="none" stroke="#475569" stroke-width="1.2"/>
|
||||
<line x1="6" y1="24.5" x2="42" y2="24.5" stroke="#475569" stroke-width="0.4" opacity="0.3"/>
|
||||
<path d="M 24,10 L 35,17 L 35,32 L 24,39 L 13,32 L 13,17 Z" fill="none" stroke="#475569" stroke-width="0.4" opacity="0.25"/>
|
||||
<text x="24" y="64" font-size="10" font-weight="500" fill="#475569" text-anchor="middle" letter-spacing="0.06em">MIRROR</text>
|
||||
</g>
|
||||
|
||||
<!-- ◎ LENS — Inactive -->
|
||||
<g transform="translate(252, 240)">
|
||||
<circle cx="24" cy="24" r="20" fill="none" stroke="#475569" stroke-width="1.2"/>
|
||||
<circle cx="24" cy="24" r="13" fill="none" stroke="#475569" stroke-width="0.5" opacity="0.3"/>
|
||||
<circle cx="24" cy="24" r="5" fill="none" stroke="#475569" stroke-width="0.8" opacity="0.5"/>
|
||||
<line x1="24" y1="6" x2="24" y2="14" stroke="#475569" stroke-width="0.4" opacity="0.25"/>
|
||||
<line x1="24" y1="34" x2="24" y2="42" stroke="#475569" stroke-width="0.4" opacity="0.25"/>
|
||||
<line x1="6" y1="24" x2="14" y2="24" stroke="#475569" stroke-width="0.4" opacity="0.25"/>
|
||||
<line x1="34" y1="24" x2="42" y2="24" stroke="#475569" stroke-width="0.4" opacity="0.25"/>
|
||||
<text x="24" y="64" font-size="10" font-weight="500" fill="#475569" text-anchor="middle" letter-spacing="0.06em">LENS</text>
|
||||
</g>
|
||||
|
||||
<!-- ▦ GALLERY — Inactive -->
|
||||
<g transform="translate(352, 240)">
|
||||
<path d="M 12,6 L 20,12 L 12,18 L 4,12 Z" fill="none" stroke="#475569" stroke-width="1"/>
|
||||
<path d="M 36,6 L 44,12 L 36,18 L 28,12 Z" fill="none" stroke="#475569" stroke-width="1"/>
|
||||
<path d="M 12,28 L 20,34 L 12,40 L 4,34 Z" fill="none" stroke="#475569" stroke-width="1"/>
|
||||
<path d="M 36,28 L 44,34 L 36,40 L 28,34 Z" fill="none" stroke="#475569" stroke-width="1"/>
|
||||
<line x1="20" y1="12" x2="28" y2="12" stroke="#475569" stroke-width="0.3" opacity="0.25"/>
|
||||
<line x1="12" y1="18" x2="12" y2="28" stroke="#475569" stroke-width="0.3" opacity="0.25"/>
|
||||
<line x1="36" y1="18" x2="36" y2="28" stroke="#475569" stroke-width="0.3" opacity="0.25"/>
|
||||
<line x1="20" y1="34" x2="28" y2="34" stroke="#475569" stroke-width="0.3" opacity="0.25"/>
|
||||
<text x="24" y="64" font-size="10" font-weight="500" fill="#475569" text-anchor="middle" letter-spacing="0.06em">GALLERY</text>
|
||||
</g>
|
||||
|
||||
<!-- ● YOU — Inactive -->
|
||||
<g transform="translate(452, 240)">
|
||||
<path d="M 24,4 L 32,10 L 32,20 L 24,26 L 16,20 L 16,10 Z" fill="none" stroke="#475569" stroke-width="1.2"/>
|
||||
<path d="M 8,46 L 14,32 L 24,28 L 34,32 L 40,46 Z" fill="none" stroke="#475569" stroke-width="1" opacity="0.6"/>
|
||||
<text x="24" y="64" font-size="10" font-weight="500" fill="#475569" text-anchor="middle" letter-spacing="0.06em">YOU</text>
|
||||
</g>
|
||||
|
||||
<!-- ================================================ -->
|
||||
<!-- ROW 3: SIMULATED TAB BAR (in-context preview) -->
|
||||
<!-- ================================================ -->
|
||||
<text x="260" y="356" font-size="11" fill="#475569" text-anchor="middle" letter-spacing="0.08em">TAB BAR PREVIEW (Turn active)</text>
|
||||
|
||||
<!-- Tab bar background -->
|
||||
<rect x="35" y="370" width="450" height="80" rx="16" fill="#0A0E1A" stroke="#1C2240" stroke-width="1"/>
|
||||
<line x1="35" y1="370" x2="485" y2="370" stroke="#1C2240" stroke-width="1"/>
|
||||
|
||||
<!-- Turn — Active -->
|
||||
<g transform="translate(62, 380)">
|
||||
<g filter="url(#gAmethyst)">
|
||||
<path d="M 12,1 L 22,12 L 12,23 L 2,12 Z" fill="url(#grAmethyst)" opacity="0.9"/>
|
||||
<path d="M 12,1 L 22,12 L 2,12 Z" fill="#fff" opacity="0.1"/>
|
||||
<line x1="2" y1="12" x2="22" y2="12" stroke="#fff" stroke-width="0.4" opacity="0.25"/>
|
||||
</g>
|
||||
<text x="12" y="36" font-size="9" font-weight="600" fill="#C4B5FD" text-anchor="middle" letter-spacing="0.04em">Turn</text>
|
||||
</g>
|
||||
|
||||
<!-- Mirror — Inactive -->
|
||||
<g transform="translate(152, 380)">
|
||||
<path d="M 12,1.5 L 21,7.5 L 21,17.5 L 12,23.5 L 3,17.5 L 3,7.5 Z" fill="none" stroke="#475569" stroke-width="1"/>
|
||||
<text x="12" y="36" font-size="9" font-weight="500" fill="#475569" text-anchor="middle" letter-spacing="0.04em">Mirror</text>
|
||||
</g>
|
||||
|
||||
<!-- Lens — Inactive -->
|
||||
<g transform="translate(242, 380)">
|
||||
<circle cx="12" cy="12" r="10" fill="none" stroke="#475569" stroke-width="1"/>
|
||||
<circle cx="12" cy="12" r="3" fill="none" stroke="#475569" stroke-width="0.6" opacity="0.5"/>
|
||||
<text x="12" y="36" font-size="9" font-weight="500" fill="#475569" text-anchor="middle" letter-spacing="0.04em">Lens</text>
|
||||
</g>
|
||||
|
||||
<!-- Gallery — Inactive -->
|
||||
<g transform="translate(327, 380)">
|
||||
<path d="M 6,3 L 10,6 L 6,9 L 2,6 Z" fill="none" stroke="#475569" stroke-width="0.8"/>
|
||||
<path d="M 18,3 L 22,6 L 18,9 L 14,6 Z" fill="none" stroke="#475569" stroke-width="0.8"/>
|
||||
<path d="M 6,15 L 10,18 L 6,21 L 2,18 Z" fill="none" stroke="#475569" stroke-width="0.8"/>
|
||||
<path d="M 18,15 L 22,18 L 18,21 L 14,18 Z" fill="none" stroke="#475569" stroke-width="0.8"/>
|
||||
<text x="12" y="36" font-size="9" font-weight="500" fill="#475569" text-anchor="middle" letter-spacing="0.04em">Gallery</text>
|
||||
</g>
|
||||
|
||||
<!-- You — Inactive -->
|
||||
<g transform="translate(417, 380)">
|
||||
<path d="M 12,2 L 16,5 L 16,10 L 12,13 L 8,10 L 8,5 Z" fill="none" stroke="#475569" stroke-width="0.9"/>
|
||||
<path d="M 4,23 L 7,16 L 12,14 L 17,16 L 20,23 Z" fill="none" stroke="#475569" stroke-width="0.8" opacity="0.6"/>
|
||||
<text x="12" y="36" font-size="9" font-weight="500" fill="#475569" text-anchor="middle" letter-spacing="0.04em">You</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 KiB |
329
initial mockups/assets/kalei-logo.svg
Normal file
329
initial mockups/assets/kalei-logo.svg
Normal file
@@ -0,0 +1,329 @@
|
||||
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" width="400" height="400">
|
||||
<defs>
|
||||
<!-- Blade Gradients: Amethyst (0°) -->
|
||||
<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>
|
||||
|
||||
<!-- Blade Gradients: Sapphire (60°) -->
|
||||
<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>
|
||||
|
||||
<!-- Blade Gradients: Emerald (120°) -->
|
||||
<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>
|
||||
|
||||
<!-- Blade Gradients: Amber (180°) -->
|
||||
<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>
|
||||
|
||||
<!-- Blade Gradients: Rose (240°) -->
|
||||
<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>
|
||||
|
||||
<!-- Blade Gradients: Indigo (300°) -->
|
||||
<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>
|
||||
|
||||
<!-- Cycling Prismatic Core Gradient for halo -->
|
||||
<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>
|
||||
|
||||
<!-- Outer aura for transparent bg -->
|
||||
<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>
|
||||
|
||||
<!-- Core transition glow (replaces hard white circle) -->
|
||||
<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>
|
||||
|
||||
<!-- Filters -->
|
||||
<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>
|
||||
|
||||
<!-- Subtle breathing aura -->
|
||||
<circle cx="200" cy="200" r="190" fill="url(#outerAura)">
|
||||
<animate attributeName="r" values="175;195;175" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- The Iris — slow continuous rotation -->
|
||||
<g transform="translate(200, 200)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="90s" repeatCount="indefinite" additive="sum"/>
|
||||
|
||||
<!-- Amethyst Blade (0°) with shimmer -->
|
||||
<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>
|
||||
<!-- Edge shimmer with color tint -->
|
||||
<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>
|
||||
|
||||
<!-- Sapphire Blade (60°) -->
|
||||
<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>
|
||||
|
||||
<!-- Emerald Blade (120°) -->
|
||||
<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>
|
||||
|
||||
<!-- Amber Blade (180°) -->
|
||||
<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>
|
||||
|
||||
<!-- Rose Blade (240°) -->
|
||||
<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>
|
||||
|
||||
<!-- Indigo Blade (300°) -->
|
||||
<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>
|
||||
|
||||
<!-- Blade tip glow points — soft colored pulses at outer tips of each blade -->
|
||||
<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>
|
||||
|
||||
<!-- THE KALEIDOSCOPE CORE - SOFT ELEGANCE FINALIST -->
|
||||
<g filter="url(#coreGlow)">
|
||||
<!-- Soft radial gradient halo with prismatic color cycling -->
|
||||
<circle r="45" fill="url(#prismatic)" opacity="0.35">
|
||||
<animate attributeName="opacity" values="0.25;0.45;0.25" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Organic core transition glow (replaces hard white 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>
|
||||
|
||||
<!-- Secondary set of 6 thicker colored rays (per brand colors) rotating slowly -->
|
||||
<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>
|
||||
|
||||
<!-- Primary set of 12 thin white rays radiating outward, alternating lengths -->
|
||||
<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>
|
||||
|
||||
<!-- Central bright white-to-prismatic circle with heavy glow and pulsing -->
|
||||
<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>
|
||||
|
||||
<!-- Inner refraction crescent -->
|
||||
<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>
|
||||
|
||||
<!-- Tiny sharp specular highlight off-center -->
|
||||
<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>
|
||||
|
||||
<!-- Additional warm specular (new — adds dimension) -->
|
||||
<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>
|
||||
|
||||
<!-- Orbiting light motes -->
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 21 KiB |
389
initial mockups/assets/loading-animations.svg
Normal file
389
initial mockups/assets/loading-animations.svg
Normal file
@@ -0,0 +1,389 @@
|
||||
<svg viewBox="0 0 700 820" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="grAmethyst" 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="grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grRose" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBCFE8"/><stop offset="100%" stop-color="#DB2777"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grIndigo" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#A5B4FC"/><stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="shimmerGrad" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#1C2240" stop-opacity="0"/>
|
||||
<stop offset="50%" stop-color="#2A3158" stop-opacity="1"/>
|
||||
<stop offset="100%" stop-color="#1C2240" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="successGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#10B981" stop-opacity="0.4"/>
|
||||
<stop offset="100%" stop-color="#10B981" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
|
||||
<filter id="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="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="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="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>
|
||||
|
||||
<style>
|
||||
text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
|
||||
.lbl { font-size: 9px; fill: #94A3B8; text-anchor: middle; font-weight: 500; }
|
||||
.section-lbl { font-size: 11px; fill: #64748B; font-weight: 600; letter-spacing: 0.08em; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect width="700" height="820" fill="#050508"/>
|
||||
<text x="350" y="28" font-size="13" font-weight="700" fill="#94A3B8" text-anchor="middle" letter-spacing="0.12em">LOADING AND ANIMATION STATES</text>
|
||||
<text x="350" y="44" font-size="9" fill="#475569" text-anchor="middle">Spinners, skeleton shimmers, Turn animation, AI thinking, success burst, breathing logo</text>
|
||||
|
||||
<!-- Row 1: Spinners -->
|
||||
<text x="24" y="74" class="section-lbl">SPINNERS</text>
|
||||
<line x1="24" y1="80" x2="670" y2="80" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- 1. Fragment Spinner — rotating diamond with trail -->
|
||||
<g transform="translate(100, 140)">
|
||||
<g filter="url(#glowMd)">
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="1.5s" repeatCount="indefinite"/>
|
||||
<!-- Trail fragments (fading) -->
|
||||
<path d="M 0,-20 L 4,-16 L 0,-12 L -4,-16 Z" fill="url(#grAmethyst)" opacity="0.9"/>
|
||||
<path d="M 0,-20 L 4,-16 L 0,-16 Z" fill="#fff" opacity="0.2"/>
|
||||
<g transform="rotate(90)">
|
||||
<path d="M 0,-20 L 4,-16 L 0,-12 L -4,-16 Z" fill="url(#grSapphire)" opacity="0.6"/>
|
||||
</g>
|
||||
<g transform="rotate(180)">
|
||||
<path d="M 0,-20 L 4,-16 L 0,-12 L -4,-16 Z" fill="url(#grEmerald)" opacity="0.3"/>
|
||||
</g>
|
||||
<g transform="rotate(270)">
|
||||
<path d="M 0,-20 L 4,-16 L 0,-12 L -4,-16 Z" fill="url(#grAmber)" opacity="0.15"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<text x="0" y="42" class="lbl">Fragment Spinner</text>
|
||||
</g>
|
||||
|
||||
<!-- 2. Iris Spinner — mini kaleidoscope rotation -->
|
||||
<g transform="translate(260, 140)">
|
||||
<g filter="url(#glowMd)">
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="3s" repeatCount="indefinite"/>
|
||||
<g style="mix-blend-mode: screen;">
|
||||
<path d="M 0,0 L 3,-1 L -2,20 L -3,1 Z" fill="url(#grAmethyst)" opacity="0.6">
|
||||
<animate attributeName="fill-opacity" values="0.4;0.7;0.4" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(60)">
|
||||
<path d="M 0,0 L 3,-1 L -2,20 L -3,1 Z" fill="url(#grSapphire)" opacity="0.5"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(120)">
|
||||
<path d="M 0,0 L 3,-1 L -2,20 L -3,1 Z" fill="url(#grEmerald)" opacity="0.5"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(180)">
|
||||
<path d="M 0,0 L 3,-1 L -2,20 L -3,1 Z" fill="url(#grAmber)" opacity="0.6"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(240)">
|
||||
<path d="M 0,0 L 3,-1 L -2,20 L -3,1 Z" fill="url(#grRose)" opacity="0.5"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(300)">
|
||||
<path d="M 0,0 L 3,-1 L -2,20 L -3,1 Z" fill="url(#grIndigo)" opacity="0.5"/>
|
||||
</g>
|
||||
</g>
|
||||
<circle r="3" fill="#fff" opacity="0.5">
|
||||
<animate attributeName="opacity" values="0.3;0.7;0.3" dur="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
<text x="0" y="42" class="lbl">Iris Spinner (mini logo)</text>
|
||||
</g>
|
||||
|
||||
<!-- 3. Dot Pulse Loader -->
|
||||
<g transform="translate(420, 140)">
|
||||
<g filter="url(#glowSm)">
|
||||
<circle cx="-16" cy="0" r="4" fill="url(#grAmethyst)" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.3;0.9;0.3" dur="1.2s" begin="0s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="3;5;3" dur="1.2s" begin="0s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="0" cy="0" r="4" fill="url(#grSapphire)" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.3;0.9;0.3" dur="1.2s" begin="0.2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="3;5;3" dur="1.2s" begin="0.2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="16" cy="0" r="4" fill="url(#grEmerald)" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.3;0.9;0.3" dur="1.2s" begin="0.4s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="3;5;3" dur="1.2s" begin="0.4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
<text x="0" y="28" class="lbl">Dot Pulse</text>
|
||||
</g>
|
||||
|
||||
<!-- 4. Fragment Orbit Loader -->
|
||||
<g transform="translate(580, 140)">
|
||||
<g filter="url(#shimmer)">
|
||||
<!-- Orbit path -->
|
||||
<circle r="18" fill="none" stroke="#1C2240" stroke-width="0.4"/>
|
||||
<!-- Orbiting fragment -->
|
||||
<g>
|
||||
<path d="M 0,-4 L 4,0 L 0,4 L -4,0 Z" fill="url(#grAmethyst)" opacity="0.8">
|
||||
<animate attributeName="opacity" values="0.5;1;0.5" dur="1.8s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<animateMotion dur="1.8s" repeatCount="indefinite" path="M0,-18 A18,18 0 1 1 -0.1,-18"/>
|
||||
</g>
|
||||
<!-- Ghost trail -->
|
||||
<g>
|
||||
<path d="M 0,-3 L 3,0 L 0,3 L -3,0 Z" fill="#8B5CF6" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="1.8s" begin="0.3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<animateMotion dur="1.8s" repeatCount="indefinite" path="M0,-18 A18,18 0 1 1 -0.1,-18" begin="0.3s"/>
|
||||
</g>
|
||||
</g>
|
||||
<text x="0" y="38" class="lbl">Fragment Orbit</text>
|
||||
</g>
|
||||
|
||||
<!-- Row 2: Skeleton Shimmers -->
|
||||
<text x="24" y="204" class="section-lbl">SKELETON SHIMMERS</text>
|
||||
<line x1="24" y1="210" x2="670" y2="210" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Text skeleton -->
|
||||
<g transform="translate(175, 250)">
|
||||
<rect x="-120" y="-8" width="160" height="10" rx="5" fill="#121628"/>
|
||||
<rect x="-120" y="-8" width="40" height="10" rx="5" fill="url(#shimmerGrad)" opacity="0.5">
|
||||
<animate attributeName="x" values="-160;120" dur="1.5s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="-120" y="8" width="200" height="10" rx="5" fill="#121628"/>
|
||||
<rect x="-120" y="8" width="40" height="10" rx="5" fill="url(#shimmerGrad)" opacity="0.5">
|
||||
<animate attributeName="x" values="-160;160" dur="1.5s" begin="0.2s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="-120" y="24" width="120" height="10" rx="5" fill="#121628"/>
|
||||
<rect x="-120" y="24" width="40" height="10" rx="5" fill="url(#shimmerGrad)" opacity="0.5">
|
||||
<animate attributeName="x" values="-160;80" dur="1.5s" begin="0.4s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<text x="-20" y="54" class="lbl">Text skeleton shimmer</text>
|
||||
</g>
|
||||
|
||||
<!-- Card skeleton -->
|
||||
<g transform="translate(500, 250)">
|
||||
<rect x="-80" y="-30" width="160" height="80" rx="10" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<!-- Image placeholder -->
|
||||
<rect x="-68" y="-20" width="40" height="40" rx="6" fill="#121628"/>
|
||||
<rect x="-68" y="-20" width="20" height="40" rx="6" fill="url(#shimmerGrad)" opacity="0.4">
|
||||
<animate attributeName="x" values="-88;-28" dur="1.5s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<!-- Text lines -->
|
||||
<rect x="-16" y="-16" width="80" height="8" rx="4" fill="#121628"/>
|
||||
<rect x="-16" y="-16" width="20" height="8" rx="4" fill="url(#shimmerGrad)" opacity="0.4">
|
||||
<animate attributeName="x" values="-36;64" dur="1.5s" begin="0.1s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="-16" y="-2" width="60" height="8" rx="4" fill="#121628"/>
|
||||
<rect x="-16" y="12" width="40" height="6" rx="3" fill="#121628"/>
|
||||
<text x="0" y="66" class="lbl">Card skeleton shimmer</text>
|
||||
</g>
|
||||
|
||||
<!-- Row 3: Turn Animation, AI Thinking -->
|
||||
<text x="24" y="344" class="section-lbl">FEATURE ANIMATIONS</text>
|
||||
<line x1="24" y1="350" x2="670" y2="350" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Turn Animation — kaleidoscope shift -->
|
||||
<g transform="translate(175, 430)">
|
||||
<g filter="url(#glowLg)">
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="60" dur="2s" repeatCount="indefinite"/>
|
||||
<g style="mix-blend-mode: screen;">
|
||||
<path d="M 0,0 L 6,-2 L -4,35 L -6,1 Z" fill="url(#grAmethyst)" opacity="0.5">
|
||||
<animate attributeName="fill-opacity" values="0.3;0.6;0.3" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(60)">
|
||||
<path d="M 0,0 L 6,-2 L -4,35 L -6,1 Z" fill="url(#grSapphire)" opacity="0.45"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(120)">
|
||||
<path d="M 0,0 L 6,-2 L -4,35 L -6,1 Z" fill="url(#grEmerald)" opacity="0.4"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(180)">
|
||||
<path d="M 0,0 L 6,-2 L -4,35 L -6,1 Z" fill="url(#grAmber)" opacity="0.5"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(240)">
|
||||
<path d="M 0,0 L 6,-2 L -4,35 L -6,1 Z" fill="url(#grRose)" opacity="0.45"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(300)">
|
||||
<path d="M 0,0 L 6,-2 L -4,35 L -6,1 Z" fill="url(#grIndigo)" opacity="0.4"/>
|
||||
</g>
|
||||
</g>
|
||||
<!-- Core pulse -->
|
||||
<circle r="8" fill="#fff" opacity="0.4" filter="url(#glowMd)">
|
||||
<animate attributeName="r" values="6;10;6" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.3;0.6;0.3" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="3" fill="#fff" opacity="0.7"/>
|
||||
</g>
|
||||
<text x="0" y="60" class="lbl">Turn Animation (reframe moment)</text>
|
||||
<text x="0" y="72" font-size="8" fill="#475569" text-anchor="middle">Rotates 60deg per cycle, pulses core</text>
|
||||
</g>
|
||||
|
||||
<!-- AI Thinking — 3 fragments oscillating -->
|
||||
<g transform="translate(475, 430)">
|
||||
<g filter="url(#glowMd)">
|
||||
<!-- Background bubble -->
|
||||
<rect x="-50" y="-20" width="100" height="40" rx="20" fill="#121628" stroke="#1C2240" stroke-width="0.6"/>
|
||||
<!-- Three oscillating fragments -->
|
||||
<g transform="translate(-20, 0)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#grAmethyst)" opacity="0.4">
|
||||
<animate attributeName="opacity" values="0.2;0.8;0.2" dur="1.5s" begin="0s" repeatCount="indefinite"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="-20,-3;-20,3;-20,-3" dur="1.5s" begin="0s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
<g transform="translate(0, 0)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#grSapphire)" opacity="0.4">
|
||||
<animate attributeName="opacity" values="0.2;0.8;0.2" dur="1.5s" begin="0.3s" repeatCount="indefinite"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="0,-3;0,3;0,-3" dur="1.5s" begin="0.3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
<g transform="translate(20, 0)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#grEmerald)" opacity="0.4">
|
||||
<animate attributeName="opacity" values="0.2;0.8;0.2" dur="1.5s" begin="0.6s" repeatCount="indefinite"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="20,-3;20,3;20,-3" dur="1.5s" begin="0.6s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
<text x="0" y="40" class="lbl">AI Thinking (Claude processing)</text>
|
||||
</g>
|
||||
|
||||
<!-- Row 4: Success Burst, Breathing Logo -->
|
||||
<text x="24" y="524" class="section-lbl">COMPLETION STATES</text>
|
||||
<line x1="24" y1="530" x2="670" y2="530" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Success Burst -->
|
||||
<g transform="translate(175, 610)">
|
||||
<g filter="url(#glowLg)">
|
||||
<!-- Burst ring -->
|
||||
<circle r="30" fill="none" stroke="#10B981" stroke-width="2" opacity="0">
|
||||
<animate attributeName="r" values="10;35;40" dur="1.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.6;0.3;0" dur="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="20" fill="none" stroke="#6EE7B7" stroke-width="1" opacity="0">
|
||||
<animate attributeName="r" values="8;25;30" dur="1.5s" begin="0.2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.4;0.2;0" dur="1.5s" begin="0.2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<!-- Central checkmark fragment -->
|
||||
<circle r="16" fill="url(#successGlow)" opacity="0.6">
|
||||
<animate attributeName="opacity" values="0.4;0.8;0.4" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<path d="M 0,-10 L 10,0 L 0,10 L -10,0 Z" fill="url(#grEmerald)" opacity="0.9"/>
|
||||
<path d="M 0,-10 L 10,0 L 0,0 Z" fill="#fff" opacity="0.2"/>
|
||||
<path d="M -4,0 L -1,4 L 5,-3" fill="none" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<!-- Particle shards -->
|
||||
<g>
|
||||
<path d="M 0,-22 L 2,-20 L 0,-18 L -2,-20 Z" fill="#6EE7B7" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.8;0" dur="1.5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<g transform="rotate(72)"><path d="M 0,-22 L 2,-20 L 0,-18 L -2,-20 Z" fill="#6EE7B7" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.7;0" dur="1.5s" begin="0.1s" repeatCount="indefinite"/>
|
||||
</path></g>
|
||||
<g transform="rotate(144)"><path d="M 0,-22 L 2,-20 L 0,-18 L -2,-20 Z" fill="#A7F3D0" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="1.5s" begin="0.2s" repeatCount="indefinite"/>
|
||||
</path></g>
|
||||
<g transform="rotate(216)"><path d="M 0,-22 L 2,-20 L 0,-18 L -2,-20 Z" fill="#6EE7B7" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.7;0" dur="1.5s" begin="0.3s" repeatCount="indefinite"/>
|
||||
</path></g>
|
||||
<g transform="rotate(288)"><path d="M 0,-22 L 2,-20 L 0,-18 L -2,-20 Z" fill="#A7F3D0" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="1.5s" begin="0.4s" repeatCount="indefinite"/>
|
||||
</path></g>
|
||||
</g>
|
||||
</g>
|
||||
<text x="0" y="56" class="lbl">Success Burst (Turn complete, goal achieved)</text>
|
||||
</g>
|
||||
|
||||
<!-- Breathing Logo -->
|
||||
<g transform="translate(475, 610)">
|
||||
<g filter="url(#glowMd)">
|
||||
<!-- Outer breathing aura -->
|
||||
<circle r="30" fill="#8B5CF6" opacity="0.04">
|
||||
<animate attributeName="r" values="25;35;25" dur="5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.02;0.08;0.02" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<!-- Mini 3-blade iris -->
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="60s" repeatCount="indefinite"/>
|
||||
<g style="mix-blend-mode: screen;">
|
||||
<path d="M 0,0 L 3,-1 L -2,22 L -3,1 Z" fill="url(#grAmethyst)" opacity="0.4">
|
||||
<animate attributeName="fill-opacity" values="0.3;0.5;0.3" dur="5s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(120)">
|
||||
<path d="M 0,0 L 3,-1 L -2,22 L -3,1 Z" fill="url(#grSapphire)" opacity="0.35"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(240)">
|
||||
<path d="M 0,0 L 3,-1 L -2,22 L -3,1 Z" fill="url(#grEmerald)" opacity="0.35"/>
|
||||
</g>
|
||||
</g>
|
||||
<circle r="4" fill="#fff" opacity="0.5" filter="url(#glowSm)">
|
||||
<animate attributeName="opacity" values="0.3;0.7;0.3" dur="5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="r" values="3;5;3" dur="5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
<text x="0" y="52" class="lbl">Breathing Logo (idle/splash)</text>
|
||||
</g>
|
||||
|
||||
<!-- Row 5: Page Transition -->
|
||||
<text x="24" y="700" class="section-lbl">TRANSITIONS</text>
|
||||
<line x1="24" y1="706" x2="670" y2="706" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Page fade transition -->
|
||||
<g transform="translate(175, 760)">
|
||||
<g filter="url(#glowSm)">
|
||||
<!-- "From" state -->
|
||||
<rect x="-55" y="-20" width="40" height="40" rx="6" fill="#121628" stroke="#1C2240" stroke-width="0.5" opacity="0.4"/>
|
||||
<text x="-35" y="2" font-size="7" fill="#475569" text-anchor="middle">From</text>
|
||||
<!-- Arrow -->
|
||||
<path d="M -8,0 L 8,0 M 4,-4 L 8,0 L 4,4" fill="none" stroke="#475569" stroke-width="0.8"/>
|
||||
<!-- "To" state -->
|
||||
<rect x="15" y="-20" width="40" height="40" rx="6" fill="#121628" stroke="#8B5CF6" stroke-width="0.5" opacity="0.8"/>
|
||||
<text x="35" y="2" font-size="7" fill="#C4B5FD" text-anchor="middle">To</text>
|
||||
</g>
|
||||
<text x="0" y="40" class="lbl">Fade + slide up transition</text>
|
||||
</g>
|
||||
|
||||
<!-- Fragment scatter transition -->
|
||||
<g transform="translate(475, 760)">
|
||||
<g filter="url(#glowSm)">
|
||||
<!-- Scattered fragments converging -->
|
||||
<path d="M -30,-15 L -26,-11 L -30,-7 L -34,-11 Z" fill="url(#grAmethyst)" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="2s" repeatCount="indefinite"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="-30,-15;0,0;-30,-15" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 25,-20 L 29,-16 L 25,-12 L 21,-16 Z" fill="url(#grSapphire)" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="2s" begin="0.2s" repeatCount="indefinite"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="25,-20;0,0;25,-20" dur="2s" begin="0.2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 20,18 L 24,22 L 20,26 L 16,22 Z" fill="url(#grEmerald)" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="2s" begin="0.4s" repeatCount="indefinite"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="20,18;0,0;20,18" dur="2s" begin="0.4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M -28,12 L -24,16 L -28,20 L -32,16 Z" fill="url(#grAmber)" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0;0.6;0" dur="2s" begin="0.6s" repeatCount="indefinite"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="-28,12;0,0;-28,12" dur="2s" begin="0.6s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<!-- Center convergence point -->
|
||||
<circle r="3" fill="#fff" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.8;0" dur="2s" begin="0.8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
<text x="0" y="40" class="lbl">Fragment scatter/converge transition</text>
|
||||
</g>
|
||||
|
||||
<text x="350" y="812" font-size="8" fill="#334155" text-anchor="middle">All animations use SMIL for broad SVG compatibility — breathing, rotation, opacity, and transform animations</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 21 KiB |
301
initial mockups/assets/patterns-kaleidoscope.svg
Normal file
301
initial mockups/assets/patterns-kaleidoscope.svg
Normal file
@@ -0,0 +1,301 @@
|
||||
<svg viewBox="0 0 700 740" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="grAmethyst" 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="grSapphire" 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="grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grRose" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBCFE8"/><stop offset="100%" stop-color="#DB2777"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grIndigo" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#A5B4FC"/><stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="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="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="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="glowLg" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="6" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Clip for circular pattern containers -->
|
||||
<clipPath id="circClip60"><circle r="60"/></clipPath>
|
||||
<clipPath id="circClip40"><circle r="40"/></clipPath>
|
||||
|
||||
<style>
|
||||
text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
|
||||
.lbl { font-size: 9px; fill: #94A3B8; text-anchor: middle; font-weight: 500; }
|
||||
.section-lbl { font-size: 11px; fill: #64748B; font-weight: 600; letter-spacing: 0.08em; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect width="700" height="740" fill="#050508"/>
|
||||
<text x="350" y="28" font-size="13" font-weight="700" fill="#94A3B8" text-anchor="middle" letter-spacing="0.12em">KALEIDOSCOPE PATTERNS</text>
|
||||
<text x="350" y="44" font-size="9" fill="#475569" text-anchor="middle">7 pattern variants for cards, Gallery, hero displays — each uses 6-fold symmetry from the logo</text>
|
||||
|
||||
<!-- Row 1: Turn, Mirror, Ritual -->
|
||||
<text x="24" y="74" class="section-lbl">FEATURE PATTERNS</text>
|
||||
<line x1="24" y1="80" x2="670" y2="80" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- 1. TURN PATTERN (Amethyst) — 6 blades rotating slowly -->
|
||||
<g transform="translate(120, 170)">
|
||||
<circle r="62" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<g clip-path="url(#circClip60)">
|
||||
<circle r="60" fill="#0A0E1A"/>
|
||||
<g filter="url(#glowMd)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="60s" repeatCount="indefinite"/>
|
||||
<g style="mix-blend-mode: screen;">
|
||||
<path d="M 0,0 L 8,-2 L -5,55 L -8,2 Z" fill="url(#grAmethyst)" 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 8,-2 L -5,55 Z" fill="#fff" opacity="0.08"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(60)">
|
||||
<path d="M 0,0 L 8,-2 L -5,55 L -8,2 Z" fill="url(#grAmethyst)" opacity="0.45"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(120)">
|
||||
<path d="M 0,0 L 8,-2 L -5,55 L -8,2 Z" fill="url(#grAmethyst)" opacity="0.4"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(180)">
|
||||
<path d="M 0,0 L 8,-2 L -5,55 L -8,2 Z" fill="url(#grAmethyst)" opacity="0.5"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(240)">
|
||||
<path d="M 0,0 L 8,-2 L -5,55 L -8,2 Z" fill="url(#grAmethyst)" opacity="0.45"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(300)">
|
||||
<path d="M 0,0 L 8,-2 L -5,55 L -8,2 Z" fill="url(#grAmethyst)" opacity="0.4"/>
|
||||
</g>
|
||||
</g>
|
||||
<!-- Core glow -->
|
||||
<circle r="12" fill="url(#coreGlow)" opacity="0.8">
|
||||
<animate attributeName="opacity" values="0.6;1;0.6" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="4" fill="#fff" opacity="0.5" filter="url(#glowSm)">
|
||||
<animate attributeName="r" values="3;5;3" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
<text x="0" y="82" class="lbl">Turn Pattern</text>
|
||||
<text x="0" y="94" font-size="8" fill="#475569" text-anchor="middle">Amethyst blades</text>
|
||||
</g>
|
||||
|
||||
<!-- 2. MIRROR PATTERN (Amber) — angular, reflective symmetry -->
|
||||
<g transform="translate(350, 170)">
|
||||
<circle r="62" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<g clip-path="url(#circClip60)">
|
||||
<circle r="60" fill="#0A0E1A"/>
|
||||
<g filter="url(#glowMd)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="90s" repeatCount="indefinite"/>
|
||||
<!-- Mirrored angular shards -->
|
||||
<g style="mix-blend-mode: screen;">
|
||||
<path d="M 0,0 L 6,-4 L 10,50 L -4,2 Z" fill="url(#grAmber)" opacity="0.45"/>
|
||||
<path d="M 0,0 L -6,-4 L -10,50 L 4,2 Z" fill="url(#grAmber)" opacity="0.4"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(120)">
|
||||
<path d="M 0,0 L 6,-4 L 10,50 L -4,2 Z" fill="url(#grAmber)" opacity="0.4"/>
|
||||
<path d="M 0,0 L -6,-4 L -10,50 L 4,2 Z" fill="url(#grAmber)" opacity="0.35"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(240)">
|
||||
<path d="M 0,0 L 6,-4 L 10,50 L -4,2 Z" fill="url(#grAmber)" opacity="0.45"/>
|
||||
<path d="M 0,0 L -6,-4 L -10,50 L 4,2 Z" fill="url(#grAmber)" opacity="0.4"/>
|
||||
</g>
|
||||
</g>
|
||||
<circle r="10" fill="url(#coreGlow)" opacity="0.7"/>
|
||||
<circle r="3" fill="#FDE68A" opacity="0.5" filter="url(#glowSm)"/>
|
||||
</g>
|
||||
<text x="0" y="82" class="lbl">Mirror Pattern</text>
|
||||
<text x="0" y="94" font-size="8" fill="#475569" text-anchor="middle">Amber shards, bilateral</text>
|
||||
</g>
|
||||
|
||||
<!-- 3. RITUAL PATTERN (Emerald) — concentric rings with fragments -->
|
||||
<g transform="translate(580, 170)">
|
||||
<circle r="62" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<g clip-path="url(#circClip60)">
|
||||
<circle r="60" fill="#0A0E1A"/>
|
||||
<g filter="url(#glowMd)">
|
||||
<!-- Concentric ring fragments -->
|
||||
<circle r="45" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.2" stroke-dasharray="6 8"/>
|
||||
<circle r="30" fill="none" stroke="#10B981" stroke-width="0.6" opacity="0.25" stroke-dasharray="4 6"/>
|
||||
<!-- 6 fragments on outer ring -->
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="45s" repeatCount="indefinite"/>
|
||||
<path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#grEmerald)" opacity="0.6"/>
|
||||
<path d="M 0,-45 L 3,-42 L 0,-42 Z" fill="#fff" opacity="0.1"/>
|
||||
<g transform="rotate(60)"><path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#grEmerald)" opacity="0.5"/></g>
|
||||
<g transform="rotate(120)"><path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#grEmerald)" opacity="0.55"/></g>
|
||||
<g transform="rotate(180)"><path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#grEmerald)" opacity="0.5"/></g>
|
||||
<g transform="rotate(240)"><path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#grEmerald)" opacity="0.6"/></g>
|
||||
<g transform="rotate(300)"><path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#grEmerald)" opacity="0.5"/></g>
|
||||
</g>
|
||||
<!-- Inner ring fragments -->
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="30s" repeatCount="indefinite"/>
|
||||
<path d="M 0,-30 L 2,-28 L 0,-26 L -2,-28 Z" fill="#6EE7B7" opacity="0.5"/>
|
||||
<g transform="rotate(90)"><path d="M 0,-30 L 2,-28 L 0,-26 L -2,-28 Z" fill="#6EE7B7" opacity="0.4"/></g>
|
||||
<g transform="rotate(180)"><path d="M 0,-30 L 2,-28 L 0,-26 L -2,-28 Z" fill="#6EE7B7" opacity="0.5"/></g>
|
||||
<g transform="rotate(270)"><path d="M 0,-30 L 2,-28 L 0,-26 L -2,-28 Z" fill="#6EE7B7" opacity="0.4"/></g>
|
||||
</g>
|
||||
</g>
|
||||
<circle r="8" fill="url(#coreGlow)" opacity="0.6"/>
|
||||
<circle r="3" fill="#6EE7B7" opacity="0.5" filter="url(#glowSm)"/>
|
||||
</g>
|
||||
<text x="0" y="82" class="lbl">Ritual Pattern</text>
|
||||
<text x="0" y="94" font-size="8" fill="#475569" text-anchor="middle">Emerald concentric rings</text>
|
||||
</g>
|
||||
|
||||
<!-- Row 2: Simple, Complex, Thumbnail, Hero -->
|
||||
<text x="24" y="310" class="section-lbl">COMPLEXITY VARIANTS</text>
|
||||
<line x1="24" y1="316" x2="670" y2="316" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- 4. SIMPLE — minimal 3-blade -->
|
||||
<g transform="translate(100, 400)">
|
||||
<circle r="42" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<g clip-path="url(#circClip40)">
|
||||
<circle r="40" fill="#0A0E1A"/>
|
||||
<g filter="url(#glowSm)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="50s" repeatCount="indefinite"/>
|
||||
<g style="mix-blend-mode: screen;">
|
||||
<path d="M 0,0 L 5,-2 L -2,36 L -5,1 Z" fill="url(#grAmethyst)" opacity="0.45"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(120)">
|
||||
<path d="M 0,0 L 5,-2 L -2,36 L -5,1 Z" fill="url(#grSapphire)" opacity="0.4"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(240)">
|
||||
<path d="M 0,0 L 5,-2 L -2,36 L -5,1 Z" fill="url(#grEmerald)" opacity="0.4"/>
|
||||
</g>
|
||||
</g>
|
||||
<circle r="3" fill="#fff" opacity="0.4" filter="url(#glowSm)"/>
|
||||
</g>
|
||||
<text x="0" y="60" class="lbl">Simple</text>
|
||||
</g>
|
||||
|
||||
<!-- 5. COMPLEX — full 6-blade prismatic -->
|
||||
<g transform="translate(270, 400)">
|
||||
<circle r="42" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<g clip-path="url(#circClip40)">
|
||||
<circle r="40" fill="#0A0E1A"/>
|
||||
<g filter="url(#glowMd)">
|
||||
<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,38 L -6,1 Z" fill="url(#grAmethyst)" opacity="0.5"/>
|
||||
<path d="M 0,0 L 6,-2 L -4,38 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,38 L -6,1 Z" fill="url(#grSapphire)" opacity="0.45"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(120)">
|
||||
<path d="M 0,0 L 6,-2 L -4,38 L -6,1 Z" fill="url(#grEmerald)" opacity="0.4"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(180)">
|
||||
<path d="M 0,0 L 6,-2 L -4,38 L -6,1 Z" fill="url(#grAmber)" opacity="0.5"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(240)">
|
||||
<path d="M 0,0 L 6,-2 L -4,38 L -6,1 Z" fill="url(#grRose)" opacity="0.45"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(300)">
|
||||
<path d="M 0,0 L 6,-2 L -4,38 L -6,1 Z" fill="url(#grIndigo)" opacity="0.4"/>
|
||||
</g>
|
||||
</g>
|
||||
<circle r="8" fill="url(#coreGlow)" opacity="0.7"/>
|
||||
<circle r="3" fill="#fff" opacity="0.6" filter="url(#glowSm)">
|
||||
<animate attributeName="r" values="2;4;2" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
<text x="0" y="60" class="lbl">Complex</text>
|
||||
</g>
|
||||
|
||||
<!-- 6. THUMBNAIL — tiny for list items -->
|
||||
<g transform="translate(420, 400)">
|
||||
<circle r="20" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="40s" repeatCount="indefinite"/>
|
||||
<g style="mix-blend-mode: screen;">
|
||||
<path d="M 420,400 L 423,399 L 418,418 L 417,401 Z" fill="url(#grAmethyst)" opacity="0.4"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(120, 420, 400)">
|
||||
<path d="M 420,400 L 423,399 L 418,418 L 417,401 Z" fill="url(#grSapphire)" opacity="0.35"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(240, 420, 400)">
|
||||
<path d="M 420,400 L 423,399 L 418,418 L 417,401 Z" fill="url(#grEmerald)" opacity="0.35"/>
|
||||
</g>
|
||||
</g>
|
||||
<circle cx="420" cy="400" r="2" fill="#fff" opacity="0.4"/>
|
||||
<text x="0" y="40" class="lbl">Thumbnail</text>
|
||||
</g>
|
||||
|
||||
<!-- 7. HERO — large, full prismatic with all effects -->
|
||||
<text x="24" y="490" class="section-lbl">HERO VARIANT</text>
|
||||
<line x1="24" y1="496" x2="670" y2="496" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<g transform="translate(350, 610)">
|
||||
<circle r="100" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<!-- Outer aura -->
|
||||
<circle r="95" fill="#8B5CF6" opacity="0.03" filter="url(#glowLg)">
|
||||
<animate attributeName="r" values="85;100;85" dur="6s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<g>
|
||||
<g filter="url(#glowLg)">
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="90s" repeatCount="indefinite"/>
|
||||
<!-- Full 6-blade iris -->
|
||||
<g style="mix-blend-mode: screen;">
|
||||
<path d="M 350,610 L 358,608 L 340,690 L 342,612 Z" fill="url(#grAmethyst)" opacity="0.55">
|
||||
<animate attributeName="fill-opacity" values="0.45;0.65;0.45" dur="4s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 350,610 L 358,608 L 340,690 Z" fill="#fff" opacity="0.08"/>
|
||||
<line x1="350" y1="610" x2="340" y2="690" stroke="#C4B5FD" stroke-width="0.8" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.3;0" dur="5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(60, 350, 610)">
|
||||
<path d="M 350,610 L 358,608 L 340,690 L 342,612 Z" fill="url(#grSapphire)" opacity="0.5"/>
|
||||
<line x1="350" y1="610" x2="340" y2="690" stroke="#93C5FD" stroke-width="0.8" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.3;0" dur="5s" begin="0.8s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(120, 350, 610)">
|
||||
<path d="M 350,610 L 358,608 L 340,690 L 342,612 Z" fill="url(#grEmerald)" opacity="0.45"/>
|
||||
<line x1="350" y1="610" x2="340" y2="690" stroke="#6EE7B7" stroke-width="0.8" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.3;0" dur="5s" begin="1.6s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(180, 350, 610)">
|
||||
<path d="M 350,610 L 358,608 L 340,690 L 342,612 Z" fill="url(#grAmber)" opacity="0.55"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(240, 350, 610)">
|
||||
<path d="M 350,610 L 358,608 L 340,690 L 342,612 Z" fill="url(#grRose)" opacity="0.5"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode: screen;" transform="rotate(300, 350, 610)">
|
||||
<path d="M 350,610 L 358,608 L 340,690 L 342,612 Z" fill="url(#grIndigo)" opacity="0.45"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<!-- Core -->
|
||||
<circle r="20" fill="url(#coreGlow)" opacity="0.8" filter="url(#glowMd)">
|
||||
<animate attributeName="opacity" values="0.6;1;0.6" dur="4s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="6" fill="#fff" opacity="0.7" filter="url(#glowSm)">
|
||||
<animate attributeName="r" values="5;8;5" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-3" cy="-3" r="2" fill="#fff" opacity="0.3"/>
|
||||
<text x="0" y="120" class="lbl">Hero Pattern — full prismatic 6-blade iris with edge shimmers, core glow, breathing animation</text>
|
||||
</g>
|
||||
|
||||
<text x="350" y="734" font-size="8" fill="#334155" text-anchor="middle">All patterns use 6-fold rotational symmetry, screen blend mode, and the soft-elegance crystalline visual language</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 16 KiB |
186
initial mockups/assets/preview-all-assets.html
Normal file
186
initial mockups/assets/preview-all-assets.html
Normal file
@@ -0,0 +1,186 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kalei SVG Asset Library — Preview</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
|
||||
body {
|
||||
background: #050508;
|
||||
color: #E2E8F0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
padding: 40px;
|
||||
}
|
||||
h1 {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
background: linear-gradient(135deg, #8B5CF6, #3B82F6, #10B981, #F59E0B, #EC4899);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.subtitle { color: #94A3B8; font-size: 14px; margin-bottom: 40px; }
|
||||
.section {
|
||||
margin-bottom: 48px;
|
||||
border-bottom: 1px solid rgba(28,34,64,0.5);
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
.section h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #A78BFA;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
.section .desc {
|
||||
font-size: 13px;
|
||||
color: #94A3B8;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.section .file-name {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #475569;
|
||||
background: #121628;
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
.asset-frame {
|
||||
background: #0A0E1A;
|
||||
border: 1px solid #1C2240;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
overflow: auto;
|
||||
max-height: 600px;
|
||||
}
|
||||
.asset-frame object, .asset-frame img {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
height: auto;
|
||||
}
|
||||
.grid-2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>KALEI ASSET LIBRARY</h1>
|
||||
<p class="subtitle">All SVG assets for the Kalei platform, derived from the soft-elegance logo visual language. 12 files, 100+ elements.</p>
|
||||
|
||||
<div class="section">
|
||||
<h2>Tab Bar Icons</h2>
|
||||
<div class="desc">5 navigation icons (Turn, Mirror, Lens, Gallery, You) in active + inactive states</div>
|
||||
<div class="file-name">icons-tab-bar.svg</div>
|
||||
<div class="asset-frame">
|
||||
<object type="image/svg+xml" data="icons-tab-bar.svg"></object>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Cognitive Distortion Icons</h2>
|
||||
<div class="desc">10 fragment type icons for Mirror feature detection</div>
|
||||
<div class="file-name">icons-distortions.svg</div>
|
||||
<div class="asset-frame">
|
||||
<object type="image/svg+xml" data="icons-distortions.svg"></object>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Action & UI Icons</h2>
|
||||
<div class="desc">30 icons for navigation, actions, status, and feature-specific use</div>
|
||||
<div class="file-name">icons-actions.svg</div>
|
||||
<div class="asset-frame">
|
||||
<object type="image/svg+xml" data="icons-actions.svg"></object>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Fragment Icons & Highlights</h2>
|
||||
<div class="desc">The core ◇ fragment in 5 sizes, 8 color states, plus highlight effects</div>
|
||||
<div class="file-name">fragment-icons.svg</div>
|
||||
<div class="asset-frame">
|
||||
<object type="image/svg+xml" data="fragment-icons.svg"></object>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Decorative Shard Elements</h2>
|
||||
<div class="desc">Background auras, floating shards, dividers, corner accents, edge shimmers</div>
|
||||
<div class="file-name">decorative-shards.svg</div>
|
||||
<div class="asset-frame">
|
||||
<object type="image/svg+xml" data="decorative-shards.svg"></object>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid-2">
|
||||
<div class="section">
|
||||
<h2>Kaleidoscope Patterns</h2>
|
||||
<div class="desc">7 pattern variants for cards, Gallery, and hero displays</div>
|
||||
<div class="file-name">patterns-kaleidoscope.svg</div>
|
||||
<div class="asset-frame">
|
||||
<object type="image/svg+xml" data="patterns-kaleidoscope.svg"></object>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Progress Indicators</h2>
|
||||
<div class="desc">Rings, bars, calendars, timers, counters</div>
|
||||
<div class="file-name">progress-indicators.svg</div>
|
||||
<div class="asset-frame">
|
||||
<object type="image/svg+xml" data="progress-indicators.svg"></object>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Evidence Wall</h2>
|
||||
<div class="desc">Tile shapes, mosaic compositions (early/mid/full), empty state</div>
|
||||
<div class="file-name">evidence-wall.svg</div>
|
||||
<div class="asset-frame">
|
||||
<object type="image/svg+xml" data="evidence-wall.svg"></object>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Loading & Animation States</h2>
|
||||
<div class="desc">Spinners, skeleton shimmers, Turn animation, AI thinking, success burst</div>
|
||||
<div class="file-name">loading-animations.svg</div>
|
||||
<div class="asset-frame">
|
||||
<object type="image/svg+xml" data="loading-animations.svg"></object>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Device Chrome</h2>
|
||||
<div class="desc">Status bar, tab bar, nav header, keyboard, device frame, modal scrim, toast</div>
|
||||
<div class="file-name">device-chrome.svg</div>
|
||||
<div class="asset-frame">
|
||||
<object type="image/svg+xml" data="device-chrome.svg"></object>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Spectrum Visualizations</h2>
|
||||
<div class="desc">The River, Your Glass, Turn Impact, Rhythm Detection, Growth Trajectory</div>
|
||||
<div class="file-name">spectrum-visualizations.svg</div>
|
||||
<div class="asset-frame">
|
||||
<object type="image/svg+xml" data="spectrum-visualizations.svg"></object>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; padding: 40px 0; color: #475569; font-size: 12px;">
|
||||
Kalei Asset Library — 12 SVG files, 100+ elements, 1 CSS design system
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
257
initial mockups/assets/progress-indicators.svg
Normal file
257
initial mockups/assets/progress-indicators.svg
Normal file
@@ -0,0 +1,257 @@
|
||||
<svg viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/><stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="prismaticH" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#3B82F6"><animate attributeName="stop-color" values="#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6;#3B82F6" dur="8s" repeatCount="indefinite"/></stop>
|
||||
</linearGradient>
|
||||
|
||||
<filter id="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="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="glowLg" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="6" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<style>
|
||||
text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
|
||||
.lbl { font-size: 9px; fill: #94A3B8; text-anchor: middle; font-weight: 500; }
|
||||
.section-lbl { font-size: 11px; fill: #64748B; font-weight: 600; letter-spacing: 0.08em; }
|
||||
.val { font-size: 18px; fill: #E2E8F0; font-weight: 700; text-anchor: middle; }
|
||||
.val-sm { font-size: 8px; fill: #64748B; text-anchor: middle; font-weight: 500; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect width="700" height="700" fill="#050508"/>
|
||||
<text x="350" y="28" font-size="13" font-weight="700" fill="#94A3B8" text-anchor="middle" letter-spacing="0.12em">PROGRESS INDICATORS</text>
|
||||
<text x="350" y="44" font-size="9" fill="#475569" text-anchor="middle">Rings, bars, calendars, timers, counters — all with prismatic styling</text>
|
||||
|
||||
<!-- Row 1: Large Ring, Small Ring -->
|
||||
<text x="24" y="74" class="section-lbl">PROGRESS RINGS</text>
|
||||
<line x1="24" y1="80" x2="670" y2="80" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Large Ring (72% complete) -->
|
||||
<g transform="translate(140, 160)">
|
||||
<!-- Background track -->
|
||||
<circle r="50" fill="none" stroke="#1C2240" stroke-width="6" opacity="0.5"/>
|
||||
<!-- Progress arc — 72% = ~259 degrees -->
|
||||
<g filter="url(#glowMd)">
|
||||
<circle r="50" fill="none" stroke="url(#grAmethyst)" stroke-width="6" stroke-linecap="round"
|
||||
stroke-dasharray="226 314" stroke-dashoffset="0" transform="rotate(-90)">
|
||||
<animate attributeName="stroke-dasharray" values="0 314;226 314" dur="1.5s" fill="freeze"/>
|
||||
</circle>
|
||||
</g>
|
||||
<!-- End cap glow -->
|
||||
<circle cx="0" cy="0" r="3" fill="#A78BFA" opacity="0.6" filter="url(#glowSm)"
|
||||
transform="rotate(169) translate(50, 0)"/>
|
||||
<!-- Center text -->
|
||||
<text x="0" y="4" class="val">72%</text>
|
||||
<text x="0" y="16" class="val-sm">COMPLETE</text>
|
||||
<text x="0" y="74" class="lbl">Large Ring (Lens progress)</text>
|
||||
</g>
|
||||
|
||||
<!-- Small Ring (3/6 steps) -->
|
||||
<g transform="translate(340, 160)">
|
||||
<circle r="28" fill="none" stroke="#1C2240" stroke-width="4" opacity="0.5"/>
|
||||
<g filter="url(#glowSm)">
|
||||
<circle r="28" fill="none" stroke="url(#grEmerald)" stroke-width="4" stroke-linecap="round"
|
||||
stroke-dasharray="88 176" stroke-dashoffset="0" transform="rotate(-90)"/>
|
||||
</g>
|
||||
<text x="0" y="2" font-size="13" fill="#E2E8F0" font-weight="700" text-anchor="middle">3/6</text>
|
||||
<text x="0" y="14" class="val-sm">STEPS</text>
|
||||
<text x="0" y="52" class="lbl">Small Ring (step counter)</text>
|
||||
</g>
|
||||
|
||||
<!-- Prismatic Ring (special/celebration) -->
|
||||
<g transform="translate(540, 160)">
|
||||
<circle r="40" fill="none" stroke="#1C2240" stroke-width="5" opacity="0.4"/>
|
||||
<g filter="url(#glowMd)">
|
||||
<circle r="40" fill="none" stroke="url(#prismaticH)" stroke-width="5" stroke-linecap="round"
|
||||
stroke-dasharray="251 251" transform="rotate(-90)"/>
|
||||
</g>
|
||||
<!-- Orbiting mote -->
|
||||
<circle r="2" fill="#fff" opacity="0" filter="url(#glowSm)">
|
||||
<animateMotion dur="3s" repeatCount="indefinite" path="M0,-40 A40,40 0 1 1 -0.1,-40"/>
|
||||
<animate attributeName="opacity" values="0;0.8;0;0" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<text x="0" y="4" class="val">100</text>
|
||||
<text x="0" y="16" class="val-sm">COMPLETE</text>
|
||||
<text x="0" y="64" class="lbl">Prismatic Ring (100% celebration)</text>
|
||||
</g>
|
||||
|
||||
<!-- Row 2: Linear Bar, Step Dots -->
|
||||
<text x="24" y="274" class="section-lbl">LINEAR INDICATORS</text>
|
||||
<line x1="24" y1="280" x2="670" y2="280" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Linear Progress Bar -->
|
||||
<g transform="translate(350, 310)">
|
||||
<!-- Track -->
|
||||
<rect x="-250" y="-4" width="500" height="8" rx="4" fill="#1C2240" opacity="0.6"/>
|
||||
<!-- Fill -->
|
||||
<g filter="url(#glowSm)">
|
||||
<rect x="-250" y="-4" width="325" height="8" rx="4" fill="url(#grAmethyst)" opacity="0.8">
|
||||
<animate attributeName="width" values="0;325" dur="1.2s" fill="freeze"/>
|
||||
</rect>
|
||||
</g>
|
||||
<!-- Shimmer sweep -->
|
||||
<rect x="-250" y="-4" width="40" height="8" rx="4" fill="#fff" opacity="0">
|
||||
<animate attributeName="opacity" values="0;0.15;0" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="x" values="-250;75" dur="2s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<!-- End glow -->
|
||||
<circle cx="75" cy="0" r="4" fill="#A78BFA" opacity="0.4" filter="url(#glowSm)"/>
|
||||
<text x="-250" y="-14" font-size="9" fill="#94A3B8" font-weight="500">Progress</text>
|
||||
<text x="250" y="-14" font-size="9" fill="#C4B5FD" font-weight="600" text-anchor="end">65%</text>
|
||||
<text x="0" y="28" class="lbl">Linear bar with shimmer sweep</text>
|
||||
</g>
|
||||
|
||||
<!-- Step Dots (5 steps, 3 complete) -->
|
||||
<g transform="translate(350, 380)">
|
||||
<!-- Connecting line -->
|
||||
<line x1="-120" y1="0" x2="120" y2="0" stroke="#1C2240" stroke-width="1.5"/>
|
||||
<!-- Filled progress line -->
|
||||
<line x1="-120" y1="0" x2="0" y2="0" stroke="url(#grEmerald)" stroke-width="1.5" filter="url(#glowSm)"/>
|
||||
<!-- Step 1: complete -->
|
||||
<g transform="translate(-120, 0)">
|
||||
<circle r="8" fill="url(#grEmerald)" opacity="0.9" filter="url(#glowSm)"/>
|
||||
<path d="M -3,0 L -1,3 L 4,-2" fill="none" stroke="#fff" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<!-- Step 2: complete -->
|
||||
<g transform="translate(-60, 0)">
|
||||
<circle r="8" fill="url(#grEmerald)" opacity="0.9" filter="url(#glowSm)"/>
|
||||
<path d="M -3,0 L -1,3 L 4,-2" fill="none" stroke="#fff" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<!-- Step 3: complete -->
|
||||
<g transform="translate(0, 0)">
|
||||
<circle r="8" fill="url(#grEmerald)" opacity="0.9" filter="url(#glowSm)"/>
|
||||
<path d="M -3,0 L -1,3 L 4,-2" fill="none" stroke="#fff" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<!-- Step 4: current -->
|
||||
<g transform="translate(60, 0)">
|
||||
<circle r="8" fill="#121628" stroke="#10B981" stroke-width="1.5"/>
|
||||
<circle r="3" fill="#10B981" opacity="0.6">
|
||||
<animate attributeName="opacity" values="0.4;0.8;0.4" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
<!-- Step 5: future -->
|
||||
<g transform="translate(120, 0)">
|
||||
<circle r="8" fill="#121628" stroke="#1C2240" stroke-width="1"/>
|
||||
</g>
|
||||
<text x="0" y="28" class="lbl">Step dots (Lens 6-step flow)</text>
|
||||
</g>
|
||||
|
||||
<!-- Row 3: Streak Calendar, Ritual Bar -->
|
||||
<text x="24" y="434" class="section-lbl">STREAK AND RITUAL</text>
|
||||
<line x1="24" y1="440" x2="670" y2="440" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Streak Calendar (7-day week) -->
|
||||
<g transform="translate(175, 500)">
|
||||
<!-- Days of week -->
|
||||
<g font-size="8" fill="#475569" text-anchor="middle" font-weight="500">
|
||||
<text x="-90" y="-26">M</text><text x="-60" y="-26">T</text><text x="-30" y="-26">W</text>
|
||||
<text x="0" y="-26">T</text><text x="30" y="-26">F</text><text x="60" y="-26">S</text><text x="90" y="-26">S</text>
|
||||
</g>
|
||||
<!-- Day circles -->
|
||||
<!-- Mon: complete -->
|
||||
<circle cx="-90" cy="0" r="12" fill="url(#grAmber)" opacity="0.8" filter="url(#glowSm)"/>
|
||||
<path d="M -93,0 L -91,3 L -86,-2" fill="none" stroke="#fff" stroke-width="1" stroke-linecap="round" transform="translate(0,0)"/>
|
||||
<!-- Tue: complete -->
|
||||
<circle cx="-60" cy="0" r="12" fill="url(#grAmber)" opacity="0.8" filter="url(#glowSm)"/>
|
||||
<path d="M -63,0 L -61,3 L -56,-2" fill="none" stroke="#fff" stroke-width="1" stroke-linecap="round"/>
|
||||
<!-- Wed: complete -->
|
||||
<circle cx="-30" cy="0" r="12" fill="url(#grAmber)" opacity="0.8" filter="url(#glowSm)"/>
|
||||
<path d="M -33,0 L -31,3 L -26,-2" fill="none" stroke="#fff" stroke-width="1" stroke-linecap="round"/>
|
||||
<!-- Thu: today, in progress -->
|
||||
<circle cx="0" cy="0" r="12" fill="#121628" stroke="#F59E0B" stroke-width="1.5"/>
|
||||
<circle cx="0" cy="0" r="4" fill="#F59E0B" opacity="0.5">
|
||||
<animate attributeName="opacity" values="0.3;0.7;0.3" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<!-- Fri-Sun: future -->
|
||||
<circle cx="30" cy="0" r="12" fill="#121628" stroke="#1C2240" stroke-width="0.8"/>
|
||||
<circle cx="60" cy="0" r="12" fill="#121628" stroke="#1C2240" stroke-width="0.8"/>
|
||||
<circle cx="90" cy="0" r="12" fill="#121628" stroke="#1C2240" stroke-width="0.8"/>
|
||||
<!-- Streak count -->
|
||||
<g filter="url(#glowSm)">
|
||||
<path d="M 0,22 L 3,28 L 0,26 L -3,28 Z" fill="#F59E0B" opacity="0.7"/>
|
||||
<text x="0" y="42" font-size="10" fill="#FDE68A" text-anchor="middle" font-weight="600">3 day streak</text>
|
||||
</g>
|
||||
<text x="0" y="58" class="lbl">Streak Calendar (weekly view)</text>
|
||||
</g>
|
||||
|
||||
<!-- Ritual Progress Bar (3 of 5 steps in a ritual sequence) -->
|
||||
<g transform="translate(500, 500)">
|
||||
<!-- Ritual steps as connected fragments -->
|
||||
<g filter="url(#glowSm)">
|
||||
<!-- Step 1: done -->
|
||||
<path d="M -80,0 L -72,-8 L -64,0 L -72,8 Z" fill="url(#grEmerald)" opacity="0.8"/>
|
||||
<path d="M -72,-8 L -64,0 L -72,0 Z" fill="#fff" opacity="0.12"/>
|
||||
<line x1="-64" y1="0" x2="-48" y2="0" stroke="#10B981" stroke-width="1" opacity="0.5"/>
|
||||
<!-- Step 2: done -->
|
||||
<path d="M -48,0 L -40,-8 L -32,0 L -40,8 Z" fill="url(#grEmerald)" opacity="0.8"/>
|
||||
<line x1="-32" y1="0" x2="-16" y2="0" stroke="#10B981" stroke-width="1" opacity="0.5"/>
|
||||
<!-- Step 3: done -->
|
||||
<path d="M -16,0 L -8,-8 L 0,0 L -8,8 Z" fill="url(#grEmerald)" opacity="0.8"/>
|
||||
<line x1="0" y1="0" x2="16" y2="0" stroke="#1C2240" stroke-width="1"/>
|
||||
<!-- Step 4: current -->
|
||||
<path d="M 16,0 L 24,-8 L 32,0 L 24,8 Z" fill="#121628" stroke="#10B981" stroke-width="1"/>
|
||||
<circle cx="24" cy="0" r="2" fill="#10B981" opacity="0.5">
|
||||
<animate attributeName="opacity" values="0.3;0.8;0.3" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<line x1="32" y1="0" x2="48" y2="0" stroke="#1C2240" stroke-width="1"/>
|
||||
<!-- Step 5: future -->
|
||||
<path d="M 48,0 L 56,-8 L 64,0 L 56,8 Z" fill="none" stroke="#1C2240" stroke-width="0.8"/>
|
||||
</g>
|
||||
<text x="-8" y="28" class="lbl">Ritual Bar (fragment-shaped steps)</text>
|
||||
</g>
|
||||
|
||||
<!-- Row 4: Timer, Evidence Counter -->
|
||||
<text x="24" y="584" class="section-lbl">TIMER AND COUNTERS</text>
|
||||
<line x1="24" y1="590" x2="670" y2="590" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Timer Ring -->
|
||||
<g transform="translate(175, 640)">
|
||||
<circle r="30" fill="none" stroke="#1C2240" stroke-width="3" opacity="0.4"/>
|
||||
<g filter="url(#glowSm)">
|
||||
<circle r="30" fill="none" stroke="url(#grAmethyst)" stroke-width="3" stroke-linecap="round"
|
||||
stroke-dasharray="141 188" transform="rotate(-90)">
|
||||
<animate attributeName="stroke-dasharray" values="188 188;0 188" dur="60s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
<text x="0" y="2" font-size="14" fill="#E2E8F0" font-weight="600" text-anchor="middle">2:45</text>
|
||||
<text x="0" y="52" class="lbl">Timer Ring (Rehearsal countdown)</text>
|
||||
</g>
|
||||
|
||||
<!-- Evidence Counter -->
|
||||
<g transform="translate(450, 640)">
|
||||
<g filter="url(#glowMd)">
|
||||
<rect x="-60" y="-24" width="120" height="48" rx="12" fill="#121628" stroke="#1C2240" stroke-width="0.8"/>
|
||||
<!-- Inner glow -->
|
||||
<rect x="-58" y="-22" width="116" height="44" rx="10" fill="#3B82F6" opacity="0.04"/>
|
||||
<!-- Fragment icon -->
|
||||
<g transform="translate(-32, 0)">
|
||||
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#grSapphire)" opacity="0.8" filter="url(#glowSm)"/>
|
||||
<path d="M 0,-8 L 8,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
</g>
|
||||
<!-- Count -->
|
||||
<text x="14" y="4" font-size="16" fill="#E2E8F0" font-weight="700" text-anchor="middle">24</text>
|
||||
<text x="14" y="16" font-size="7" fill="#64748B" text-anchor="middle" font-weight="500">EVIDENCE</text>
|
||||
</g>
|
||||
<text x="0" y="48" class="lbl">Evidence Counter (Evidence Wall)</text>
|
||||
</g>
|
||||
|
||||
<text x="350" y="692" font-size="8" fill="#334155" text-anchor="middle">All indicators use jewel tone gradients, glow filters, and animated transitions from the Kalei design system</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 KiB |
261
initial mockups/assets/spectrum-visualizations.svg
Normal file
261
initial mockups/assets/spectrum-visualizations.svg
Normal file
@@ -0,0 +1,261 @@
|
||||
<svg viewBox="0 0 700 900" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="grAmethyst" 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="grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grRose" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBCFE8"/><stop offset="100%" stop-color="#DB2777"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grIndigo" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#A5B4FC"/><stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
<!-- River flow gradient -->
|
||||
<linearGradient id="riverGrad" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.6"/>
|
||||
<stop offset="30%" stop-color="#3B82F6" stop-opacity="0.5"/>
|
||||
<stop offset="60%" stop-color="#10B981" stop-opacity="0.4"/>
|
||||
<stop offset="100%" stop-color="#F59E0B" stop-opacity="0.6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="riverGradFill" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.15"/>
|
||||
<stop offset="30%" stop-color="#3B82F6" stop-opacity="0.1"/>
|
||||
<stop offset="60%" stop-color="#10B981" stop-opacity="0.08"/>
|
||||
<stop offset="100%" stop-color="#F59E0B" stop-opacity="0.12"/>
|
||||
</linearGradient>
|
||||
|
||||
<filter id="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="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="glowLg" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<style>
|
||||
text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
|
||||
.lbl { font-size: 9px; fill: #94A3B8; text-anchor: middle; font-weight: 500; }
|
||||
.section-lbl { font-size: 11px; fill: #64748B; font-weight: 600; letter-spacing: 0.08em; }
|
||||
.axis-lbl { font-size: 7px; fill: #475569; font-weight: 500; }
|
||||
.data-lbl { font-size: 8px; fill: #94A3B8; font-weight: 500; text-anchor: middle; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect width="700" height="900" fill="#050508"/>
|
||||
<text x="350" y="28" font-size="13" font-weight="700" fill="#94A3B8" text-anchor="middle" letter-spacing="0.12em">SPECTRUM VISUALIZATIONS</text>
|
||||
<text x="350" y="44" font-size="9" fill="#475569" text-anchor="middle">5 analytics views: The River, Your Glass, Turn Impact, Rhythm Detection, Growth Trajectory</text>
|
||||
|
||||
<!-- 1. THE RIVER — emotional flow over time -->
|
||||
<text x="24" y="74" class="section-lbl">THE RIVER</text>
|
||||
<line x1="24" y1="80" x2="670" y2="80" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<g transform="translate(350, 150)">
|
||||
<rect x="-280" y="-50" width="560" height="100" rx="8" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<!-- X axis labels -->
|
||||
<g class="axis-lbl" text-anchor="middle">
|
||||
<text x="-240" y="60">Mon</text><text x="-160" y="60">Tue</text><text x="-80" y="60">Wed</text>
|
||||
<text x="0" y="60">Thu</text><text x="80" y="60">Fri</text><text x="160" y="60">Sat</text><text x="240" y="60">Sun</text>
|
||||
</g>
|
||||
<!-- River band (area chart) -->
|
||||
<g filter="url(#glowSm)">
|
||||
<!-- Upper bound -->
|
||||
<path d="M -260,-20 C -200,-30 -140,5 -80,-10 C -20,-25 40,10 100,-5 C 160,-20 220,0 260,-15"
|
||||
fill="none" stroke="url(#riverGrad)" stroke-width="1.5" opacity="0.8"/>
|
||||
<!-- Lower bound -->
|
||||
<path d="M -260,15 C -200,25 -140,5 -80,20 C -20,30 40,10 100,18 C 160,25 220,8 260,20"
|
||||
fill="none" stroke="url(#riverGrad)" stroke-width="1" opacity="0.5"/>
|
||||
<!-- Fill between -->
|
||||
<path d="M -260,-20 C -200,-30 -140,5 -80,-10 C -20,-25 40,10 100,-5 C 160,-20 220,0 260,-15
|
||||
L 260,20 C 220,8 160,25 100,18 C 40,10 -20,30 -80,20 C -140,5 -200,25 -260,15 Z"
|
||||
fill="url(#riverGradFill)" opacity="0.6"/>
|
||||
<!-- Data point fragments -->
|
||||
<g>
|
||||
<path d="M -240,-18 L -237,-15 L -240,-12 L -243,-15 Z" fill="url(#grAmethyst)" opacity="0.7"/>
|
||||
<path d="M -160,8 L -157,11 L -160,14 L -163,11 Z" fill="url(#grSapphire)" opacity="0.6"/>
|
||||
<path d="M -80,-8 L -77,-5 L -80,-2 L -83,-5 Z" fill="url(#grEmerald)" opacity="0.7"/>
|
||||
<path d="M 0,-22 L 3,-19 L 0,-16 L -3,-19 Z" fill="url(#grAmethyst)" opacity="0.8"/>
|
||||
<path d="M 80,8 L 83,11 L 80,14 L 77,11 Z" fill="url(#grAmber)" opacity="0.6"/>
|
||||
<path d="M 160,-18 L 163,-15 L 160,-12 L 157,-15 Z" fill="url(#grRose)" opacity="0.7"/>
|
||||
<path d="M 240,-12 L 243,-9 L 240,-6 L 237,-9 Z" fill="url(#grIndigo)" opacity="0.7"/>
|
||||
</g>
|
||||
</g>
|
||||
<text x="0" y="76" class="lbl">The River — emotional flow over time, prismatic gradient band</text>
|
||||
</g>
|
||||
|
||||
<!-- 2. YOUR GLASS — distortion distribution -->
|
||||
<text x="24" y="244" class="section-lbl">YOUR GLASS</text>
|
||||
<line x1="24" y1="250" x2="670" y2="250" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<g transform="translate(200, 360)">
|
||||
<!-- Radar/spider chart -->
|
||||
<g opacity="0.15">
|
||||
<!-- Axis lines -->
|
||||
<line x1="0" y1="0" x2="0" y2="-70" stroke="#475569" stroke-width="0.5"/>
|
||||
<line x1="0" y1="0" x2="61" y2="-35" stroke="#475569" stroke-width="0.5"/>
|
||||
<line x1="0" y1="0" x2="61" y2="35" stroke="#475569" stroke-width="0.5"/>
|
||||
<line x1="0" y1="0" x2="0" y2="70" stroke="#475569" stroke-width="0.5"/>
|
||||
<line x1="0" y1="0" x2="-61" y2="35" stroke="#475569" stroke-width="0.5"/>
|
||||
<line x1="0" y1="0" x2="-61" y2="-35" stroke="#475569" stroke-width="0.5"/>
|
||||
<!-- Concentric hex guides -->
|
||||
<path d="M 0,-35 L 30,-17 L 30,17 L 0,35 L -30,17 L -30,-17 Z" fill="none" stroke="#475569" stroke-width="0.3"/>
|
||||
<path d="M 0,-70 L 61,-35 L 61,35 L 0,70 L -61,35 L -61,-35 Z" fill="none" stroke="#475569" stroke-width="0.3"/>
|
||||
</g>
|
||||
<!-- Data shape (user's distortion profile) -->
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M 0,-55 L 40,-20 L 50,25 L 10,50 L -45,30 L -35,-25 Z"
|
||||
fill="#F59E0B" fill-opacity="0.08" stroke="#F59E0B" stroke-width="1.2" opacity="0.6"/>
|
||||
<!-- Vertex fragments -->
|
||||
<path d="M 0,-55 L 3,-52 L 0,-49 L -3,-52 Z" fill="url(#grAmber)" opacity="0.8" filter="url(#glowSm)"/>
|
||||
<path d="M 40,-20 L 43,-17 L 40,-14 L 37,-17 Z" fill="url(#grAmber)" opacity="0.7" filter="url(#glowSm)"/>
|
||||
<path d="M 50,25 L 53,28 L 50,31 L 47,28 Z" fill="url(#grAmber)" opacity="0.7" filter="url(#glowSm)"/>
|
||||
<path d="M 10,50 L 13,53 L 10,56 L 7,53 Z" fill="url(#grAmber)" opacity="0.6" filter="url(#glowSm)"/>
|
||||
<path d="M -45,30 L -42,33 L -45,36 L -48,33 Z" fill="url(#grAmber)" opacity="0.7" filter="url(#glowSm)"/>
|
||||
<path d="M -35,-25 L -32,-22 L -35,-19 L -38,-22 Z" fill="url(#grAmber)" opacity="0.7" filter="url(#glowSm)"/>
|
||||
</g>
|
||||
<!-- Labels -->
|
||||
<g class="data-lbl">
|
||||
<text x="0" y="-78">Catastrophizing</text>
|
||||
<text x="72" y="-20">Black-White</text>
|
||||
<text x="72" y="30">Mind Reading</text>
|
||||
<text x="0" y="68">Fortune Telling</text>
|
||||
<text x="-72" y="30">Personalization</text>
|
||||
<text x="-72" y="-20">Should Stmts</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- 3. TURN IMPACT — before/after bar chart -->
|
||||
<g transform="translate(530, 360)">
|
||||
<text x="0" y="-88" class="section-lbl" text-anchor="middle">TURN IMPACT</text>
|
||||
<!-- Bar pairs (before/after) -->
|
||||
<g filter="url(#glowSm)">
|
||||
<!-- Pair 1: Distress -->
|
||||
<rect x="-50" y="-40" width="14" height="40" rx="2" fill="#EF4444" opacity="0.4"/>
|
||||
<rect x="-34" y="-60" width="14" height="60" rx="2" fill="url(#grEmerald)" opacity="0.6"/>
|
||||
<text x="-36" y="14" class="data-lbl">Distress</text>
|
||||
|
||||
<!-- Pair 2: Clarity -->
|
||||
<rect x="0" y="-25" width="14" height="25" rx="2" fill="#EF4444" opacity="0.4"/>
|
||||
<rect x="16" y="-55" width="14" height="55" rx="2" fill="url(#grEmerald)" opacity="0.6"/>
|
||||
<text x="14" y="14" class="data-lbl">Clarity</text>
|
||||
|
||||
<!-- Pair 3: Hope -->
|
||||
<rect x="50" y="-20" width="14" height="20" rx="2" fill="#EF4444" opacity="0.4"/>
|
||||
<rect x="66" y="-50" width="14" height="50" rx="2" fill="url(#grEmerald)" opacity="0.6"/>
|
||||
<text x="64" y="14" class="data-lbl">Hope</text>
|
||||
</g>
|
||||
<!-- Legend -->
|
||||
<g transform="translate(0, 30)">
|
||||
<rect x="-30" y="0" width="8" height="8" rx="1" fill="#EF4444" opacity="0.4"/>
|
||||
<text x="-18" y="7" font-size="7" fill="#94A3B8">Before</text>
|
||||
<rect x="20" y="0" width="8" height="8" rx="1" fill="#10B981" opacity="0.6"/>
|
||||
<text x="32" y="7" font-size="7" fill="#94A3B8">After</text>
|
||||
</g>
|
||||
<text x="10" y="56" class="lbl">Turn Impact — before/after comparison</text>
|
||||
</g>
|
||||
|
||||
<!-- 4. RHYTHM DETECTION -->
|
||||
<text x="24" y="470" class="section-lbl">RHYTHM DETECTION</text>
|
||||
<line x1="24" y1="476" x2="670" y2="476" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<g transform="translate(350, 560)">
|
||||
<rect x="-280" y="-50" width="560" height="100" rx="8" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<!-- Time axis -->
|
||||
<g class="axis-lbl" text-anchor="middle">
|
||||
<text x="-220" y="60">6am</text><text x="-110" y="60">9am</text><text x="0" y="60">12pm</text>
|
||||
<text x="110" y="60">3pm</text><text x="220" y="60">6pm</text>
|
||||
</g>
|
||||
<!-- Activity dots (when user engages) -->
|
||||
<g filter="url(#glowSm)">
|
||||
<!-- Morning cluster -->
|
||||
<circle cx="-200" cy="-10" r="4" fill="url(#grAmethyst)" opacity="0.3"/>
|
||||
<circle cx="-180" cy="-15" r="5" fill="url(#grAmethyst)" opacity="0.5"/>
|
||||
<circle cx="-160" cy="-20" r="6" fill="url(#grAmethyst)" opacity="0.7">
|
||||
<animate attributeName="opacity" values="0.5;0.8;0.5" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="-140" cy="-12" r="4" fill="url(#grAmethyst)" opacity="0.4"/>
|
||||
<!-- Midday lull -->
|
||||
<circle cx="-40" cy="5" r="3" fill="url(#grSapphire)" opacity="0.2"/>
|
||||
<circle cx="0" cy="0" r="3" fill="url(#grSapphire)" opacity="0.25"/>
|
||||
<!-- Afternoon peak -->
|
||||
<circle cx="100" cy="-25" r="7" fill="url(#grEmerald)" opacity="0.7">
|
||||
<animate attributeName="opacity" values="0.5;0.8;0.5" dur="3.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="120" cy="-18" r="5" fill="url(#grEmerald)" opacity="0.5"/>
|
||||
<circle cx="140" cy="-10" r="4" fill="url(#grEmerald)" opacity="0.4"/>
|
||||
<!-- Evening -->
|
||||
<circle cx="200" cy="10" r="4" fill="url(#grAmber)" opacity="0.3"/>
|
||||
<circle cx="220" cy="5" r="5" fill="url(#grAmber)" opacity="0.4"/>
|
||||
</g>
|
||||
<!-- Pattern line (smoothed) -->
|
||||
<path d="M -260,10 C -200,-10 -140,-20 -80,0 C -20,15 40,10 100,-25 C 160,-10 220,5 260,10"
|
||||
fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3" stroke-dasharray="4 4"/>
|
||||
<!-- Peak labels -->
|
||||
<g filter="url(#glowSm)">
|
||||
<path d="M -160,-32 L -157,-29 L -160,-26 L -163,-29 Z" fill="url(#grAmethyst)" opacity="0.8"/>
|
||||
<text x="-160" y="-38" font-size="7" fill="#C4B5FD" text-anchor="middle" font-weight="500">Morning Peak</text>
|
||||
</g>
|
||||
<g filter="url(#glowSm)">
|
||||
<path d="M 100,-37 L 103,-34 L 100,-31 L 97,-34 Z" fill="url(#grEmerald)" opacity="0.8"/>
|
||||
<text x="100" y="-43" font-size="7" fill="#6EE7B7" text-anchor="middle" font-weight="500">Afternoon Peak</text>
|
||||
</g>
|
||||
<text x="0" y="76" class="lbl">Rhythm Detection — engagement patterns over time of day, sized by intensity</text>
|
||||
</g>
|
||||
|
||||
<!-- 5. GROWTH TRAJECTORY -->
|
||||
<text x="24" y="660" class="section-lbl">GROWTH TRAJECTORY</text>
|
||||
<line x1="24" y1="666" x2="670" y2="666" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<g transform="translate(350, 770)">
|
||||
<rect x="-280" y="-70" width="560" height="140" rx="8" fill="#0A0E1A" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<!-- Axes -->
|
||||
<line x1="-260" y1="55" x2="260" y2="55" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<line x1="-260" y1="55" x2="-260" y2="-55" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<!-- Month labels -->
|
||||
<g class="axis-lbl" text-anchor="middle">
|
||||
<text x="-200" y="68">Jan</text><text x="-110" y="68">Feb</text><text x="-20" y="68">Mar</text>
|
||||
<text x="70" y="68">Apr</text><text x="160" y="68">May</text><text x="240" y="68">Jun</text>
|
||||
</g>
|
||||
<!-- Growth line -->
|
||||
<g filter="url(#glowMd)">
|
||||
<path d="M -220,40 C -180,35 -140,20 -80,10 C -20,0 40,-15 100,-25 C 160,-35 200,-40 240,-50"
|
||||
fill="none" stroke="url(#grAmethyst)" stroke-width="2" stroke-linecap="round" opacity="0.8"/>
|
||||
<!-- Fill under curve -->
|
||||
<path d="M -220,40 C -180,35 -140,20 -80,10 C -20,0 40,-15 100,-25 C 160,-35 200,-40 240,-50 L 240,55 L -220,55 Z"
|
||||
fill="#8B5CF6" opacity="0.04"/>
|
||||
<!-- Data point fragments -->
|
||||
<path d="M -220,40 L -217,43 L -220,46 L -223,43 Z" fill="url(#grAmethyst)" opacity="0.6" filter="url(#glowSm)"/>
|
||||
<path d="M -110,18 L -107,21 L -110,24 L -113,21 Z" fill="url(#grAmethyst)" opacity="0.7" filter="url(#glowSm)"/>
|
||||
<path d="M -20,4 L -17,7 L -20,10 L -23,7 Z" fill="url(#grAmethyst)" opacity="0.7" filter="url(#glowSm)"/>
|
||||
<path d="M 70,-18 L 73,-15 L 70,-12 L 67,-15 Z" fill="url(#grAmethyst)" opacity="0.8" filter="url(#glowSm)"/>
|
||||
<path d="M 160,-36 L 163,-33 L 160,-30 L 157,-33 Z" fill="url(#grAmethyst)" opacity="0.8" filter="url(#glowSm)"/>
|
||||
<path d="M 240,-50 L 243,-47 L 240,-44 L 237,-47 Z" fill="url(#grAmethyst)" opacity="0.9" filter="url(#glowSm)">
|
||||
<animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
<!-- Milestone markers -->
|
||||
<g filter="url(#glowSm)">
|
||||
<circle cx="-20" cy="4" r="8" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.4"/>
|
||||
<text x="-20" y="-10" font-size="7" fill="#6EE7B7" text-anchor="middle">10th Turn</text>
|
||||
</g>
|
||||
<g filter="url(#glowSm)">
|
||||
<circle cx="160" cy="-36" r="8" fill="none" stroke="#F59E0B" stroke-width="0.8" opacity="0.4"/>
|
||||
<text x="160" y="-48" font-size="7" fill="#FDE68A" text-anchor="middle">30-day streak</text>
|
||||
</g>
|
||||
<!-- Y-axis label -->
|
||||
<text x="-272" y="-10" font-size="7" fill="#475569" transform="rotate(-90, -272, -10)" text-anchor="middle">Resilience Score</text>
|
||||
</g>
|
||||
|
||||
<text x="350" y="860" class="lbl">Growth Trajectory — resilience over months with milestone markers</text>
|
||||
<text x="350" y="890" font-size="8" fill="#334155" text-anchor="middle">All Spectrum visualizations use fragment-shaped data points, jewel tone gradients, and glow effects</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 15 KiB |
2135
initial mockups/claude_implementation_instructions.md
Normal file
2135
initial mockups/claude_implementation_instructions.md
Normal file
File diff suppressed because it is too large
Load Diff
269
initial mockups/screens/gallery/31-gallery-all.html
Normal file
269
initial mockups/screens/gallery/31-gallery-all.html
Normal file
@@ -0,0 +1,269 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Gallery</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.gallery-header {
|
||||
padding: var(--space-4) var(--space-4) 0;
|
||||
}
|
||||
.gallery-title-row {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.gallery-heading {
|
||||
font-size: 26px; font-weight: 700; color: var(--pure-light);
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
.search-icon-btn {
|
||||
width: 40px; height: 40px; border-radius: var(--radius-md);
|
||||
background: var(--deep-glass); border: 1px solid var(--twilight);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: var(--dim-light); text-decoration: none; cursor: pointer;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.search-icon-btn:hover { border-color: var(--sapphire); color: var(--sapphire-light); }
|
||||
.toggle-row {
|
||||
display: flex; gap: 0; background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight); border-radius: var(--radius-lg);
|
||||
padding: 3px; margin-bottom: 12px;
|
||||
}
|
||||
.toggle-btn {
|
||||
flex: 1; height: 36px; border-radius: var(--radius-md);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 14px; font-weight: 600; cursor: pointer;
|
||||
text-decoration: none; transition: all 0.2s;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.toggle-btn.active {
|
||||
background: var(--sapphire); color: var(--pure-light);
|
||||
box-shadow: var(--glow-sapphire);
|
||||
}
|
||||
.sort-chips {
|
||||
display: flex; gap: 8px; margin-bottom: 14px;
|
||||
}
|
||||
.sort-chip {
|
||||
height: 30px; padding: 0 14px; border-radius: var(--radius-full);
|
||||
font-size: 12px; font-weight: 600; cursor: pointer;
|
||||
display: flex; align-items: center; transition: all 0.15s;
|
||||
border: 1px solid var(--twilight); color: var(--dim-light);
|
||||
background: transparent;
|
||||
}
|
||||
.sort-chip.active {
|
||||
background: rgba(var(--sapphire-rgb, 59,130,246), 0.15); border-color: var(--sapphire);
|
||||
color: var(--sapphire-light);
|
||||
}
|
||||
.pattern-card:hover { border-color: var(--amethyst); }
|
||||
@keyframes patternBreathing {
|
||||
0%, 100% { opacity: 0.75; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.04); }
|
||||
}
|
||||
.pattern-visual-area svg { animation: patternBreathing 6s ease-in-out infinite; }
|
||||
.pattern-grid {
|
||||
display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
|
||||
padding: 0 var(--space-4) var(--space-6);
|
||||
}
|
||||
.pattern-card {
|
||||
background: var(--kalei-navy); border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl); overflow: hidden; cursor: pointer;
|
||||
text-decoration: none; transition: border-color 0.2s;
|
||||
display: block;
|
||||
}
|
||||
.pattern-card:hover { border-color: rgba(139,92,246,0.4); }
|
||||
.pattern-visual-area {
|
||||
height: 130px; background: var(--void);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.pattern-bg-aura {
|
||||
position: absolute; inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.pattern-info { padding: 10px 12px 12px; }
|
||||
.pattern-thought {
|
||||
font-size: 12px; color: var(--soft-light); line-height: 1.4;
|
||||
margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical; overflow: hidden;
|
||||
}
|
||||
.pattern-meta {
|
||||
font-size: 11px; color: var(--dim-light); margin-bottom: 6px;
|
||||
}
|
||||
.pattern-chips { display: flex; flex-wrap: wrap; gap: 4px; }
|
||||
.distortion-mini-chip {
|
||||
background: rgba(245,158,11,0.1); color: var(--amber-light);
|
||||
border-radius: 4px; padding: 2px 7px; font-size: 10px; font-weight: 500;
|
||||
}
|
||||
.screen-content { padding: 0; overflow-y: auto; }
|
||||
</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">
|
||||
<div class="gallery-header">
|
||||
<div class="gallery-title-row">
|
||||
<div class="gallery-heading">Gallery</div>
|
||||
<a class="search-icon-btn" href="34-gallery-search.html">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5"/>
|
||||
<path d="M12.5 12.5L16 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Toggle -->
|
||||
<div class="toggle-row">
|
||||
<a class="toggle-btn active" href="31-gallery-all.html">Patterns</a>
|
||||
<a class="toggle-btn" href="32-gallery-keepsakes.html">Keepsakes</a>
|
||||
</div>
|
||||
|
||||
<!-- Sort chips -->
|
||||
<div class="sort-chips">
|
||||
<div class="sort-chip active" onclick="setSort(this)">Recent</div>
|
||||
<div class="sort-chip" onclick="setSort(this)">Most Reframed</div>
|
||||
<div class="sort-chip" onclick="setSort(this)">This Week</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pattern grid -->
|
||||
<div class="pattern-grid">
|
||||
|
||||
<!-- Card 1 — Turn pattern (amethyst 6-fold), blade from patterns-kaleidoscope.svg -->
|
||||
<a class="pattern-card" href="33-gallery-detail.html">
|
||||
<div class="pattern-visual-area">
|
||||
<div class="pattern-bg-aura" style="background: radial-gradient(circle at 50% 50%, rgba(139,92,246,0.2), transparent 70%);"></div>
|
||||
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: 8px;">
|
||||
</div>
|
||||
<div class="pattern-info">
|
||||
<div class="pattern-thought">I completely bombed my presentation today and everyone saw</div>
|
||||
<div class="pattern-meta">Feb 22 · 3 perspectives</div>
|
||||
<div class="pattern-chips">
|
||||
<span class="distortion-mini-chip">Catastrophizing</span>
|
||||
<span class="distortion-mini-chip">Overgeneralization</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Card 2 — Black-and-White + Labeling (rose/indigo) -->
|
||||
<a class="pattern-card" href="33-gallery-detail.html">
|
||||
<div class="pattern-visual-area">
|
||||
<div class="pattern-bg-aura" style="background: radial-gradient(circle at 50% 50%, rgba(99,102,241,0.2), transparent 70%);"></div>
|
||||
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: 8px;">
|
||||
</div>
|
||||
<div class="pattern-info">
|
||||
<div class="pattern-thought">I never stick to anything I start — I'm not disciplined</div>
|
||||
<div class="pattern-meta">Feb 17 · 3 perspectives</div>
|
||||
<div class="pattern-chips">
|
||||
<span class="distortion-mini-chip">Black-and-White</span>
|
||||
<span class="distortion-mini-chip">Labeling</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Card 3 — Complex pattern (sapphire 6-fold), blade from patterns-kaleidoscope.svg Complex: M 0,0 L 6,-2 L -4,38 L -6,1 Z -->
|
||||
<a class="pattern-card" href="33-gallery-detail.html">
|
||||
<div class="pattern-visual-area">
|
||||
<div class="pattern-bg-aura" style="background: radial-gradient(circle at 50% 50%, rgba(59,130,246,0.2), transparent 70%);"></div>
|
||||
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: 8px;">
|
||||
</div>
|
||||
<div class="pattern-info">
|
||||
<div class="pattern-thought">Nobody at work respects my opinion anymore</div>
|
||||
<div class="pattern-meta">Feb 20 · 3 perspectives</div>
|
||||
<div class="pattern-chips">
|
||||
<span class="distortion-mini-chip">Mind Reading</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Card 4 — Turn pattern (amber, 6-fold), blade from patterns-kaleidoscope.svg -->
|
||||
<a class="pattern-card" href="33-gallery-detail.html">
|
||||
<div class="pattern-visual-area">
|
||||
<div class="pattern-bg-aura" style="background: radial-gradient(circle at 50% 50%, rgba(245,158,11,0.2), transparent 70%);"></div>
|
||||
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: 8px;">
|
||||
</div>
|
||||
<div class="pattern-info">
|
||||
<div class="pattern-thought">Everything is going to fall apart if I don't fix this today</div>
|
||||
<div class="pattern-meta">Feb 19 · 3 perspectives</div>
|
||||
<div class="pattern-chips">
|
||||
<span class="distortion-mini-chip">Catastrophizing</span>
|
||||
<span class="distortion-mini-chip">Fortune Telling</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Card 5 — Complex pattern (rose/pink, 6-fold), Complex blade from patterns-kaleidoscope.svg -->
|
||||
<a class="pattern-card" href="33-gallery-detail.html">
|
||||
<div class="pattern-visual-area">
|
||||
<div class="pattern-bg-aura" style="background: radial-gradient(circle at 50% 50%, rgba(236,72,153,0.2), transparent 70%);"></div>
|
||||
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: 8px;">
|
||||
</div>
|
||||
<div class="pattern-info">
|
||||
<div class="pattern-thought">It's all my fault the team missed the deadline</div>
|
||||
<div class="pattern-meta">Feb 18 · 3 perspectives</div>
|
||||
<div class="pattern-chips">
|
||||
<span class="distortion-mini-chip">Personalization</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Card 6 — Turn pattern (indigo 6-fold), blade from patterns-kaleidoscope.svg -->
|
||||
<a class="pattern-card" href="33-gallery-detail.html">
|
||||
<div class="pattern-visual-area">
|
||||
<div class="pattern-bg-aura" style="background: radial-gradient(circle at 50% 50%, rgba(99,102,241,0.2), transparent 70%);"></div>
|
||||
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: 8px;">
|
||||
</div>
|
||||
<div class="pattern-info">
|
||||
<div class="pattern-thought">I should be further along in my career by now</div>
|
||||
<div class="pattern-meta">Feb 17 · 3 perspectives</div>
|
||||
<div class="pattern-chips">
|
||||
<span class="distortion-mini-chip">Should Statements</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab Bar -->
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item inactive" data-tab="turn" href="../turn/10-turn-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 2L20 12L12 22L4 12Z" fill="currentColor" opacity="0.9"/><path d="M12 2L20 12L12 12Z" fill="white" opacity="0.15"/></svg>
|
||||
<span class="tab-label">Turn</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="mirror" href="../mirror/15-mirror-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 3L16 8L18 14L12 19L6 14L8 8Z" stroke="currentColor" fill="none" stroke-width="1.2"/></svg>
|
||||
<span class="tab-label">Mirror</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="lens" href="../lens/20-lens-dashboard.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="currentColor" fill="none" stroke-width="1.2"/><circle cx="12" cy="12" r="4" stroke="currentColor" fill="none" stroke-width="0.8"/></svg>
|
||||
<span class="tab-label">Lens</span>
|
||||
</a>
|
||||
<a class="tab-item active" data-tab="gallery" href="31-gallery-all.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><rect x="3" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/></svg>
|
||||
<span class="tab-label">Gallery</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="you" href="../you/35-you-profile.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="9" r="4" stroke="currentColor" fill="none" stroke-width="1.2"/><path d="M4 20C4 16 8 14 12 14C16 14 20 16 20 20" stroke="currentColor" fill="none" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
<span class="tab-label">You</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function setSort(el) {
|
||||
document.querySelectorAll('.sort-chip').forEach(c => c.classList.remove('active'));
|
||||
el.classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
277
initial mockups/screens/gallery/32-gallery-keepsakes.html
Normal file
277
initial mockups/screens/gallery/32-gallery-keepsakes.html
Normal file
@@ -0,0 +1,277 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Keepsakes</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.gallery-header { padding: var(--space-4) var(--space-4) 0; }
|
||||
.gallery-title-row {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.gallery-heading {
|
||||
font-size: 26px; font-weight: 700; color: var(--pure-light);
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
.toggle-row {
|
||||
display: flex; gap: 0; background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight); border-radius: var(--radius-lg);
|
||||
padding: 3px; margin-bottom: 16px;
|
||||
}
|
||||
.toggle-btn {
|
||||
flex: 1; height: 36px; border-radius: var(--radius-md);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 14px; font-weight: 600; cursor: pointer;
|
||||
text-decoration: none; transition: all 0.2s;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.toggle-btn.active {
|
||||
background: var(--sapphire); color: var(--pure-light);
|
||||
box-shadow: var(--glow-sapphire);
|
||||
}
|
||||
.keepsake-card {
|
||||
background: var(--kalei-navy); border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl); padding: var(--space-4);
|
||||
margin-bottom: var(--space-3); display: flex; gap: var(--space-3);
|
||||
cursor: pointer; text-decoration: none; transition: border-color 0.2s;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.keepsake-card:hover { border-color: var(--sapphire); }
|
||||
.keepsake-pattern svg { animation: breathing 6s ease-in-out infinite; }
|
||||
.keepsake-pattern {
|
||||
width: 64px; height: 64px; border-radius: var(--radius-md);
|
||||
background: var(--void); flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
overflow: hidden; position: relative;
|
||||
}
|
||||
.keepsake-content { flex: 1; min-width: 0; }
|
||||
.keepsake-reframe {
|
||||
font-size: 14px; color: var(--pure-light); line-height: 1.4;
|
||||
margin-bottom: 6px; font-weight: 500;
|
||||
}
|
||||
.keepsake-source {
|
||||
font-size: 12px; color: var(--dim-light); margin-bottom: 8px;
|
||||
display: -webkit-box; -webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical; overflow: hidden;
|
||||
font-style: italic;
|
||||
}
|
||||
.keepsake-meta {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
}
|
||||
.keepsake-date { font-size: 11px; color: var(--dim-light); }
|
||||
.keepsake-bookmark {
|
||||
margin-left: auto; color: var(--sapphire-light); flex-shrink: 0;
|
||||
}
|
||||
.section-label {
|
||||
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
||||
letter-spacing: 0.06em; color: var(--dim-light);
|
||||
padding: 4px 0 8px;
|
||||
}
|
||||
.screen-content { padding: 0 var(--space-4) var(--space-6); overflow-y: auto; }
|
||||
.empty-keepsake {
|
||||
text-align: center; padding: 40px var(--space-4);
|
||||
}
|
||||
.keepsake-count-chip {
|
||||
background: rgba(var(--sapphire-rgb, 59,130,246), 0.1); border: 1px solid rgba(var(--sapphire-rgb, 59,130,246), 0.25);
|
||||
border-radius: var(--radius-full); padding: 3px 12px; font-size: 12px;
|
||||
color: var(--sapphire-light); font-weight: 500;
|
||||
}
|
||||
.search-icon-btn {
|
||||
width: 40px; height: 40px; border-radius: var(--radius-md);
|
||||
background: var(--deep-glass); border: 1px solid var(--twilight);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: var(--dim-light); text-decoration: none; cursor: pointer;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.search-icon-btn:hover { border-color: var(--sapphire); color: var(--sapphire-light); }
|
||||
</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="gallery-header">
|
||||
<div class="gallery-title-row">
|
||||
<div class="gallery-heading">Gallery</div>
|
||||
<a class="search-icon-btn" href="34-gallery-search.html">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5"/>
|
||||
<path d="M12.5 12.5L16 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="toggle-row">
|
||||
<a class="toggle-btn" href="31-gallery-all.html">Patterns</a>
|
||||
<a class="toggle-btn active" href="32-gallery-keepsakes.html">Keepsakes</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="screen-content">
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;">
|
||||
<div class="section-label">Saved Reframes</div>
|
||||
<span class="keepsake-count-chip">4 keepsakes</span>
|
||||
</div>
|
||||
|
||||
<!-- Keepsake 1 -->
|
||||
<a class="keepsake-card" href="33-gallery-detail.html">
|
||||
<div class="keepsake-pattern">
|
||||
<div style="position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(139,92,246,0.25), transparent 70%);"></div>
|
||||
<svg width="50" height="50" viewBox="0 0 50 50" style="mix-blend-mode: screen; position: relative; z-index: 1;">
|
||||
<defs><linearGradient id="gk1" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#C4B5FD" stop-opacity="0.9"/><stop offset="100%" stop-color="#7C3AED" stop-opacity="0.3"/></linearGradient></defs>
|
||||
<g transform="translate(25,25)">
|
||||
<g><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#gk1)"/></g>
|
||||
<g transform="rotate(60)"><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#gk1)"/></g>
|
||||
<g transform="rotate(120)"><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#gk1)"/></g>
|
||||
<g transform="rotate(180)"><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#gk1)"/></g>
|
||||
<g transform="rotate(240)"><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#gk1)"/></g>
|
||||
<g transform="rotate(300)"><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#gk1)"/></g>
|
||||
<circle r="5" fill="white" opacity="0.1"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="keepsake-content">
|
||||
<div class="keepsake-reframe">"What if the people in that room saw something you didn't — someone who showed up, spoke up, and kept going when the pressure was highest?"</div>
|
||||
<div class="keepsake-source">From: "I completely bombed my presentation today and everyone saw"</div>
|
||||
<div class="keepsake-meta">
|
||||
<span class="keepsake-date">Feb 22</span>
|
||||
<span class="label text-dim">· Perspective Shift</span>
|
||||
<span class="keepsake-bookmark">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path d="M4 2h8a1 1 0 011 1v11l-5-3-5 3V3a1 1 0 011-1z"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Keepsake 2 -->
|
||||
<a class="keepsake-card" href="33-gallery-detail.html">
|
||||
<div class="keepsake-pattern">
|
||||
<div style="position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(16,185,129,0.25), transparent 70%);"></div>
|
||||
<svg width="50" height="50" viewBox="0 0 50 50" style="mix-blend-mode: screen; position: relative; z-index: 1;">
|
||||
<defs><linearGradient id="gk2" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#6EE7B7" stop-opacity="0.9"/><stop offset="100%" stop-color="#059669" stop-opacity="0.3"/></linearGradient></defs>
|
||||
<g transform="translate(25,25)">
|
||||
<g><path d="M0,0 L4,-18 L0,-23 L-4,-18Z" fill="url(#gk2)"/></g>
|
||||
<g transform="rotate(72)"><path d="M0,0 L4,-18 L0,-23 L-4,-18Z" fill="url(#gk2)"/></g>
|
||||
<g transform="rotate(144)"><path d="M0,0 L4,-18 L0,-23 L-4,-18Z" fill="url(#gk2)"/></g>
|
||||
<g transform="rotate(216)"><path d="M0,0 L4,-18 L0,-23 L-4,-18Z" fill="url(#gk2)"/></g>
|
||||
<g transform="rotate(288)"><path d="M0,0 L4,-18 L0,-23 L-4,-18Z" fill="url(#gk2)"/></g>
|
||||
<circle r="4" fill="white" opacity="0.1"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="keepsake-content">
|
||||
<div class="keepsake-reframe">"You came back to this — today, again. That's not someone who never sticks to things. That's exactly what sticking to something looks like from the inside."</div>
|
||||
<div class="keepsake-source">From: "I never stick to anything I start — I'm not disciplined"</div>
|
||||
<div class="keepsake-meta">
|
||||
<span class="keepsake-date">Feb 17</span>
|
||||
<span class="label text-dim">· Evidence Check</span>
|
||||
<span class="keepsake-bookmark">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="color: var(--sapphire-light);">
|
||||
<path d="M4 2h8a1 1 0 011 1v11l-5-3-5 3V3a1 1 0 011-1z"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Keepsake 3 -->
|
||||
<a class="keepsake-card" href="33-gallery-detail.html">
|
||||
<div class="keepsake-pattern">
|
||||
<div style="position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(59,130,246,0.25), transparent 70%);"></div>
|
||||
<svg width="50" height="50" viewBox="0 0 50 50" style="mix-blend-mode: screen; position: relative; z-index: 1;">
|
||||
<defs><linearGradient id="gk3" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#93C5FD" stop-opacity="0.9"/><stop offset="100%" stop-color="#2563EB" stop-opacity="0.3"/></linearGradient></defs>
|
||||
<g transform="translate(25,25)">
|
||||
<g><path d="M0,0 L5,-20 L0,-26 L-5,-20Z" fill="url(#gk3)"/></g>
|
||||
<g transform="rotate(120)"><path d="M0,0 L5,-20 L0,-26 L-5,-20Z" fill="url(#gk3)"/></g>
|
||||
<g transform="rotate(240)"><path d="M0,0 L5,-20 L0,-26 L-5,-20Z" fill="url(#gk3)"/></g>
|
||||
<circle r="4" fill="white" opacity="0.1"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="keepsake-content">
|
||||
<div class="keepsake-reframe">"Minds are harder to read than we think. What if the silence wasn't indifference — but the kind of stillness that comes right before something lands?"</div>
|
||||
<div class="keepsake-source">From: "Nobody at work respects my opinion anymore"</div>
|
||||
<div class="keepsake-meta">
|
||||
<span class="keepsake-date">Feb 20</span>
|
||||
<span class="label text-dim">· Perspective Shift</span>
|
||||
<span class="keepsake-bookmark">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="color: var(--sapphire-light);">
|
||||
<path d="M4 2h8a1 1 0 011 1v11l-5-3-5 3V3a1 1 0 011-1z"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Keepsake 4 -->
|
||||
<a class="keepsake-card" href="33-gallery-detail.html">
|
||||
<div class="keepsake-pattern">
|
||||
<div style="position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(245,158,11,0.25), transparent 70%);"></div>
|
||||
<svg width="50" height="50" viewBox="0 0 50 50" style="mix-blend-mode: screen; position: relative; z-index: 1;">
|
||||
<defs><linearGradient id="gk4" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#FDE68A" stop-opacity="0.9"/><stop offset="100%" stop-color="#D97706" stop-opacity="0.3"/></linearGradient></defs>
|
||||
<g transform="translate(25,25)">
|
||||
<g><path d="M0,0 L5,-22 L0,-27 L-5,-22Z" fill="url(#gk4)"/></g>
|
||||
<g transform="rotate(45)"><path d="M0,0 L5,-22 L0,-27 L-5,-22Z" fill="url(#gk4)"/></g>
|
||||
<g transform="rotate(90)"><path d="M0,0 L5,-22 L0,-27 L-5,-22Z" fill="url(#gk4)"/></g>
|
||||
<g transform="rotate(135)"><path d="M0,0 L5,-22 L0,-27 L-5,-22Z" fill="url(#gk4)"/></g>
|
||||
<g transform="rotate(180)"><path d="M0,0 L5,-22 L0,-27 L-5,-22Z" fill="url(#gk4)"/></g>
|
||||
<g transform="rotate(225)"><path d="M0,0 L5,-22 L0,-27 L-5,-22Z" fill="url(#gk4)"/></g>
|
||||
<g transform="rotate(270)"><path d="M0,0 L5,-22 L0,-27 L-5,-22Z" fill="url(#gk4)"/></g>
|
||||
<g transform="rotate(315)"><path d="M0,0 L5,-22 L0,-27 L-5,-22Z" fill="url(#gk4)"/></g>
|
||||
<circle r="5" fill="white" opacity="0.08"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="keepsake-content">
|
||||
<div class="keepsake-reframe">"The story that everything falls apart unless you carry it — that's the exhausting part. What's the smallest thing that would make today count? Start there."</div>
|
||||
<div class="keepsake-source">From: "Everything is going to fall apart if I don't fix this today"</div>
|
||||
<div class="keepsake-meta">
|
||||
<span class="keepsake-date">Feb 19</span>
|
||||
<span class="label text-dim">· Action Step</span>
|
||||
<span class="keepsake-bookmark">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="color: var(--sapphire-light);">
|
||||
<path d="M4 2h8a1 1 0 011 1v11l-5-3-5 3V3a1 1 0 011-1z"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Tab Bar -->
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item inactive" data-tab="turn" href="../turn/10-turn-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 2L20 12L12 22L4 12Z" fill="currentColor" opacity="0.9"/><path d="M12 2L20 12L12 12Z" fill="white" opacity="0.15"/></svg>
|
||||
<span class="tab-label">Turn</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="mirror" href="../mirror/15-mirror-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 3L16 8L18 14L12 19L6 14L8 8Z" stroke="currentColor" fill="none" stroke-width="1.2"/></svg>
|
||||
<span class="tab-label">Mirror</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="lens" href="../lens/20-lens-dashboard.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="currentColor" fill="none" stroke-width="1.2"/><circle cx="12" cy="12" r="4" stroke="currentColor" fill="none" stroke-width="0.8"/></svg>
|
||||
<span class="tab-label">Lens</span>
|
||||
</a>
|
||||
<a class="tab-item active" data-tab="gallery" href="31-gallery-all.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><rect x="3" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/></svg>
|
||||
<span class="tab-label">Gallery</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="you" href="../you/35-you-profile.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="9" r="4" stroke="currentColor" fill="none" stroke-width="1.2"/><path d="M4 20C4 16 8 14 12 14C16 14 20 16 20 20" stroke="currentColor" fill="none" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
<span class="tab-label">You</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
267
initial mockups/screens/gallery/33-gallery-detail.html
Normal file
267
initial mockups/screens/gallery/33-gallery-detail.html
Normal file
@@ -0,0 +1,267 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Pattern Detail</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.nav-back { color: var(--sapphire-light) !important; transition: opacity 0.2s; }
|
||||
.nav-action { color: var(--sapphire-light) !important; transition: opacity 0.2s; }
|
||||
.nav-back:hover, .nav-action:hover { opacity: 0.75; }
|
||||
.pattern-hero {
|
||||
background: var(--void); position: relative;
|
||||
height: 200px; display: flex; align-items: center; justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.pattern-hero-aura {
|
||||
position: absolute; inset: 0;
|
||||
background: radial-gradient(ellipse at 50% 50%, rgba(139,92,246,0.2), transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.pattern-hero-aura-outer {
|
||||
position: absolute; inset: 0;
|
||||
background: radial-gradient(ellipse at 50% 50%, rgba(59,130,246,0.08), transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero-kaleidoscope { animation: breathing 6s ease-in-out infinite; }
|
||||
.hero-shard-1 { position: absolute; top: 20px; left: 20px; opacity: 0.15; animation: breathing 6s ease-in-out infinite; }
|
||||
.hero-shard-2 { position: absolute; bottom: 20px; right: 20px; opacity: 0.12; animation: breathing 6s ease-in-out infinite 1s; }
|
||||
.original-thought-card {
|
||||
margin: var(--space-4) var(--space-4) var(--space-3);
|
||||
background: var(--deep-glass); border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4);
|
||||
}
|
||||
.original-label {
|
||||
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
||||
letter-spacing: 0.06em; color: var(--dim-light); margin-bottom: 6px;
|
||||
}
|
||||
.original-text {
|
||||
font-size: 15px; color: var(--soft-light); line-height: 1.5; font-style: italic;
|
||||
}
|
||||
.reframes-section { padding: 0 var(--space-4); margin-bottom: var(--space-4); }
|
||||
.section-label {
|
||||
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
||||
letter-spacing: 0.06em; color: var(--dim-light); margin-bottom: 10px;
|
||||
}
|
||||
.distortions-section { padding: 0 var(--space-4); margin-bottom: var(--space-4); }
|
||||
.distortion-card {
|
||||
background: var(--kalei-navy); border: 1px solid rgba(245,158,11,0.2);
|
||||
border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4);
|
||||
margin-bottom: var(--space-2); display: flex; gap: var(--space-3); align-items: flex-start;
|
||||
}
|
||||
.distortion-icon-wrap {
|
||||
width: 36px; height: 36px; border-radius: var(--radius-md);
|
||||
background: rgba(245,158,11,0.1); display: flex; align-items: center;
|
||||
justify-content: center; flex-shrink: 0;
|
||||
}
|
||||
.distortion-info { flex: 1; }
|
||||
.distortion-name {
|
||||
font-size: 14px; font-weight: 600; color: var(--amber-light); margin-bottom: 3px;
|
||||
}
|
||||
.distortion-explanation {
|
||||
font-size: 13px; color: var(--dim-light); line-height: 1.4;
|
||||
}
|
||||
.actions-section { padding: 0 var(--space-4); margin-bottom: var(--space-4); }
|
||||
.meta-row {
|
||||
padding: var(--space-3) var(--space-4);
|
||||
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
||||
}
|
||||
.meta-chip {
|
||||
background: var(--deep-glass); border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-full); padding: 4px 12px;
|
||||
font-size: 12px; color: var(--dim-light);
|
||||
}
|
||||
.btn-turn-again {
|
||||
display: flex; align-items: center; justify-content: center; gap: 8px;
|
||||
height: 52px; width: 100%;
|
||||
background: var(--amethyst); color: var(--pure-light);
|
||||
font-size: 15px; font-weight: 600; border-radius: var(--radius-lg);
|
||||
box-shadow: var(--glow-amethyst); text-decoration: none;
|
||||
transition: background 0.2s; margin-bottom: var(--space-2);
|
||||
}
|
||||
.btn-turn-again:hover { background: var(--amethyst-light); }
|
||||
.btn-bookmark {
|
||||
display: flex; align-items: center; justify-content: center; gap: 8px;
|
||||
height: 44px; width: 100%;
|
||||
background: var(--deep-glass); color: var(--sapphire-light);
|
||||
font-size: 14px; font-weight: 600; border-radius: var(--radius-lg);
|
||||
border: 1px solid rgba(59,130,246,0.3); text-decoration: none;
|
||||
transition: all 0.2s; cursor: pointer;
|
||||
}
|
||||
.btn-bookmark:hover { background: rgba(59,130,246,0.1); }
|
||||
.screen-content { padding-bottom: 24px; }
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="31-gallery-all.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<span class="nav-title">Pattern</span>
|
||||
<a class="nav-action" href="../modals/61-pattern-share.html" style="text-decoration: none;">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<circle cx="15" cy="4" r="2" stroke="currentColor" stroke-width="1.4"/>
|
||||
<circle cx="4" cy="10" r="2" stroke="currentColor" stroke-width="1.4"/>
|
||||
<circle cx="15" cy="16" r="2" stroke="currentColor" stroke-width="1.4"/>
|
||||
<path d="M6 9l7-4M6 11l7 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="screen-content">
|
||||
<!-- Large kaleidoscope pattern hero -->
|
||||
<div class="pattern-hero">
|
||||
<div class="pattern-hero-aura"></div>
|
||||
<div class="pattern-hero-aura-outer"></div>
|
||||
<svg class="hero-shard-1" width="28" height="28" viewBox="0 0 28 28"><path d="M14 2L20 14L14 26L8 14Z" fill="var(--amethyst)"/></svg>
|
||||
<svg class="hero-shard-2" width="20" height="20" viewBox="0 0 20 20"><path d="M10 2L14 10L10 18L6 10Z" fill="var(--sapphire)"/></svg>
|
||||
<!-- Hero kaleidoscope — canonical logo -->
|
||||
<img src="../../assets/kalei-logo.svg" width="100" height="100" alt="Kalei" class="hero-kaleidoscope" style="filter: drop-shadow(0 0 12px rgba(139,92,246,0.3));">
|
||||
</div>
|
||||
|
||||
<!-- Original thought -->
|
||||
<div class="original-thought-card">
|
||||
<div class="original-label">Original Thought — Feb 22, 2026</div>
|
||||
<div class="original-text">"I completely bombed my presentation today and everyone saw how unprepared I was."</div>
|
||||
</div>
|
||||
|
||||
<!-- 3 Reframe perspectives -->
|
||||
<div class="reframes-section">
|
||||
<div class="section-label">3 Perspectives</div>
|
||||
<div class="reframe-block amethyst">
|
||||
<div class="reframe-label">Perspective Shift</div>
|
||||
<div class="reframe-text">What if stumbling through this actually revealed something real about you — not incompetence, but the courage to show up when the stakes felt high? Everyone in that room has had a moment like this.</div>
|
||||
</div>
|
||||
<div class="reframe-block sapphire">
|
||||
<div class="reframe-label">Evidence Check</div>
|
||||
<div class="reframe-text">Think of a presentation or high-pressure moment where you felt underprepared — and survived. What did you do that got you through? That same resilience is what brought you here today, too.</div>
|
||||
</div>
|
||||
<div class="reframe-block emerald">
|
||||
<div class="reframe-label">Action Step</div>
|
||||
<div class="reframe-text">Write down one thing that went better than expected today, however small. Then name one specific thing you'd adjust next time. That's not failure — that's preparation.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Detected distortions -->
|
||||
<div class="distortions-section">
|
||||
<div class="section-label">Detected Patterns</div>
|
||||
|
||||
<div class="distortion-card">
|
||||
<div class="distortion-icon-wrap">
|
||||
<!-- Extracted from icons-distortions.svg → Catastrophizing (translate 28,60) -->
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="d33-amberGr1" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<filter id="d33-gAmber1" 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(12,12)" filter="url(#d33-gAmber1)">
|
||||
<!-- Main falling shard -->
|
||||
<path d="M 0,-10 L 5,0 L 0,10 L -5,0 Z" fill="url(#d33-amberGr1)" opacity="0.9"/>
|
||||
<path d="M 0,-10 L 5,0 L -5,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<!-- Broken fragments -->
|
||||
<path d="M -8,6 L -5,10 L -9,12 L -11,8 Z" fill="#F59E0B" opacity="0.5"/>
|
||||
<path d="M 7,8 L 10,12 L 8,14 L 5,11 Z" fill="#F59E0B" opacity="0.4"/>
|
||||
<!-- Motion line -->
|
||||
<line x1="0" y1="11" x2="0" y2="16" stroke="#FCD34D" stroke-width="0.5" opacity="0.4"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="distortion-info">
|
||||
<div class="distortion-name">Catastrophizing</div>
|
||||
<div class="distortion-explanation">Magnifying the negatives of a situation while minimizing any positives. One setback becomes a total disaster in your mind.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="distortion-card">
|
||||
<div class="distortion-icon-wrap">
|
||||
<!-- Extracted from icons-distortions.svg → Overgeneralization (translate 448,180) -->
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="d33-amberGr2" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<filter id="d33-gAmber2" 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(12,12)" filter="url(#d33-gAmber2)">
|
||||
<!-- Source diamond -->
|
||||
<path d="M -10,0 L -7,-3 L -4,0 L -7,3 Z" fill="url(#d33-amberGr2)" opacity="0.9"/>
|
||||
<path d="M -10,0 L -7,-3 L -4,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<!-- Spreading replicated diamonds -->
|
||||
<path d="M 2,-6 L 4,-8 L 6,-6 L 4,-4 Z" fill="#F59E0B" opacity="0.7"/>
|
||||
<path d="M 4,0 L 6,-2 L 8,0 L 6,2 Z" fill="#F59E0B" opacity="0.6"/>
|
||||
<path d="M 2,4 L 4,2 L 6,4 L 4,6 Z" fill="#F59E0B" opacity="0.5"/>
|
||||
<path d="M 8,-5 L 10,-7 L 12,-5 L 10,-3 Z" fill="#F59E0B" opacity="0.35"/>
|
||||
<path d="M 9,3 L 11,1 L 13,3 L 11,5 Z" fill="#F59E0B" opacity="0.3"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="distortion-info">
|
||||
<div class="distortion-name">Overgeneralization</div>
|
||||
<div class="distortion-explanation">Drawing a broad, absolute conclusion from a single event. "Everyone saw" and "completely bombed" turn one difficult moment into a sweeping verdict about your ability.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Meta info -->
|
||||
<div class="meta-row">
|
||||
<span class="meta-chip">Feb 22, 2026</span>
|
||||
<span class="meta-chip">Compassionate style</span>
|
||||
<span class="meta-chip">4 min</span>
|
||||
<span class="meta-chip">Turn #47</span>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="actions-section">
|
||||
<a class="btn-turn-again" href="../turn/11-turn-input-active.html">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M2 9C2 5.1 5.1 2 9 2s7 3.1 7 7-3.1 7-7 7" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M2 9l2-2M2 9l2 2" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
Turn again
|
||||
</a>
|
||||
<button class="btn-bookmark" onclick="toggleBookmark(this)">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" id="bmIcon">
|
||||
<path d="M4 2h8a1 1 0 011 1v11l-5-3-5 3V3a1 1 0 011-1z" stroke="currentColor" stroke-width="1.2" fill="none"/>
|
||||
</svg>
|
||||
Save to Keepsakes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleBookmark(btn) {
|
||||
const icon = document.getElementById('bmIcon');
|
||||
const isSaved = btn.textContent.includes('Saved');
|
||||
if (isSaved) {
|
||||
icon.innerHTML = '<path d="M4 2h8a1 1 0 011 1v11l-5-3-5 3V3a1 1 0 011-1z" stroke="currentColor" stroke-width="1.2" fill="none"/>';
|
||||
btn.innerHTML = btn.innerHTML.replace('Saved', 'Save to Keepsakes');
|
||||
} else {
|
||||
icon.innerHTML = '<path d="M4 2h8a1 1 0 011 1v11l-5-3-5 3V3a1 1 0 011-1z" fill="currentColor"/>';
|
||||
btn.innerHTML = btn.innerHTML.replace('Save to Keepsakes', 'Saved');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
265
initial mockups/screens/gallery/34-gallery-search.html
Normal file
265
initial mockups/screens/gallery/34-gallery-search.html
Normal file
@@ -0,0 +1,265 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Gallery Search</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.nav-back { color: var(--sapphire-light) !important; }
|
||||
.search-container {
|
||||
padding: 0 var(--space-4) var(--space-3);
|
||||
}
|
||||
.search-input-wrap {
|
||||
position: relative; margin-bottom: var(--space-3);
|
||||
}
|
||||
.search-input {
|
||||
width: 100%; height: 48px;
|
||||
background: var(--deep-glass); border: 1.5px solid var(--sapphire);
|
||||
border-radius: var(--radius-lg); padding: 0 44px 0 44px;
|
||||
font-size: 16px; color: var(--pure-light); outline: none;
|
||||
font-family: var(--font-primary);
|
||||
box-shadow: 0 0 12px rgba(59,130,246,0.15);
|
||||
}
|
||||
.search-input::placeholder { color: var(--faint-light); }
|
||||
.search-icon {
|
||||
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
|
||||
color: var(--sapphire-light);
|
||||
}
|
||||
.clear-btn {
|
||||
position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
|
||||
color: var(--dim-light); cursor: pointer; background: none; border: none;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.filter-section { margin-bottom: var(--space-3); }
|
||||
.filter-label {
|
||||
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
||||
letter-spacing: 0.06em; color: var(--dim-light); margin-bottom: 8px;
|
||||
}
|
||||
.filter-chips { display: flex; flex-wrap: wrap; gap: 7px; }
|
||||
.filter-chip {
|
||||
height: 30px; padding: 0 12px; border-radius: var(--radius-full);
|
||||
font-size: 12px; font-weight: 500; cursor: pointer;
|
||||
display: flex; align-items: center; gap: 5px;
|
||||
border: 1px solid var(--twilight); color: var(--dim-light);
|
||||
background: transparent; transition: all 0.15s;
|
||||
}
|
||||
.filter-chip.active {
|
||||
background: rgba(var(--sapphire-rgb, 59,130,246), 0.15); border-color: var(--sapphire);
|
||||
color: var(--sapphire-light);
|
||||
}
|
||||
.filter-chip.amber.active {
|
||||
background: rgba(245,158,11,0.12); border-color: var(--amber);
|
||||
color: var(--amber-light);
|
||||
}
|
||||
.search-input:focus { box-shadow: var(--glow-sapphire); }
|
||||
.divider { height: 1px; background: var(--twilight); margin: 4px 0 12px; }
|
||||
.results-count {
|
||||
font-size: 13px; color: var(--dim-light); padding: 0 var(--space-4);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.result-row {
|
||||
display: flex; align-items: center; gap: var(--space-3);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-bottom: 1px solid rgba(28,34,64,0.5);
|
||||
cursor: pointer; text-decoration: none; transition: background 0.15s;
|
||||
}
|
||||
.result-row:hover { background: var(--deep-glass); }
|
||||
.result-thumb {
|
||||
width: 52px; height: 52px; border-radius: var(--radius-md);
|
||||
background: var(--void); flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
overflow: hidden; position: relative;
|
||||
}
|
||||
.result-info { flex: 1; min-width: 0; }
|
||||
.result-text {
|
||||
font-size: 14px; color: var(--soft-light); line-height: 1.4;
|
||||
margin-bottom: 4px;
|
||||
display: -webkit-box; -webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical; overflow: hidden;
|
||||
}
|
||||
.result-meta-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
|
||||
.result-date { font-size: 12px; color: var(--dim-light); }
|
||||
.result-distortion {
|
||||
background: rgba(245,158,11,0.1); color: var(--amber-light);
|
||||
border-radius: 4px; padding: 2px 7px; font-size: 10px; font-weight: 500;
|
||||
}
|
||||
.empty-state {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
padding: 48px var(--space-4); text-align: center;
|
||||
}
|
||||
.screen-content { padding: 0; overflow-y: auto; }
|
||||
.screen-content::-webkit-scrollbar { display: none; }
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="31-gallery-all.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<span class="nav-title">Search</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content">
|
||||
<div class="search-container">
|
||||
<!-- Search input -->
|
||||
<div class="search-input-wrap">
|
||||
<div class="search-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5"/>
|
||||
<path d="M12.5 12.5L16 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<input type="text" class="search-input" placeholder="Search your thoughts..." id="searchInput" value="presentation" autofocus>
|
||||
<button class="clear-btn" onclick="clearSearch()">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Distortion type filters -->
|
||||
<div class="filter-section">
|
||||
<div class="filter-label">Distortion Type</div>
|
||||
<div class="filter-chips" id="distortionFilters">
|
||||
<div class="filter-chip amber" onclick="toggleFilter(this)">All</div>
|
||||
<div class="filter-chip amber active" onclick="toggleFilter(this)">Catastrophizing</div>
|
||||
<div class="filter-chip amber" onclick="toggleFilter(this)">Black-and-White</div>
|
||||
<div class="filter-chip amber" onclick="toggleFilter(this)">Mind Reading</div>
|
||||
<div class="filter-chip amber" onclick="toggleFilter(this)">Personalization</div>
|
||||
<div class="filter-chip amber" onclick="toggleFilter(this)">Should Statements</div>
|
||||
<div class="filter-chip amber" onclick="toggleFilter(this)">Overgeneralization</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Date filters -->
|
||||
<div class="filter-section">
|
||||
<div class="filter-label">Date Range</div>
|
||||
<div class="filter-chips">
|
||||
<div class="filter-chip active" onclick="toggleDateFilter(this)">This Week</div>
|
||||
<div class="filter-chip" onclick="toggleDateFilter(this)">This Month</div>
|
||||
<div class="filter-chip" onclick="toggleDateFilter(this)">Last 3 Months</div>
|
||||
<div class="filter-chip" onclick="toggleDateFilter(this)">All Time</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
|
||||
<!-- Results -->
|
||||
<div class="results-count" id="resultsCount">3 results for "presentation"</div>
|
||||
|
||||
<a class="result-row" href="33-gallery-detail.html">
|
||||
<div class="result-thumb">
|
||||
<div style="position: absolute; inset: 0; background: radial-gradient(circle, rgba(139,92,246,0.3), transparent 70%);"></div>
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" style="mix-blend-mode: screen; position: relative; z-index: 1;">
|
||||
<defs><linearGradient id="gs1" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#C4B5FD" stop-opacity="0.9"/><stop offset="100%" stop-color="#7C3AED" stop-opacity="0.4"/></linearGradient></defs>
|
||||
<g transform="translate(18,18)"><g><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs1)"/></g><g transform="rotate(60)"><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs1)"/></g><g transform="rotate(120)"><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs1)"/></g><g transform="rotate(180)"><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs1)"/></g><g transform="rotate(240)"><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs1)"/></g><g transform="rotate(300)"><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs1)"/></g></g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="result-info">
|
||||
<div class="result-text">I completely bombed my <mark style="background: rgba(59,130,246,0.2); color: var(--sapphire-light); border-radius: 2px; padding: 0 2px;">presentation</mark> today and everyone saw</div>
|
||||
<div class="result-meta-row">
|
||||
<span class="result-date">Feb 22</span>
|
||||
<span class="result-distortion">Catastrophizing</span>
|
||||
<span class="result-distortion">Overgeneralization</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" style="color: var(--faint-light); flex-shrink: 0;">
|
||||
<path d="M5 3l4 4-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="result-row" href="33-gallery-detail.html">
|
||||
<div class="result-thumb">
|
||||
<div style="position: absolute; inset: 0; background: radial-gradient(circle, rgba(245,158,11,0.3), transparent 70%);"></div>
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" style="mix-blend-mode: screen; position: relative; z-index: 1;">
|
||||
<defs><linearGradient id="gs2" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#FDE68A" stop-opacity="0.9"/><stop offset="100%" stop-color="#D97706" stop-opacity="0.4"/></linearGradient></defs>
|
||||
<g transform="translate(18,18)"><g><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs2)"/></g><g transform="rotate(45)"><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs2)"/></g><g transform="rotate(90)"><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs2)"/></g><g transform="rotate(135)"><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs2)"/></g><g transform="rotate(180)"><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs2)"/></g><g transform="rotate(225)"><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs2)"/></g><g transform="rotate(270)"><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs2)"/></g><g transform="rotate(315)"><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs2)"/></g></g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="result-info">
|
||||
<div class="result-text">Everything is going to fall apart if I don't fix this today — no time for another <mark style="background: rgba(59,130,246,0.2); color: var(--sapphire-light); border-radius: 2px; padding: 0 2px;">presentation</mark></div>
|
||||
<div class="result-meta-row">
|
||||
<span class="result-date">Feb 19</span>
|
||||
<span class="result-distortion">Catastrophizing</span>
|
||||
<span class="result-distortion">Fortune Telling</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" style="color: var(--faint-light); flex-shrink: 0;">
|
||||
<path d="M5 3l4 4-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="result-row" href="33-gallery-detail.html">
|
||||
<div class="result-thumb">
|
||||
<div style="position: absolute; inset: 0; background: radial-gradient(circle, rgba(99,102,241,0.3), transparent 70%);"></div>
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" style="mix-blend-mode: screen; position: relative; z-index: 1;">
|
||||
<defs><linearGradient id="gs3" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#A5B4FC" stop-opacity="0.9"/><stop offset="100%" stop-color="#4338CA" stop-opacity="0.4"/></linearGradient></defs>
|
||||
<g transform="translate(18,18)"><g><path d="M0,0 L5,-15 L0,-19 L-5,-15Z" fill="url(#gs3)"/></g><g transform="rotate(60)"><path d="M0,0 L5,-15 L0,-19 L-5,-15Z" fill="url(#gs3)"/></g><g transform="rotate(120)"><path d="M0,0 L5,-15 L0,-19 L-5,-15Z" fill="url(#gs3)"/></g><g transform="rotate(180)"><path d="M0,0 L5,-15 L0,-19 L-5,-15Z" fill="url(#gs3)"/></g><g transform="rotate(240)"><path d="M0,0 L5,-15 L0,-19 L-5,-15Z" fill="url(#gs3)"/></g><g transform="rotate(300)"><path d="M0,0 L5,-15 L0,-19 L-5,-15Z" fill="url(#gs3)"/></g></g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="result-info">
|
||||
<div class="result-text">I should be further along by now — one bad <mark style="background: rgba(59,130,246,0.2); color: var(--sapphire-light); border-radius: 2px; padding: 0 2px;">presentation</mark> proves it</div>
|
||||
<div class="result-meta-row">
|
||||
<span class="result-date">Feb 17</span>
|
||||
<span class="result-distortion">Should Statements</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" style="color: var(--faint-light); flex-shrink: 0;">
|
||||
<path d="M5 3l4 4-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- Suggestion: No results state when query is empty -->
|
||||
<div style="padding: 20px var(--space-4); text-align: center; display: none;" id="emptyState">
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" style="margin: 0 auto 12px; display: block; opacity: 0.3;">
|
||||
<circle cx="22" cy="22" r="14" stroke="var(--dim-light)" stroke-width="2"/>
|
||||
<path d="M33 33l9 9" stroke="var(--dim-light)" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<div class="subheading text-dim">No results found</div>
|
||||
<div class="body-sm text-faint" style="margin-top: var(--space-1);">Try different keywords or remove filters</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function clearSearch() {
|
||||
const input = document.getElementById('searchInput');
|
||||
input.value = '';
|
||||
document.getElementById('resultsCount').textContent = 'Type to search your gallery';
|
||||
input.focus();
|
||||
}
|
||||
|
||||
function toggleFilter(el) {
|
||||
el.classList.toggle('active');
|
||||
}
|
||||
|
||||
function toggleDateFilter(el) {
|
||||
document.querySelectorAll('.filter-chip:not(.amber)').forEach(c => c.classList.remove('active'));
|
||||
el.classList.add('active');
|
||||
}
|
||||
|
||||
document.getElementById('searchInput').addEventListener('input', function() {
|
||||
const q = this.value.trim();
|
||||
const count = document.getElementById('resultsCount');
|
||||
if (q) {
|
||||
count.textContent = `3 results for "${q}"`;
|
||||
} else {
|
||||
count.textContent = 'Type to search your gallery';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
354
initial mockups/screens/guide/65-guide-checkin-conversation.html
Normal file
354
initial mockups/screens/guide/65-guide-checkin-conversation.html
Normal file
@@ -0,0 +1,354 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Guide Check-In</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.goal-context-header {
|
||||
background: var(--kalei-navy);
|
||||
border-bottom: 1px solid var(--twilight);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.goal-context-ring {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.goal-context-ring svg { position: absolute; transform: rotate(-90deg); }
|
||||
.goal-context-pct {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--emerald-light);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.goal-context-info { flex: 1; min-width: 0; }
|
||||
.goal-context-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--emerald);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.goal-context-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.chat-frame {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chat-area {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--space-4) var(--space-4) var(--space-2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.chat-area::-webkit-scrollbar { display: none; }
|
||||
/* Guide bubble — prismatic border card */
|
||||
.guide-bubble {
|
||||
background: var(--kalei-navy);
|
||||
border-radius: 16px 16px 16px 4px;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
position: relative;
|
||||
max-width: 85%;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.guide-bubble::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: 17px 17px 17px 5px;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
z-index: -1;
|
||||
}
|
||||
.guide-bubble-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.guide-icon-sm {
|
||||
font-size: 12px;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
.guide-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--amethyst-light);
|
||||
}
|
||||
.guide-bubble p {
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
color: var(--soft-light);
|
||||
margin: 0;
|
||||
}
|
||||
.guide-bubble .stat-highlight {
|
||||
color: var(--emerald-light);
|
||||
font-weight: 600;
|
||||
}
|
||||
/* User bubble */
|
||||
.user-bubble {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: 16px 16px 4px 16px;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
max-width: 80%;
|
||||
align-self: flex-end;
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
.proof-point {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-2);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
background: rgba(16,185,129,0.06);
|
||||
border-radius: var(--radius-md);
|
||||
border-left: 2px solid var(--emerald);
|
||||
}
|
||||
.proof-point-text {
|
||||
font-size: 12px;
|
||||
color: var(--emerald-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
.if-then-block {
|
||||
background: rgba(139,92,246,0.06);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid rgba(139,92,246,0.2);
|
||||
padding: var(--space-3);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
.if-then-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--amethyst-light);
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
.if-then-text {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.input-accessory {
|
||||
height: 64px;
|
||||
background: var(--kalei-navy);
|
||||
border-top: 1px solid var(--twilight);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 0 var(--space-3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.chat-input {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 0 var(--space-4);
|
||||
font-family: var(--font-primary);
|
||||
font-size: 15px;
|
||||
color: var(--pure-light);
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease-out;
|
||||
}
|
||||
.chat-input::placeholder { color: var(--faint-light); }
|
||||
.chat-input:focus { border-color: var(--amethyst); }
|
||||
.send-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--emerald));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 0 12px rgba(139,92,246,0.3);
|
||||
transition: opacity 0.2s ease-out;
|
||||
}
|
||||
.send-btn:hover { opacity: 0.85; }
|
||||
.past-checkins-link {
|
||||
text-align: center;
|
||||
padding: var(--space-2) 0;
|
||||
font-size: 12px;
|
||||
color: var(--amethyst-light);
|
||||
text-decoration: none;
|
||||
flex-shrink: 0;
|
||||
background: var(--kalei-navy);
|
||||
border-top: 1px solid var(--twilight);
|
||||
}
|
||||
@keyframes breathing {
|
||||
0%, 100% { opacity: 0.6; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.05); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(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="nav-header">
|
||||
<a class="nav-back" href="../lens/27-lens-goal-detail.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Weekly Check-In</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<!-- Goal context banner -->
|
||||
<div class="goal-context-header">
|
||||
<div class="goal-context-ring">
|
||||
<svg width="44" height="44" viewBox="0 0 44 44">
|
||||
<defs>
|
||||
<linearGradient id="ci-grEm" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="22" cy="22" r="18" fill="none" stroke="var(--twilight)" stroke-width="2.5"/>
|
||||
<!-- 65% of circumference: 2πr ≈ 113.1, 65% = 73.5, remainder = 39.6 -->
|
||||
<circle cx="22" cy="22" r="18" fill="none" stroke="url(#ci-grEm)" stroke-width="2.5"
|
||||
stroke-dasharray="73.5 39.6" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="goal-context-pct">65%</span>
|
||||
</div>
|
||||
<div class="goal-context-info">
|
||||
<div class="goal-context-label">Active Goal</div>
|
||||
<div class="goal-context-title">Present with confidence</div>
|
||||
</div>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="color: var(--faint-light); flex-shrink: 0;">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="chat-frame">
|
||||
<div class="chat-area">
|
||||
|
||||
<!-- Guide opens with specific data reference -->
|
||||
<div class="guide-bubble" style="animation: fadeIn 0.4s ease-out both;">
|
||||
<div class="guide-bubble-header">
|
||||
<span class="guide-icon-sm">◇</span>
|
||||
<span class="guide-label">The Guide</span>
|
||||
</div>
|
||||
<p>I noticed something this week, Alex. You've had <span class="stat-highlight">3 Turns about presentations</span> in the last 7 days — Wednesday's "I completely bombed my presentation" was the most recent. How did the rest of that day actually go?</p>
|
||||
</div>
|
||||
|
||||
<!-- User response -->
|
||||
<div class="user-bubble" style="animation: fadeIn 0.4s ease-out 0.15s both; opacity: 0;">
|
||||
Honestly, not as bad as I expected. My manager said the data was solid. I just froze at the start and never recovered mentally.
|
||||
</div>
|
||||
|
||||
<!-- Guide follow-up — names the pattern specifically -->
|
||||
<div class="guide-bubble" style="animation: fadeIn 0.4s ease-out 0.3s both; opacity: 0;">
|
||||
<div class="guide-bubble-header">
|
||||
<span class="guide-icon-sm">◇</span>
|
||||
<span class="guide-label">The Guide</span>
|
||||
</div>
|
||||
<p>That gap — between how you experience it and how it lands — keeps showing up. Your mind calls it a bomb; your manager calls it solid. That's Catastrophizing doing its thing.</p>
|
||||
<div class="proof-point">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M6 1L10 6L6 11L2 6Z" fill="var(--emerald)" opacity="0.9"/>
|
||||
</svg>
|
||||
<span class="proof-point-text">Catastrophizing: your most common fragment (7 of 47 Turns)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Guide asks for real-world practice check -->
|
||||
<div class="guide-bubble" style="animation: fadeIn 0.4s ease-out 0.45s both; opacity: 0;">
|
||||
<div class="guide-bubble-header">
|
||||
<span class="guide-icon-sm">◇</span>
|
||||
<span class="guide-label">The Guide</span>
|
||||
</div>
|
||||
<p>Since you started "Present with confidence" on Feb 5, have there been any moments outside the app — even tiny ones — where you held your ground in a room?</p>
|
||||
</div>
|
||||
|
||||
<!-- User response -->
|
||||
<div class="user-bubble" style="animation: fadeIn 0.4s ease-out 0.6s both; opacity: 0;">
|
||||
Yeah, actually. I pushed back on a timeline in a standup last week. Normally I'd just say nothing.
|
||||
</div>
|
||||
|
||||
<!-- Guide closes with celebration and if-then -->
|
||||
<div class="guide-bubble" style="animation: fadeIn 0.4s ease-out 0.75s both; opacity: 0;">
|
||||
<div class="guide-bubble-header">
|
||||
<span class="guide-icon-sm">◇</span>
|
||||
<span class="guide-label">The Guide</span>
|
||||
</div>
|
||||
<p>That's exactly the kind of evidence this goal is built on. Pushing back on a timeline is <span class="stat-highlight">presenting with confidence</span> — just without the slides. Want to save that as evidence?</p>
|
||||
<div class="if-then-block">
|
||||
<div class="if-then-label">This week's focus</div>
|
||||
<div class="if-then-text">If I notice I'm freezing at the start of a presentation, <strong style="color: var(--amethyst-light);">then</strong> I'll say one sentence out loud — anything — to break the silence.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<a class="past-checkins-link" href="66-guide-checkin-summary.html">View check-in summary →</a>
|
||||
|
||||
<div class="input-accessory">
|
||||
<input class="chat-input" type="text" placeholder="Reply to the Guide...">
|
||||
<button class="send-btn">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M13 8L3 3.5L5 8L3 12.5L13 8Z" fill="white"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Stagger chat bubbles on load
|
||||
document.querySelectorAll('.guide-bubble, .user-bubble').forEach((el, i) => {
|
||||
if (!el.style.animationDelay) return;
|
||||
el.style.opacity = '0';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
252
initial mockups/screens/guide/66-guide-checkin-summary.html
Normal file
252
initial mockups/screens/guide/66-guide-checkin-summary.html
Normal file
@@ -0,0 +1,252 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Check-In Summary</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
@keyframes breathing {
|
||||
0%, 100% { opacity: 0.6; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.05); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.summary-card {
|
||||
background: var(--kalei-navy);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-3);
|
||||
position: relative;
|
||||
animation: fadeIn 0.35s ease-out both;
|
||||
}
|
||||
.summary-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: 17px;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
z-index: -1;
|
||||
}
|
||||
.card-section-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.card-section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.card-section-meta {
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--twilight);
|
||||
margin: var(--space-3) 0;
|
||||
}
|
||||
/* Plan adjustment */
|
||||
.plan-adjust-block {
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.plan-adjust-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.plan-new {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
background: rgba(139,92,246,0.08);
|
||||
border: 1px solid rgba(139,92,246,0.2);
|
||||
border-radius: var(--radius-md);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.plan-new strong {
|
||||
color: var(--amethyst-light);
|
||||
}
|
||||
/* Evidence proof points */
|
||||
.proof-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.proof-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.proof-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.proof-dot.emerald { background: var(--emerald); box-shadow: 0 0 6px rgba(16,185,129,0.4); }
|
||||
.proof-dot.amber { background: var(--amber); box-shadow: 0 0 6px rgba(245,158,11,0.4); }
|
||||
.proof-dot.sapphire{ background: var(--sapphire);box-shadow: 0 0 6px rgba(59,130,246,0.4); }
|
||||
.proof-item-text {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.5;
|
||||
}
|
||||
/* Next check-in */
|
||||
.next-checkin-card {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-3);
|
||||
animation: fadeIn 0.35s ease-out 0.2s both;
|
||||
opacity: 0;
|
||||
}
|
||||
.next-checkin-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(139,92,246,0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.next-checkin-info { flex: 1; }
|
||||
.next-checkin-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--amethyst);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.next-checkin-date {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.history-footer {
|
||||
text-align: center;
|
||||
padding: var(--space-3) 0 var(--space-6);
|
||||
font-size: 12px;
|
||||
color: var(--faint-light);
|
||||
}
|
||||
.done-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 52px;
|
||||
background: var(--amethyst);
|
||||
color: var(--pure-light);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-lg);
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 20px rgba(139,92,246,0.25);
|
||||
margin-bottom: var(--space-3);
|
||||
transition: background 0.2s ease-out;
|
||||
animation: fadeIn 0.35s ease-out 0.3s both;
|
||||
opacity: 0;
|
||||
}
|
||||
.done-btn:hover { background: var(--amethyst-light); }
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="65-guide-checkin-conversation.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Check-In Summary</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-top: var(--space-4); padding-bottom: var(--space-6);">
|
||||
|
||||
<!-- Main summary card with prismatic border -->
|
||||
<div class="summary-card">
|
||||
<div class="card-section-label">What was reviewed</div>
|
||||
<div class="card-section-title">Present with confidence</div>
|
||||
<div class="card-section-meta">Week of Feb 16–22, 2026 · Weekly check-in · 65% progress</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- This week's focus / if-then -->
|
||||
<div class="plan-adjust-block">
|
||||
<div class="plan-adjust-label">This week's focus</div>
|
||||
<div class="plan-new">If I notice I'm freezing at the start of a presentation, <strong>then</strong> I'll say one sentence out loud — anything — to break the silence.</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- Evidence proof points -->
|
||||
<div class="card-section-label" style="margin-bottom: var(--space-3);">Evidence highlighted</div>
|
||||
<div class="proof-list">
|
||||
<div class="proof-item">
|
||||
<div class="proof-dot emerald"></div>
|
||||
<span class="proof-item-text">Pushed back on a timeline in standup — held ground without a deck</span>
|
||||
</div>
|
||||
<div class="proof-item">
|
||||
<div class="proof-dot amber"></div>
|
||||
<span class="proof-item-text">Manager called Wednesday's presentation "solid" — the freeze was internal, not visible</span>
|
||||
</div>
|
||||
<div class="proof-item">
|
||||
<div class="proof-dot sapphire"></div>
|
||||
<span class="proof-item-text">3 Turns this week about presentations — you're naming the pattern, not avoiding it</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Next check-in -->
|
||||
<div class="next-checkin-card">
|
||||
<div class="next-checkin-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<rect x="3" y="4" width="14" height="13" rx="2" stroke="var(--amethyst)" stroke-width="1.2"/>
|
||||
<path d="M7 2v3M13 2v3" stroke="var(--amethyst)" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<path d="M3 8h14" stroke="var(--amethyst)" stroke-width="1.2"/>
|
||||
<rect x="7" y="11" width="2" height="2" rx="0.5" fill="var(--amethyst)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="next-checkin-info">
|
||||
<div class="next-checkin-label">Next check-in</div>
|
||||
<div class="next-checkin-date">Sunday, Mar 1, 2026</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="done-btn" href="../lens/27-lens-goal-detail.html">Back to goal</a>
|
||||
|
||||
<div class="history-footer">Saved to your coaching history</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
338
initial mockups/screens/guide/67-guide-bridge-discovery.html
Normal file
338
initial mockups/screens/guide/67-guide-bridge-discovery.html
Normal file
@@ -0,0 +1,338 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Guide Discovery Bridge</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.screen-aura {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(139,92,246,0.15) 0%, transparent 70%);
|
||||
filter: blur(50px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
@keyframes breathing {
|
||||
0%, 100% { opacity: 0.6; transform: scale(1) translate(-50%, -50%); }
|
||||
50% { opacity: 1; transform: scale(1.05) translate(-48%, -52%); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes slideDown {
|
||||
from { opacity: 0; transform: translateY(-16px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
/* Bridge card */
|
||||
.bridge-card {
|
||||
background: var(--kalei-navy);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
position: relative;
|
||||
animation: slideDown 0.4s ease-out both;
|
||||
z-index: 2;
|
||||
}
|
||||
.bridge-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: 17px;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
z-index: -1;
|
||||
}
|
||||
.bridge-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.bridge-card-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.bridge-guide-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(139,92,246,0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
.bridge-dismiss {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: var(--deep-glass);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
color: var(--dim-light);
|
||||
transition: background 0.2s ease-out;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.bridge-dismiss:hover { background: var(--twilight); }
|
||||
.bridge-card-heading {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
margin-left: 36px;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.bridge-card-body {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.6;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.bridge-card-body strong {
|
||||
color: var(--amber-light);
|
||||
font-weight: 600;
|
||||
}
|
||||
.bridge-actions {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.bridge-btn-primary {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: var(--amethyst);
|
||||
color: var(--pure-light);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 16px rgba(139,92,246,0.25);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.bridge-btn-primary:hover { background: var(--amethyst-light); }
|
||||
.bridge-btn-ghost {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: transparent;
|
||||
color: var(--dim-light);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--twilight);
|
||||
transition: color 0.2s ease-out, border-color 0.2s ease-out;
|
||||
}
|
||||
.bridge-btn-ghost:hover { color: var(--soft-light); border-color: rgba(255,255,255,0.15); }
|
||||
|
||||
/* Turn Home content below the bridge (dimmed) */
|
||||
.home-greeting {
|
||||
padding: var(--space-4) 0 var(--space-3);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.textarea-wrapper {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.turn-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
margin-bottom: var(--space-2);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s ease-out, border-color 0.2s ease-out;
|
||||
opacity: 0.65;
|
||||
}
|
||||
.turn-card-thought {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.turn-card-date {
|
||||
font-size: 11px;
|
||||
color: var(--faint-light);
|
||||
}
|
||||
.mini-kaleido-wrap {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.section-header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.section-title-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--dim-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.turn-btn-wrapper {
|
||||
position: sticky;
|
||||
bottom: calc(var(--tab-bar-height) + 12px);
|
||||
z-index: 5;
|
||||
padding: var(--space-2) 0 0;
|
||||
}
|
||||
.content-pad { padding-bottom: 80px; }
|
||||
</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 content-pad">
|
||||
<div class="screen-aura"></div>
|
||||
|
||||
<!-- Discovery bridge card at top -->
|
||||
<div class="bridge-card" style="margin-top: var(--space-4);">
|
||||
<div class="bridge-card-header">
|
||||
<div class="bridge-card-title-row">
|
||||
<div class="bridge-guide-icon">◇</div>
|
||||
</div>
|
||||
<button class="bridge-dismiss" id="dismissBtn" aria-label="Dismiss">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2 2L10 10M10 2L2 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bridge-card-heading">Work stress keeps coming up</div>
|
||||
<div class="bridge-card-body">
|
||||
I noticed work appeared in <strong>4 Mirror sessions</strong> and <strong>2 Turns</strong> this week — mostly around pressure to perform and feeling unseen. That energy could go somewhere. Want to shape it into a goal?
|
||||
</div>
|
||||
<div class="bridge-actions">
|
||||
<a class="bridge-btn-primary" href="../lens/20-lens-dashboard.html">Open Lens</a>
|
||||
<a class="bridge-btn-ghost" href="../turn/10-turn-home.html">Just noticing</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Turn Home content (dimmed, in background) -->
|
||||
<div class="home-greeting">
|
||||
<div class="heading text-pure">Good morning, Alex</div>
|
||||
<div class="body mt-1" style="color: var(--dim-light);">What's weighing on you?</div>
|
||||
</div>
|
||||
|
||||
<div class="textarea-wrapper">
|
||||
<textarea class="textarea-field" style="min-height:100px; font-size:16px;" placeholder="Something happened today..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="section-header-row">
|
||||
<span class="section-title-label">Recent Turns</span>
|
||||
</div>
|
||||
|
||||
<!-- Dimmed turn cards — canonical data, correct dates -->
|
||||
<a class="turn-card" href="../turn/13-turn-results.html">
|
||||
<div class="mini-kaleido-wrap">
|
||||
<img src="../../assets/kalei-logo.svg" width="48" height="48" alt="Kalei">
|
||||
</div>
|
||||
<div style="flex:1; overflow:hidden;">
|
||||
<div class="turn-card-thought">"I completely bombed my presentation today and everyone saw"</div>
|
||||
<div class="turn-card-date">Today · Feb 22</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="turn-card" href="../turn/13-turn-results.html">
|
||||
<div class="mini-kaleido-wrap">
|
||||
<img src="../../assets/kalei-logo.svg" width="48" height="48" alt="Kalei">
|
||||
</div>
|
||||
<div style="flex:1; overflow:hidden;">
|
||||
<div class="turn-card-thought">"Nobody at work actually cares about my ideas"</div>
|
||||
<div class="turn-card-date">Yesterday · Feb 21</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="turn-btn-wrapper">
|
||||
<a href="../turn/11-turn-input-active.html" class="btn btn-primary" style="text-decoration:none;">
|
||||
<svg width="18" height="18" viewBox="-12 -12 24 24" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="db-btnF" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#db-btnF)" opacity="0.9"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||||
</svg>
|
||||
Turn the kaleidoscope
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item active" data-tab="turn" href="../turn/10-turn-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 2L20 12L12 22L4 12Z" fill="currentColor" opacity="0.9"/><path d="M12 2L20 12L12 12Z" fill="white" opacity="0.15"/></svg>
|
||||
<span class="tab-label">Turn</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="mirror" href="../mirror/15-mirror-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 3L16 8L18 14L12 19L6 14L8 8Z" stroke="currentColor" fill="none" stroke-width="1.2"/></svg>
|
||||
<span class="tab-label">Mirror</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="lens" href="../lens/20-lens-dashboard.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="currentColor" fill="none" stroke-width="1.2"/><circle cx="12" cy="12" r="4" stroke="currentColor" fill="none" stroke-width="0.8"/></svg>
|
||||
<span class="tab-label">Lens</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="gallery" href="../gallery/31-gallery-all.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><rect x="3" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/></svg>
|
||||
<span class="tab-label">Gallery</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="you" href="../you/35-you-profile.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="9" r="4" stroke="currentColor" fill="none" stroke-width="1.2"/><path d="M4 20C4 16 8 14 12 14C16 14 20 16 20 20" stroke="currentColor" fill="none" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
<span class="tab-label">You</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('dismissBtn').addEventListener('click', function() {
|
||||
const card = this.closest('.bridge-card');
|
||||
card.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out, max-height 0.4s ease-out, margin 0.4s ease-out, padding 0.4s ease-out';
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(-8px)';
|
||||
card.style.maxHeight = '0';
|
||||
card.style.overflow = 'hidden';
|
||||
card.style.marginBottom = '0';
|
||||
card.style.padding = '0';
|
||||
document.querySelectorAll('.turn-card').forEach(c => c.style.opacity = '1');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
298
initial mockups/screens/guide/68-guide-bridge-reinforcement.html
Normal file
298
initial mockups/screens/guide/68-guide-bridge-reinforcement.html
Normal file
@@ -0,0 +1,298 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Guide Reinforcement Bridge</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.screen-aura {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(16,185,129,0.12) 0%, transparent 70%);
|
||||
filter: blur(50px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
@keyframes breathing {
|
||||
0%, 100% { opacity: 0.6; transform: scale(1) translate(-50%, -50%); }
|
||||
50% { opacity: 1; transform: scale(1.05) translate(-48%, -52%); }
|
||||
}
|
||||
@keyframes slideDown {
|
||||
from { opacity: 0; transform: translateY(-16px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.bridge-card {
|
||||
background: var(--kalei-navy);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
position: relative;
|
||||
animation: slideDown 0.4s ease-out both;
|
||||
z-index: 2;
|
||||
}
|
||||
.bridge-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: 17px;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
z-index: -1;
|
||||
}
|
||||
.bridge-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.bridge-guide-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(139,92,246,0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.bridge-dismiss {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: var(--deep-glass);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
color: var(--dim-light);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.bridge-dismiss:hover { background: var(--twilight); }
|
||||
.bridge-card-heading {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.bridge-card-body {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.6;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.bridge-card-body strong {
|
||||
color: var(--amethyst-light);
|
||||
font-weight: 600;
|
||||
}
|
||||
.bridge-card-body em {
|
||||
color: var(--emerald-light);
|
||||
font-style: italic;
|
||||
}
|
||||
.bridge-actions {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.bridge-btn-primary {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: var(--emerald);
|
||||
color: var(--pure-light);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 16px rgba(16,185,129,0.25);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.bridge-btn-primary:hover { background: var(--emerald-light); }
|
||||
.bridge-btn-ghost {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: transparent;
|
||||
color: var(--dim-light);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--twilight);
|
||||
transition: color 0.2s ease-out, border-color 0.2s ease-out;
|
||||
}
|
||||
.bridge-btn-ghost:hover { color: var(--soft-light); border-color: rgba(255,255,255,0.15); }
|
||||
/* Lens dashboard elements (background, dimmed) */
|
||||
.lens-heading { color: var(--emerald-light); margin-bottom: 4px; }
|
||||
.goal-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-3);
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.goal-ring-wrap {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
.goal-ring-wrap svg { transform: rotate(-90deg); position: absolute; }
|
||||
.goal-ring-pct { font-size: 14px; font-weight: 700; color: var(--pure-light); position: relative; z-index: 1; }
|
||||
.goal-info { flex: 1; min-width: 0; }
|
||||
.goal-title { font-size: 15px; font-weight: 600; color: var(--pure-light); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.goal-meta { font-size: 12px; color: var(--dim-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
</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" style="padding-top: var(--space-4); padding-bottom: 100px;">
|
||||
<div class="screen-aura"></div>
|
||||
<div style="position: relative; z-index: 1;">
|
||||
|
||||
<!-- Reinforcement bridge card at top -->
|
||||
<div class="bridge-card">
|
||||
<div class="bridge-card-header">
|
||||
<div class="bridge-guide-icon">◇</div>
|
||||
<button class="bridge-dismiss" id="dismissBtn" aria-label="Dismiss">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2 2L10 10M10 2L2 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bridge-card-heading">Your Turn connects to something you're building</div>
|
||||
<div class="bridge-card-body">
|
||||
Your Tuesday reframe — "I pushed back and held my ground" — is exactly the kind of evidence your goal <em>"Present with confidence"</em> is built on. You're <strong>65% there</strong>, and this week added real proof.
|
||||
</div>
|
||||
<div class="bridge-actions">
|
||||
<a class="bridge-btn-primary" href="../lens/27-lens-goal-detail.html">See the progress</a>
|
||||
<a class="bridge-btn-ghost" href="../lens/20-lens-dashboard.html">Not now</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lens dashboard content (dimmed background) -->
|
||||
<div class="heading lens-heading">Your Lens</div>
|
||||
<div class="body-sm text-dim" style="margin-bottom: var(--space-4);">3 active goals · 47 evidence tiles</div>
|
||||
|
||||
<!-- Goal 1: Present with confidence (emerald, 65%) -->
|
||||
<a class="goal-card" href="../lens/27-lens-goal-detail.html">
|
||||
<div class="goal-ring-wrap">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64">
|
||||
<defs>
|
||||
<linearGradient id="rb-grEm" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="32" cy="32" r="27" fill="none" stroke="var(--twilight)" stroke-width="3.5"/>
|
||||
<!-- 65% of 2π×27 ≈ 169.6: 65% = 110.2, remainder = 59.4 -->
|
||||
<circle cx="32" cy="32" r="27" fill="none" stroke="url(#rb-grEm)" stroke-width="3.5"
|
||||
stroke-dasharray="110.2 59.4" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="goal-ring-pct">65%</span>
|
||||
</div>
|
||||
<div class="goal-info">
|
||||
<div class="goal-title">Present with confidence</div>
|
||||
<div class="goal-meta">Started Feb 5 · 2 new tiles this week</div>
|
||||
</div>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="color: var(--faint-light); flex-shrink:0;">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- Goal 2: Set boundaries at work (sapphire, 40%) -->
|
||||
<a class="goal-card" href="../lens/27-lens-goal-detail.html">
|
||||
<div class="goal-ring-wrap">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64">
|
||||
<defs>
|
||||
<linearGradient id="rb-grSa" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/>
|
||||
<stop offset="100%" stop-color="#1D4ED8"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="32" cy="32" r="27" fill="none" stroke="var(--twilight)" stroke-width="3.5"/>
|
||||
<!-- 40% of 169.6 = 67.8, remainder = 101.8 -->
|
||||
<circle cx="32" cy="32" r="27" fill="none" stroke="url(#rb-grSa)" stroke-width="3.5"
|
||||
stroke-dasharray="67.8 101.8" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="goal-ring-pct">40%</span>
|
||||
</div>
|
||||
<div class="goal-info">
|
||||
<div class="goal-title">Set boundaries at work</div>
|
||||
<div class="goal-meta">Started Feb 10</div>
|
||||
</div>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="color: var(--faint-light); flex-shrink:0;">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item inactive" data-tab="turn" href="../turn/10-turn-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 2L20 12L12 22L4 12Z" fill="currentColor" opacity="0.9"/><path d="M12 2L20 12L12 12Z" fill="white" opacity="0.15"/></svg>
|
||||
<span class="tab-label">Turn</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="mirror" href="../mirror/15-mirror-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 3L16 8L18 14L12 19L6 14L8 8Z" stroke="currentColor" fill="none" stroke-width="1.2"/></svg>
|
||||
<span class="tab-label">Mirror</span>
|
||||
</a>
|
||||
<a class="tab-item active" data-tab="lens" href="../lens/20-lens-dashboard.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="currentColor" fill="none" stroke-width="1.2"/><circle cx="12" cy="12" r="4" stroke="currentColor" fill="none" stroke-width="0.8"/></svg>
|
||||
<span class="tab-label">Lens</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="gallery" href="../gallery/31-gallery-all.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><rect x="3" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/></svg>
|
||||
<span class="tab-label">Gallery</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="you" href="../you/35-you-profile.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="9" r="4" stroke="currentColor" fill="none" stroke-width="1.2"/><path d="M4 20C4 16 8 14 12 14C16 14 20 16 20 20" stroke="currentColor" fill="none" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
<span class="tab-label">You</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('dismissBtn').addEventListener('click', function() {
|
||||
const card = this.closest('.bridge-card');
|
||||
card.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out, max-height 0.4s ease-out, margin 0.4s ease-out, padding 0.4s ease-out';
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(-8px)';
|
||||
card.style.maxHeight = '0';
|
||||
card.style.overflow = 'hidden';
|
||||
card.style.marginBottom = '0';
|
||||
card.style.padding = '0';
|
||||
document.querySelectorAll('.goal-card').forEach(c => c.style.opacity = '1');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
293
initial mockups/screens/guide/69-guide-bridge-integration.html
Normal file
293
initial mockups/screens/guide/69-guide-bridge-integration.html
Normal file
@@ -0,0 +1,293 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Guide Integration Bridge</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.chat-area {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--space-4) var(--space-4) var(--space-2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.chat-area::-webkit-scrollbar { display: none; }
|
||||
.chat-session-frame {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(var(--device-height) - var(--status-bar-height) - var(--nav-header-height) - 64px);
|
||||
}
|
||||
.input-accessory {
|
||||
height: 64px;
|
||||
background: var(--kalei-navy);
|
||||
border-top: 1px solid var(--twilight);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 0 var(--space-3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.chat-input {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 0 var(--space-4);
|
||||
font-family: var(--font-primary);
|
||||
font-size: 15px;
|
||||
color: var(--pure-light);
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease-out;
|
||||
}
|
||||
.chat-input::placeholder { color: var(--faint-light); }
|
||||
.chat-input:focus { border-color: var(--amethyst); }
|
||||
.send-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 0 12px rgba(139,92,246,0.3);
|
||||
}
|
||||
.nav-close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--deep-glass);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(16px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
/* Integration bridge card */
|
||||
.integration-card {
|
||||
background: var(--kalei-navy);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
position: relative;
|
||||
animation: slideUp 0.45s ease-out 0.5s both;
|
||||
}
|
||||
.integration-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: 17px;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
z-index: -1;
|
||||
}
|
||||
.integration-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.integration-icon {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.integration-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.keepsake-quote {
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
color: var(--sapphire-light);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border-left: 2px solid var(--sapphire);
|
||||
background: rgba(59,130,246,0.06);
|
||||
border-radius: 0 var(--radius-md) var(--radius-md) 0;
|
||||
margin-bottom: var(--space-3);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.keepsake-meta {
|
||||
font-size: 11px;
|
||||
color: var(--faint-light);
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
.current-quote {
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
color: var(--amber-light);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border-left: 2px solid var(--amber);
|
||||
background: rgba(245,158,11,0.06);
|
||||
border-radius: 0 var(--radius-md) var(--radius-md) 0;
|
||||
margin-bottom: var(--space-3);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.current-meta {
|
||||
font-size: 11px;
|
||||
color: var(--faint-light);
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
.integration-body {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.55;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.integration-actions {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.int-btn-primary {
|
||||
flex: 1;
|
||||
height: 42px;
|
||||
background: var(--amethyst);
|
||||
color: var(--pure-light);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 14px rgba(139,92,246,0.25);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.int-btn-primary:hover { background: var(--amethyst-light); }
|
||||
.int-btn-ghost {
|
||||
flex: 1;
|
||||
height: 42px;
|
||||
background: transparent;
|
||||
color: var(--dim-light);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--twilight);
|
||||
transition: color 0.2s ease-out;
|
||||
}
|
||||
.int-btn-ghost:hover { color: var(--soft-light); }
|
||||
.session-timer {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="../mirror/15-mirror-home.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div style="display:flex; flex-direction:column; align-items:center; position:absolute; left:50%; transform:translateX(-50%);">
|
||||
<span class="nav-title" style="position:static; transform:none;">Mirror Session</span>
|
||||
<span class="session-timer">12:47</span>
|
||||
</div>
|
||||
<a class="nav-close" href="../mirror/19-mirror-reflection.html">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<path d="M2 2L12 12M12 2L2 12" stroke="var(--dim-light)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="chat-session-frame">
|
||||
<div class="chat-area">
|
||||
|
||||
<!-- Earlier messages (faded — mirror session in progress) -->
|
||||
<div class="chat-bubble ai" style="opacity: 0.5; animation: fadeIn 0.3s ease-out both;">
|
||||
Welcome, Alex. I'm here to listen. What's been on your mind?
|
||||
</div>
|
||||
|
||||
<div class="chat-bubble user" style="opacity: 0.5; animation: fadeIn 0.3s ease-out 0.1s both;">
|
||||
I've been catastrophizing again. Every meeting I walk out of feeling like I've failed, even when nothing actually went wrong.
|
||||
</div>
|
||||
|
||||
<div class="chat-bubble ai" style="opacity: 0.5; animation: fadeIn 0.3s ease-out 0.2s both;">
|
||||
That gap between what happens and how you experience it — that sounds familiar. What does "failing" feel like in those moments?
|
||||
</div>
|
||||
|
||||
<div class="chat-bubble user" style="opacity: 0.5; animation: fadeIn 0.3s ease-out 0.3s both;">
|
||||
Like everyone noticed and I'm the only one who doesn't belong in the room.
|
||||
</div>
|
||||
|
||||
<!-- Last AI message — picks up the echo -->
|
||||
<div class="chat-bubble ai" style="animation: fadeIn 0.3s ease-out 0.4s both;">
|
||||
"Everyone noticed" — that's a pattern I've heard before. You've turned a version of this thought already, and you wrote something that pushed back on it.
|
||||
</div>
|
||||
|
||||
<!-- Integration bridge card after last message -->
|
||||
<div class="integration-card">
|
||||
<div class="integration-header">
|
||||
<span class="integration-icon">◇</span>
|
||||
<span class="integration-title">A fragment echoes a pattern from your Turns</span>
|
||||
</div>
|
||||
|
||||
<!-- Past Turn keepsake -->
|
||||
<div class="keepsake-quote">
|
||||
"Everyone sees my failures — but nobody actually told me that. I invented their reaction."
|
||||
<div class="keepsake-meta">Saved from Turn · Feb 18, 2026 · Mind Reading</div>
|
||||
</div>
|
||||
|
||||
<!-- Current Mirror fragment -->
|
||||
<div class="current-quote">
|
||||
"Everyone noticed and I'm the only one who doesn't belong."
|
||||
<div class="current-meta">Today's Mirror session · just now · Catastrophizing</div>
|
||||
</div>
|
||||
|
||||
<div class="integration-body">
|
||||
Same story, different day. The first time you named it — then reframed it. Which version is closer to what actually happened in those meetings?
|
||||
</div>
|
||||
|
||||
<div class="integration-actions">
|
||||
<a class="int-btn-primary" href="../you/40-evidence-wall-mid.html">See your Evidence Wall</a>
|
||||
<a class="int-btn-ghost" href="../mirror/16-mirror-session.html">Keep writing</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="input-accessory">
|
||||
<input class="chat-input" type="text" placeholder="Write freely...">
|
||||
<button class="send-btn">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M15 9L3 4L5.5 9L3 14L15 9Z" fill="var(--void)" stroke="none"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
273
initial mockups/screens/guide/70-guide-attention-prompt.html
Normal file
273
initial mockups/screens/guide/70-guide-attention-prompt.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 — Guide Attention Prompt</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.screen-aura {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(139,92,246,0.12) 0%, transparent 70%);
|
||||
filter: blur(50px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
@keyframes breathing {
|
||||
0%, 100% { opacity: 0.6; transform: scale(1) translate(-50%, -50%); }
|
||||
50% { opacity: 1; transform: scale(1.05) translate(-48%, -52%); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.lens-heading { color: var(--emerald-light); margin-bottom: 4px; }
|
||||
.goal-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-3);
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
transition: border-color 0.2s ease-out;
|
||||
}
|
||||
.goal-card:hover { border-color: rgba(16,185,129,0.4); }
|
||||
.goal-ring-wrap {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
.goal-ring-wrap svg { transform: rotate(-90deg); position: absolute; }
|
||||
.goal-ring-pct { font-size: 14px; font-weight: 700; color: var(--pure-light); position: relative; z-index: 1; }
|
||||
.goal-info { flex: 1; min-width: 0; }
|
||||
.goal-title { font-size: 15px; font-weight: 600; color: var(--pure-light); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.goal-meta { font-size: 12px; color: var(--dim-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
/* Attention prompt card */
|
||||
.attention-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid rgba(139,92,246,0.35);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-3);
|
||||
box-shadow: 0 0 20px rgba(139,92,246,0.08);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
animation: fadeIn 0.35s ease-out 0.1s both;
|
||||
}
|
||||
.attention-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--amethyst), var(--sapphire), var(--emerald), transparent);
|
||||
opacity: 0.7;
|
||||
}
|
||||
.attention-label-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.attention-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--amethyst);
|
||||
box-shadow: 0 0 8px rgba(139,92,246,0.5);
|
||||
animation: breathingDot 2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes breathingDot {
|
||||
0%, 100% { box-shadow: 0 0 4px rgba(139,92,246,0.3); }
|
||||
50% { box-shadow: 0 0 12px rgba(139,92,246,0.7); }
|
||||
}
|
||||
.attention-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--amethyst-light);
|
||||
}
|
||||
.attention-heading {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.attention-body {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.65;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.attention-footer {
|
||||
font-size: 12px;
|
||||
color: var(--faint-light);
|
||||
font-style: italic;
|
||||
padding-top: var(--space-2);
|
||||
border-top: 1px solid var(--twilight);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.attention-footer span {
|
||||
color: var(--amethyst-light);
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
}
|
||||
.attention-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.got-it-btn {
|
||||
height: 48px;
|
||||
background: var(--amethyst);
|
||||
color: var(--pure-light);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 18px rgba(139,92,246,0.25);
|
||||
transition: background 0.2s ease-out;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-family: var(--font-primary);
|
||||
width: 100%;
|
||||
}
|
||||
.got-it-btn:hover { background: var(--amethyst-light); }
|
||||
.log-btn {
|
||||
height: 44px;
|
||||
background: var(--deep-glass);
|
||||
color: var(--amethyst-light);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border: 1px solid rgba(139,92,246,0.25);
|
||||
transition: border-color 0.2s ease-out;
|
||||
}
|
||||
.log-btn:hover { border-color: var(--amethyst); }
|
||||
</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" style="padding-top: var(--space-4); padding-bottom: 100px;">
|
||||
<div class="screen-aura"></div>
|
||||
<div style="position: relative; z-index: 1;">
|
||||
|
||||
<div class="heading lens-heading">Your Lens</div>
|
||||
<div class="body-sm text-dim" style="margin-bottom: var(--space-4);">3 active goals · 47 evidence tiles</div>
|
||||
|
||||
<!-- Goal card — Present with confidence (emerald, 65%) -->
|
||||
<a class="goal-card" href="../lens/27-lens-goal-detail.html">
|
||||
<div class="goal-ring-wrap">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64">
|
||||
<defs>
|
||||
<linearGradient id="ap-grEm" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="32" cy="32" r="27" fill="none" stroke="var(--twilight)" stroke-width="3.5"/>
|
||||
<!-- 65% of 2π×27 ≈ 169.6: 65% = 110.2, remainder = 59.4 -->
|
||||
<circle cx="32" cy="32" r="27" fill="none" stroke="url(#ap-grEm)" stroke-width="3.5"
|
||||
stroke-dasharray="110.2 59.4" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="goal-ring-pct">65%</span>
|
||||
</div>
|
||||
<div class="goal-info">
|
||||
<div class="goal-title">Present with confidence</div>
|
||||
<div class="goal-meta">Started Feb 5 · 2 new tiles this week</div>
|
||||
</div>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="color: var(--faint-light); flex-shrink:0;">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- Attention prompt card below goals -->
|
||||
<div class="attention-card">
|
||||
<div class="attention-label-row">
|
||||
<div class="attention-dot"></div>
|
||||
<span class="attention-label">Today's Focus: Notice</span>
|
||||
</div>
|
||||
<div class="attention-heading">Notice when you catch yourself catastrophizing</div>
|
||||
<div class="attention-body">
|
||||
Today, see if you can catch the moment your mind jumps from "this went badly" to "everything is ruined." You don't need to stop it — just notice the leap. The awareness itself is the practice.
|
||||
</div>
|
||||
<div class="attention-footer">
|
||||
Linked to your fragment: <span>Catastrophizing (7 of 47 Turns)</span>
|
||||
</div>
|
||||
<div class="attention-actions">
|
||||
<button class="got-it-btn" id="gotItBtn">Got it</button>
|
||||
<a class="log-btn" href="71-guide-moment-log.html" id="logBtn" style="display: none;">Log a moment</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item inactive" data-tab="turn" href="../turn/10-turn-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 2L20 12L12 22L4 12Z" fill="currentColor" opacity="0.9"/><path d="M12 2L20 12L12 12Z" fill="white" opacity="0.15"/></svg>
|
||||
<span class="tab-label">Turn</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="mirror" href="../mirror/15-mirror-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 3L16 8L18 14L12 19L6 14L8 8Z" stroke="currentColor" fill="none" stroke-width="1.2"/></svg>
|
||||
<span class="tab-label">Mirror</span>
|
||||
</a>
|
||||
<a class="tab-item active" data-tab="lens" href="../lens/20-lens-dashboard.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="currentColor" fill="none" stroke-width="1.2"/><circle cx="12" cy="12" r="4" stroke="currentColor" fill="none" stroke-width="0.8"/></svg>
|
||||
<span class="tab-label">Lens</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="gallery" href="../gallery/31-gallery-all.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><rect x="3" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/></svg>
|
||||
<span class="tab-label">Gallery</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="you" href="../you/35-you-profile.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="9" r="4" stroke="currentColor" fill="none" stroke-width="1.2"/><path d="M4 20C4 16 8 14 12 14C16 14 20 16 20 20" stroke="currentColor" fill="none" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
<span class="tab-label">You</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('gotItBtn').addEventListener('click', function() {
|
||||
this.textContent = 'Noted';
|
||||
this.style.background = 'rgba(139,92,246,0.4)';
|
||||
this.style.pointerEvents = 'none';
|
||||
document.getElementById('logBtn').style.display = 'flex';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
281
initial mockups/screens/guide/71-guide-moment-log.html
Normal file
281
initial mockups/screens/guide/71-guide-moment-log.html
Normal file
@@ -0,0 +1,281 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Log a Moment</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
@keyframes breathing {
|
||||
0%, 100% { opacity: 0.6; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.05); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes tileGlow {
|
||||
0%, 100% { box-shadow: 0 0 8px rgba(139,92,246,0.2); }
|
||||
50% { box-shadow: 0 0 24px rgba(139,92,246,0.5); }
|
||||
}
|
||||
.reminder-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid rgba(139,92,246,0.2);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
margin-bottom: var(--space-5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.reminder-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(139,92,246,0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.reminder-text {
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.reminder-text strong {
|
||||
color: var(--soft-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
.input-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.moment-textarea {
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
font-family: var(--font-primary);
|
||||
font-size: 16px;
|
||||
color: var(--pure-light);
|
||||
resize: none;
|
||||
outline: none;
|
||||
line-height: 1.6;
|
||||
transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.moment-textarea::placeholder { color: var(--faint-light); }
|
||||
.moment-textarea:focus {
|
||||
border-color: var(--amethyst);
|
||||
box-shadow: 0 0 0 3px rgba(139,92,246,0.1);
|
||||
}
|
||||
.logged-entry {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.logged-entry-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--faint-light);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.logged-entry-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.logged-entry-meta {
|
||||
font-size: 12px;
|
||||
color: var(--faint-light);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
/* Confirmation card */
|
||||
.confirmation-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid rgba(139,92,246,0.3);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
box-shadow: 0 0 16px rgba(139,92,246,0.08);
|
||||
}
|
||||
.confirmation-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.confirmation-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: rgba(139,92,246,0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.confirmation-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--amethyst-light);
|
||||
}
|
||||
.confirmation-body {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.6;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
/* Evidence tile preview */
|
||||
.evidence-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3);
|
||||
background: rgba(139,92,246,0.05);
|
||||
border: 1px solid rgba(139,92,246,0.15);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
.evidence-tile-mini {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--amethyst);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
animation: tileGlow 3s ease-in-out infinite;
|
||||
}
|
||||
.evidence-tile-info { flex: 1; }
|
||||
.evidence-tile-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--amethyst);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.evidence-tile-text {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
.save-btn {
|
||||
height: 52px;
|
||||
background: var(--amethyst);
|
||||
color: var(--pure-light);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 20px rgba(139,92,246,0.25);
|
||||
margin-bottom: var(--space-3);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.save-btn:hover { background: var(--amethyst-light); }
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="70-guide-attention-prompt.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Log a Moment</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-top: var(--space-4); padding-bottom: var(--space-8);">
|
||||
|
||||
<!-- Today's prompt reminder -->
|
||||
<div class="reminder-card">
|
||||
<div class="reminder-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<circle cx="9" cy="9" r="7" stroke="var(--amethyst)" stroke-width="1.2"/>
|
||||
<path d="M9 5v4l3 2" stroke="var(--amethyst)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="reminder-text">
|
||||
Today's prompt: <strong>Notice when you catch yourself catastrophizing</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text input -->
|
||||
<div class="input-label">What did you notice?</div>
|
||||
<textarea class="moment-textarea" placeholder="Describe the moment — what happened, when, what the leap looked like..."></textarea>
|
||||
|
||||
<!-- Mock logged entry (shown as already submitted) -->
|
||||
<div class="logged-entry">
|
||||
<div class="logged-entry-label">Logged today</div>
|
||||
<div class="logged-entry-text">"After the standup I immediately thought 'everyone thinks I'm incompetent now.' Then I caught it — nobody actually said that. My manager even nodded when I pushed back on the timeline."</div>
|
||||
<div class="logged-entry-meta">Today, 10:14 AM · Catastrophizing · Present with confidence</div>
|
||||
</div>
|
||||
|
||||
<!-- Confirmation card -->
|
||||
<div class="confirmation-card">
|
||||
<div class="confirmation-header">
|
||||
<div class="confirmation-icon">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M3 8l3.5 3.5L13 4" stroke="var(--amethyst)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="confirmation-title">That's the pattern — and you saw it</span>
|
||||
</div>
|
||||
<div class="confirmation-body">
|
||||
Catching the leap between "this went badly" and "everything is ruined" — that's awareness in action. You don't have to stop it every time. Noticing it is enough. Added to your Evidence Wall.
|
||||
</div>
|
||||
<!-- Evidence wall tile preview -->
|
||||
<div class="evidence-preview">
|
||||
<div class="evidence-tile-mini">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<linearGradient id="ml-grAm" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M12 2L20 12L12 22L4 12Z" fill="url(#ml-grAm)" opacity="0.9"/>
|
||||
<path d="M12 2L20 12L12 12Z" fill="#fff" opacity="0.15"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="evidence-tile-info">
|
||||
<div class="evidence-tile-label">New tile earned</div>
|
||||
<div class="evidence-tile-text">Moment logged · Feb 22, 2026</div>
|
||||
</div>
|
||||
<a href="../you/40-evidence-wall-mid.html" style="font-size: 12px; color: var(--amethyst-light); text-decoration: none; white-space: nowrap;">View wall →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="save-btn" href="../lens/20-lens-dashboard.html">Done</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
272
initial mockups/screens/guide/72-guide-evidence-mirror.html
Normal file
272
initial mockups/screens/guide/72-guide-evidence-mirror.html
Normal file
@@ -0,0 +1,272 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Guide Evidence (Mirror)</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
@keyframes breathing {
|
||||
0%, 100% { opacity: 0.5; transform: scale(1); }
|
||||
50% { opacity: 0.8; transform: scale(1.03); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
/* Mirror Reflection base styles (dimmed context) */
|
||||
.reflection-section {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-3);
|
||||
opacity: 0.7;
|
||||
}
|
||||
.reflection-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--amber-light);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.reflection-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.65;
|
||||
}
|
||||
.theme-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
.theme-chip {
|
||||
background: rgba(245,158,11,0.1);
|
||||
color: var(--amber-light);
|
||||
border: 1px solid rgba(245,158,11,0.2);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
/* Evidence intervention card */
|
||||
.evidence-card {
|
||||
background: var(--kalei-navy);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-3);
|
||||
position: relative;
|
||||
animation: slideUp 0.4s ease-out both;
|
||||
}
|
||||
.evidence-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: 17px;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
z-index: -1;
|
||||
}
|
||||
.evidence-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.evidence-guide-icon {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.evidence-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.evidence-intro {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.6;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
/* Proof points */
|
||||
.proof-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.proof-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
background: var(--deep-glass);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.proof-number {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
}
|
||||
.proof-number.emerald {
|
||||
background: rgba(16,185,129,0.15);
|
||||
color: var(--emerald-light);
|
||||
box-shadow: 0 0 8px rgba(16,185,129,0.2);
|
||||
}
|
||||
.proof-number.amber {
|
||||
background: rgba(245,158,11,0.15);
|
||||
color: var(--amber-light);
|
||||
box-shadow: 0 0 8px rgba(245,158,11,0.2);
|
||||
}
|
||||
.proof-number.sapphire {
|
||||
background: rgba(59,130,246,0.15);
|
||||
color: var(--sapphire-light);
|
||||
box-shadow: 0 0 8px rgba(59,130,246,0.2);
|
||||
}
|
||||
.proof-text {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.55;
|
||||
}
|
||||
.proof-text strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
.evidence-actions {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.ev-btn-primary {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: var(--amethyst);
|
||||
color: var(--pure-light);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 14px rgba(139,92,246,0.25);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.ev-btn-primary:hover { background: var(--amethyst-light); }
|
||||
.ev-btn-ghost {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: transparent;
|
||||
color: var(--dim-light);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--twilight);
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease-out;
|
||||
}
|
||||
.ev-btn-ghost:hover { color: var(--soft-light); }
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="../mirror/16-mirror-session.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Reflection</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-top: var(--space-4); padding-bottom: var(--space-8);">
|
||||
|
||||
<!-- Mirror reflection context (dimmed) -->
|
||||
<div class="reflection-section">
|
||||
<div class="reflection-label">Your session themes</div>
|
||||
<div class="reflection-text">Workplace pressure and self-worth ran through today's session — particularly around visibility and being taken seriously.</div>
|
||||
<div class="theme-chips">
|
||||
<span class="theme-chip">Self-doubt</span>
|
||||
<span class="theme-chip">Work pressure</span>
|
||||
<span class="theme-chip">Catastrophizing</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reflection-section">
|
||||
<div class="reflection-label">Fragment detected</div>
|
||||
<div class="reflection-text">"Nobody takes me seriously at work" — this came up twice today. Mind Reading pattern, with no supporting evidence cited.</div>
|
||||
</div>
|
||||
|
||||
<!-- Evidence intervention card -->
|
||||
<div class="evidence-card">
|
||||
<div class="evidence-header">
|
||||
<span class="evidence-guide-icon">◇</span>
|
||||
<span class="evidence-title">Here's what I've seen</span>
|
||||
</div>
|
||||
<div class="evidence-intro">
|
||||
You said nobody takes you seriously. Your own record says something different:
|
||||
</div>
|
||||
<div class="proof-list">
|
||||
<div class="proof-item">
|
||||
<div class="proof-number emerald">1</div>
|
||||
<div class="proof-text"><strong>14-day Mirror streak</strong> — you've shown up to reflect every single day this month. That's not someone who doesn't take themselves seriously.</div>
|
||||
</div>
|
||||
<div class="proof-item">
|
||||
<div class="proof-number amber">2</div>
|
||||
<div class="proof-text"><strong>47 Turns completed</strong> — each one is you choosing to examine a thought instead of just living inside it.</div>
|
||||
</div>
|
||||
<div class="proof-item">
|
||||
<div class="proof-number sapphire">3</div>
|
||||
<div class="proof-text"><strong>Mind Reading appears 4 times</strong> in your fragments — you've been naming this pattern. Naming it is the first move.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="evidence-actions">
|
||||
<a class="ev-btn-primary" href="../you/40-evidence-wall-mid.html">See your full Evidence Wall</a>
|
||||
<button class="ev-btn-ghost" id="dismissEvidence">Maybe later</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('dismissEvidence').addEventListener('click', function() {
|
||||
const card = this.closest('.evidence-card');
|
||||
card.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(-8px)';
|
||||
setTimeout(() => card.style.display = 'none', 300);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
252
initial mockups/screens/guide/73-guide-evidence-turn.html
Normal file
252
initial mockups/screens/guide/73-guide-evidence-turn.html
Normal file
@@ -0,0 +1,252 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Guide Evidence (Turn)</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
@keyframes breathing {
|
||||
0%, 100% { opacity: 0.6; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.05); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(16px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
/* Turn results base (dimmed context) */
|
||||
.turn-original-thought {
|
||||
font-size: 15px;
|
||||
color: var(--dim-light);
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
padding: var(--space-4) var(--space-2);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.reframe-block {
|
||||
background: var(--kalei-navy);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-3);
|
||||
opacity: 0.75;
|
||||
}
|
||||
.reframe-block.amethyst { border-left: 3px solid var(--amethyst); }
|
||||
.reframe-block.sapphire { border-left: 3px solid var(--sapphire); }
|
||||
.reframe-block.emerald { border-left: 3px solid var(--emerald); }
|
||||
.reframe-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.amethyst .reframe-label { color: var(--amethyst-light); }
|
||||
.sapphire .reframe-label { color: var(--sapphire-light); }
|
||||
.emerald .reframe-label { color: var(--emerald-light); }
|
||||
.reframe-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.6;
|
||||
}
|
||||
/* Evidence intervention card */
|
||||
.evidence-card {
|
||||
background: var(--kalei-navy);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-3);
|
||||
position: relative;
|
||||
animation: slideUp 0.4s ease-out 0.2s both;
|
||||
}
|
||||
.evidence-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: 17px;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
z-index: -1;
|
||||
}
|
||||
.evidence-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.evidence-guide-icon {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.evidence-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.evidence-intro {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.6;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.keepsake-quote {
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
color: var(--sapphire-light);
|
||||
padding: var(--space-3);
|
||||
border-left: 2px solid var(--sapphire);
|
||||
background: rgba(59,130,246,0.06);
|
||||
border-radius: 0 var(--radius-md) var(--radius-md) 0;
|
||||
margin-bottom: var(--space-3);
|
||||
line-height: 1.65;
|
||||
}
|
||||
.keepsake-meta {
|
||||
font-size: 11px;
|
||||
color: var(--faint-light);
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
.evidence-stat {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
background: rgba(16,185,129,0.06);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.evidence-stat strong {
|
||||
color: var(--emerald-light);
|
||||
font-weight: 600;
|
||||
}
|
||||
/* Action buttons at bottom */
|
||||
.turn-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
.save-btn {
|
||||
height: 52px;
|
||||
background: var(--amethyst);
|
||||
color: var(--pure-light);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 20px rgba(139,92,246,0.25);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.save-btn:hover { background: var(--amethyst-light); }
|
||||
.share-btn {
|
||||
height: 44px;
|
||||
background: var(--deep-glass);
|
||||
color: var(--soft-light);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--twilight);
|
||||
}
|
||||
.screen-aura {
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(139,92,246,0.12) 0%, transparent 70%);
|
||||
filter: blur(40px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="../turn/10-turn-home.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Your Turn</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-top: 0; padding-bottom: var(--space-8);">
|
||||
<div class="screen-aura"></div>
|
||||
|
||||
<!-- Canonical Turn from Feb 22 -->
|
||||
<div class="turn-original-thought">"I completely bombed my presentation today and everyone saw"</div>
|
||||
|
||||
<!-- Reframe blocks (dimmed context) -->
|
||||
<div class="reframe-block amethyst">
|
||||
<div class="reframe-label">Perspective Shift</div>
|
||||
<div class="reframe-text">Your manager said the data was solid. What if "bombed" is only the feeling — not what actually landed?</div>
|
||||
</div>
|
||||
|
||||
<div class="reframe-block sapphire">
|
||||
<div class="reframe-label">Evidence Check</div>
|
||||
<div class="reframe-text">Who told you everyone saw? What specific reaction are you basing this on — a word, a look, a silence?</div>
|
||||
</div>
|
||||
|
||||
<div class="reframe-block emerald">
|
||||
<div class="reframe-label">Action Step</div>
|
||||
<div class="reframe-text">Before your next presentation, write down one thing you want people to take away — not how you want to seem.</div>
|
||||
</div>
|
||||
|
||||
<!-- Evidence intervention card -->
|
||||
<div class="evidence-card">
|
||||
<div class="evidence-header">
|
||||
<span class="evidence-guide-icon">◇</span>
|
||||
<span class="evidence-title">Something interesting</span>
|
||||
</div>
|
||||
<div class="evidence-intro">
|
||||
This thought — "I bombed and everyone saw" — is Catastrophizing. You've Turned this exact shape before, and you kept something worth reading again:
|
||||
</div>
|
||||
<div class="keepsake-quote">
|
||||
"The gap between how I felt in that meeting and what anyone actually said out loud was enormous. The catastrophe lived entirely in my head."
|
||||
<div class="keepsake-meta">Saved keepsake · Feb 14, 2026 · Catastrophizing</div>
|
||||
</div>
|
||||
<div class="evidence-stat">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<path d="M2 7l3 3L12 3" stroke="var(--emerald)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
You've caught this fragment <strong>7 times</strong> now. Each time you name it, it gets a little smaller.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Standard turn action buttons -->
|
||||
<div class="turn-actions">
|
||||
<a class="save-btn" href="../turn/13-turn-results.html">Save this Turn</a>
|
||||
<a class="share-btn" href="../turn/13-turn-results.html">Share pattern</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
378
initial mockups/screens/guide/74-guide-pulse-report.html
Normal file
378
initial mockups/screens/guide/74-guide-pulse-report.html
Normal file
@@ -0,0 +1,378 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Weekly Pulse (Step 1)</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
@keyframes breathing {
|
||||
0%, 100% { opacity: 0.5; transform: scale(1) translate(-50%, -50%); }
|
||||
50% { opacity: 0.9; transform: scale(1.08) translate(-46%, -54%); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes diamondPulse {
|
||||
0%, 100% { filter: drop-shadow(0 0 4px rgba(245,158,11,0.2)); }
|
||||
50% { filter: drop-shadow(0 0 14px rgba(245,158,11,0.6)); }
|
||||
}
|
||||
.pulse-frame {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding: 0 var(--space-4) var(--space-6);
|
||||
}
|
||||
.step-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-4) 0 var(--space-2);
|
||||
}
|
||||
.step-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.step-dots {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
.step-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--twilight);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.step-dot.active {
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--emerald));
|
||||
box-shadow: 0 0 8px rgba(139,92,246,0.4);
|
||||
}
|
||||
.step-dot.complete { background: var(--dim-light); }
|
||||
.pulse-heading {
|
||||
font-family: var(--font-display);
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--pure-light);
|
||||
margin-bottom: var(--space-2);
|
||||
letter-spacing: -0.01em;
|
||||
animation: fadeIn 0.4s ease-out 0.1s both;
|
||||
opacity: 0;
|
||||
}
|
||||
.pulse-subheading {
|
||||
font-size: 15px;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: var(--space-6);
|
||||
animation: fadeIn 0.4s ease-out 0.2s both;
|
||||
opacity: 0;
|
||||
}
|
||||
/* Diamond scale */
|
||||
.diamond-scale {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-5);
|
||||
animation: fadeIn 0.4s ease-out 0.3s both;
|
||||
opacity: 0;
|
||||
}
|
||||
.scale-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
}
|
||||
.scale-item svg {
|
||||
transition: transform 0.2s ease-out, filter 0.2s ease-out;
|
||||
}
|
||||
.scale-item:hover svg { transform: scale(1.1); }
|
||||
.scale-item.selected svg {
|
||||
animation: diamondPulse 2.5s ease-in-out infinite;
|
||||
}
|
||||
.scale-label {
|
||||
font-size: 10px;
|
||||
color: var(--faint-light);
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.scale-item.selected .scale-label {
|
||||
color: var(--amber-light);
|
||||
font-weight: 600;
|
||||
}
|
||||
/* Gradient background auras */
|
||||
.bg-aura-1 {
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
left: 30%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(139,92,246,0.1) 0%, transparent 70%);
|
||||
filter: blur(50px);
|
||||
animation: breathing 7s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
.bg-aura-2 {
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 60%;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(245,158,11,0.08) 0%, transparent 70%);
|
||||
filter: blur(40px);
|
||||
animation: breathing 9s ease-in-out infinite 2s;
|
||||
pointer-events: none;
|
||||
}
|
||||
/* Write-in field */
|
||||
.writein-label {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: var(--space-2);
|
||||
animation: fadeIn 0.4s ease-out 0.4s both;
|
||||
opacity: 0;
|
||||
}
|
||||
.writein-input {
|
||||
width: 100%;
|
||||
height: 72px;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
font-family: var(--font-primary);
|
||||
font-size: 14px;
|
||||
color: var(--pure-light);
|
||||
resize: none;
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
|
||||
margin-bottom: var(--space-5);
|
||||
animation: fadeIn 0.4s ease-out 0.45s both;
|
||||
opacity: 0;
|
||||
}
|
||||
.writein-input::placeholder { color: var(--faint-light); }
|
||||
.writein-input:focus {
|
||||
border-color: rgba(139,92,246,0.4);
|
||||
box-shadow: 0 0 0 3px rgba(139,92,246,0.08);
|
||||
}
|
||||
.next-btn {
|
||||
height: 52px;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire));
|
||||
color: var(--pure-light);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 24px rgba(139,92,246,0.25);
|
||||
margin-top: auto;
|
||||
transition: opacity 0.2s ease-out;
|
||||
animation: fadeIn 0.4s ease-out 0.5s both;
|
||||
opacity: 0;
|
||||
}
|
||||
.next-btn:hover { opacity: 0.88; }
|
||||
.close-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--deep-glass);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* Week recap mini-stats */
|
||||
.week-recap {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-4);
|
||||
animation: fadeIn 0.4s ease-out 0.25s both;
|
||||
opacity: 0;
|
||||
}
|
||||
.recap-stat {
|
||||
flex: 1;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
text-align: center;
|
||||
}
|
||||
.recap-num {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--pure-light);
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.recap-lbl {
|
||||
font-size: 10px;
|
||||
color: var(--dim-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
<!-- Background auras -->
|
||||
<div class="bg-aura-1"></div>
|
||||
<div class="bg-aura-2"></div>
|
||||
|
||||
<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="pulse-frame">
|
||||
<div class="step-indicator">
|
||||
<span class="step-label">Step 1 of 3</span>
|
||||
<div class="step-dots">
|
||||
<div class="step-dot active"></div>
|
||||
<div class="step-dot"></div>
|
||||
<div class="step-dot"></div>
|
||||
</div>
|
||||
<a class="close-btn" href="../turn/10-turn-home.html">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2 2L10 10M10 2L2 10" stroke="var(--dim-light)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="pulse-heading">Your Weekly Pulse</div>
|
||||
<div class="pulse-subheading">Feb 16–22, 2026 · How did this week feel?</div>
|
||||
|
||||
<!-- Week at-a-glance stats -->
|
||||
<div class="week-recap">
|
||||
<div class="recap-stat">
|
||||
<span class="recap-num" style="color: var(--amethyst-light);">14</span>
|
||||
<span class="recap-lbl">Turns</span>
|
||||
</div>
|
||||
<div class="recap-stat">
|
||||
<span class="recap-num" style="color: var(--sapphire-light);">5</span>
|
||||
<span class="recap-lbl">Mirror</span>
|
||||
</div>
|
||||
<div class="recap-stat">
|
||||
<span class="recap-num" style="color: var(--emerald-light);">2</span>
|
||||
<span class="recap-lbl">Rituals</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 5-diamond scale -->
|
||||
<div class="diamond-scale" id="diamondScale">
|
||||
<!-- 1: Rough -->
|
||||
<div class="scale-item" data-index="0">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40">
|
||||
<defs>
|
||||
<linearGradient id="d1-gr" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#475569"/>
|
||||
<stop offset="100%" stop-color="#1C2240"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M20 4L36 20L20 36L4 20Z" fill="url(#d1-gr)" opacity="0.5"/>
|
||||
<path d="M20 4L36 20L20 20Z" fill="#fff" opacity="0.04"/>
|
||||
<path d="M14 14l4 3M20 8l-2 6" stroke="rgba(255,255,255,0.1)" stroke-width="0.8"/>
|
||||
</svg>
|
||||
<span class="scale-label">Rough</span>
|
||||
</div>
|
||||
<!-- 2: Harder than usual -->
|
||||
<div class="scale-item" data-index="1">
|
||||
<svg width="44" height="44" viewBox="0 0 44 44">
|
||||
<defs>
|
||||
<linearGradient id="d2-gr" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#64748B"/>
|
||||
<stop offset="100%" stop-color="#334155"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M22 4L40 22L22 40L4 22Z" fill="url(#d2-gr)" opacity="0.6"/>
|
||||
<path d="M22 4L40 22L22 22Z" fill="#fff" opacity="0.06"/>
|
||||
</svg>
|
||||
<span class="scale-label">Harder than usual</span>
|
||||
</div>
|
||||
<!-- 3: Steady — selected with amber glow -->
|
||||
<div class="scale-item selected" data-index="2" id="selectedDiamond">
|
||||
<svg width="52" height="52" viewBox="0 0 52 52">
|
||||
<defs>
|
||||
<linearGradient id="d3-gr" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FCD34D"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M26 4L48 26L26 48L4 26Z" fill="url(#d3-gr)" opacity="0.9"/>
|
||||
<path d="M26 4L48 26L26 26Z" fill="#fff" opacity="0.18"/>
|
||||
<path d="M26 4L4 26L26 26Z" fill="#fff" opacity="0.06"/>
|
||||
<line x1="26" y1="4" x2="26" y2="48" stroke="#fff" stroke-width="0.6" opacity="0.15"/>
|
||||
<line x1="4" y1="26" x2="48" y2="26" stroke="#fff" stroke-width="0.6" opacity="0.1"/>
|
||||
<circle cx="20" cy="20" r="2.5" fill="#fff" opacity="0.3"/>
|
||||
</svg>
|
||||
<span class="scale-label">Steady</span>
|
||||
</div>
|
||||
<!-- 4: Good momentum -->
|
||||
<div class="scale-item" data-index="3">
|
||||
<svg width="44" height="44" viewBox="0 0 44 44">
|
||||
<defs>
|
||||
<linearGradient id="d4-gr" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M22 3L41 22L22 41L3 22Z" fill="url(#d4-gr)" opacity="0.8"/>
|
||||
<path d="M22 3L41 22L22 22Z" fill="#fff" opacity="0.14"/>
|
||||
<circle cx="17" cy="17" r="1.8" fill="#fff" opacity="0.2"/>
|
||||
</svg>
|
||||
<span class="scale-label">Good momentum</span>
|
||||
</div>
|
||||
<!-- 5: Breakthrough -->
|
||||
<div class="scale-item" data-index="4">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40">
|
||||
<defs>
|
||||
<linearGradient id="d5-gr" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||||
<stop offset="50%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#FCD34D"/>
|
||||
</linearGradient>
|
||||
<filter id="d5-glow" x="-30%" y="-30%" width="160%" height="160%">
|
||||
<feGaussianBlur stdDeviation="2" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g filter="url(#d5-glow)">
|
||||
<path d="M20 2L38 20L20 38L2 20Z" fill="url(#d5-gr)" opacity="0.7"/>
|
||||
<path d="M20 2L38 20L20 20Z" fill="#fff" opacity="0.2"/>
|
||||
<path d="M20 2L2 20L20 20Z" fill="#fff" opacity="0.1"/>
|
||||
<circle cx="15" cy="15" r="2.5" fill="#fff" opacity="0.4"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="scale-label">Breakthrough week</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="writein-label">Anything else you want to add? (optional)</div>
|
||||
<textarea class="writein-input" placeholder="This week felt..."></textarea>
|
||||
|
||||
<a class="next-btn" href="75-guide-pulse-read.html">Next</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const items = document.querySelectorAll('.scale-item');
|
||||
items.forEach((item) => {
|
||||
item.addEventListener('click', () => {
|
||||
items.forEach(it => it.classList.remove('selected'));
|
||||
item.classList.add('selected');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
230
initial mockups/screens/guide/75-guide-pulse-read.html
Normal file
230
initial mockups/screens/guide/75-guide-pulse-read.html
Normal file
@@ -0,0 +1,230 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Weekly Pulse (Step 2)</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
@keyframes breathing {
|
||||
0%, 100% { opacity: 0.5; transform: scale(1) translate(-50%, -50%); }
|
||||
50% { opacity: 0.8; transform: scale(1.06) translate(-48%, -52%); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.bg-aura {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, transparent 70%);
|
||||
filter: blur(50px);
|
||||
animation: breathing 8s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
.pulse-frame {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding: 0 var(--space-4) var(--space-6);
|
||||
}
|
||||
.step-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-4) 0 var(--space-2);
|
||||
}
|
||||
.step-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.step-dots {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
.step-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--twilight);
|
||||
}
|
||||
.step-dot.complete { background: var(--dim-light); }
|
||||
.step-dot.active {
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire));
|
||||
box-shadow: 0 0 8px rgba(59,130,246,0.4);
|
||||
}
|
||||
.close-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--deep-glass);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pulse-heading {
|
||||
font-family: var(--font-display);
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: var(--pure-light);
|
||||
margin-bottom: var(--space-5);
|
||||
letter-spacing: -0.01em;
|
||||
animation: fadeIn 0.4s ease-out 0.1s both;
|
||||
opacity: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
/* Observation list */
|
||||
.observation-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.observation-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-3);
|
||||
animation: fadeIn 0.4s ease-out both;
|
||||
opacity: 0;
|
||||
}
|
||||
.obs-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.obs-dot.amethyst { background: var(--amethyst); box-shadow: 0 0 8px rgba(139,92,246,0.5); }
|
||||
.obs-dot.amber { background: var(--amber); box-shadow: 0 0 8px rgba(245,158,11,0.5); }
|
||||
.obs-dot.emerald { background: var(--emerald); box-shadow: 0 0 8px rgba(16,185,129,0.5); }
|
||||
.obs-dot.sapphire { background: var(--sapphire); box-shadow: 0 0 8px rgba(59,130,246,0.5); }
|
||||
.obs-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.obs-text strong {
|
||||
color: var(--pure-light);
|
||||
font-weight: 600;
|
||||
}
|
||||
/* Highlighted callout */
|
||||
.callout-card {
|
||||
background: rgba(245,158,11,0.06);
|
||||
border: 1px solid rgba(245,158,11,0.2);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-5);
|
||||
animation: fadeIn 0.4s ease-out 0.55s both;
|
||||
opacity: 0;
|
||||
}
|
||||
.callout-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--amber-light);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.callout-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.65;
|
||||
}
|
||||
.callout-text strong {
|
||||
color: var(--amber-light);
|
||||
}
|
||||
.next-btn {
|
||||
height: 52px;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire));
|
||||
color: var(--pure-light);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 24px rgba(59,130,246,0.2);
|
||||
margin-top: auto;
|
||||
transition: opacity 0.2s ease-out;
|
||||
animation: fadeIn 0.4s ease-out 0.65s both;
|
||||
opacity: 0;
|
||||
}
|
||||
.next-btn:hover { opacity: 0.88; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
<div class="bg-aura"></div>
|
||||
|
||||
<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="pulse-frame">
|
||||
<div class="step-indicator">
|
||||
<span class="step-label">Step 2 of 3</span>
|
||||
<div class="step-dots">
|
||||
<div class="step-dot complete"></div>
|
||||
<div class="step-dot active"></div>
|
||||
<div class="step-dot"></div>
|
||||
</div>
|
||||
<a class="close-btn" href="../turn/10-turn-home.html">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2 2L10 10M10 2L2 10" stroke="var(--dim-light)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="pulse-heading">Here's what I noticed this week</div>
|
||||
|
||||
<div class="observation-list">
|
||||
<!-- 14 Turns — canonical data -->
|
||||
<div class="observation-item" style="animation-delay: 0.15s;">
|
||||
<div class="obs-dot amethyst"></div>
|
||||
<div class="obs-text"><strong>14 Turns</strong> this week — Wednesday was your most active day. That's the day of the presentation. You processed it in real time.</div>
|
||||
</div>
|
||||
<!-- Catastrophizing dropped from 5 last week — canonical -->
|
||||
<div class="observation-item" style="animation-delay: 0.25s;">
|
||||
<div class="obs-dot amber"></div>
|
||||
<div class="obs-text">Catastrophizing appeared <strong>3 times</strong> — down from 5 last week. The pattern is still there, but it's losing frequency.</div>
|
||||
</div>
|
||||
<!-- 5 mirror sessions — canonical -->
|
||||
<div class="observation-item" style="animation-delay: 0.35s;">
|
||||
<div class="obs-dot emerald"></div>
|
||||
<div class="obs-text"><strong>5 Mirror sessions</strong> and your streak hit <strong>14 days</strong> — the longest you've sustained consistent reflection.</div>
|
||||
</div>
|
||||
<!-- Goal evidence tiles — canonical: 2 new for "Present with confidence" -->
|
||||
<div class="observation-item" style="animation-delay: 0.45s;">
|
||||
<div class="obs-dot sapphire"></div>
|
||||
<div class="obs-text"><strong>2 new evidence tiles</strong> added to "Present with confidence" — both from moments this week where you held your ground.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Highlighted callout — feeling vs data gap -->
|
||||
<div class="callout-card">
|
||||
<div class="callout-label">Something to notice</div>
|
||||
<div class="callout-text">
|
||||
You rated this week as <strong>"Steady"</strong> — but the data shows real movement. Catastrophizing down, streak at an all-time high, goal evidence growing. Sometimes the feeling lags behind the evidence. The evidence is real.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="next-btn" href="76-guide-pulse-focus.html">Next</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
419
initial mockups/screens/guide/76-guide-pulse-focus.html
Normal file
419
initial mockups/screens/guide/76-guide-pulse-focus.html
Normal file
@@ -0,0 +1,419 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Weekly Pulse (Step 3)</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
@keyframes breathing {
|
||||
0%, 100% { opacity: 0.5; transform: scale(1) translate(-50%, -50%); }
|
||||
50% { opacity: 0.8; transform: scale(1.06) translate(-48%, -52%); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes prismaticFlash {
|
||||
0% { opacity: 0; transform: scale(0.9); }
|
||||
30% { opacity: 1; transform: scale(1.05); }
|
||||
70% { opacity: 1; transform: scale(1); }
|
||||
100% { opacity: 0; transform: scale(1.1); }
|
||||
}
|
||||
@keyframes completePulse {
|
||||
0%, 100% { box-shadow: 0 0 20px rgba(16,185,129,0.2); }
|
||||
50% { box-shadow: 0 0 40px rgba(16,185,129,0.4); }
|
||||
}
|
||||
.bg-aura {
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
left: 50%;
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(16,185,129,0.1) 0%, transparent 70%);
|
||||
filter: blur(55px);
|
||||
animation: breathing 7s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
.pulse-frame {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding: 0 var(--space-4) var(--space-6);
|
||||
}
|
||||
.step-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-4) 0 var(--space-2);
|
||||
}
|
||||
.step-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.step-dots {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
.step-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--twilight);
|
||||
}
|
||||
.step-dot.complete { background: var(--dim-light); }
|
||||
.step-dot.active {
|
||||
background: var(--emerald);
|
||||
box-shadow: 0 0 8px rgba(16,185,129,0.5);
|
||||
}
|
||||
.close-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--deep-glass);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pulse-heading {
|
||||
font-family: var(--font-display);
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--pure-light);
|
||||
margin-bottom: var(--space-5);
|
||||
letter-spacing: -0.01em;
|
||||
animation: fadeIn 0.4s ease-out 0.1s both;
|
||||
opacity: 0;
|
||||
}
|
||||
/* Focus suggestion — canonical next-week prompt -->
|
||||
.focus-card {
|
||||
background: var(--kalei-navy);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
position: relative;
|
||||
animation: fadeIn 0.4s ease-out 0.2s both;
|
||||
opacity: 0;
|
||||
}
|
||||
.focus-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: 17px;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
z-index: -1;
|
||||
}
|
||||
.focus-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--amethyst-light);
|
||||
margin-bottom: var(--space-2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.focus-icon {
|
||||
font-size: 12px;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.focus-text {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
line-height: 1.5;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.focus-body {
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
line-height: 1.6;
|
||||
}
|
||||
/* Suggestion cards */
|
||||
.suggestion-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid rgba(16,185,129,0.25);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-3);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-3);
|
||||
animation: fadeIn 0.4s ease-out both;
|
||||
opacity: 0;
|
||||
transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
|
||||
}
|
||||
.suggestion-card:hover {
|
||||
border-color: rgba(16,185,129,0.5);
|
||||
box-shadow: 0 0 16px rgba(16,185,129,0.08);
|
||||
}
|
||||
.suggestion-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(16,185,129,0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.suggestion-content { flex: 1; }
|
||||
.suggestion-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--emerald-light);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.suggestion-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.55;
|
||||
}
|
||||
/* Action buttons */
|
||||
.pulse-actions {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
margin-top: auto;
|
||||
animation: fadeIn 0.4s ease-out 0.6s both;
|
||||
opacity: 0;
|
||||
}
|
||||
.sounds-good-btn {
|
||||
flex: 1;
|
||||
height: 52px;
|
||||
background: var(--emerald);
|
||||
color: var(--pure-light);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 20px rgba(16,185,129,0.25);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-family: var(--font-primary);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.sounds-good-btn:hover { background: var(--emerald-light); }
|
||||
.adjust-btn {
|
||||
flex: 1;
|
||||
height: 52px;
|
||||
background: transparent;
|
||||
color: var(--dim-light);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--twilight);
|
||||
transition: color 0.2s ease-out, border-color 0.2s ease-out;
|
||||
}
|
||||
.adjust-btn:hover { color: var(--soft-light); border-color: rgba(255,255,255,0.15); }
|
||||
/* Completion state */
|
||||
.completion-state {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.completion-state.visible { display: flex; }
|
||||
.completion-diamond {
|
||||
margin-bottom: var(--space-6);
|
||||
animation: completePulse 3s ease-in-out infinite;
|
||||
}
|
||||
.completion-heading {
|
||||
font-family: var(--font-display);
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--pure-light);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.completion-subtext {
|
||||
font-size: 15px;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: var(--space-8);
|
||||
}
|
||||
/* Prismatic flash overlay */
|
||||
.prismatic-flash {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(59,130,246,0.15), rgba(16,185,129,0.15), rgba(245,158,11,0.1));
|
||||
border-radius: 44px;
|
||||
pointer-events: none;
|
||||
display: none;
|
||||
}
|
||||
.prismatic-flash.animate {
|
||||
display: block;
|
||||
animation: prismaticFlash 0.8s ease-out forwards;
|
||||
}
|
||||
.done-btn {
|
||||
height: 52px;
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald));
|
||||
color: var(--pure-light);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 24px rgba(16,185,129,0.2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
<div class="bg-aura"></div>
|
||||
<div class="prismatic-flash" id="flash"></div>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- Step 3 active content -->
|
||||
<div class="pulse-frame" id="step3Content">
|
||||
<div class="step-indicator">
|
||||
<span class="step-label">Step 3 of 3</span>
|
||||
<div class="step-dots">
|
||||
<div class="step-dot complete"></div>
|
||||
<div class="step-dot complete"></div>
|
||||
<div class="step-dot active"></div>
|
||||
</div>
|
||||
<a class="close-btn" href="../turn/10-turn-home.html">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2 2L10 10M10 2L2 10" stroke="var(--dim-light)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="pulse-heading">For next week</div>
|
||||
|
||||
<!-- Canonical weekly focus suggestion -->
|
||||
<div class="focus-card">
|
||||
<div class="focus-label">
|
||||
<span class="focus-icon">◇</span>
|
||||
Your focus
|
||||
</div>
|
||||
<div class="focus-text">"Notice the gap between what you fear and what actually happens."</div>
|
||||
<div class="focus-body">This week your data showed Catastrophizing going down. That gap — between the feared outcome and reality — is where your patterns lose their grip. Try to catch it once a day.</div>
|
||||
</div>
|
||||
|
||||
<!-- Suggestion cards — Alex's actual goals, not fitness -->
|
||||
<div class="suggestion-card" style="animation-delay: 0.3s;">
|
||||
<div class="suggestion-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<circle cx="10" cy="10" r="8" stroke="var(--emerald)" stroke-width="1.2"/>
|
||||
<circle cx="10" cy="10" r="3.5" stroke="var(--emerald)" stroke-width="0.8"/>
|
||||
<path d="M10 2v2M10 16v2M2 10h2M16 10h2" stroke="var(--emerald)" stroke-width="0.8" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="suggestion-content">
|
||||
<div class="suggestion-label">Lens · Present with confidence</div>
|
||||
<div class="suggestion-text">Add one more evidence tile — even a micro-moment of holding your ground counts. You're at 65% and moving.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="suggestion-card" style="animation-delay: 0.4s;">
|
||||
<div class="suggestion-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M10 3L14 7L15 12L10 17L5 12L6 7Z" stroke="var(--amber)" fill="none" stroke-width="1.2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="suggestion-content">
|
||||
<div class="suggestion-label">Mirror · Streak</div>
|
||||
<div class="suggestion-text">Your 14-day streak is the longest you've held. Next week it becomes 21. Just keep showing up.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="suggestion-card" style="animation-delay: 0.5s;">
|
||||
<div class="suggestion-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M10 2L18 10L10 18L2 10Z" stroke="var(--amethyst)" fill="none" stroke-width="1.2"/>
|
||||
<path d="M10 2L18 10L10 10Z" fill="rgba(139,92,246,0.15)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="suggestion-content">
|
||||
<div class="suggestion-label">Turn · Boundaries goal</div>
|
||||
<div class="suggestion-text">Your "Set boundaries at work" goal is at 40%. If a work request lands that doesn't feel right, Turn it before you respond.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pulse-actions">
|
||||
<button class="sounds-good-btn" id="soundsGoodBtn">Sounds good</button>
|
||||
<a class="adjust-btn" href="74-guide-pulse-report.html">Adjust</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Completion state (hidden initially) -->
|
||||
<div class="pulse-frame completion-state" id="completionState">
|
||||
<div class="completion-diamond">
|
||||
<svg width="80" height="80" viewBox="0 0 80 80">
|
||||
<defs>
|
||||
<linearGradient id="cp-gr" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||||
<stop offset="33%" stop-color="#34D399"/>
|
||||
<stop offset="66%" stop-color="#60A5FA"/>
|
||||
<stop offset="100%" stop-color="#FCD34D"/>
|
||||
</linearGradient>
|
||||
<filter id="cp-glow" x="-25%" y="-25%" width="150%" height="150%">
|
||||
<feGaussianBlur stdDeviation="4" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g filter="url(#cp-glow)">
|
||||
<path d="M40 4L76 40L40 76L4 40Z" fill="url(#cp-gr)" opacity="0.85"/>
|
||||
<path d="M40 4L76 40L40 40Z" fill="#fff" opacity="0.2"/>
|
||||
<path d="M40 4L4 40L40 40Z" fill="#fff" opacity="0.1"/>
|
||||
<line x1="40" y1="4" x2="40" y2="76" stroke="#fff" stroke-width="0.8" opacity="0.15"/>
|
||||
<line x1="4" y1="40" x2="76" y2="40" stroke="#fff" stroke-width="0.8" opacity="0.1"/>
|
||||
<circle cx="32" cy="28" r="4" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="completion-heading">Pulse complete.</div>
|
||||
<div class="completion-subtext">See you next Saturday, Alex.</div>
|
||||
<a class="done-btn" href="../turn/10-turn-home.html">Done</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('soundsGoodBtn').addEventListener('click', function() {
|
||||
const flash = document.getElementById('flash');
|
||||
const step3 = document.getElementById('step3Content');
|
||||
const completion = document.getElementById('completionState');
|
||||
|
||||
// Trigger prismatic flash
|
||||
flash.classList.add('animate');
|
||||
|
||||
setTimeout(() => {
|
||||
step3.style.display = 'none';
|
||||
completion.classList.add('visible');
|
||||
flash.classList.remove('animate');
|
||||
}, 600);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
373
initial mockups/screens/lens/20-lens-dashboard.html
Normal file
373
initial mockups/screens/lens/20-lens-dashboard.html
Normal file
@@ -0,0 +1,373 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Lens Dashboard</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.screen-aura {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(16,185,129,0.12) 0%, transparent 70%);
|
||||
filter: blur(50px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.lens-heading {
|
||||
color: var(--emerald-light);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.goal-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-3);
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
|
||||
}
|
||||
.goal-card:hover { border-color: rgba(16,185,129,0.4); box-shadow: 0 0 20px rgba(16,185,129,0.08); }
|
||||
.goal-ring-wrap {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
.goal-ring-wrap svg { transform: rotate(-90deg); position: absolute; }
|
||||
.goal-ring-pct {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--pure-light);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.goal-info { flex: 1; min-width: 0; }
|
||||
.goal-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
margin-bottom: 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.goal-next {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: 6px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.days-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: rgba(16,185,129,0.1);
|
||||
color: var(--emerald-light);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 2px 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.affirmation-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid rgba(16,185,129,0.25);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-3);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
box-shadow: 0 0 16px rgba(16,185,129,0.08);
|
||||
transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
|
||||
}
|
||||
.affirmation-card:hover { border-color: rgba(16,185,129,0.5); box-shadow: 0 0 24px rgba(16,185,129,0.15); }
|
||||
.affirmation-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--emerald-light);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.affirmation-text {
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
color: var(--soft-light);
|
||||
font-style: italic;
|
||||
}
|
||||
.rehearsal-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
margin-bottom: var(--space-2);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: border-color 0.2s ease-out, background 0.2s ease-out;
|
||||
}
|
||||
.rehearsal-row:hover { border-color: rgba(16,185,129,0.3); background: var(--twilight); }
|
||||
.rehearsal-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(16,185,129,0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.rehearsal-info { flex: 1; }
|
||||
.rehearsal-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
.rehearsal-meta {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.add-goal-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
height: 52px;
|
||||
width: 100%;
|
||||
background: var(--emerald);
|
||||
color: var(--pure-light);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--glow-emerald);
|
||||
text-decoration: none;
|
||||
margin-bottom: var(--space-4);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.add-goal-btn:hover { background: var(--emerald-light); }
|
||||
.screen-content { padding-bottom: var(--space-4); }
|
||||
</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" style="padding-top: var(--space-4);">
|
||||
<div class="screen-aura"></div>
|
||||
<div style="position: relative; z-index: 1;">
|
||||
<div class="heading lens-heading">Your Lens</div>
|
||||
<div class="body-sm text-dim" style="margin-bottom: var(--space-5);">Track your goals, rehearse success</div>
|
||||
|
||||
<!-- Goal Cards -->
|
||||
<!-- Progress rings: r=27, circumference=169.6; rotate(-90deg) on svg via CSS -->
|
||||
<!-- Goal 1: Present with confidence — emerald — 65% -->
|
||||
<a class="goal-card" href="27-lens-goal-detail.html">
|
||||
<div class="goal-ring-wrap">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64">
|
||||
<defs>
|
||||
<linearGradient id="pr20-grEm1" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="32" cy="32" r="27" fill="none" stroke="var(--twilight)" stroke-width="3.5"/>
|
||||
<!-- 65% = 169.6 × 0.65 = 110.2 filled, 59.4 gap -->
|
||||
<circle cx="32" cy="32" r="27" fill="none" stroke="url(#pr20-grEm1)" stroke-width="3.5"
|
||||
stroke-dasharray="110.2 59.4" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="goal-ring-pct">65%</span>
|
||||
</div>
|
||||
<div class="goal-info">
|
||||
<div class="goal-title">Present with confidence</div>
|
||||
<div class="goal-next">Next: Rehearse quarterly results presentation</div>
|
||||
<span class="days-chip">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" stroke="currentColor" fill="none" stroke-width="1"/><path d="M5 3v2l1.5 1" stroke="currentColor" stroke-width="0.8" stroke-linecap="round"/></svg>
|
||||
Started Feb 5
|
||||
</span>
|
||||
</div>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="color: var(--faint-light); flex-shrink:0;">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- Goal 2: Set boundaries at work — sapphire — 40% -->
|
||||
<a class="goal-card" href="27-lens-goal-detail.html" style="border-color: rgba(59,130,246,0.2);">
|
||||
<div class="goal-ring-wrap">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64">
|
||||
<defs>
|
||||
<linearGradient id="pr20-grSa" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/>
|
||||
<stop offset="100%" stop-color="#1D4ED8"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="32" cy="32" r="27" fill="none" stroke="var(--twilight)" stroke-width="3.5"/>
|
||||
<!-- 40% = 169.6 × 0.40 = 67.8 filled, 101.8 gap -->
|
||||
<circle cx="32" cy="32" r="27" fill="none" stroke="url(#pr20-grSa)" stroke-width="3.5"
|
||||
stroke-dasharray="67.8 101.8" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="goal-ring-pct" style="color: var(--sapphire-light);">40%</span>
|
||||
</div>
|
||||
<div class="goal-info">
|
||||
<div class="goal-title">Set boundaries at work</div>
|
||||
<div class="goal-next">Next: Practice declining the Thursday all-hands</div>
|
||||
<span class="days-chip" style="background: rgba(59,130,246,0.1); color: var(--sapphire-light);">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" stroke="currentColor" fill="none" stroke-width="1"/><path d="M5 3v2l1.5 1" stroke="currentColor" stroke-width="0.8" stroke-linecap="round"/></svg>
|
||||
Started Feb 10
|
||||
</span>
|
||||
</div>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="color: var(--faint-light); flex-shrink:0;">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- Goal 3: Practice self-compassion — amethyst — 25% -->
|
||||
<a class="goal-card" href="27-lens-goal-detail.html" style="border-color: rgba(139,92,246,0.2);">
|
||||
<div class="goal-ring-wrap">
|
||||
<svg width="64" height="64" viewBox="0 0 64 64">
|
||||
<defs>
|
||||
<linearGradient id="pr20-grAm" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||||
<stop offset="100%" stop-color="#6D28D9"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="32" cy="32" r="27" fill="none" stroke="var(--twilight)" stroke-width="3.5"/>
|
||||
<!-- 25% = 169.6 × 0.25 = 42.4 filled, 127.2 gap -->
|
||||
<circle cx="32" cy="32" r="27" fill="none" stroke="url(#pr20-grAm)" stroke-width="3.5"
|
||||
stroke-dasharray="42.4 127.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="goal-ring-pct" style="color: var(--amethyst-light);">25%</span>
|
||||
</div>
|
||||
<div class="goal-info">
|
||||
<div class="goal-title">Practice self-compassion</div>
|
||||
<div class="goal-next">Next: Write a letter to yourself after today</div>
|
||||
<span class="days-chip" style="background: rgba(139,92,246,0.1); color: var(--amethyst-light);">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" stroke="currentColor" fill="none" stroke-width="1"/><path d="M5 3v2l1.5 1" stroke="currentColor" stroke-width="0.8" stroke-linecap="round"/></svg>
|
||||
Started Feb 15
|
||||
</span>
|
||||
</div>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="color: var(--faint-light); flex-shrink:0;">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="add-goal-btn" href="21-lens-create-step1.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M10 4v12M4 10h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
Add New Goal
|
||||
</a>
|
||||
|
||||
<!-- Daily Affirmation -->
|
||||
<div class="section-header" style="margin-bottom: var(--space-2);">
|
||||
<span class="section-title">Daily Affirmation</span>
|
||||
</div>
|
||||
<a class="affirmation-card" href="28-lens-affirmation.html">
|
||||
<div class="affirmation-label">Today's Affirmation</div>
|
||||
<div class="affirmation-text">"I have the strength and clarity to take one step forward, even when the path isn't fully visible yet."</div>
|
||||
<div class="body-sm text-emerald" style="margin-top: var(--space-2); font-weight: 500;">Tap to reflect →</div>
|
||||
</a>
|
||||
|
||||
<!-- Rehearsals -->
|
||||
<div class="section-header" style="margin-top: var(--space-1); margin-bottom: var(--space-2);">
|
||||
<span class="section-title">Rehearsals</span>
|
||||
<span class="section-action" style="color: var(--emerald-light);">See all</span>
|
||||
</div>
|
||||
<a class="rehearsal-row" href="29-rehearsal-session.html">
|
||||
<div class="rehearsal-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<circle cx="9" cy="9" r="7" stroke="var(--emerald)" stroke-width="1.2"/>
|
||||
<circle cx="9" cy="9" r="3" stroke="var(--emerald)" stroke-width="0.8"/>
|
||||
<path d="M9 2v2M9 14v2M2 9h2M14 9h2" stroke="var(--emerald)" stroke-width="0.8" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="rehearsal-info">
|
||||
<div class="rehearsal-title">Quarterly Results Presentation</div>
|
||||
<div class="rehearsal-meta">Scheduled today · 5 min</div>
|
||||
</div>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="color: var(--faint-light);">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="rehearsal-row" href="29-rehearsal-session.html">
|
||||
<div class="rehearsal-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<circle cx="9" cy="9" r="7" stroke="var(--emerald)" stroke-width="1.2"/>
|
||||
<circle cx="9" cy="9" r="3" stroke="var(--emerald)" stroke-width="0.8"/>
|
||||
<path d="M9 2v2M9 14v2M2 9h2M14 9h2" stroke="var(--emerald)" stroke-width="0.8" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="rehearsal-info">
|
||||
<div class="rehearsal-title">Boundary Conversation Practice</div>
|
||||
<div class="rehearsal-meta">Yesterday · Completed</div>
|
||||
</div>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" style="color: var(--emerald); flex-shrink:0;">
|
||||
<path d="M2 7l3.5 3.5L12 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab Bar -->
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item inactive" data-tab="turn" href="../turn/10-turn-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 2L20 12L12 22L4 12Z" fill="currentColor" opacity="0.9"/><path d="M12 2L20 12L12 12Z" fill="white" opacity="0.15"/></svg>
|
||||
<span class="tab-label">Turn</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="mirror" href="../mirror/15-mirror-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 3L16 8L18 14L12 19L6 14L8 8Z" stroke="currentColor" fill="none" stroke-width="1.2"/></svg>
|
||||
<span class="tab-label">Mirror</span>
|
||||
</a>
|
||||
<a class="tab-item active" data-tab="lens" href="20-lens-dashboard.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="currentColor" fill="none" stroke-width="1.2"/><circle cx="12" cy="12" r="4" stroke="currentColor" fill="none" stroke-width="0.8"/></svg>
|
||||
<span class="tab-label">Lens</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="gallery" href="../gallery/31-gallery-all.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><rect x="3" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/></svg>
|
||||
<span class="tab-label">Gallery</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="you" href="../you/35-you-profile.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="9" r="4" stroke="currentColor" fill="none" stroke-width="1.2"/><path d="M4 20C4 16 8 14 12 14C16 14 20 16 20 20" stroke="currentColor" fill="none" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
<span class="tab-label">You</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
156
initial mockups/screens/lens/21-lens-create-step1.html
Normal file
156
initial mockups/screens/lens/21-lens-create-step1.html
Normal file
@@ -0,0 +1,156 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — New Goal Step 1</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.step-dot.active { background: var(--emerald); box-shadow: 0 0 8px rgba(16,185,129,0.4); }
|
||||
.step-dot.completed { background: var(--emerald); opacity: 0.5; }
|
||||
.input-field:focus { border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(16,185,129,0.1); }
|
||||
.step-question {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
line-height: 1.3;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.step-hint {
|
||||
font-size: 14px;
|
||||
color: var(--dim-light);
|
||||
line-height: 1.5;
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
.nav-back { color: var(--emerald-light) !important; }
|
||||
.example-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.example-chip {
|
||||
background: rgba(16,185,129,0.08);
|
||||
border: 1px solid rgba(16,185,129,0.2);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 6px 14px;
|
||||
font-size: 13px;
|
||||
color: var(--emerald-light);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.example-chip:hover { background: rgba(16,185,129,0.15); }
|
||||
.bottom-actions {
|
||||
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-next-emerald {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
height: 52px;
|
||||
width: 100%;
|
||||
background: var(--emerald);
|
||||
color: var(--pure-light);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--glow-emerald);
|
||||
text-decoration: none;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.btn-next-emerald:hover { background: var(--emerald-light); }
|
||||
.screen-content { padding-bottom: 120px; }
|
||||
.aura-small {
|
||||
position: absolute;
|
||||
top: -60px;
|
||||
right: -60px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(16,185,129,0.1) 0%, transparent 70%);
|
||||
filter: blur(40px);
|
||||
pointer-events: none;
|
||||
}
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="20-lens-dashboard.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<span class="nav-title">New Goal</span>
|
||||
<span class="nav-action body-sm text-dim">1 of 6</span>
|
||||
</div>
|
||||
|
||||
<div class="step-progress">
|
||||
<div class="step-dot active"></div>
|
||||
<div class="step-dot"></div>
|
||||
<div class="step-dot"></div>
|
||||
<div class="step-dot"></div>
|
||||
<div class="step-dot"></div>
|
||||
<div class="step-dot"></div>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-top: var(--space-6); position: relative;">
|
||||
<div class="aura-small"></div>
|
||||
|
||||
<!-- Emerald circle icon -->
|
||||
<div style="margin-bottom: var(--space-5);">
|
||||
<svg width="48" height="48" viewBox="0 0 48 48">
|
||||
<defs>
|
||||
<linearGradient id="grEm1" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="24" cy="24" r="22" fill="none" stroke="url(#grEm1)" stroke-width="2" opacity="0.6"/>
|
||||
<circle cx="24" cy="24" r="10" fill="none" stroke="url(#grEm1)" stroke-width="1.5"/>
|
||||
<circle cx="24" cy="24" r="4" fill="url(#grEm1)" opacity="0.8"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="step-question">What do you want to achieve?</div>
|
||||
<div class="step-hint">Be specific and ambitious. The clearer your goal, the more effectively you can rehearse achieving it.</div>
|
||||
|
||||
<input type="text" class="input-field" placeholder="e.g. Present with confidence" id="goalInput" style="font-size: 17px; height: 56px;">
|
||||
|
||||
<div class="example-chips">
|
||||
<div class="example-chip" onclick="setGoal(this)">Present with confidence</div>
|
||||
<div class="example-chip" onclick="setGoal(this)">Set boundaries at work</div>
|
||||
<div class="example-chip" onclick="setGoal(this)">Practice self-compassion</div>
|
||||
<div class="example-chip" onclick="setGoal(this)">Ask for a promotion</div>
|
||||
<div class="example-chip" onclick="setGoal(this)">Build a daily habit</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-actions">
|
||||
<a class="btn-next-emerald" href="22-lens-create-step2.html">
|
||||
Next
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M6 4l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function setGoal(el) {
|
||||
document.getElementById('goalInput').value = el.textContent;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
121
initial mockups/screens/lens/22-lens-create-step2.html
Normal file
121
initial mockups/screens/lens/22-lens-create-step2.html
Normal file
@@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — New Goal Step 2</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.step-dot.active { background: var(--emerald); box-shadow: 0 0 8px rgba(16,185,129,0.4); }
|
||||
.step-dot.completed { background: var(--emerald); opacity: 0.5; }
|
||||
.step-question { font-size: 22px; font-weight: 600; color: var(--pure-light); line-height: 1.3; margin-bottom: var(--space-3); }
|
||||
.step-hint { font-size: 14px; color: var(--dim-light); line-height: 1.5; margin-bottom: var(--space-5); }
|
||||
.nav-back { color: var(--emerald-light) !important; }
|
||||
.textarea-field:focus { border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(16,185,129,0.1); }
|
||||
.bottom-actions {
|
||||
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);
|
||||
display: flex; gap: var(--space-3);
|
||||
}
|
||||
.btn-back-ghost {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
height: 52px; width: 52px;
|
||||
background: var(--deep-glass); color: var(--dim-light);
|
||||
border: 1px solid var(--twilight); border-radius: var(--radius-lg);
|
||||
text-decoration: none; flex-shrink: 0; transition: background 0.2s;
|
||||
}
|
||||
.btn-back-ghost:hover { background: var(--twilight); }
|
||||
.btn-next-emerald {
|
||||
display: flex; align-items: center; justify-content: center; gap: var(--space-2);
|
||||
height: 52px; flex: 1; background: var(--emerald); color: var(--pure-light);
|
||||
font-size: 16px; font-weight: 600; border-radius: var(--radius-lg);
|
||||
box-shadow: var(--glow-emerald); text-decoration: none; transition: background 0.2s;
|
||||
}
|
||||
.btn-next-emerald:hover { background: var(--emerald-light); }
|
||||
.screen-content { padding-bottom: 120px; }
|
||||
.why-prompts {
|
||||
display: flex; flex-direction: column; gap: var(--space-2);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
.why-prompt {
|
||||
background: var(--deep-glass); border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
|
||||
font-size: 14px; color: var(--dim-light); cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.why-prompt:hover { border-color: rgba(16,185,129,0.3); color: var(--soft-light); }
|
||||
.goal-chip {
|
||||
background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.2);
|
||||
border-radius: var(--radius-full); padding: 6px 14px; font-size: 13px;
|
||||
color: var(--emerald-light); display: inline-flex; align-items: center; gap: 6px;
|
||||
margin-bottom: var(--space-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="nav-header">
|
||||
<a class="nav-back" href="21-lens-create-step1.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<span class="nav-title">New Goal</span>
|
||||
<span class="nav-action body-sm text-dim">2 of 6</span>
|
||||
</div>
|
||||
|
||||
<div class="step-progress">
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot active"></div>
|
||||
<div class="step-dot"></div>
|
||||
<div class="step-dot"></div>
|
||||
<div class="step-dot"></div>
|
||||
<div class="step-dot"></div>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-top: var(--space-6);">
|
||||
<div class="goal-chip">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="5" stroke="var(--emerald)" fill="none" stroke-width="1"/><circle cx="6" cy="6" r="2" fill="var(--emerald)"/></svg>
|
||||
Present with confidence
|
||||
</div>
|
||||
|
||||
<div class="step-question">Why does this matter to you?</div>
|
||||
<div class="step-hint">Understanding your deeper motivation keeps you going when things get hard. Be honest with yourself.</div>
|
||||
|
||||
<textarea class="textarea-field" placeholder="This matters to me because..." style="min-height: 140px; font-size: 16px;"></textarea>
|
||||
|
||||
<div class="why-prompts">
|
||||
<div class="why-prompt" onclick="appendText(this)">I want to stop letting fear stop me from sharing ideas I believe in</div>
|
||||
<div class="why-prompt" onclick="appendText(this)">Being visible at work matters for my career growth</div>
|
||||
<div class="why-prompt" onclick="appendText(this)">I want to feel capable and not undermine myself</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-actions">
|
||||
<a class="btn-back-ghost" href="21-lens-create-step1.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<a class="btn-next-emerald" href="23-lens-create-step3.html">
|
||||
Next
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M6 4l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function appendText(el) {
|
||||
const ta = document.querySelector('.textarea-field');
|
||||
ta.value = el.textContent;
|
||||
ta.focus();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
179
initial mockups/screens/lens/23-lens-create-step3.html
Normal file
179
initial mockups/screens/lens/23-lens-create-step3.html
Normal file
@@ -0,0 +1,179 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — New Goal Step 3</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.step-dot.active { background: var(--emerald); box-shadow: 0 0 8px rgba(16,185,129,0.4); }
|
||||
.step-dot.completed { background: var(--emerald); opacity: 0.5; }
|
||||
.step-question { font-size: 22px; font-weight: 600; color: var(--pure-light); line-height: 1.3; margin-bottom: var(--space-3); }
|
||||
.step-hint { font-size: 14px; color: var(--dim-light); line-height: 1.5; margin-bottom: var(--space-5); }
|
||||
.nav-back { color: var(--emerald-light) !important; }
|
||||
.obstacle-input-row {
|
||||
display: flex; gap: var(--space-2); margin-bottom: var(--space-4);
|
||||
}
|
||||
.obstacle-input {
|
||||
flex: 1; height: 48px; background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight); border-radius: var(--radius-md);
|
||||
padding: 0 14px; font-size: 15px; color: var(--pure-light);
|
||||
outline: none; transition: border-color 0.2s; font-family: var(--font-primary);
|
||||
}
|
||||
.obstacle-input::placeholder { color: var(--faint-light); }
|
||||
.obstacle-input:focus { border-color: var(--emerald); }
|
||||
.add-btn {
|
||||
width: 48px; height: 48px; background: var(--emerald);
|
||||
border: none; border-radius: var(--radius-md); cursor: pointer;
|
||||
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.add-btn:hover { background: var(--emerald-light); }
|
||||
.obstacle-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
|
||||
.obstacle-chip {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25);
|
||||
border-radius: var(--radius-full); padding: 7px 14px;
|
||||
font-size: 13px; font-weight: 500; color: var(--emerald-light);
|
||||
}
|
||||
.obstacle-chip-remove {
|
||||
width: 16px; height: 16px; border-radius: 50%;
|
||||
background: rgba(16,185,129,0.2); border: none; cursor: pointer;
|
||||
display: flex; align-items: center; justify-content: center; color: var(--emerald);
|
||||
font-size: 10px; font-weight: 700; transition: background 0.15s;
|
||||
}
|
||||
.obstacle-chip-remove:hover { background: rgba(16,185,129,0.4); }
|
||||
.suggestions-label { font-size: 12px; color: var(--dim-light); margin: 16px 0 8px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; }
|
||||
.suggestion-chips { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.suggestion-chip {
|
||||
background: var(--deep-glass); border: 1px dashed var(--twilight);
|
||||
border-radius: var(--radius-full); padding: 6px 12px; font-size: 12px;
|
||||
color: var(--dim-light); cursor: pointer; transition: all 0.15s;
|
||||
}
|
||||
.suggestion-chip:hover { border-color: rgba(16,185,129,0.3); color: var(--emerald-light); }
|
||||
.bottom-actions {
|
||||
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);
|
||||
display: flex; gap: var(--space-3);
|
||||
}
|
||||
.btn-back-ghost {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
height: 52px; width: 52px; background: var(--deep-glass);
|
||||
color: var(--dim-light); border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg); text-decoration: none; flex-shrink: 0;
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.btn-back-ghost:hover { background: var(--twilight); }
|
||||
.btn-next-emerald {
|
||||
display: flex; align-items: center; justify-content: center; gap: var(--space-2);
|
||||
height: 52px; flex: 1; background: var(--emerald); color: var(--pure-light);
|
||||
font-size: 16px; font-weight: 600; border-radius: var(--radius-lg);
|
||||
box-shadow: var(--glow-emerald); text-decoration: none; transition: background 0.2s ease-out;
|
||||
}
|
||||
.btn-next-emerald:hover { background: var(--emerald-light); }
|
||||
.screen-content { padding-bottom: 120px; }
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="22-lens-create-step2.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<span class="nav-title">New Goal</span>
|
||||
<span class="nav-action body-sm text-dim">3 of 6</span>
|
||||
</div>
|
||||
|
||||
<div class="step-progress">
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot active"></div>
|
||||
<div class="step-dot"></div>
|
||||
<div class="step-dot"></div>
|
||||
<div class="step-dot"></div>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-top: var(--space-6);">
|
||||
<div class="step-question">What might get in the way?</div>
|
||||
<div class="step-hint">Anticipating obstacles makes you 2-3x more likely to follow through. Name the real barriers.</div>
|
||||
|
||||
<div class="obstacle-input-row">
|
||||
<input type="text" class="obstacle-input" placeholder="Add an obstacle..." id="obstacleInput">
|
||||
<button class="add-btn" onclick="addObstacle()">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 4v12M4 10h12" stroke="white" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="obstacle-chips" id="obstacleChips">
|
||||
<span class="obstacle-chip">
|
||||
Fear of judgment
|
||||
<button class="obstacle-chip-remove" onclick="removeChip(this)">x</button>
|
||||
</span>
|
||||
<span class="obstacle-chip">
|
||||
Losing my train of thought
|
||||
<button class="obstacle-chip-remove" onclick="removeChip(this)">x</button>
|
||||
</span>
|
||||
<span class="obstacle-chip">
|
||||
Voice shaking under pressure
|
||||
<button class="obstacle-chip-remove" onclick="removeChip(this)">x</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="suggestions-label">Common obstacles</div>
|
||||
<div class="suggestion-chips">
|
||||
<span class="suggestion-chip" onclick="addSuggestion(this)">Catastrophizing before the talk</span>
|
||||
<span class="suggestion-chip" onclick="addSuggestion(this)">Mind going blank</span>
|
||||
<span class="suggestion-chip" onclick="addSuggestion(this)">Manager in the room</span>
|
||||
<span class="suggestion-chip" onclick="addSuggestion(this)">Technical difficulties</span>
|
||||
<span class="suggestion-chip" onclick="addSuggestion(this)">Not enough preparation time</span>
|
||||
<span class="suggestion-chip" onclick="addSuggestion(this)">Imposter syndrome</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-actions">
|
||||
<a class="btn-back-ghost" href="22-lens-create-step2.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<a class="btn-next-emerald" href="24-lens-create-step4.html">
|
||||
Next
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M6 4l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function addObstacle() {
|
||||
const input = document.getElementById('obstacleInput');
|
||||
if (!input.value.trim()) return;
|
||||
addChip(input.value.trim());
|
||||
input.value = '';
|
||||
}
|
||||
function addSuggestion(el) {
|
||||
addChip(el.textContent);
|
||||
}
|
||||
function addChip(text) {
|
||||
const chips = document.getElementById('obstacleChips');
|
||||
const chip = document.createElement('span');
|
||||
chip.className = 'obstacle-chip';
|
||||
chip.innerHTML = `${text}<button class="obstacle-chip-remove" onclick="removeChip(this)">x</button>`;
|
||||
chips.appendChild(chip);
|
||||
}
|
||||
function removeChip(btn) {
|
||||
btn.parentElement.remove();
|
||||
}
|
||||
document.getElementById('obstacleInput').addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter') addObstacle();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
160
initial mockups/screens/lens/24-lens-create-step4.html
Normal file
160
initial mockups/screens/lens/24-lens-create-step4.html
Normal file
@@ -0,0 +1,160 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — New Goal Step 4</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.step-dot.active { background: var(--emerald); box-shadow: 0 0 8px rgba(16,185,129,0.4); }
|
||||
.step-dot.completed { background: var(--emerald); opacity: 0.5; }
|
||||
.step-question { font-size: 22px; font-weight: 600; color: var(--pure-light); line-height: 1.3; margin-bottom: var(--space-2); }
|
||||
.step-hint { font-size: 14px; color: var(--dim-light); line-height: 1.5; margin-bottom: var(--space-5); }
|
||||
.nav-back { color: var(--emerald-light) !important; }
|
||||
.ifthen-card {
|
||||
background: var(--kalei-navy); border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl); padding: var(--space-4); margin-bottom: var(--space-3);
|
||||
}
|
||||
.obstacle-label {
|
||||
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
||||
letter-spacing: 0.06em; color: var(--dim-light); margin-bottom: 8px;
|
||||
}
|
||||
.obstacle-name {
|
||||
font-size: 14px; font-weight: 500; color: var(--emerald-light);
|
||||
background: rgba(16,185,129,0.08); border-radius: var(--radius-md);
|
||||
padding: 6px 12px; margin-bottom: var(--space-3); display: inline-block;
|
||||
}
|
||||
.ifthen-row {
|
||||
display: flex; align-items: flex-start; gap: 10px; margin-bottom: var(--space-2);
|
||||
}
|
||||
.ifthen-keyword {
|
||||
font-size: 12px; font-weight: 700; color: var(--emerald); text-transform: uppercase;
|
||||
letter-spacing: 0.06em; padding-top: 14px; flex-shrink: 0; width: 30px;
|
||||
}
|
||||
.ifthen-input {
|
||||
flex: 1; min-height: 44px; background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight); border-radius: var(--radius-md);
|
||||
padding: 10px 12px; font-size: 14px; color: var(--pure-light);
|
||||
outline: none; resize: none; font-family: var(--font-primary);
|
||||
transition: border-color 0.2s; line-height: 1.4;
|
||||
}
|
||||
.ifthen-input::placeholder { color: var(--faint-light); }
|
||||
.ifthen-input:focus { border-color: var(--emerald); }
|
||||
.bottom-actions {
|
||||
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);
|
||||
display: flex; gap: var(--space-3);
|
||||
}
|
||||
.btn-back-ghost {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
height: 52px; width: 52px; background: var(--deep-glass);
|
||||
color: var(--dim-light); border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg); text-decoration: none; flex-shrink: 0;
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.btn-back-ghost:hover { background: var(--twilight); }
|
||||
.btn-next-emerald {
|
||||
display: flex; align-items: center; justify-content: center; gap: var(--space-2);
|
||||
height: 52px; flex: 1; background: var(--emerald); color: var(--pure-light);
|
||||
font-size: 16px; font-weight: 600; border-radius: var(--radius-lg);
|
||||
box-shadow: var(--glow-emerald); text-decoration: none; transition: background 0.2s ease-out;
|
||||
}
|
||||
.btn-next-emerald:hover { background: var(--emerald-light); }
|
||||
.screen-content { padding-bottom: 120px; }
|
||||
.info-box {
|
||||
background: rgba(16,185,129,0.05); border: 1px solid rgba(16,185,129,0.15);
|
||||
border-radius: var(--radius-md); padding: var(--space-3);
|
||||
font-size: 13px; color: var(--dim-light); line-height: 1.5;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="23-lens-create-step3.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<span class="nav-title">New Goal</span>
|
||||
<span class="nav-action body-sm text-dim">4 of 6</span>
|
||||
</div>
|
||||
|
||||
<div class="step-progress">
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot active"></div>
|
||||
<div class="step-dot"></div>
|
||||
<div class="step-dot"></div>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-top: var(--space-5);">
|
||||
<div class="step-question">Plan your responses</div>
|
||||
<div class="step-hint">If-then plans triple your success rate. Write exactly what you'll do when each obstacle shows up.</div>
|
||||
|
||||
<div class="info-box">
|
||||
Research shows that "If X happens, then I will do Y" plans are 2-3x more effective than general intentions.
|
||||
</div>
|
||||
|
||||
<div class="ifthen-card">
|
||||
<div class="obstacle-label">Obstacle</div>
|
||||
<div class="obstacle-name">Voice shaking under pressure</div>
|
||||
<div class="ifthen-row">
|
||||
<div class="ifthen-keyword">If</div>
|
||||
<textarea class="ifthen-input" rows="2">I feel my voice starting to shake while presenting,</textarea>
|
||||
</div>
|
||||
<div class="ifthen-row">
|
||||
<div class="ifthen-keyword">Then</div>
|
||||
<textarea class="ifthen-input" rows="2" placeholder="I will...">I will pause, take one slow breath, and remind myself: I know this material.</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ifthen-card">
|
||||
<div class="obstacle-label">Obstacle</div>
|
||||
<div class="obstacle-name">Losing my train of thought</div>
|
||||
<div class="ifthen-row">
|
||||
<div class="ifthen-keyword">If</div>
|
||||
<textarea class="ifthen-input" rows="2">I lose my place or blank on a slide,</textarea>
|
||||
</div>
|
||||
<div class="ifthen-row">
|
||||
<div class="ifthen-keyword">Then</div>
|
||||
<textarea class="ifthen-input" rows="2" placeholder="I will...">I will say "Let me back up a moment" — calmly, with no apology — and continue.</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ifthen-card">
|
||||
<div class="obstacle-label">Obstacle</div>
|
||||
<div class="obstacle-name">Fear of judgment</div>
|
||||
<div class="ifthen-row">
|
||||
<div class="ifthen-keyword">If</div>
|
||||
<textarea class="ifthen-input" rows="2">I start to spiral about what my manager thinks,</textarea>
|
||||
</div>
|
||||
<div class="ifthen-row">
|
||||
<div class="ifthen-keyword">Then</div>
|
||||
<textarea class="ifthen-input" rows="2" placeholder="I will...">I will focus on one friendly face in the room and speak directly to them.</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-actions">
|
||||
<a class="btn-back-ghost" href="23-lens-create-step3.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<a class="btn-next-emerald" href="25-lens-create-step5.html">
|
||||
Next
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M6 4l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
160
initial mockups/screens/lens/25-lens-create-step5.html
Normal file
160
initial mockups/screens/lens/25-lens-create-step5.html
Normal file
@@ -0,0 +1,160 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — New Goal Step 5</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.step-dot.active { background: var(--emerald); box-shadow: 0 0 8px rgba(16,185,129,0.4); }
|
||||
.step-dot.completed { background: var(--emerald); opacity: 0.5; }
|
||||
.step-question { font-size: 22px; font-weight: 600; color: var(--pure-light); line-height: 1.3; margin-bottom: var(--space-3); }
|
||||
.step-hint { font-size: 14px; color: var(--dim-light); line-height: 1.5; margin-bottom: var(--space-5); }
|
||||
.nav-back { color: var(--emerald-light) !important; }
|
||||
.milestone-item {
|
||||
background: var(--kalei-navy); border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4);
|
||||
margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-3);
|
||||
}
|
||||
.milestone-number {
|
||||
width: 28px; height: 28px; border-radius: 50%;
|
||||
background: rgba(16,185,129,0.1); border: 1.5px solid rgba(16,185,129,0.3);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 13px; font-weight: 700; color: var(--emerald); flex-shrink: 0;
|
||||
}
|
||||
.milestone-inputs { flex: 1; display: flex; flex-direction: column; gap: 8px; }
|
||||
.milestone-text-input {
|
||||
width: 100%; background: var(--deep-glass); border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-md); padding: 8px 12px; font-size: 14px;
|
||||
color: var(--pure-light); outline: none; font-family: var(--font-primary);
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.milestone-text-input::placeholder { color: var(--faint-light); }
|
||||
.milestone-text-input:focus { border-color: var(--emerald); }
|
||||
.milestone-date-input {
|
||||
width: 100%; background: var(--deep-glass); border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-md); padding: 8px 12px; font-size: 13px;
|
||||
color: var(--dim-light); outline: none; font-family: var(--font-primary);
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.milestone-date-input:focus { border-color: var(--emerald); color: var(--pure-light); }
|
||||
.add-milestone-btn {
|
||||
display: flex; align-items: center; justify-content: center; gap: 8px;
|
||||
height: 44px; width: 100%; background: transparent;
|
||||
border: 1px dashed rgba(16,185,129,0.3); border-radius: var(--radius-lg);
|
||||
color: var(--emerald-light); font-size: 14px; font-weight: 500; cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.add-milestone-btn:hover { background: rgba(16,185,129,0.05); border-style: solid; }
|
||||
.bottom-actions {
|
||||
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);
|
||||
display: flex; gap: var(--space-3);
|
||||
}
|
||||
.btn-back-ghost {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
height: 52px; width: 52px; background: var(--deep-glass);
|
||||
color: var(--dim-light); border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg); text-decoration: none; flex-shrink: 0;
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.btn-back-ghost:hover { background: var(--twilight); }
|
||||
.btn-next-emerald {
|
||||
display: flex; align-items: center; justify-content: center; gap: var(--space-2);
|
||||
height: 52px; flex: 1; background: var(--emerald); color: var(--pure-light);
|
||||
font-size: 16px; font-weight: 600; border-radius: var(--radius-lg);
|
||||
box-shadow: var(--glow-emerald); text-decoration: none; transition: background 0.2s ease-out;
|
||||
}
|
||||
.btn-next-emerald:hover { background: var(--emerald-light); }
|
||||
.screen-content { padding-bottom: 120px; }
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="24-lens-create-step4.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<span class="nav-title">New Goal</span>
|
||||
<span class="nav-action body-sm text-dim">5 of 6</span>
|
||||
</div>
|
||||
|
||||
<div class="step-progress">
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot active"></div>
|
||||
<div class="step-dot"></div>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-top: var(--space-6);">
|
||||
<div class="step-question">Set your milestones</div>
|
||||
<div class="step-hint">Break your goal into stepping stones. Each milestone becomes an Evidence Wall tile when completed.</div>
|
||||
|
||||
<div class="milestone-item">
|
||||
<div class="milestone-number">1</div>
|
||||
<div class="milestone-inputs">
|
||||
<input type="text" class="milestone-text-input" value="Deliver team standup without notes">
|
||||
<input type="text" class="milestone-date-input" value="Target: Mar 1, 2026">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="milestone-item">
|
||||
<div class="milestone-number">2</div>
|
||||
<div class="milestone-inputs">
|
||||
<input type="text" class="milestone-text-input" value="Present sprint retro to the team">
|
||||
<input type="text" class="milestone-date-input" value="Target: Mar 15, 2026">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="milestone-item">
|
||||
<div class="milestone-number">3</div>
|
||||
<div class="milestone-inputs">
|
||||
<input type="text" class="milestone-text-input" value="Present quarterly results to department">
|
||||
<input type="text" class="milestone-date-input" value="Target: Apr 1, 2026">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="milestone-item" style="border: 1.5px dashed rgba(16,185,129,0.2);">
|
||||
<div class="milestone-number" style="opacity: 0.4;">4</div>
|
||||
<div class="milestone-inputs">
|
||||
<input type="text" class="milestone-text-input" placeholder="Add a milestone..." style="opacity: 0.7;">
|
||||
<input type="text" class="milestone-date-input" placeholder="Target date...">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="add-milestone-btn" onclick="addMilestone()">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
Add milestone
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="bottom-actions">
|
||||
<a class="btn-back-ghost" href="24-lens-create-step4.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<a class="btn-next-emerald" href="26-lens-create-step6.html">
|
||||
Next
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M6 4l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function addMilestone() {
|
||||
// Would add a new milestone row
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
156
initial mockups/screens/lens/26-lens-create-step6.html
Normal file
156
initial mockups/screens/lens/26-lens-create-step6.html
Normal file
@@ -0,0 +1,156 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — New Goal Step 6</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.step-dot.active { background: var(--emerald); box-shadow: 0 0 8px rgba(16,185,129,0.4); }
|
||||
.step-dot.completed { background: var(--emerald); opacity: 0.5; }
|
||||
.nav-back { color: var(--emerald-light) !important; }
|
||||
.viz-aura {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(16,185,129,0.18) 0%, transparent 70%);
|
||||
filter: blur(50px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
.viz-kaleidoscope {
|
||||
margin: 24px auto 20px;
|
||||
display: block;
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
}
|
||||
.prompt-card {
|
||||
background: var(--kalei-navy); border: 1px solid rgba(16,185,129,0.2);
|
||||
border-radius: var(--radius-xl); padding: var(--space-5);
|
||||
margin-bottom: var(--space-4); text-align: center;
|
||||
box-shadow: 0 0 20px rgba(16,185,129,0.08);
|
||||
}
|
||||
.prompt-heading {
|
||||
font-size: 16px; font-weight: 600; color: var(--emerald-light);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.prompt-text {
|
||||
font-size: 15px; color: var(--soft-light); line-height: 1.6;
|
||||
font-style: italic;
|
||||
}
|
||||
.prompt-step {
|
||||
display: flex; align-items: flex-start; gap: 12px;
|
||||
padding: 12px 0; border-bottom: 1px solid rgba(28,34,64,0.6);
|
||||
}
|
||||
.prompt-step:last-child { border-bottom: none; }
|
||||
.prompt-step-num {
|
||||
width: 24px; height: 24px; border-radius: 50%;
|
||||
background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 12px; font-weight: 700; color: var(--emerald); flex-shrink: 0;
|
||||
}
|
||||
.prompt-step-text { font-size: 14px; color: var(--soft-light); line-height: 1.5; }
|
||||
.bottom-actions {
|
||||
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);
|
||||
display: flex; flex-direction: column; gap: var(--space-2);
|
||||
}
|
||||
.btn-save-emerald {
|
||||
display: flex; align-items: center; justify-content: center; gap: var(--space-2);
|
||||
height: 52px; width: 100%; background: var(--emerald); color: var(--pure-light);
|
||||
font-size: 16px; font-weight: 600; border-radius: var(--radius-lg);
|
||||
box-shadow: var(--glow-emerald); text-decoration: none; transition: background 0.2s;
|
||||
}
|
||||
.btn-save-emerald:hover { background: var(--emerald-light); }
|
||||
.btn-back-row {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.btn-back-text {
|
||||
color: var(--dim-light); font-size: 14px; text-decoration: none;
|
||||
display: flex; align-items: center; gap: 4px;
|
||||
}
|
||||
.screen-content { padding-bottom: 140px; }
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="25-lens-create-step5.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<span class="nav-title">New Goal</span>
|
||||
<span class="nav-action body-sm text-dim">6 of 6</span>
|
||||
</div>
|
||||
|
||||
<div class="step-progress">
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot completed"></div>
|
||||
<div class="step-dot active"></div>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-top: 16px; position: relative; overflow: hidden;">
|
||||
<div class="viz-aura"></div>
|
||||
|
||||
<!-- Emerald kaleidoscope -->
|
||||
<img src="../../assets/kalei-logo.svg" width="100" height="100" alt="Kalei" class="viz-kaleidoscope" style="filter: drop-shadow(0 0 12px rgba(139,92,246,0.3));">
|
||||
|
||||
<div class="prompt-card">
|
||||
<div class="prompt-heading">Visualization Prompt</div>
|
||||
<div class="body-sm text-dim" style="margin-bottom: var(--space-4);">Take a moment to close your eyes after reading each step</div>
|
||||
|
||||
<div class="prompt-step">
|
||||
<div class="prompt-step-num">1</div>
|
||||
<div class="prompt-step-text">Find a comfortable position and take three slow, deep breaths.</div>
|
||||
</div>
|
||||
<div class="prompt-step">
|
||||
<div class="prompt-step-num">2</div>
|
||||
<div class="prompt-step-text">Picture yourself standing at the front of the room, composed and ready. Your slides are behind you. The team is watching — and you feel ready.</div>
|
||||
</div>
|
||||
<div class="prompt-step">
|
||||
<div class="prompt-step-num">3</div>
|
||||
<div class="prompt-step-text">Notice the physical sensations — your feet planted, your voice clear and even, your hands still. You are in control of this moment.</div>
|
||||
</div>
|
||||
<div class="prompt-step">
|
||||
<div class="prompt-step-num">4</div>
|
||||
<div class="prompt-step-text">Feel the satisfaction of finishing strong. Someone asks a question. You answer it. The room responds with respect. Hold that feeling.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body-sm text-dim text-center" style="line-height: 1.5;">
|
||||
Regular mental rehearsal activates the same neural pathways as physical practice.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-actions">
|
||||
<a class="btn-save-emerald" href="27-lens-goal-detail.html">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M3 9l5 5 7-8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
Save Goal
|
||||
</a>
|
||||
<div class="btn-back-row">
|
||||
<a class="btn-back-text" href="25-lens-create-step5.html">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M9 3L5 7l4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
Back to milestones
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
251
initial mockups/screens/lens/27-lens-goal-detail.html
Normal file
251
initial mockups/screens/lens/27-lens-goal-detail.html
Normal file
@@ -0,0 +1,251 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Goal Detail</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.nav-back { color: var(--emerald-light) !important; }
|
||||
.goal-hero {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
padding: 24px 0 20px;
|
||||
}
|
||||
.progress-ring-large {
|
||||
position: relative; display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 120px; height: 120px; margin-bottom: 16px;
|
||||
filter: drop-shadow(0 0 12px rgba(16,185,129,0.2));
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
}
|
||||
.progress-ring-large svg { transform: rotate(-90deg); position: absolute; }
|
||||
.progress-ring-large .ring-pct {
|
||||
font-size: 28px; font-weight: 700; color: var(--pure-light); position: relative; z-index: 1;
|
||||
}
|
||||
.progress-ring-large .ring-label {
|
||||
position: absolute; top: 62%; font-size: 11px; color: var(--dim-light);
|
||||
text-transform: uppercase; letter-spacing: 0.05em; z-index: 1;
|
||||
}
|
||||
.goal-title-hero {
|
||||
font-size: 20px; font-weight: 700; color: var(--pure-light); text-align: center;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.goal-date-chip {
|
||||
background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.2);
|
||||
border-radius: var(--radius-full); padding: 4px 14px; font-size: 13px;
|
||||
color: var(--emerald-light); display: inline-flex; align-items: center; gap: 6px;
|
||||
}
|
||||
.section-card {
|
||||
background: var(--kalei-navy); border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl); padding: var(--space-4); margin-bottom: var(--space-3);
|
||||
}
|
||||
.card-section-label {
|
||||
font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
|
||||
color: var(--dim-light); margin-bottom: 12px;
|
||||
}
|
||||
.milestone-row {
|
||||
display: flex; align-items: center; gap: var(--space-3);
|
||||
padding: 8px 0; border-bottom: 1px solid rgba(28,34,64,0.6);
|
||||
}
|
||||
.milestone-row:last-child { border-bottom: none; }
|
||||
.milestone-check {
|
||||
width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
|
||||
border: 2px solid var(--twilight); display: flex; align-items: center; justify-content: center;
|
||||
cursor: pointer; transition: all 0.2s;
|
||||
}
|
||||
.milestone-check.done {
|
||||
border-color: var(--emerald); background: rgba(16,185,129,0.15);
|
||||
}
|
||||
.milestone-text {
|
||||
flex: 1; font-size: 14px; color: var(--soft-light); line-height: 1.4;
|
||||
}
|
||||
.milestone-text.done { color: var(--dim-light); text-decoration: line-through; }
|
||||
.milestone-date { font-size: 12px; color: var(--dim-light); }
|
||||
.ifthen-plan {
|
||||
background: var(--deep-glass); border-radius: var(--radius-md);
|
||||
padding: var(--space-3); margin-bottom: var(--space-2);
|
||||
}
|
||||
.ifthen-plan:last-child { margin-bottom: 0; }
|
||||
.ifthen-plan-text { font-size: 13px; color: var(--soft-light); line-height: 1.5; }
|
||||
.ifthen-if { color: var(--emerald); font-weight: 600; }
|
||||
.ifthen-then { color: var(--sapphire-light); font-weight: 600; }
|
||||
.actions-row {
|
||||
display: flex; gap: var(--space-3); margin-bottom: var(--space-4);
|
||||
}
|
||||
.btn-rehearsal {
|
||||
flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
|
||||
height: 52px; background: var(--emerald); color: var(--pure-light);
|
||||
font-size: 15px; font-weight: 600; border-radius: var(--radius-lg);
|
||||
box-shadow: var(--glow-emerald); text-decoration: none; transition: background 0.2s;
|
||||
}
|
||||
.btn-rehearsal:hover { background: var(--emerald-light); }
|
||||
.btn-log {
|
||||
flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
|
||||
height: 52px; background: var(--deep-glass); color: var(--soft-light);
|
||||
font-size: 15px; font-weight: 600; border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--twilight); text-decoration: none; transition: all 0.2s ease-out;
|
||||
}
|
||||
.btn-log:hover { background: var(--twilight); border-color: rgba(16,185,129,0.3); }
|
||||
.screen-content { padding-bottom: 24px; }
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="20-lens-dashboard.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<span class="nav-title">Goal</span>
|
||||
<span class="nav-action">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" style="color: var(--dim-light);">
|
||||
<circle cx="10" cy="5" r="1.5" fill="currentColor"/>
|
||||
<circle cx="10" cy="10" r="1.5" fill="currentColor"/>
|
||||
<circle cx="10" cy="15" r="1.5" fill="currentColor"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content">
|
||||
<div class="goal-hero">
|
||||
<!-- Large progress ring — 65% of circumference (r=52): 2π×52=326.7; 65%=212.4 filled, 114.3 gap -->
|
||||
<div class="progress-ring-large">
|
||||
<svg width="120" height="120" viewBox="0 0 120 120">
|
||||
<defs>
|
||||
<linearGradient id="pr27-grEm" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="60" cy="60" r="52" fill="none" stroke="var(--twilight)" stroke-width="6"/>
|
||||
<circle cx="60" cy="60" r="52" fill="none" stroke="url(#pr27-grEm)" stroke-width="6"
|
||||
stroke-dasharray="212.4 114.3" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="ring-pct">65%</span>
|
||||
<span class="ring-label">Complete</span>
|
||||
</div>
|
||||
<div class="goal-title-hero">Present with confidence</div>
|
||||
<div class="body-sm text-dim" style="margin-bottom: var(--space-2);">Started Feb 5 · 12 evidence tiles</div>
|
||||
<span class="goal-date-chip">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="5" stroke="currentColor" fill="none" stroke-width="1"/><path d="M6 3v3l2 1.5" stroke="currentColor" stroke-width="0.8" stroke-linecap="round"/></svg>
|
||||
3 if-then plans
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="actions-row">
|
||||
<a class="btn-rehearsal" href="29-rehearsal-session.html">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<circle cx="9" cy="9" r="7" stroke="white" stroke-width="1.2"/>
|
||||
<circle cx="9" cy="9" r="3" stroke="white" stroke-width="0.8"/>
|
||||
</svg>
|
||||
Start Rehearsal
|
||||
</a>
|
||||
<a class="btn-log" href="#">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M9 3v6l4 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<circle cx="9" cy="9" r="7" stroke="currentColor" stroke-width="1.2"/>
|
||||
</svg>
|
||||
Log Progress
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Milestones -->
|
||||
<div class="section-card">
|
||||
<div class="card-section-label">Milestones</div>
|
||||
|
||||
<div class="milestone-row" onclick="toggleCheck(this)">
|
||||
<div class="milestone-check done">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="var(--emerald)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="flex-col flex" style="flex:1; gap:2px;">
|
||||
<div class="milestone-text done">Deliver team standup without notes</div>
|
||||
<div class="milestone-date">Completed Feb 10</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="milestone-row" onclick="toggleCheck(this)">
|
||||
<div class="milestone-check done">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="var(--emerald)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="flex-col flex" style="flex:1; gap:2px;">
|
||||
<div class="milestone-text done">Present sprint retro to the team</div>
|
||||
<div class="milestone-date">Completed Feb 18</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="milestone-row" onclick="toggleCheck(this)">
|
||||
<div class="milestone-check"></div>
|
||||
<div class="flex-col flex" style="flex:1; gap:2px;">
|
||||
<div class="milestone-text">Present quarterly results to department</div>
|
||||
<div class="milestone-date">Target: Mar 1, 2026</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="milestone-row" onclick="toggleCheck(this)">
|
||||
<div class="milestone-check"></div>
|
||||
<div class="flex-col flex" style="flex:1; gap:2px;">
|
||||
<div class="milestone-text">Volunteer to present at all-hands</div>
|
||||
<div class="milestone-date">Target: Mar 28, 2026</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- If-Then Plans -->
|
||||
<div class="section-card">
|
||||
<div class="card-section-label">If-Then Plans</div>
|
||||
|
||||
<div class="ifthen-plan">
|
||||
<div class="ifthen-plan-text">
|
||||
<span class="ifthen-if">If</span> I feel my voice shaking while presenting,
|
||||
<span class="ifthen-then">then</span> I will pause, take a breath, and remember I know this material.
|
||||
</div>
|
||||
</div>
|
||||
<div class="ifthen-plan">
|
||||
<div class="ifthen-plan-text">
|
||||
<span class="ifthen-if">If</span> I start to spiral about what my manager thinks,
|
||||
<span class="ifthen-then">then</span> I will focus on one friendly face in the room and speak to them.
|
||||
</div>
|
||||
</div>
|
||||
<div class="ifthen-plan">
|
||||
<div class="ifthen-plan-text">
|
||||
<span class="ifthen-if">If</span> I lose my place or stumble on a slide,
|
||||
<span class="ifthen-then">then</span> I will say "Let me back up a moment" and continue — no apology needed.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Why this matters -->
|
||||
<div class="section-card" style="border-color: rgba(16,185,129,0.15);">
|
||||
<div class="card-section-label">Why This Matters</div>
|
||||
<div class="body text-soft" style="line-height: 1.6; font-style: italic;">
|
||||
"I want to stop letting fear of judgment stop me from sharing ideas I actually believe in. Being visible at work matters for my career — and I deserve to be heard."
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleCheck(row) {
|
||||
const check = row.querySelector('.milestone-check');
|
||||
const text = row.querySelector('.milestone-text');
|
||||
const isChecked = check.classList.contains('done');
|
||||
if (isChecked) {
|
||||
check.classList.remove('done');
|
||||
check.innerHTML = '';
|
||||
text.classList.remove('done');
|
||||
} else {
|
||||
check.classList.add('done');
|
||||
check.innerHTML = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="var(--emerald)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
|
||||
text.classList.add('done');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
148
initial mockups/screens/lens/28-lens-affirmation.html
Normal file
148
initial mockups/screens/lens/28-lens-affirmation.html
Normal file
@@ -0,0 +1,148 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Daily Affirmation</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.nav-back { color: var(--emerald-light) !important; }
|
||||
.affirmation-canvas {
|
||||
position: relative;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
flex: 1; padding: 0 var(--space-6); text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.em-aura-large {
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 320px; height: 320px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(16,185,129,0.18) 0%, rgba(16,185,129,0.05) 50%, transparent 70%);
|
||||
filter: blur(60px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
.em-aura-inner {
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 160px; height: 160px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(16,185,129,0.12) 0%, transparent 70%);
|
||||
filter: blur(30px);
|
||||
animation: breathing 6s ease-in-out infinite 0.5s;
|
||||
pointer-events: none;
|
||||
}
|
||||
.mini-kaleidoscope { animation: breathing 6s ease-in-out infinite; margin-bottom: var(--space-6); }
|
||||
.date-label {
|
||||
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
||||
letter-spacing: 0.08em; color: var(--emerald);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.affirmation-quote {
|
||||
font-size: 22px; font-weight: 500; color: var(--pure-light);
|
||||
line-height: 1.4; font-family: var(--font-display);
|
||||
margin-bottom: 28px; position: relative; z-index: 1;
|
||||
}
|
||||
.affirmation-quote::before {
|
||||
content: '"';
|
||||
font-size: 48px; color: var(--emerald); opacity: 0.3;
|
||||
position: absolute; top: -16px; left: -12px;
|
||||
font-family: Georgia, serif; line-height: 1;
|
||||
}
|
||||
.affirmation-subtext {
|
||||
font-size: 14px; color: var(--dim-light); line-height: 1.5;
|
||||
margin-bottom: 32px; position: relative; z-index: 1;
|
||||
}
|
||||
.reflect-btn {
|
||||
display: flex; align-items: center; justify-content: center; gap: 10px;
|
||||
height: 52px; width: 100%; max-width: 300px;
|
||||
background: var(--emerald); color: var(--pure-light);
|
||||
font-size: 16px; font-weight: 600; border-radius: var(--radius-lg);
|
||||
box-shadow: var(--glow-emerald); text-decoration: none;
|
||||
transition: background 0.2s; position: relative; z-index: 1;
|
||||
}
|
||||
.reflect-btn:hover { background: var(--emerald-light); }
|
||||
.shard-deco {
|
||||
position: absolute; opacity: 0.15;
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
}
|
||||
.new-affirmation-link {
|
||||
position: relative; z-index: 1; margin-top: var(--space-4);
|
||||
font-size: 13px; color: var(--dim-light); text-decoration: none;
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.new-affirmation-link:hover { color: var(--emerald-light); }
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="20-lens-dashboard.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<span class="nav-title">Affirmation</span>
|
||||
<span class="nav-action">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" style="color: var(--dim-light);">
|
||||
<path d="M4 10h12M4 6h12M4 14h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="affirmation-canvas">
|
||||
<div class="em-aura-large"></div>
|
||||
<div class="em-aura-inner"></div>
|
||||
|
||||
<!-- Decorative shards -->
|
||||
<svg class="shard-deco" style="top: 10%; left: 5%;" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M12 2L16 12L12 22L8 12Z" fill="var(--emerald)" opacity="0.6"/>
|
||||
</svg>
|
||||
<svg class="shard-deco" style="top: 15%; right: 8%; animation-delay: 2s;" width="16" height="16" viewBox="0 0 16 16">
|
||||
<path d="M8 1L11 8L8 15L5 8Z" fill="var(--emerald)" opacity="0.5"/>
|
||||
</svg>
|
||||
<svg class="shard-deco" style="bottom: 20%; left: 10%; animation-delay: 3s;" width="20" height="20" viewBox="0 0 20 20">
|
||||
<path d="M10 2L14 10L10 18L6 10Z" fill="var(--emerald-light)" opacity="0.4"/>
|
||||
</svg>
|
||||
<svg class="shard-deco" style="bottom: 28%; right: 6%; animation-delay: 1s;" width="12" height="12" viewBox="0 0 12 12">
|
||||
<path d="M6 1L8 6L6 11L4 6Z" fill="var(--emerald)" opacity="0.5"/>
|
||||
</svg>
|
||||
|
||||
<img src="../../assets/kalei-logo.svg" width="48" height="48" alt="Kalei" class="mini-kaleidoscope">
|
||||
|
||||
<div class="date-label">Today — Feb 22, 2026</div>
|
||||
|
||||
<div class="affirmation-quote">
|
||||
I have the strength and clarity to take one step forward, even when the path isn't fully visible yet.
|
||||
</div>
|
||||
|
||||
<div class="affirmation-subtext">
|
||||
This affirmation was crafted from your goal to present with confidence and your Mirror sessions this week — you've been working through exactly what holds you back.
|
||||
</div>
|
||||
|
||||
<a class="reflect-btn" href="../mirror/15-mirror-home.html">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M9 3L12 7L13 11L9 15L5 11L6 7Z" stroke="white" fill="none" stroke-width="1.2"/>
|
||||
</svg>
|
||||
Reflect on this
|
||||
</a>
|
||||
|
||||
<a class="new-affirmation-link" href="#">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5-3.5M2 7l3.5 3.5M2 7h10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
Generate new affirmation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
258
initial mockups/screens/lens/29-rehearsal-session.html
Normal file
258
initial mockups/screens/lens/29-rehearsal-session.html
Normal file
@@ -0,0 +1,258 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Rehearsal Session</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.nav-back { color: var(--emerald-light) !important; }
|
||||
.nav-close-btn { color: var(--dim-light); cursor: pointer; }
|
||||
.session-bg {
|
||||
position: absolute; inset: 0;
|
||||
background: radial-gradient(ellipse at 50% 30%, rgba(16,185,129,0.08) 0%, transparent 65%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.timer-ring-wrap {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin: 16px auto 20px; position: relative;
|
||||
width: 76px; height: 76px;
|
||||
}
|
||||
.timer-ring-wrap svg { transform: rotate(-90deg); position: absolute; }
|
||||
.timer-text {
|
||||
position: relative; z-index: 1; text-align: center;
|
||||
}
|
||||
.timer-time { font-size: 20px; font-weight: 700; color: var(--pure-light); }
|
||||
.timer-label { font-size: 10px; color: var(--emerald); text-transform: uppercase; letter-spacing: 0.06em; }
|
||||
|
||||
.step-indicator {
|
||||
display: flex; align-items: center; justify-content: center; gap: 6px;
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.step-indicator-dot {
|
||||
width: 6px; height: 6px; border-radius: 50%; background: var(--twilight);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.step-indicator-dot.active { background: var(--emerald); width: 18px; border-radius: 3px; }
|
||||
.step-indicator-dot.done { background: var(--emerald); opacity: 0.5; }
|
||||
|
||||
.prompt-area {
|
||||
padding: var(--space-4) var(--space-5);
|
||||
text-align: center;
|
||||
animation: fadeIn 0.5s ease;
|
||||
}
|
||||
.prompt-step-tag {
|
||||
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
||||
letter-spacing: 0.06em; color: var(--emerald); margin-bottom: 12px;
|
||||
}
|
||||
.prompt-main {
|
||||
font-size: 20px; font-weight: 600; color: var(--pure-light);
|
||||
line-height: 1.4; margin-bottom: 12px; font-family: var(--font-display);
|
||||
}
|
||||
.prompt-sub {
|
||||
font-size: 15px; color: var(--dim-light); line-height: 1.6;
|
||||
}
|
||||
|
||||
.breathing-guide {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin: 24px auto 20px;
|
||||
}
|
||||
.breathing-circle {
|
||||
width: 80px; height: 80px; border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(16,185,129,0.25), rgba(16,185,129,0.05));
|
||||
border: 1.5px solid rgba(16,185,129,0.3);
|
||||
animation: breathCycle 8s ease-in-out infinite;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.breathing-circle::after {
|
||||
content: '';
|
||||
position: absolute; inset: 8px; border-radius: 50%;
|
||||
background: rgba(16,185,129,0.1);
|
||||
animation: breathCycleInner 8s ease-in-out infinite;
|
||||
}
|
||||
.breath-label {
|
||||
font-size: 12px; color: var(--emerald); font-weight: 500;
|
||||
letter-spacing: 0.05em; position: relative; z-index: 1;
|
||||
animation: breathLabel 8s ease-in-out infinite;
|
||||
}
|
||||
@keyframes breathCycle {
|
||||
0%, 100% { transform: scale(1); opacity: 0.8; }
|
||||
25% { transform: scale(1.5); opacity: 1; }
|
||||
50% { transform: scale(1.5); opacity: 1; }
|
||||
75% { transform: scale(1); opacity: 0.8; }
|
||||
}
|
||||
@keyframes breathCycleInner {
|
||||
0%, 100% { transform: scale(1); }
|
||||
25% { transform: scale(1.3); }
|
||||
50% { transform: scale(1.3); }
|
||||
75% { transform: scale(1); }
|
||||
}
|
||||
@keyframes breathLabel {
|
||||
0%, 100% { opacity: 0; }
|
||||
10% { opacity: 1; }
|
||||
24% { opacity: 1; }
|
||||
35% { opacity: 0; }
|
||||
50% { opacity: 1; }
|
||||
60% { opacity: 1; }
|
||||
72% { opacity: 0; }
|
||||
}
|
||||
|
||||
.bottom-area {
|
||||
padding: var(--space-4) var(--space-4) var(--space-6);
|
||||
display: flex; flex-direction: column; gap: var(--space-3);
|
||||
}
|
||||
.btn-next-step {
|
||||
display: flex; align-items: center; justify-content: center; gap: 10px;
|
||||
height: 56px; width: 100%; background: var(--emerald); color: var(--pure-light);
|
||||
font-size: 16px; font-weight: 600; border-radius: var(--radius-lg);
|
||||
box-shadow: var(--glow-emerald); border: none; cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.btn-next-step:hover { background: var(--emerald-light); }
|
||||
.skip-link {
|
||||
text-align: center; font-size: 13px; color: var(--dim-light);
|
||||
cursor: pointer; padding: 4px;
|
||||
}
|
||||
.skip-link:hover { color: var(--soft-light); }
|
||||
|
||||
.screen-content { padding: 0; overflow-y: hidden; display: flex; flex-direction: column; }
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="27-lens-goal-detail.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<div style="display:flex; flex-direction:column; align-items:center; position:absolute; left:50%; transform:translateX(-50%);">
|
||||
<span class="nav-title" style="position:static; transform:none;">Rehearsal</span>
|
||||
<span style="font-size:11px; color:var(--emerald); font-weight:500;">Present with confidence</span>
|
||||
</div>
|
||||
<a class="nav-close-btn" href="20-lens-dashboard.html">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none">
|
||||
<path d="M6 6l10 10M16 6L6 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="screen-content">
|
||||
<div class="session-bg"></div>
|
||||
|
||||
<!-- Timer ring — extracted from progress-indicators.svg Timer Ring: r=30, stroke-width=3, 76px viewport -->
|
||||
<!-- Full circumference = 2π×30 = 188.5; stroke-dasharray="141 188" = 75% remaining -->
|
||||
<div class="timer-ring-wrap">
|
||||
<svg width="76" height="76" viewBox="0 0 76 76">
|
||||
<defs>
|
||||
<linearGradient id="pr29-grEm" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="38" cy="38" r="30" fill="none" stroke="var(--twilight)" stroke-width="3"/>
|
||||
<circle cx="38" cy="38" r="30" fill="none" stroke="url(#pr29-grEm)" stroke-width="3"
|
||||
stroke-dasharray="141 188" stroke-dashoffset="0" stroke-linecap="round" id="timerArc"/>
|
||||
</svg>
|
||||
<div class="timer-text">
|
||||
<div class="timer-time" id="timerDisplay">3:20</div>
|
||||
<div class="timer-label">Remaining</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step indicators -->
|
||||
<div class="step-indicator">
|
||||
<div class="step-indicator-dot done"></div>
|
||||
<div class="step-indicator-dot active"></div>
|
||||
<div class="step-indicator-dot"></div>
|
||||
<div class="step-indicator-dot"></div>
|
||||
<div class="step-indicator-dot"></div>
|
||||
</div>
|
||||
|
||||
<!-- Breathing guide -->
|
||||
<div class="breathing-guide">
|
||||
<div class="breathing-circle">
|
||||
<span class="breath-label">Breathe</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Prompt -->
|
||||
<div class="prompt-area">
|
||||
<div class="prompt-step-tag">Step 2 of 5 — Visualize</div>
|
||||
<div class="prompt-main">Picture yourself beginning the presentation</div>
|
||||
<div class="prompt-sub">Your team lead has just introduced you. You walk to the front. You look out at the room — and you feel ready. Your voice is steady. You know this material.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-area">
|
||||
<button class="btn-next-step" onclick="nextStep()">
|
||||
I can see it
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M6 4l5 5-5 5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</button>
|
||||
<div class="skip-link">Skip this step</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const steps = [
|
||||
{ tag: 'Step 1 of 5 — Settle', main: 'Find a comfortable position', sub: 'Sit upright and close your eyes when you\'re ready. Take three slow, deep breaths. Let your shoulders drop. You\'re safe here.' },
|
||||
{ tag: 'Step 2 of 5 — Visualize', main: 'Picture yourself beginning the presentation', sub: 'Your team lead has just introduced you. You walk to the front. You look out at the room — and you feel ready. Your voice is steady. You know this material.' },
|
||||
{ tag: 'Step 3 of 5 — Feel', main: 'Notice what confidence feels like in your body', sub: 'Your feet are planted. Your breathing is even. When you speak, the words come clearly. Someone nods. You make eye contact and hold it.' },
|
||||
{ tag: 'Step 4 of 5 — If-Then', main: 'Your voice starts to shake — what do you do?', sub: 'You pause. You take one slow breath. You say to yourself: "I know this material." And you continue — because you do. This is the plan working.' },
|
||||
{ tag: 'Step 5 of 5 — Return', main: 'Gently return to the present', sub: 'Take a deep breath and slowly open your eyes. That feeling of calm authority is real. It\'s yours. You can bring it into any room.' }
|
||||
];
|
||||
let currentStep = 1;
|
||||
let timeLeft = 200;
|
||||
|
||||
function nextStep() {
|
||||
if (currentStep < steps.length - 1) {
|
||||
currentStep++;
|
||||
updateUI();
|
||||
} else {
|
||||
window.location.href = '30-rehearsal-complete.html';
|
||||
}
|
||||
}
|
||||
|
||||
function updateUI() {
|
||||
const step = steps[currentStep];
|
||||
document.querySelector('.prompt-step-tag').textContent = step.tag;
|
||||
document.querySelector('.prompt-main').textContent = step.main;
|
||||
document.querySelector('.prompt-sub').textContent = step.sub;
|
||||
|
||||
document.querySelectorAll('.step-indicator-dot').forEach((dot, i) => {
|
||||
dot.className = 'step-indicator-dot';
|
||||
if (i < currentStep) dot.classList.add('done');
|
||||
else if (i === currentStep) dot.classList.add('active');
|
||||
});
|
||||
|
||||
if (currentStep === steps.length - 1) {
|
||||
document.querySelector('.btn-next-step').innerHTML = 'Complete Session <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 9l4 4 8-8" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
|
||||
}
|
||||
}
|
||||
|
||||
// Timer — circumference = 2π×30 = 188.5 (matches progress-indicators.svg Timer Ring r=30)
|
||||
const interval = setInterval(() => {
|
||||
if (timeLeft > 0) {
|
||||
timeLeft--;
|
||||
const m = Math.floor(timeLeft / 60);
|
||||
const s = timeLeft % 60;
|
||||
document.getElementById('timerDisplay').textContent = `${m}:${s.toString().padStart(2,'0')}`;
|
||||
const circumference = 188.5;
|
||||
const totalTime = 300;
|
||||
const filled = circumference * (timeLeft / totalTime);
|
||||
document.getElementById('timerArc').setAttribute('stroke-dasharray', `${filled} ${circumference}`);
|
||||
} else {
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, 1000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
267
initial mockups/screens/lens/30-rehearsal-complete.html
Normal file
267
initial mockups/screens/lens/30-rehearsal-complete.html
Normal file
@@ -0,0 +1,267 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Rehearsal Complete</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.nav-back { color: var(--emerald-light) !important; }
|
||||
.complete-hero {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
padding: 20px var(--space-4) 0; text-align: center;
|
||||
}
|
||||
.success-ring {
|
||||
position: relative; width: 90px; height: 90px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.success-ring svg { position: absolute; }
|
||||
.success-icon { position: relative; z-index: 1; }
|
||||
.complete-title {
|
||||
font-size: 26px; font-weight: 700; color: var(--pure-light);
|
||||
font-family: var(--font-display); margin-bottom: 6px;
|
||||
}
|
||||
.complete-sub {
|
||||
font-size: 15px; color: var(--dim-light); margin-bottom: var(--space-6);
|
||||
}
|
||||
.rating-section {
|
||||
width: 100%; padding: 0 var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.rating-label {
|
||||
font-size: 15px; font-weight: 600; color: var(--soft-light);
|
||||
margin-bottom: 14px; text-align: center;
|
||||
}
|
||||
.vividness-stars {
|
||||
display: flex; gap: 12px; justify-content: center; margin-bottom: 6px;
|
||||
}
|
||||
.fragment-star {
|
||||
cursor: pointer; transition: transform 0.15s;
|
||||
opacity: 0.3;
|
||||
}
|
||||
.fragment-star:hover, .fragment-star.active { opacity: 1; transform: scale(1.1); }
|
||||
.rating-hint {
|
||||
font-size: 12px; color: var(--dim-light); text-align: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.slider-section {
|
||||
width: 100%; padding: 0 var(--space-4);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.slider-label {
|
||||
font-size: 15px; font-weight: 600; color: var(--soft-light);
|
||||
margin-bottom: 12px; text-align: center;
|
||||
}
|
||||
.slider-track {
|
||||
position: relative; height: 6px; background: var(--twilight);
|
||||
border-radius: var(--radius-full); margin-bottom: 8px;
|
||||
}
|
||||
.slider-fill {
|
||||
position: absolute; left: 0; top: 0; bottom: 0;
|
||||
width: 70%; background: var(--emerald); border-radius: var(--radius-full);
|
||||
box-shadow: 0 0 8px rgba(16,185,129,0.4);
|
||||
}
|
||||
.slider-thumb {
|
||||
position: absolute; top: 50%; right: 30%; transform: translate(50%, -50%);
|
||||
width: 20px; height: 20px; border-radius: 50%;
|
||||
background: var(--emerald); box-shadow: 0 0 12px rgba(16,185,129,0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
.slider-labels {
|
||||
display: flex; justify-content: space-between;
|
||||
font-size: 12px; color: var(--dim-light);
|
||||
}
|
||||
input[type=range] {
|
||||
-webkit-appearance: none; width: 100%; height: 6px;
|
||||
background: var(--twilight); border-radius: 3px; outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
|
||||
background: var(--emerald); cursor: pointer;
|
||||
box-shadow: 0 0 10px rgba(16,185,129,0.4);
|
||||
}
|
||||
@keyframes drawRing {
|
||||
from { stroke-dashoffset: 251.3; }
|
||||
to { stroke-dashoffset: 0; }
|
||||
}
|
||||
.evidence-notification {
|
||||
margin: 0 var(--space-4) var(--space-4);
|
||||
background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(59,130,246,0.1));
|
||||
border: 1px solid rgba(16,185,129,0.3);
|
||||
border-radius: var(--radius-xl); padding: var(--space-4);
|
||||
display: flex; align-items: center; gap: var(--space-3);
|
||||
}
|
||||
.evidence-tile-preview {
|
||||
width: 52px; height: 52px; border-radius: var(--radius-md);
|
||||
background: rgba(16,185,129,0.1); border: 1.5px solid var(--emerald);
|
||||
box-shadow: 0 0 12px rgba(16,185,129,0.3);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0; animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
.evidence-info { flex: 1; }
|
||||
.evidence-title { font-size: 14px; font-weight: 600; color: var(--pure-light); margin-bottom: 3px; }
|
||||
.evidence-sub { font-size: 12px; color: var(--dim-light); }
|
||||
.done-btn {
|
||||
height: 52px; margin: 0 var(--space-4) var(--space-6);
|
||||
background: var(--emerald); color: var(--pure-light); font-size: 16px; font-weight: 600;
|
||||
border-radius: var(--radius-lg); box-shadow: var(--glow-emerald);
|
||||
text-decoration: none; display: flex; align-items: center; justify-content: center;
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.done-btn:hover { background: var(--emerald-light); }
|
||||
.screen-content { padding: 0; }
|
||||
.em-aura {
|
||||
position: absolute; top: 10%; left: 50%; transform: translateX(-50%);
|
||||
width: 240px; height: 240px; border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(16,185,129,0.12) 0%, transparent 70%);
|
||||
filter: blur(50px); animation: breathing 6s ease-in-out infinite;
|
||||
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="nav-header">
|
||||
<a class="nav-back" href="29-rehearsal-session.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<span class="nav-title">Rehearsal Complete</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="overflow-y: auto; position: relative;">
|
||||
<div class="em-aura"></div>
|
||||
|
||||
<div class="complete-hero" style="position: relative; z-index: 1;">
|
||||
<div class="success-ring">
|
||||
<svg width="90" height="90" viewBox="0 0 90 90">
|
||||
<circle cx="45" cy="45" r="40" fill="none" stroke="var(--twilight)" stroke-width="3"/>
|
||||
<circle cx="45" cy="45" r="40" fill="none" stroke="var(--emerald)" stroke-width="3"
|
||||
stroke-dasharray="251.3" stroke-dashoffset="251.3" stroke-linecap="round"
|
||||
style="animation: drawRing 1s ease 0.3s forwards;"/>
|
||||
</svg>
|
||||
<div class="success-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
|
||||
<path d="M6 16l7 7 13-14" stroke="var(--emerald)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="complete-title">Rehearsal Complete</div>
|
||||
<div class="complete-sub">Present with confidence · Quarterly Results Scenario · 5 min</div>
|
||||
</div>
|
||||
|
||||
<!-- Vividness Rating -->
|
||||
<div class="rating-section">
|
||||
<div class="rating-label">How vivid was your visualization?</div>
|
||||
<div class="vividness-stars" id="stars">
|
||||
<!-- 5 emerald MD fragment diamonds — extracted from fragment-icons.svg Emerald MD -->
|
||||
<!-- MD diamond: M 0,-12 L 12,0 L 0,12 L -12,0 Z, specular M 0,-12 L 12,0 L 0,0 Z opacity=0.18, glow filter glowMd stdDev=3 -->
|
||||
<!-- Shared defs in first SVG only — siblings share defs from same document -->
|
||||
<svg class="fragment-star" onclick="setRating(1)" width="36" height="36" viewBox="0 0 36 36">
|
||||
<defs>
|
||||
<linearGradient id="fr30-grEm" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<filter id="fr30-glowMd" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g transform="translate(18,18)" filter="url(#fr30-glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#fr30-grEm)" 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>
|
||||
<svg class="fragment-star" onclick="setRating(2)" width="36" height="36" viewBox="0 0 36 36">
|
||||
<g transform="translate(18,18)" filter="url(#fr30-glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#fr30-grEm)" 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>
|
||||
<svg class="fragment-star active" onclick="setRating(3)" width="36" height="36" viewBox="0 0 36 36">
|
||||
<g transform="translate(18,18)" filter="url(#fr30-glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#fr30-grEm)" 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>
|
||||
<svg class="fragment-star active" onclick="setRating(4)" width="36" height="36" viewBox="0 0 36 36">
|
||||
<g transform="translate(18,18)" filter="url(#fr30-glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#fr30-grEm)" 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>
|
||||
<svg class="fragment-star active" onclick="setRating(5)" width="36" height="36" viewBox="0 0 36 36">
|
||||
<g transform="translate(18,18)" filter="url(#fr30-glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#fr30-grEm)" 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 class="rating-hint" id="ratingHint">Very vivid — you could almost feel it</div>
|
||||
</div>
|
||||
|
||||
<!-- How real slider -->
|
||||
<div class="slider-section">
|
||||
<div class="slider-label">How real did it feel?</div>
|
||||
<input type="range" min="0" max="100" value="70" id="realSlider">
|
||||
<div class="slider-labels">
|
||||
<span>Distant</span>
|
||||
<span>Very real</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Evidence Wall notification -->
|
||||
<div class="evidence-notification">
|
||||
<div class="evidence-tile-preview">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24">
|
||||
<defs><linearGradient id="gsEv" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/></linearGradient></defs>
|
||||
<circle cx="12" cy="12" r="9" fill="url(#gsEv)" opacity="0.8"/>
|
||||
<circle cx="12" cy="12" r="5" fill="none" stroke="white" stroke-width="1.2" opacity="0.6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="evidence-info">
|
||||
<div class="evidence-title">Evidence Wall tile earned!</div>
|
||||
<div class="evidence-sub">Lens Rehearsal · Circle tile added to your mosaic</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="done-btn" href="20-lens-dashboard.html">Done</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentRating = 3;
|
||||
const hints = ['', 'Hard to focus', 'Somewhat clear', 'Pretty vivid', 'Very vivid — you could almost feel it', 'Crystal clear — fully immersive'];
|
||||
|
||||
function setRating(n) {
|
||||
currentRating = n;
|
||||
document.querySelectorAll('.fragment-star').forEach((s, i) => {
|
||||
s.classList.toggle('active', i < n);
|
||||
});
|
||||
document.getElementById('ratingHint').textContent = hints[n];
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
332
initial mockups/screens/mirror/15-mirror-home.html
Normal file
332
initial mockups/screens/mirror/15-mirror-home.html
Normal file
@@ -0,0 +1,332 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Mirror</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.mirror-aura {
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(245,158,11,0.14) 0%, transparent 70%);
|
||||
filter: blur(50px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.mirror-greeting {
|
||||
padding: var(--space-5) 0 var(--space-4);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.streak-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: rgba(245,158,11,0.12);
|
||||
border: 1px solid rgba(245,158,11,0.25);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 4px 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--amber-light);
|
||||
}
|
||||
.start-session-card {
|
||||
background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(245,158,11,0.04));
|
||||
border: 1px solid rgba(245,158,11,0.25);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: var(--space-5);
|
||||
box-shadow: 0 0 24px rgba(245,158,11,0.08);
|
||||
}
|
||||
.start-session-card:hover { box-shadow: var(--glow-amber); }
|
||||
.mirror-icon-wrap {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgba(245,158,11,0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.session-card-content { flex: 1; }
|
||||
.session-card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.session-card-sub {
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.recent-session-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) 0;
|
||||
border-bottom: 1px solid rgba(28,34,64,0.5);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.2s ease-out;
|
||||
}
|
||||
.recent-session-item:hover { opacity: 0.72; }
|
||||
.recent-session-item:last-child { border-bottom: none; }
|
||||
.session-dot {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(245,158,11,0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.session-info { flex: 1; }
|
||||
.session-date { font-size: 13px; color: var(--soft-light); font-weight: 500; }
|
||||
.session-stats { font-size: 11px; color: var(--dim-light); margin-top: 2px; }
|
||||
.fragments-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-3);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.fragment-count-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
background: rgba(245,158,11,0.1);
|
||||
border: 1px solid rgba(245,158,11,0.2);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--amber-light);
|
||||
}
|
||||
.fragment-count-num {
|
||||
background: rgba(245,158,11,0.2);
|
||||
border-radius: var(--radius-full);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: var(--amber);
|
||||
}
|
||||
.content-z { position: relative; z-index: 1; }
|
||||
</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" style="padding-bottom: 16px;">
|
||||
<div class="mirror-aura"></div>
|
||||
|
||||
<div class="mirror-greeting">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--space-2);">
|
||||
<div class="heading text-pure">Good morning, Alex</div>
|
||||
<div class="streak-badge">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<path d="M7 1L9 5L13 5.5L10 8.5L10.5 13L7 11L3.5 13L4 8.5L1 5.5L5 5Z" fill="var(--amber)" opacity="0.9"/>
|
||||
</svg>
|
||||
14 days
|
||||
</div>
|
||||
</div>
|
||||
<div class="body" style="color: var(--dim-light);">What's on your mind today?</div>
|
||||
</div>
|
||||
|
||||
<!-- Start session card -->
|
||||
<a class="start-session-card" href="16-mirror-session.html">
|
||||
<div class="mirror-icon-wrap">
|
||||
<!-- Mirror hexagon icon -->
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="mirrorGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M14 3L20 7.5L20 16.5L14 21L8 16.5L8 7.5Z" stroke="url(#mirrorGrad)" fill="none" stroke-width="1.5"/>
|
||||
<path d="M14 7L18 10.2V16.8L14 20L10 16.8V10.2Z" fill="url(#mirrorGrad)" opacity="0.3"/>
|
||||
<circle cx="14" cy="12" r="2" fill="url(#mirrorGrad)" opacity="0.6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="session-card-content">
|
||||
<div class="session-card-title">Start a session</div>
|
||||
<div class="session-card-sub">Journal freely — fragments detected automatically</div>
|
||||
</div>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M8 4L14 10L8 16" stroke="var(--amber-light)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- Recent sessions -->
|
||||
<div class="content-z">
|
||||
<div class="section-header">
|
||||
<span class="section-title">Recent Sessions</span>
|
||||
<span class="section-action">See all</span>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-bottom: var(--space-4);">
|
||||
<a class="recent-session-item" href="19-mirror-reflection.html">
|
||||
<div class="session-dot">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M9 2L12.5 6.5L13.5 11L9 14.5L4.5 11L5.5 6.5Z" stroke="var(--amber)" fill="none" stroke-width="1.2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="session-info">
|
||||
<div class="session-date">Feb 21 — Evening</div>
|
||||
<div class="session-stats">12 min · 847 words · 3 fragments</div>
|
||||
</div>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<path d="M5 3L9 7L5 11" stroke="var(--faint-light)" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="recent-session-item" href="19-mirror-reflection.html">
|
||||
<div class="session-dot">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M9 2L12.5 6.5L13.5 11L9 14.5L4.5 11L5.5 6.5Z" stroke="var(--amber)" fill="none" stroke-width="1.2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="session-info">
|
||||
<div class="session-date">Feb 20 — Morning</div>
|
||||
<div class="session-stats">8 min · 524 words · 1 fragment</div>
|
||||
</div>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<path d="M5 3L9 7L5 11" stroke="var(--faint-light)" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="recent-session-item" href="19-mirror-reflection.html">
|
||||
<div class="session-dot">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M9 2L12.5 6.5L13.5 11L9 14.5L4.5 11L5.5 6.5Z" stroke="var(--amber)" fill="none" stroke-width="1.2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="session-info">
|
||||
<div class="session-date">Feb 18 — Night</div>
|
||||
<div class="session-stats">15 min · 1,102 words · 4 fragments</div>
|
||||
</div>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<path d="M5 3L9 7L5 11" stroke="var(--faint-light)" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Your Fragments section -->
|
||||
<div class="content-z">
|
||||
<div class="section-header">
|
||||
<span class="section-title">Your Fragments</span>
|
||||
<span class="section-action">Details</span>
|
||||
</div>
|
||||
|
||||
<div class="fragments-grid">
|
||||
<div class="fragment-count-chip">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<path d="M5 0.5L9 5L5 9.5L1 5Z" fill="var(--amber)" opacity="0.8"/>
|
||||
</svg>
|
||||
Catastrophizing
|
||||
<div class="fragment-count-num">7</div>
|
||||
</div>
|
||||
<div class="fragment-count-chip">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<path d="M5 0.5L9 5L5 9.5L1 5Z" fill="var(--amber)" opacity="0.8"/>
|
||||
</svg>
|
||||
Mind Reading
|
||||
<div class="fragment-count-num">4</div>
|
||||
</div>
|
||||
<div class="fragment-count-chip">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<path d="M5 0.5L9 5L5 9.5L1 5Z" fill="var(--amber)" opacity="0.8"/>
|
||||
</svg>
|
||||
Should Statements
|
||||
<div class="fragment-count-num">3</div>
|
||||
</div>
|
||||
<div class="fragment-count-chip">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<path d="M5 0.5L9 5L5 9.5L1 5Z" fill="var(--amber)" opacity="0.8"/>
|
||||
</svg>
|
||||
Overgeneralization
|
||||
<div class="fragment-count-num">2</div>
|
||||
</div>
|
||||
<div class="fragment-count-chip">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<path d="M5 0.5L9 5L5 9.5L1 5Z" fill="var(--amber)" opacity="0.8"/>
|
||||
</svg>
|
||||
Personalization
|
||||
<div class="fragment-count-num">2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item inactive" data-tab="turn" href="../turn/10-turn-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 2L20 12L12 22L4 12Z" fill="currentColor" opacity="0.9"/><path d="M12 2L20 12L12 12Z" fill="white" opacity="0.15"/></svg>
|
||||
<span class="tab-label">Turn</span>
|
||||
</a>
|
||||
<a class="tab-item active" data-tab="mirror" href="15-mirror-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 3L16 8L18 14L12 19L6 14L8 8Z" stroke="currentColor" fill="none" stroke-width="1.2"/></svg>
|
||||
<span class="tab-label">Mirror</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="lens" href="../lens/20-lens-dashboard.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="currentColor" fill="none" stroke-width="1.2"/><circle cx="12" cy="12" r="4" stroke="currentColor" fill="none" stroke-width="0.8"/></svg>
|
||||
<span class="tab-label">Lens</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="gallery" href="../gallery/31-gallery-all.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><rect x="3" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/></svg>
|
||||
<span class="tab-label">Gallery</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="you" href="../you/35-you-profile.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="9" r="4" stroke="currentColor" fill="none" stroke-width="1.2"/><path d="M4 20C4 16 8 14 12 14C16 14 20 16 20 20" stroke="currentColor" fill="none" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
<span class="tab-label">You</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
219
initial mockups/screens/mirror/16-mirror-session.html
Normal file
219
initial mockups/screens/mirror/16-mirror-session.html
Normal file
@@ -0,0 +1,219 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Mirror Session</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.chat-area {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--space-4) var(--space-4) var(--space-2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.chat-area::-webkit-scrollbar { display: none; }
|
||||
.chat-session-frame {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(var(--device-height) - var(--status-bar-height) - var(--nav-header-height) - 64px);
|
||||
}
|
||||
.input-accessory {
|
||||
height: 64px;
|
||||
background: var(--kalei-navy);
|
||||
border-top: 1px solid var(--twilight);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 0 var(--space-3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.chat-input {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 0 var(--space-4);
|
||||
font-family: var(--font-primary);
|
||||
font-size: 15px;
|
||||
color: var(--pure-light);
|
||||
outline: none;
|
||||
}
|
||||
.chat-input::placeholder { color: var(--faint-light); }
|
||||
.send-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: var(--amber);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
flex-shrink: 0;
|
||||
box-shadow: var(--glow-amber);
|
||||
transition: all 0.2s ease-out;
|
||||
text-decoration: none;
|
||||
}
|
||||
.send-btn:hover { background: var(--amber-light); box-shadow: 0 0 24px rgba(245,158,11,0.5); }
|
||||
.ai-thinking {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
margin-bottom: var(--space-3);
|
||||
width: 56px;
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
border-bottom-left-radius: var(--space-1);
|
||||
}
|
||||
.thinking-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--amber);
|
||||
animation: thinkingPulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
.thinking-dot:nth-child(2) { animation-delay: 0.2s; }
|
||||
.thinking-dot:nth-child(3) { animation-delay: 0.4s; }
|
||||
@keyframes thinkingPulse {
|
||||
0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
|
||||
40% { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
.session-timer {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.nav-close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--deep-glass);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.nav-close:hover { background: var(--twilight); }
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="15-mirror-home.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div style="display:flex; flex-direction:column; align-items:center; position:absolute; left:50%; transform:translateX(-50%);">
|
||||
<span class="nav-title" style="position:static; transform:none;">Mirror Session</span>
|
||||
<span class="session-timer" id="timer">0:00</span>
|
||||
</div>
|
||||
<a class="nav-close" href="19-mirror-reflection.html">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<path d="M2 2L12 12M12 2L2 12" stroke="var(--dim-light)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="chat-session-frame">
|
||||
<div class="chat-area">
|
||||
|
||||
<!-- AI opening -->
|
||||
<div class="chat-bubble ai" style="animation: fadeIn 0.4s ease-out;">
|
||||
Welcome back. I'm here to listen and reflect with you. What's on your mind today? There's no right way to start — just begin wherever feels natural.
|
||||
</div>
|
||||
|
||||
<!-- User message 1 -->
|
||||
<div class="chat-bubble user" style="animation: fadeIn 0.4s ease-out 0.1s both; opacity:0;">
|
||||
I gave this big presentation today to the whole department — the quarterly results. I completely bombed it. I lost my place twice, my voice was shaking, and I could see people checking their phones. I just fell apart in front of everyone.
|
||||
</div>
|
||||
|
||||
<!-- AI response 1 -->
|
||||
<div class="chat-bubble ai" style="animation: fadeIn 0.4s ease-out 0.2s both; opacity:0;">
|
||||
That sounds like a really unsettling experience — the kind where you're in the middle of it and every small thing feels amplified. When you say you "completely bombed it," what actually happened from start to finish?
|
||||
</div>
|
||||
|
||||
<!-- User message 2 -->
|
||||
<div class="chat-bubble user" style="animation: fadeIn 0.4s ease-out 0.3s both; opacity:0;">
|
||||
I mean I got through it, technically. But I stumbled on the revenue slide, and my manager was in the front row. She had this expression — I could tell she was embarrassed for me. She probably thinks I'm incompetent now. I always freeze under pressure. I'm just not someone who can handle this kind of visibility.
|
||||
</div>
|
||||
|
||||
<!-- AI response 2 -->
|
||||
<div class="chat-bubble ai" style="animation: fadeIn 0.4s ease-out 0.4s both; opacity:0;">
|
||||
I want to stay with something you said — that you got through it. Then you moved to your manager's expression, then to what she must be thinking, then to a conclusion about who you are as a person. That's a lot of ground covered in a few seconds. What do you actually know about her reaction, versus what you're filling in?
|
||||
</div>
|
||||
|
||||
<!-- User message 3 -->
|
||||
<div class="chat-bubble user" style="animation: fadeIn 0.4s ease-out 0.5s both; opacity:0;">
|
||||
Honestly, I don't know what she was actually thinking. She asked a question at the end about the margin numbers — that could mean anything. I just immediately jumped to the worst interpretation. I always do that.
|
||||
</div>
|
||||
|
||||
<!-- AI response 3 -->
|
||||
<div class="chat-bubble ai" style="animation: fadeIn 0.4s ease-out 0.6s both; opacity:0;">
|
||||
Notice that shift you just made — from "she probably thinks I'm incompetent" to "I don't actually know what she was thinking." That move, right there, is what we're working on. The first version is a story. The second version is honest. Which one do you want to act from?
|
||||
</div>
|
||||
|
||||
<!-- AI thinking indicator -->
|
||||
<div class="ai-thinking" style="animation: fadeIn 0.4s ease-out 0.7s both; opacity:0;">
|
||||
<div class="thinking-dot"></div>
|
||||
<div class="thinking-dot"></div>
|
||||
<div class="thinking-dot"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Input accessory bar -->
|
||||
<div class="input-accessory">
|
||||
<input class="chat-input" type="text" placeholder="Write freely...">
|
||||
<a class="send-btn" href="17-mirror-fragment-highlight.html">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M15 9L3 4L5.5 9L3 14L15 9Z" fill="var(--void)" stroke="none"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let seconds = 0;
|
||||
const timerEl = document.getElementById('timer');
|
||||
setInterval(() => {
|
||||
seconds++;
|
||||
const m = Math.floor(seconds / 60);
|
||||
const s = seconds % 60;
|
||||
timerEl.textContent = m + ':' + String(s).padStart(2, '0');
|
||||
}, 1000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
262
initial mockups/screens/mirror/17-mirror-fragment-highlight.html
Normal file
262
initial mockups/screens/mirror/17-mirror-fragment-highlight.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 — Fragment Detected</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.chat-area {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--space-4) var(--space-4) var(--space-2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.chat-area::-webkit-scrollbar { display: none; }
|
||||
.chat-session-frame {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(var(--device-height) - var(--status-bar-height) - var(--nav-header-height) - 64px);
|
||||
}
|
||||
.input-accessory {
|
||||
height: 64px;
|
||||
background: var(--kalei-navy);
|
||||
border-top: 1px solid var(--twilight);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 0 var(--space-3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.chat-input {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 0 var(--space-4);
|
||||
font-family: var(--font-primary);
|
||||
font-size: 15px;
|
||||
color: var(--pure-light);
|
||||
outline: none;
|
||||
}
|
||||
.chat-input::placeholder { color: var(--faint-light); }
|
||||
.send-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: var(--amber);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
flex-shrink: 0;
|
||||
box-shadow: var(--glow-amber);
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
.send-btn:hover { background: var(--amber-light); box-shadow: 0 0 24px rgba(245,158,11,0.5); }
|
||||
.nav-close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--deep-glass);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.nav-close:hover { background: var(--twilight); }
|
||||
.session-timer {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
/* Fragment highlight styles */
|
||||
.fragment-highlight {
|
||||
position: relative;
|
||||
display: inline;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: opacity 0.2s ease-out;
|
||||
}
|
||||
.fragment-highlight:hover { opacity: 0.8; }
|
||||
.fragment-highlight::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--amber);
|
||||
border-radius: 2px;
|
||||
opacity: 0.7;
|
||||
box-shadow: 0 0 10px rgba(245,158,11,0.5);
|
||||
animation: fragmentGlow 2s ease-in-out infinite;
|
||||
}
|
||||
.fragment-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-left: 4px;
|
||||
animation: fragmentPulse 2s ease-in-out infinite;
|
||||
}
|
||||
/* Fragment detected notice */
|
||||
.fragment-notice {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-left: 0;
|
||||
margin-top: 6px;
|
||||
margin-bottom: var(--space-3);
|
||||
padding: 6px 12px;
|
||||
background: rgba(245,158,11,0.08);
|
||||
border: 1px solid rgba(245,158,11,0.2);
|
||||
border-radius: var(--radius-full);
|
||||
width: fit-content;
|
||||
animation: fadeIn 0.4s ease-out;
|
||||
}
|
||||
.fragment-notice-text {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--amber-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
/* Amber glow behind highlighted bubble */
|
||||
.chat-bubble.user.highlighted {
|
||||
box-shadow: 0 0 20px rgba(245,158,11,0.15);
|
||||
border-color: rgba(245,158,11,0.25);
|
||||
}
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="16-mirror-session.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div style="display:flex; flex-direction:column; align-items:center; position:absolute; left:50%; transform:translateX(-50%);">
|
||||
<span class="nav-title" style="position:static; transform:none;">Mirror Session</span>
|
||||
<span class="session-timer">4:23</span>
|
||||
</div>
|
||||
<a class="nav-close" href="19-mirror-reflection.html">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<path d="M2 2L12 12M12 2L2 12" stroke="var(--dim-light)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="chat-session-frame">
|
||||
<div class="chat-area">
|
||||
|
||||
<!-- Prior context -->
|
||||
<div class="chat-bubble ai">
|
||||
Welcome back. I'm here to listen and reflect with you. What's on your mind today?
|
||||
</div>
|
||||
|
||||
<div class="chat-bubble user">
|
||||
I gave this big presentation today to the whole department. I completely bombed it — lost my place, my voice was shaking. I just fell apart in front of everyone.
|
||||
</div>
|
||||
|
||||
<div class="chat-bubble ai">
|
||||
That sounds really unsettling. When you say you "completely bombed it," what actually happened from start to finish?
|
||||
</div>
|
||||
|
||||
<!-- Highlighted message with fragment -->
|
||||
<div class="chat-bubble user highlighted">
|
||||
I mean I got through it technically, but I stumbled on the revenue slide.
|
||||
<a class="fragment-highlight" href="18-mirror-fragment-detail.html">She probably thinks I'm incompetent now</a><span class="fragment-icon">
|
||||
<!-- Fragment XS amber — from fragment-icons.svg XS (12px) with specular highlights -->
|
||||
<svg width="12" height="12" viewBox="-6 -6 12 12" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="s17-fragAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<filter id="s17-fragGlow" 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 filter="url(#s17-fragGlow)">
|
||||
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#s17-fragAmber)" opacity="0.9"/>
|
||||
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<path d="M 0,-6 L -6,0 L 0,0 Z" fill="#fff" opacity="0.08"/>
|
||||
<line x1="0" y1="-6" x2="0" y2="6" stroke="#fff" stroke-width="0.3" opacity="0.2"/>
|
||||
</g>
|
||||
</svg>
|
||||
</span>. I always do this when I feel criticized — I just freeze.
|
||||
</div>
|
||||
|
||||
<!-- Fragment detected notice -->
|
||||
<div class="fragment-notice">
|
||||
<!-- Fragment XS amber — extracted from fragment-icons.svg XS size (12px), amber color state -->
|
||||
<svg width="12" height="12" viewBox="-6 -6 12 12" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="s17-grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<filter id="s17-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>
|
||||
<g filter="url(#s17-glowSm)">
|
||||
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#s17-grAmber)" opacity="0.9"/>
|
||||
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<path d="M 0,-6 L -6,0 L 0,0 Z" fill="#fff" opacity="0.08"/>
|
||||
<line x1="0" y1="-6" x2="0" y2="6" stroke="#fff" stroke-width="0.3" opacity="0.2"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="fragment-notice-text">Fragment detected — tap to explore</span>
|
||||
</div>
|
||||
|
||||
<!-- AI response -->
|
||||
<div class="chat-bubble ai">
|
||||
I noticed something in what you just wrote. You moved from describing the presentation to predicting your manager's private judgment about your competence. What do you actually know about her reaction, versus what you're filling in?
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Input accessory bar -->
|
||||
<div class="input-accessory">
|
||||
<input class="chat-input" type="text" placeholder="Write freely...">
|
||||
<button class="send-btn">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M15 9L3 4L5.5 9L3 14L15 9Z" fill="var(--void)" stroke="none"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
235
initial mockups/screens/mirror/18-mirror-fragment-detail.html
Normal file
235
initial mockups/screens/mirror/18-mirror-fragment-detail.html
Normal file
@@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Fragment Detail</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.dimmed-chat {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(5,5,8,0.75);
|
||||
backdrop-filter: blur(6px);
|
||||
z-index: 0;
|
||||
}
|
||||
.chat-preview {
|
||||
padding: calc(var(--status-bar-height) + var(--nav-header-height) + 16px) var(--space-4) var(--space-4);
|
||||
opacity: 0.4;
|
||||
}
|
||||
.modal-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
z-index: 50;
|
||||
}
|
||||
.modal-sheet {
|
||||
width: 100%;
|
||||
background: var(--kalei-navy);
|
||||
border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
|
||||
padding: var(--space-3) var(--space-4) var(--space-8);
|
||||
border-top: 1px solid rgba(245,158,11,0.2);
|
||||
box-shadow: 0 -8px 40px rgba(245,158,11,0.1);
|
||||
animation: slideUp 0.35s cubic-bezier(0.32, 0.72, 0, 1);
|
||||
}
|
||||
.modal-handle {
|
||||
width: 36px;
|
||||
height: 4px;
|
||||
background: var(--twilight);
|
||||
border-radius: var(--radius-full);
|
||||
margin: 0 auto var(--space-5);
|
||||
}
|
||||
.distortion-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.distortion-icon-wrap {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgba(245,158,11,0.12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 0 16px rgba(245,158,11,0.15);
|
||||
}
|
||||
.distortion-name {
|
||||
font-family: var(--font-display);
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--amber-light);
|
||||
}
|
||||
.distortion-type {
|
||||
font-size: 11px;
|
||||
color: var(--dim-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.quote-card {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid rgba(245,158,11,0.2);
|
||||
border-left: 3px solid var(--amber);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.quote-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--amber-light);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.quote-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.5;
|
||||
font-style: italic;
|
||||
}
|
||||
.explanation {
|
||||
font-size: 14px;
|
||||
color: var(--dim-light);
|
||||
line-height: 1.6;
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.btn-turn-thought {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
height: 52px;
|
||||
background: var(--amethyst);
|
||||
color: var(--pure-light);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-lg);
|
||||
text-decoration: none;
|
||||
box-shadow: var(--glow-amethyst);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.btn-turn-thought:hover { background: var(--amethyst-light); }
|
||||
.btn-dismiss {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 44px;
|
||||
background: transparent;
|
||||
color: var(--dim-light);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-md);
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--twilight);
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.btn-dismiss:hover { background: var(--deep-glass); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<div class="status-bar" style="position:absolute; top:0; left:0; right:0; z-index:2; opacity:0.4;">
|
||||
<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="dimmed-chat">
|
||||
<div class="chat-preview">
|
||||
<div class="chat-bubble ai" style="font-size:14px;">Welcome back. What's on your mind today?</div>
|
||||
<div class="chat-bubble user" style="font-size:14px;">I got through it technically, but I stumbled on the revenue slide. <span style="text-decoration:underline; text-decoration-color: rgba(245,158,11,0.7);">She probably thinks I'm incompetent now.</span> I always freeze under pressure.</div>
|
||||
<div class="chat-bubble ai" style="font-size:14px;">You moved from describing the presentation to predicting your manager's private judgment. What do you actually know about her reaction?</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay">
|
||||
<div class="modal-sheet">
|
||||
<div class="modal-handle"></div>
|
||||
|
||||
<div class="distortion-header">
|
||||
<div class="distortion-icon-wrap">
|
||||
<!-- Mind Reading — exact paths extracted from icons-distortions.svg (lines 57–71) -->
|
||||
<!-- Hexagonal head outline + inner diamond + radiating thought waves -->
|
||||
<svg width="28" height="28" viewBox="-14 -14 28 28" fill="none">
|
||||
<defs>
|
||||
<filter id="s18-gAmber" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="1.8" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<linearGradient id="s18-amberGr" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g filter="url(#s18-gAmber)">
|
||||
<path d="M 0,-10 L 8,-5 L 8,5 L 0,10 L -8,5 L -8,-5 Z" fill="none" stroke="#F59E0B" stroke-width="1" opacity="0.7"/>
|
||||
<path d="M 0,-4 L 4,0 L 0,4 L -4,0 Z" fill="url(#s18-amberGr)" opacity="0.8"/>
|
||||
<path d="M 0,-4 L 4,0 L -4,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<line x1="5" y1="-3" x2="9" y2="-6" stroke="#FCD34D" stroke-width="0.4" opacity="0.35"/>
|
||||
<line x1="5" y1="3" x2="9" y2="6" stroke="#FCD34D" stroke-width="0.4" opacity="0.35"/>
|
||||
<line x1="-5" y1="-3" x2="-9" y2="-6" stroke="#FCD34D" stroke-width="0.4" opacity="0.35"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="distortion-name">Mind Reading</div>
|
||||
<div class="distortion-type">Cognitive distortion</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quote-card">
|
||||
<div class="quote-label">Detected phrase</div>
|
||||
<div class="quote-text">"She probably thinks I'm incompetent now"</div>
|
||||
</div>
|
||||
|
||||
<p class="explanation">
|
||||
Mind Reading happens when we assume we know what others are thinking — usually something critical or negative about us — without any direct evidence. You saw an expression and immediately filled in a whole verdict about your worth. In reality, your manager may have been processing the numbers, thinking about a question to ask, or dealing with something entirely unrelated to you.
|
||||
</p>
|
||||
<p class="explanation" style="margin-top: -12px;">
|
||||
This pattern is especially common after high-stakes moments. The mind wants certainty, so it invents a story. The cost is that you start responding to a story — not reality.
|
||||
</p>
|
||||
|
||||
<div class="modal-actions">
|
||||
<a href="../turn/11-turn-input-active.html" class="btn-turn-thought">
|
||||
<!-- Fragment SM amethyst — from fragment-icons.svg SM size section -->
|
||||
<svg width="16" height="16" viewBox="-8 -8 16 16" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="s18-grAm" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<filter id="s18-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>
|
||||
<g filter="url(#s18-glowSm)">
|
||||
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#s18-grAm)" opacity="0.9"/>
|
||||
<path d="M 0,-8 L 8,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<path d="M 0,-8 L -8,0 L 0,0 Z" fill="#fff" opacity="0.08"/>
|
||||
<line x1="0" y1="-8" x2="0" y2="8" stroke="#fff" stroke-width="0.4" opacity="0.2"/>
|
||||
</g>
|
||||
</svg>
|
||||
Turn this thought
|
||||
</a>
|
||||
<a href="17-mirror-fragment-highlight.html" class="btn-dismiss">Dismiss</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
382
initial mockups/screens/mirror/19-mirror-reflection.html
Normal file
382
initial mockups/screens/mirror/19-mirror-reflection.html
Normal file
@@ -0,0 +1,382 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Session Reflection</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.summary-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.summary-stats {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.summary-stat {
|
||||
flex: 1;
|
||||
background: var(--deep-glass);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3);
|
||||
text-align: center;
|
||||
}
|
||||
.summary-stat-value {
|
||||
font-family: var(--font-display);
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.summary-stat-label {
|
||||
font-size: 10px;
|
||||
color: var(--dim-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.fragments-found {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.fragments-found-label {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
margin-right: var(--space-1);
|
||||
}
|
||||
.frag-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
height: 24px;
|
||||
padding: 0 9px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
background: rgba(245,158,11,0.12);
|
||||
color: var(--amber-light);
|
||||
border: 1px solid rgba(245,158,11,0.2);
|
||||
}
|
||||
/* Mood check */
|
||||
.mood-section {
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.mood-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--soft-light);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.mood-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.mood-option {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: var(--space-2) 0;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.mood-option.selected {
|
||||
background: rgba(245,158,11,0.08);
|
||||
border-color: rgba(245,158,11,0.3);
|
||||
}
|
||||
.mood-option-label {
|
||||
font-size: 10px;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
/* Themes */
|
||||
.themes-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
.theme-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 28px;
|
||||
padding: 0 12px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
background: var(--deep-glass);
|
||||
color: var(--soft-light);
|
||||
border: 1px solid var(--twilight);
|
||||
}
|
||||
.btn-save-session {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 52px;
|
||||
background: var(--amber);
|
||||
color: var(--void);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-lg);
|
||||
text-decoration: none;
|
||||
box-shadow: var(--glow-amber);
|
||||
margin-bottom: var(--space-3);
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
.btn-save-session:hover { background: var(--amber-light); box-shadow: 0 0 28px rgba(245,158,11,0.4); }
|
||||
.amber-aura {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(245,158,11,0.1) 0%, transparent 70%);
|
||||
filter: blur(40px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
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="nav-header">
|
||||
<a class="nav-back" href="15-mirror-home.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div style="display:flex; flex-direction:column; align-items:center; position:absolute; left:50%; transform:translateX(-50%);">
|
||||
<span class="nav-title" style="position:static; transform:none;">Session Reflection</span>
|
||||
<span style="font-size:11px; color:var(--dim-light);">Feb 21 — Evening</span>
|
||||
</div>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-bottom: 24px; position: relative;">
|
||||
<div class="amber-aura"></div>
|
||||
|
||||
<div class="mt-3" style="position:relative;z-index:1;">
|
||||
|
||||
<!-- Summary stats -->
|
||||
<div class="summary-card">
|
||||
<div class="summary-stats">
|
||||
<div class="summary-stat">
|
||||
<div class="summary-stat-value">12</div>
|
||||
<div class="summary-stat-label">Minutes</div>
|
||||
</div>
|
||||
<div class="summary-stat">
|
||||
<div class="summary-stat-value">847</div>
|
||||
<div class="summary-stat-label">Words</div>
|
||||
</div>
|
||||
<div class="summary-stat">
|
||||
<div class="summary-stat-value" style="color: var(--amber-light);">3</div>
|
||||
<div class="summary-stat-label">Fragments</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="label text-dim mb-2">Fragments Detected</div>
|
||||
<div class="fragments-found">
|
||||
<!-- Mind Reading — hexagonal head with inner diamond (icons-distortions.svg) -->
|
||||
<span class="frag-chip">
|
||||
<svg width="10" height="10" viewBox="-12 -12 24 24" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="s19-amGr1" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M 0,-10 L 8,-5 L 8,5 L 0,10 L -8,5 L -8,-5 Z" fill="none" stroke="#F59E0B" stroke-width="1" opacity="0.7"/>
|
||||
<path d="M 0,-4 L 4,0 L 0,4 L -4,0 Z" fill="url(#s19-amGr1)" opacity="0.8"/>
|
||||
<path d="M 0,-4 L 4,0 L -4,0 Z" fill="#fff" opacity="0.15"/>
|
||||
</svg>
|
||||
Mind Reading
|
||||
</span>
|
||||
<!-- Catastrophizing — cascading shard (icons-distortions.svg) -->
|
||||
<span class="frag-chip">
|
||||
<svg width="10" height="10" viewBox="-12 -12 24 24" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="s19-amGr2" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M 0,-10 L 5,0 L 0,10 L -5,0 Z" fill="url(#s19-amGr2)" opacity="0.9"/>
|
||||
<path d="M 0,-10 L 5,0 L -5,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<path d="M -8,6 L -5,10 L -9,12 L -11,8 Z" fill="#F59E0B" opacity="0.5"/>
|
||||
<path d="M 7,8 L 10,12 L 8,14 L 5,11 Z" fill="#F59E0B" opacity="0.4"/>
|
||||
</svg>
|
||||
Catastrophizing
|
||||
</span>
|
||||
<!-- Should Statements — rigid ruler/bracket (icons-distortions.svg) -->
|
||||
<span class="frag-chip">
|
||||
<svg width="10" height="10" viewBox="-12 -12 24 24" fill="none">
|
||||
<path d="M -6,-10 L -6,10 L 6,10" fill="none" stroke="#F59E0B" stroke-width="1.2" stroke-linejoin="miter"/>
|
||||
<line x1="-6" y1="-6" x2="-3" y2="-6" stroke="#FCD34D" stroke-width="0.6" opacity="0.5"/>
|
||||
<line x1="-6" y1="-2" x2="-3" y2="-2" stroke="#FCD34D" stroke-width="0.6" opacity="0.5"/>
|
||||
<line x1="-6" y1="2" x2="-3" y2="2" stroke="#FCD34D" stroke-width="0.6" opacity="0.5"/>
|
||||
<line x1="-6" y1="6" x2="-3" y2="6" stroke="#FCD34D" stroke-width="0.6" opacity="0.5"/>
|
||||
<path d="M 2,-4 L 3,-1 L 1,-1 Z" fill="#FCD34D" opacity="0.6"/>
|
||||
<circle cx="2" cy="1" r="0.8" fill="#FCD34D" opacity="0.6"/>
|
||||
</svg>
|
||||
Should Statements
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mood check -->
|
||||
<div class="mood-section">
|
||||
<div class="subheading text-pure mb-3">How are you feeling now?</div>
|
||||
<div class="mood-options">
|
||||
|
||||
<!-- Mood 1: Settled (small nested diamond) -->
|
||||
<div class="mood-option" onclick="selectMood(this)">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32">
|
||||
<path d="M16 4L26 16L16 28L6 16Z" fill="var(--twilight)" stroke="var(--faint-light)" stroke-width="1" fill-opacity="0.5"/>
|
||||
<path d="M16 10L22 16L16 22L10 16Z" fill="var(--emerald)" opacity="0.5"/>
|
||||
</svg>
|
||||
<span class="mood-option-label">Settled</span>
|
||||
</div>
|
||||
|
||||
<!-- Mood 2: Lighter (rising diamond) -->
|
||||
<div class="mood-option" onclick="selectMood(this)">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32">
|
||||
<path d="M16 8L24 16L16 24L8 16Z" fill="var(--sapphire)" opacity="0.3" stroke="var(--sapphire-light)" stroke-width="1"/>
|
||||
<path d="M16 4L20 8" stroke="var(--sapphire-light)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M12 4L16 8" stroke="var(--sapphire-light)" stroke-width="1" stroke-linecap="round" opacity="0.5"/>
|
||||
<path d="M20 4L24 8" stroke="var(--sapphire-light)" stroke-width="1" stroke-linecap="round" opacity="0.5"/>
|
||||
</svg>
|
||||
<span class="mood-option-label">Lighter</span>
|
||||
</div>
|
||||
|
||||
<!-- Mood 3: Neutral (balanced diamond) -->
|
||||
<div class="mood-option selected" onclick="selectMood(this)">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32">
|
||||
<path d="M16 6L26 16L16 26L6 16Z" fill="var(--amber)" opacity="0.2" stroke="var(--amber-light)" stroke-width="1.2"/>
|
||||
<line x1="10" y1="16" x2="22" y2="16" stroke="var(--amber-light)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="mood-option-label" style="color:var(--amber-light);">Neutral</span>
|
||||
</div>
|
||||
|
||||
<!-- Mood 4: Heavy (dense diamond) -->
|
||||
<div class="mood-option" onclick="selectMood(this)">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32">
|
||||
<path d="M16 6L26 16L16 26L6 16Z" fill="var(--amethyst)" opacity="0.25" stroke="var(--amethyst-light)" stroke-width="1"/>
|
||||
<path d="M16 10L22 16L16 22L10 16Z" fill="var(--amethyst)" opacity="0.3"/>
|
||||
<path d="M16 13L19 16L16 19L13 16Z" fill="var(--amethyst)" opacity="0.6"/>
|
||||
</svg>
|
||||
<span class="mood-option-label">Heavy</span>
|
||||
</div>
|
||||
|
||||
<!-- Mood 5: Turbulent (spiky diamond) -->
|
||||
<div class="mood-option" onclick="selectMood(this)">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32">
|
||||
<path d="M16 4L20 12L28 12L22 18L24 26L16 22L8 26L10 18L4 12L12 12Z" fill="var(--ruby)" opacity="0.2" stroke="var(--ruby)" stroke-width="0.8"/>
|
||||
</svg>
|
||||
<span class="mood-option-label">Turbulent</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Key themes -->
|
||||
<div class="mb-4">
|
||||
<div class="section-header">
|
||||
<span class="section-title">Key Themes</span>
|
||||
</div>
|
||||
<div class="themes-row">
|
||||
<span class="theme-chip">Public speaking anxiety</span>
|
||||
<span class="theme-chip">Manager judgment</span>
|
||||
<span class="theme-chip">Self-criticism</span>
|
||||
<span class="theme-chip">Freeze response</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- The Guide noticed section -->
|
||||
<div style="position: relative; border-radius: var(--radius-lg); margin-bottom: var(--space-4);">
|
||||
<!-- Prismatic gradient border -->
|
||||
<div style="position: absolute; inset: -1px; border-radius: var(--radius-lg); background: linear-gradient(135deg, #8B5CF6, #3B82F6, #10B981, #F59E0B, #EC4899, #8B5CF6); z-index: 0; background-size: 300% 300%; animation: prismaticShift 6s ease-in-out infinite;"></div>
|
||||
<div style="position: relative; z-index: 1; background: var(--kalei-navy); border-radius: calc(var(--radius-lg) - 1px); padding: var(--space-4);">
|
||||
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3);">
|
||||
<!-- 6-blade kaleidoscope icon -->
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="s19-guideGrad" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#8B5CF6"/>
|
||||
<stop offset="50%" stop-color="#3B82F6"/>
|
||||
<stop offset="100%" stop-color="#10B981"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<polygon points="8,1 15,8 8,15 1,8" fill="none" stroke="url(#s19-guideGrad)" stroke-width="1.5" stroke-linejoin="round"/>
|
||||
<circle cx="8" cy="8" r="2" fill="url(#s19-guideGrad)" opacity="0.7"/>
|
||||
</svg>
|
||||
<span style="font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--soft-light); text-transform: uppercase; letter-spacing: 0.06em;">The Guide noticed...</span>
|
||||
</div>
|
||||
<p style="font-size: 13px; color: var(--dim-light); line-height: 1.6; margin-bottom: var(--space-2);">Today's session connects to your Lens goal <span style="color: var(--emerald-light); font-weight: 500;">"Present with confidence"</span>. The Mind Reading pattern you named — assuming your manager's verdict — is the exact thought that derails you before presentations begin.</p>
|
||||
<p style="font-size: 13px; color: var(--dim-light); line-height: 1.6; margin-bottom: var(--space-3);">Your if-then plan for this goal is ready to rehearse. <span style="color: var(--emerald-light); font-weight: 500;">14-day streak</span> — you're building something real.</p>
|
||||
<a href="../lens/20-lens-dashboard.html" style="font-size: 13px; font-weight: 500; color: var(--emerald-light); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: opacity 0.2s ease-out;">Check your Lens goals
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M4 2l4 4-4 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<a href="#" class="btn-save-session" onclick="this.textContent='Saved'; return false;">
|
||||
Save session
|
||||
</a>
|
||||
<a href="../turn/10-turn-home.html" class="btn btn-secondary" style="text-decoration:none;">
|
||||
Start a Turn
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function selectMood(el) {
|
||||
document.querySelectorAll('.mood-option').forEach(o => {
|
||||
o.classList.remove('selected');
|
||||
o.querySelector('.mood-option-label').style.color = '';
|
||||
});
|
||||
el.classList.add('selected');
|
||||
el.querySelector('.mood-option-label').style.color = 'var(--amber-light)';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
334
initial mockups/screens/modals/58-upgrade-modal.html
Normal file
334
initial mockups/screens/modals/58-upgrade-modal.html
Normal file
@@ -0,0 +1,334 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Upgrade to Prism</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.bg-screen {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--void);
|
||||
}
|
||||
/* Blurred background context (Turn Home) */
|
||||
.bg-content {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 54px 16px 16px;
|
||||
filter: blur(3px);
|
||||
opacity: 0.4;
|
||||
}
|
||||
.bg-greeting {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
margin-top: 16px;
|
||||
}
|
||||
.bg-card {
|
||||
height: 80px;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
margin-top: 20px;
|
||||
}
|
||||
.modal-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(5,5,8,0.75);
|
||||
backdrop-filter: blur(10px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 50;
|
||||
}
|
||||
.modal-card {
|
||||
width: 340px;
|
||||
background: var(--kalei-navy);
|
||||
border-radius: var(--radius-2xl);
|
||||
padding: var(--space-6);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
animation: modalSlideIn 0.35s ease-out forwards;
|
||||
}
|
||||
@keyframes modalSlideIn {
|
||||
from { opacity: 0; transform: translateY(12px) scale(0.97); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
/* Prismatic border */
|
||||
.modal-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: var(--radius-2xl);
|
||||
padding: 1.5px;
|
||||
background: linear-gradient(135deg, #8B5CF6, #3B82F6, #10B981, #F59E0B, #EC4899);
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
}
|
||||
.modal-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.modal-logo {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.modal-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
font-family: var(--font-display);
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, #C4B5FD, #93C5FD, #6EE7B7);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.modal-subtitle {
|
||||
font-size: 14px;
|
||||
color: var(--dim-light);
|
||||
text-align: center;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.benefits-list {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.benefit-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.benefit-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
}
|
||||
.benefit-text {
|
||||
flex: 1;
|
||||
}
|
||||
.benefit-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.benefit-desc {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
margin-top: 1px;
|
||||
}
|
||||
.price-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 18px;
|
||||
padding: 12px;
|
||||
background: rgba(139,92,246,0.06);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid rgba(139,92,246,0.15);
|
||||
}
|
||||
.price-val {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
font-family: var(--font-display);
|
||||
background: linear-gradient(135deg, #C4B5FD, #93C5FD, #6EE7B7, #FDE68A, #F9A8D4);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.price-period {
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.btn-prismatic {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
border: none;
|
||||
border-radius: var(--radius-lg);
|
||||
background: linear-gradient(135deg, #8B5CF6, #3B82F6, #10B981);
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-primary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 0 0 24px rgba(139,92,246,0.3);
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.btn-prismatic:hover { opacity: 0.9; }
|
||||
.maybe-later {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--dim-light);
|
||||
font-size: 14px;
|
||||
font-family: var(--font-primary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.maybe-later:hover { color: var(--soft-light); }
|
||||
.trial-note {
|
||||
font-size: 11px;
|
||||
color: var(--faint-light);
|
||||
text-align: center;
|
||||
margin-top: 6px;
|
||||
}
|
||||
</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>
|
||||
|
||||
<!-- Blurred background -->
|
||||
<div class="bg-content" aria-hidden="true">
|
||||
<div class="bg-greeting">Good morning, Alex</div>
|
||||
<div class="bg-card" style="margin-top:16px;"></div>
|
||||
<div class="bg-card" style="margin-top:10px; height:60px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- Modal overlay -->
|
||||
<div class="modal-overlay">
|
||||
<div class="modal-card">
|
||||
<!-- Kaleidoscope logo -->
|
||||
<div class="modal-header">
|
||||
<div class="modal-logo">
|
||||
<svg width="56" height="56" viewBox="0 0 56 56" style="mix-blend-mode: normal;">
|
||||
<defs>
|
||||
<linearGradient id="upBlade1" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD" stop-opacity="0.9"/>
|
||||
<stop offset="100%" stop-color="#7C3AED" stop-opacity="0.4"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="upBlade2" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD" stop-opacity="0.8"/>
|
||||
<stop offset="100%" stop-color="#2563EB" stop-opacity="0.3"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="upBlade3" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7" stop-opacity="0.8"/>
|
||||
<stop offset="100%" stop-color="#059669" stop-opacity="0.3"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="translate(28,28)" style="animation: breathing 6s ease-in-out infinite;">
|
||||
<g><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#upBlade1)"/></g>
|
||||
<g transform="rotate(60)"><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#upBlade2)"/></g>
|
||||
<g transform="rotate(120)"><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#upBlade3)"/></g>
|
||||
<g transform="rotate(180)"><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#upBlade1)"/></g>
|
||||
<g transform="rotate(240)"><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#upBlade2)"/></g>
|
||||
<g transform="rotate(300)"><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#upBlade3)"/></g>
|
||||
<circle r="5" fill="white" opacity="0.15"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="modal-title">Unlock Kalei Plus</div>
|
||||
<div class="modal-subtitle">More turns. More insight. Same intention.</div>
|
||||
</div>
|
||||
|
||||
<!-- Benefits — grounded, not pushy -->
|
||||
<div class="benefits-list">
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon" style="background: rgba(139,92,246,0.15);">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14">
|
||||
<path d="M7 1L13 7L7 13L1 7Z" fill="#C4B5FD" opacity="0.9"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="benefit-text">
|
||||
<div class="benefit-title">10 Turns per day</div>
|
||||
<div class="benefit-desc">From 3 free → 10 per day. Enough for real-time reframing</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon" style="background: rgba(59,130,246,0.12);">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14">
|
||||
<path d="M7 1L13 7L7 13L1 7Z" fill="#93C5FD" opacity="0.9"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="benefit-text">
|
||||
<div class="benefit-title">Full Spectrum Access</div>
|
||||
<div class="benefit-desc">The River, Your Glass, Rhythm, Growth — all views unlocked</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon" style="background: rgba(16,185,129,0.12);">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14">
|
||||
<path d="M7 1L13 7L7 13L1 7Z" fill="#6EE7B7" opacity="0.9"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="benefit-text">
|
||||
<div class="benefit-title">Weekly & Monthly Reports</div>
|
||||
<div class="benefit-desc">AI-written summaries with specific pattern trends and dates</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tier price row -->
|
||||
<div class="price-row">
|
||||
<div class="price-val">$9.99</div>
|
||||
<div class="price-period">/ month</div>
|
||||
</div>
|
||||
|
||||
<!-- Tier note -->
|
||||
<div style="display:flex; justify-content:center; gap:18px; margin-bottom:14px;">
|
||||
<div style="text-align:center;">
|
||||
<div style="font-size:10px; color:var(--faint-light); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:3px;">Free</div>
|
||||
<div style="font-size:12px; color:var(--dim-light);">3 turns/day</div>
|
||||
</div>
|
||||
<div style="text-align:center; position:relative;">
|
||||
<div style="font-size:10px; color:var(--amethyst-light); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:3px; font-weight:600;">Plus</div>
|
||||
<div style="font-size:12px; color:var(--soft-light); font-weight:600;">10 turns/day</div>
|
||||
</div>
|
||||
<div style="text-align:center;">
|
||||
<div style="font-size:10px; color:var(--faint-light); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:3px;">Pro</div>
|
||||
<div style="font-size:12px; color:var(--dim-light);">Unlimited</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<a class="btn-prismatic" href="../you/38-you-subscription.html">Try Plus free for 7 days</a>
|
||||
<div class="trial-note">7 days free, then $9.99/month. Cancel anytime. Pro available at $19.99/month.</div>
|
||||
<a class="maybe-later" href="../turn/10-turn-home.html">Maybe later</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
312
initial mockups/screens/modals/59-rate-limit.html
Normal file
312
initial mockups/screens/modals/59-rate-limit.html
Normal file
@@ -0,0 +1,312 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Rate Limit</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.bg-content {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
filter: blur(2px);
|
||||
opacity: 0.35;
|
||||
}
|
||||
.bg-status {
|
||||
height: 54px;
|
||||
padding: 14px 28px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.bg-time { font-size: 15px; font-weight: 600; color: var(--pure-light); }
|
||||
.bg-header {
|
||||
padding: 16px;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.bg-input {
|
||||
margin: 0 16px;
|
||||
height: 120px;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
.bg-cards {
|
||||
margin: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.bg-mini-card {
|
||||
height: 60px;
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.limit-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(5,5,8,0.65);
|
||||
backdrop-filter: blur(8px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
z-index: 50;
|
||||
}
|
||||
.limit-card {
|
||||
width: 100%;
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid rgba(139,92,246,0.2);
|
||||
border-radius: var(--radius-2xl);
|
||||
padding: 24px;
|
||||
box-shadow: 0 0 40px rgba(0,0,0,0.5), 0 0 60px rgba(139,92,246,0.08);
|
||||
animation: modalSlideIn 0.3s ease-out forwards;
|
||||
}
|
||||
@keyframes modalSlideIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.limit-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
background: rgba(139,92,246,0.12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 14px;
|
||||
}
|
||||
.limit-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--pure-light);
|
||||
text-align: center;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.limit-subtitle {
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
text-align: center;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.progress-section {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.progress-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.progress-label-text {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.progress-label-count {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.progress-bar-bg {
|
||||
height: 8px;
|
||||
background: var(--twilight);
|
||||
border-radius: var(--radius-full);
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: var(--radius-full);
|
||||
background: linear-gradient(90deg, var(--amethyst), var(--ruby));
|
||||
width: 100%;
|
||||
}
|
||||
.turn-dots {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.turn-dot {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: rgba(139,92,246,0.3);
|
||||
border: 2px solid var(--amethyst);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.turn-dot.used {
|
||||
background: var(--amethyst);
|
||||
opacity: 0.7;
|
||||
}
|
||||
.upgrade-prompt {
|
||||
background: rgba(139,92,246,0.06);
|
||||
border: 1px solid rgba(139,92,246,0.2);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
.upgrade-prompt-text {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
.upgrade-prompt-link {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--amethyst-light);
|
||||
}
|
||||
.timer-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.timer-val {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--soft-light);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.btn-prismatic {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
border: none;
|
||||
border-radius: var(--radius-lg);
|
||||
background: linear-gradient(135deg, #8B5CF6, #3B82F6);
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-primary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 0 0 20px rgba(139,92,246,0.25);
|
||||
}
|
||||
.dismiss-btn {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--dim-light);
|
||||
font-size: 14px;
|
||||
font-family: var(--font-primary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
<!-- Blurred Turn Home context -->
|
||||
<div class="bg-content" aria-hidden="true">
|
||||
<div class="bg-status">
|
||||
<span class="bg-time">9:41</span>
|
||||
</div>
|
||||
<div class="bg-header">Good morning, Alex</div>
|
||||
<div class="bg-input"></div>
|
||||
<div class="bg-cards">
|
||||
<div class="bg-mini-card"></div>
|
||||
<div class="bg-mini-card"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rate limit overlay -->
|
||||
<div class="limit-overlay">
|
||||
<div class="limit-card">
|
||||
<div class="limit-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 2L22 12L12 22L2 12Z" fill="#8B5CF6" opacity="0.6"/>
|
||||
<path d="M12 8V12M12 16H12.01" stroke="#C4B5FD" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="limit-title">That's your 3 for today</div>
|
||||
<div class="limit-subtitle">Good work showing up. Your next turns reset at midnight.</div>
|
||||
|
||||
<!-- Progress -->
|
||||
<div class="progress-section">
|
||||
<div class="progress-label">
|
||||
<span class="progress-label-text">Daily usage</span>
|
||||
<span class="progress-label-count">3 / 3</span>
|
||||
</div>
|
||||
<div class="progress-bar-bg">
|
||||
<div class="progress-bar-fill"></div>
|
||||
</div>
|
||||
<div class="turn-dots">
|
||||
<div class="turn-dot used">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12">
|
||||
<path d="M6 1L11 6L6 11L1 6Z" fill="#fff" opacity="0.8"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="turn-dot used">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12">
|
||||
<path d="M6 1L11 6L6 11L1 6Z" fill="#fff" opacity="0.8"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="turn-dot used">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12">
|
||||
<path d="M6 1L11 6L6 11L1 6Z" fill="#fff" opacity="0.8"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upgrade prompt — calm, not pushy -->
|
||||
<div class="upgrade-prompt">
|
||||
<span class="upgrade-prompt-text">Plus gives you </span>
|
||||
<span class="upgrade-prompt-text" style="font-weight:600; color: var(--pure-light);">10 turns per day</span>
|
||||
<span class="upgrade-prompt-text"> — enough for real-time reframing</span>
|
||||
</div>
|
||||
|
||||
<!-- Timer -->
|
||||
<div class="timer-row">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<circle cx="7" cy="8" r="5" stroke="#94A3B8" stroke-width="1.2"/>
|
||||
<path d="M7 5V8L9 9" stroke="#94A3B8" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<path d="M5 1H9" stroke="#94A3B8" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
Resets in <span class="timer-val" id="timer">18:23:47</span>
|
||||
</div>
|
||||
|
||||
<!-- Upgrade CTA -->
|
||||
<a class="btn-prismatic" href="58-upgrade-modal.html">
|
||||
See Plus — from $9.99/mo
|
||||
</a>
|
||||
<a class="dismiss-btn" href="../turn/10-turn-home.html">Got it, see you tomorrow</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Countdown timer simulation
|
||||
let seconds = 18 * 3600 + 23 * 60 + 47;
|
||||
const timerEl = document.getElementById('timer');
|
||||
|
||||
function updateTimer() {
|
||||
if (seconds <= 0) return;
|
||||
seconds--;
|
||||
const h = Math.floor(seconds / 3600);
|
||||
const m = Math.floor((seconds % 3600) / 60);
|
||||
const s = seconds % 60;
|
||||
timerEl.textContent = `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;
|
||||
}
|
||||
|
||||
setInterval(updateTimer, 1000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
274
initial mockups/screens/modals/60-crisis-response.html
Normal file
274
initial mockups/screens/modals/60-crisis-response.html
Normal file
@@ -0,0 +1,274 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Crisis Response</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.device-frame {
|
||||
background: var(--void);
|
||||
}
|
||||
.screen-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 20px 24px;
|
||||
}
|
||||
.hero-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 24px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.ruby-aura {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(239,68,68,0.12) 0%, transparent 70%);
|
||||
filter: blur(40px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.hero-icon {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 50%;
|
||||
background: rgba(239,68,68,0.12);
|
||||
border: 2px solid rgba(239,68,68,0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
}
|
||||
.hero-title {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
font-family: var(--font-display);
|
||||
color: var(--ruby);
|
||||
text-align: center;
|
||||
margin-bottom: 8px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.hero-subtitle {
|
||||
font-size: 15px;
|
||||
color: var(--dim-light);
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.resources-section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.resource-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid rgba(239,68,68,0.2);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.resource-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.resource-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: rgba(239,68,68,0.12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.resource-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.resource-detail {
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
margin-top: 2px;
|
||||
margin-left: 48px;
|
||||
}
|
||||
.divider { height: 1px; background: rgba(239,68,68,0.1); margin: 8px 0; }
|
||||
.btn-ruby {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
border: none;
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--ruby);
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-primary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 0 0 20px rgba(239,68,68,0.3);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.btn-ruby:hover { background: var(--ruby); filter: brightness(0.85); }
|
||||
.btn-okay {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
color: var(--soft-light);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
font-family: var(--font-primary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
margin-bottom: 10px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.btn-okay:hover { background: var(--twilight); }
|
||||
.breathing-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
text-decoration: none;
|
||||
padding: 8px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.breathing-link:hover { color: var(--soft-light); }
|
||||
.safe-note {
|
||||
font-size: 11px;
|
||||
color: var(--faint-light);
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</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="ruby-aura"></div>
|
||||
|
||||
<div class="screen-content">
|
||||
<!-- Hero -->
|
||||
<div class="hero-section">
|
||||
<div class="hero-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
|
||||
<path d="M16 4L28 16L16 28L4 16Z" fill="#EF4444" opacity="0.3"/>
|
||||
<path d="M16 8L24 16L16 24L8 16Z" fill="#EF4444" opacity="0.5"/>
|
||||
<!-- Heart shape -->
|
||||
<path d="M11 13.5C11 12.1 12.1 11 13.5 11C14.3 11 15 11.4 15.5 12C16 11.4 16.7 11 17.5 11C18.9 11 20 12.1 20 13.5C20 16 15.5 20 15.5 20C15.5 20 11 16 11 13.5Z" fill="#FCA5A5" opacity="0.9"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="hero-title">You're not alone in this</div>
|
||||
<div class="hero-subtitle">Whatever you're carrying right now — it's real, and it matters. You don't have to face it alone. Trained people are ready to listen, right now, any hour.</div>
|
||||
</div>
|
||||
|
||||
<!-- Crisis resources -->
|
||||
<div class="resources-section">
|
||||
<!-- 988 Lifeline -->
|
||||
<div class="resource-card">
|
||||
<div class="resource-header">
|
||||
<div class="resource-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<rect x="3" y="3" width="12" height="12" rx="2" stroke="#EF4444" stroke-width="1.2"/>
|
||||
<path d="M6 7C6 7 7.5 6 9 7C10.5 8 12 7 12 7" stroke="#EF4444" stroke-width="1" stroke-linecap="round"/>
|
||||
<path d="M6 10.5C7.5 12 10.5 12 12 10.5" stroke="#EF4444" stroke-width="1" stroke-linecap="round"/>
|
||||
<circle cx="7" cy="9" r="0.8" fill="#EF4444"/>
|
||||
<circle cx="11" cy="9" r="0.8" fill="#EF4444"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="resource-name">988 Suicide & Crisis Lifeline</div>
|
||||
</div>
|
||||
<div class="resource-detail">Call or text 988 — free, confidential, 24/7</div>
|
||||
</div>
|
||||
|
||||
<!-- Crisis Text Line -->
|
||||
<div class="resource-card">
|
||||
<div class="resource-header">
|
||||
<div class="resource-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<rect x="2" y="4" width="14" height="10" rx="2" stroke="#EF4444" stroke-width="1.2"/>
|
||||
<path d="M6 14L4 16" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<path d="M5 8H13M5 11H10" stroke="#EF4444" stroke-width="1" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="resource-name">Crisis Text Line</div>
|
||||
</div>
|
||||
<div class="resource-detail">Text HOME to 741741 — text-based support, 24/7</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Primary CTA: Call or text 988 -->
|
||||
<a class="btn-ruby" href="tel:988">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M6.5 3.5C6.5 3.5 5 3 3.5 5S3 9 5.5 11.5S10 15 12.5 14.5S15.5 13.5 15.5 12L13 10.5C13 10.5 12 10 11 11C10 12 9.5 11.5 7.5 9.5S7 7 8 6L6.5 3.5Z" fill="white" opacity="0.9"/>
|
||||
</svg>
|
||||
Call or text 988 — free, 24/7
|
||||
</a>
|
||||
|
||||
<!-- Secondary: I'm okay -->
|
||||
<a class="btn-okay" href="../turn/10-turn-home.html">
|
||||
I'm okay right now
|
||||
</a>
|
||||
|
||||
<!-- Breathing exercise link -->
|
||||
<a class="breathing-link" href="../ritual/47-ritual-quick.html">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<circle cx="7" cy="7" r="5" stroke="#94A3B8" stroke-width="1.2" stroke-dasharray="2 2"/>
|
||||
<circle cx="7" cy="7" r="2" fill="#94A3B8" opacity="0.5"/>
|
||||
</svg>
|
||||
Try a grounding exercise instead
|
||||
</a>
|
||||
|
||||
<div class="safe-note">
|
||||
If you or someone else is in immediate danger, call 911.<br>
|
||||
Kalei is a support tool, not a substitute for emergency care.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
339
initial mockups/screens/modals/61-pattern-share.html
Normal file
339
initial mockups/screens/modals/61-pattern-share.html
Normal file
@@ -0,0 +1,339 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Share Pattern</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
/* Blurred gallery background */
|
||||
.bg-content {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
filter: blur(3px);
|
||||
opacity: 0.35;
|
||||
}
|
||||
.bg-status {
|
||||
height: 54px;
|
||||
padding: 14px 28px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.bg-header {
|
||||
height: 56px;
|
||||
background: rgba(28,34,64,0.3);
|
||||
}
|
||||
.bg-pattern-card {
|
||||
margin: 16px;
|
||||
height: 260px;
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-2xl);
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(5,5,8,0.7);
|
||||
backdrop-filter: blur(8px);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
z-index: 50;
|
||||
}
|
||||
.share-sheet {
|
||||
width: 100%;
|
||||
background: var(--kalei-navy);
|
||||
border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
|
||||
padding: 0 0 32px;
|
||||
border-top: 1px solid var(--twilight);
|
||||
}
|
||||
.sheet-handle {
|
||||
width: 36px;
|
||||
height: 4px;
|
||||
background: var(--twilight);
|
||||
border-radius: var(--radius-full);
|
||||
margin: 14px auto 18px;
|
||||
}
|
||||
.sheet-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
text-align: center;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
/* Pattern card preview */
|
||||
.pattern-preview {
|
||||
margin: 0 16px 20px;
|
||||
background: var(--void);
|
||||
border-radius: var(--radius-xl);
|
||||
border: 1px solid var(--twilight);
|
||||
overflow: hidden;
|
||||
}
|
||||
.pattern-visual-area {
|
||||
height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--void);
|
||||
position: relative;
|
||||
}
|
||||
.pattern-aura {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(139,92,246,0.15) 0%, transparent 70%);
|
||||
filter: blur(30px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
}
|
||||
.pattern-content-area {
|
||||
padding: 12px 14px;
|
||||
border-top: 1px solid var(--twilight);
|
||||
}
|
||||
.pattern-thought {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.4;
|
||||
margin-bottom: 6px;
|
||||
font-style: italic;
|
||||
}
|
||||
.pattern-reframe {
|
||||
font-size: 12px;
|
||||
color: var(--amethyst-light);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.pattern-branding {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.branding-logo {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.branding-text {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: var(--faint-light);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* Share targets */
|
||||
.share-targets {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 0 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.share-target {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 8px;
|
||||
border-radius: var(--radius-lg);
|
||||
transition: background 0.15s;
|
||||
text-decoration: none;
|
||||
}
|
||||
.share-target:hover { background: rgba(28,34,64,0.5); }
|
||||
.share-target-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 14px;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.share-target-label {
|
||||
font-size: 11px;
|
||||
color: var(--dim-light);
|
||||
font-family: var(--font-primary);
|
||||
}
|
||||
.close-row {
|
||||
padding: 0 16px;
|
||||
}
|
||||
.close-btn {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
color: var(--soft-light);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
font-family: var(--font-primary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.close-btn:hover { background: var(--twilight); }
|
||||
.copied-toast {
|
||||
position: absolute;
|
||||
bottom: 320px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--emerald);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 8px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
box-shadow: 0 0 16px rgba(16,185,129,0.2);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
z-index: 60;
|
||||
}
|
||||
.copied-toast.visible { opacity: 1; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
<!-- Blurred gallery background -->
|
||||
<div class="bg-content" aria-hidden="true">
|
||||
<div class="bg-status">
|
||||
<span style="font-size:15px; font-weight:600; color:var(--pure-light);">9:41</span>
|
||||
</div>
|
||||
<div class="bg-header"></div>
|
||||
<div class="bg-pattern-card"></div>
|
||||
</div>
|
||||
|
||||
<!-- Copied toast -->
|
||||
<div class="copied-toast" id="copiedToast">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<path d="M2 7L5.5 10.5L12 3" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span style="font-size:13px; color:var(--soft-light); font-weight:500;">Link copied</span>
|
||||
</div>
|
||||
|
||||
<!-- Share sheet modal -->
|
||||
<div class="modal-overlay">
|
||||
<div class="share-sheet">
|
||||
<div class="sheet-handle"></div>
|
||||
<div class="sheet-title">Share Pattern</div>
|
||||
|
||||
<!-- Pattern card preview -->
|
||||
<div class="pattern-preview">
|
||||
<div class="pattern-visual-area">
|
||||
<div class="pattern-aura"></div>
|
||||
<svg width="100" height="100" viewBox="0 0 100 100" style="mix-blend-mode: screen; position:relative; z-index:1;">
|
||||
<defs>
|
||||
<linearGradient id="sb1" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD" stop-opacity="0.8"/>
|
||||
<stop offset="100%" stop-color="#7C3AED" stop-opacity="0.3"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="sb2" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7" stop-opacity="0.7"/>
|
||||
<stop offset="100%" stop-color="#059669" stop-opacity="0.2"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="sb3" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A" stop-opacity="0.6"/>
|
||||
<stop offset="100%" stop-color="#D97706" stop-opacity="0.2"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="translate(50,50)">
|
||||
<g><path d="M0,0 L6,-32 L0,-38 L-6,-32Z" fill="url(#sb1)"/></g>
|
||||
<g transform="rotate(60)"><path d="M0,0 L6,-32 L0,-38 L-6,-32Z" fill="url(#sb2)"/></g>
|
||||
<g transform="rotate(120)"><path d="M0,0 L6,-32 L0,-38 L-6,-32Z" fill="url(#sb3)"/></g>
|
||||
<g transform="rotate(180)"><path d="M0,0 L6,-32 L0,-38 L-6,-32Z" fill="url(#sb1)"/></g>
|
||||
<g transform="rotate(240)"><path d="M0,0 L6,-32 L0,-38 L-6,-32Z" fill="url(#sb2)"/></g>
|
||||
<g transform="rotate(300)"><path d="M0,0 L6,-32 L0,-38 L-6,-32Z" fill="url(#sb3)"/></g>
|
||||
<circle r="8" fill="white" opacity="0.12"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="pattern-content-area">
|
||||
<div class="pattern-thought">"I completely bombed my presentation today..."</div>
|
||||
<div class="pattern-reframe">One hard moment doesn't define the arc. What's one thing you learned that you couldn't have without this?</div>
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;">
|
||||
<span style="font-size:10px; color:var(--faint-light);">Feb 22, 2026 · Catastrophizing</span>
|
||||
<span style="font-size:10px; color:var(--emerald-light); font-weight:600;">+52% lift</span>
|
||||
</div>
|
||||
<div class="pattern-branding">
|
||||
<svg class="branding-logo" width="16" height="16" viewBox="0 0 16 16">
|
||||
<g transform="translate(8,8)">
|
||||
<path d="M0,0 L2,-6 L0,-8 L-2,-6Z" fill="#8B5CF6" opacity="0.7"/>
|
||||
<path d="M0,0 L2,-6 L0,-8 L-2,-6Z" fill="#3B82F6" opacity="0.5" transform="rotate(120)"/>
|
||||
<path d="M0,0 L2,-6 L0,-8 L-2,-6Z" fill="#10B981" opacity="0.5" transform="rotate(240)"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="branding-text">Made with Kalei</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Share targets -->
|
||||
<div class="share-targets">
|
||||
<button class="share-target" onclick="copyLink()">
|
||||
<div class="share-target-icon">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none">
|
||||
<path d="M9 13L13 9M8 10L6 12C5 13 5 15 6 16C7 17 9 17 10 16L12 14" stroke="#E2E8F0" stroke-width="1.4" stroke-linecap="round"/>
|
||||
<path d="M14 12L16 10C17 9 17 7 16 6C15 5 13 5 12 6L10 8" stroke="#E2E8F0" stroke-width="1.4" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="share-target-label">Copy Link</span>
|
||||
</button>
|
||||
|
||||
<button class="share-target" onclick="shareMessages()">
|
||||
<div class="share-target-icon">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none">
|
||||
<rect x="3" y="5" width="16" height="12" rx="3" stroke="#E2E8F0" stroke-width="1.4"/>
|
||||
<path d="M3 17L7 14" stroke="#E2E8F0" stroke-width="1.4" stroke-linecap="round"/>
|
||||
<path d="M7 10H15M7 13H12" stroke="#E2E8F0" stroke-width="1" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="share-target-label">Messages</span>
|
||||
</button>
|
||||
|
||||
<button class="share-target" onclick="shareMore()">
|
||||
<div class="share-target-icon">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none">
|
||||
<circle cx="7" cy="11" r="1.5" fill="#E2E8F0"/>
|
||||
<circle cx="11" cy="11" r="1.5" fill="#E2E8F0"/>
|
||||
<circle cx="15" cy="11" r="1.5" fill="#E2E8F0"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="share-target-label">More...</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Close -->
|
||||
<div class="close-row">
|
||||
<a class="close-btn" href="../gallery/33-gallery-detail.html">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function copyLink() {
|
||||
const toast = document.getElementById('copiedToast');
|
||||
toast.classList.add('visible');
|
||||
setTimeout(() => toast.classList.remove('visible'), 2000);
|
||||
}
|
||||
|
||||
function shareMessages() {
|
||||
// Simulated share action
|
||||
alert('Opening Messages...');
|
||||
}
|
||||
|
||||
function shareMore() {
|
||||
// Simulated share sheet
|
||||
alert('Opening share sheet...');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
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>
|
||||
283
initial mockups/screens/ritual/44-ritual-templates.html
Normal file
283
initial mockups/screens/ritual/44-ritual-templates.html
Normal file
@@ -0,0 +1,283 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Choose Your Ritual</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.ritual-card {
|
||||
border-radius: var(--radius-2xl);
|
||||
overflow: hidden;
|
||||
margin-bottom: var(--space-4);
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
|
||||
border: 1px solid;
|
||||
}
|
||||
.ritual-card-header {
|
||||
padding: var(--space-5) var(--space-4) var(--space-4);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ritual-card-body {
|
||||
padding: var(--space-3) var(--space-4) var(--space-4);
|
||||
border-top: 1px solid;
|
||||
}
|
||||
.ritual-name {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.ritual-tagline {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
margin-top: 2px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.ritual-duration {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--radius-full);
|
||||
margin-top: 8px;
|
||||
}
|
||||
.ritual-steps-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.ritual-step-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
height: 26px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
background: rgba(255,255,255,0.08);
|
||||
}
|
||||
.ritual-arrow {
|
||||
font-size: 10px;
|
||||
opacity: 0.35;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
/* Morning — Amethyst */
|
||||
.ritual-morning {
|
||||
background: rgba(139,92,246,0.08);
|
||||
border-color: rgba(139,92,246,0.3);
|
||||
}
|
||||
.ritual-morning .ritual-card-header {
|
||||
background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(99,102,241,0.08));
|
||||
}
|
||||
.ritual-morning .ritual-card-body { border-color: rgba(139,92,246,0.18); }
|
||||
.ritual-morning:hover { transform: translateY(-2px); box-shadow: 0 0 28px rgba(139,92,246,0.22); }
|
||||
/* Evening — Sapphire */
|
||||
.ritual-evening {
|
||||
background: rgba(59,130,246,0.08);
|
||||
border-color: rgba(59,130,246,0.3);
|
||||
}
|
||||
.ritual-evening .ritual-card-header {
|
||||
background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(30,58,138,0.08));
|
||||
}
|
||||
.ritual-evening .ritual-card-body { border-color: rgba(59,130,246,0.18); }
|
||||
.ritual-evening:hover { transform: translateY(-2px); box-shadow: 0 0 28px rgba(59,130,246,0.22); }
|
||||
/* Quick — Emerald */
|
||||
.ritual-quick {
|
||||
background: rgba(16,185,129,0.08);
|
||||
border-color: rgba(16,185,129,0.3);
|
||||
}
|
||||
.ritual-quick .ritual-card-header {
|
||||
background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(4,120,87,0.08));
|
||||
}
|
||||
.ritual-quick .ritual-card-body { border-color: rgba(16,185,129,0.18); }
|
||||
.ritual-quick:hover { transform: translateY(-2px); box-shadow: 0 0 28px rgba(16,185,129,0.22); }
|
||||
.ritual-bg-deco {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: -20px;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
border-radius: 50%;
|
||||
opacity: 0.07;
|
||||
filter: blur(24px);
|
||||
pointer-events: none;
|
||||
}
|
||||
.intro-text {
|
||||
padding: var(--space-2) 0 var(--space-4);
|
||||
font-size: 14px;
|
||||
color: var(--dim-light);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.streak-nudge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--amber-light);
|
||||
font-weight: 600;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.streak-nudge-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--amber);
|
||||
box-shadow: 0 0 6px rgba(245,158,11,0.5);
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<!-- STATUS BAR -->
|
||||
<div class="status-bar">
|
||||
<span class="time">8:47</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>
|
||||
|
||||
<!-- NAV HEADER -->
|
||||
<div class="nav-header">
|
||||
<a class="nav-back" href="../you/35-you-profile.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Your Rituals</span>
|
||||
<span class="nav-action">
|
||||
<a href="49-ritual-streak.html" style="text-decoration:none; color: var(--amber-light); font-size:13px; font-weight:600;">14 🔥</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- SCREEN CONTENT -->
|
||||
<div class="screen-content" style="padding-top: var(--space-2);">
|
||||
|
||||
<div class="intro-text">
|
||||
Choose the ritual that fits this moment. Each one is a different shape of care — and Alex has been showing up for 14 days straight.
|
||||
<div class="streak-nudge">
|
||||
<span class="streak-nudge-dot"></span>
|
||||
Longest streak yet. Keep the thread going.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Morning Clarity -->
|
||||
<a class="ritual-card ritual-morning" href="45-ritual-morning.html">
|
||||
<div class="ritual-card-header">
|
||||
<div class="ritual-bg-deco" style="background: var(--amethyst);"></div>
|
||||
<div style="display:flex; align-items:center; gap: var(--space-3); margin-bottom: var(--space-2);">
|
||||
<svg width="36" height="36" viewBox="0 0 36 36">
|
||||
<defs><linearGradient id="mGr" 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(18,18)">
|
||||
<path d="M0,0 L3,-13 L0,-15 L-3,-13Z" fill="url(#mGr)" opacity="0.9"/>
|
||||
<g transform="rotate(60)"><path d="M0,0 L3,-13 L0,-15 L-3,-13Z" fill="url(#mGr)" opacity="0.7"/></g>
|
||||
<g transform="rotate(120)"><path d="M0,0 L3,-13 L0,-15 L-3,-13Z" fill="url(#mGr)" opacity="0.8"/></g>
|
||||
<g transform="rotate(180)"><path d="M0,0 L3,-13 L0,-15 L-3,-13Z" fill="url(#mGr)" opacity="0.7"/></g>
|
||||
<g transform="rotate(240)"><path d="M0,0 L3,-13 L0,-15 L-3,-13Z" fill="url(#mGr)" opacity="0.9"/></g>
|
||||
<g transform="rotate(300)"><path d="M0,0 L3,-13 L0,-15 L-3,-13Z" fill="url(#mGr)" opacity="0.8"/></g>
|
||||
<circle r="3" fill="white" opacity="0.2"/>
|
||||
</g>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="ritual-name" style="color: var(--amethyst-light);">Morning Clarity</div>
|
||||
<div class="ritual-tagline">Set your intention before the day sets it for you</div>
|
||||
<div class="ritual-duration" style="background: rgba(139,92,246,0.15); color: var(--amethyst-light);">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="5" fill="none" stroke="currentColor" stroke-width="1"/><path d="M6 3v3l2 2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
15 min · 4 steps
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ritual-card-body">
|
||||
<div class="label text-dim" style="margin-bottom: var(--space-2);">Steps</div>
|
||||
<div class="ritual-steps-preview">
|
||||
<div class="ritual-step-chip" style="color: var(--amber-light);">Intention</div>
|
||||
<div class="ritual-arrow">→</div>
|
||||
<div class="ritual-step-chip" style="color: var(--amethyst-light);">Fragments</div>
|
||||
<div class="ritual-arrow">→</div>
|
||||
<div class="ritual-step-chip" style="color: var(--sapphire-light);">Rehearsal</div>
|
||||
<div class="ritual-arrow">→</div>
|
||||
<div class="ritual-step-chip" style="color: var(--emerald-light);">Commit</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Evening Wind-Down -->
|
||||
<a class="ritual-card ritual-evening" href="46-ritual-evening.html">
|
||||
<div class="ritual-card-header">
|
||||
<div class="ritual-bg-deco" style="background: var(--sapphire);"></div>
|
||||
<div style="display:flex; align-items:center; gap: var(--space-3); margin-bottom: var(--space-2);">
|
||||
<svg width="36" height="36" viewBox="0 0 36 36">
|
||||
<defs><linearGradient id="eGr" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#2563EB"/></linearGradient></defs>
|
||||
<circle cx="18" cy="18" r="13" fill="none" stroke="url(#eGr)" stroke-width="1.5" opacity="0.5"/>
|
||||
<circle cx="18" cy="18" r="8" fill="none" stroke="url(#eGr)" stroke-width="1.5" opacity="0.7"/>
|
||||
<circle cx="18" cy="18" r="3" fill="url(#eGr)" opacity="0.8"/>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="ritual-name" style="color: var(--sapphire-light);">Evening Wind-Down</div>
|
||||
<div class="ritual-tagline">Let the day settle before you do</div>
|
||||
<div class="ritual-duration" style="background: rgba(59,130,246,0.15); color: var(--sapphire-light);">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="5" fill="none" stroke="currentColor" stroke-width="1"/><path d="M6 3v3l2 2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
20 min · 4 steps
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ritual-card-body">
|
||||
<div class="label text-dim" style="margin-bottom: var(--space-2);">Steps</div>
|
||||
<div class="ritual-steps-preview">
|
||||
<div class="ritual-step-chip" style="color: var(--sapphire-light);">Day Reflection</div>
|
||||
<div class="ritual-arrow">→</div>
|
||||
<div class="ritual-step-chip" style="color: var(--amethyst-light);">Pattern Check</div>
|
||||
<div class="ritual-arrow">→</div>
|
||||
<div class="ritual-step-chip" style="color: var(--emerald-light);">Gratitude</div>
|
||||
<div class="ritual-arrow">→</div>
|
||||
<div class="ritual-step-chip" style="color: var(--indigo-light);">Tomorrow</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Quick Grounding -->
|
||||
<a class="ritual-card ritual-quick" href="47-ritual-quick.html" style="margin-bottom: var(--space-6);">
|
||||
<div class="ritual-card-header">
|
||||
<div class="ritual-bg-deco" style="background: var(--emerald);"></div>
|
||||
<div style="display:flex; align-items:center; gap: var(--space-3); margin-bottom: var(--space-2);">
|
||||
<svg width="36" height="36" viewBox="0 0 36 36">
|
||||
<defs><linearGradient id="qGr" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/></linearGradient></defs>
|
||||
<path d="M18 4L28 10V22L18 28L8 22V10Z" fill="none" stroke="url(#qGr)" stroke-width="1.5" opacity="0.8"/>
|
||||
<path d="M18 10L24 14V20L18 24L12 20V14Z" fill="url(#qGr)" opacity="0.3"/>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="ritual-name" style="color: var(--emerald-light);">Quick Grounding</div>
|
||||
<div class="ritual-tagline">Two minutes to come back to yourself when stressed</div>
|
||||
<div class="ritual-duration" style="background: rgba(16,185,129,0.15); color: var(--emerald-light);">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="5" fill="none" stroke="currentColor" stroke-width="1"/><path d="M6 3v3l2 2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
2 min · 2 steps
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ritual-card-body">
|
||||
<div class="label text-dim" style="margin-bottom: var(--space-2);">Steps</div>
|
||||
<div class="ritual-steps-preview">
|
||||
<div class="ritual-step-chip" style="color: var(--amethyst-light);">Name it</div>
|
||||
<div class="ritual-arrow">→</div>
|
||||
<div class="ritual-step-chip" style="color: var(--emerald-light);">Ground it</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
242
initial mockups/screens/ritual/45-ritual-morning.html
Normal file
242
initial mockups/screens/ritual/45-ritual-morning.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 — Morning Clarity Ritual</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.ritual-progress-bar {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: var(--space-3) var(--space-4) 0;
|
||||
}
|
||||
.rp-seg {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--twilight);
|
||||
transition: background 0.3s ease-out;
|
||||
}
|
||||
.rp-seg.done { background: var(--amethyst); box-shadow: 0 0 6px rgba(139,92,246,0.4); }
|
||||
.rp-seg.active { background: linear-gradient(to right, var(--amethyst), var(--sapphire)); box-shadow: 0 0 8px rgba(139,92,246,0.3); animation: pulse-bar 2s ease-in-out infinite; }
|
||||
@keyframes pulse-bar { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } }
|
||||
.ritual-timer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.step-card {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid rgba(245,158,11,0.25);
|
||||
border-radius: var(--radius-2xl);
|
||||
padding: var(--space-5);
|
||||
margin-bottom: var(--space-4);
|
||||
box-shadow: 0 0 20px rgba(245,158,11,0.05);
|
||||
}
|
||||
.step-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 4px 12px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.step-badge.intention { background: rgba(245,158,11,0.15); color: var(--amber-light); }
|
||||
.step-prompt {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
line-height: 1.45;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.step-subprompt {
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
line-height: 1.5;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.journal-area {
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--amber);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 14px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: var(--soft-light);
|
||||
outline: none;
|
||||
resize: none;
|
||||
box-shadow: 0 0 12px rgba(245,158,11,0.08);
|
||||
font-family: var(--font-primary);
|
||||
}
|
||||
.journal-area::placeholder { color: var(--faint-light); }
|
||||
.char-count { text-align: right; font-size: 11px; color: var(--faint-light); margin-top: var(--space-2); }
|
||||
.step-nav-area {
|
||||
padding: var(--space-4) 0 var(--space-6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.btn-next {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
background: var(--amethyst);
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
text-decoration: none;
|
||||
box-shadow: var(--glow-amethyst);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
gap: var(--space-2);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.btn-next:hover { background: var(--amethyst-light); }
|
||||
.upcoming-steps {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
}
|
||||
.upcoming-step-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-2) 0;
|
||||
}
|
||||
.upcoming-step-row:not(:last-child) { border-bottom: 1px solid var(--twilight); }
|
||||
.upcoming-step-num {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: var(--twilight);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--dim-light);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.upcoming-step-num.current { background: var(--amethyst); color: var(--pure-light); box-shadow: 0 0 8px rgba(139,92,246,0.4); }
|
||||
.aura-deco {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(245,158,11,0.07), transparent 70%);
|
||||
filter: blur(40px);
|
||||
pointer-events: none;
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<!-- STATUS BAR -->
|
||||
<div class="status-bar">
|
||||
<span class="time">8:47</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>
|
||||
|
||||
<!-- NAV HEADER -->
|
||||
<div class="nav-header">
|
||||
<a class="nav-back" href="44-ritual-templates.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Morning Clarity</span>
|
||||
<span class="nav-action">
|
||||
<div class="ritual-timer">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="5" fill="none" stroke="currentColor" stroke-width="1"/><path d="M6 3v3l2 2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
3:24
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- STEP PROGRESS -->
|
||||
<div class="ritual-progress-bar">
|
||||
<div class="rp-seg active"></div>
|
||||
<div class="rp-seg"></div>
|
||||
<div class="rp-seg"></div>
|
||||
<div class="rp-seg"></div>
|
||||
</div>
|
||||
|
||||
<!-- Ambient decoration -->
|
||||
<div class="aura-deco"></div>
|
||||
|
||||
<!-- SCREEN CONTENT -->
|
||||
<div class="screen-content" style="padding-top: var(--space-5);">
|
||||
|
||||
<!-- Step Card -->
|
||||
<div class="step-card">
|
||||
<div class="step-badge intention">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 1L9 4L10 6L9 8L6 10L3 8L2 6L3 4Z" fill="none" stroke="currentColor" stroke-width="1"/></svg>
|
||||
Step 1 — Intention
|
||||
</div>
|
||||
<div class="step-prompt">What's one thing you're carrying into today?</div>
|
||||
<div class="step-subprompt">Not a task list — just what's already in your mind before the day begins.</div>
|
||||
<textarea class="journal-area" placeholder="Let it land here before the world demands anything of you..."></textarea>
|
||||
<div class="char-count">0 / 500</div>
|
||||
</div>
|
||||
|
||||
<!-- Upcoming Steps -->
|
||||
<div class="label text-dim" style="margin-bottom: var(--space-2);">Today's ritual</div>
|
||||
<div class="upcoming-steps">
|
||||
<div class="upcoming-step-row">
|
||||
<div class="upcoming-step-num current">1</div>
|
||||
<div style="flex:1; font-size:14px; color: var(--soft-light);">Intention setting</div>
|
||||
<span style="font-size: 12px; color: var(--dim-light);">~4 min</span>
|
||||
</div>
|
||||
<div class="upcoming-step-row">
|
||||
<div class="upcoming-step-num">2</div>
|
||||
<div style="flex:1; font-size:14px; color: var(--faint-light);">Fragment awareness</div>
|
||||
<span style="font-size: 12px; color: var(--faint-light);">~4 min</span>
|
||||
</div>
|
||||
<div class="upcoming-step-row">
|
||||
<div class="upcoming-step-num">3</div>
|
||||
<div style="flex:1; font-size:14px; color: var(--faint-light);">Rehearsal moment</div>
|
||||
<span style="font-size: 12px; color: var(--faint-light);">~4 min</span>
|
||||
</div>
|
||||
<div class="upcoming-step-row">
|
||||
<div class="upcoming-step-num">4</div>
|
||||
<div style="flex:1; font-size:14px; color: var(--faint-light);">Daily commitment</div>
|
||||
<span style="font-size: 12px; color: var(--faint-light);">~3 min</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<div class="step-nav-area">
|
||||
<a href="48-ritual-complete.html" class="btn-next">
|
||||
Continue
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<a href="44-ritual-templates.html" style="text-align: center; font-size: 14px; color: var(--faint-light); text-decoration: none; padding: var(--space-2);">Save & Exit</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
246
initial mockups/screens/ritual/46-ritual-evening.html
Normal file
246
initial mockups/screens/ritual/46-ritual-evening.html
Normal file
@@ -0,0 +1,246 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Evening Wind-Down Ritual</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.ritual-progress-bar {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: var(--space-3) var(--space-4) 0;
|
||||
}
|
||||
.rp-seg {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--twilight);
|
||||
transition: background 0.3s ease-out;
|
||||
}
|
||||
.rp-seg.done { background: var(--sapphire); box-shadow: 0 0 6px rgba(59,130,246,0.4); }
|
||||
.rp-seg.active { background: linear-gradient(to right, var(--sapphire), var(--amethyst)); box-shadow: 0 0 8px rgba(59,130,246,0.3); animation: pulse-bar 2s ease-in-out infinite; }
|
||||
@keyframes pulse-bar { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } }
|
||||
.ritual-timer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.step-card {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid rgba(59,130,246,0.25);
|
||||
border-radius: var(--radius-2xl);
|
||||
padding: var(--space-5);
|
||||
margin-bottom: var(--space-4);
|
||||
box-shadow: 0 0 20px rgba(59,130,246,0.05);
|
||||
}
|
||||
.step-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 4px 12px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
margin-bottom: var(--space-3);
|
||||
background: rgba(59,130,246,0.15);
|
||||
color: var(--sapphire-light);
|
||||
}
|
||||
.step-prompt {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
line-height: 1.45;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.step-subprompt {
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
line-height: 1.5;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.journal-area {
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--sapphire);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 14px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: var(--soft-light);
|
||||
outline: none;
|
||||
resize: none;
|
||||
box-shadow: 0 0 12px rgba(59,130,246,0.08);
|
||||
font-family: var(--font-primary);
|
||||
}
|
||||
.journal-area::placeholder { color: var(--faint-light); }
|
||||
.char-count { text-align: right; font-size: 11px; color: var(--faint-light); margin-top: var(--space-2); }
|
||||
.upcoming-steps {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.upcoming-step-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-2) 0;
|
||||
}
|
||||
.upcoming-step-row:not(:last-child) { border-bottom: 1px solid var(--twilight); }
|
||||
.upcoming-step-num {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: var(--twilight);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--dim-light);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.upcoming-step-num.current { background: var(--sapphire); color: var(--pure-light); box-shadow: 0 0 8px rgba(59,130,246,0.4); }
|
||||
.upcoming-step-num.done-check {
|
||||
background: rgba(59,130,246,0.15);
|
||||
}
|
||||
.aura-deco {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(59,130,246,0.07), transparent 70%);
|
||||
filter: blur(40px);
|
||||
pointer-events: none;
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
}
|
||||
.btn-next {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
background: var(--sapphire);
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
text-decoration: none;
|
||||
box-shadow: var(--glow-sapphire);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-3);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.btn-next:hover { background: var(--sapphire-light); }
|
||||
/* Prefill looks like real content was typed */
|
||||
.journal-prefilled {
|
||||
color: var(--soft-light);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<!-- STATUS BAR -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:18</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>
|
||||
|
||||
<!-- NAV HEADER -->
|
||||
<div class="nav-header">
|
||||
<a class="nav-back" href="44-ritual-templates.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Evening Wind-Down</span>
|
||||
<span class="nav-action">
|
||||
<div class="ritual-timer">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="5" fill="none" stroke="currentColor" stroke-width="1"/><path d="M6 3v3l2 2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
7:41
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- STEP PROGRESS — on step 2 of 4 -->
|
||||
<div class="ritual-progress-bar">
|
||||
<div class="rp-seg done"></div>
|
||||
<div class="rp-seg active"></div>
|
||||
<div class="rp-seg"></div>
|
||||
<div class="rp-seg"></div>
|
||||
</div>
|
||||
|
||||
<!-- Ambient decoration -->
|
||||
<div class="aura-deco"></div>
|
||||
|
||||
<!-- SCREEN CONTENT -->
|
||||
<div class="screen-content" style="padding-top: var(--space-5);">
|
||||
|
||||
<!-- Step Card -->
|
||||
<div class="step-card">
|
||||
<div class="step-badge">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 1L10 6L6 11L2 6Z" fill="currentColor" opacity="0.8"/></svg>
|
||||
Step 2 — Pattern Check
|
||||
</div>
|
||||
<div class="step-prompt">What thought kept pulling at you today?</div>
|
||||
<div class="step-subprompt">Not the event — just the story you told yourself about it.</div>
|
||||
<textarea class="journal-area journal-prefilled" placeholder="What kept running through your head...">I feel like I didn't accomplish enough today and I'm falling behind on everything.</textarea>
|
||||
<div class="char-count">67 / 500</div>
|
||||
</div>
|
||||
|
||||
<!-- Upcoming Steps -->
|
||||
<div class="label text-dim" style="margin-bottom: var(--space-2);">Tonight's ritual</div>
|
||||
<div class="upcoming-steps">
|
||||
<div class="upcoming-step-row">
|
||||
<div class="upcoming-step-num done-check">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 6l3 3 5-5" stroke="var(--sapphire-light)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div style="flex:1; font-size:14px; color: var(--dim-light);">Day reflection</div>
|
||||
<span style="font-size: 12px; color: var(--sapphire); font-weight: 600;">Done</span>
|
||||
</div>
|
||||
<div class="upcoming-step-row">
|
||||
<div class="upcoming-step-num current">2</div>
|
||||
<div style="flex:1; font-size:14px; color: var(--soft-light);">Pattern check</div>
|
||||
<span style="font-size: 12px; color: var(--dim-light);">~5 min</span>
|
||||
</div>
|
||||
<div class="upcoming-step-row">
|
||||
<div class="upcoming-step-num">3</div>
|
||||
<div style="flex:1; font-size:14px; color: var(--faint-light);">Gratitude</div>
|
||||
<span style="font-size: 12px; color: var(--faint-light);">~5 min</span>
|
||||
</div>
|
||||
<div class="upcoming-step-row">
|
||||
<div class="upcoming-step-num">4</div>
|
||||
<div style="flex:1; font-size:14px; color: var(--faint-light);">Tomorrow's intention</div>
|
||||
<span style="font-size: 12px; color: var(--faint-light);">~5 min</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<a href="48-ritual-complete.html" class="btn-next">
|
||||
Continue
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<a href="44-ritual-templates.html" style="text-align: center; display: block; font-size: 14px; color: var(--faint-light); text-decoration: none; padding: var(--space-2); margin-bottom: var(--space-4);">Save & Exit</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
264
initial mockups/screens/ritual/47-ritual-quick.html
Normal file
264
initial mockups/screens/ritual/47-ritual-quick.html
Normal file
@@ -0,0 +1,264 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Quick Grounding Ritual</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.ritual-progress-bar {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: var(--space-3) var(--space-4) 0;
|
||||
}
|
||||
.rp-seg {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--twilight);
|
||||
transition: background 0.3s ease-out;
|
||||
}
|
||||
.rp-seg.done { background: var(--emerald); box-shadow: 0 0 6px rgba(16,185,129,0.4); }
|
||||
.rp-seg.active { background: linear-gradient(to right, var(--emerald), var(--sapphire)); box-shadow: 0 0 8px rgba(16,185,129,0.3); animation: pulse-bar 2s ease-in-out infinite; }
|
||||
@keyframes pulse-bar { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } }
|
||||
.ritual-timer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.step-card {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid rgba(16,185,129,0.25);
|
||||
border-radius: var(--radius-2xl);
|
||||
padding: var(--space-5);
|
||||
margin-bottom: var(--space-4);
|
||||
box-shadow: 0 0 20px rgba(16,185,129,0.05);
|
||||
}
|
||||
.step-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 4px 12px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
margin-bottom: var(--space-3);
|
||||
background: rgba(16,185,129,0.15);
|
||||
color: var(--emerald-light);
|
||||
}
|
||||
.step-prompt {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
line-height: 1.45;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.step-subprompt {
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
line-height: 1.5;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.thought-input {
|
||||
width: 100%;
|
||||
min-height: 90px;
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--emerald);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 14px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: var(--soft-light);
|
||||
outline: none;
|
||||
resize: none;
|
||||
box-shadow: 0 0 12px rgba(16,185,129,0.08);
|
||||
font-family: var(--font-primary);
|
||||
}
|
||||
.thought-input::placeholder { color: var(--faint-light); }
|
||||
.char-count { text-align: right; font-size: 11px; color: var(--faint-light); margin-top: var(--space-2); }
|
||||
.upcoming-steps {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.upcoming-step-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-2) 0;
|
||||
}
|
||||
.upcoming-step-row:not(:last-child) { border-bottom: 1px solid var(--twilight); }
|
||||
.upcoming-step-num {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: var(--twilight);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--dim-light);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.upcoming-step-num.current { background: var(--emerald); color: var(--void); box-shadow: 0 0 8px rgba(16,185,129,0.4); }
|
||||
.aura-deco {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(16,185,129,0.09), transparent 70%);
|
||||
filter: blur(40px);
|
||||
pointer-events: none;
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
}
|
||||
.btn-next {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
background: var(--emerald);
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--void);
|
||||
text-decoration: none;
|
||||
box-shadow: var(--glow-emerald);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-3);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.btn-next:hover { background: var(--emerald-light); }
|
||||
.quick-tip {
|
||||
background: rgba(16,185,129,0.07);
|
||||
border: 1px solid rgba(16,185,129,0.2);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
font-size: 13px;
|
||||
color: var(--emerald-light);
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
align-items: flex-start;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.breathe-ring {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
background: rgba(16,185,129,0.08);
|
||||
border: 1.5px solid rgba(16,185,129,0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto var(--space-3);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<!-- STATUS BAR -->
|
||||
<div class="status-bar">
|
||||
<span class="time">2:14</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>
|
||||
|
||||
<!-- NAV HEADER -->
|
||||
<div class="nav-header">
|
||||
<a class="nav-back" href="44-ritual-templates.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Quick Grounding</span>
|
||||
<span class="nav-action">
|
||||
<div class="ritual-timer">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="5" fill="none" stroke="currentColor" stroke-width="1"/><path d="M6 3v3l2 2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
1:08
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- STEP PROGRESS -->
|
||||
<div class="ritual-progress-bar">
|
||||
<div class="rp-seg active"></div>
|
||||
<div class="rp-seg"></div>
|
||||
</div>
|
||||
|
||||
<!-- Ambient decoration -->
|
||||
<div class="aura-deco"></div>
|
||||
|
||||
<!-- SCREEN CONTENT -->
|
||||
<div class="screen-content" style="padding-top: var(--space-5);">
|
||||
|
||||
<!-- Breathing ring -->
|
||||
<div class="breathe-ring">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none">
|
||||
<circle cx="11" cy="11" r="8" fill="none" stroke="#6EE7B7" stroke-width="1.2" stroke-dasharray="3 3"/>
|
||||
<circle cx="11" cy="11" r="4" fill="#10B981" opacity="0.4"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Step Card -->
|
||||
<div class="step-card">
|
||||
<div class="step-badge">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 1L10 6L6 11L2 6Z" fill="currentColor" opacity="0.8"/></svg>
|
||||
Step 1 — Name It
|
||||
</div>
|
||||
<div class="step-prompt">What thought is pulling you out of the present right now?</div>
|
||||
<div class="step-subprompt">One sentence is enough. You don't need to solve it — just name it.</div>
|
||||
<textarea class="thought-input" placeholder="I keep thinking about..."></textarea>
|
||||
<div class="char-count">0 / 280</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick tip -->
|
||||
<div class="quick-tip">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" style="flex-shrink:0; margin-top: 1px;"><circle cx="7" cy="7" r="5.5" fill="none" stroke="currentColor" stroke-width="1"/><path d="M7 4v3.5M7 9.5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
Keep it brief. One sentence captures the essence. You'll reframe it in the next step.
|
||||
</div>
|
||||
|
||||
<!-- Steps overview -->
|
||||
<div class="label text-dim" style="margin-bottom: var(--space-2);">2 Steps · ~2 min total</div>
|
||||
<div class="upcoming-steps">
|
||||
<div class="upcoming-step-row">
|
||||
<div class="upcoming-step-num current">1</div>
|
||||
<div style="flex:1; font-size:14px; color: var(--soft-light);">Name the thought</div>
|
||||
<span style="font-size: 12px; color: var(--dim-light);">~1 min</span>
|
||||
</div>
|
||||
<div class="upcoming-step-row">
|
||||
<div class="upcoming-step-num">2</div>
|
||||
<div style="flex:1; font-size:14px; color: var(--faint-light);">Ground it with a reframe</div>
|
||||
<span style="font-size: 12px; color: var(--faint-light);">~1 min</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<a href="48-ritual-complete.html" class="btn-next">
|
||||
Continue
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<a href="44-ritual-templates.html" style="text-align: center; display: block; font-size: 14px; color: var(--faint-light); text-decoration: none; padding: var(--space-2); margin-bottom: var(--space-4);">Exit Ritual</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
310
initial mockups/screens/ritual/48-ritual-complete.html
Normal file
310
initial mockups/screens/ritual/48-ritual-complete.html
Normal file
@@ -0,0 +1,310 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Ritual Complete</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.celebration-burst {
|
||||
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.11) 0%, rgba(59,130,246,0.07) 30%, rgba(16,185,129,0.05) 60%, transparent 80%);
|
||||
filter: blur(30px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes successBurst {
|
||||
0% { transform: scale(0) rotate(-30deg); opacity: 0; }
|
||||
60% { transform: scale(1.15) rotate(5deg); opacity: 1; }
|
||||
80% { transform: scale(0.95) rotate(-2deg); opacity: 1; }
|
||||
100% { transform: scale(1) rotate(0deg); opacity: 1; }
|
||||
}
|
||||
.complete-hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: var(--space-8) var(--space-4) var(--space-5);
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
.burst-icon {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--space-5);
|
||||
animation: successBurst 0.8s ease forwards;
|
||||
}
|
||||
.complete-heading {
|
||||
font-family: var(--font-display);
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
background: var(--prismatic);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.complete-sub {
|
||||
font-size: 14px;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: var(--space-5);
|
||||
line-height: 1.6;
|
||||
max-width: 280px;
|
||||
}
|
||||
.stats-row {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
width: 100%;
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.stat-pill {
|
||||
flex: 1;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-3);
|
||||
text-align: center;
|
||||
}
|
||||
.stat-pill .val {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.stat-pill .lbl {
|
||||
font-size: 10px;
|
||||
color: var(--dim-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.tile-earned-card {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid rgba(139,92,246,0.35);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-5);
|
||||
box-shadow: 0 0 20px rgba(139,92,246,0.12);
|
||||
}
|
||||
.tile-preview-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 12px;
|
||||
background: rgba(59,130,246,0.12);
|
||||
border: 1px solid var(--sapphire);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 0 14px rgba(59,130,246,0.2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.btn-done {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
background: var(--amethyst);
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
text-decoration: none;
|
||||
box-shadow: var(--glow-amethyst);
|
||||
margin-bottom: var(--space-3);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.btn-done:hover { background: var(--amethyst-light); }
|
||||
.streak-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.streak-flame-dots {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
}
|
||||
.flame-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--amber);
|
||||
box-shadow: 0 0 5px rgba(245,158,11,0.4);
|
||||
}
|
||||
.flame-dot.active { animation: pulse 2s ease-in-out infinite; }
|
||||
.flame-dot.new {
|
||||
background: var(--amber-light);
|
||||
box-shadow: 0 0 8px rgba(245,158,11,0.7);
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<!-- STATUS BAR -->
|
||||
<div class="status-bar" style="position: relative; z-index: 2;">
|
||||
<span class="time">8:52</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>
|
||||
|
||||
<!-- Celebration background -->
|
||||
<div class="celebration-burst"></div>
|
||||
|
||||
<!-- SCREEN CONTENT -->
|
||||
<div class="screen-content centered" style="position: relative; z-index: 2;">
|
||||
|
||||
<div class="burst-icon">
|
||||
<svg width="120" height="120" viewBox="-60 -60 120 120">
|
||||
<defs>
|
||||
<linearGradient id="rc48-grEm" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#A7F3D0;#6EE7B7" dur="5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="rc48-successGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#10B981" stop-opacity="0.4"/>
|
||||
<stop offset="100%" stop-color="#10B981" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<filter id="rc48-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="rc48-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="rc48-glowSm" 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="rc48-clip"><circle r="56"/></clipPath>
|
||||
</defs>
|
||||
|
||||
<g clip-path="url(#rc48-clip)" filter="url(#rc48-glowMd)">
|
||||
<circle r="45" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.2" stroke-dasharray="6 8"/>
|
||||
<circle r="30" fill="none" stroke="#10B981" stroke-width="0.6" opacity="0.25" stroke-dasharray="4 6"/>
|
||||
<g>
|
||||
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="45s" repeatCount="indefinite"/>
|
||||
<path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#rc48-grEm)" opacity="0.6"/>
|
||||
<g transform="rotate(60)"><path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#rc48-grEm)" opacity="0.5"/></g>
|
||||
<g transform="rotate(120)"><path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#rc48-grEm)" opacity="0.55"/></g>
|
||||
<g transform="rotate(180)"><path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#rc48-grEm)" opacity="0.5"/></g>
|
||||
<g transform="rotate(240)"><path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#rc48-grEm)" opacity="0.6"/></g>
|
||||
<g transform="rotate(300)"><path d="M 0,-45 L 3,-42 L 0,-39 L -3,-42 Z" fill="url(#rc48-grEm)" opacity="0.5"/></g>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g filter="url(#rc48-glowLg)">
|
||||
<circle r="30" fill="none" stroke="#10B981" stroke-width="2" opacity="0">
|
||||
<animate attributeName="r" values="10;35;40" dur="1.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.6;0.3;0" dur="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="20" fill="none" stroke="#6EE7B7" stroke-width="1" opacity="0">
|
||||
<animate attributeName="r" values="8;25;30" dur="1.5s" begin="0.2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.4;0.2;0" dur="1.5s" begin="0.2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="16" fill="url(#rc48-successGlow)" opacity="0.6">
|
||||
<animate attributeName="opacity" values="0.4;0.8;0.4" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<path d="M 0,-10 L 10,0 L 0,10 L -10,0 Z" fill="url(#rc48-grEm)" opacity="0.9"/>
|
||||
<path d="M 0,-10 L 10,0 L 0,0 Z" fill="#fff" opacity="0.2"/>
|
||||
<path d="M -4,0 L -1,4 L 5,-3" fill="none" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<circle r="4" fill="#6EE7B7" opacity="0.5" filter="url(#rc48-glowSm)">
|
||||
<animate attributeName="r" values="3;5;3" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="complete-heading">Day 14. Done.</div>
|
||||
<div class="complete-sub">You showed up again. That's the whole thing — fourteen mornings in a row, building something that lasts.</div>
|
||||
|
||||
<!-- Streak — 14 dots, last one highlighted as new -->
|
||||
<div class="streak-indicator">
|
||||
<div class="streak-flame-dots">
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot"></div>
|
||||
<div class="flame-dot new"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="body-sm" style="color: var(--amber-light); font-weight: 600; margin-bottom: var(--space-5); display:block;">14-day streak — your longest yet</span>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-pill">
|
||||
<div class="val">15</div>
|
||||
<div class="lbl">Minutes</div>
|
||||
</div>
|
||||
<div class="stat-pill">
|
||||
<div class="val">4</div>
|
||||
<div class="lbl">Steps</div>
|
||||
</div>
|
||||
<div class="stat-pill">
|
||||
<div class="val" style="color: var(--amber-light);">14</div>
|
||||
<div class="lbl">Day Streak</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- New tile earned -->
|
||||
<div class="tile-earned-card">
|
||||
<div class="tile-preview-icon">
|
||||
<svg width="34" height="26" viewBox="-18 -12 36 24">
|
||||
<defs>
|
||||
<linearGradient id="rc48-grSap" 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>
|
||||
<filter id="rc48-glowSap" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="2" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<rect x="-15" y="-9" width="30" height="18" rx="3" fill="#121628" stroke="#3B82F6" stroke-width="0.8"/>
|
||||
<g filter="url(#rc48-glowSap)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#rc48-grSap)" opacity="0.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div style="flex:1;">
|
||||
<div class="subheading" style="color: var(--sapphire-light); margin-bottom: 2px;">Evidence tile added</div>
|
||||
<div class="body-sm text-dim">Ritual Completion · Feb 22 · Day 14</div>
|
||||
</div>
|
||||
<a href="../you/42-evidence-wall-full.html" style="text-decoration:none;">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M8 4L14 10L8 16" stroke="var(--sapphire-light)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<a href="../turn/10-turn-home.html" class="btn-done">Back to home</a>
|
||||
<a href="49-ritual-streak.html" style="text-decoration: none; font-size: 14px; color: var(--dim-light);">View full streak history</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
422
initial mockups/screens/ritual/49-ritual-streak.html
Normal file
422
initial mockups/screens/ritual/49-ritual-streak.html
Normal file
@@ -0,0 +1,422 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Ritual Streak</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.streak-hero {
|
||||
text-align: center;
|
||||
padding: var(--space-6) 0 var(--space-5);
|
||||
position: relative;
|
||||
}
|
||||
.streak-number {
|
||||
font-family: var(--font-display);
|
||||
font-size: 80px;
|
||||
font-weight: 700;
|
||||
color: var(--amber-light);
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 48px rgba(245,158,11,0.35);
|
||||
}
|
||||
.streak-label {
|
||||
font-size: 16px;
|
||||
color: var(--dim-light);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
.streak-started {
|
||||
font-size: 12px;
|
||||
color: var(--faint-light);
|
||||
margin-top: 4px;
|
||||
}
|
||||
.streak-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.12), transparent 70%);
|
||||
filter: blur(32px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
.week-calendar {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.calendar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.calendar-month {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
.day-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 6px;
|
||||
}
|
||||
.day-label {
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
color: var(--faint-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
padding-bottom: var(--space-2);
|
||||
}
|
||||
.day-cell {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
}
|
||||
.day-cell.empty { background: transparent; color: transparent; }
|
||||
.day-cell.no-ritual { background: var(--void); color: var(--faint-light); border: 1px solid var(--twilight); }
|
||||
.day-cell.missed { background: rgba(239,68,68,0.06); color: var(--faint-light); border: 1px solid rgba(239,68,68,0.12); }
|
||||
.day-cell.done {
|
||||
background: rgba(245,158,11,0.18);
|
||||
color: var(--amber-light);
|
||||
font-weight: 700;
|
||||
border: 1px solid rgba(245,158,11,0.3);
|
||||
box-shadow: 0 0 6px rgba(245,158,11,0.15);
|
||||
}
|
||||
.day-cell.today {
|
||||
background: var(--amber);
|
||||
color: var(--void);
|
||||
font-weight: 700;
|
||||
box-shadow: 0 0 14px rgba(245,158,11,0.5);
|
||||
}
|
||||
.day-cell.today::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -2px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid var(--amber-light);
|
||||
}
|
||||
.day-cell.future { background: transparent; color: var(--faint-light); border: 1px dashed rgba(28,34,64,0.8); }
|
||||
.streak-stats {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.streak-stat {
|
||||
flex: 1;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
text-align: center;
|
||||
}
|
||||
.streak-stat .sval {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--amber-light);
|
||||
line-height: 1.2;
|
||||
}
|
||||
.streak-stat .slbl {
|
||||
font-size: 11px;
|
||||
color: var(--dim-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.heat-map {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.heat-label { font-size: 11px; color: var(--dim-light); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-3); }
|
||||
.heat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 40px repeat(7, 1fr);
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
.heat-time { font-size: 10px; color: var(--faint-light); text-align: right; padding-right: 6px; }
|
||||
.heat-cell {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.heat-cell.h0 { background: var(--void); border: 1px solid var(--twilight); }
|
||||
.heat-cell.h1 { background: rgba(245,158,11,0.2); }
|
||||
.heat-cell.h2 { background: rgba(245,158,11,0.4); }
|
||||
.heat-cell.h3 { background: rgba(245,158,11,0.6); }
|
||||
.heat-cell.h4 { background: var(--amber); box-shadow: 0 0 6px rgba(245,158,11,0.4); }
|
||||
.heat-day-label { font-size: 9px; color: var(--faint-light); text-align: center; }
|
||||
.insight-note {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
line-height: 1.5;
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
.btn-start-ritual {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
background: var(--amber);
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--void);
|
||||
text-decoration: none;
|
||||
box-shadow: var(--glow-amber);
|
||||
margin-bottom: var(--space-6);
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
.btn-start-ritual:hover { background: var(--amber-light); }
|
||||
.completion-rate {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.rate-bar-bg {
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
background: var(--twilight);
|
||||
border-radius: var(--radius-full);
|
||||
overflow: hidden;
|
||||
margin: 0 var(--space-3);
|
||||
}
|
||||
.rate-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--amber);
|
||||
box-shadow: 0 0 8px rgba(245,158,11,0.4);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<!-- STATUS BAR -->
|
||||
<div class="status-bar">
|
||||
<span class="time">8:52</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>
|
||||
|
||||
<!-- NAV HEADER -->
|
||||
<div class="nav-header">
|
||||
<a class="nav-back" href="44-ritual-templates.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Ritual Streak</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<!-- SCREEN CONTENT -->
|
||||
<div class="screen-content" style="padding-top: 0;">
|
||||
|
||||
<!-- Streak Hero -->
|
||||
<div class="streak-hero">
|
||||
<div class="streak-aura"></div>
|
||||
<div class="streak-number">14</div>
|
||||
<div class="streak-label">14-day streak</div>
|
||||
<div class="streak-started">Started Feb 1, 2026 · Still going</div>
|
||||
</div>
|
||||
|
||||
<!-- Streak Stats -->
|
||||
<div class="streak-stats">
|
||||
<div class="streak-stat">
|
||||
<div class="sval">14</div>
|
||||
<div class="slbl">Current</div>
|
||||
</div>
|
||||
<div class="streak-stat">
|
||||
<div class="sval">14</div>
|
||||
<div class="slbl">Longest</div>
|
||||
</div>
|
||||
<div class="streak-stat">
|
||||
<div class="sval">89%</div>
|
||||
<div class="slbl">Completion</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Completion rate bar -->
|
||||
<div class="completion-rate" style="margin-bottom: var(--space-4);">
|
||||
<span style="font-size:12px; color:var(--dim-light);">89% completion rate</span>
|
||||
<div class="rate-bar-bg" style="max-width: 140px;">
|
||||
<div class="rate-bar-fill" style="width:89%;"></div>
|
||||
</div>
|
||||
<span style="font-size:12px; color:var(--amber-light); font-weight:600;">12 of 14 days</span>
|
||||
</div>
|
||||
|
||||
<!-- February Calendar -->
|
||||
<div class="week-calendar">
|
||||
<div class="calendar-header">
|
||||
<span class="calendar-month">February 2026</span>
|
||||
<div style="display: flex; gap: var(--space-2);">
|
||||
<a href="#" style="color: var(--dim-light); text-decoration: none; font-size: 18px; line-height: 1;">‹</a>
|
||||
<a href="#" style="color: var(--dim-light); text-decoration: none; font-size: 18px; line-height: 1;">›</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Day labels -->
|
||||
<div class="day-grid">
|
||||
<div class="day-label">Mo</div>
|
||||
<div class="day-label">Tu</div>
|
||||
<div class="day-label">We</div>
|
||||
<div class="day-label">Th</div>
|
||||
<div class="day-label">Fr</div>
|
||||
<div class="day-label">Sa</div>
|
||||
<div class="day-label">Su</div>
|
||||
</div>
|
||||
<!-- Week 1: Feb starts on Sunday. Feb 1 = Sun col 7 -->
|
||||
<div class="day-grid" style="margin-top: 4px;">
|
||||
<div class="day-cell empty"></div>
|
||||
<div class="day-cell empty"></div>
|
||||
<div class="day-cell empty"></div>
|
||||
<div class="day-cell empty"></div>
|
||||
<div class="day-cell empty"></div>
|
||||
<div class="day-cell empty"></div>
|
||||
<div class="day-cell done">1</div>
|
||||
</div>
|
||||
<!-- Week 2: Feb 2–8 — missed Feb 4 & 6 in first week per ritual context -->
|
||||
<div class="day-grid" style="margin-top: 4px;">
|
||||
<div class="day-cell done">2</div>
|
||||
<div class="day-cell done">3</div>
|
||||
<div class="day-cell missed">4</div>
|
||||
<div class="day-cell done">5</div>
|
||||
<div class="day-cell missed">6</div>
|
||||
<div class="day-cell done">7</div>
|
||||
<div class="day-cell done">8</div>
|
||||
</div>
|
||||
<!-- Week 3: Feb 9–15 — all done, streak building -->
|
||||
<div class="day-grid" style="margin-top: 4px;">
|
||||
<div class="day-cell done">9</div>
|
||||
<div class="day-cell done">10</div>
|
||||
<div class="day-cell done">11</div>
|
||||
<div class="day-cell done">12</div>
|
||||
<div class="day-cell done">13</div>
|
||||
<div class="day-cell done">14</div>
|
||||
<div class="day-cell done">15</div>
|
||||
</div>
|
||||
<!-- Week 4: Feb 16–22 — current streak, today = 22 -->
|
||||
<div class="day-grid" style="margin-top: 4px;">
|
||||
<div class="day-cell done">16</div>
|
||||
<div class="day-cell done">17</div>
|
||||
<div class="day-cell done">18</div>
|
||||
<div class="day-cell done">19</div>
|
||||
<div class="day-cell done">20</div>
|
||||
<div class="day-cell done">21</div>
|
||||
<div class="day-cell today">22</div>
|
||||
</div>
|
||||
<!-- Week 5: Feb 23–28 — future -->
|
||||
<div class="day-grid" style="margin-top: 4px;">
|
||||
<div class="day-cell future">23</div>
|
||||
<div class="day-cell future">24</div>
|
||||
<div class="day-cell future">25</div>
|
||||
<div class="day-cell future">26</div>
|
||||
<div class="day-cell future">27</div>
|
||||
<div class="day-cell future">28</div>
|
||||
<div class="day-cell empty"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Completion Time Heat Map -->
|
||||
<div class="heat-map">
|
||||
<div class="heat-label">When you practice — last 14 days</div>
|
||||
<!-- Day labels row -->
|
||||
<div class="heat-grid">
|
||||
<div></div>
|
||||
<div class="heat-day-label">Mo</div>
|
||||
<div class="heat-day-label">Tu</div>
|
||||
<div class="heat-day-label">We</div>
|
||||
<div class="heat-day-label">Th</div>
|
||||
<div class="heat-day-label">Fr</div>
|
||||
<div class="heat-day-label">Sa</div>
|
||||
<div class="heat-day-label">Su</div>
|
||||
</div>
|
||||
<!-- 6am row — light activity -->
|
||||
<div class="heat-grid">
|
||||
<div class="heat-time">6am</div>
|
||||
<div class="heat-cell h0"></div>
|
||||
<div class="heat-cell h1"></div>
|
||||
<div class="heat-cell h0"></div>
|
||||
<div class="heat-cell h0"></div>
|
||||
<div class="heat-cell h1"></div>
|
||||
<div class="heat-cell h0"></div>
|
||||
<div class="heat-cell h0"></div>
|
||||
</div>
|
||||
<!-- 8–9am row — peak (spec: most turns 8–9am) -->
|
||||
<div class="heat-grid">
|
||||
<div class="heat-time">8am</div>
|
||||
<div class="heat-cell h4"></div>
|
||||
<div class="heat-cell h4"></div>
|
||||
<div class="heat-cell h3"></div>
|
||||
<div class="heat-cell h3"></div>
|
||||
<div class="heat-cell h4"></div>
|
||||
<div class="heat-cell h2"></div>
|
||||
<div class="heat-cell h3"></div>
|
||||
</div>
|
||||
<!-- 12pm row -->
|
||||
<div class="heat-grid">
|
||||
<div class="heat-time">12pm</div>
|
||||
<div class="heat-cell h1"></div>
|
||||
<div class="heat-cell h0"></div>
|
||||
<div class="heat-cell h1"></div>
|
||||
<div class="heat-cell h2"></div>
|
||||
<div class="heat-cell h0"></div>
|
||||
<div class="heat-cell h1"></div>
|
||||
<div class="heat-cell h1"></div>
|
||||
</div>
|
||||
<!-- 6pm row — secondary peak (spec: 6–8pm) -->
|
||||
<div class="heat-grid">
|
||||
<div class="heat-time">6pm</div>
|
||||
<div class="heat-cell h2"></div>
|
||||
<div class="heat-cell h2"></div>
|
||||
<div class="heat-cell h1"></div>
|
||||
<div class="heat-cell h1"></div>
|
||||
<div class="heat-cell h3"></div>
|
||||
<div class="heat-cell h2"></div>
|
||||
<div class="heat-cell h1"></div>
|
||||
</div>
|
||||
<!-- 9pm -->
|
||||
<div class="heat-grid">
|
||||
<div class="heat-time">9pm</div>
|
||||
<div class="heat-cell h0"></div>
|
||||
<div class="heat-cell h0"></div>
|
||||
<div class="heat-cell h0"></div>
|
||||
<div class="heat-cell h1"></div>
|
||||
<div class="heat-cell h0"></div>
|
||||
<div class="heat-cell h0"></div>
|
||||
<div class="heat-cell h0"></div>
|
||||
</div>
|
||||
<div class="insight-note">Your strongest window is 8–9am on weekdays — that's when your rituals land deepest.</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<a href="44-ritual-templates.html" class="btn-start-ritual">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" style="margin-right:6px;">
|
||||
<path d="M9 2L16 9L9 16L2 9Z" fill="var(--void)" opacity="0.5"/>
|
||||
<path d="M9 5L13 9L9 13L5 9Z" fill="var(--void)" opacity="0.8"/>
|
||||
</svg>
|
||||
Start Today's Ritual
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
391
initial mockups/screens/spectrum/50-spectrum-dashboard.html
Normal file
391
initial mockups/screens/spectrum/50-spectrum-dashboard.html
Normal file
@@ -0,0 +1,391 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Spectrum Dashboard</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.prism-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 3px 10px;
|
||||
border-radius: var(--radius-full);
|
||||
background: linear-gradient(135deg, rgba(139,92,246,0.25), rgba(59,130,246,0.25), rgba(16,185,129,0.25));
|
||||
border: 1px solid rgba(139,92,246,0.4);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.prism-badge-text {
|
||||
background: linear-gradient(135deg, #C4B5FD, #93C5FD, #6EE7B7);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.nav-header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.time-selector {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 12px 0 8px;
|
||||
}
|
||||
.time-chip {
|
||||
flex: 1;
|
||||
height: 32px;
|
||||
border-radius: var(--radius-full);
|
||||
border: 1px solid var(--twilight);
|
||||
background: transparent;
|
||||
color: var(--dim-light);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-family: var(--font-primary);
|
||||
}
|
||||
.time-chip.active {
|
||||
background: rgba(139,92,246,0.15);
|
||||
border-color: var(--amethyst);
|
||||
color: var(--amethyst-light);
|
||||
}
|
||||
.viz-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 14px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.viz-card:hover { border-color: rgba(139,92,246,0.4); }
|
||||
.viz-thumb {
|
||||
width: 64px;
|
||||
height: 48px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--void);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.viz-info { flex: 1; }
|
||||
.viz-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.viz-desc {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.viz-chevron {
|
||||
color: var(--faint-light);
|
||||
}
|
||||
.insight-card {
|
||||
background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(59,130,246,0.05));
|
||||
border: 1px solid rgba(139,92,246,0.2);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 14px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.insight-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--amethyst-light);
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.insight-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.summary-links {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.summary-link {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--twilight);
|
||||
background: var(--deep-glass);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--soft-light);
|
||||
text-decoration: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.summary-link:hover { border-color: rgba(139,92,246,0.4); }
|
||||
.screen-content { padding-bottom: 20px; }
|
||||
.spectrum-aura {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
right: -60px;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(139,92,246,0.07) 0%, rgba(59,130,246,0.04) 40%, transparent 70%);
|
||||
filter: blur(40px);
|
||||
pointer-events: none;
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
}
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="../you/35-you-profile.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Spectrum</span>
|
||||
<span class="nav-action">
|
||||
<div class="prism-badge">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<defs>
|
||||
<linearGradient id="prismIcon" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||||
<stop offset="50%" stop-color="#93C5FD"/>
|
||||
<stop offset="100%" stop-color="#6EE7B7"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M5 1L9 5L5 9L1 5Z" fill="url(#prismIcon)" opacity="0.9"/>
|
||||
</svg>
|
||||
<span class="prism-badge-text">Prism</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="spectrum-aura"></div>
|
||||
<div class="screen-content">
|
||||
<!-- Time range selector -->
|
||||
<div class="time-selector">
|
||||
<button class="time-chip active" onclick="selectTime(this)">Week</button>
|
||||
<button class="time-chip" onclick="selectTime(this)">Month</button>
|
||||
<button class="time-chip" onclick="selectTime(this)">All Time</button>
|
||||
</div>
|
||||
|
||||
<!-- Visualization cards -->
|
||||
<a class="viz-card" href="51-spectrum-river.html">
|
||||
<div class="viz-thumb">
|
||||
<!-- River thumbnail -->
|
||||
<svg width="64" height="48" viewBox="0 0 64 48">
|
||||
<defs>
|
||||
<linearGradient id="riverGrad" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.8"/>
|
||||
<stop offset="33%" stop-color="#3B82F6" stop-opacity="0.7"/>
|
||||
<stop offset="66%" stop-color="#10B981" stop-opacity="0.7"/>
|
||||
<stop offset="100%" stop-color="#F59E0B" stop-opacity="0.8"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M0 20 C10 14 20 28 30 22 C40 16 50 26 64 20" stroke="url(#riverGrad)" stroke-width="6" fill="none" stroke-linecap="round" opacity="0.9"/>
|
||||
<path d="M0 26 C10 20 20 34 30 28 C40 22 50 32 64 26" stroke="url(#riverGrad)" stroke-width="3" fill="none" stroke-linecap="round" opacity="0.5"/>
|
||||
<circle cx="12" cy="17" r="2" fill="#C4B5FD"/>
|
||||
<circle cx="32" cy="22" r="2" fill="#6EE7B7"/>
|
||||
<circle cx="52" cy="21" r="2" fill="#FDE68A"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="viz-info">
|
||||
<div class="viz-title">The River</div>
|
||||
<div class="viz-desc">Emotional patterns over time</div>
|
||||
</div>
|
||||
<div class="viz-chevron">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="viz-card" href="52-spectrum-glass.html">
|
||||
<div class="viz-thumb">
|
||||
<!-- Faceted gem thumbnail — prismatic faces -->
|
||||
<svg width="64" height="48" viewBox="0 0 64 48">
|
||||
<defs>
|
||||
<linearGradient id="glassAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A" stop-opacity="0.8"/>
|
||||
<stop offset="100%" stop-color="#D97706" stop-opacity="0.3"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Outer hex guide -->
|
||||
<polygon points="32,4 54,16 54,32 32,44 10,32 10,16" stroke="#1C2240" stroke-width="0.5" fill="none" opacity="0.4"/>
|
||||
<!-- Inner guide -->
|
||||
<polygon points="32,14 44,21 44,28 32,35 20,28 20,21" stroke="#1C2240" stroke-width="0.5" fill="none" opacity="0.3"/>
|
||||
<!-- Gem faces with distinct jewel tones -->
|
||||
<polygon points="32,7 42,18 32,24" fill="#8B5CF6" opacity="0.15"/>
|
||||
<polygon points="42,18 50,30 32,24" fill="#3B82F6" opacity="0.15"/>
|
||||
<polygon points="50,30 42,41 32,24" fill="#10B981" opacity="0.15"/>
|
||||
<polygon points="42,41 22,41 32,24" fill="#F59E0B" opacity="0.15"/>
|
||||
<polygon points="22,41 14,30 32,24" fill="#EC4899" opacity="0.12"/>
|
||||
<polygon points="14,30 22,18 32,24" fill="#6366F1" opacity="0.12"/>
|
||||
<!-- Main faceted outline -->
|
||||
<polygon points="32,7 50,18 50,30 32,43 14,30 14,18" fill="url(#glassAmber)" fill-opacity="0.06" stroke="#FDE68A" stroke-width="0.8" opacity="0.7"/>
|
||||
<!-- Center diamond -->
|
||||
<path d="M32 20L35 24L32 28L29 24Z" fill="#F59E0B" opacity="0.4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="viz-info">
|
||||
<div class="viz-title">Your Glass</div>
|
||||
<div class="viz-desc">Feature balance radar</div>
|
||||
</div>
|
||||
<div class="viz-chevron">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="viz-card" href="53-spectrum-impact.html">
|
||||
<div class="viz-thumb">
|
||||
<!-- Bar chart thumbnail -->
|
||||
<svg width="64" height="48" viewBox="0 0 64 48">
|
||||
<rect x="6" y="28" width="7" height="14" rx="2" fill="#EF4444" opacity="0.7"/>
|
||||
<rect x="15" y="18" width="7" height="24" rx="2" fill="#10B981" opacity="0.7"/>
|
||||
<rect x="26" y="22" width="7" height="20" rx="2" fill="#EF4444" opacity="0.7"/>
|
||||
<rect x="35" y="12" width="7" height="30" rx="2" fill="#10B981" opacity="0.7"/>
|
||||
<rect x="46" y="26" width="7" height="16" rx="2" fill="#EF4444" opacity="0.7"/>
|
||||
<rect x="55" y="14" width="7" height="28" rx="2" fill="#10B981" opacity="0.7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="viz-info">
|
||||
<div class="viz-title">Turn Impact</div>
|
||||
<div class="viz-desc">Before & after mood shifts</div>
|
||||
</div>
|
||||
<div class="viz-chevron">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="viz-card" href="54-spectrum-rhythm.html">
|
||||
<div class="viz-thumb">
|
||||
<!-- Bubble chart thumbnail -->
|
||||
<svg width="64" height="48" viewBox="0 0 64 48">
|
||||
<circle cx="14" cy="36" r="5" fill="#8B5CF6" opacity="0.6"/>
|
||||
<circle cx="28" cy="20" r="8" fill="#8B5CF6" opacity="0.8"/>
|
||||
<circle cx="42" cy="30" r="4" fill="#3B82F6" opacity="0.6"/>
|
||||
<circle cx="54" cy="16" r="6" fill="#10B981" opacity="0.7"/>
|
||||
<circle cx="20" cy="10" r="3" fill="#F59E0B" opacity="0.6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="viz-info">
|
||||
<div class="viz-title">Rhythm Detection</div>
|
||||
<div class="viz-desc">Your activity patterns</div>
|
||||
</div>
|
||||
<div class="viz-chevron">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="viz-card" href="55-spectrum-growth.html">
|
||||
<div class="viz-thumb">
|
||||
<!-- Line chart thumbnail -->
|
||||
<svg width="64" height="48" viewBox="0 0 64 48">
|
||||
<defs>
|
||||
<linearGradient id="growthArea" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#10B981" stop-opacity="0.3"/>
|
||||
<stop offset="100%" stop-color="#10B981" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M4 38 L18 30 L30 24 L42 16 L56 8" stroke="#10B981" stroke-width="2" fill="none" stroke-linecap="round"/>
|
||||
<path d="M4 38 L18 30 L30 24 L42 16 L56 8 L56 44 L4 44Z" fill="url(#growthArea)"/>
|
||||
<circle cx="30" cy="24" r="3" fill="#10B981"/>
|
||||
<circle cx="56" cy="8" r="3" fill="#10B981"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="viz-info">
|
||||
<div class="viz-title">Growth Trajectory</div>
|
||||
<div class="viz-desc">Wellness score over time</div>
|
||||
</div>
|
||||
<div class="viz-chevron">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- AI Insight Card -->
|
||||
<div class="insight-card">
|
||||
<div class="insight-label">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12">
|
||||
<path d="M6 1L11 6L6 11L1 6Z" fill="#A78BFA"/>
|
||||
</svg>
|
||||
This Week's Pattern
|
||||
</div>
|
||||
<div class="insight-text">Catastrophizing is down this week — your 14-day ritual streak is doing real work. Morning turns (8–9am) show your highest reframe quality. Mind Reading remains steady; worth watching.</div>
|
||||
</div>
|
||||
|
||||
<!-- Weekly / Monthly summary links -->
|
||||
<div class="summary-links">
|
||||
<a class="summary-link" href="56-spectrum-weekly.html">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<rect x="1" y="3" width="12" height="10" rx="2" stroke="#94A3B8" stroke-width="1.2"/>
|
||||
<path d="M4 1V4M10 1V4" stroke="#94A3B8" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
Weekly Summary
|
||||
</a>
|
||||
<a class="summary-link" href="57-spectrum-monthly.html">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<rect x="1" y="3" width="12" height="10" rx="2" stroke="#94A3B8" stroke-width="1.2"/>
|
||||
<path d="M4 1V4M10 1V4" stroke="#94A3B8" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<path d="M3 8H11M3 10.5H8" stroke="#94A3B8" stroke-width="1" stroke-linecap="round"/>
|
||||
</svg>
|
||||
Monthly Report
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function selectTime(el) {
|
||||
document.querySelectorAll('.time-chip').forEach(c => c.classList.remove('active'));
|
||||
el.classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
314
initial mockups/screens/spectrum/51-spectrum-river.html
Normal file
314
initial mockups/screens/spectrum/51-spectrum-river.html
Normal file
@@ -0,0 +1,314 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — The River</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.river-container {
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
}
|
||||
.date-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 8px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.date-label {
|
||||
font-size: 10px;
|
||||
color: var(--faint-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
.river-svg-wrap {
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
background: var(--void);
|
||||
border: 1px solid var(--twilight);
|
||||
}
|
||||
.data-points-section {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.data-point-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid rgba(28,34,64,0.5);
|
||||
}
|
||||
.data-point-row:last-child { border-bottom: none; }
|
||||
.dp-date {
|
||||
font-size: 11px;
|
||||
color: var(--faint-light);
|
||||
width: 52px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.dp-diamond { flex-shrink: 0; }
|
||||
.dp-text {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.4;
|
||||
}
|
||||
.dp-tag {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: var(--faint-light);
|
||||
background: rgba(28,34,64,0.8);
|
||||
padding: 2px 7px;
|
||||
border-radius: var(--radius-full);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.dp-mood {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
min-width: 36px;
|
||||
text-align: right;
|
||||
}
|
||||
.insight-panel {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 14px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.insight-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--amethyst-light);
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.insight-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.55;
|
||||
}
|
||||
.screen-content { padding-bottom: 20px; }
|
||||
.mood-dip-note {
|
||||
font-size: 11px;
|
||||
color: var(--rose-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
<div class="status-bar">
|
||||
<span class="time">8:52</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="nav-header">
|
||||
<a class="nav-back" href="50-spectrum-dashboard.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">The River</span>
|
||||
<span class="nav-action" style="font-size:11px; color:var(--faint-light);">Feb 1–22</span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content no-pad">
|
||||
<div class="river-container">
|
||||
<!-- Date labels — 3 weeks -->
|
||||
<div class="date-labels">
|
||||
<span class="date-label">Feb 1</span>
|
||||
<span class="date-label">Feb 8</span>
|
||||
<span class="date-label">Feb 15</span>
|
||||
<span class="date-label">Feb 22</span>
|
||||
</div>
|
||||
|
||||
<!-- River SVG — mood trend over 3 weeks with dip around Feb 15 -->
|
||||
<div class="river-svg-wrap">
|
||||
<svg width="358" height="160" viewBox="0 0 358 160" style="display:block;">
|
||||
<defs>
|
||||
<linearGradient id="s51-riverGrad" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.7"/>
|
||||
<stop offset="35%" stop-color="#3B82F6" stop-opacity="0.65"/>
|
||||
<stop offset="55%" stop-color="#EC4899" stop-opacity="0.6"/>
|
||||
<stop offset="70%" stop-color="#EF4444" stop-opacity="0.55"/>
|
||||
<stop offset="85%" stop-color="#3B82F6" stop-opacity="0.65"/>
|
||||
<stop offset="100%" stop-color="#10B981" stop-opacity="0.7"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s51-riverGradFill" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.15"/>
|
||||
<stop offset="35%" stop-color="#3B82F6" stop-opacity="0.10"/>
|
||||
<stop offset="55%" stop-color="#EC4899" stop-opacity="0.08"/>
|
||||
<stop offset="70%" stop-color="#EF4444" stop-opacity="0.10"/>
|
||||
<stop offset="100%" stop-color="#10B981" stop-opacity="0.14"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s51-grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/><stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s51-grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s51-grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s51-grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s51-grRose" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBCFE8"/><stop offset="100%" stop-color="#DB2777"/>
|
||||
</linearGradient>
|
||||
<filter id="s51-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>
|
||||
|
||||
<rect width="358" height="160" fill="#0A0E1A"/>
|
||||
|
||||
<!-- Grid lines -->
|
||||
<line x1="24" y1="30" x2="358" y2="30" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="3,6"/>
|
||||
<line x1="24" y1="75" x2="358" y2="75" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="3,6"/>
|
||||
<line x1="24" y1="120" x2="358" y2="120" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="3,6"/>
|
||||
|
||||
<!-- Y-axis labels -->
|
||||
<text x="20" y="33" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">High</text>
|
||||
<text x="20" y="78" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">Mid</text>
|
||||
<text x="20" y="123" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">Low</text>
|
||||
|
||||
<!-- Vertical week dividers -->
|
||||
<line x1="109" y1="20" x2="109" y2="135" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2,6"/>
|
||||
<line x1="218" y1="20" x2="218" y2="135" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2,6"/>
|
||||
|
||||
<!-- River path: gradual rise W1, slight dip around Feb 15, recovery to peak Feb 22 -->
|
||||
<g transform="translate(189, 75)" filter="url(#s51-glowSm)">
|
||||
<!-- Upper bound — rising then dip then surge -->
|
||||
<path d="M -165,-5 C -140,-12 -110,-18 -80,-22 C -50,-26 -30,-20 0,5 C 20,22 40,18 80,0 C 110,-12 140,-22 165,-28"
|
||||
fill="none" stroke="url(#s51-riverGrad)" stroke-width="2" opacity="0.85"/>
|
||||
<!-- Lower bound -->
|
||||
<path d="M -165,15 C -140,10 -110,5 -80,2 C -50,0 -30,8 0,28 C 20,40 40,36 80,20 C 110,8 140,-2 165,-10"
|
||||
fill="none" stroke="url(#s51-riverGrad)" stroke-width="1" opacity="0.45"/>
|
||||
<!-- Fill between bands -->
|
||||
<path d="M -165,-5 C -140,-12 -110,-18 -80,-22 C -50,-26 -30,-20 0,5 C 20,22 40,18 80,0 C 110,-12 140,-22 165,-28
|
||||
L 165,-10 C 140,-2 110,8 80,20 C 40,36 20,40 0,28 C -30,8 -50,0 -80,2 C -110,5 -140,10 -165,15 Z"
|
||||
fill="url(#s51-riverGradFill)" opacity="0.7"/>
|
||||
|
||||
<!-- Data point fragments — key moments in Alex's story -->
|
||||
<!-- Feb 1: start, amethyst, mid-mood -->
|
||||
<path d="M -157,3 L -154,6 L -157,9 L -160,6 Z" fill="url(#s51-grAmethyst)" opacity="0.7"/>
|
||||
<path d="M -157,3 L -154,6 L -157,6 Z" fill="#fff" opacity="0.15"/>
|
||||
|
||||
<!-- Feb 5: gains momentum, sapphire -->
|
||||
<path d="M -109,-15 L -106,-12 L -109,-9 L -112,-12 Z" fill="url(#s51-grSapphire)" opacity="0.7"/>
|
||||
<path d="M -109,-15 L -106,-12 L -109,-12 Z" fill="#fff" opacity="0.15"/>
|
||||
|
||||
<!-- Feb 10: strong week, emerald -->
|
||||
<path d="M -52,-20 L -49,-17 L -52,-14 L -55,-17 Z" fill="url(#s51-grEmerald)" opacity="0.75"/>
|
||||
<path d="M -52,-20 L -49,-17 L -52,-17 Z" fill="#fff" opacity="0.15"/>
|
||||
|
||||
<!-- Feb 15: work stress dip, rose -->
|
||||
<path d="M 0,14 L 3,17 L 0,20 L -3,17 Z" fill="url(#s51-grRose)" opacity="0.8"/>
|
||||
<path d="M 0,14 L 3,17 L 0,17 Z" fill="#fff" opacity="0.15"/>
|
||||
|
||||
<!-- Feb 18: recovery, amber -->
|
||||
<path d="M 52,8 L 55,11 L 52,14 L 49,11 Z" fill="url(#s51-grAmber)" opacity="0.7"/>
|
||||
<path d="M 52,8 L 55,11 L 52,11 Z" fill="#fff" opacity="0.15"/>
|
||||
|
||||
<!-- Feb 22: today, peak, emerald pulse -->
|
||||
<path d="M 157,-26 L 160,-23 L 157,-20 L 154,-23 Z" fill="url(#s51-grEmerald)" opacity="0.9">
|
||||
<animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 157,-26 L 160,-23 L 157,-23 Z" fill="#fff" opacity="0.2"/>
|
||||
</g>
|
||||
|
||||
<!-- Dip annotation -->
|
||||
<text x="178" y="18" text-anchor="middle" fill="#F9A8D4" font-size="7" font-family="Inter" opacity="0.7">Work stress</text>
|
||||
<line x1="178" y1="20" x2="178" y2="105" stroke="#DB2777" stroke-width="0.5" stroke-dasharray="2,4" opacity="0.3"/>
|
||||
|
||||
<!-- X axis labels -->
|
||||
<text x="44" y="148" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Feb 1</text>
|
||||
<text x="109" y="148" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Feb 8</text>
|
||||
<text x="178" y="148" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Feb 15</text>
|
||||
<text x="240" y="148" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Feb 18</text>
|
||||
<text x="320" y="148" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Feb 22</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Key moments trail -->
|
||||
<div class="data-points-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">Key Moments</span>
|
||||
</div>
|
||||
|
||||
<div class="data-point-row">
|
||||
<span class="dp-date">Feb 5</span>
|
||||
<svg class="dp-diamond" width="14" height="14" viewBox="0 0 14 14">
|
||||
<defs><linearGradient id="dpS" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#2563EB"/></linearGradient></defs>
|
||||
<path d="M7 1L13 7L7 13L1 7Z" fill="url(#dpS)"/>
|
||||
</svg>
|
||||
<span class="dp-text">Week 1 momentum builds — first 5-day run</span>
|
||||
<span class="dp-tag">Catastrophizing</span>
|
||||
<span class="dp-mood" style="color: var(--sapphire-light);">+19%</span>
|
||||
</div>
|
||||
|
||||
<div class="data-point-row">
|
||||
<span class="dp-date">Feb 10</span>
|
||||
<svg class="dp-diamond" width="14" height="14" viewBox="0 0 14 14">
|
||||
<defs><linearGradient id="dpE" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/></linearGradient></defs>
|
||||
<path d="M7 1L13 7L7 13L1 7Z" fill="url(#dpE)"/>
|
||||
</svg>
|
||||
<span class="dp-text">Best reframe of the month on a work fear</span>
|
||||
<span class="dp-tag">Should Stmts</span>
|
||||
<span class="dp-mood" style="color: var(--emerald-light);">+34%</span>
|
||||
</div>
|
||||
|
||||
<div class="data-point-row">
|
||||
<span class="dp-date">Feb 15</span>
|
||||
<svg class="dp-diamond" width="14" height="14" viewBox="0 0 14 14">
|
||||
<defs><linearGradient id="dpR" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#FBCFE8"/><stop offset="100%" stop-color="#DB2777"/></linearGradient></defs>
|
||||
<path d="M7 1L13 7L7 13L1 7Z" fill="url(#dpR)"/>
|
||||
</svg>
|
||||
<span class="dp-text">Stressful work week — but ritual held steady</span>
|
||||
<span class="dp-tag">Mind Reading</span>
|
||||
<span class="dp-mood" style="color: var(--rose-light);">−8%</span>
|
||||
</div>
|
||||
|
||||
<div class="data-point-row">
|
||||
<span class="dp-date">Feb 22</span>
|
||||
<svg class="dp-diamond" width="14" height="14" viewBox="0 0 14 14">
|
||||
<defs><linearGradient id="dpA" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/></linearGradient></defs>
|
||||
<path d="M7 1L13 7L7 13L1 7Z" fill="url(#dpA)"/>
|
||||
</svg>
|
||||
<span class="dp-text">Day 14 — highest wellbeing score yet</span>
|
||||
<span class="dp-tag">Ritual</span>
|
||||
<span class="dp-mood" style="color: var(--emerald-light);">+41%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI Insight -->
|
||||
<div class="insight-panel">
|
||||
<div class="insight-label">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12">
|
||||
<path d="M6 1L11 6L6 11L1 6Z" fill="#A78BFA"/>
|
||||
</svg>
|
||||
River Reading
|
||||
</div>
|
||||
<div class="insight-text">Your emotional river tells a clear story: gradual rise in weeks 1–2, a dip around Feb 15 (the work-stress week), then a strong recovery. The dip didn't break your streak — you kept practicing through it. That's the point.</div>
|
||||
<div class="mood-dip-note">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10"><path d="M5 1L9 5L5 9L1 5Z" fill="#F9A8D4" opacity="0.8"/></svg>
|
||||
Feb 15 dip is normal — stress week. You bounced back in 2 days.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
300
initial mockups/screens/spectrum/52-spectrum-glass.html
Normal file
300
initial mockups/screens/spectrum/52-spectrum-glass.html
Normal file
@@ -0,0 +1,300 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Your Glass</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.glass-container {
|
||||
padding: 16px;
|
||||
}
|
||||
.radar-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: var(--void);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 20px 0;
|
||||
}
|
||||
.legend {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.legend-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.legend-label {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
flex: 1;
|
||||
}
|
||||
.legend-value {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.legend-bar-wrap {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
background: var(--twilight);
|
||||
border-radius: var(--radius-full);
|
||||
overflow: hidden;
|
||||
}
|
||||
.legend-bar {
|
||||
height: 100%;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
.balance-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 14px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.balance-header {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.insight-panel {
|
||||
background: linear-gradient(135deg, rgba(139,92,246,0.06), rgba(59,130,246,0.04));
|
||||
border: 1px solid rgba(139,92,246,0.2);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 14px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.insight-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--amethyst-light);
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.insight-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.55;
|
||||
}
|
||||
.screen-content { padding-bottom: 20px; }
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="50-spectrum-dashboard.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Your Glass</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content no-pad">
|
||||
<div class="glass-container">
|
||||
|
||||
<!-- Faceted Gem / Radar Chart — Your Glass -->
|
||||
<div class="radar-wrap">
|
||||
<svg width="280" height="240" viewBox="0 0 280 240">
|
||||
<defs>
|
||||
<!-- Faceted gem face gradients — prismatic per face -->
|
||||
<linearGradient id="s52-grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s52-grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/><stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s52-grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s52-grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s52-grRose" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBCFE8"/><stop offset="100%" stop-color="#DB2777"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s52-grIndigo" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#A5B4FC"/><stop offset="100%" stop-color="#4338CA"/>
|
||||
</linearGradient>
|
||||
<filter id="s52-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="s52-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="s52-glow" x="-100%" y="-100%" width="300%" height="300%">
|
||||
<feGaussianBlur stdDeviation="8" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Central glow aura -->
|
||||
<ellipse cx="140" cy="115" rx="60" ry="55" fill="#F59E0B" opacity="0.04" filter="url(#s52-glow)"/>
|
||||
|
||||
<!-- Radar chart -->
|
||||
<g transform="translate(140, 115)">
|
||||
<!-- Axis guides -->
|
||||
<g opacity="0.15">
|
||||
<line x1="0" y1="0" x2="0" y2="-70" stroke="#475569" stroke-width="0.5"/>
|
||||
<line x1="0" y1="0" x2="61" y2="-35" stroke="#475569" stroke-width="0.5"/>
|
||||
<line x1="0" y1="0" x2="61" y2="35" stroke="#475569" stroke-width="0.5"/>
|
||||
<line x1="0" y1="0" x2="0" y2="70" stroke="#475569" stroke-width="0.5"/>
|
||||
<line x1="0" y1="0" x2="-61" y2="35" stroke="#475569" stroke-width="0.5"/>
|
||||
<line x1="0" y1="0" x2="-61" y2="-35" stroke="#475569" stroke-width="0.5"/>
|
||||
<path d="M 0,-35 L 30,-17 L 30,17 L 0,35 L -30,17 L -30,-17 Z" fill="none" stroke="#475569" stroke-width="0.3"/>
|
||||
<path d="M 0,-70 L 61,-35 L 61,35 L 0,70 L -61,35 L -61,-35 Z" fill="none" stroke="#475569" stroke-width="0.3"/>
|
||||
</g>
|
||||
|
||||
<!-- Faceted gem faces — each face a different jewel tone -->
|
||||
<g filter="url(#s52-glowMd)">
|
||||
<!-- Top face: amber (Catastrophizing) -->
|
||||
<path d="M 0,0 L -3,-52 L 3,-52 Z" fill="#FDE68A" fill-opacity="0.06"/>
|
||||
<path d="M 0,-55 L 40,-20 L 0,0 Z" fill="#F59E0B" fill-opacity="0.07"/>
|
||||
<!-- Upper-right face: amethyst (Black-White) -->
|
||||
<path d="M 0,0 L 40,-20 L 50,25 Z" fill="#8B5CF6" fill-opacity="0.06"/>
|
||||
<!-- Lower-right face: sapphire (Mind Reading) -->
|
||||
<path d="M 0,0 L 50,25 L 10,50 Z" fill="#3B82F6" fill-opacity="0.06"/>
|
||||
<!-- Bottom face: emerald (Fortune Telling) -->
|
||||
<path d="M 0,0 L 10,50 L -45,30 Z" fill="#10B981" fill-opacity="0.06"/>
|
||||
<!-- Left face: rose (Personalization) -->
|
||||
<path d="M 0,0 L -45,30 L -35,-25 Z" fill="#EC4899" fill-opacity="0.06"/>
|
||||
<!-- Upper-left face: indigo (Should Stmts) -->
|
||||
<path d="M 0,0 L -35,-25 L 0,-55 Z" fill="#6366F1" fill-opacity="0.06"/>
|
||||
|
||||
<!-- Main outline -->
|
||||
<path d="M 0,-55 L 40,-20 L 50,25 L 10,50 L -45,30 L -35,-25 Z"
|
||||
fill="none" stroke="#F59E0B" stroke-width="1.2" opacity="0.5"/>
|
||||
|
||||
<!-- Vertex diamonds — each vertex gets its facet color -->
|
||||
<path d="M 0,-55 L 3,-52 L 0,-49 L -3,-52 Z" fill="url(#s52-grAmber)" opacity="0.9" filter="url(#s52-glowSm)"/>
|
||||
<path d="M 0,-55 L 3,-52 L 0,-52 Z" fill="#fff" opacity="0.2"/>
|
||||
<path d="M 40,-20 L 43,-17 L 40,-14 L 37,-17 Z" fill="url(#s52-grAmethyst)" opacity="0.8" filter="url(#s52-glowSm)"/>
|
||||
<path d="M 40,-20 L 43,-17 L 40,-17 Z" fill="#fff" opacity="0.2"/>
|
||||
<path d="M 50,25 L 53,28 L 50,31 L 47,28 Z" fill="url(#s52-grSapphire)" opacity="0.8" filter="url(#s52-glowSm)"/>
|
||||
<path d="M 50,25 L 53,28 L 50,28 Z" fill="#fff" opacity="0.2"/>
|
||||
<path d="M 10,50 L 13,53 L 10,56 L 7,53 Z" fill="url(#s52-grEmerald)" opacity="0.7" filter="url(#s52-glowSm)"/>
|
||||
<path d="M 10,50 L 13,53 L 10,53 Z" fill="#fff" opacity="0.2"/>
|
||||
<path d="M -45,30 L -42,33 L -45,36 L -48,33 Z" fill="url(#s52-grRose)" opacity="0.8" filter="url(#s52-glowSm)"/>
|
||||
<path d="M -45,30 L -42,33 L -45,33 Z" fill="#fff" opacity="0.2"/>
|
||||
<path d="M -35,-25 L -32,-22 L -35,-19 L -38,-22 Z" fill="url(#s52-grIndigo)" opacity="0.8" filter="url(#s52-glowSm)"/>
|
||||
<path d="M -35,-25 L -32,-22 L -35,-22 Z" fill="#fff" opacity="0.2"/>
|
||||
|
||||
<!-- Central core diamond -->
|
||||
<path d="M 0,-6 L 5,0 L 0,6 L -5,0 Z" fill="#F59E0B" opacity="0.3"/>
|
||||
</g>
|
||||
|
||||
<!-- Axis labels — colored per facet -->
|
||||
<text x="0" y="-78" text-anchor="middle" font-size="9" fill="#FDE68A" font-family="Inter" font-weight="500">Catastrophizing</text>
|
||||
<text x="76" y="-20" text-anchor="start" font-size="9" fill="#C4B5FD" font-family="Inter" font-weight="500">Black-White</text>
|
||||
<text x="76" y="30" text-anchor="start" font-size="9" fill="#93C5FD" font-family="Inter" font-weight="500">Mind Reading</text>
|
||||
<text x="0" y="76" text-anchor="middle" font-size="9" fill="#6EE7B7" font-family="Inter" font-weight="500">Fortune Telling</text>
|
||||
<text x="-76" y="30" text-anchor="end" font-size="9" fill="#F9A8D4" font-family="Inter" font-weight="500">Personalization</text>
|
||||
<text x="-76" y="-20" text-anchor="end" font-size="9" fill="#A5B4FC" font-family="Inter" font-weight="500">Should Stmts</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Fragment pattern balance — maps to Alex's canonical data -->
|
||||
<div class="balance-card">
|
||||
<div class="balance-header">Fragment Patterns — 47 Turns</div>
|
||||
<div class="legend">
|
||||
<div class="legend-item">
|
||||
<div class="legend-dot" style="background: var(--amber);"></div>
|
||||
<div class="legend-label">Catastrophizing</div>
|
||||
<div class="legend-bar-wrap">
|
||||
<div class="legend-bar" style="width:100%; background: linear-gradient(90deg, var(--amber), var(--amber-light));"></div>
|
||||
</div>
|
||||
<div class="legend-value" style="color: var(--amber-light);">7x</div>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-dot" style="background: var(--sapphire);"></div>
|
||||
<div class="legend-label">Mind Reading</div>
|
||||
<div class="legend-bar-wrap">
|
||||
<div class="legend-bar" style="width:57%; background: var(--sapphire);"></div>
|
||||
</div>
|
||||
<div class="legend-value" style="color: var(--sapphire-light);">4x</div>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-dot" style="background: var(--amethyst);"></div>
|
||||
<div class="legend-label">Should Statements</div>
|
||||
<div class="legend-bar-wrap">
|
||||
<div class="legend-bar" style="width:43%; background: var(--amethyst);"></div>
|
||||
</div>
|
||||
<div class="legend-value" style="color: var(--amethyst-light);">3x</div>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-dot" style="background: var(--emerald);"></div>
|
||||
<div class="legend-label">Overgeneralization</div>
|
||||
<div class="legend-bar-wrap">
|
||||
<div class="legend-bar" style="width:28%; background: var(--emerald);"></div>
|
||||
</div>
|
||||
<div class="legend-value" style="color: var(--emerald-light);">2x</div>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-dot" style="background: var(--rose);"></div>
|
||||
<div class="legend-label">Personalization</div>
|
||||
<div class="legend-bar-wrap">
|
||||
<div class="legend-bar" style="width:28%; background: var(--rose);"></div>
|
||||
</div>
|
||||
<div class="legend-value" style="color: var(--rose-light);">2x</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI Insight -->
|
||||
<div class="insight-panel">
|
||||
<div class="insight-label">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12">
|
||||
<path d="M6 1L11 6L6 11L1 6Z" fill="#A78BFA"/>
|
||||
</svg>
|
||||
Glass Reading
|
||||
</div>
|
||||
<div class="insight-text">Catastrophizing is your dominant facet — 7 of your 47 turns. The good news: it's been declining each week. Mind Reading holds steady at 4. Your glass is gradually becoming more balanced as the ritual work lands.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
378
initial mockups/screens/spectrum/53-spectrum-impact.html
Normal file
378
initial mockups/screens/spectrum/53-spectrum-impact.html
Normal file
@@ -0,0 +1,378 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Turn Impact</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.impact-container {
|
||||
padding: 16px;
|
||||
}
|
||||
.stats-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.stat-card {
|
||||
flex: 1;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.stat-val {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.stat-lbl {
|
||||
font-size: 11px;
|
||||
color: var(--dim-light);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.chart-section {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.chart-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
.chart-legend {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 11px;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.legend-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.bar-chart-wrap {
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.impact-row {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 12px 14px;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.impact-thought {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.impact-thought-text {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.impact-date {
|
||||
font-size: 10px;
|
||||
color: var(--faint-light);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.impact-bars {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
width: 100px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.impact-bar-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.impact-bar-bg {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
background: var(--twilight);
|
||||
border-radius: var(--radius-full);
|
||||
overflow: hidden;
|
||||
}
|
||||
.impact-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
.impact-delta {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--emerald-light);
|
||||
width: 32px;
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.insight-panel {
|
||||
background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(239,68,68,0.04));
|
||||
border: 1px solid rgba(16,185,129,0.2);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 14px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.insight-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--emerald-light);
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.insight-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.55;
|
||||
}
|
||||
.screen-content { padding-bottom: 20px; }
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="50-spectrum-dashboard.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Turn Impact</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content no-pad">
|
||||
<div class="impact-container">
|
||||
<!-- Stats row — aligned to canonical: 47 turns, Week 3: 14 turns -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-val" style="color: var(--emerald-light);">+27%</div>
|
||||
<div class="stat-lbl">Avg. Mood Lift</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-val" style="color: var(--pure-light);">47</div>
|
||||
<div class="stat-lbl">Total Turns</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-val" style="color: var(--amethyst-light);">89%</div>
|
||||
<div class="stat-lbl">Effectiveness</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bar chart overview -->
|
||||
<div class="chart-section">
|
||||
<div class="chart-header">
|
||||
<span class="chart-title">Before vs. After</span>
|
||||
<div class="chart-legend">
|
||||
<div class="legend-item">
|
||||
<div class="legend-dot" style="background: var(--ruby); opacity: 0.7;"></div>
|
||||
Before
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-dot" style="background: var(--emerald);"></div>
|
||||
After
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bar chart — extracted from spectrum-visualizations.svg "TURN IMPACT" section -->
|
||||
<div class="bar-chart-wrap">
|
||||
<svg width="326" height="130" viewBox="0 0 326 130">
|
||||
<defs>
|
||||
<linearGradient id="s53-grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<filter id="s53-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>
|
||||
|
||||
<!-- Y axis + X axis baselines -->
|
||||
<line x1="28" y1="0" x2="28" y2="100" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<line x1="28" y1="100" x2="326" y2="100" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Grid lines -->
|
||||
<line x1="28" y1="10" x2="326" y2="10" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="3,4"/>
|
||||
<line x1="28" y1="36" x2="326" y2="36" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="3,4"/>
|
||||
<line x1="28" y1="62" x2="326" y2="62" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="3,4"/>
|
||||
|
||||
<!-- Y labels -->
|
||||
<text x="24" y="14" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">10</text>
|
||||
<text x="24" y="40" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">7</text>
|
||||
<text x="24" y="66" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">5</text>
|
||||
|
||||
<!-- Bar pairs — exact proportions from spectrum-visualizations.svg Turn Impact section -->
|
||||
<!-- Adapted: center offset 163, 3 pairs spread across 296px width -->
|
||||
<g filter="url(#s53-glowSm)">
|
||||
<!-- Pair 1: Distress — before: -40 tall (40%), after: -60 tall (60%) -->
|
||||
<rect x="50" y="60" width="14" height="40" rx="2" fill="#EF4444" opacity="0.4"/>
|
||||
<rect x="66" y="40" width="14" height="60" rx="2" fill="url(#s53-grEmerald)" opacity="0.6"/>
|
||||
<text x="65" y="116" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Distress</text>
|
||||
|
||||
<!-- Pair 2: Clarity — before: -25 tall, after: -55 tall -->
|
||||
<rect x="130" y="75" width="14" height="25" rx="2" fill="#EF4444" opacity="0.4"/>
|
||||
<rect x="146" y="45" width="14" height="55" rx="2" fill="url(#s53-grEmerald)" opacity="0.6"/>
|
||||
<text x="145" y="116" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Clarity</text>
|
||||
|
||||
<!-- Pair 3: Hope — before: -20 tall, after: -50 tall -->
|
||||
<rect x="210" y="80" width="14" height="20" rx="2" fill="#EF4444" opacity="0.4"/>
|
||||
<rect x="226" y="50" width="14" height="50" rx="2" fill="url(#s53-grEmerald)" opacity="0.6"/>
|
||||
<text x="225" y="116" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Hope</text>
|
||||
</g>
|
||||
|
||||
<!-- Legend -->
|
||||
<rect x="50" y="122" width="8" height="5" rx="1" fill="#EF4444" opacity="0.4"/>
|
||||
<text x="62" y="127" font-size="8" fill="#94A3B8" font-family="Inter">Before</text>
|
||||
<rect x="110" y="122" width="8" height="5" rx="1" fill="#10B981" opacity="0.6"/>
|
||||
<text x="122" y="127" font-size="8" fill="#94A3B8" font-family="Inter">After</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Individual Turn impact rows -->
|
||||
<div class="section-header">
|
||||
<span class="section-title">Individual Turns</span>
|
||||
</div>
|
||||
|
||||
<!-- Individual turns — work/career context = 72% of Alex's turns -->
|
||||
<div class="impact-row">
|
||||
<div class="impact-thought">
|
||||
<div class="impact-thought-text">"I completely bombed my presentation today..."</div>
|
||||
<div class="impact-date">Feb 22 · 8:51am · Catastrophizing</div>
|
||||
</div>
|
||||
<div class="impact-bars">
|
||||
<div class="impact-bar-row">
|
||||
<div class="impact-bar-bg">
|
||||
<div class="impact-bar-fill" style="width:28%; background: var(--ruby); opacity: 0.7;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="impact-bar-row">
|
||||
<div class="impact-bar-bg">
|
||||
<div class="impact-bar-fill" style="width:80%; background: var(--emerald);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="impact-delta">+52%</div>
|
||||
</div>
|
||||
|
||||
<div class="impact-row">
|
||||
<div class="impact-thought">
|
||||
<div class="impact-thought-text">"Nobody at work actually wants me there..."</div>
|
||||
<div class="impact-date">Feb 21 · 8:33am · Mind Reading</div>
|
||||
</div>
|
||||
<div class="impact-bars">
|
||||
<div class="impact-bar-row">
|
||||
<div class="impact-bar-bg">
|
||||
<div class="impact-bar-fill" style="width:22%; background: var(--ruby); opacity: 0.7;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="impact-bar-row">
|
||||
<div class="impact-bar-bg">
|
||||
<div class="impact-bar-fill" style="width:65%; background: var(--emerald);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="impact-delta">+43%</div>
|
||||
</div>
|
||||
|
||||
<div class="impact-row">
|
||||
<div class="impact-thought">
|
||||
<div class="impact-thought-text">"I should already be further along by now..."</div>
|
||||
<div class="impact-date">Feb 19 · 8:40am · Should Statements</div>
|
||||
</div>
|
||||
<div class="impact-bars">
|
||||
<div class="impact-bar-row">
|
||||
<div class="impact-bar-bg">
|
||||
<div class="impact-bar-fill" style="width:38%; background: var(--ruby); opacity: 0.7;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="impact-bar-row">
|
||||
<div class="impact-bar-bg">
|
||||
<div class="impact-bar-fill" style="width:72%; background: var(--emerald);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="impact-delta">+34%</div>
|
||||
</div>
|
||||
|
||||
<div class="impact-row">
|
||||
<div class="impact-thought">
|
||||
<div class="impact-thought-text">"If I can't handle this, what does that say about me..."</div>
|
||||
<div class="impact-date">Feb 15 · 7:58am · Personalization</div>
|
||||
</div>
|
||||
<div class="impact-bars">
|
||||
<div class="impact-bar-row">
|
||||
<div class="impact-bar-bg">
|
||||
<div class="impact-bar-fill" style="width:18%; background: var(--ruby); opacity: 0.7;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="impact-bar-row">
|
||||
<div class="impact-bar-bg">
|
||||
<div class="impact-bar-fill" style="width:58%; background: var(--emerald);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="impact-delta">+40%</div>
|
||||
</div>
|
||||
|
||||
<!-- Insight -->
|
||||
<div class="insight-panel">
|
||||
<div class="insight-label">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12">
|
||||
<path d="M6 1L11 6L6 11L1 6Z" fill="#34D399"/>
|
||||
</svg>
|
||||
Impact Reading
|
||||
</div>
|
||||
<div class="insight-text">Work and career thoughts make up 72% of your turns — and they show your biggest lifts, averaging +27% per session. Your 8–9am turns (before the workday) consistently outperform afternoon ones. The morning ritual is paying off.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
350
initial mockups/screens/spectrum/54-spectrum-rhythm.html
Normal file
350
initial mockups/screens/spectrum/54-spectrum-rhythm.html
Normal file
@@ -0,0 +1,350 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Your Rhythm</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.rhythm-container {
|
||||
padding: 16px;
|
||||
}
|
||||
.chart-wrap {
|
||||
background: var(--void);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 12px;
|
||||
margin-bottom: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.peak-highlight {
|
||||
background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(59,130,246,0.06));
|
||||
border: 1px solid rgba(139,92,246,0.25);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.peak-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.peak-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
background: rgba(139,92,246,0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.peak-info {}
|
||||
.peak-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.peak-desc {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.legend-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.legend-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 11px;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.legend-circle {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.pattern-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.pattern-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.pattern-label {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
.pattern-time {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.insight-panel {
|
||||
background: linear-gradient(135deg, rgba(139,92,246,0.06), rgba(59,130,246,0.04));
|
||||
border: 1px solid rgba(139,92,246,0.2);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 14px;
|
||||
}
|
||||
.insight-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--amethyst-light);
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.insight-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.55;
|
||||
}
|
||||
.screen-content { padding-bottom: 20px; }
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="50-spectrum-dashboard.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Your Rhythm</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content no-pad">
|
||||
<div class="rhythm-container">
|
||||
|
||||
<!-- Bubble chart — extracted from spectrum-visualizations.svg "RHYTHM DETECTION" section -->
|
||||
<div class="chart-wrap">
|
||||
<svg width="334" height="180" viewBox="0 0 334 180" style="display:block;">
|
||||
<defs>
|
||||
<linearGradient id="s54-grAmethyst" 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="s54-grSapphire" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/><stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s54-grEmerald" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/><stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="s54-grAmber" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/><stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<filter id="s54-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>
|
||||
|
||||
<!-- Chart background -->
|
||||
<rect width="334" height="180" fill="#0A0E1A"/>
|
||||
|
||||
<!-- Y axis labels (days) -->
|
||||
<text x="20" y="28" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">Mon</text>
|
||||
<text x="20" y="55" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">Tue</text>
|
||||
<text x="20" y="82" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">Wed</text>
|
||||
<text x="20" y="109" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">Thu</text>
|
||||
<text x="20" y="136" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">Fri</text>
|
||||
<text x="20" y="163" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">Sat</text>
|
||||
|
||||
<!-- X axis time labels -->
|
||||
<text x="52" y="173" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">6am</text>
|
||||
<text x="103" y="173" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">9am</text>
|
||||
<text x="167" y="173" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">12pm</text>
|
||||
<text x="219" y="173" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">3pm</text>
|
||||
<text x="270" y="173" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">6pm</text>
|
||||
|
||||
<!-- Horizontal grid lines -->
|
||||
<line x1="24" y1="18" x2="320" y2="18" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2,6"/>
|
||||
<line x1="24" y1="45" x2="320" y2="45" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2,6"/>
|
||||
<line x1="24" y1="72" x2="320" y2="72" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2,6"/>
|
||||
<line x1="24" y1="99" x2="320" y2="99" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2,6"/>
|
||||
<line x1="24" y1="126" x2="320" y2="126" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2,6"/>
|
||||
<line x1="24" y1="153" x2="320" y2="153" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="2,6"/>
|
||||
|
||||
<!-- Peak highlight zone (9am column) -->
|
||||
<rect x="88" y="6" width="36" height="158" rx="3" fill="rgba(139,92,246,0.05)" stroke="rgba(139,92,246,0.15)" stroke-width="0.8"/>
|
||||
|
||||
<!-- Activity bubbles — adapted from spectrum-visualizations.svg Rhythm Detection -->
|
||||
<!-- Morning cluster (amethyst, 9am col) -->
|
||||
<g filter="url(#s54-glowSm)">
|
||||
<!-- Monday row y=18 -->
|
||||
<circle cx="78" cy="18" r="4" fill="url(#s54-grAmethyst)" opacity="0.3"/>
|
||||
<circle cx="94" cy="18" r="5" fill="url(#s54-grAmethyst)" opacity="0.5"/>
|
||||
<circle cx="106" cy="18" r="6" fill="url(#s54-grAmethyst)" opacity="0.7">
|
||||
<animate attributeName="opacity" values="0.5;0.8;0.5" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="148" cy="18" r="4" fill="url(#s54-grAmethyst)" opacity="0.4"/>
|
||||
<!-- Midday lull Mon -->
|
||||
<circle cx="156" cy="18" r="3" fill="url(#s54-grSapphire)" opacity="0.2"/>
|
||||
<circle cx="220" cy="18" r="3" fill="url(#s54-grSapphire)" opacity="0.25"/>
|
||||
|
||||
<!-- Tuesday row y=45 -->
|
||||
<circle cx="100" cy="45" r="7" fill="url(#s54-grAmethyst)" opacity="0.7">
|
||||
<animate attributeName="opacity" values="0.5;0.8;0.5" dur="3.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="115" cy="45" r="5" fill="url(#s54-grAmethyst)" opacity="0.5"/>
|
||||
<circle cx="219" cy="45" r="4" fill="url(#s54-grEmerald)" opacity="0.4"/>
|
||||
|
||||
<!-- Wednesday row y=72 -->
|
||||
<circle cx="94" cy="72" r="5" fill="url(#s54-grAmethyst)" opacity="0.6"/>
|
||||
<circle cx="150" cy="72" r="4" fill="url(#s54-grEmerald)" opacity="0.5"/>
|
||||
<circle cx="205" cy="72" r="3" fill="url(#s54-grSapphire)" opacity="0.4"/>
|
||||
|
||||
<!-- Thursday row y=99 — afternoon peak -->
|
||||
<circle cx="219" cy="99" r="7" fill="url(#s54-grEmerald)" opacity="0.7">
|
||||
<animate attributeName="opacity" values="0.5;0.8;0.5" dur="3.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="235" cy="99" r="5" fill="url(#s54-grEmerald)" opacity="0.5"/>
|
||||
<circle cx="96" cy="99" r="4" fill="url(#s54-grAmethyst)" opacity="0.45"/>
|
||||
|
||||
<!-- Friday row y=126 -->
|
||||
<circle cx="102" cy="126" r="6" fill="url(#s54-grAmethyst)" opacity="0.6"/>
|
||||
<circle cx="168" cy="126" r="4" fill="url(#s54-grSapphire)" opacity="0.45"/>
|
||||
<circle cx="285" cy="126" r="5" fill="url(#s54-grAmber)" opacity="0.5"/>
|
||||
|
||||
<!-- Saturday row y=153 -->
|
||||
<circle cx="125" cy="153" r="4" fill="url(#s54-grAmber)" opacity="0.35"/>
|
||||
<circle cx="186" cy="153" r="5" fill="url(#s54-grAmethyst)" opacity="0.45"/>
|
||||
<circle cx="249" cy="153" r="4" fill="url(#s54-grEmerald)" opacity="0.4"/>
|
||||
</g>
|
||||
|
||||
<!-- Pattern line (smoothed) — exact from SVG, adapted x-coords -->
|
||||
<path d="M 40,20 C 80,-5 112,-15 140,5 C 168,18 190,14 219,-15 C 248,5 275,12 310,15"
|
||||
fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.3" stroke-dasharray="4 4"/>
|
||||
|
||||
<!-- Peak labels -->
|
||||
<g filter="url(#s54-glowSm)">
|
||||
<path d="M 106,4 L 108,2 L 110,4 L 108,6 Z" fill="url(#s54-grAmethyst)" opacity="0.8"/>
|
||||
<text x="106" y="0" font-size="7" fill="#C4B5FD" text-anchor="middle" font-family="Inter" font-weight="500">Morning Peak</text>
|
||||
</g>
|
||||
<g filter="url(#s54-glowSm)">
|
||||
<path d="M 219,88 L 221,86 L 223,88 L 221,90 Z" fill="url(#s54-grEmerald)" opacity="0.8"/>
|
||||
<text x="219" y="84" font-size="7" fill="#6EE7B7" text-anchor="middle" font-family="Inter" font-weight="500">Afternoon Peak</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Legend -->
|
||||
<div class="legend-row">
|
||||
<div class="legend-chip">
|
||||
<div class="legend-circle" style="background: var(--amethyst);"></div>
|
||||
Turn
|
||||
</div>
|
||||
<div class="legend-chip">
|
||||
<div class="legend-circle" style="background: var(--emerald);"></div>
|
||||
Mirror
|
||||
</div>
|
||||
<div class="legend-chip">
|
||||
<div class="legend-circle" style="background: var(--sapphire);"></div>
|
||||
Lens
|
||||
</div>
|
||||
<div class="legend-chip">
|
||||
<div class="legend-circle" style="background: var(--amber);"></div>
|
||||
Ritual
|
||||
</div>
|
||||
<div class="legend-chip">
|
||||
<div class="legend-circle" style="background: var(--rose);"></div>
|
||||
Gallery
|
||||
</div>
|
||||
<div class="legend-chip">
|
||||
<span style="font-size:9px;">Bubble size = activity level</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Peak time highlight — canonical: most turns 8–9am, secondary 6–8pm -->
|
||||
<div class="peak-highlight">
|
||||
<div class="peak-row">
|
||||
<div class="peak-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20">
|
||||
<defs>
|
||||
<linearGradient id="peakGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M10 2L18 10L10 18L2 10Z" fill="url(#peakGrad)" opacity="0.9"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="peak-info">
|
||||
<div class="peak-title">Peak Window: Mon–Fri, 8–9am</div>
|
||||
<div class="peak-desc">Before the workday begins — your clearest reflection time</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pattern cards — aligned to canonical data -->
|
||||
<div class="pattern-card">
|
||||
<div class="pattern-row">
|
||||
<span class="pattern-label">Primary trigger context</span>
|
||||
<span class="pattern-time" style="color: var(--amethyst-light);">Work / career (72%)</span>
|
||||
</div>
|
||||
<div class="divider" style="margin: 10px 0;"></div>
|
||||
<div class="pattern-row">
|
||||
<span class="pattern-label">Secondary trigger</span>
|
||||
<span class="pattern-time" style="color: var(--sapphire-light);">Relationships (18%)</span>
|
||||
</div>
|
||||
<div class="divider" style="margin: 10px 0;"></div>
|
||||
<div class="pattern-row">
|
||||
<span class="pattern-label">Evening peak window</span>
|
||||
<span class="pattern-time" style="color: var(--emerald-light);">6–8pm</span>
|
||||
</div>
|
||||
<div class="divider" style="margin: 10px 0;"></div>
|
||||
<div class="pattern-row">
|
||||
<span class="pattern-label">Quietest time</span>
|
||||
<span class="pattern-time" style="color: var(--dim-light);">Weekends after 9pm</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Insight -->
|
||||
<div class="insight-panel">
|
||||
<div class="insight-label">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12">
|
||||
<path d="M6 1L11 6L6 11L1 6Z" fill="#A78BFA"/>
|
||||
</svg>
|
||||
Rhythm Reading
|
||||
</div>
|
||||
<div class="insight-text">Your turns cluster around two windows — 8–9am before work, and 6–8pm after. This is a healthy pattern: processing the anticipation before work, and processing the day after. The morning window produces your deepest reframes.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
361
initial mockups/screens/spectrum/55-spectrum-growth.html
Normal file
361
initial mockups/screens/spectrum/55-spectrum-growth.html
Normal file
@@ -0,0 +1,361 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Growth Trajectory</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.growth-container {
|
||||
padding: 16px;
|
||||
}
|
||||
.growth-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.growth-score {
|
||||
text-align: right;
|
||||
}
|
||||
.score-val {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
.score-label {
|
||||
font-size: 11px;
|
||||
color: var(--dim-light);
|
||||
margin-top: -2px;
|
||||
}
|
||||
.growth-pct {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 3px 8px;
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(16,185,129,0.15);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--emerald-light);
|
||||
margin-top: 4px;
|
||||
}
|
||||
.chart-wrap {
|
||||
background: var(--void);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 16px 12px 12px;
|
||||
margin-bottom: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.milestones-section {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.milestone-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid rgba(28,34,64,0.5);
|
||||
}
|
||||
.milestone-item:last-child { border-bottom: none; }
|
||||
.milestone-dot {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
}
|
||||
.milestone-dot.achieved {
|
||||
background: rgba(16,185,129,0.2);
|
||||
border: 2px solid var(--emerald);
|
||||
}
|
||||
.milestone-dot.upcoming {
|
||||
background: var(--deep-glass);
|
||||
border: 2px solid var(--twilight);
|
||||
}
|
||||
.milestone-info { flex: 1; }
|
||||
.milestone-title {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
.milestone-date {
|
||||
font-size: 11px;
|
||||
color: var(--faint-light);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.insight-panel {
|
||||
background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.03));
|
||||
border: 1px solid rgba(16,185,129,0.25);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 14px;
|
||||
}
|
||||
.insight-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--emerald-light);
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.insight-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.55;
|
||||
}
|
||||
.screen-content { padding-bottom: 20px; }
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="50-spectrum-dashboard.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Growth</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content no-pad">
|
||||
<div class="growth-container">
|
||||
|
||||
<!-- Header with score -->
|
||||
<div class="growth-header">
|
||||
<div>
|
||||
<div class="subheading" style="color: var(--soft-light);">Wellness Score</div>
|
||||
<div class="body-sm text-dim">This week</div>
|
||||
</div>
|
||||
<div class="growth-score">
|
||||
<div class="score-val" style="color: var(--emerald-light);">78</div>
|
||||
<div class="score-label">/ 100</div>
|
||||
<div class="growth-pct">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none">
|
||||
<path d="M5 8V2M2 5L5 2L8 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
+14% this week
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Line chart — extracted from spectrum-visualizations.svg "GROWTH TRAJECTORY" section -->
|
||||
<div class="chart-wrap">
|
||||
<svg width="334" height="170" viewBox="0 0 334 170" style="display:block;">
|
||||
<defs>
|
||||
<linearGradient id="s55-grAmethyst" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/><stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<!-- Area fill under growth curve — #8B5CF6 with low opacity per SVG -->
|
||||
<linearGradient id="s55-areaFill" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.08"/>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0.01"/>
|
||||
</linearGradient>
|
||||
<filter id="s55-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="s55-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>
|
||||
|
||||
<!-- Chart background -->
|
||||
<rect width="334" height="170" fill="#0A0E1A"/>
|
||||
|
||||
<!-- Axes -->
|
||||
<line x1="30" y1="125" x2="320" y2="125" stroke="#1C2240" stroke-width="0.5"/>
|
||||
<line x1="30" y1="125" x2="30" y2="15" stroke="#1C2240" stroke-width="0.5"/>
|
||||
|
||||
<!-- Grid lines -->
|
||||
<line x1="30" y1="35" x2="320" y2="35" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="3,5"/>
|
||||
<line x1="30" y1="65" x2="320" y2="65" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="3,5"/>
|
||||
<line x1="30" y1="95" x2="320" y2="95" stroke="#1C2240" stroke-width="0.5" stroke-dasharray="3,5"/>
|
||||
|
||||
<!-- Y labels -->
|
||||
<text x="26" y="38" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">100</text>
|
||||
<text x="26" y="68" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">75</text>
|
||||
<text x="26" y="98" text-anchor="end" fill="#475569" font-size="8" font-family="Inter">50</text>
|
||||
|
||||
<!-- Month labels -->
|
||||
<text x="45" y="138" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Jan</text>
|
||||
<text x="97" y="138" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Feb</text>
|
||||
<text x="149" y="138" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Mar</text>
|
||||
<text x="201" y="138" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Apr</text>
|
||||
<text x="253" y="138" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">May</text>
|
||||
<text x="305" y="138" text-anchor="middle" fill="#475569" font-size="8" font-family="Inter">Jun</text>
|
||||
|
||||
<!-- Growth line + area — adapted from spectrum-visualizations.svg Growth Trajectory -->
|
||||
<!-- Original: M -220,40 C -180,35 -140,20 -80,10 C -20,0 40,-15 100,-25 C 160,-35 200,-40 240,-50 -->
|
||||
<!-- Adapted: center=175, y-baseline=125, scale x: +175 shifts origin, y: +125 for baseline -->
|
||||
<g filter="url(#s55-glowMd)">
|
||||
<!-- Area fill -->
|
||||
<path d="M 45,108 C 68,104 91,95 118,90 C 145,85 168,78 195,72 C 222,66 245,59 268,52 C 291,45 305,40 315,34 L 315,125 L 45,125 Z"
|
||||
fill="url(#s55-areaFill)"/>
|
||||
<!-- Growth line — stroke with amethyst gradient (exact from SVG) -->
|
||||
<path d="M 45,108 C 68,104 91,95 118,90 C 145,85 168,78 195,72 C 222,66 245,59 268,52 C 291,45 305,40 315,34"
|
||||
fill="none" stroke="url(#s55-grAmethyst)" stroke-width="2" stroke-linecap="round" opacity="0.8"/>
|
||||
<!-- Data point fragments — exact diamond+specular pattern from SVG -->
|
||||
<path d="M 45,108 L 48,111 L 45,114 L 42,111 Z" fill="url(#s55-grAmethyst)" opacity="0.6" filter="url(#s55-glowSm)"/>
|
||||
<path d="M 45,108 L 48,111 L 45,111 Z" fill="#fff" opacity="0.15"/>
|
||||
|
||||
<path d="M 97,88 L 100,91 L 97,94 L 94,91 Z" fill="url(#s55-grAmethyst)" opacity="0.7" filter="url(#s55-glowSm)"/>
|
||||
<path d="M 97,88 L 100,91 L 97,91 Z" fill="#fff" opacity="0.15"/>
|
||||
|
||||
<path d="M 149,74 L 152,77 L 149,80 L 146,77 Z" fill="url(#s55-grAmethyst)" opacity="0.7" filter="url(#s55-glowSm)"/>
|
||||
<path d="M 149,74 L 152,77 L 149,77 Z" fill="#fff" opacity="0.15"/>
|
||||
|
||||
<path d="M 201,60 L 204,63 L 201,66 L 198,63 Z" fill="url(#s55-grAmethyst)" opacity="0.8" filter="url(#s55-glowSm)"/>
|
||||
<path d="M 201,60 L 204,63 L 201,63 Z" fill="#fff" opacity="0.15"/>
|
||||
|
||||
<path d="M 253,46 L 256,49 L 253,52 L 250,49 Z" fill="url(#s55-grAmethyst)" opacity="0.8" filter="url(#s55-glowSm)"/>
|
||||
<path d="M 253,46 L 256,49 L 253,49 Z" fill="#fff" opacity="0.15"/>
|
||||
|
||||
<!-- Current point (animated pulse) -->
|
||||
<path d="M 315,34 L 318,37 L 315,40 L 312,37 Z" fill="url(#s55-grAmethyst)" opacity="0.9" filter="url(#s55-glowSm)">
|
||||
<animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 315,34 L 318,37 L 315,37 Z" fill="#fff" opacity="0.15"/>
|
||||
</g>
|
||||
|
||||
<!-- Milestone markers — exact from SVG (circle + label) -->
|
||||
<g filter="url(#s55-glowSm)">
|
||||
<!-- 10th Turn milestone at Feb/Mar -->
|
||||
<circle cx="149" cy="76" r="8" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.4"/>
|
||||
<text x="149" y="68" font-size="7" fill="#6EE7B7" text-anchor="middle" font-family="Inter">10th Turn</text>
|
||||
</g>
|
||||
<g filter="url(#s55-glowSm)">
|
||||
<!-- 30-day streak milestone at May -->
|
||||
<circle cx="253" cy="48" r="8" fill="none" stroke="#F59E0B" stroke-width="0.8" opacity="0.4"/>
|
||||
<text x="253" y="40" font-size="7" fill="#FDE68A" text-anchor="middle" font-family="Inter">30-day streak</text>
|
||||
</g>
|
||||
|
||||
<!-- Y-axis label -->
|
||||
<text x="14" y="80" font-size="7" fill="#475569" transform="rotate(-90, 14, 80)" text-anchor="middle" font-family="Inter">Resilience</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Milestones — aligned to Alex canonical data: Feb 1 start, 47 turns, 14 streak, 3 lens goals -->
|
||||
<div class="milestones-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">Growth Milestones</span>
|
||||
</div>
|
||||
|
||||
<div class="milestone-item">
|
||||
<div class="milestone-dot achieved">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2 6L5 9L10 3" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="milestone-info">
|
||||
<div class="milestone-title">First Turn · Feb 1</div>
|
||||
<div class="milestone-date">Started the practice · +5 wellness points</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="milestone-item">
|
||||
<div class="milestone-dot achieved">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2 6L5 9L10 3" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="milestone-info">
|
||||
<div class="milestone-title">25 Turns completed · Feb 12</div>
|
||||
<div class="milestone-date">Pattern awareness unlocked · +10 wellness points</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="milestone-item">
|
||||
<div class="milestone-dot achieved">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2 6L5 9L10 3" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="milestone-info">
|
||||
<div class="milestone-title">14-day ritual streak · Feb 22</div>
|
||||
<div class="milestone-date">Longest streak · +15 wellness points</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="milestone-item">
|
||||
<div class="milestone-dot achieved">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2 6L5 9L10 3" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="milestone-info">
|
||||
<div class="milestone-title">47 Turns · Feb 22</div>
|
||||
<div class="milestone-date">47 evidence tiles built · +12 wellness points</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="milestone-item">
|
||||
<div class="milestone-dot upcoming">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12">
|
||||
<path d="M6 1L11 6L6 11L1 6Z" fill="#475569" opacity="0.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="milestone-info">
|
||||
<div class="milestone-title" style="color: var(--dim-light);">50 Turns (upcoming)</div>
|
||||
<div class="milestone-date">3 turns away · +8 wellness points</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="milestone-item">
|
||||
<div class="milestone-dot upcoming">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12">
|
||||
<path d="M6 1L11 6L6 11L1 6Z" fill="#475569" opacity="0.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="milestone-info">
|
||||
<div class="milestone-title" style="color: var(--dim-light);">21-day ritual streak (upcoming)</div>
|
||||
<div class="milestone-date">7 days away · +20 wellness points</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Insight -->
|
||||
<div class="insight-panel">
|
||||
<div class="insight-label">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12">
|
||||
<path d="M6 1L11 6L6 11L1 6Z" fill="#34D399"/>
|
||||
</svg>
|
||||
Growth Reading
|
||||
</div>
|
||||
<div class="insight-text">21 days of practice, 47 turns, 14 consecutive rituals — the trajectory is clear. The steepest climb in your score came between Feb 12–22, when the ritual streak took hold. You're 3 turns from hitting 50.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
369
initial mockups/screens/spectrum/56-spectrum-weekly.html
Normal file
369
initial mockups/screens/spectrum/56-spectrum-weekly.html
Normal file
@@ -0,0 +1,369 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Weekly Summary</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.weekly-container {
|
||||
padding: 16px;
|
||||
}
|
||||
.week-label {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.summary-card {
|
||||
background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(59,130,246,0.05));
|
||||
border: 1px solid rgba(139,92,246,0.2);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.summary-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--amethyst-light);
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.summary-text {
|
||||
font-size: 15px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.metric-card {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 12px;
|
||||
}
|
||||
.metric-val {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
.metric-lbl {
|
||||
font-size: 11px;
|
||||
color: var(--dim-light);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.distortions-section {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.distortion-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid rgba(28,34,64,0.5);
|
||||
}
|
||||
.distortion-row:last-child { border-bottom: none; }
|
||||
.distortion-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(245,158,11,0.12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.distortion-name {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
.distortion-count {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--amber-light);
|
||||
}
|
||||
.distortion-bar-wrap {
|
||||
width: 60px;
|
||||
height: 6px;
|
||||
background: var(--twilight);
|
||||
border-radius: var(--radius-full);
|
||||
overflow: hidden;
|
||||
}
|
||||
.distortion-bar {
|
||||
height: 100%;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--amber);
|
||||
opacity: 0.7;
|
||||
}
|
||||
.actions-section {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.action-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.action-num {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: rgba(139,92,246,0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--amethyst-light);
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
}
|
||||
.action-text {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.4;
|
||||
}
|
||||
.screen-content { padding-bottom: 20px; }
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="50-spectrum-dashboard.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Weekly Summary</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content no-pad">
|
||||
<div class="weekly-container">
|
||||
|
||||
<div class="week-label">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<rect x="1" y="2" width="10" height="9" rx="1.5" stroke="#94A3B8" stroke-width="1"/>
|
||||
<path d="M3 1V3M9 1V3" stroke="#94A3B8" stroke-width="1" stroke-linecap="round"/>
|
||||
</svg>
|
||||
Feb 16 – Feb 22, 2026
|
||||
</div>
|
||||
|
||||
<!-- AI Summary -->
|
||||
<div class="summary-card">
|
||||
<div class="summary-label">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12">
|
||||
<path d="M6 1L11 6L6 11L1 6Z" fill="#A78BFA"/>
|
||||
</svg>
|
||||
AI Weekly Narrative
|
||||
</div>
|
||||
<div class="summary-text">Week three landed. You completed 14 turns between Feb 16–22, all but two before 9am — and the quality shows. Catastrophizing appeared 4 times but you caught it faster each time. The Feb 19 "should statements" turn stands out: you reframed a career expectation with remarkable clarity. You're 3 turns from 50 total.</div>
|
||||
</div>
|
||||
|
||||
<!-- Key metrics -->
|
||||
<div class="metrics-grid">
|
||||
<div class="metric-card" style="border-top: 2px solid var(--amethyst); border-radius: var(--radius-lg);">
|
||||
<div style="display:flex; align-items:center; gap:6px; margin-bottom:4px;">
|
||||
<div style="width:8px; height:8px; border-radius:50%; background:var(--amethyst); box-shadow: 0 0 6px rgba(139,92,246,0.5);"></div>
|
||||
<div class="metric-lbl" style="margin-top:0;">Turn</div>
|
||||
</div>
|
||||
<div class="metric-val" style="color: var(--amethyst-light);">14</div>
|
||||
<div class="metric-lbl">Turns completed</div>
|
||||
</div>
|
||||
<div class="metric-card" style="border-top: 2px solid var(--amber); border-radius: var(--radius-lg);">
|
||||
<div style="display:flex; align-items:center; gap:6px; margin-bottom:4px;">
|
||||
<div style="width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow: 0 0 6px rgba(245,158,11,0.5);"></div>
|
||||
<div class="metric-lbl" style="margin-top:0;">Mirror</div>
|
||||
</div>
|
||||
<div class="metric-val" style="color: var(--amber-light);">4</div>
|
||||
<div class="metric-lbl">Sessions</div>
|
||||
</div>
|
||||
<div class="metric-card" style="border-top: 2px solid var(--emerald); border-radius: var(--radius-lg);">
|
||||
<div style="display:flex; align-items:center; gap:6px; margin-bottom:4px;">
|
||||
<div style="width:8px; height:8px; border-radius:50%; background:var(--emerald); box-shadow: 0 0 6px rgba(16,185,129,0.5);"></div>
|
||||
<div class="metric-lbl" style="margin-top:0;">Lens</div>
|
||||
</div>
|
||||
<div class="metric-val" style="color: var(--emerald-light);">3</div>
|
||||
<div class="metric-lbl">Goals active</div>
|
||||
</div>
|
||||
<div class="metric-card" style="border-top: 2px solid var(--rose); border-radius: var(--radius-lg);">
|
||||
<div style="display:flex; align-items:center; gap:6px; margin-bottom:4px;">
|
||||
<div style="width:8px; height:8px; border-radius:50%; background:var(--rose); box-shadow: 0 0 6px rgba(236,72,153,0.5);"></div>
|
||||
<div class="metric-lbl" style="margin-top:0;">Ritual</div>
|
||||
</div>
|
||||
<div class="metric-val" style="color: var(--pure-light);">14</div>
|
||||
<div class="metric-lbl">Day streak</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Top distortions -->
|
||||
<div class="distortions-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">Top Distortions This Week</span>
|
||||
</div>
|
||||
|
||||
<!-- Distortion icons extracted from icons-distortions.svg — aligned to canonical fragment data -->
|
||||
<div class="distortion-row">
|
||||
<div class="distortion-icon">
|
||||
<!-- Catastrophizing icon — from icons-distortions.svg translate(28,60)/translate(12,12) -->
|
||||
<svg width="24" height="24" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<filter id="s56-gAmber1" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="1.8" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<linearGradient id="s56-amberGr1" 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(12,12)" filter="url(#s56-gAmber1)">
|
||||
<path d="M 0,-10 L 5,0 L 0,10 L -5,0 Z" fill="url(#s56-amberGr1)" opacity="0.9"/>
|
||||
<path d="M 0,-10 L 5,0 L -5,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<path d="M -8,6 L -5,10 L -9,12 L -11,8 Z" fill="#F59E0B" opacity="0.5"/>
|
||||
<path d="M 7,8 L 10,12 L 8,14 L 5,11 Z" fill="#F59E0B" opacity="0.4"/>
|
||||
<line x1="0" y1="11" x2="0" y2="16" stroke="#FCD34D" stroke-width="0.5" opacity="0.4"/>
|
||||
<line x1="-3" y1="12" x2="-5" y2="17" stroke="#FCD34D" stroke-width="0.4" opacity="0.3"/>
|
||||
<line x1="3" y1="12" x2="5" y2="17" stroke="#FCD34D" stroke-width="0.4" opacity="0.3"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="distortion-name">Catastrophizing</span>
|
||||
<div class="distortion-bar-wrap">
|
||||
<div class="distortion-bar" style="width:100%;"></div>
|
||||
</div>
|
||||
<span class="distortion-count">4x</span>
|
||||
</div>
|
||||
|
||||
<div class="distortion-row">
|
||||
<div class="distortion-icon">
|
||||
<!-- Mind Reading icon -->
|
||||
<svg width="24" height="24" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<filter id="s56-gAmber2" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="1.8" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<linearGradient id="s56-amberGr2" 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(12,12)" filter="url(#s56-gAmber2)">
|
||||
<path d="M 0,-10 L -7,0 L 0,10 L 0,0 Z" fill="url(#s56-amberGr2)" opacity="0.85"/>
|
||||
<path d="M 0,-10 L 7,0 L 0,10 L 0,0 Z" fill="none" stroke="#F59E0B" stroke-width="1"/>
|
||||
<line x1="0" y1="-10" x2="0" y2="10" stroke="#FEF3C7" stroke-width="0.6" opacity="0.5"/>
|
||||
<path d="M 0,-10 L -7,0 L 0,0 Z" fill="#fff" opacity="0.12"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="distortion-name">Mind Reading</span>
|
||||
<div class="distortion-bar-wrap">
|
||||
<div class="distortion-bar" style="width:57%;"></div>
|
||||
</div>
|
||||
<span class="distortion-count">2x</span>
|
||||
</div>
|
||||
|
||||
<div class="distortion-row">
|
||||
<div class="distortion-icon">
|
||||
<!-- Should Statements icon -->
|
||||
<svg width="24" height="24" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<filter id="s56-gAmber3" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="1.8" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<linearGradient id="s56-amberGr3" 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(12,12)" filter="url(#s56-gAmber3)">
|
||||
<path d="M -10,0 L -7,-3 L -4,0 L -7,3 Z" fill="url(#s56-amberGr3)" opacity="0.9"/>
|
||||
<path d="M -10,0 L -7,-3 L -4,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<line x1="-3" y1="0" x2="0" y2="0" stroke="#FCD34D" stroke-width="0.5" opacity="0.4"/>
|
||||
<path d="M 2,-6 L 4,-8 L 6,-6 L 4,-4 Z" fill="#F59E0B" opacity="0.7"/>
|
||||
<path d="M 4,0 L 6,-2 L 8,0 L 6,2 Z" fill="#F59E0B" opacity="0.6"/>
|
||||
<path d="M 2,6 L 4,4 L 6,6 L 4,8 Z" fill="#F59E0B" opacity="0.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="distortion-name">Should Statements</span>
|
||||
<div class="distortion-bar-wrap">
|
||||
<div class="distortion-bar" style="width:36%;"></div>
|
||||
</div>
|
||||
<span class="distortion-count">2x</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recommended actions -->
|
||||
<div class="actions-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">Recommended Actions</span>
|
||||
</div>
|
||||
|
||||
<div class="action-item">
|
||||
<div class="action-num">1</div>
|
||||
<div class="action-text">Your Catastrophizing peak is work-related — try naming the specific fear underneath the thought next time, not just the outcome. The Feb 22 "bombed my presentation" turn started to do this well.</div>
|
||||
</div>
|
||||
|
||||
<div class="action-item">
|
||||
<div class="action-num">2</div>
|
||||
<div class="action-text">You're 3 turns from 50 total. Keep the morning 8–9am window — your reframe quality there is measurably higher than afternoon turns.</div>
|
||||
</div>
|
||||
|
||||
<div class="action-item">
|
||||
<div class="action-num">3</div>
|
||||
<div class="action-text">Review your Feb 19 "should statements" reframe — it's your sharpest yet. Save it to your Gallery as a reference for similar turns this week.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Share button -->
|
||||
<a class="btn btn-secondary" href="../modals/61-pattern-share.html" style="display:flex; align-items:center; justify-content:center; gap:8px;">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<circle cx="13" cy="3" r="2" stroke="#E2E8F0" stroke-width="1.2"/>
|
||||
<circle cx="3" cy="8" r="2" stroke="#E2E8F0" stroke-width="1.2"/>
|
||||
<circle cx="13" cy="13" r="2" stroke="#E2E8F0" stroke-width="1.2"/>
|
||||
<path d="M5 7L11 4M5 9L11 12" stroke="#E2E8F0" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
Share Summary
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
308
initial mockups/screens/spectrum/57-spectrum-monthly.html
Normal file
308
initial mockups/screens/spectrum/57-spectrum-monthly.html
Normal file
@@ -0,0 +1,308 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Monthly Report</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.monthly-container {
|
||||
padding: 16px;
|
||||
}
|
||||
.month-label {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.summary-card {
|
||||
background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(59,130,246,0.05));
|
||||
border: 1px solid rgba(139,92,246,0.2);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.summary-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--amethyst-light);
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.summary-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.comparison-section {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.comparison-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 12px;
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.comp-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.comp-label {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
.comp-prev {
|
||||
font-size: 12px;
|
||||
color: var(--faint-light);
|
||||
width: 36px;
|
||||
text-align: center;
|
||||
}
|
||||
.comp-arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
min-width: 48px;
|
||||
}
|
||||
.comp-arrow.up { color: var(--emerald-light); }
|
||||
.comp-arrow.down { color: var(--ruby); }
|
||||
.comp-arrow.neutral { color: var(--dim-light); }
|
||||
.growth-areas {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.growth-area-card {
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 14px;
|
||||
margin-bottom: 10px;
|
||||
border-left: 3px solid;
|
||||
}
|
||||
.growth-area-card.amethyst {
|
||||
background: rgba(139,92,246,0.06);
|
||||
border-color: var(--amethyst);
|
||||
}
|
||||
.growth-area-card.emerald {
|
||||
background: rgba(16,185,129,0.06);
|
||||
border-color: var(--emerald);
|
||||
}
|
||||
.growth-area-card.amber {
|
||||
background: rgba(245,158,11,0.06);
|
||||
border-color: var(--amber);
|
||||
}
|
||||
.area-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.area-text {
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.palette-section {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.palette-card {
|
||||
background: var(--void);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.palette-info { flex: 1; }
|
||||
.palette-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--soft-light);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.palette-desc {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
line-height: 1.4;
|
||||
}
|
||||
.screen-content { padding-bottom: 20px; }
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="50-spectrum-dashboard.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Monthly Report</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content no-pad">
|
||||
<div class="monthly-container">
|
||||
|
||||
<div class="month-label">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<rect x="1" y="2" width="10" height="9" rx="1.5" stroke="#94A3B8" stroke-width="1"/>
|
||||
<path d="M3 1V3M9 1V3" stroke="#94A3B8" stroke-width="1" stroke-linecap="round"/>
|
||||
</svg>
|
||||
February 2026
|
||||
</div>
|
||||
|
||||
<!-- AI Summary -->
|
||||
<div class="summary-card">
|
||||
<div class="summary-label">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12">
|
||||
<path d="M6 1L11 6L6 11L1 6Z" fill="#A78BFA"/>
|
||||
</svg>
|
||||
AI Monthly Analysis
|
||||
</div>
|
||||
<div class="summary-text">February marked a turning point. Starting Feb 1 with your first Turn and first ritual, you built to 47 turns, a 14-day streak, and 89% ritual completion by Feb 22. Catastrophizing declined week-over-week — 7 instances across 3 weeks, down from a higher baseline. The evidence wall is taking shape.</div>
|
||||
</div>
|
||||
|
||||
<!-- Comparison vs previous month -->
|
||||
<div class="comparison-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">vs. January 2026</span>
|
||||
</div>
|
||||
|
||||
<!-- Canonical: 47 Turns, 23 Mirror, 3 Lens goals, 14-day streak (89% completion), 47 Evidence tiles -->
|
||||
<div class="comparison-row">
|
||||
<div class="comp-dot" style="background: var(--amethyst); box-shadow: 0 0 5px rgba(139,92,246,0.45);"></div>
|
||||
<span class="comp-label">Total Turns</span>
|
||||
<span class="comp-prev">—</span>
|
||||
<span class="comp-arrow up">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none">
|
||||
<path d="M5 8V2M2 5L5 2L8 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
47
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="comparison-row">
|
||||
<div class="comp-dot" style="background: var(--amber); box-shadow: 0 0 5px rgba(245,158,11,0.4);"></div>
|
||||
<span class="comp-label">Mirror Sessions</span>
|
||||
<span class="comp-prev">—</span>
|
||||
<span class="comp-arrow up">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none">
|
||||
<path d="M5 8V2M2 5L5 2L8 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
23
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="comparison-row">
|
||||
<div class="comp-dot" style="background: var(--ruby); box-shadow: 0 0 5px rgba(239,68,68,0.35);"></div>
|
||||
<span class="comp-label">Catastrophizing Instances</span>
|
||||
<span class="comp-prev">—</span>
|
||||
<span class="comp-arrow up" style="color: var(--emerald-light);">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none">
|
||||
<path d="M5 2V8M2 5L5 8L8 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
7 · down
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="comparison-row">
|
||||
<div class="comp-dot" style="background: var(--rose); box-shadow: 0 0 5px rgba(236,72,153,0.35);"></div>
|
||||
<span class="comp-label">Ritual Completion Rate</span>
|
||||
<span class="comp-prev">—</span>
|
||||
<span class="comp-arrow up">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none">
|
||||
<path d="M5 8V2M2 5L5 2L8 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
89%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="comparison-row">
|
||||
<div class="comp-dot" style="background: var(--sapphire); box-shadow: 0 0 5px rgba(59,130,246,0.4);"></div>
|
||||
<span class="comp-label">Evidence tiles saved</span>
|
||||
<span class="comp-prev">—</span>
|
||||
<span class="comp-arrow up">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none">
|
||||
<path d="M5 8V2M2 5L5 2L8 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
47
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Growth areas -->
|
||||
<div class="growth-areas">
|
||||
<div class="section-header">
|
||||
<span class="section-title">Growth Areas</span>
|
||||
</div>
|
||||
|
||||
<div class="growth-area-card amethyst">
|
||||
<div class="area-label" style="color: var(--amethyst-light);">Strongest Growth</div>
|
||||
<div class="area-text">Turn practice — 47 turns in 22 days, averaging 2+ per day in week 3. Your morning turns (8–9am) consistently score highest for reframe quality.</div>
|
||||
</div>
|
||||
|
||||
<div class="growth-area-card emerald">
|
||||
<div class="area-label" style="color: var(--emerald-light);">Breakout Area</div>
|
||||
<div class="area-text">Ritual streak — 14 consecutive days with 89% completion. Started Feb 1, no streak longer in your history. The habit has taken hold.</div>
|
||||
</div>
|
||||
|
||||
<div class="growth-area-card amber">
|
||||
<div class="area-label" style="color: var(--amber-light);">Watch Area</div>
|
||||
<div class="area-text">Mind Reading stayed steady at 4 instances across the month. Worth watching if it climbs — it tends to spike with relationship or social stress.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Monthly kaleidoscope -->
|
||||
<div class="palette-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">February's Emotional Palette</span>
|
||||
</div>
|
||||
|
||||
<div class="palette-card">
|
||||
<img src="../../assets/kalei-logo.svg" width="48" height="48" alt="Kalei" style="flex-shrink:0;">
|
||||
<div class="palette-info">
|
||||
<div class="palette-title">Predominantly Amethyst</div>
|
||||
<div class="palette-desc">Dominated by Turn energy, with growing Emerald streaks of growth and Amber awareness. A kaleidoscope shifting toward equilibrium.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,292 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Notification Settings</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.settings-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.toggle-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 14px 16px;
|
||||
background: var(--kalei-navy);
|
||||
border-bottom: 1px solid rgba(28,34,64,0.6);
|
||||
}
|
||||
.toggle-row:first-child { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
|
||||
.toggle-row:last-child {
|
||||
border-radius: 0 0 var(--radius-xl) var(--radius-xl);
|
||||
border-bottom: none;
|
||||
}
|
||||
.toggle-row:only-child { border-radius: var(--radius-xl); }
|
||||
.toggle-info { flex: 1; }
|
||||
.toggle-title {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.toggle-desc {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
margin-top: 2px;
|
||||
}
|
||||
/* Toggle switch */
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
width: 50px;
|
||||
height: 28px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.toggle-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.toggle-track {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--twilight);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.toggle-thumb {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: var(--dim-light);
|
||||
transition: transform 0.2s, background 0.2s;
|
||||
}
|
||||
.toggle-switch input:checked + .toggle-track {
|
||||
background: var(--amethyst);
|
||||
box-shadow: 0 0 8px rgba(139,92,246,0.3);
|
||||
}
|
||||
.toggle-switch input:checked + .toggle-track .toggle-thumb {
|
||||
transform: translateX(22px);
|
||||
background: var(--pure-light);
|
||||
}
|
||||
|
||||
.time-picker-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
.time-picker-label {
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
flex: 1;
|
||||
}
|
||||
.time-picker-input {
|
||||
height: 34px;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--amethyst-light);
|
||||
font-family: var(--font-primary);
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
.time-picker-input:focus { border-color: var(--amethyst); }
|
||||
|
||||
.section-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid rgba(28,34,64,0.8);
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.save-area {
|
||||
padding: 8px 0 20px;
|
||||
}
|
||||
|
||||
.screen-content { padding-bottom: 20px; }
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="../you/37-you-settings.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Notifications</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content">
|
||||
<!-- Notification toggles -->
|
||||
<div class="settings-section">
|
||||
<div class="section-header" style="margin-top: 8px;">
|
||||
<span class="section-title">Reminders</span>
|
||||
</div>
|
||||
|
||||
<div class="section-card">
|
||||
<!-- Daily Ritual Reminder -->
|
||||
<div class="toggle-row">
|
||||
<div class="toggle-info">
|
||||
<div class="toggle-title">Daily Ritual Reminder</div>
|
||||
<div class="toggle-desc">Gentle nudge to start your daily ritual</div>
|
||||
</div>
|
||||
<label class="toggle-switch" onclick="toggleChange(this)">
|
||||
<input type="checkbox" checked onchange="toggleChange(this)">
|
||||
<div class="toggle-track">
|
||||
<div class="toggle-thumb"></div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Time picker for ritual -->
|
||||
<div class="time-picker-row" id="ritualTimePicker">
|
||||
<span class="time-picker-label">Reminder time</span>
|
||||
<input type="time" class="time-picker-input" value="08:00">
|
||||
</div>
|
||||
|
||||
<div class="divider" style="margin: 0 16px;"></div>
|
||||
|
||||
<!-- Mirror Check-in -->
|
||||
<div class="toggle-row">
|
||||
<div class="toggle-info">
|
||||
<div class="toggle-title">Mirror Check-in</div>
|
||||
<div class="toggle-desc">Remind you to journal each day</div>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" checked onchange="toggleChange(this)">
|
||||
<div class="toggle-track">
|
||||
<div class="toggle-thumb"></div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Time picker for mirror -->
|
||||
<div class="time-picker-row">
|
||||
<span class="time-picker-label">Reminder time</span>
|
||||
<input type="time" class="time-picker-input" value="21:00">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Insights -->
|
||||
<div class="settings-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">Insights</span>
|
||||
</div>
|
||||
|
||||
<div class="section-card">
|
||||
<!-- Weekly Spectrum Summary -->
|
||||
<div class="toggle-row">
|
||||
<div class="toggle-info">
|
||||
<div class="toggle-title">Weekly Spectrum Summary</div>
|
||||
<div class="toggle-desc">Your weekly Spectrum report every Sunday</div>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" onchange="toggleChange(this)">
|
||||
<div class="toggle-track">
|
||||
<div class="toggle-thumb"></div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="divider" style="margin: 0 16px;"></div>
|
||||
|
||||
<!-- Streak Alerts -->
|
||||
<div class="toggle-row">
|
||||
<div class="toggle-info">
|
||||
<div class="toggle-title">Streak Alerts</div>
|
||||
<div class="toggle-desc">Alerts when you're about to break a streak</div>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" checked onchange="toggleChange(this)">
|
||||
<div class="toggle-track">
|
||||
<div class="toggle-thumb"></div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Milestones -->
|
||||
<div class="settings-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">Achievements</span>
|
||||
</div>
|
||||
|
||||
<div class="section-card">
|
||||
<div class="toggle-row">
|
||||
<div class="toggle-info">
|
||||
<div class="toggle-title">Milestone Celebrations</div>
|
||||
<div class="toggle-desc">Notify when you earn new Evidence Wall tiles</div>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" checked onchange="toggleChange(this)">
|
||||
<div class="toggle-track">
|
||||
<div class="toggle-thumb"></div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Save button -->
|
||||
<div class="save-area">
|
||||
<button class="btn btn-primary" onclick="saveSettings()">Save Preferences</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleChange(el) {
|
||||
// Visual feedback is handled by CSS
|
||||
}
|
||||
|
||||
function saveSettings() {
|
||||
const btn = document.querySelector('.btn-primary');
|
||||
btn.textContent = 'Saved';
|
||||
btn.style.background = 'var(--emerald)';
|
||||
btn.style.boxShadow = 'var(--glow-emerald)';
|
||||
setTimeout(() => {
|
||||
btn.textContent = 'Save Preferences';
|
||||
btn.style.background = '';
|
||||
btn.style.boxShadow = '';
|
||||
}, 2000);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
328
initial mockups/screens/system-states/63-data-export.html
Normal file
328
initial mockups/screens/system-states/63-data-export.html
Normal file
@@ -0,0 +1,328 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Export Your Data</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.export-section {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.info-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.info-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.info-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.included-list {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.included-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 0;
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.included-item-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--amethyst);
|
||||
opacity: 0.6;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.format-section {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.format-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 14px 16px;
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.format-option.selected {
|
||||
border-color: var(--amethyst);
|
||||
background: rgba(139,92,246,0.06);
|
||||
}
|
||||
.format-radio {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--twilight);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.format-option.selected .format-radio {
|
||||
border-color: var(--amethyst);
|
||||
}
|
||||
.format-radio-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--amethyst);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.format-option.selected .format-radio-dot { opacity: 1; }
|
||||
.format-info { flex: 1; }
|
||||
.format-name {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.format-desc {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.format-badge {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
border: none;
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--amethyst);
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-primary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
box-shadow: var(--glow-amethyst);
|
||||
transition: all 0.3s;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.export-btn:hover { background: var(--amethyst-light); }
|
||||
.export-btn.loading {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
color: var(--dim-light);
|
||||
box-shadow: none;
|
||||
cursor: default;
|
||||
}
|
||||
.export-btn.success {
|
||||
background: var(--emerald);
|
||||
box-shadow: var(--glow-emerald);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid rgba(148,163,184,0.3);
|
||||
border-top-color: var(--dim-light);
|
||||
border-radius: 50%;
|
||||
animation: rotate 0.8s linear infinite;
|
||||
display: none;
|
||||
}
|
||||
.export-btn.loading .spinner { display: block; }
|
||||
.export-btn .btn-text { transition: none; }
|
||||
|
||||
.privacy-note {
|
||||
font-size: 12px;
|
||||
color: var(--faint-light);
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
}
|
||||
.screen-content { padding-bottom: 24px; }
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="../you/37-you-settings.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Export Your Data</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content">
|
||||
<div style="margin-top: 8px;"></div>
|
||||
|
||||
<!-- Info card -->
|
||||
<div class="info-card">
|
||||
<div class="info-title">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<circle cx="9" cy="9" r="7" stroke="#8B5CF6" stroke-width="1.2"/>
|
||||
<path d="M9 8V13" stroke="#8B5CF6" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<circle cx="9" cy="5.5" r="0.8" fill="#8B5CF6"/>
|
||||
</svg>
|
||||
What's included in your export
|
||||
</div>
|
||||
<div class="info-text">Your personal data export contains everything you've created in Kalei:</div>
|
||||
|
||||
<div class="included-list">
|
||||
<div class="included-item">
|
||||
<div class="included-item-dot"></div>
|
||||
All Turn transcripts and reframe perspectives
|
||||
</div>
|
||||
<div class="included-item">
|
||||
<div class="included-item-dot" style="background: var(--amber);"></div>
|
||||
Mirror session journals and detected fragments
|
||||
</div>
|
||||
<div class="included-item">
|
||||
<div class="included-item-dot" style="background: var(--emerald);"></div>
|
||||
Lens goals, milestones, and if-then plans
|
||||
</div>
|
||||
<div class="included-item">
|
||||
<div class="included-item-dot" style="background: var(--sapphire);"></div>
|
||||
Gallery patterns and saved keepsakes
|
||||
</div>
|
||||
<div class="included-item">
|
||||
<div class="included-item-dot" style="background: var(--indigo);"></div>
|
||||
Ritual history and streak data
|
||||
</div>
|
||||
<div class="included-item">
|
||||
<div class="included-item-dot"></div>
|
||||
Account settings and coaching preferences
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Format selection -->
|
||||
<div class="format-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">Export Format</span>
|
||||
</div>
|
||||
|
||||
<div class="format-option selected" id="jsonOption" onclick="selectFormat('json')">
|
||||
<div class="format-radio">
|
||||
<div class="format-radio-dot"></div>
|
||||
</div>
|
||||
<div class="format-info">
|
||||
<div class="format-name">JSON</div>
|
||||
<div class="format-desc">Machine-readable, complete data structure</div>
|
||||
</div>
|
||||
<span class="format-badge" style="background: rgba(139,92,246,0.15); color: var(--amethyst-light);">Developer</span>
|
||||
</div>
|
||||
|
||||
<div class="format-option" id="pdfOption" onclick="selectFormat('pdf')">
|
||||
<div class="format-radio">
|
||||
<div class="format-radio-dot"></div>
|
||||
</div>
|
||||
<div class="format-info">
|
||||
<div class="format-name">PDF Summary</div>
|
||||
<div class="format-desc">Human-readable report with charts and insights</div>
|
||||
</div>
|
||||
<span class="format-badge" style="background: rgba(16,185,129,0.15); color: var(--emerald-light);">Readable</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Export button -->
|
||||
<button class="export-btn" id="exportBtn" onclick="startExport()">
|
||||
<span class="spinner" id="spinner"></span>
|
||||
<span class="btn-text" id="btnText">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="display:inline; vertical-align:middle; margin-right:4px;">
|
||||
<path d="M8 2V10M5 7L8 10L11 7" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M2 12H14" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
Export Data
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div class="privacy-note">
|
||||
Your data is encrypted and securely transmitted. We never share your personal information with third parties.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let selectedFormat = 'json';
|
||||
|
||||
function selectFormat(format) {
|
||||
selectedFormat = format;
|
||||
document.getElementById('jsonOption').classList.toggle('selected', format === 'json');
|
||||
document.getElementById('pdfOption').classList.toggle('selected', format === 'pdf');
|
||||
}
|
||||
|
||||
function startExport() {
|
||||
const btn = document.getElementById('exportBtn');
|
||||
const spinner = document.getElementById('spinner');
|
||||
const btnText = document.getElementById('btnText');
|
||||
|
||||
if (btn.classList.contains('loading') || btn.classList.contains('success')) return;
|
||||
|
||||
// Loading state
|
||||
btn.classList.add('loading');
|
||||
btnText.style.display = 'none';
|
||||
spinner.style.display = 'block';
|
||||
|
||||
// Simulate export delay
|
||||
setTimeout(() => {
|
||||
// Success state
|
||||
btn.classList.remove('loading');
|
||||
btn.classList.add('success');
|
||||
spinner.style.display = 'none';
|
||||
btnText.style.display = '';
|
||||
btnText.innerHTML = `
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="display:inline; vertical-align:middle; margin-right:4px;">
|
||||
<path d="M2 8L6 12L14 4" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
Export Ready — Download
|
||||
`;
|
||||
}, 2500);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
314
initial mockups/screens/system-states/64-account-deletion.html
Normal file
314
initial mockups/screens/system-states/64-account-deletion.html
Normal file
@@ -0,0 +1,314 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Delete Account</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.warning-card {
|
||||
background: rgba(239,68,68,0.06);
|
||||
border: 1px solid rgba(239,68,68,0.35);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 0 20px rgba(239,68,68,0.08);
|
||||
}
|
||||
.warning-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.warning-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: rgba(239,68,68,0.12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.warning-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--ruby);
|
||||
}
|
||||
.warning-text {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.55;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.warning-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(239,68,68,0.12);
|
||||
border: 1px solid rgba(239,68,68,0.25);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--ruby);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.deletion-list {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.deletion-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid rgba(28,34,64,0.5);
|
||||
}
|
||||
.deletion-item:last-child { border-bottom: none; }
|
||||
.deletion-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--ruby);
|
||||
opacity: 0.5;
|
||||
flex-shrink: 0;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.deletion-text {
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.deletion-list-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.deletion-list-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.confirm-section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.confirm-label {
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.confirm-label strong {
|
||||
color: var(--soft-light);
|
||||
font-weight: 600;
|
||||
}
|
||||
.confirm-input {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0 14px;
|
||||
font-family: var(--font-primary);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
letter-spacing: 0.05em;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.confirm-input::placeholder { color: var(--faint-light); font-weight: 400; letter-spacing: 0; }
|
||||
.confirm-input:focus { border-color: rgba(239,68,68,0.5); }
|
||||
.confirm-input.valid { border-color: var(--ruby); }
|
||||
|
||||
.delete-btn {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
border: none;
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--ruby);
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-primary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
transition: all 0.2s;
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
}
|
||||
.delete-btn.enabled {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0 0 24px rgba(239,68,68,0.35);
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
.delete-btn.enabled:hover { background: var(--ruby); filter: brightness(0.9); box-shadow: 0 0 32px rgba(239,68,68,0.45); }
|
||||
|
||||
.cancel-btn {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
color: var(--dim-light);
|
||||
font-size: 15px;
|
||||
font-family: var(--font-primary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.cancel-btn:hover { background: var(--deep-glass); color: var(--soft-light); }
|
||||
|
||||
.screen-content { padding-bottom: 24px; }
|
||||
</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="nav-header">
|
||||
<a class="nav-back" href="../you/37-you-settings.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Delete Account</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content">
|
||||
<div style="margin-top: 8px;"></div>
|
||||
|
||||
<!-- Warning card -->
|
||||
<div class="warning-card">
|
||||
<div class="warning-header">
|
||||
<div class="warning-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M9 3L16 15H2L9 3Z" stroke="#EF4444" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
<path d="M9 8V11" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<circle cx="9" cy="13" r="0.7" fill="#EF4444"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="warning-title">This action is permanent</div>
|
||||
</div>
|
||||
<div class="warning-text">Deleting your account cannot be undone. All your data will be permanently removed and cannot be recovered.</div>
|
||||
<div class="warning-badge">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none">
|
||||
<path d="M5 1L9 5L5 9L1 5Z" fill="currentColor" opacity="0.7"/>
|
||||
</svg>
|
||||
Irreversible
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- What gets deleted -->
|
||||
<div class="deletion-list-card">
|
||||
<div class="deletion-list-title">Everything that will be deleted</div>
|
||||
<div>
|
||||
<div class="deletion-item">
|
||||
<div class="deletion-dot"></div>
|
||||
<div class="deletion-text">All Turn history, reframes, and perspectives</div>
|
||||
</div>
|
||||
<div class="deletion-item">
|
||||
<div class="deletion-dot"></div>
|
||||
<div class="deletion-text">Mirror journals, session records, and detected fragments</div>
|
||||
</div>
|
||||
<div class="deletion-item">
|
||||
<div class="deletion-dot"></div>
|
||||
<div class="deletion-text">Lens goals, milestones, and rehearsal records</div>
|
||||
</div>
|
||||
<div class="deletion-item">
|
||||
<div class="deletion-dot"></div>
|
||||
<div class="deletion-text">Gallery patterns, keepsakes, and saved thoughts</div>
|
||||
</div>
|
||||
<div class="deletion-item">
|
||||
<div class="deletion-dot"></div>
|
||||
<div class="deletion-text">Evidence Wall tiles and all progress achievements</div>
|
||||
</div>
|
||||
<div class="deletion-item">
|
||||
<div class="deletion-dot"></div>
|
||||
<div class="deletion-text">Ritual history, streak data, and account preferences</div>
|
||||
</div>
|
||||
<div class="deletion-item">
|
||||
<div class="deletion-dot"></div>
|
||||
<div class="deletion-text">Your Prism subscription (no refunds for unused time)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Confirmation input -->
|
||||
<div class="confirm-section">
|
||||
<div class="confirm-label">Type <strong>DELETE</strong> to confirm you understand this is permanent:</div>
|
||||
<input
|
||||
type="text"
|
||||
class="confirm-input"
|
||||
id="confirmInput"
|
||||
placeholder="Type DELETE to confirm"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="characters"
|
||||
spellcheck="false"
|
||||
oninput="validateConfirm()"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Delete button (disabled until confirmed) -->
|
||||
<button class="delete-btn" id="deleteBtn">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M3 5H13M6 5V3H10V5M7 8V12M9 8V12M4 5L5 13H11L12 5" stroke="white" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
Delete My Account
|
||||
</button>
|
||||
|
||||
<!-- Cancel -->
|
||||
<a class="cancel-btn" href="../you/37-you-settings.html">Cancel</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function validateConfirm() {
|
||||
const input = document.getElementById('confirmInput');
|
||||
const btn = document.getElementById('deleteBtn');
|
||||
const isMatch = input.value === 'DELETE';
|
||||
|
||||
input.classList.toggle('valid', isMatch);
|
||||
btn.classList.toggle('enabled', isMatch);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
242
initial mockups/screens/turn/10-turn-home.html
Normal file
242
initial mockups/screens/turn/10-turn-home.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 Home</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.screen-aura {
|
||||
position: absolute;
|
||||
top: 18%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(139,92,246,0.16) 0%, rgba(59,130,246,0.05) 50%, transparent 70%);
|
||||
filter: blur(60px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.home-greeting {
|
||||
padding: var(--space-5) 0 var(--space-4);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.textarea-wrapper {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.textarea-field.home-textarea {
|
||||
min-height: 100px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.turn-btn-wrapper {
|
||||
position: sticky;
|
||||
bottom: calc(var(--tab-bar-height) + 12px);
|
||||
z-index: 5;
|
||||
padding: 0 0 var(--space-1);
|
||||
}
|
||||
.turn-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
margin-bottom: var(--space-2);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s ease-out, border-color 0.2s ease-out;
|
||||
}
|
||||
.turn-card:hover { background: var(--deep-glass); border-color: rgba(139,92,246,0.3); }
|
||||
.turn-card-content { flex: 1; overflow: hidden; }
|
||||
.turn-card-thought {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.turn-card-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.turn-card-date {
|
||||
font-size: 11px;
|
||||
color: var(--faint-light);
|
||||
}
|
||||
.section-header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--space-3);
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
.section-title-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--dim-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.section-link {
|
||||
font-size: 13px;
|
||||
color: var(--amethyst-light);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease-out;
|
||||
}
|
||||
.section-link:hover { color: var(--amethyst); }
|
||||
.content-pad {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.mini-kaleido-wrap {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">8:15</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 content-pad">
|
||||
<div class="screen-aura"></div>
|
||||
|
||||
<div class="home-greeting">
|
||||
<div class="heading text-pure">Good morning, Alex</div>
|
||||
<div class="body mt-1" style="color: var(--dim-light);">Day 14 in a row. What's on your mind?</div>
|
||||
</div>
|
||||
|
||||
<div class="textarea-wrapper">
|
||||
<textarea class="textarea-field home-textarea" placeholder="Something happened today..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="section-header-row">
|
||||
<span class="section-title-label">Recent Turns</span>
|
||||
<a class="section-link" href="14-turn-history.html">See all</a>
|
||||
</div>
|
||||
|
||||
<!-- Turn History Card 1 — Turn Pattern (amethyst 6-blade from patterns-kaleidoscope.svg) -->
|
||||
<a class="turn-card" href="13-turn-results.html">
|
||||
<div class="mini-kaleido-wrap">
|
||||
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: var(--radius-sm);">
|
||||
</div>
|
||||
<div class="turn-card-content">
|
||||
<div class="turn-card-thought">I completely bombed my presentation today and everyone saw</div>
|
||||
<div class="turn-card-meta">
|
||||
<span class="turn-card-date">Today, 8:15 AM</span>
|
||||
<span class="chip chip-amber" style="height:20px;font-size:10px;padding:0 8px;">Catastrophizing</span>
|
||||
<span class="chip chip-amber" style="height:20px;font-size:10px;padding:0 8px;">Overgeneralization</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- Turn History Card 2 — Sapphire tinted 6-blade -->
|
||||
<a class="turn-card" href="13-turn-results.html">
|
||||
<div class="mini-kaleido-wrap">
|
||||
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: var(--radius-sm);">
|
||||
</div>
|
||||
<div class="turn-card-content">
|
||||
<div class="turn-card-thought">Nobody at work actually cares about my ideas</div>
|
||||
<div class="turn-card-meta">
|
||||
<span class="turn-card-date">Yesterday, Feb 21</span>
|
||||
<span class="chip chip-amber" style="height:20px;font-size:10px;padding:0 8px;">Mind Reading</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- Turn History Card 3 — Emerald tinted 6-blade -->
|
||||
<a class="turn-card" href="13-turn-results.html">
|
||||
<div class="mini-kaleido-wrap">
|
||||
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: var(--radius-sm);">
|
||||
</div>
|
||||
<div class="turn-card-content">
|
||||
<div class="turn-card-thought">I should be further along in my career by now</div>
|
||||
<div class="turn-card-meta">
|
||||
<span class="turn-card-date">Feb 20</span>
|
||||
<span class="chip chip-amber" style="height:20px;font-size:10px;padding:0 8px;">Should Statements</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- Floating CTA -->
|
||||
<div class="turn-btn-wrapper">
|
||||
<a href="11-turn-input-active.html" class="btn btn-primary" style="text-decoration:none;">
|
||||
<!-- Fragment MD from fragment-icons.svg, amethyst, inline -->
|
||||
<svg width="18" height="18" viewBox="-12 -12 24 24" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="s10-btnFrag" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<filter id="s10-btnGlow" 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 filter="url(#s10-btnGlow)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#s10-btnFrag)" opacity="0.9"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||||
<path d="M 0,-12 L -12,0 L 0,0 Z" fill="#fff" opacity="0.1"/>
|
||||
<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>
|
||||
Turn the kaleidoscope
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item active" data-tab="turn" href="10-turn-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 2L20 12L12 22L4 12Z" fill="currentColor" opacity="0.9"/><path d="M12 2L20 12L12 12Z" fill="white" opacity="0.15"/></svg>
|
||||
<span class="tab-label">Turn</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="mirror" href="../mirror/15-mirror-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 3L16 8L18 14L12 19L6 14L8 8Z" stroke="currentColor" fill="none" stroke-width="1.2"/></svg>
|
||||
<span class="tab-label">Mirror</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="lens" href="../lens/20-lens-dashboard.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="currentColor" fill="none" stroke-width="1.2"/><circle cx="12" cy="12" r="4" stroke="currentColor" fill="none" stroke-width="0.8"/></svg>
|
||||
<span class="tab-label">Lens</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="gallery" href="../gallery/31-gallery-all.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><rect x="3" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/></svg>
|
||||
<span class="tab-label">Gallery</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="you" href="../you/35-you-profile.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="9" r="4" stroke="currentColor" fill="none" stroke-width="1.2"/><path d="M4 20C4 16 8 14 12 14C16 14 20 16 20 20" stroke="currentColor" fill="none" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
<span class="tab-label">You</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
145
initial mockups/screens/turn/11-turn-input-active.html
Normal file
145
initial mockups/screens/turn/11-turn-input-active.html
Normal file
@@ -0,0 +1,145 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — New Turn</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.textarea-wrapper {
|
||||
position: relative;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.textarea-field.focused {
|
||||
border-color: var(--amethyst);
|
||||
box-shadow: 0 0 0 3px rgba(139,92,246,0.15), var(--glow-amethyst);
|
||||
min-height: 160px;
|
||||
font-size: 17px;
|
||||
}
|
||||
.char-count {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 12px;
|
||||
font-size: 11px;
|
||||
color: var(--faint-light);
|
||||
}
|
||||
.input-hint {
|
||||
font-size: 12px;
|
||||
color: var(--faint-light);
|
||||
margin-bottom: var(--space-4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.keyboard-sim {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 260px;
|
||||
background: linear-gradient(to top, var(--deep-glass) 0%, transparent 100%);
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
.submit-area {
|
||||
margin-top: var(--space-4);
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
.aura-input {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(139,92,246,0.14) 0%, rgba(59,130,246,0.04) 50%, transparent 70%);
|
||||
filter: blur(50px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">8:15</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="nav-header">
|
||||
<a class="nav-back" href="10-turn-home.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">New Turn</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-bottom: 20px; position: relative;">
|
||||
<div class="aura-input"></div>
|
||||
|
||||
<div style="margin-top: var(--space-4); position: relative; z-index: 1;">
|
||||
<div class="input-hint">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<path d="M7 1L11 7L7 13L3 7Z" fill="var(--amethyst)" opacity="0.7"/>
|
||||
</svg>
|
||||
Write freely — the Turn will find new angles
|
||||
</div>
|
||||
|
||||
<div class="textarea-wrapper">
|
||||
<textarea class="textarea-field focused" id="mainTextarea">I completely bombed my presentation today and everyone saw</textarea>
|
||||
<span class="char-count" id="charCount">58 / 500</span>
|
||||
</div>
|
||||
|
||||
<div class="submit-area">
|
||||
<a href="12-turn-animation.html" class="btn btn-primary" style="text-decoration:none;">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M9 1.5L15 9L9 16.5L3 9Z" fill="white" opacity="0.85"/>
|
||||
<path d="M9 1.5L15 9L9 9Z" fill="white" opacity="0.15"/>
|
||||
</svg>
|
||||
Turn the kaleidoscope
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--deep-glass); border-radius: var(--radius-md); border: 1px solid var(--twilight);">
|
||||
<div class="body-sm text-dim">Kalei will analyze your thought through 3 different cognitive lenses — Perspective Shift, Evidence Check, and Action Step — to reveal new angles on what you're feeling.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Keyboard simulation overlay -->
|
||||
<div class="keyboard-sim"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const textarea = document.getElementById('mainTextarea');
|
||||
const charCount = document.getElementById('charCount');
|
||||
textarea.addEventListener('input', () => {
|
||||
charCount.textContent = textarea.value.length + ' / 500';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
353
initial mockups/screens/turn/12-turn-animation.html
Normal file
353
initial mockups/screens/turn/12-turn-animation.html
Normal file
@@ -0,0 +1,353 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Turning...</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.anim-screen {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Prismatic shimmer background */
|
||||
.prismatic-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(139,92,246,0.08),
|
||||
rgba(59,130,246,0.06),
|
||||
rgba(16,185,129,0.05),
|
||||
rgba(245,158,11,0.06),
|
||||
rgba(236,72,153,0.05)
|
||||
);
|
||||
background-size: 400% 400%;
|
||||
animation: prismaticShift 4s ease infinite;
|
||||
}
|
||||
|
||||
/* Collapsing thought text */
|
||||
.thought-text {
|
||||
position: absolute;
|
||||
top: 160px;
|
||||
left: 32px;
|
||||
right: 32px;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-4);
|
||||
font-size: 16px;
|
||||
color: var(--soft-light);
|
||||
text-align: center;
|
||||
animation: turnCollapse 0.8s ease-in 1s forwards;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes turnCollapse {
|
||||
0% { opacity: 1; transform: scale(1); }
|
||||
100% { opacity: 0; transform: scale(0.3) translateY(-60px); }
|
||||
}
|
||||
|
||||
/* Central fragment that multiplies */
|
||||
.center-fragment {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: centralAppear 0.5s ease-out 1.8s both;
|
||||
}
|
||||
|
||||
@keyframes centralAppear {
|
||||
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
|
||||
60% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
|
||||
100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
|
||||
}
|
||||
|
||||
/* Three emerging fragments */
|
||||
.fragment-1, .fragment-2, .fragment-3 {
|
||||
position: absolute;
|
||||
animation: fragmentEmerge 0.8s ease-out both;
|
||||
opacity: 0;
|
||||
}
|
||||
.fragment-1 {
|
||||
top: 30%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
animation-delay: 2.4s;
|
||||
--drift-x: 0px;
|
||||
--drift-y: -40px;
|
||||
}
|
||||
.fragment-2 {
|
||||
top: 55%;
|
||||
left: 25%;
|
||||
animation-delay: 2.6s;
|
||||
--drift-x: -30px;
|
||||
--drift-y: 20px;
|
||||
}
|
||||
.fragment-3 {
|
||||
top: 55%;
|
||||
left: 65%;
|
||||
animation-delay: 2.8s;
|
||||
--drift-x: 30px;
|
||||
--drift-y: 20px;
|
||||
}
|
||||
|
||||
@keyframes fragmentEmerge {
|
||||
0% { opacity: 0; transform: scale(0.2) translate(0, 0); }
|
||||
50% { opacity: 1; transform: scale(1.15) translate(calc(var(--drift-x) * 0.5), calc(var(--drift-y) * 0.5)); }
|
||||
100% { opacity: 1; transform: scale(1) translate(var(--drift-x), var(--drift-y)); }
|
||||
}
|
||||
|
||||
/* Crystallize labels */
|
||||
.crystal-label {
|
||||
position: absolute;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
opacity: 0;
|
||||
animation: settleIn 0.5s ease-out both;
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
}
|
||||
.crystal-label-1 {
|
||||
top: 24%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: var(--amethyst-light);
|
||||
animation-delay: 3.2s;
|
||||
}
|
||||
.crystal-label-2 {
|
||||
top: 68%;
|
||||
left: 8%;
|
||||
color: var(--sapphire-light);
|
||||
animation-delay: 3.4s;
|
||||
}
|
||||
.crystal-label-3 {
|
||||
top: 68%;
|
||||
left: 56%;
|
||||
color: var(--emerald-light);
|
||||
animation-delay: 3.6s;
|
||||
}
|
||||
|
||||
@keyframes settleIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes settleIn1 {
|
||||
from { opacity: 0; transform: translateX(-50%) translateY(8px); }
|
||||
to { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
}
|
||||
.crystal-label-1 { animation-name: settleIn1; }
|
||||
|
||||
/* Orbiting motes */
|
||||
.mote {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
animation: orbit 4s linear infinite;
|
||||
}
|
||||
|
||||
/* Status label */
|
||||
.status-label {
|
||||
position: absolute;
|
||||
bottom: 120px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
animation: fadeIn 0.5s ease-out 2s both;
|
||||
}
|
||||
|
||||
/* See results button */
|
||||
.see-results-btn {
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
left: 32px;
|
||||
right: 32px;
|
||||
animation: fadeIn 0.5s ease-out 4s both;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Big rotating kaleido */
|
||||
.big-kaleido {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
animation:
|
||||
kaleido-appear 1s ease-out 2s forwards,
|
||||
rotate 20s linear 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes kaleido-appear {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 0.5; }
|
||||
}
|
||||
|
||||
@keyframes prismaticShift {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from { transform: translate(-50%, -50%) rotate(0deg); }
|
||||
to { transform: translate(-50%, -50%) rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes orbit {
|
||||
from { transform: translate(-50%, -50%) rotate(0deg) translateX(80px); }
|
||||
to { transform: translate(-50%, -50%) rotate(360deg) translateX(80px); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<div class="status-bar" style="position:relative;z-index:10;">
|
||||
<span class="time">8:15</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="anim-screen">
|
||||
<div class="prismatic-bg"></div>
|
||||
|
||||
<!-- Collapsing thought -->
|
||||
<div class="thought-text">I completely bombed my presentation today and everyone saw</div>
|
||||
|
||||
<!-- Background kaleidoscope -->
|
||||
<div class="big-kaleido">
|
||||
<img src="../../assets/kalei-logo.svg" width="200" height="200" alt="Kalei" style="opacity: 0.6;">
|
||||
</div>
|
||||
|
||||
<!-- Central fragment -->
|
||||
<div class="center-fragment">
|
||||
<svg width="48" height="48" viewBox="0 0 48 48">
|
||||
<defs>
|
||||
<linearGradient id="cfGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<filter id="cfGlow">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g filter="url(#cfGlow)">
|
||||
<path d="M24 4L40 24L24 44L8 24Z" fill="url(#cfGrad)" opacity="0.9"/>
|
||||
<path d="M24 4L40 24L24 24Z" fill="#fff" opacity="0.15"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Fragment 1 — Amethyst -->
|
||||
<div class="fragment-1">
|
||||
<svg width="36" height="36" viewBox="0 0 36 36">
|
||||
<defs>
|
||||
<linearGradient id="f1g" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<filter id="f1glow">
|
||||
<feGaussianBlur stdDeviation="2" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g filter="url(#f1glow)">
|
||||
<path d="M18 3L30 18L18 33L6 18Z" fill="url(#f1g)" opacity="0.9"/>
|
||||
<path d="M18 3L30 18L18 18Z" fill="#fff" opacity="0.15"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Fragment 2 — Sapphire -->
|
||||
<div class="fragment-2">
|
||||
<svg width="36" height="36" viewBox="0 0 36 36">
|
||||
<defs>
|
||||
<linearGradient id="f2g" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#93C5FD"/>
|
||||
<stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
<filter id="f2glow">
|
||||
<feGaussianBlur stdDeviation="2" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g filter="url(#f2glow)">
|
||||
<path d="M18 3L30 18L18 33L6 18Z" fill="url(#f2g)" opacity="0.9"/>
|
||||
<path d="M18 3L30 18L18 18Z" fill="#fff" opacity="0.15"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Fragment 3 — Emerald -->
|
||||
<div class="fragment-3">
|
||||
<svg width="36" height="36" viewBox="0 0 36 36">
|
||||
<defs>
|
||||
<linearGradient id="f3g" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<filter id="f3glow">
|
||||
<feGaussianBlur stdDeviation="2" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g filter="url(#f3glow)">
|
||||
<path d="M18 3L30 18L18 33L6 18Z" fill="url(#f3g)" opacity="0.9"/>
|
||||
<path d="M18 3L30 18L18 18Z" fill="#fff" opacity="0.15"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Crystal labels -->
|
||||
<div class="crystal-label crystal-label-1">Perspective Shift</div>
|
||||
<div class="crystal-label crystal-label-2">Evidence Check</div>
|
||||
<div class="crystal-label crystal-label-3">Action Step</div>
|
||||
|
||||
<!-- Status -->
|
||||
<div class="status-label">Turning the kaleidoscope...</div>
|
||||
|
||||
<!-- See results -->
|
||||
<div class="see-results-btn">
|
||||
<a href="13-turn-results.html" class="btn btn-primary" style="text-decoration:none;">
|
||||
See your results
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Auto-redirect after animation completes
|
||||
setTimeout(() => {
|
||||
window.location.href = '13-turn-results.html';
|
||||
}, 5000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
327
initial mockups/screens/turn/13-turn-results.html
Normal file
327
initial mockups/screens/turn/13-turn-results.html
Normal file
@@ -0,0 +1,327 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Your Turn</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.screen-aura {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(139,92,246,0.14) 0%, transparent 70%);
|
||||
filter: blur(60px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.original-thought-card {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.original-thought-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--faint-light);
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
.original-thought-text {
|
||||
font-size: 15px;
|
||||
color: var(--dim-light);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.kaleido-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: var(--space-3) 0;
|
||||
}
|
||||
.distortions-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-4);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
.distortion-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.actions-row {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-4);
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3) var(--space-2);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out;
|
||||
}
|
||||
.action-btn:hover { background: var(--twilight); border-color: rgba(139,92,246,0.35); box-shadow: 0 0 12px rgba(139,92,246,0.1); }
|
||||
.action-btn-label {
|
||||
font-size: 11px;
|
||||
color: var(--dim-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
/* Distortion chip with extracted icon */
|
||||
.chip-distortion {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
background: rgba(245,158,11,0.12);
|
||||
color: var(--amber-light);
|
||||
border: 1px solid rgba(245,158,11,0.2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<div class="status-bar">
|
||||
<span class="time">8:15</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="nav-header">
|
||||
<a class="nav-back" href="10-turn-home.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Your Turn</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-bottom: var(--space-6); position: relative;">
|
||||
<div class="screen-aura"></div>
|
||||
|
||||
<!-- Original thought -->
|
||||
<div class="original-thought-card mt-3">
|
||||
<div class="original-thought-label">Your thought</div>
|
||||
<div class="original-thought-text">I completely bombed my presentation today and everyone saw</div>
|
||||
</div>
|
||||
|
||||
<!-- Detected distortions — using exact icon paths from icons-distortions.svg -->
|
||||
<div class="distortion-label">Patterns detected</div>
|
||||
<div class="distortions-row">
|
||||
|
||||
<!-- Catastrophizing icon: cascading shard breaking into pieces (from icons-distortions.svg line 25-40) -->
|
||||
<span class="chip-distortion">
|
||||
<svg width="16" height="16" viewBox="-12 -12 24 24" fill="none">
|
||||
<defs>
|
||||
<filter id="s13-gCatastroph" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="1.8" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<linearGradient id="s13-amberGr1" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g filter="url(#s13-gCatastroph)">
|
||||
<path d="M 0,-10 L 5,0 L 0,10 L -5,0 Z" fill="url(#s13-amberGr1)" opacity="0.9"/>
|
||||
<path d="M 0,-10 L 5,0 L -5,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<path d="M -8,6 L -5,10 L -9,12 L -11,8 Z" fill="#F59E0B" opacity="0.5"/>
|
||||
<path d="M 7,8 L 10,12 L 8,14 L 5,11 Z" fill="#F59E0B" opacity="0.4"/>
|
||||
<line x1="0" y1="11" x2="0" y2="16" stroke="#FCD34D" stroke-width="0.5" opacity="0.4"/>
|
||||
</g>
|
||||
</svg>
|
||||
Catastrophizing
|
||||
</span>
|
||||
|
||||
<!-- Overgeneralization icon: one dot replicating into many (from icons-distortions.svg line 167-182) -->
|
||||
<span class="chip-distortion">
|
||||
<svg width="16" height="16" viewBox="-12 -12 24 24" fill="none">
|
||||
<defs>
|
||||
<filter id="s13-gOvergen" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="1.8" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<linearGradient id="s13-amberGr2" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g filter="url(#s13-gOvergen)">
|
||||
<path d="M -10,0 L -7,-3 L -4,0 L -7,3 Z" fill="url(#s13-amberGr2)" opacity="0.9"/>
|
||||
<path d="M -10,0 L -7,-3 L -4,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<line x1="-3" y1="0" x2="0" y2="0" stroke="#FCD34D" stroke-width="0.5" opacity="0.4"/>
|
||||
<path d="M 2,-6 L 4,-8 L 6,-6 L 4,-4 Z" fill="#F59E0B" opacity="0.7"/>
|
||||
<path d="M 4,0 L 6,-2 L 8,0 L 6,2 Z" fill="#F59E0B" opacity="0.6"/>
|
||||
<path d="M 2,6 L 4,4 L 6,6 L 4,8 Z" fill="#F59E0B" opacity="0.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
Overgeneralization
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Kaleidoscope divider — Turn Pattern from patterns-kaleidoscope.svg (6 amethyst blades) -->
|
||||
<div class="kaleido-divider">
|
||||
<img src="../../assets/kalei-logo.svg" width="100" height="100" alt="Kalei" style="filter: drop-shadow(0 0 12px rgba(139,92,246,0.3));">
|
||||
</div>
|
||||
|
||||
<!-- Reframe blocks -->
|
||||
<div class="reframe-block amethyst" style="animation: fadeIn 0.4s ease-out 0.1s both; opacity:0;">
|
||||
<div class="reframe-label">Perspective Shift</div>
|
||||
<div class="reframe-text">One rough presentation doesn't define your skills or how others see you. The word "bombed" is your brain's catastrophe filter — not an objective review. People in that room were focused on their own reactions, not cataloguing your performance.</div>
|
||||
</div>
|
||||
|
||||
<div class="reframe-block sapphire" style="animation: fadeIn 0.4s ease-out 0.2s both; opacity:0;">
|
||||
<div class="reframe-label">Evidence Check</div>
|
||||
<div class="reframe-text">You've presented before and it has gone well. Those moments are just as real as this one. What specific evidence do you have that "everyone" was watching critically — or is that a feeling your mind dressed up as a fact?</div>
|
||||
</div>
|
||||
|
||||
<div class="reframe-block emerald" style="animation: fadeIn 0.4s ease-out 0.3s both; opacity:0;">
|
||||
<div class="reframe-label">Action Step</div>
|
||||
<div class="reframe-text">Tonight, write down one thing that did go okay in that presentation — one slide, one answer, one moment of clarity. Then write one specific thing to prepare differently next time. That's how you close the loop rather than replay it.</div>
|
||||
</div>
|
||||
|
||||
<!-- Guide: If-Then Micro-Action Card — reactive behavior per Section 13B -->
|
||||
<div style="background: var(--kalei-navy); border: 1px solid rgba(16,185,129,0.35); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-3); box-shadow: 0 0 16px rgba(16,185,129,0.08); animation: fadeIn 0.4s ease-out 0.4s both; opacity: 0;">
|
||||
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3);">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16">
|
||||
<defs>
|
||||
<linearGradient id="s13-ifThenFrag" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#047857"/>
|
||||
</linearGradient>
|
||||
<filter id="s13-ifThenGlow" 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(8,8)" filter="url(#s13-ifThenGlow)">
|
||||
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#s13-ifThenFrag)" opacity="0.9"/>
|
||||
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span style="font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--emerald-light); letter-spacing: 0.04em; text-transform: uppercase;">◇ Make it real</span>
|
||||
</div>
|
||||
<p style="font-size: 15px; color: var(--soft-light); line-height: 1.55; margin-bottom: var(--space-3);">
|
||||
<strong style="color: var(--pure-light);">If</strong> I start replaying the presentation and feel the shame spiral building,
|
||||
<strong style="color: var(--pure-light);">then</strong> I will open my notes and write down one thing that actually went okay — before I let the story grow.
|
||||
</p>
|
||||
<div style="display: flex; gap: var(--space-3);">
|
||||
<button style="flex: 1; height: 36px; background: var(--emerald); border: none; border-radius: var(--radius-full); font-family: var(--font-primary); font-size: 13px; font-weight: 600; color: var(--pure-light); cursor: pointer; transition: background 0.2s ease-out; box-shadow: 0 0 12px rgba(16,185,129,0.25);" onmouseover="this.style.background='var(--emerald-light)'" onmouseout="this.style.background='var(--emerald)'">Save to Lens</button>
|
||||
<button style="flex: 1; height: 36px; background: transparent; border: 1px solid var(--twilight); border-radius: var(--radius-full); font-family: var(--font-primary); font-size: 13px; font-weight: 500; color: var(--dim-light); cursor: pointer; transition: border-color 0.2s ease-out;" onmouseover="this.style.borderColor='var(--faint-light)'" onmouseout="this.style.borderColor='var(--twilight)'">Skip</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Goal Connection — reactive per Section 13B Turn behavior -->
|
||||
<div style="text-align: center; margin-bottom: var(--space-4); animation: fadeIn 0.4s ease-out 0.5s both; opacity: 0;">
|
||||
<span style="font-size: 13px; color: var(--dim-light);">This connects to your goal: </span>
|
||||
<a href="../lens/27-lens-goal-detail.html" style="font-size: 13px; color: var(--emerald-light); text-decoration: none; font-weight: 500; transition: color 0.2s ease-out;" onmouseover="this.style.color='var(--emerald)'" onmouseout="this.style.color='var(--emerald-light)'">Present with confidence</a>
|
||||
</div>
|
||||
|
||||
<!-- Actions row -->
|
||||
<div class="actions-row">
|
||||
<a href="#" class="action-btn" onclick="showToast(); return false;">
|
||||
<!-- Bookmark icon -->
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M14 2.5C14.8 2.5 15.5 3.2 15.5 4V16.5L10 14L4.5 16.5V4C4.5 3.2 5.2 2.5 6 2.5H14Z" stroke="var(--amethyst-light)" fill="none" stroke-width="1.3" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span class="action-btn-label">Save</span>
|
||||
</a>
|
||||
<a href="../modals/61-pattern-share.html" class="action-btn">
|
||||
<!-- Share icon -->
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<circle cx="16" cy="4" r="2" stroke="var(--amethyst-light)" fill="none" stroke-width="1.3"/>
|
||||
<circle cx="4" cy="10" r="2" stroke="var(--amethyst-light)" fill="none" stroke-width="1.3"/>
|
||||
<circle cx="16" cy="16" r="2" stroke="var(--amethyst-light)" fill="none" stroke-width="1.3"/>
|
||||
<path d="M6 9L14 5M6 11L14 15" stroke="var(--amethyst-light)" stroke-width="1.3"/>
|
||||
</svg>
|
||||
<span class="action-btn-label">Share</span>
|
||||
</a>
|
||||
<a href="11-turn-input-active.html" class="action-btn">
|
||||
<!-- Refresh icon -->
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M16 4C14.5 2.5 12.4 1.5 10 1.5C5.3 1.5 1.5 5.3 1.5 10S5.3 18.5 10 18.5C14 18.5 17.4 15.9 18.3 12.3" stroke="var(--amethyst-light)" fill="none" stroke-width="1.3" stroke-linecap="round"/>
|
||||
<path d="M13 1.5L16.5 4L13 6.5" stroke="var(--amethyst-light)" fill="none" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span class="action-btn-label">Try Again</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Toast notification -->
|
||||
<div id="toast" style="
|
||||
position: absolute; top: 75px; left: 50%; transform: translateX(-50%);
|
||||
background: var(--deep-glass); border: 1px solid var(--emerald);
|
||||
border-radius: var(--radius-full); padding: 8px 20px;
|
||||
display: none; align-items: center; gap: var(--space-2);
|
||||
box-shadow: var(--glow-emerald);
|
||||
white-space: nowrap; z-index: 20;
|
||||
">
|
||||
<!-- Fragment diamond SM from fragment-icons.svg -->
|
||||
<svg width="14" height="14" viewBox="-8 -8 16 16" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="s13-grEm" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"/>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<filter id="s13-glowSmToast" 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 filter="url(#s13-glowSmToast)">
|
||||
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#s13-grEm)" opacity="0.9"/>
|
||||
<path d="M 0,-8 L 8,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<path d="M 0,-8 L -8,0 L 0,0 Z" fill="#fff" opacity="0.08"/>
|
||||
<line x1="0" y1="-8" x2="0" y2="8" stroke="#fff" stroke-width="0.4" opacity="0.2"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="body-sm text-soft" style="font-weight:500;">Turn saved</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showToast() {
|
||||
const toast = document.getElementById('toast');
|
||||
toast.style.display = 'flex';
|
||||
toast.style.animation = 'fadeIn 0.3s ease';
|
||||
setTimeout(() => {
|
||||
toast.style.opacity = '0';
|
||||
toast.style.transition = 'opacity 0.3s';
|
||||
setTimeout(() => { toast.style.display = 'none'; toast.style.opacity = '1'; }, 300);
|
||||
}, 2000);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
336
initial mockups/screens/turn/14-turn-history.html
Normal file
336
initial mockups/screens/turn/14-turn-history.html
Normal file
@@ -0,0 +1,336 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Turn History</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.filter-row {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-3) 0 var(--space-4);
|
||||
}
|
||||
.filter-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
padding: 0 var(--space-3);
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--twilight);
|
||||
background: var(--deep-glass);
|
||||
color: var(--dim-light);
|
||||
transition: all 0.2s ease-out;
|
||||
text-decoration: none;
|
||||
}
|
||||
.filter-chip:hover:not(.active) {
|
||||
border-color: var(--faint-light);
|
||||
color: var(--soft-light);
|
||||
}
|
||||
.filter-chip.active {
|
||||
background: rgba(139,92,246,0.15);
|
||||
border-color: var(--amethyst);
|
||||
color: var(--amethyst-light);
|
||||
}
|
||||
.history-card {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-3);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s ease-out, border-color 0.2s ease-out;
|
||||
}
|
||||
.history-card:hover { background: var(--deep-glass); border-color: rgba(139,92,246,0.3); }
|
||||
.history-kaleido {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
flex-shrink: 0;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
.history-content { flex: 1; }
|
||||
.history-thought {
|
||||
font-size: 14px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.4;
|
||||
margin-bottom: var(--space-2);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.history-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.history-date {
|
||||
font-size: 11px;
|
||||
color: var(--faint-light);
|
||||
}
|
||||
.history-perspectives {
|
||||
font-size: 11px;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.chips-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
.mini-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
height: 20px;
|
||||
padding: 0 7px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
background: rgba(245,158,11,0.12);
|
||||
color: var(--amber-light);
|
||||
}
|
||||
.section-divider {
|
||||
height: 1px;
|
||||
background: var(--twilight);
|
||||
margin: var(--space-3) 0 var(--space-4);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.month-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--faint-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.screen-aura {
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(139,92,246,0.12) 0%, rgba(59,130,246,0.04) 50%, transparent 70%);
|
||||
filter: blur(60px);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
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="nav-header">
|
||||
<a class="nav-back" href="10-turn-home.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Turn History</span>
|
||||
<span class="nav-action">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<circle cx="10" cy="5" r="1.5" fill="var(--dim-light)"/>
|
||||
<circle cx="10" cy="10" r="1.5" fill="var(--dim-light)"/>
|
||||
<circle cx="10" cy="15" r="1.5" fill="var(--dim-light)"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content" style="padding-bottom: 24px; position: relative;">
|
||||
<div class="screen-aura"></div>
|
||||
|
||||
<div class="filter-row">
|
||||
<a class="filter-chip active" href="#">All</a>
|
||||
<a class="filter-chip" href="#">This Week</a>
|
||||
<a class="filter-chip" href="#">Saved</a>
|
||||
</div>
|
||||
|
||||
<div class="month-label">February 2026</div>
|
||||
|
||||
<!-- Card 1 — Turn Pattern amethyst (blade shape from patterns-kaleidoscope.svg Turn Pattern) -->
|
||||
<a class="history-card" href="13-turn-results.html">
|
||||
<div class="history-kaleido">
|
||||
<img src="../../assets/kalei-logo.svg" width="56" height="56" alt="Kalei" style="border-radius: var(--radius-sm);">
|
||||
</div>
|
||||
<div class="history-content">
|
||||
<div class="history-thought">I completely bombed my presentation today and everyone saw</div>
|
||||
<div class="history-meta">
|
||||
<span class="history-date">Today, 8:15 AM</span>
|
||||
<span class="history-perspectives">3 perspectives</span>
|
||||
</div>
|
||||
<div class="chips-row">
|
||||
<span class="mini-chip">Catastrophizing</span>
|
||||
<span class="mini-chip">Overgeneralization</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<a class="history-card" href="13-turn-results.html">
|
||||
<div class="history-kaleido">
|
||||
<img src="../../assets/kalei-logo.svg" width="56" height="56" alt="Kalei" style="border-radius: var(--radius-sm);">
|
||||
</div>
|
||||
<div class="history-content">
|
||||
<div class="history-thought">Nobody at work actually cares about my ideas</div>
|
||||
<div class="history-meta">
|
||||
<span class="history-date">Yesterday, Feb 21</span>
|
||||
<span class="history-perspectives">3 perspectives</span>
|
||||
</div>
|
||||
<div class="chips-row">
|
||||
<span class="mini-chip">Mind Reading</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<a class="history-card" href="13-turn-results.html">
|
||||
<div class="history-kaleido">
|
||||
<img src="../../assets/kalei-logo.svg" width="56" height="56" alt="Kalei" style="border-radius: var(--radius-sm);">
|
||||
</div>
|
||||
<div class="history-content">
|
||||
<div class="history-thought">I should be further along in my career by now</div>
|
||||
<div class="history-meta">
|
||||
<span class="history-date">Feb 20</span>
|
||||
<span class="history-perspectives">3 perspectives</span>
|
||||
</div>
|
||||
<div class="chips-row">
|
||||
<span class="mini-chip">Should Statements</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Card 4 -->
|
||||
<a class="history-card" href="13-turn-results.html">
|
||||
<div class="history-kaleido">
|
||||
<img src="../../assets/kalei-logo.svg" width="56" height="56" alt="Kalei" style="border-radius: var(--radius-sm);">
|
||||
</div>
|
||||
<div class="history-content">
|
||||
<div class="history-thought">Everything is going to fall apart if I don't fix this today</div>
|
||||
<div class="history-meta">
|
||||
<span class="history-date">Feb 19</span>
|
||||
<span class="history-perspectives">3 perspectives</span>
|
||||
</div>
|
||||
<div class="chips-row">
|
||||
<span class="mini-chip">Catastrophizing</span>
|
||||
<span class="mini-chip">Fortune Telling</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Card 5 -->
|
||||
<a class="history-card" href="13-turn-results.html">
|
||||
<div class="history-kaleido">
|
||||
<img src="../../assets/kalei-logo.svg" width="56" height="56" alt="Kalei" style="border-radius: var(--radius-sm);">
|
||||
</div>
|
||||
<div class="history-content">
|
||||
<div class="history-thought">It's all my fault the team missed the deadline</div>
|
||||
<div class="history-meta">
|
||||
<span class="history-date">Feb 18</span>
|
||||
<span class="history-perspectives">3 perspectives</span>
|
||||
</div>
|
||||
<div class="chips-row">
|
||||
<span class="mini-chip">Personalization</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Card 6 -->
|
||||
<a class="history-card" href="13-turn-results.html">
|
||||
<div class="history-kaleido">
|
||||
<img src="../../assets/kalei-logo.svg" width="56" height="56" alt="Kalei" style="border-radius: var(--radius-sm);">
|
||||
</div>
|
||||
<div class="history-content">
|
||||
<div class="history-thought">I never stick to anything I start — I'm not disciplined</div>
|
||||
<div class="history-meta">
|
||||
<span class="history-date">Feb 17</span>
|
||||
<span class="history-perspectives">3 perspectives</span>
|
||||
</div>
|
||||
<div class="chips-row">
|
||||
<span class="mini-chip">Black-and-White</span>
|
||||
<span class="mini-chip">Labeling</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="section-divider"></div>
|
||||
<div class="month-label">January 2026</div>
|
||||
|
||||
<!-- Card 7 -->
|
||||
<a class="history-card" href="13-turn-results.html">
|
||||
<div class="history-kaleido">
|
||||
<img src="../../assets/kalei-logo.svg" width="56" height="56" alt="Kalei" style="border-radius: var(--radius-sm);">
|
||||
</div>
|
||||
<div class="history-content">
|
||||
<div class="history-thought">My friend is upset with me and it's definitely my fault somehow</div>
|
||||
<div class="history-meta">
|
||||
<span class="history-date">Jan 30</span>
|
||||
<span class="history-perspectives">3 perspectives</span>
|
||||
</div>
|
||||
<div class="chips-row">
|
||||
<span class="mini-chip">Personalization</span>
|
||||
<span class="mini-chip">Fortune Telling</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item active" data-tab="turn" href="10-turn-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 2L20 12L12 22L4 12Z" fill="currentColor" opacity="0.9"/><path d="M12 2L20 12L12 12Z" fill="white" opacity="0.15"/></svg>
|
||||
<span class="tab-label">Turn</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="mirror" href="../mirror/15-mirror-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 3L16 8L18 14L12 19L6 14L8 8Z" stroke="currentColor" fill="none" stroke-width="1.2"/></svg>
|
||||
<span class="tab-label">Mirror</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="lens" href="../lens/20-lens-dashboard.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="currentColor" fill="none" stroke-width="1.2"/><circle cx="12" cy="12" r="4" stroke="currentColor" fill="none" stroke-width="0.8"/></svg>
|
||||
<span class="tab-label">Lens</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="gallery" href="../gallery/31-gallery-all.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><rect x="3" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/></svg>
|
||||
<span class="tab-label">Gallery</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="you" href="../you/35-you-profile.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="9" r="4" stroke="currentColor" fill="none" stroke-width="1.2"/><path d="M4 20C4 16 8 14 12 14C16 14 20 16 20 20" stroke="currentColor" fill="none" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
<span class="tab-label">You</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
381
initial mockups/screens/you/35-you-profile.html
Normal file
381
initial mockups/screens/you/35-you-profile.html
Normal file
@@ -0,0 +1,381 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — You Profile</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.avatar-circle {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--deep-glass), var(--twilight));
|
||||
border: 2px solid var(--soft-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: var(--soft-light);
|
||||
box-shadow: var(--glow-white);
|
||||
flex-shrink: 0;
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
}
|
||||
.profile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-4) 0 var(--space-5);
|
||||
}
|
||||
.profile-info { flex: 1; }
|
||||
.profile-name {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--pure-light);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.profile-since {
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.stats-row {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.stat-block-you {
|
||||
flex: 1;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3);
|
||||
text-align: center;
|
||||
}
|
||||
.stat-block-you .val {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
.stat-block-you .lbl {
|
||||
font-size: 10px;
|
||||
color: var(--dim-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.quick-links-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.quick-link-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
text-decoration: none;
|
||||
transition: background 0.15s;
|
||||
border-bottom: 1px solid var(--twilight);
|
||||
}
|
||||
.quick-link-item:last-child { border-bottom: none; }
|
||||
.quick-link-item:hover { background: var(--deep-glass); }
|
||||
.quick-link-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--deep-glass);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.quick-link-label {
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
.quick-link-chevron { color: var(--faint-light); }
|
||||
.evidence-preview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 6px;
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
.preview-tile {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid;
|
||||
cursor: pointer;
|
||||
}
|
||||
.preview-tile.amethyst {
|
||||
background: rgba(139,92,246,0.12);
|
||||
border-color: var(--amethyst);
|
||||
box-shadow: 0 0 8px rgba(139,92,246,0.15);
|
||||
}
|
||||
.preview-tile.amber {
|
||||
background: rgba(245,158,11,0.12);
|
||||
border-color: var(--amber);
|
||||
box-shadow: 0 0 8px rgba(245,158,11,0.15);
|
||||
}
|
||||
.preview-tile.emerald {
|
||||
background: rgba(16,185,129,0.12);
|
||||
border-color: var(--emerald);
|
||||
box-shadow: 0 0 8px rgba(16,185,129,0.15);
|
||||
}
|
||||
.preview-tile.sapphire {
|
||||
background: rgba(59,130,246,0.12);
|
||||
border-color: var(--sapphire);
|
||||
box-shadow: 0 0 8px rgba(59,130,246,0.15);
|
||||
}
|
||||
.preview-tile.ghost {
|
||||
background: transparent;
|
||||
border-color: var(--twilight);
|
||||
border-style: dashed;
|
||||
}
|
||||
.spectrum-preview-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
text-decoration: none;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.spectrum-preview-card:hover { background: var(--deep-glass); }
|
||||
.prism-badge {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
background: var(--prismatic);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
border: 1px solid;
|
||||
border-image: var(--prismatic) 1;
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
.prism-badge-wrap {
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(59,130,246,0.2), rgba(16,185,129,0.2));
|
||||
border-radius: var(--radius-full);
|
||||
padding: 3px 10px;
|
||||
}
|
||||
.prism-badge-text {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
background: var(--prismatic);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.stats-link {
|
||||
display: block;
|
||||
text-align: right;
|
||||
font-size: 13px;
|
||||
color: var(--amethyst-light);
|
||||
text-decoration: none;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.stats-link:hover { opacity: 0.8; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<!-- STATUS BAR -->
|
||||
<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>
|
||||
|
||||
<!-- SCREEN CONTENT -->
|
||||
<div class="screen-content" style="padding-top: var(--space-2);">
|
||||
|
||||
<!-- Profile Header -->
|
||||
<div class="profile-header">
|
||||
<div class="avatar-circle">A</div>
|
||||
<div class="profile-info">
|
||||
<div class="profile-name">Alex</div>
|
||||
<div class="profile-since">alex@email.com · Member since Feb 1, 2026</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Row -->
|
||||
<a href="36-you-stats.html" class="stats-link">View all stats</a>
|
||||
<div class="stats-row">
|
||||
<div class="stat-block-you">
|
||||
<div class="val" style="color: var(--amethyst-light);">47</div>
|
||||
<div class="lbl">Turns</div>
|
||||
</div>
|
||||
<div class="stat-block-you">
|
||||
<div class="val" style="color: var(--amber-light);">23</div>
|
||||
<div class="lbl">Sessions</div>
|
||||
</div>
|
||||
<div class="stat-block-you">
|
||||
<div class="val" style="color: var(--rose-light);">14</div>
|
||||
<div class="lbl">Day Streak</div>
|
||||
</div>
|
||||
<div class="stat-block-you">
|
||||
<div class="val" style="color: var(--emerald-light);">3</div>
|
||||
<div class="lbl">Goals</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Links -->
|
||||
<div class="quick-links-card">
|
||||
<a class="quick-link-item" href="37-you-settings.html">
|
||||
<div class="quick-link-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<circle cx="9" cy="9" r="3" stroke="var(--dim-light)" stroke-width="1.2"/>
|
||||
<path d="M9 1v2M9 15v2M1 9h2M15 9h2M3.22 3.22l1.41 1.41M13.37 13.37l1.41 1.41M3.22 14.78l1.41-1.41M13.37 4.63l1.41-1.41" stroke="var(--dim-light)" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="quick-link-label">Settings</span>
|
||||
<svg class="quick-link-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="quick-link-item" href="38-you-subscription.html">
|
||||
<div class="quick-link-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M9 1L12 7L18 8L13.5 12.5L14.5 18L9 15L3.5 18L4.5 12.5L0 8L6 7Z" stroke="var(--dim-light)" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="quick-link-label">Subscription</span>
|
||||
<svg class="quick-link-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="quick-link-item" href="37-you-settings.html">
|
||||
<div class="quick-link-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<rect x="2" y="4" width="14" height="10" rx="2" stroke="var(--dim-light)" stroke-width="1.2"/>
|
||||
<path d="M6 8h6M6 11h4" stroke="var(--dim-light)" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="quick-link-label">Data & Privacy</span>
|
||||
<svg class="quick-link-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Evidence Wall Preview -->
|
||||
<div class="section-header">
|
||||
<span class="section-title">Evidence Wall</span>
|
||||
<a href="42-evidence-wall-full.html" class="section-action">View all</a>
|
||||
</div>
|
||||
<div class="card" style="margin-bottom: var(--space-4);">
|
||||
<a href="42-evidence-wall-full.html" style="text-decoration: none; display: block;">
|
||||
<div class="evidence-preview">
|
||||
<div class="preview-tile amethyst">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 1L11 6L6 11L1 6Z" fill="var(--amethyst)" opacity="0.85"/></svg>
|
||||
</div>
|
||||
<div class="preview-tile amber">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 1L10 3.5L11.5 6L10 8.5L6 11L2 8.5L0.5 6L2 3.5Z" fill="none" stroke="var(--amber)" stroke-width="1.2"/></svg>
|
||||
</div>
|
||||
<div class="preview-tile amethyst">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 1L11 6L6 11L1 6Z" fill="var(--amethyst)" opacity="0.85"/></svg>
|
||||
</div>
|
||||
<div class="preview-tile emerald">
|
||||
<svg width="12" height="8" viewBox="0 0 12 8"><rect x="1" y="1" width="10" height="6" rx="1.5" fill="none" stroke="var(--emerald)" stroke-width="1.2"/></svg>
|
||||
</div>
|
||||
<div class="preview-tile sapphire">
|
||||
<svg width="10" height="14" viewBox="0 0 10 14"><path d="M5 1L9 3.5L9 8.5L5 11L1 8.5L1 3.5Z" fill="none" stroke="var(--sapphire)" stroke-width="1.2"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: var(--space-2); font-size: 12px; color: var(--dim-light);">47 tiles — your patterns are visible</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Spectrum Preview -->
|
||||
<div class="section-header">
|
||||
<span class="section-title">Spectrum</span>
|
||||
<div class="prism-badge-wrap"><span class="prism-badge-text">Prism</span></div>
|
||||
</div>
|
||||
<a class="spectrum-preview-card" href="../spectrum/50-spectrum-dashboard.html" style="margin-bottom: var(--space-6);">
|
||||
<div style="flex:1;">
|
||||
<div class="subheading" style="color: var(--soft-light); margin-bottom: 4px;">Your Analytics</div>
|
||||
<div class="body-sm" style="color: var(--dim-light);">Unlock deep insights into your patterns</div>
|
||||
</div>
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" style="mix-blend-mode: screen; flex-shrink:0;">
|
||||
<defs>
|
||||
<linearGradient id="specGrad" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#8B5CF6"/>
|
||||
<stop offset="50%" stop-color="#3B82F6"/>
|
||||
<stop offset="100%" stop-color="#10B981"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="translate(24,24)">
|
||||
<path d="M0,0 L4,-18 L0,-22 L-4,-18Z" fill="url(#specGrad)" opacity="0.7"/>
|
||||
<g transform="rotate(60)"><path d="M0,0 L4,-18 L0,-22 L-4,-18Z" fill="url(#specGrad)" opacity="0.7"/></g>
|
||||
<g transform="rotate(120)"><path d="M0,0 L4,-18 L0,-22 L-4,-18Z" fill="url(#specGrad)" opacity="0.7"/></g>
|
||||
<g transform="rotate(180)"><path d="M0,0 L4,-18 L0,-22 L-4,-18Z" fill="url(#specGrad)" opacity="0.7"/></g>
|
||||
<g transform="rotate(240)"><path d="M0,0 L4,-18 L0,-22 L-4,-18Z" fill="url(#specGrad)" opacity="0.7"/></g>
|
||||
<g transform="rotate(300)"><path d="M0,0 L4,-18 L0,-22 L-4,-18Z" fill="url(#specGrad)" opacity="0.7"/></g>
|
||||
<circle r="4" fill="white" opacity="0.2"/>
|
||||
</g>
|
||||
</svg>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M6 4L10 8L6 12" stroke="var(--faint-light)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TAB BAR -->
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item inactive" data-tab="turn" href="../turn/10-turn-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 2L20 12L12 22L4 12Z" fill="currentColor" opacity="0.9"/><path d="M12 2L20 12L12 12Z" fill="white" opacity="0.15"/></svg>
|
||||
<span class="tab-label">Turn</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="mirror" href="../mirror/15-mirror-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 3L16 8L18 14L12 19L6 14L8 8Z" stroke="currentColor" fill="none" stroke-width="1.2"/></svg>
|
||||
<span class="tab-label">Mirror</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="lens" href="../lens/20-lens-dashboard.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="currentColor" fill="none" stroke-width="1.2"/><circle cx="12" cy="12" r="4" stroke="currentColor" fill="none" stroke-width="0.8"/></svg>
|
||||
<span class="tab-label">Lens</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="gallery" href="../gallery/31-gallery-all.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><rect x="3" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/></svg>
|
||||
<span class="tab-label">Gallery</span>
|
||||
</a>
|
||||
<a class="tab-item active" data-tab="you" href="35-you-profile.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="9" r="4" stroke="currentColor" fill="none" stroke-width="1.2"/><path d="M4 20C4 16 8 14 12 14C16 14 20 16 20 20" stroke="currentColor" fill="none" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
<span class="tab-label">You</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
290
initial mockups/screens/you/36-you-stats.html
Normal file
290
initial mockups/screens/you/36-you-stats.html
Normal file
@@ -0,0 +1,290 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Your Stats</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.big-stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.big-stat {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
.big-stat .bval {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.big-stat .blbl {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.bar-chart-container {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.bar-chart {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: var(--space-2);
|
||||
height: 80px;
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
.bar-group {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.bar {
|
||||
width: 100%;
|
||||
border-radius: 4px 4px 0 0;
|
||||
background: linear-gradient(to top, var(--amethyst-dark), var(--amethyst-light));
|
||||
transition: height 0.3s ease;
|
||||
}
|
||||
.bar-week-label {
|
||||
font-size: 10px;
|
||||
color: var(--faint-light);
|
||||
text-align: center;
|
||||
}
|
||||
.big-stat {
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
.big-stat:hover {
|
||||
box-shadow: 0 0 16px rgba(139,92,246,0.1);
|
||||
}
|
||||
.distortions-list {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.distortion-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.distortion-row:last-child { margin-bottom: 0; }
|
||||
.dist-rank {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--faint-light);
|
||||
width: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.dist-name {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
.dist-bar-wrap {
|
||||
width: 80px;
|
||||
height: 6px;
|
||||
background: var(--twilight);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dist-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, var(--amber-dark), var(--amber-light));
|
||||
border-radius: 3px;
|
||||
}
|
||||
.dist-count {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
width: 24px;
|
||||
text-align: right;
|
||||
}
|
||||
.feature-breakdown {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
.feature-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.feature-row:last-child { margin-bottom: 0; }
|
||||
.feature-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.feature-name { flex: 1; font-size: 14px; color: var(--soft-light); }
|
||||
.feature-pct {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.feature-bar-wrap {
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
background: var(--twilight);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.feature-bar { height: 100%; border-radius: 2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<!-- STATUS BAR -->
|
||||
<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>
|
||||
|
||||
<!-- NAV HEADER -->
|
||||
<div class="nav-header">
|
||||
<a class="nav-back" href="35-you-profile.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Your Stats</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<!-- SCREEN CONTENT -->
|
||||
<div class="screen-content" style="padding-top: var(--space-4);">
|
||||
|
||||
<!-- Big Stat Blocks -->
|
||||
<div class="big-stats-grid">
|
||||
<div class="big-stat">
|
||||
<div class="bval text-amethyst">47</div>
|
||||
<div class="blbl">Total Turns</div>
|
||||
</div>
|
||||
<div class="big-stat">
|
||||
<div class="bval text-amber">18</div>
|
||||
<div class="blbl">Fragments Found</div>
|
||||
</div>
|
||||
<div class="big-stat">
|
||||
<div class="bval text-emerald">23</div>
|
||||
<div class="blbl">Mirror Sessions</div>
|
||||
</div>
|
||||
<div class="big-stat">
|
||||
<div class="bval" style="color: var(--rose);">14</div>
|
||||
<div class="blbl">Day Streak</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Turns Per Week -->
|
||||
<div class="section-header">
|
||||
<span class="section-title">Turns Per Week</span>
|
||||
</div>
|
||||
<div class="bar-chart-container">
|
||||
<div style="font-size: 11px; color: var(--dim-light); margin-bottom: 4px;">Feb 1 – Feb 22</div>
|
||||
<div class="bar-chart">
|
||||
<div class="bar-group">
|
||||
<div class="bar" style="height: 38px;"></div>
|
||||
<div class="bar-week-label">Feb 1–7</div>
|
||||
</div>
|
||||
<div class="bar-group">
|
||||
<div class="bar" style="height: 52px;"></div>
|
||||
<div class="bar-week-label">Feb 8–14</div>
|
||||
</div>
|
||||
<div class="bar-group">
|
||||
<div class="bar" style="height: 65px;"></div>
|
||||
<div class="bar-week-label">Feb 15–21</div>
|
||||
</div>
|
||||
<div class="bar-group">
|
||||
<div class="bar" style="height: 22px; opacity: 0.6;"></div>
|
||||
<div class="bar-week-label">Feb 22</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Top Distortions -->
|
||||
<div class="section-header">
|
||||
<span class="section-title">Top Distortions</span>
|
||||
</div>
|
||||
<div class="distortions-list">
|
||||
<div class="distortion-row">
|
||||
<div class="dist-rank">1</div>
|
||||
<div class="dist-name">Catastrophizing</div>
|
||||
<div class="dist-bar-wrap"><div class="dist-bar" style="width: 100%;"></div></div>
|
||||
<div class="dist-count">7</div>
|
||||
</div>
|
||||
<div class="distortion-row">
|
||||
<div class="dist-rank">2</div>
|
||||
<div class="dist-name">Mind Reading</div>
|
||||
<div class="dist-bar-wrap"><div class="dist-bar" style="width: 57%;"></div></div>
|
||||
<div class="dist-count">4</div>
|
||||
</div>
|
||||
<div class="distortion-row">
|
||||
<div class="dist-rank">3</div>
|
||||
<div class="dist-name">Should Statements</div>
|
||||
<div class="dist-bar-wrap"><div class="dist-bar" style="width: 43%;"></div></div>
|
||||
<div class="dist-count">3</div>
|
||||
</div>
|
||||
<div class="distortion-row">
|
||||
<div class="dist-rank">4</div>
|
||||
<div class="dist-name">Overgeneralization</div>
|
||||
<div class="dist-bar-wrap"><div class="dist-bar" style="width: 29%;"></div></div>
|
||||
<div class="dist-count">2</div>
|
||||
</div>
|
||||
<div class="distortion-row">
|
||||
<div class="dist-rank">5</div>
|
||||
<div class="dist-name">Personalization</div>
|
||||
<div class="dist-bar-wrap"><div class="dist-bar" style="width: 29%;"></div></div>
|
||||
<div class="dist-count">2</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature Breakdown -->
|
||||
<div class="section-header">
|
||||
<span class="section-title">Feature Usage</span>
|
||||
</div>
|
||||
<div class="feature-breakdown">
|
||||
<div class="feature-row">
|
||||
<div class="feature-dot" style="background: var(--amethyst);"></div>
|
||||
<div class="feature-name">Turn</div>
|
||||
<div class="feature-bar-wrap"><div class="feature-bar" style="width: 75%; background: var(--amethyst);"></div></div>
|
||||
<div class="feature-pct">75%</div>
|
||||
</div>
|
||||
<div class="feature-row">
|
||||
<div class="feature-dot" style="background: var(--amber);"></div>
|
||||
<div class="feature-name">Mirror</div>
|
||||
<div class="feature-bar-wrap"><div class="feature-bar" style="width: 15%; background: var(--amber);"></div></div>
|
||||
<div class="feature-pct">15%</div>
|
||||
</div>
|
||||
<div class="feature-row">
|
||||
<div class="feature-dot" style="background: var(--emerald);"></div>
|
||||
<div class="feature-name">Lens</div>
|
||||
<div class="feature-bar-wrap"><div class="feature-bar" style="width: 10%; background: var(--emerald);"></div></div>
|
||||
<div class="feature-pct">10%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
226
initial mockups/screens/you/37-you-settings.html
Normal file
226
initial mockups/screens/you/37-you-settings.html
Normal file
@@ -0,0 +1,226 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Settings</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.settings-section {
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.settings-group {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
}
|
||||
.settings-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
text-decoration: none;
|
||||
transition: background 0.15s;
|
||||
border-bottom: 1px solid var(--twilight);
|
||||
}
|
||||
.settings-item:last-child { border-bottom: none; }
|
||||
.settings-item:hover { background: var(--deep-glass); }
|
||||
.settings-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.settings-item-text { flex: 1; }
|
||||
.settings-item-label {
|
||||
font-size: 15px;
|
||||
color: var(--soft-light);
|
||||
display: block;
|
||||
}
|
||||
.settings-item-desc {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
margin-top: 1px;
|
||||
display: block;
|
||||
}
|
||||
.settings-chevron { color: var(--faint-light); }
|
||||
.settings-version {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: var(--faint-light);
|
||||
margin: var(--space-4) 0 var(--space-6);
|
||||
}
|
||||
.danger-item .settings-item-label { color: var(--ruby); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<!-- STATUS BAR -->
|
||||
<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>
|
||||
|
||||
<!-- NAV HEADER -->
|
||||
<div class="nav-header">
|
||||
<a class="nav-back" href="35-you-profile.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Settings</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<!-- SCREEN CONTENT -->
|
||||
<div class="screen-content" style="padding-top: var(--space-4);">
|
||||
|
||||
<!-- Profile Section -->
|
||||
<div class="settings-section">
|
||||
<div class="label text-dim" style="margin-bottom: var(--space-2);">Profile</div>
|
||||
<div class="settings-group">
|
||||
<div class="settings-item" style="cursor: default;">
|
||||
<div class="settings-icon" style="background: rgba(139,92,246,0.1);">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<circle cx="9" cy="7" r="3" stroke="var(--amethyst-light)" stroke-width="1.2"/>
|
||||
<path d="M3 15c0-3 3-4.5 6-4.5s6 1.5 6 4.5" stroke="var(--amethyst-light)" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="settings-item-text">
|
||||
<span class="settings-item-label">Alex</span>
|
||||
<span class="settings-item-desc">alex@email.com</span>
|
||||
</div>
|
||||
</div>
|
||||
<a class="settings-item" href="#">
|
||||
<div class="settings-icon" style="background: rgba(139,92,246,0.1);">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M13 2L16 5L7 14L3 15L4 11L13 2Z" stroke="var(--amethyst-light)" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="settings-item-text">
|
||||
<span class="settings-item-label">Edit Name</span>
|
||||
</div>
|
||||
<svg class="settings-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<a class="settings-item" href="../onboarding/05-style-selection.html">
|
||||
<div class="settings-icon" style="background: rgba(139,92,246,0.1);">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M9 2L13 8H5L9 2Z" fill="none" stroke="var(--amethyst-light)" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
<path d="M5 8L2 14H8L5 8Z" fill="none" stroke="var(--amethyst-light)" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
<path d="M13 8L10 14H16L13 8Z" fill="none" stroke="var(--amethyst-light)" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="settings-item-text">
|
||||
<span class="settings-item-label">Coaching Style</span>
|
||||
<span class="settings-item-desc">Currently: Compassionate</span>
|
||||
</div>
|
||||
<svg class="settings-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notifications Section -->
|
||||
<div class="settings-section">
|
||||
<div class="label text-dim" style="margin-bottom: var(--space-2);">Notifications</div>
|
||||
<div class="settings-group">
|
||||
<a class="settings-item" href="../system-states/62-notification-settings.html">
|
||||
<div class="settings-icon" style="background: rgba(59,130,246,0.1);">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M9 2C9 2 5 4 5 9V13L3 15H15L13 13V9C13 4 9 2 9 2Z" stroke="var(--sapphire-light)" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
<path d="M7 15c0 1.1.9 2 2 2s2-.9 2-2" stroke="var(--sapphire-light)" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="settings-item-text">
|
||||
<span class="settings-item-label">Notifications</span>
|
||||
<span class="settings-item-desc">Reminders & alerts</span>
|
||||
</div>
|
||||
<svg class="settings-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<a class="settings-item" href="#">
|
||||
<div class="settings-icon" style="background: rgba(99,102,241,0.1);">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<circle cx="9" cy="9" r="6" stroke="var(--indigo-light)" stroke-width="1.2"/>
|
||||
<path d="M6 9h6M9 6v6" stroke="var(--indigo-light)" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="settings-item-text">
|
||||
<span class="settings-item-label">Appearance</span>
|
||||
<span class="settings-item-desc">Themes (coming soon)</span>
|
||||
</div>
|
||||
<svg class="settings-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Data & Privacy -->
|
||||
<div class="settings-section">
|
||||
<div class="label text-dim" style="margin-bottom: var(--space-2);">Data & Privacy</div>
|
||||
<div class="settings-group">
|
||||
<a class="settings-item" href="../system-states/63-data-export.html">
|
||||
<div class="settings-icon" style="background: rgba(16,185,129,0.1);">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M9 2v10M5 8l4 4 4-4" stroke="var(--emerald-light)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M3 14h12" stroke="var(--emerald-light)" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="settings-item-text">
|
||||
<span class="settings-item-label">Export Your Data</span>
|
||||
<span class="settings-item-desc">Download all your data</span>
|
||||
</div>
|
||||
<svg class="settings-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<a class="settings-item danger-item" href="../system-states/64-account-deletion.html">
|
||||
<div class="settings-icon" style="background: rgba(239,68,68,0.1);">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M5 5l8 8M13 5l-8 8" stroke="var(--ruby)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="settings-item-text">
|
||||
<span class="settings-item-label">Delete Account</span>
|
||||
</div>
|
||||
<svg class="settings-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- About -->
|
||||
<div class="settings-section">
|
||||
<div class="label text-dim" style="margin-bottom: var(--space-2);">About</div>
|
||||
<div class="settings-group">
|
||||
<div class="settings-item" style="cursor: default;">
|
||||
<div class="settings-item-text">
|
||||
<span class="settings-item-label">Version</span>
|
||||
</div>
|
||||
<span style="font-size: 13px; color: var(--dim-light);">1.0.0 (42)</span>
|
||||
</div>
|
||||
<a class="settings-item" href="#">
|
||||
<div class="settings-item-text">
|
||||
<span class="settings-item-label">Terms of Service</span>
|
||||
</div>
|
||||
<svg class="settings-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<a class="settings-item" href="#">
|
||||
<div class="settings-item-text">
|
||||
<span class="settings-item-label">Privacy Policy</span>
|
||||
</div>
|
||||
<svg class="settings-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-version">Kalei — Same pieces. New angle.</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
270
initial mockups/screens/you/38-you-subscription.html
Normal file
270
initial mockups/screens/you/38-you-subscription.html
Normal file
@@ -0,0 +1,270 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Subscription</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.current-plan-card {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.plan-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 28px;
|
||||
padding: 0 var(--space-3);
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--dim-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.comparison-table {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.compare-header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 80px 80px;
|
||||
gap: 0;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-bottom: 1px solid var(--twilight);
|
||||
background: var(--deep-glass);
|
||||
}
|
||||
.compare-col-header {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
text-align: center;
|
||||
}
|
||||
.compare-col-header.prism {
|
||||
background: var(--prismatic);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.compare-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 80px 80px;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-bottom: 1px solid var(--twilight);
|
||||
align-items: center;
|
||||
}
|
||||
.compare-row:last-child { border-bottom: none; }
|
||||
.compare-feature { font-size: 13px; color: var(--soft-light); }
|
||||
.compare-check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.check-yes {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: rgba(16,185,129,0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.check-no {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: rgba(71,85,105,0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.price-hero {
|
||||
text-align: center;
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.price-amount {
|
||||
font-family: var(--font-display);
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
background: var(--prismatic);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
line-height: 1;
|
||||
}
|
||||
.price-period {
|
||||
font-size: 16px;
|
||||
color: var(--dim-light);
|
||||
margin-top: 4px;
|
||||
}
|
||||
.btn-prismatic {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--prismatic);
|
||||
background-size: 200% 200%;
|
||||
animation: prismaticShift 3s ease-in-out infinite;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--pure-light);
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 24px rgba(139,92,246,0.3);
|
||||
}
|
||||
.prism-features {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.prism-feature-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.prism-feature-row:last-child { margin-bottom: 0; }
|
||||
.prism-feature-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.prism-feature-text { font-size: 14px; color: var(--soft-light); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<!-- STATUS BAR -->
|
||||
<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>
|
||||
|
||||
<!-- NAV HEADER -->
|
||||
<div class="nav-header">
|
||||
<a class="nav-back" href="35-you-profile.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Subscription</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<!-- SCREEN CONTENT -->
|
||||
<div class="screen-content" style="padding-top: var(--space-4);">
|
||||
|
||||
<!-- Current Plan -->
|
||||
<div class="current-plan-card">
|
||||
<div style="flex:1;">
|
||||
<div class="body-sm text-dim" style="margin-bottom: 4px;">Current Plan</div>
|
||||
<div class="subheading text-soft">Kalei Free</div>
|
||||
<div class="body-sm text-dim" style="margin-top: 4px;">3 turns/day · 1 mirror session/day · 3 active goals</div>
|
||||
</div>
|
||||
<div class="plan-badge">Free</div>
|
||||
</div>
|
||||
|
||||
<!-- Price Hero -->
|
||||
<div class="price-hero">
|
||||
<div class="price-amount">$7.99</div>
|
||||
<div class="price-period">per month</div>
|
||||
</div>
|
||||
|
||||
<!-- Prism Features -->
|
||||
<div class="section-header">
|
||||
<span class="section-title">Prism Includes</span>
|
||||
</div>
|
||||
<div class="prism-features">
|
||||
<div class="prism-feature-row">
|
||||
<div class="prism-feature-dot" style="background: var(--amethyst);"></div>
|
||||
<div class="prism-feature-text">Unlimited Turns — reframe as much as you need</div>
|
||||
</div>
|
||||
<div class="prism-feature-row">
|
||||
<div class="prism-feature-dot" style="background: var(--amber);"></div>
|
||||
<div class="prism-feature-text">Unlimited Mirror sessions — reflect without limits</div>
|
||||
</div>
|
||||
<div class="prism-feature-row">
|
||||
<div class="prism-feature-dot" style="background: var(--emerald);"></div>
|
||||
<div class="prism-feature-text">Unlimited goals with advanced milestone tracking</div>
|
||||
</div>
|
||||
<div class="prism-feature-row">
|
||||
<div class="prism-feature-dot" style="background: var(--sapphire);"></div>
|
||||
<div class="prism-feature-text">Full Spectrum analytics — patterns, growth, insights</div>
|
||||
</div>
|
||||
<div class="prism-feature-row">
|
||||
<div class="prism-feature-dot" style="background: var(--rose);"></div>
|
||||
<div class="prism-feature-text">Priority AI processing — faster, deeper reframes</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Comparison Table -->
|
||||
<div class="section-header">
|
||||
<span class="section-title">Compare Plans</span>
|
||||
</div>
|
||||
<div class="comparison-table">
|
||||
<div class="compare-header">
|
||||
<div></div>
|
||||
<div class="compare-col-header" style="color: var(--dim-light);">Free</div>
|
||||
<div class="compare-col-header prism">Prism</div>
|
||||
</div>
|
||||
<div class="compare-row">
|
||||
<div class="compare-feature">Turns per day</div>
|
||||
<div class="compare-check"><span style="font-size: 12px; color: var(--dim-light);">3</span></div>
|
||||
<div class="compare-check"><div class="check-yes"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="var(--emerald)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div></div>
|
||||
</div>
|
||||
<div class="compare-row">
|
||||
<div class="compare-feature">Mirror sessions/day</div>
|
||||
<div class="compare-check"><span style="font-size: 12px; color: var(--dim-light);">1</span></div>
|
||||
<div class="compare-check"><div class="check-yes"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="var(--emerald)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div></div>
|
||||
</div>
|
||||
<div class="compare-row">
|
||||
<div class="compare-feature">Active goals</div>
|
||||
<div class="compare-check"><span style="font-size: 12px; color: var(--dim-light);">3</span></div>
|
||||
<div class="compare-check"><div class="check-yes"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="var(--emerald)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div></div>
|
||||
</div>
|
||||
<div class="compare-row">
|
||||
<div class="compare-feature">Spectrum analytics</div>
|
||||
<div class="compare-check"><div class="check-no"><svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M3 3l4 4M7 3L3 7" stroke="var(--faint-light)" stroke-width="1.5" stroke-linecap="round"/></svg></div></div>
|
||||
<div class="compare-check"><div class="check-yes"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="var(--emerald)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div></div>
|
||||
</div>
|
||||
<div class="compare-row">
|
||||
<div class="compare-feature">Advanced Rituals</div>
|
||||
<div class="compare-check"><div class="check-no"><svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M3 3l4 4M7 3L3 7" stroke="var(--faint-light)" stroke-width="1.5" stroke-linecap="round"/></svg></div></div>
|
||||
<div class="compare-check"><div class="check-yes"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="var(--emerald)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upgrade Button -->
|
||||
<a href="../modals/58-upgrade-modal.html" class="btn-prismatic">Upgrade to Prism</a>
|
||||
<div style="text-align: center; margin-top: var(--space-3); margin-bottom: var(--space-6);">
|
||||
<a href="#" class="body-sm text-dim" style="text-decoration: none;">Restore Purchase</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
255
initial mockups/screens/you/39-evidence-wall-empty.html
Normal file
255
initial mockups/screens/you/39-evidence-wall-empty.html
Normal file
@@ -0,0 +1,255 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Evidence Wall (Empty)</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.evidence-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
.evidence-tile {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px dashed var(--twilight);
|
||||
position: relative;
|
||||
cursor: default;
|
||||
background: transparent;
|
||||
}
|
||||
.evidence-tile.wide {
|
||||
grid-column: span 2;
|
||||
aspect-ratio: 2/1;
|
||||
}
|
||||
.evidence-tile.tall {
|
||||
grid-row: span 2;
|
||||
aspect-ratio: 1/2;
|
||||
}
|
||||
.empty-cta {
|
||||
margin: var(--space-4) var(--space-4) 0;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-5);
|
||||
text-align: center;
|
||||
}
|
||||
.empty-cta-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: rgba(139,92,246,0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto var(--space-3);
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
}
|
||||
.wall-subtitle {
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
line-height: 1.5;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<!-- STATUS BAR -->
|
||||
<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>
|
||||
|
||||
<!-- NAV HEADER -->
|
||||
<div class="nav-header">
|
||||
<a class="nav-back" href="35-you-profile.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Evidence Wall</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<!-- SCREEN CONTENT -->
|
||||
<div class="screen-content no-pad" style="overflow-y: auto;">
|
||||
|
||||
<!-- Ghost grid — exact tile shapes from evidence-wall.svg, dashed borders -->
|
||||
<div class="evidence-grid">
|
||||
<!-- Row 1: Diamond ghost -->
|
||||
<div class="evidence-tile">
|
||||
<svg width="36" height="36" viewBox="-30 -30 60 60" opacity="0.15">
|
||||
<path d="M 0,-24 L 24,0 L 0,24 L -24,0 Z" fill="none" stroke="#475569" stroke-width="0.8" stroke-dasharray="3 3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Hex ghost -->
|
||||
<div class="evidence-tile">
|
||||
<svg width="36" height="42" viewBox="-26 -34 52 68" opacity="0.15">
|
||||
<path d="M 0,-28 L 20,-14 L 20,14 L 0,28 L -20,14 L -20,-14 Z" fill="none" stroke="#475569" stroke-width="0.8" stroke-dasharray="3 3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Wide Rect ghost -->
|
||||
<div class="evidence-tile wide">
|
||||
<svg width="52" height="30" viewBox="-36 -22 72 44" opacity="0.15">
|
||||
<rect x="-30" y="-18" width="60" height="36" rx="4" fill="none" stroke="#475569" stroke-width="0.8" stroke-dasharray="3 3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Row 2: Tall Diamond ghost -->
|
||||
<div class="evidence-tile tall">
|
||||
<svg width="36" height="36" viewBox="-30 -30 60 60" opacity="0.15">
|
||||
<path d="M 0,-24 L 24,0 L 0,24 L -24,0 Z" fill="none" stroke="#475569" stroke-width="0.8" stroke-dasharray="3 3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Pentagon ghost -->
|
||||
<div class="evidence-tile">
|
||||
<svg width="36" height="36" viewBox="-28 -30 56 56" opacity="0.15">
|
||||
<path d="M 0,-24 L 23,-7 L 14,20 L -14,20 L -23,-7 Z" fill="none" stroke="#475569" stroke-width="0.8" stroke-dasharray="3 3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Triangle ghost -->
|
||||
<div class="evidence-tile">
|
||||
<svg width="36" height="36" viewBox="-28 -30 56 56" opacity="0.15">
|
||||
<path d="M 0,-26 L 24,18 L -24,18 Z" fill="none" stroke="#475569" stroke-width="0.8" stroke-dasharray="3 3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Row 3: hex ghost -->
|
||||
<div class="evidence-tile">
|
||||
<svg width="36" height="42" viewBox="-26 -34 52 68" opacity="0.15">
|
||||
<path d="M 0,-28 L 20,-14 L 20,14 L 0,28 L -20,14 L -20,-14 Z" fill="none" stroke="#475569" stroke-width="0.8" stroke-dasharray="3 3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Circle ghost -->
|
||||
<div class="evidence-tile">
|
||||
<svg width="36" height="36" viewBox="-28 -28 56 56" opacity="0.15">
|
||||
<circle r="22" fill="none" stroke="#475569" stroke-width="0.8" stroke-dasharray="3 3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="evidence-tile">
|
||||
<svg width="36" height="36" viewBox="-30 -30 60 60" opacity="0.15">
|
||||
<path d="M 0,-24 L 24,0 L 0,24 L -24,0 Z" fill="none" stroke="#475569" stroke-width="0.8" stroke-dasharray="3 3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="evidence-tile">
|
||||
<svg width="36" height="30" viewBox="-36 -22 72 44" opacity="0.15">
|
||||
<rect x="-30" y="-18" width="60" height="36" rx="4" fill="none" stroke="#475569" stroke-width="0.8" stroke-dasharray="3 3"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<div class="empty-cta">
|
||||
<div class="empty-cta-icon">
|
||||
<!-- MD Amethyst fragment — extracted from fragment-icons.svg MD size -->
|
||||
<svg width="32" height="32" viewBox="-16 -16 32 32">
|
||||
<defs>
|
||||
<linearGradient id="ew39-grAmethyst" 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>
|
||||
<filter id="ew39-glowMd" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g filter="url(#ew39-glowMd)">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="url(#ew39-grAmethyst)" opacity="0.9">
|
||||
<animate attributeName="fill-opacity" values="0.85;1;0.85" dur="3s" repeatCount="indefinite"/>
|
||||
</path>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#fff" opacity="0.18"/>
|
||||
<path d="M 0,-12 L -12,0 L 0,0 Z" fill="#fff" opacity="0.1"/>
|
||||
<line x1="0" y1="-12" x2="0" y2="12" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||||
<line x1="-12" y1="0" x2="12" y2="0" stroke="#fff" stroke-width="0.3" opacity="0.12"/>
|
||||
<circle cx="-3" cy="-3" r="1.5" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="heading text-soft" style="margin-bottom: var(--space-2);">Every journey starts here</div>
|
||||
<div class="wall-subtitle">Your first Turn will earn your first tile. This wall becomes proof — not that you're perfect, but that you keep going. One thought at a time.</div>
|
||||
<a href="../turn/10-turn-home.html" class="btn btn-primary" style="font-size: 15px;">Start your first Turn</a>
|
||||
</div>
|
||||
|
||||
<!-- Tile Types Legend -->
|
||||
<div style="padding: var(--space-5) var(--space-4) var(--space-6);">
|
||||
<div class="label text-dim" style="margin-bottom: var(--space-3);">What earns tiles</div>
|
||||
<div style="display: flex; flex-direction: column; gap: var(--space-3);">
|
||||
<!-- Diamond — Turn completions (amethyst) -->
|
||||
<div style="display: flex; align-items: center; gap: var(--space-3);">
|
||||
<div style="width: 36px; height: 36px; border-radius: 10px; background: rgba(139,92,246,0.12); border: 1px solid var(--amethyst); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 8px rgba(139,92,246,0.15);">
|
||||
<svg width="16" height="16" viewBox="-10 -10 20 20">
|
||||
<defs><linearGradient id="ew39-lgnd-a" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#C4B5FD"/><stop offset="100%" stop-color="#7C3AED"/></linearGradient></defs>
|
||||
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#ew39-lgnd-a)" opacity="0.85"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="body-sm" style="color: var(--soft-light); font-weight: 500;">Turn completions</div>
|
||||
<div class="body-sm text-dim">Diamond tile — amethyst glow</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Pentagon — Mirror self-corrections (amber) -->
|
||||
<div style="display: flex; align-items: center; gap: var(--space-3);">
|
||||
<div style="width: 36px; height: 36px; border-radius: 10px; background: rgba(245,158,11,0.12); border: 1px solid var(--amber); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 8px rgba(245,158,11,0.15);">
|
||||
<svg width="16" height="16" viewBox="-12 -12 24 24">
|
||||
<path d="M 0,-9 L 8,-3 L 5,8 L -5,8 L -8,-3 Z" fill="none" stroke="var(--amber)" stroke-width="1.2" opacity="0.9"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="body-sm" style="color: var(--soft-light); font-weight: 500;">Mirror self-corrections</div>
|
||||
<div class="body-sm text-dim">Pentagon tile — amber glow</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Wide Rect — Lens completions (emerald) -->
|
||||
<div style="display: flex; align-items: center; gap: var(--space-3);">
|
||||
<div style="width: 36px; height: 36px; border-radius: 10px; background: rgba(16,185,129,0.12); border: 1px solid var(--emerald); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 8px rgba(16,185,129,0.15);">
|
||||
<svg width="18" height="11" viewBox="-10 -6 20 12">
|
||||
<rect x="-9" y="-5" width="18" height="10" rx="2" fill="none" stroke="var(--emerald)" stroke-width="1.2" opacity="0.9"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="body-sm" style="color: var(--soft-light); font-weight: 500;">Lens goal completions</div>
|
||||
<div class="body-sm text-dim">Rectangle tile — emerald glow</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tall Hex — Turn keepsakes (sapphire) -->
|
||||
<div style="display: flex; align-items: center; gap: var(--space-3);">
|
||||
<div style="width: 36px; height: 36px; border-radius: 10px; background: rgba(59,130,246,0.12); border: 1px solid var(--sapphire); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 8px rgba(59,130,246,0.15);">
|
||||
<svg width="14" height="18" viewBox="-9 -12 18 24">
|
||||
<path d="M 0,-10 L 7,-5 L 7,5 L 0,10 L -7,5 L -7,-5 Z" fill="none" stroke="var(--sapphire)" stroke-width="1.2" opacity="0.9"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="body-sm" style="color: var(--soft-light); font-weight: 500;">Turn keepsakes saved</div>
|
||||
<div class="body-sm text-dim">Hexagon tile — sapphire glow</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Triangle — Streaks (rose) -->
|
||||
<div style="display: flex; align-items: center; gap: var(--space-3);">
|
||||
<div style="width: 36px; height: 36px; border-radius: 10px; background: rgba(236,72,153,0.12); border: 1px solid var(--rose); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 8px rgba(236,72,153,0.15);">
|
||||
<svg width="16" height="14" viewBox="-10 -9 20 18">
|
||||
<path d="M 0,-8 L 9,6 L -9,6 Z" fill="none" stroke="var(--rose)" stroke-width="1.2" opacity="0.9"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="body-sm" style="color: var(--soft-light); font-weight: 500;">Streak milestones</div>
|
||||
<div class="body-sm text-dim">Triangle tile — rose glow</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
365
initial mockups/screens/you/40-evidence-wall-early.html
Normal file
365
initial mockups/screens/you/40-evidence-wall-early.html
Normal file
@@ -0,0 +1,365 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Evidence Wall (Early)</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.evidence-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
}
|
||||
.evidence-tile {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.evidence-tile:hover { transform: scale(1.03); }
|
||||
.evidence-tile.wide { grid-column: span 2; aspect-ratio: 2/1; }
|
||||
.evidence-tile.tall { grid-row: span 2; aspect-ratio: 1/2; }
|
||||
.evidence-tile.ghost {
|
||||
background: transparent;
|
||||
border-color: var(--twilight);
|
||||
border-style: dashed;
|
||||
cursor: default;
|
||||
}
|
||||
.evidence-tile.ghost:hover { transform: none; }
|
||||
.tile-amethyst {
|
||||
background: rgba(139,92,246,0.12);
|
||||
border-color: var(--amethyst);
|
||||
box-shadow: 0 0 12px rgba(139,92,246,0.2);
|
||||
animation: tilePulseAmethyst 6s ease-in-out infinite;
|
||||
}
|
||||
.tile-amber {
|
||||
background: rgba(245,158,11,0.12);
|
||||
border-color: var(--amber);
|
||||
box-shadow: 0 0 12px rgba(245,158,11,0.2);
|
||||
animation: tilePulseAmber 6s ease-in-out infinite 1s;
|
||||
}
|
||||
.tile-emerald {
|
||||
background: rgba(16,185,129,0.12);
|
||||
border-color: var(--emerald);
|
||||
box-shadow: 0 0 12px rgba(16,185,129,0.2);
|
||||
animation: tilePulseEmerald 6s ease-in-out infinite 2s;
|
||||
}
|
||||
@keyframes tilePulseAmethyst {
|
||||
0%, 100% { box-shadow: 0 0 10px rgba(139,92,246,0.15); }
|
||||
50% { box-shadow: 0 0 18px rgba(139,92,246,0.3); }
|
||||
}
|
||||
@keyframes tilePulseAmber {
|
||||
0%, 100% { box-shadow: 0 0 10px rgba(245,158,11,0.15); }
|
||||
50% { box-shadow: 0 0 18px rgba(245,158,11,0.3); }
|
||||
}
|
||||
@keyframes tilePulseEmerald {
|
||||
0%, 100% { box-shadow: 0 0 10px rgba(16,185,129,0.15); }
|
||||
50% { box-shadow: 0 0 18px rgba(16,185,129,0.3); }
|
||||
}
|
||||
.tile-label {
|
||||
font-size: 9px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.connection-overlay {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
.wall-summary {
|
||||
padding: var(--space-2) var(--space-4) var(--space-4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.tile-count-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 6px 14px;
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<!-- STATUS BAR -->
|
||||
<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>
|
||||
|
||||
<!-- NAV HEADER -->
|
||||
<div class="nav-header">
|
||||
<a class="nav-back" href="35-you-profile.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Evidence Wall</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<!-- SCREEN CONTENT -->
|
||||
<div class="screen-content no-pad" style="overflow-y: auto;">
|
||||
|
||||
<!-- Summary -->
|
||||
<div class="wall-summary">
|
||||
<div class="tile-count-chip">
|
||||
<!-- XS Amethyst fragment from fragment-icons.svg XS size -->
|
||||
<svg width="12" height="12" viewBox="-8 -8 16 16">
|
||||
<defs>
|
||||
<linearGradient id="ew40-grA" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"/><stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#ew40-grA)" opacity="0.9"/>
|
||||
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
</svg>
|
||||
8 tiles earned
|
||||
</div>
|
||||
<span class="body-sm text-dim">Your first week — it's working</span>
|
||||
</div>
|
||||
|
||||
<!-- Grid with real tiles + ghost tiles -->
|
||||
<div class="evidence-grid">
|
||||
<!-- Connection lines overlay — dashed lines between real tiles -->
|
||||
<svg class="connection-overlay" viewBox="0 0 358 280" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<filter id="ew40-glowLine" x="-10%" y="-10%" width="120%" height="120%">
|
||||
<feGaussianBlur stdDeviation="1" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<line x1="90" y1="45" x2="180" y2="45" stroke="#8B5CF6" stroke-width="0.8" opacity="0.2" stroke-dasharray="4 3" filter="url(#ew40-glowLine)"/>
|
||||
<line x1="180" y1="45" x2="90" y2="135" stroke="#F59E0B" stroke-width="0.8" opacity="0.2" stroke-dasharray="4 3"/>
|
||||
<line x1="90" y1="45" x2="90" y2="135" stroke="#8B5CF6" stroke-width="0.8" opacity="0.15" stroke-dasharray="4 3"/>
|
||||
<line x1="90" y1="135" x2="180" y2="135" stroke="#10B981" stroke-width="0.8" opacity="0.15" stroke-dasharray="4 3"/>
|
||||
<line x1="90" y1="135" x2="90" y2="225" stroke="#8B5CF6" stroke-width="0.8" opacity="0.15" stroke-dasharray="4 3"/>
|
||||
</svg>
|
||||
|
||||
<!-- Row 1 — Amethyst Diamond (Turn) -->
|
||||
<a class="evidence-tile tile-amethyst" href="43-evidence-wall-detail.html">
|
||||
<svg width="28" height="28" viewBox="-16 -16 32 32">
|
||||
<defs>
|
||||
<linearGradient id="ew40-da1" 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>
|
||||
<filter id="ew40-glowMd1" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<!-- Outer tile shell (exact from evidence-wall.svg Diamond tile, scaled to SM) -->
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.8"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#8B5CF6" opacity="0.06"/>
|
||||
<!-- Inner fragment (SM size, from fragment-icons.svg) -->
|
||||
<g filter="url(#ew40-glowMd1)">
|
||||
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#ew40-da1)" opacity="0.5"/>
|
||||
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.1"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color: var(--amethyst-light);">Turn</span>
|
||||
</a>
|
||||
|
||||
<!-- Amber Pentagon (Mirror) -->
|
||||
<a class="evidence-tile tile-amber" href="43-evidence-wall-detail.html">
|
||||
<svg width="28" height="28" viewBox="-16 -16 32 32">
|
||||
<defs>
|
||||
<linearGradient id="ew40-dAmb1" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"><animate attributeName="stop-color" values="#FDE68A;#FEF3C7;#FDE68A" dur="4.2s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<filter id="ew40-glowAmb" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="2" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<!-- Pentagon tile shell from evidence-wall.svg -->
|
||||
<path d="M 0,-12 L 11,-3 L 7,10 L -7,10 L -11,-3 Z" fill="#121628" stroke="#F59E0B" stroke-width="0.8"/>
|
||||
<path d="M 0,-12 L 11,-3 L 0,0 L -11,-3 Z" fill="#F59E0B" opacity="0.05"/>
|
||||
<!-- Inner fragment -->
|
||||
<g filter="url(#ew40-glowAmb)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#ew40-dAmb1)" opacity="0.45"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color: var(--amber-light);">Mirror</span>
|
||||
</a>
|
||||
|
||||
<div class="evidence-tile ghost"></div>
|
||||
<div class="evidence-tile ghost"></div>
|
||||
|
||||
<!-- Row 2 — Amethyst Diamond (Turn) -->
|
||||
<a class="evidence-tile tile-amethyst" href="43-evidence-wall-detail.html">
|
||||
<svg width="28" height="28" viewBox="-16 -16 32 32">
|
||||
<defs>
|
||||
<linearGradient id="ew40-da2" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"><animate attributeName="stop-color" values="#C4B5FD;#DDD6FE;#C4B5FD" dur="4s" begin="0.6s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<filter id="ew40-glowMd2" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.8"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#8B5CF6" opacity="0.06"/>
|
||||
<g filter="url(#ew40-glowMd2)">
|
||||
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#ew40-da2)" opacity="0.5"/>
|
||||
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.1"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color: var(--amethyst-light);">Turn</span>
|
||||
</a>
|
||||
|
||||
<!-- Emerald Wide Rect (Lens) -->
|
||||
<a class="evidence-tile tile-emerald" href="43-evidence-wall-detail.html">
|
||||
<svg width="28" height="20" viewBox="-18 -12 36 24">
|
||||
<defs>
|
||||
<linearGradient id="ew40-dEm1" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#A7F3D0;#6EE7B7" dur="5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<filter id="ew40-glowEm" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="2" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<!-- Wide Rect tile shell from evidence-wall.svg, scaled down -->
|
||||
<rect x="-15" y="-9" width="30" height="18" rx="3" fill="#121628" stroke="#10B981" stroke-width="0.8"/>
|
||||
<rect x="-15" y="-9" width="30" height="9" rx="3" fill="#10B981" opacity="0.04"/>
|
||||
<!-- Inner fragment (Lens shape — pointed diamond) -->
|
||||
<g filter="url(#ew40-glowEm)">
|
||||
<path d="M -4,-3 L 0,-6 L 4,-3 L 0,3 Z" fill="url(#ew40-dEm1)" opacity="0.45"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color: var(--emerald-light);">Goal</span>
|
||||
</a>
|
||||
|
||||
<div class="evidence-tile ghost"></div>
|
||||
<div class="evidence-tile ghost"></div>
|
||||
|
||||
<!-- Row 3 — Amethyst Diamond (Turn) -->
|
||||
<a class="evidence-tile tile-amethyst" href="43-evidence-wall-detail.html">
|
||||
<svg width="28" height="28" viewBox="-16 -16 32 32">
|
||||
<defs>
|
||||
<linearGradient id="ew40-da3" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"><animate attributeName="stop-color" values="#C4B5FD;#DDD6FE;#C4B5FD" dur="4s" begin="1.2s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<filter id="ew40-glowMd3" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.8"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#8B5CF6" opacity="0.06"/>
|
||||
<g filter="url(#ew40-glowMd3)">
|
||||
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#ew40-da3)" opacity="0.5"/>
|
||||
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.1"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color: var(--amethyst-light);">Turn</span>
|
||||
</a>
|
||||
|
||||
<!-- Amethyst Diamond (Turn) — 6th tile -->
|
||||
<a class="evidence-tile tile-amethyst" href="43-evidence-wall-detail.html">
|
||||
<svg width="28" height="28" viewBox="-16 -16 32 32">
|
||||
<defs>
|
||||
<linearGradient id="ew40-da4" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"><animate attributeName="stop-color" values="#C4B5FD;#DDD6FE;#C4B5FD" dur="4s" begin="1.8s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<filter id="ew40-glowMd4" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.8"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#8B5CF6" opacity="0.06"/>
|
||||
<g filter="url(#ew40-glowMd4)">
|
||||
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#ew40-da4)" opacity="0.5"/>
|
||||
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.1"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color: var(--amethyst-light);">Turn</span>
|
||||
</a>
|
||||
|
||||
<!-- Amber Pentagon (Mirror) — 7th tile -->
|
||||
<a class="evidence-tile tile-amber" href="43-evidence-wall-detail.html">
|
||||
<svg width="28" height="28" viewBox="-16 -16 32 32">
|
||||
<defs>
|
||||
<linearGradient id="ew40-dAmb2" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"><animate attributeName="stop-color" values="#FDE68A;#FEF3C7;#FDE68A" dur="4.5s" begin="0.9s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<filter id="ew40-glowAmb2" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="2" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<path d="M 0,-12 L 11,-3 L 7,10 L -7,10 L -11,-3 Z" fill="#121628" stroke="#F59E0B" stroke-width="0.8"/>
|
||||
<path d="M 0,-12 L 11,-3 L 0,0 L -11,-3 Z" fill="#F59E0B" opacity="0.05"/>
|
||||
<g filter="url(#ew40-glowAmb2)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#ew40-dAmb2)" opacity="0.45"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color: var(--amber-light);">Mirror</span>
|
||||
</a>
|
||||
|
||||
<!-- Amethyst Diamond (Turn) — 8th tile -->
|
||||
<a class="evidence-tile tile-amethyst" href="43-evidence-wall-detail.html">
|
||||
<svg width="28" height="28" viewBox="-16 -16 32 32">
|
||||
<defs>
|
||||
<linearGradient id="ew40-da5" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C4B5FD"><animate attributeName="stop-color" values="#C4B5FD;#DDD6FE;#C4B5FD" dur="4s" begin="2.4s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#7C3AED"/>
|
||||
</linearGradient>
|
||||
<filter id="ew40-glowMd5" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.8"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#8B5CF6" opacity="0.06"/>
|
||||
<g filter="url(#ew40-glowMd5)">
|
||||
<path d="M 0,-6 L 6,0 L 0,6 L -6,0 Z" fill="url(#ew40-da5)" opacity="0.5"/>
|
||||
<path d="M 0,-6 L 6,0 L 0,0 Z" fill="#fff" opacity="0.1"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color: var(--amethyst-light);">Turn</span>
|
||||
</a>
|
||||
|
||||
<div class="evidence-tile ghost"></div>
|
||||
<div class="evidence-tile ghost"></div>
|
||||
<div class="evidence-tile ghost"></div>
|
||||
<div class="evidence-tile ghost"></div>
|
||||
</div>
|
||||
|
||||
<!-- Keep going CTA -->
|
||||
<div style="padding: var(--space-2) var(--space-4) var(--space-6); text-align: center;">
|
||||
<div class="body-sm text-dim" style="margin-bottom: var(--space-3);">A full week in — keep building your proof</div>
|
||||
<a href="../turn/10-turn-home.html" class="btn btn-secondary" style="width: auto; padding: 0 var(--space-5);">Do another Turn</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
342
initial mockups/screens/you/41-evidence-wall-mid.html
Normal file
342
initial mockups/screens/you/41-evidence-wall-mid.html
Normal file
@@ -0,0 +1,342 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Evidence Wall (Mid)</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.evidence-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
}
|
||||
.evidence-tile {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.evidence-tile:hover { transform: scale(1.03); }
|
||||
.evidence-tile.wide { grid-column: span 2; aspect-ratio: 2/1; }
|
||||
.evidence-tile.tall { grid-row: span 2; aspect-ratio: 1/2; }
|
||||
.evidence-tile.ghost {
|
||||
background: transparent;
|
||||
border-color: var(--twilight);
|
||||
border-style: dashed;
|
||||
cursor: default;
|
||||
}
|
||||
.evidence-tile.ghost:hover { transform: none; }
|
||||
.tile-amethyst { background: rgba(139,92,246,0.12); border-color: var(--amethyst); box-shadow: 0 0 12px rgba(139,92,246,0.2); animation: gA 6s ease-in-out infinite; }
|
||||
.tile-amber { background: rgba(245,158,11,0.12); border-color: var(--amber); box-shadow: 0 0 12px rgba(245,158,11,0.2); animation: gAmb 6s ease-in-out infinite 1.2s; }
|
||||
.tile-emerald { background: rgba(16,185,129,0.12); border-color: var(--emerald); box-shadow: 0 0 12px rgba(16,185,129,0.2); animation: gEm 6s ease-in-out infinite 2.4s; }
|
||||
.tile-sapphire { background: rgba(59,130,246,0.12); border-color: var(--sapphire); box-shadow: 0 0 12px rgba(59,130,246,0.2); animation: gSap 6s ease-in-out infinite 0.8s; }
|
||||
.tile-rose { background: rgba(236,72,153,0.12); border-color: var(--rose); box-shadow: 0 0 12px rgba(236,72,153,0.2); animation: gRose 6s ease-in-out infinite 1.6s; }
|
||||
@keyframes gA { 0%,100%{ box-shadow:0 0 10px rgba(139,92,246,0.15); } 50%{ box-shadow:0 0 20px rgba(139,92,246,0.35); } }
|
||||
@keyframes gAmb { 0%,100%{ box-shadow:0 0 10px rgba(245,158,11,0.15); } 50%{ box-shadow:0 0 20px rgba(245,158,11,0.35); } }
|
||||
@keyframes gEm { 0%,100%{ box-shadow:0 0 10px rgba(16,185,129,0.15); } 50%{ box-shadow:0 0 20px rgba(16,185,129,0.35); } }
|
||||
@keyframes gSap { 0%,100%{ box-shadow:0 0 10px rgba(59,130,246,0.15); } 50%{ box-shadow:0 0 20px rgba(59,130,246,0.35); } }
|
||||
@keyframes gRose { 0%,100%{ box-shadow:0 0 10px rgba(236,72,153,0.15); } 50%{ box-shadow:0 0 20px rgba(236,72,153,0.35); } }
|
||||
.tile-label { font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }
|
||||
.wall-summary { padding: var(--space-2) var(--space-4) 0; display: flex; align-items: center; gap: var(--space-3); }
|
||||
.tile-count-chip { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--deep-glass); border: 1px solid var(--twilight); border-radius: var(--radius-full); padding: 6px 14px; font-size: 13px; color: var(--dim-light); }
|
||||
.connection-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<!-- STATUS BAR -->
|
||||
<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>
|
||||
|
||||
<!-- NAV HEADER -->
|
||||
<div class="nav-header">
|
||||
<a class="nav-back" href="35-you-profile.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Evidence Wall</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<!-- SCREEN CONTENT -->
|
||||
<div class="screen-content no-pad">
|
||||
|
||||
<div class="wall-summary">
|
||||
<div class="tile-count-chip">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 1L11 6L6 11L1 6Z" fill="var(--amethyst)" opacity="0.8"/></svg>
|
||||
23 tiles earned
|
||||
</div>
|
||||
<span class="body-sm text-dim">Two weeks in — patterns are forming</span>
|
||||
</div>
|
||||
|
||||
<div class="evidence-grid">
|
||||
<!-- Connection web overlay -->
|
||||
<svg class="connection-overlay" viewBox="0 0 358 380" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
|
||||
<line x1="45" y1="45" x2="135" y2="45" stroke="var(--amethyst)" stroke-width="0.8" opacity="0.25" stroke-dasharray="4 3"/>
|
||||
<line x1="135" y1="45" x2="225" y2="45" stroke="var(--amethyst)" stroke-width="0.8" opacity="0.2" stroke-dasharray="4 3"/>
|
||||
<line x1="45" y1="45" x2="45" y2="135" stroke="var(--amber)" stroke-width="0.8" opacity="0.2" stroke-dasharray="4 3"/>
|
||||
<line x1="225" y1="45" x2="315" y2="135" stroke="var(--emerald)" stroke-width="0.8" opacity="0.2" stroke-dasharray="4 3"/>
|
||||
<line x1="135" y1="135" x2="225" y2="225" stroke="var(--amethyst)" stroke-width="0.8" opacity="0.2" stroke-dasharray="4 3"/>
|
||||
<line x1="45" y1="225" x2="135" y2="225" stroke="var(--sapphire)" stroke-width="0.8" opacity="0.2" stroke-dasharray="4 3"/>
|
||||
<line x1="45" y1="225" x2="45" y2="315" stroke="var(--amber)" stroke-width="0.8" opacity="0.15" stroke-dasharray="4 3"/>
|
||||
</svg>
|
||||
|
||||
<!-- Shared defs for all tile gradients in this screen -->
|
||||
<svg width="0" height="0" style="position:absolute;">
|
||||
<defs>
|
||||
<linearGradient id="ew41-grA" 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="ew41-grAmb" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"><animate attributeName="stop-color" values="#FDE68A;#FEF3C7;#FDE68A" dur="4.2s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ew41-grEm" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#A7F3D0;#6EE7B7" dur="5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ew41-grSap" 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="ew41-grRose" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBCFE8"/><stop offset="100%" stop-color="#DB2777"/>
|
||||
</linearGradient>
|
||||
<filter id="ew41-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>
|
||||
</svg>
|
||||
|
||||
<!-- Row 1 — Amethyst Diamond (Turn) -->
|
||||
<a class="evidence-tile tile-amethyst" href="43-evidence-wall-detail.html">
|
||||
<svg width="26" height="26" viewBox="-16 -16 32 32">
|
||||
<!-- Diamond tile from evidence-wall.svg -->
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.8"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#8B5CF6" opacity="0.06"/>
|
||||
<g filter="url(#ew41-glowSm)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#ew41-grA)" opacity="0.5"/>
|
||||
<path d="M 0,-5 L 5,0 L 0,0 Z" fill="#fff" opacity="0.1"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color: var(--amethyst-light);">Turn</span>
|
||||
</a>
|
||||
<!-- Amethyst Diamond (Turn) -->
|
||||
<a class="evidence-tile tile-amethyst" href="43-evidence-wall-detail.html">
|
||||
<svg width="26" height="26" viewBox="-16 -16 32 32">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.8"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#8B5CF6" opacity="0.06"/>
|
||||
<g filter="url(#ew41-glowSm)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#ew41-grA)" opacity="0.5"/>
|
||||
<path d="M 0,-5 L 5,0 L 0,0 Z" fill="#fff" opacity="0.1"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color: var(--amethyst-light);">Turn</span>
|
||||
</a>
|
||||
<!-- Amber Wide Rect (Mirror) — wide tile -->
|
||||
<a class="evidence-tile tile-amber wide" href="43-evidence-wall-detail.html">
|
||||
<svg width="32" height="22" viewBox="-18 -12 36 24">
|
||||
<!-- Wide Rect tile from evidence-wall.svg -->
|
||||
<rect x="-15" y="-9" width="30" height="18" rx="3" fill="#121628" stroke="#F59E0B" stroke-width="0.8"/>
|
||||
<rect x="-15" y="-9" width="30" height="9" rx="3" fill="#F59E0B" opacity="0.04"/>
|
||||
<g filter="url(#ew41-glowSm)">
|
||||
<path d="M -4,-3 L 0,-6 L 4,-3 L 0,3 Z" fill="url(#ew41-grAmb)" opacity="0.45"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color: var(--amber-light);">Mirror</span>
|
||||
</a>
|
||||
|
||||
<!-- Row 2 — Emerald Tall (Goal/Lens) -->
|
||||
<a class="evidence-tile tile-emerald tall" href="43-evidence-wall-detail.html">
|
||||
<svg width="22" height="30" viewBox="-14 -18 28 36">
|
||||
<!-- Tall Hex tile from evidence-wall.svg -->
|
||||
<path d="M 0,-14 L 10,-7 L 10,7 L 0,14 L -10,7 L -10,-7 Z" fill="#121628" stroke="#10B981" stroke-width="0.8"/>
|
||||
<path d="M 0,-14 L 10,-7 L 0,0 L -10,-7 Z" fill="#10B981" opacity="0.05"/>
|
||||
<g filter="url(#ew41-glowSm)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#ew41-grEm)" opacity="0.4"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color: var(--emerald-light);">Goal</span>
|
||||
</a>
|
||||
<!-- Amethyst Diamond -->
|
||||
<a class="evidence-tile tile-amethyst" href="43-evidence-wall-detail.html">
|
||||
<svg width="26" height="26" viewBox="-16 -16 32 32">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.8"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#8B5CF6" opacity="0.06"/>
|
||||
<g filter="url(#ew41-glowSm)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#ew41-grA)" opacity="0.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color: var(--amethyst-light);">Turn</span>
|
||||
</a>
|
||||
<!-- Sapphire Wide Rect (Ritual) -->
|
||||
<a class="evidence-tile tile-sapphire" href="43-evidence-wall-detail.html">
|
||||
<svg width="26" height="22" viewBox="-16 -12 32 24">
|
||||
<rect x="-13" y="-8" width="26" height="16" rx="3" fill="#121628" stroke="#3B82F6" stroke-width="0.8"/>
|
||||
<rect x="-13" y="-8" width="26" height="8" rx="3" fill="#3B82F6" opacity="0.04"/>
|
||||
<g filter="url(#ew41-glowSm)">
|
||||
<path d="M 0,-4 L 4,0 L 0,4 L -4,0 Z" fill="url(#ew41-grSap)" opacity="0.35"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color: var(--sapphire-light);">Ritual</span>
|
||||
</a>
|
||||
<!-- Amethyst Diamond -->
|
||||
<a class="evidence-tile tile-amethyst" href="43-evidence-wall-detail.html">
|
||||
<svg width="26" height="26" viewBox="-16 -16 32 32">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.8"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#8B5CF6" opacity="0.06"/>
|
||||
<g filter="url(#ew41-glowSm)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#ew41-grA)" opacity="0.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color: var(--amethyst-light);">Turn</span>
|
||||
</a>
|
||||
|
||||
<!-- Row 3 (tall tile continues from row 2 col 1) -->
|
||||
<!-- Amber Pentagon (Mirror) -->
|
||||
<a class="evidence-tile tile-amber" href="43-evidence-wall-detail.html">
|
||||
<svg width="26" height="26" viewBox="-16 -16 32 32">
|
||||
<!-- Pentagon tile from evidence-wall.svg -->
|
||||
<path d="M 0,-12 L 11,-3 L 7,10 L -7,10 L -11,-3 Z" fill="#121628" stroke="#F59E0B" stroke-width="0.8"/>
|
||||
<path d="M 0,-12 L 11,-3 L 0,0 L -11,-3 Z" fill="#F59E0B" opacity="0.05"/>
|
||||
<g filter="url(#ew41-glowSm)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#ew41-grAmb)" opacity="0.45"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color: var(--amber-light);">Mirror</span>
|
||||
</a>
|
||||
<!-- Rose Triangle (Streak) -->
|
||||
<a class="evidence-tile tile-rose" href="43-evidence-wall-detail.html">
|
||||
<svg width="26" height="26" viewBox="-16 -16 32 32">
|
||||
<!-- Triangle tile from evidence-wall.svg -->
|
||||
<path d="M 0,-13 L 12,9 L -12,9 Z" fill="#121628" stroke="#EC4899" stroke-width="0.8"/>
|
||||
<path d="M 0,-13 L 12,9 L 0,0 Z" fill="#EC4899" opacity="0.05"/>
|
||||
<g filter="url(#ew41-glowSm)">
|
||||
<path d="M 0,-4 L 4,2 L -4,2 Z" fill="url(#ew41-grRose)" opacity="0.45"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color: var(--rose-light);">Streak</span>
|
||||
</a>
|
||||
<!-- Amethyst Diamond -->
|
||||
<a class="evidence-tile tile-amethyst" href="43-evidence-wall-detail.html">
|
||||
<svg width="26" height="26" viewBox="-16 -16 32 32">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.8"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#8B5CF6" opacity="0.06"/>
|
||||
<g filter="url(#ew41-glowSm)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#ew41-grA)" opacity="0.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color: var(--amethyst-light);">Turn</span>
|
||||
</a>
|
||||
|
||||
<!-- Row 4 — more tiles -->
|
||||
<!-- Amethyst Diamond -->
|
||||
<a class="evidence-tile tile-amethyst" href="43-evidence-wall-detail.html">
|
||||
<svg width="26" height="26" viewBox="-16 -16 32 32">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.8"/>
|
||||
<path d="M 0,-12 L 12,0 L 0,0 Z" fill="#8B5CF6" opacity="0.06"/>
|
||||
<g filter="url(#ew41-glowSm)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#ew41-grA)" opacity="0.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color: var(--amethyst-light);">Turn</span>
|
||||
</a>
|
||||
<!-- Sapphire (Ritual) -->
|
||||
<a class="evidence-tile tile-sapphire" href="43-evidence-wall-detail.html">
|
||||
<svg width="26" height="22" viewBox="-16 -12 32 24">
|
||||
<rect x="-13" y="-8" width="26" height="16" rx="3" fill="#121628" stroke="#3B82F6" stroke-width="0.8"/>
|
||||
<g filter="url(#ew41-glowSm)">
|
||||
<path d="M 0,-4 L 4,0 L 0,4 L -4,0 Z" fill="url(#ew41-grSap)" opacity="0.35"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color: var(--sapphire-light);">Ritual</span>
|
||||
</a>
|
||||
<!-- Emerald Wide Rect (Goal) -->
|
||||
<a class="evidence-tile tile-emerald" href="43-evidence-wall-detail.html">
|
||||
<svg width="26" height="20" viewBox="-16 -11 32 22">
|
||||
<rect x="-13" y="-8" width="26" height="16" rx="3" fill="#121628" stroke="#10B981" stroke-width="0.8"/>
|
||||
<rect x="-13" y="-8" width="26" height="8" rx="3" fill="#10B981" opacity="0.04"/>
|
||||
<g filter="url(#ew41-glowSm)">
|
||||
<path d="M -3,-2 L 0,-5 L 3,-2 L 0,2 Z" fill="url(#ew41-grEm)" opacity="0.45"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color: var(--emerald-light);">Goal</span>
|
||||
</a>
|
||||
<!-- Amethyst Diamond -->
|
||||
<a class="evidence-tile tile-amethyst" href="43-evidence-wall-detail.html">
|
||||
<svg width="26" height="26" viewBox="-16 -16 32 32">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.8"/>
|
||||
<g filter="url(#ew41-glowSm)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#ew41-grA)" opacity="0.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color: var(--amethyst-light);">Turn</span>
|
||||
</a>
|
||||
|
||||
<!-- Row 5 -->
|
||||
<!-- Amber Wide Rect (Mirror) -->
|
||||
<a class="evidence-tile tile-amber wide" href="43-evidence-wall-detail.html">
|
||||
<svg width="32" height="22" viewBox="-18 -12 36 24">
|
||||
<rect x="-15" y="-9" width="30" height="18" rx="3" fill="#121628" stroke="#F59E0B" stroke-width="0.8"/>
|
||||
<g filter="url(#ew41-glowSm)">
|
||||
<path d="M -4,-3 L 0,-6 L 4,-3 L 0,3 Z" fill="url(#ew41-grAmb)" opacity="0.45"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color: var(--amber-light);">Mirror</span>
|
||||
</a>
|
||||
<!-- Amethyst Diamond -->
|
||||
<a class="evidence-tile tile-amethyst" href="43-evidence-wall-detail.html">
|
||||
<svg width="26" height="26" viewBox="-16 -16 32 32">
|
||||
<path d="M 0,-12 L 12,0 L 0,12 L -12,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.8"/>
|
||||
<g filter="url(#ew41-glowSm)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#ew41-grA)" opacity="0.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color: var(--amethyst-light);">Turn</span>
|
||||
</a>
|
||||
<!-- Rose Triangle (7-day streak) -->
|
||||
<a class="evidence-tile tile-rose" href="43-evidence-wall-detail.html">
|
||||
<svg width="26" height="26" viewBox="-16 -16 32 32">
|
||||
<path d="M 0,-13 L 12,9 L -12,9 Z" fill="#121628" stroke="#EC4899" stroke-width="0.8"/>
|
||||
<g filter="url(#ew41-glowSm)">
|
||||
<path d="M 0,-4 L 4,2 L -4,2 Z" fill="url(#ew41-grRose)" opacity="0.45"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color: var(--rose-light);">Streak</span>
|
||||
</a>
|
||||
<div class="evidence-tile ghost"></div>
|
||||
<div class="evidence-tile ghost"></div>
|
||||
<div class="evidence-tile ghost"></div>
|
||||
<div class="evidence-tile ghost"></div>
|
||||
<div class="evidence-tile ghost"></div>
|
||||
</div>
|
||||
|
||||
<div style="padding: 0 var(--space-4) var(--space-6); text-align: center;">
|
||||
<div class="body-sm text-dim">23 tiles and counting — your mosaic is taking shape</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
357
initial mockups/screens/you/42-evidence-wall-full.html
Normal file
357
initial mockups/screens/you/42-evidence-wall-full.html
Normal file
@@ -0,0 +1,357 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Evidence Wall (Full)</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.evidence-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
}
|
||||
.evidence-tile {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.evidence-tile:hover { transform: scale(1.03); }
|
||||
.evidence-tile.wide { grid-column: span 2; aspect-ratio: 2/1; }
|
||||
.evidence-tile.tall { grid-row: span 2; aspect-ratio: 1/2; }
|
||||
.tile-amethyst { background: rgba(139,92,246,0.15); border-color: var(--amethyst); box-shadow: 0 0 14px rgba(139,92,246,0.25); animation: gA42 6s ease-in-out infinite; }
|
||||
.tile-amber { background: rgba(245,158,11,0.15); border-color: var(--amber); box-shadow: 0 0 14px rgba(245,158,11,0.25); animation: gAmb42 6s ease-in-out infinite 1.5s; }
|
||||
.tile-emerald { background: rgba(16,185,129,0.15); border-color: var(--emerald); box-shadow: 0 0 14px rgba(16,185,129,0.25); animation: gEm42 6s ease-in-out infinite 3s; }
|
||||
.tile-sapphire { background: rgba(59,130,246,0.15); border-color: var(--sapphire); box-shadow: 0 0 14px rgba(59,130,246,0.25); animation: gSap42 6s ease-in-out infinite 0.5s; }
|
||||
.tile-rose { background: rgba(236,72,153,0.15); border-color: var(--rose); box-shadow: 0 0 14px rgba(236,72,153,0.25); animation: gRose42 6s ease-in-out infinite 2s; }
|
||||
@keyframes gA42 { 0%,100%{box-shadow:0 0 12px rgba(139,92,246,0.2);} 50%{box-shadow:0 0 22px rgba(139,92,246,0.4);} }
|
||||
@keyframes gAmb42 { 0%,100%{box-shadow:0 0 12px rgba(245,158,11,0.2);} 50%{box-shadow:0 0 22px rgba(245,158,11,0.4);} }
|
||||
@keyframes gEm42 { 0%,100%{box-shadow:0 0 12px rgba(16,185,129,0.2);} 50%{box-shadow:0 0 22px rgba(16,185,129,0.4);} }
|
||||
@keyframes gSap42 { 0%,100%{box-shadow:0 0 12px rgba(59,130,246,0.2);} 50%{box-shadow:0 0 22px rgba(59,130,246,0.4);} }
|
||||
@keyframes gRose42 { 0%,100%{box-shadow:0 0 12px rgba(236,72,153,0.2);} 50%{box-shadow:0 0 22px rgba(236,72,153,0.4);} }
|
||||
.tile-label { font-size: 8px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.8; }
|
||||
.connection-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
|
||||
.evidence-tile { z-index: 2; }
|
||||
.wall-summary { padding: var(--space-2) var(--space-4) 0; display: flex; align-items: center; gap: var(--space-3); }
|
||||
.tile-count-chip { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--deep-glass); border: 1px solid var(--amethyst); border-radius: var(--radius-full); padding: 6px 14px; font-size: 13px; color: var(--amethyst-light); box-shadow: 0 0 12px rgba(139,92,246,0.2); }
|
||||
.celebration-banner {
|
||||
margin: var(--space-3) var(--space-4) 0;
|
||||
background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(16,185,129,0.15));
|
||||
border: 1px solid rgba(139,92,246,0.3);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<!-- STATUS BAR -->
|
||||
<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>
|
||||
|
||||
<!-- NAV HEADER -->
|
||||
<div class="nav-header">
|
||||
<a class="nav-back" href="35-you-profile.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Evidence Wall</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<!-- SCREEN CONTENT -->
|
||||
<div class="screen-content no-pad">
|
||||
|
||||
<div class="wall-summary">
|
||||
<div class="tile-count-chip">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 1L11 6L6 11L1 6Z" fill="var(--amethyst)" opacity="0.9"/></svg>
|
||||
47 tiles earned
|
||||
</div>
|
||||
<span class="body-sm text-dim">3 weeks of real work</span>
|
||||
</div>
|
||||
|
||||
<!-- Celebration banner -->
|
||||
<div class="celebration-banner">
|
||||
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: 8px; flex-shrink:0;">
|
||||
<div style="flex:1;">
|
||||
<div class="body" style="color: var(--soft-light); font-weight: 600;">47 patterns turned, Alex</div>
|
||||
<div class="body-sm text-dim">14-day streak. This wall is proof — not that you're fixed, but that you keep going.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="evidence-grid">
|
||||
<!-- Glowing connection web -->
|
||||
<svg class="connection-overlay" viewBox="0 0 358 500" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
|
||||
<line x1="45" y1="45" x2="135" y2="45" stroke="#8B5CF6" stroke-width="1" opacity="0.3" stroke-dasharray="3 2"/>
|
||||
<line x1="135" y1="45" x2="225" y2="45" stroke="#8B5CF6" stroke-width="1" opacity="0.25" stroke-dasharray="3 2"/>
|
||||
<line x1="225" y1="45" x2="315" y2="45" stroke="#F59E0B" stroke-width="1" opacity="0.3" stroke-dasharray="3 2"/>
|
||||
<line x1="45" y1="45" x2="45" y2="135" stroke="#10B981" stroke-width="1" opacity="0.25" stroke-dasharray="3 2"/>
|
||||
<line x1="135" y1="45" x2="135" y2="135" stroke="#8B5CF6" stroke-width="1" opacity="0.2" stroke-dasharray="3 2"/>
|
||||
<line x1="315" y1="45" x2="315" y2="135" stroke="#3B82F6" stroke-width="1" opacity="0.25" stroke-dasharray="3 2"/>
|
||||
<line x1="45" y1="135" x2="225" y2="225" stroke="#F59E0B" stroke-width="1" opacity="0.2" stroke-dasharray="3 2"/>
|
||||
<line x1="135" y1="225" x2="315" y2="225" stroke="#8B5CF6" stroke-width="1" opacity="0.25" stroke-dasharray="3 2"/>
|
||||
<line x1="45" y1="315" x2="135" y2="315" stroke="#10B981" stroke-width="1" opacity="0.2" stroke-dasharray="3 2"/>
|
||||
<line x1="225" y1="315" x2="315" y2="315" stroke="#EC4899" stroke-width="1" opacity="0.25" stroke-dasharray="3 2"/>
|
||||
</svg>
|
||||
|
||||
<!-- Shared defs for all tile gradients in this screen (full wall) -->
|
||||
<svg width="0" height="0" style="position:absolute;">
|
||||
<defs>
|
||||
<linearGradient id="ew42-grAm" 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="ew42-grAmb" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"><animate attributeName="stop-color" values="#FDE68A;#FEF3C7;#FDE68A" dur="4.2s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ew42-grEm" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#A7F3D0;#6EE7B7" dur="5s" repeatCount="indefinite"/></stop>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ew42-grSap" 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="ew42-grRose" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBCFE8"/><stop offset="100%" stop-color="#DB2777"/>
|
||||
</linearGradient>
|
||||
<filter id="ew42-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>
|
||||
</svg>
|
||||
|
||||
<!-- Row 1 (4 tiles) — using exact shapes from evidence-wall.svg -->
|
||||
<!-- Amethyst Diamond -->
|
||||
<a class="evidence-tile tile-amethyst" href="43-evidence-wall-detail.html">
|
||||
<svg width="22" height="22" viewBox="-14 -14 28 28">
|
||||
<path d="M 0,-11 L 11,0 L 0,11 L -11,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.8"/>
|
||||
<path d="M 0,-11 L 11,0 L 0,0 Z" fill="#8B5CF6" opacity="0.06"/>
|
||||
<g filter="url(#ew42-glowSm)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#ew42-grAm)" opacity="0.5"/>
|
||||
<path d="M 0,-5 L 5,0 L 0,0 Z" fill="#fff" opacity="0.1"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color:var(--amethyst-light);">Turn</span>
|
||||
</a>
|
||||
<!-- Amethyst Diamond -->
|
||||
<a class="evidence-tile tile-amethyst" href="43-evidence-wall-detail.html">
|
||||
<svg width="22" height="22" viewBox="-14 -14 28 28">
|
||||
<path d="M 0,-11 L 11,0 L 0,11 L -11,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.8"/>
|
||||
<path d="M 0,-11 L 11,0 L 0,0 Z" fill="#8B5CF6" opacity="0.06"/>
|
||||
<g filter="url(#ew42-glowSm)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#ew42-grAm)" opacity="0.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color:var(--amethyst-light);">Turn</span>
|
||||
</a>
|
||||
<!-- Amber Wide Rect (Mirror) — wide tile -->
|
||||
<a class="evidence-tile tile-amber wide" href="43-evidence-wall-detail.html">
|
||||
<svg width="30" height="20" viewBox="-18 -11 36 22">
|
||||
<rect x="-15" y="-8" width="30" height="16" rx="3" fill="#121628" stroke="#F59E0B" stroke-width="0.8"/>
|
||||
<rect x="-15" y="-8" width="30" height="8" rx="3" fill="#F59E0B" opacity="0.04"/>
|
||||
<g filter="url(#ew42-glowSm)">
|
||||
<path d="M -3,-2 L 0,-5 L 3,-2 L 0,2 Z" fill="url(#ew42-grAmb)" opacity="0.45"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color:var(--amber-light);">Mirror</span>
|
||||
</a>
|
||||
|
||||
<!-- Row 2 — Emerald Tall Hex (Goal) -->
|
||||
<a class="evidence-tile tile-emerald tall" href="43-evidence-wall-detail.html">
|
||||
<svg width="20" height="28" viewBox="-13 -17 26 34">
|
||||
<path d="M 0,-13 L 9,-6 L 9,6 L 0,13 L -9,6 L -9,-6 Z" fill="#121628" stroke="#10B981" stroke-width="0.8"/>
|
||||
<path d="M 0,-13 L 9,-6 L 0,0 L -9,-6 Z" fill="#10B981" opacity="0.05"/>
|
||||
<g filter="url(#ew42-glowSm)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#ew42-grEm)" opacity="0.4"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color:var(--emerald-light);">Goal</span>
|
||||
</a>
|
||||
<!-- Amethyst Diamond -->
|
||||
<a class="evidence-tile tile-amethyst" href="43-evidence-wall-detail.html">
|
||||
<svg width="22" height="22" viewBox="-14 -14 28 28">
|
||||
<path d="M 0,-11 L 11,0 L 0,11 L -11,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.8"/>
|
||||
<path d="M 0,-11 L 11,0 L 0,0 Z" fill="#8B5CF6" opacity="0.06"/>
|
||||
<g filter="url(#ew42-glowSm)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#ew42-grAm)" opacity="0.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color:var(--amethyst-light);">Turn</span>
|
||||
</a>
|
||||
<!-- Sapphire Wide Rect (Ritual) -->
|
||||
<a class="evidence-tile tile-sapphire" href="43-evidence-wall-detail.html">
|
||||
<svg width="22" height="18" viewBox="-14 -10 28 20">
|
||||
<rect x="-12" y="-7" width="24" height="14" rx="2.5" fill="#121628" stroke="#3B82F6" stroke-width="0.8"/>
|
||||
<rect x="-12" y="-7" width="24" height="7" rx="2.5" fill="#3B82F6" opacity="0.04"/>
|
||||
<g filter="url(#ew42-glowSm)">
|
||||
<path d="M 0,-3 L 3,0 L 0,3 L -3,0 Z" fill="url(#ew42-grSap)" opacity="0.35"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color:var(--sapphire-light);">Ritual</span>
|
||||
</a>
|
||||
<!-- Amethyst Diamond -->
|
||||
<a class="evidence-tile tile-amethyst" href="43-evidence-wall-detail.html">
|
||||
<svg width="22" height="22" viewBox="-14 -14 28 28">
|
||||
<path d="M 0,-11 L 11,0 L 0,11 L -11,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.8"/>
|
||||
<g filter="url(#ew42-glowSm)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#ew42-grAm)" opacity="0.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color:var(--amethyst-light);">Turn</span>
|
||||
</a>
|
||||
|
||||
<!-- Row 3 (tall tile continues) -->
|
||||
<!-- Rose Triangle (Streak) -->
|
||||
<a class="evidence-tile tile-rose" href="43-evidence-wall-detail.html">
|
||||
<svg width="22" height="22" viewBox="-14 -14 28 28">
|
||||
<path d="M 0,-12 L 11,8 L -11,8 Z" fill="#121628" stroke="#EC4899" stroke-width="0.8"/>
|
||||
<path d="M 0,-12 L 11,8 L 0,0 Z" fill="#EC4899" opacity="0.05"/>
|
||||
<g filter="url(#ew42-glowSm)">
|
||||
<path d="M 0,-4 L 4,2 L -4,2 Z" fill="url(#ew42-grRose)" opacity="0.45"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color:var(--rose-light);">Streak</span>
|
||||
</a>
|
||||
<!-- Amber Pentagon (Mirror) -->
|
||||
<a class="evidence-tile tile-amber" href="43-evidence-wall-detail.html">
|
||||
<svg width="22" height="22" viewBox="-15 -14 30 28">
|
||||
<path d="M 0,-11 L 10,-3 L 6,9 L -6,9 L -10,-3 Z" fill="#121628" stroke="#F59E0B" stroke-width="0.8"/>
|
||||
<path d="M 0,-11 L 10,-3 L 0,0 L -10,-3 Z" fill="#F59E0B" opacity="0.05"/>
|
||||
<g filter="url(#ew42-glowSm)">
|
||||
<path d="M 0,-4 L 4,0 L 0,4 L -4,0 Z" fill="url(#ew42-grAmb)" opacity="0.45"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color:var(--amber-light);">Mirror</span>
|
||||
</a>
|
||||
<!-- Amethyst Diamond — Wide -->
|
||||
<a class="evidence-tile tile-amethyst wide" href="43-evidence-wall-detail.html">
|
||||
<svg width="28" height="22" viewBox="-16 -14 32 28">
|
||||
<path d="M 0,-11 L 11,0 L 0,11 L -11,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.8"/>
|
||||
<path d="M 0,-11 L 11,0 L 0,0 Z" fill="#8B5CF6" opacity="0.06"/>
|
||||
<g filter="url(#ew42-glowSm)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#ew42-grAm)" opacity="0.5"/>
|
||||
<path d="M 0,-5 L 5,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color:var(--amethyst-light);">Turn</span>
|
||||
</a>
|
||||
|
||||
<!-- Row 4 -->
|
||||
<!-- Amethyst Diamond -->
|
||||
<a class="evidence-tile tile-amethyst" href="43-evidence-wall-detail.html">
|
||||
<svg width="22" height="22" viewBox="-14 -14 28 28">
|
||||
<path d="M 0,-11 L 11,0 L 0,11 L -11,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.8"/>
|
||||
<g filter="url(#ew42-glowSm)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#ew42-grAm)" opacity="0.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color:var(--amethyst-light);">Turn</span>
|
||||
</a>
|
||||
<!-- Emerald Wide Rect (Goal) -->
|
||||
<a class="evidence-tile tile-emerald" href="43-evidence-wall-detail.html">
|
||||
<svg width="22" height="18" viewBox="-14 -10 28 20">
|
||||
<rect x="-12" y="-7" width="24" height="14" rx="2.5" fill="#121628" stroke="#10B981" stroke-width="0.8"/>
|
||||
<rect x="-12" y="-7" width="24" height="7" rx="2.5" fill="#10B981" opacity="0.04"/>
|
||||
<g filter="url(#ew42-glowSm)">
|
||||
<path d="M -3,-2 L 0,-4 L 3,-2 L 0,2 Z" fill="url(#ew42-grEm)" opacity="0.45"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color:var(--emerald-light);">Goal</span>
|
||||
</a>
|
||||
<!-- Sapphire Tall Hex (Ritual) -->
|
||||
<a class="evidence-tile tile-sapphire" href="43-evidence-wall-detail.html">
|
||||
<svg width="20" height="22" viewBox="-13 -14 26 28">
|
||||
<path d="M 0,-13 L 9,-6 L 9,6 L 0,13 L -9,6 L -9,-6 Z" fill="#121628" stroke="#3B82F6" stroke-width="0.8"/>
|
||||
<g filter="url(#ew42-glowSm)">
|
||||
<path d="M 0,-4 L 4,0 L 0,4 L -4,0 Z" fill="url(#ew42-grSap)" opacity="0.35"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color:var(--sapphire-light);">Ritual</span>
|
||||
</a>
|
||||
<!-- Rose Triangle (Streak) -->
|
||||
<a class="evidence-tile tile-rose" href="43-evidence-wall-detail.html">
|
||||
<svg width="22" height="22" viewBox="-14 -14 28 28">
|
||||
<path d="M 0,-12 L 11,8 L -11,8 Z" fill="#121628" stroke="#EC4899" stroke-width="0.8"/>
|
||||
<g filter="url(#ew42-glowSm)">
|
||||
<path d="M 0,-4 L 4,2 L -4,2 Z" fill="url(#ew42-grRose)" opacity="0.45"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color:var(--rose-light);">Streak</span>
|
||||
</a>
|
||||
|
||||
<!-- Row 5 -->
|
||||
<!-- Amber Pentagon (Mirror) -->
|
||||
<a class="evidence-tile tile-amber" href="43-evidence-wall-detail.html">
|
||||
<svg width="22" height="22" viewBox="-15 -14 30 28">
|
||||
<path d="M 0,-11 L 10,-3 L 6,9 L -6,9 L -10,-3 Z" fill="#121628" stroke="#F59E0B" stroke-width="0.8"/>
|
||||
<g filter="url(#ew42-glowSm)">
|
||||
<path d="M 0,-4 L 4,0 L 0,4 L -4,0 Z" fill="url(#ew42-grAmb)" opacity="0.45"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color:var(--amber-light);">Mirror</span>
|
||||
</a>
|
||||
<!-- Amethyst Diamond -->
|
||||
<a class="evidence-tile tile-amethyst" href="43-evidence-wall-detail.html">
|
||||
<svg width="22" height="22" viewBox="-14 -14 28 28">
|
||||
<path d="M 0,-11 L 11,0 L 0,11 L -11,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.8"/>
|
||||
<g filter="url(#ew42-glowSm)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#ew42-grAm)" opacity="0.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color:var(--amethyst-light);">Turn</span>
|
||||
</a>
|
||||
<!-- Amethyst Diamond -->
|
||||
<a class="evidence-tile tile-amethyst" href="43-evidence-wall-detail.html">
|
||||
<svg width="22" height="22" viewBox="-14 -14 28 28">
|
||||
<path d="M 0,-11 L 11,0 L 0,11 L -11,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.8"/>
|
||||
<g filter="url(#ew42-glowSm)">
|
||||
<path d="M 0,-5 L 5,0 L 0,5 L -5,0 Z" fill="url(#ew42-grAm)" opacity="0.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color:var(--amethyst-light);">Turn</span>
|
||||
</a>
|
||||
<!-- Emerald Wide Rect (Goal) -->
|
||||
<a class="evidence-tile tile-emerald" href="43-evidence-wall-detail.html">
|
||||
<svg width="22" height="18" viewBox="-14 -10 28 20">
|
||||
<rect x="-12" y="-7" width="24" height="14" rx="2.5" fill="#121628" stroke="#10B981" stroke-width="0.8"/>
|
||||
<g filter="url(#ew42-glowSm)">
|
||||
<path d="M -3,-2 L 0,-4 L 3,-2 L 0,2 Z" fill="url(#ew42-grEm)" opacity="0.45"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="tile-label" style="color:var(--emerald-light);">Goal</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div style="padding: 0 var(--space-4) var(--space-6); text-align: center;">
|
||||
<div class="body-sm text-dim">47 tiles · 14-day streak · started Feb 1, 2026</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
248
initial mockups/screens/you/43-evidence-wall-detail.html
Normal file
248
initial mockups/screens/you/43-evidence-wall-detail.html
Normal file
@@ -0,0 +1,248 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Evidence Wall Detail</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.dimmed-wall {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(5,5,8,0.75);
|
||||
backdrop-filter: blur(6px);
|
||||
z-index: 40;
|
||||
}
|
||||
/* Mini wall visible behind modal */
|
||||
.wall-bg-preview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
opacity: 0.35;
|
||||
}
|
||||
.wbg-tile {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 12px;
|
||||
border: 1px solid;
|
||||
}
|
||||
.modal-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
z-index: 50;
|
||||
}
|
||||
.modal-sheet {
|
||||
width: 100%;
|
||||
background: var(--kalei-navy);
|
||||
border-radius: 20px 20px 0 0;
|
||||
padding: var(--space-6) var(--space-4) var(--space-8);
|
||||
animation: slideUp 0.35s ease;
|
||||
}
|
||||
.modal-handle {
|
||||
width: 36px;
|
||||
height: 4px;
|
||||
background: var(--twilight);
|
||||
border-radius: var(--radius-full);
|
||||
margin: 0 auto var(--space-5);
|
||||
}
|
||||
.tile-hero {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.tile-hero-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 16px;
|
||||
background: rgba(139,92,246,0.15);
|
||||
border: 1px solid var(--amethyst);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: var(--glow-amethyst);
|
||||
flex-shrink: 0;
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
}
|
||||
.tile-hero-info { flex: 1; }
|
||||
.tile-type-name {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--amethyst-light);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.tile-date {
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.detail-section {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.detail-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--dim-light);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.detail-value {
|
||||
font-size: 15px;
|
||||
color: var(--soft-light);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.related-goal-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
text-decoration: none;
|
||||
color: var(--emerald-light);
|
||||
font-size: 14px;
|
||||
}
|
||||
.close-btn {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
color: var(--dim-light);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
margin-top: var(--space-4);
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.close-btn:hover { background: var(--deep-glass); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
|
||||
<!-- STATUS BAR -->
|
||||
<div class="status-bar" style="position: relative; z-index: 1;">
|
||||
<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>
|
||||
|
||||
<!-- NAV HEADER -->
|
||||
<div class="nav-header" style="position: relative; z-index: 1;">
|
||||
<a class="nav-back" href="42-evidence-wall-full.html">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="nav-title">Evidence Wall</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<!-- WALL BACKGROUND (dimmed) -->
|
||||
<div class="wall-bg-preview">
|
||||
<div class="wbg-tile" style="background:rgba(139,92,246,0.15);border-color:var(--amethyst);"></div>
|
||||
<div class="wbg-tile" style="background:rgba(245,158,11,0.15);border-color:var(--amber);"></div>
|
||||
<div class="wbg-tile" style="background:rgba(139,92,246,0.15);border-color:var(--amethyst);"></div>
|
||||
<div class="wbg-tile" style="background:rgba(16,185,129,0.15);border-color:var(--emerald);"></div>
|
||||
<div class="wbg-tile" style="background:rgba(59,130,246,0.15);border-color:var(--sapphire);"></div>
|
||||
<div class="wbg-tile" style="background:rgba(139,92,246,0.15);border-color:var(--amethyst);"></div>
|
||||
<div class="wbg-tile" style="background:rgba(236,72,153,0.15);border-color:var(--rose);"></div>
|
||||
<div class="wbg-tile" style="background:rgba(245,158,11,0.15);border-color:var(--amber);"></div>
|
||||
<div class="wbg-tile" style="background:rgba(139,92,246,0.15);border-color:var(--amethyst);"></div>
|
||||
<div class="wbg-tile" style="background:rgba(16,185,129,0.15);border-color:var(--emerald);"></div>
|
||||
<div class="wbg-tile" style="background:rgba(139,92,246,0.15);border-color:var(--amethyst);"></div>
|
||||
<div class="wbg-tile" style="background:rgba(59,130,246,0.15);border-color:var(--sapphire);"></div>
|
||||
</div>
|
||||
|
||||
<!-- DIMMED OVERLAY -->
|
||||
<div class="dimmed-wall"></div>
|
||||
|
||||
<!-- MODAL -->
|
||||
<div class="modal-overlay">
|
||||
<div class="modal-sheet">
|
||||
<div class="modal-handle"></div>
|
||||
|
||||
<!-- Tile Hero -->
|
||||
<div class="tile-hero">
|
||||
<div class="tile-hero-icon">
|
||||
<!-- LG Amethyst fragment (36px) — extracted from fragment-icons.svg LG size -->
|
||||
<svg width="40" height="40" viewBox="-22 -22 44 44">
|
||||
<defs>
|
||||
<linearGradient id="ew43-grA" 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>
|
||||
<filter id="ew43-glowLg" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<!-- Diamond tile shell from evidence-wall.svg, LG scale -->
|
||||
<g filter="url(#ew43-glowLg)">
|
||||
<path d="M 0,-18 L 18,0 L 0,18 L -18,0 Z" fill="#121628" stroke="#8B5CF6" stroke-width="0.8"/>
|
||||
<path d="M 0,-18 L 18,0 L 0,0 Z" fill="#8B5CF6" opacity="0.06"/>
|
||||
<!-- LG inner fragment from fragment-icons.svg -->
|
||||
<path d="M 0,-8 L 8,0 L 0,8 L -8,0 Z" fill="url(#ew43-grA)" opacity="0.5"/>
|
||||
<path d="M 0,-8 L 8,0 L 0,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<path d="M 0,-8 L -8,0 L 0,0 Z" fill="#fff" opacity="0.08"/>
|
||||
<line x1="0" y1="-8" x2="0" y2="8" stroke="#fff" stroke-width="0.5" opacity="0.2"/>
|
||||
<line x1="-8" y1="0" x2="8" y2="0" stroke="#fff" stroke-width="0.4" opacity="0.12"/>
|
||||
<circle cx="-2" cy="-2" r="1" fill="#fff" opacity="0.3"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="tile-hero-info">
|
||||
<div class="tile-type-name">Turn Completion</div>
|
||||
<div class="tile-date">Earned Feb 22, 2026 · Turn #47</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Source Thought -->
|
||||
<div class="detail-section">
|
||||
<div class="detail-label">Original Thought</div>
|
||||
<div class="detail-value" style="font-style: italic; color: var(--dim-light);">"I completely bombed my presentation today and everyone saw how unprepared I was."</div>
|
||||
</div>
|
||||
|
||||
<!-- Insight -->
|
||||
<div class="detail-section">
|
||||
<div class="detail-label">What you reframed</div>
|
||||
<div class="detail-value">Catastrophizing + Overgeneralization — you turned "total failure in front of everyone" into 3 distinct perspectives. Recognizing both patterns in a single thought is the hardest kind of work.</div>
|
||||
</div>
|
||||
|
||||
<!-- Distortions detected -->
|
||||
<div class="detail-section">
|
||||
<div class="detail-label">Patterns detected</div>
|
||||
<div style="display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px;">
|
||||
<span style="background: rgba(245,158,11,0.1); color: var(--amber-light); border-radius: var(--radius-sm); padding: 3px 10px; font-size: 12px; font-weight: 500;">Catastrophizing</span>
|
||||
<span style="background: rgba(245,158,11,0.1); color: var(--amber-light); border-radius: var(--radius-sm); padding: 3px 10px; font-size: 12px; font-weight: 500;">Overgeneralization</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Related Goal -->
|
||||
<div class="detail-section">
|
||||
<div class="detail-label">Related Goal</div>
|
||||
<a class="related-goal-link" href="../lens/27-lens-goal-detail.html">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" fill="none" stroke="var(--emerald)" stroke-width="1.2"/><circle cx="8" cy="8" r="2.5" fill="var(--emerald)" opacity="0.5"/></svg>
|
||||
Present with confidence
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M5 3L9 7L5 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Close button -->
|
||||
<a class="close-btn" href="42-evidence-wall-full.html">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user