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