366 lines
18 KiB
HTML
366 lines
18 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 (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>
|