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