249 lines
10 KiB
HTML
249 lines
10 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 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>
|