343 lines
20 KiB
HTML
343 lines
20 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 (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>
|