Initial commit: Kalei app — docs, mockups, logo, pitch deck
Complete project files including: - 73 polished HTML mockup screens (onboarding, turn, mirror, lens, gallery, you, ritual, spectrum, modals, guide) - Design system CSS with Inter font, jewel-tone palette, device frame scaling - Canonical 6-blade kaleidoscope logo (soft-elegance-final) - SVG asset library (fragments, icons, patterns, evidence wall, spectrum viz) - Product docs, brand guidelines, technical architecture, build phases - Pitch deck and cost projections - Logo mockup iterations and finalists Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
381
initial mockups/screens/you/35-you-profile.html
Normal file
381
initial mockups/screens/you/35-you-profile.html
Normal file
@@ -0,0 +1,381 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — You Profile</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.avatar-circle {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--deep-glass), var(--twilight));
|
||||
border: 2px solid var(--soft-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: var(--soft-light);
|
||||
box-shadow: var(--glow-white);
|
||||
flex-shrink: 0;
|
||||
animation: breathing 6s ease-in-out infinite;
|
||||
}
|
||||
.profile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-4) 0 var(--space-5);
|
||||
}
|
||||
.profile-info { flex: 1; }
|
||||
.profile-name {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--pure-light);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.profile-since {
|
||||
font-size: 13px;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.stats-row {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.stat-block-you {
|
||||
flex: 1;
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-3);
|
||||
text-align: center;
|
||||
}
|
||||
.stat-block-you .val {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
.stat-block-you .lbl {
|
||||
font-size: 10px;
|
||||
color: var(--dim-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.quick-links-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.quick-link-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
text-decoration: none;
|
||||
transition: background 0.15s;
|
||||
border-bottom: 1px solid var(--twilight);
|
||||
}
|
||||
.quick-link-item:last-child { border-bottom: none; }
|
||||
.quick-link-item:hover { background: var(--deep-glass); }
|
||||
.quick-link-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--deep-glass);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.quick-link-label {
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
.quick-link-chevron { color: var(--faint-light); }
|
||||
.evidence-preview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 6px;
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
.preview-tile {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid;
|
||||
cursor: pointer;
|
||||
}
|
||||
.preview-tile.amethyst {
|
||||
background: rgba(139,92,246,0.12);
|
||||
border-color: var(--amethyst);
|
||||
box-shadow: 0 0 8px rgba(139,92,246,0.15);
|
||||
}
|
||||
.preview-tile.amber {
|
||||
background: rgba(245,158,11,0.12);
|
||||
border-color: var(--amber);
|
||||
box-shadow: 0 0 8px rgba(245,158,11,0.15);
|
||||
}
|
||||
.preview-tile.emerald {
|
||||
background: rgba(16,185,129,0.12);
|
||||
border-color: var(--emerald);
|
||||
box-shadow: 0 0 8px rgba(16,185,129,0.15);
|
||||
}
|
||||
.preview-tile.sapphire {
|
||||
background: rgba(59,130,246,0.12);
|
||||
border-color: var(--sapphire);
|
||||
box-shadow: 0 0 8px rgba(59,130,246,0.15);
|
||||
}
|
||||
.preview-tile.ghost {
|
||||
background: transparent;
|
||||
border-color: var(--twilight);
|
||||
border-style: dashed;
|
||||
}
|
||||
.spectrum-preview-card {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
text-decoration: none;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.spectrum-preview-card:hover { background: var(--deep-glass); }
|
||||
.prism-badge {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
background: var(--prismatic);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
border: 1px solid;
|
||||
border-image: var(--prismatic) 1;
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
.prism-badge-wrap {
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(59,130,246,0.2), rgba(16,185,129,0.2));
|
||||
border-radius: var(--radius-full);
|
||||
padding: 3px 10px;
|
||||
}
|
||||
.prism-badge-text {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
background: var(--prismatic);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.stats-link {
|
||||
display: block;
|
||||
text-align: right;
|
||||
font-size: 13px;
|
||||
color: var(--amethyst-light);
|
||||
text-decoration: none;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.stats-link:hover { opacity: 0.8; }
|
||||
</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>
|
||||
|
||||
<!-- SCREEN CONTENT -->
|
||||
<div class="screen-content" style="padding-top: var(--space-2);">
|
||||
|
||||
<!-- Profile Header -->
|
||||
<div class="profile-header">
|
||||
<div class="avatar-circle">A</div>
|
||||
<div class="profile-info">
|
||||
<div class="profile-name">Alex</div>
|
||||
<div class="profile-since">alex@email.com · Member since Feb 1, 2026</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Row -->
|
||||
<a href="36-you-stats.html" class="stats-link">View all stats</a>
|
||||
<div class="stats-row">
|
||||
<div class="stat-block-you">
|
||||
<div class="val" style="color: var(--amethyst-light);">47</div>
|
||||
<div class="lbl">Turns</div>
|
||||
</div>
|
||||
<div class="stat-block-you">
|
||||
<div class="val" style="color: var(--amber-light);">23</div>
|
||||
<div class="lbl">Sessions</div>
|
||||
</div>
|
||||
<div class="stat-block-you">
|
||||
<div class="val" style="color: var(--rose-light);">14</div>
|
||||
<div class="lbl">Day Streak</div>
|
||||
</div>
|
||||
<div class="stat-block-you">
|
||||
<div class="val" style="color: var(--emerald-light);">3</div>
|
||||
<div class="lbl">Goals</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Links -->
|
||||
<div class="quick-links-card">
|
||||
<a class="quick-link-item" href="37-you-settings.html">
|
||||
<div class="quick-link-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<circle cx="9" cy="9" r="3" stroke="var(--dim-light)" stroke-width="1.2"/>
|
||||
<path d="M9 1v2M9 15v2M1 9h2M15 9h2M3.22 3.22l1.41 1.41M13.37 13.37l1.41 1.41M3.22 14.78l1.41-1.41M13.37 4.63l1.41-1.41" stroke="var(--dim-light)" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="quick-link-label">Settings</span>
|
||||
<svg class="quick-link-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="quick-link-item" href="38-you-subscription.html">
|
||||
<div class="quick-link-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M9 1L12 7L18 8L13.5 12.5L14.5 18L9 15L3.5 18L4.5 12.5L0 8L6 7Z" stroke="var(--dim-light)" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="quick-link-label">Subscription</span>
|
||||
<svg class="quick-link-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="quick-link-item" href="37-you-settings.html">
|
||||
<div class="quick-link-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<rect x="2" y="4" width="14" height="10" rx="2" stroke="var(--dim-light)" stroke-width="1.2"/>
|
||||
<path d="M6 8h6M6 11h4" stroke="var(--dim-light)" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="quick-link-label">Data & Privacy</span>
|
||||
<svg class="quick-link-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Evidence Wall Preview -->
|
||||
<div class="section-header">
|
||||
<span class="section-title">Evidence Wall</span>
|
||||
<a href="42-evidence-wall-full.html" class="section-action">View all</a>
|
||||
</div>
|
||||
<div class="card" style="margin-bottom: var(--space-4);">
|
||||
<a href="42-evidence-wall-full.html" style="text-decoration: none; display: block;">
|
||||
<div class="evidence-preview">
|
||||
<div class="preview-tile amethyst">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 1L11 6L6 11L1 6Z" fill="var(--amethyst)" opacity="0.85"/></svg>
|
||||
</div>
|
||||
<div class="preview-tile amber">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 1L10 3.5L11.5 6L10 8.5L6 11L2 8.5L0.5 6L2 3.5Z" fill="none" stroke="var(--amber)" stroke-width="1.2"/></svg>
|
||||
</div>
|
||||
<div class="preview-tile amethyst">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 1L11 6L6 11L1 6Z" fill="var(--amethyst)" opacity="0.85"/></svg>
|
||||
</div>
|
||||
<div class="preview-tile emerald">
|
||||
<svg width="12" height="8" viewBox="0 0 12 8"><rect x="1" y="1" width="10" height="6" rx="1.5" fill="none" stroke="var(--emerald)" stroke-width="1.2"/></svg>
|
||||
</div>
|
||||
<div class="preview-tile sapphire">
|
||||
<svg width="10" height="14" viewBox="0 0 10 14"><path d="M5 1L9 3.5L9 8.5L5 11L1 8.5L1 3.5Z" fill="none" stroke="var(--sapphire)" stroke-width="1.2"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: var(--space-2); font-size: 12px; color: var(--dim-light);">47 tiles — your patterns are visible</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Spectrum Preview -->
|
||||
<div class="section-header">
|
||||
<span class="section-title">Spectrum</span>
|
||||
<div class="prism-badge-wrap"><span class="prism-badge-text">Prism</span></div>
|
||||
</div>
|
||||
<a class="spectrum-preview-card" href="../spectrum/50-spectrum-dashboard.html" style="margin-bottom: var(--space-6);">
|
||||
<div style="flex:1;">
|
||||
<div class="subheading" style="color: var(--soft-light); margin-bottom: 4px;">Your Analytics</div>
|
||||
<div class="body-sm" style="color: var(--dim-light);">Unlock deep insights into your patterns</div>
|
||||
</div>
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" style="mix-blend-mode: screen; flex-shrink:0;">
|
||||
<defs>
|
||||
<linearGradient id="specGrad" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#8B5CF6"/>
|
||||
<stop offset="50%" stop-color="#3B82F6"/>
|
||||
<stop offset="100%" stop-color="#10B981"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="translate(24,24)">
|
||||
<path d="M0,0 L4,-18 L0,-22 L-4,-18Z" fill="url(#specGrad)" opacity="0.7"/>
|
||||
<g transform="rotate(60)"><path d="M0,0 L4,-18 L0,-22 L-4,-18Z" fill="url(#specGrad)" opacity="0.7"/></g>
|
||||
<g transform="rotate(120)"><path d="M0,0 L4,-18 L0,-22 L-4,-18Z" fill="url(#specGrad)" opacity="0.7"/></g>
|
||||
<g transform="rotate(180)"><path d="M0,0 L4,-18 L0,-22 L-4,-18Z" fill="url(#specGrad)" opacity="0.7"/></g>
|
||||
<g transform="rotate(240)"><path d="M0,0 L4,-18 L0,-22 L-4,-18Z" fill="url(#specGrad)" opacity="0.7"/></g>
|
||||
<g transform="rotate(300)"><path d="M0,0 L4,-18 L0,-22 L-4,-18Z" fill="url(#specGrad)" opacity="0.7"/></g>
|
||||
<circle r="4" fill="white" opacity="0.2"/>
|
||||
</g>
|
||||
</svg>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M6 4L10 8L6 12" stroke="var(--faint-light)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TAB BAR -->
|
||||
<div class="tab-bar">
|
||||
<a class="tab-item inactive" data-tab="turn" href="../turn/10-turn-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 2L20 12L12 22L4 12Z" fill="currentColor" opacity="0.9"/><path d="M12 2L20 12L12 12Z" fill="white" opacity="0.15"/></svg>
|
||||
<span class="tab-label">Turn</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="mirror" href="../mirror/15-mirror-home.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 3L16 8L18 14L12 19L6 14L8 8Z" stroke="currentColor" fill="none" stroke-width="1.2"/></svg>
|
||||
<span class="tab-label">Mirror</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="lens" href="../lens/20-lens-dashboard.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="currentColor" fill="none" stroke-width="1.2"/><circle cx="12" cy="12" r="4" stroke="currentColor" fill="none" stroke-width="0.8"/></svg>
|
||||
<span class="tab-label">Lens</span>
|
||||
</a>
|
||||
<a class="tab-item inactive" data-tab="gallery" href="../gallery/31-gallery-all.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><rect x="3" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/></svg>
|
||||
<span class="tab-label">Gallery</span>
|
||||
</a>
|
||||
<a class="tab-item active" data-tab="you" href="35-you-profile.html">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="9" r="4" stroke="currentColor" fill="none" stroke-width="1.2"/><path d="M4 20C4 16 8 14 12 14C16 14 20 16 20 20" stroke="currentColor" fill="none" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
<span class="tab-label">You</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
290
initial mockups/screens/you/36-you-stats.html
Normal file
290
initial mockups/screens/you/36-you-stats.html
Normal file
@@ -0,0 +1,290 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Your Stats</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.big-stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.big-stat {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
.big-stat .bval {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.big-stat .blbl {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.bar-chart-container {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.bar-chart {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: var(--space-2);
|
||||
height: 80px;
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
.bar-group {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.bar {
|
||||
width: 100%;
|
||||
border-radius: 4px 4px 0 0;
|
||||
background: linear-gradient(to top, var(--amethyst-dark), var(--amethyst-light));
|
||||
transition: height 0.3s ease;
|
||||
}
|
||||
.bar-week-label {
|
||||
font-size: 10px;
|
||||
color: var(--faint-light);
|
||||
text-align: center;
|
||||
}
|
||||
.big-stat {
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
.big-stat:hover {
|
||||
box-shadow: 0 0 16px rgba(139,92,246,0.1);
|
||||
}
|
||||
.distortions-list {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.distortion-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.distortion-row:last-child { margin-bottom: 0; }
|
||||
.dist-rank {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--faint-light);
|
||||
width: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.dist-name {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
color: var(--soft-light);
|
||||
}
|
||||
.dist-bar-wrap {
|
||||
width: 80px;
|
||||
height: 6px;
|
||||
background: var(--twilight);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dist-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, var(--amber-dark), var(--amber-light));
|
||||
border-radius: 3px;
|
||||
}
|
||||
.dist-count {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
width: 24px;
|
||||
text-align: right;
|
||||
}
|
||||
.feature-breakdown {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
.feature-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.feature-row:last-child { margin-bottom: 0; }
|
||||
.feature-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.feature-name { flex: 1; font-size: 14px; color: var(--soft-light); }
|
||||
.feature-pct {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--pure-light);
|
||||
}
|
||||
.feature-bar-wrap {
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
background: var(--twilight);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.feature-bar { height: 100%; border-radius: 2px; }
|
||||
</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">Your Stats</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<!-- SCREEN CONTENT -->
|
||||
<div class="screen-content" style="padding-top: var(--space-4);">
|
||||
|
||||
<!-- Big Stat Blocks -->
|
||||
<div class="big-stats-grid">
|
||||
<div class="big-stat">
|
||||
<div class="bval text-amethyst">47</div>
|
||||
<div class="blbl">Total Turns</div>
|
||||
</div>
|
||||
<div class="big-stat">
|
||||
<div class="bval text-amber">18</div>
|
||||
<div class="blbl">Fragments Found</div>
|
||||
</div>
|
||||
<div class="big-stat">
|
||||
<div class="bval text-emerald">23</div>
|
||||
<div class="blbl">Mirror Sessions</div>
|
||||
</div>
|
||||
<div class="big-stat">
|
||||
<div class="bval" style="color: var(--rose);">14</div>
|
||||
<div class="blbl">Day Streak</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Turns Per Week -->
|
||||
<div class="section-header">
|
||||
<span class="section-title">Turns Per Week</span>
|
||||
</div>
|
||||
<div class="bar-chart-container">
|
||||
<div style="font-size: 11px; color: var(--dim-light); margin-bottom: 4px;">Feb 1 – Feb 22</div>
|
||||
<div class="bar-chart">
|
||||
<div class="bar-group">
|
||||
<div class="bar" style="height: 38px;"></div>
|
||||
<div class="bar-week-label">Feb 1–7</div>
|
||||
</div>
|
||||
<div class="bar-group">
|
||||
<div class="bar" style="height: 52px;"></div>
|
||||
<div class="bar-week-label">Feb 8–14</div>
|
||||
</div>
|
||||
<div class="bar-group">
|
||||
<div class="bar" style="height: 65px;"></div>
|
||||
<div class="bar-week-label">Feb 15–21</div>
|
||||
</div>
|
||||
<div class="bar-group">
|
||||
<div class="bar" style="height: 22px; opacity: 0.6;"></div>
|
||||
<div class="bar-week-label">Feb 22</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Top Distortions -->
|
||||
<div class="section-header">
|
||||
<span class="section-title">Top Distortions</span>
|
||||
</div>
|
||||
<div class="distortions-list">
|
||||
<div class="distortion-row">
|
||||
<div class="dist-rank">1</div>
|
||||
<div class="dist-name">Catastrophizing</div>
|
||||
<div class="dist-bar-wrap"><div class="dist-bar" style="width: 100%;"></div></div>
|
||||
<div class="dist-count">7</div>
|
||||
</div>
|
||||
<div class="distortion-row">
|
||||
<div class="dist-rank">2</div>
|
||||
<div class="dist-name">Mind Reading</div>
|
||||
<div class="dist-bar-wrap"><div class="dist-bar" style="width: 57%;"></div></div>
|
||||
<div class="dist-count">4</div>
|
||||
</div>
|
||||
<div class="distortion-row">
|
||||
<div class="dist-rank">3</div>
|
||||
<div class="dist-name">Should Statements</div>
|
||||
<div class="dist-bar-wrap"><div class="dist-bar" style="width: 43%;"></div></div>
|
||||
<div class="dist-count">3</div>
|
||||
</div>
|
||||
<div class="distortion-row">
|
||||
<div class="dist-rank">4</div>
|
||||
<div class="dist-name">Overgeneralization</div>
|
||||
<div class="dist-bar-wrap"><div class="dist-bar" style="width: 29%;"></div></div>
|
||||
<div class="dist-count">2</div>
|
||||
</div>
|
||||
<div class="distortion-row">
|
||||
<div class="dist-rank">5</div>
|
||||
<div class="dist-name">Personalization</div>
|
||||
<div class="dist-bar-wrap"><div class="dist-bar" style="width: 29%;"></div></div>
|
||||
<div class="dist-count">2</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature Breakdown -->
|
||||
<div class="section-header">
|
||||
<span class="section-title">Feature Usage</span>
|
||||
</div>
|
||||
<div class="feature-breakdown">
|
||||
<div class="feature-row">
|
||||
<div class="feature-dot" style="background: var(--amethyst);"></div>
|
||||
<div class="feature-name">Turn</div>
|
||||
<div class="feature-bar-wrap"><div class="feature-bar" style="width: 75%; background: var(--amethyst);"></div></div>
|
||||
<div class="feature-pct">75%</div>
|
||||
</div>
|
||||
<div class="feature-row">
|
||||
<div class="feature-dot" style="background: var(--amber);"></div>
|
||||
<div class="feature-name">Mirror</div>
|
||||
<div class="feature-bar-wrap"><div class="feature-bar" style="width: 15%; background: var(--amber);"></div></div>
|
||||
<div class="feature-pct">15%</div>
|
||||
</div>
|
||||
<div class="feature-row">
|
||||
<div class="feature-dot" style="background: var(--emerald);"></div>
|
||||
<div class="feature-name">Lens</div>
|
||||
<div class="feature-bar-wrap"><div class="feature-bar" style="width: 10%; background: var(--emerald);"></div></div>
|
||||
<div class="feature-pct">10%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
226
initial mockups/screens/you/37-you-settings.html
Normal file
226
initial mockups/screens/you/37-you-settings.html
Normal file
@@ -0,0 +1,226 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Settings</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.settings-section {
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.settings-group {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
}
|
||||
.settings-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
text-decoration: none;
|
||||
transition: background 0.15s;
|
||||
border-bottom: 1px solid var(--twilight);
|
||||
}
|
||||
.settings-item:last-child { border-bottom: none; }
|
||||
.settings-item:hover { background: var(--deep-glass); }
|
||||
.settings-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.settings-item-text { flex: 1; }
|
||||
.settings-item-label {
|
||||
font-size: 15px;
|
||||
color: var(--soft-light);
|
||||
display: block;
|
||||
}
|
||||
.settings-item-desc {
|
||||
font-size: 12px;
|
||||
color: var(--dim-light);
|
||||
margin-top: 1px;
|
||||
display: block;
|
||||
}
|
||||
.settings-chevron { color: var(--faint-light); }
|
||||
.settings-version {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: var(--faint-light);
|
||||
margin: var(--space-4) 0 var(--space-6);
|
||||
}
|
||||
.danger-item .settings-item-label { color: var(--ruby); }
|
||||
</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">Settings</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<!-- SCREEN CONTENT -->
|
||||
<div class="screen-content" style="padding-top: var(--space-4);">
|
||||
|
||||
<!-- Profile Section -->
|
||||
<div class="settings-section">
|
||||
<div class="label text-dim" style="margin-bottom: var(--space-2);">Profile</div>
|
||||
<div class="settings-group">
|
||||
<div class="settings-item" style="cursor: default;">
|
||||
<div class="settings-icon" style="background: rgba(139,92,246,0.1);">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<circle cx="9" cy="7" r="3" stroke="var(--amethyst-light)" stroke-width="1.2"/>
|
||||
<path d="M3 15c0-3 3-4.5 6-4.5s6 1.5 6 4.5" stroke="var(--amethyst-light)" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="settings-item-text">
|
||||
<span class="settings-item-label">Alex</span>
|
||||
<span class="settings-item-desc">alex@email.com</span>
|
||||
</div>
|
||||
</div>
|
||||
<a class="settings-item" href="#">
|
||||
<div class="settings-icon" style="background: rgba(139,92,246,0.1);">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M13 2L16 5L7 14L3 15L4 11L13 2Z" stroke="var(--amethyst-light)" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="settings-item-text">
|
||||
<span class="settings-item-label">Edit Name</span>
|
||||
</div>
|
||||
<svg class="settings-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<a class="settings-item" href="../onboarding/05-style-selection.html">
|
||||
<div class="settings-icon" style="background: rgba(139,92,246,0.1);">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M9 2L13 8H5L9 2Z" fill="none" stroke="var(--amethyst-light)" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
<path d="M5 8L2 14H8L5 8Z" fill="none" stroke="var(--amethyst-light)" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
<path d="M13 8L10 14H16L13 8Z" fill="none" stroke="var(--amethyst-light)" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="settings-item-text">
|
||||
<span class="settings-item-label">Coaching Style</span>
|
||||
<span class="settings-item-desc">Currently: Compassionate</span>
|
||||
</div>
|
||||
<svg class="settings-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notifications Section -->
|
||||
<div class="settings-section">
|
||||
<div class="label text-dim" style="margin-bottom: var(--space-2);">Notifications</div>
|
||||
<div class="settings-group">
|
||||
<a class="settings-item" href="../system-states/62-notification-settings.html">
|
||||
<div class="settings-icon" style="background: rgba(59,130,246,0.1);">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M9 2C9 2 5 4 5 9V13L3 15H15L13 13V9C13 4 9 2 9 2Z" stroke="var(--sapphire-light)" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
<path d="M7 15c0 1.1.9 2 2 2s2-.9 2-2" stroke="var(--sapphire-light)" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="settings-item-text">
|
||||
<span class="settings-item-label">Notifications</span>
|
||||
<span class="settings-item-desc">Reminders & alerts</span>
|
||||
</div>
|
||||
<svg class="settings-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<a class="settings-item" href="#">
|
||||
<div class="settings-icon" style="background: rgba(99,102,241,0.1);">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<circle cx="9" cy="9" r="6" stroke="var(--indigo-light)" stroke-width="1.2"/>
|
||||
<path d="M6 9h6M9 6v6" stroke="var(--indigo-light)" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="settings-item-text">
|
||||
<span class="settings-item-label">Appearance</span>
|
||||
<span class="settings-item-desc">Themes (coming soon)</span>
|
||||
</div>
|
||||
<svg class="settings-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Data & Privacy -->
|
||||
<div class="settings-section">
|
||||
<div class="label text-dim" style="margin-bottom: var(--space-2);">Data & Privacy</div>
|
||||
<div class="settings-group">
|
||||
<a class="settings-item" href="../system-states/63-data-export.html">
|
||||
<div class="settings-icon" style="background: rgba(16,185,129,0.1);">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M9 2v10M5 8l4 4 4-4" stroke="var(--emerald-light)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M3 14h12" stroke="var(--emerald-light)" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="settings-item-text">
|
||||
<span class="settings-item-label">Export Your Data</span>
|
||||
<span class="settings-item-desc">Download all your data</span>
|
||||
</div>
|
||||
<svg class="settings-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<a class="settings-item danger-item" href="../system-states/64-account-deletion.html">
|
||||
<div class="settings-icon" style="background: rgba(239,68,68,0.1);">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M5 5l8 8M13 5l-8 8" stroke="var(--ruby)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="settings-item-text">
|
||||
<span class="settings-item-label">Delete Account</span>
|
||||
</div>
|
||||
<svg class="settings-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- About -->
|
||||
<div class="settings-section">
|
||||
<div class="label text-dim" style="margin-bottom: var(--space-2);">About</div>
|
||||
<div class="settings-group">
|
||||
<div class="settings-item" style="cursor: default;">
|
||||
<div class="settings-item-text">
|
||||
<span class="settings-item-label">Version</span>
|
||||
</div>
|
||||
<span style="font-size: 13px; color: var(--dim-light);">1.0.0 (42)</span>
|
||||
</div>
|
||||
<a class="settings-item" href="#">
|
||||
<div class="settings-item-text">
|
||||
<span class="settings-item-label">Terms of Service</span>
|
||||
</div>
|
||||
<svg class="settings-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<a class="settings-item" href="#">
|
||||
<div class="settings-item-text">
|
||||
<span class="settings-item-label">Privacy Policy</span>
|
||||
</div>
|
||||
<svg class="settings-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-version">Kalei — Same pieces. New angle.</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
270
initial mockups/screens/you/38-you-subscription.html
Normal file
270
initial mockups/screens/you/38-you-subscription.html
Normal file
@@ -0,0 +1,270 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Subscription</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.current-plan-card {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.plan-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 28px;
|
||||
padding: 0 var(--space-3);
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--dim-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.comparison-table {
|
||||
background: var(--kalei-navy);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.compare-header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 80px 80px;
|
||||
gap: 0;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-bottom: 1px solid var(--twilight);
|
||||
background: var(--deep-glass);
|
||||
}
|
||||
.compare-col-header {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
text-align: center;
|
||||
}
|
||||
.compare-col-header.prism {
|
||||
background: var(--prismatic);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.compare-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 80px 80px;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-bottom: 1px solid var(--twilight);
|
||||
align-items: center;
|
||||
}
|
||||
.compare-row:last-child { border-bottom: none; }
|
||||
.compare-feature { font-size: 13px; color: var(--soft-light); }
|
||||
.compare-check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.check-yes {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: rgba(16,185,129,0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.check-no {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: rgba(71,85,105,0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.price-hero {
|
||||
text-align: center;
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.price-amount {
|
||||
font-family: var(--font-display);
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
background: var(--prismatic);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
line-height: 1;
|
||||
}
|
||||
.price-period {
|
||||
font-size: 16px;
|
||||
color: var(--dim-light);
|
||||
margin-top: 4px;
|
||||
}
|
||||
.btn-prismatic {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--prismatic);
|
||||
background-size: 200% 200%;
|
||||
animation: prismaticShift 3s ease-in-out infinite;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--pure-light);
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 24px rgba(139,92,246,0.3);
|
||||
}
|
||||
.prism-features {
|
||||
background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.prism-feature-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.prism-feature-row:last-child { margin-bottom: 0; }
|
||||
.prism-feature-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.prism-feature-text { font-size: 14px; color: var(--soft-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">Subscription</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<!-- SCREEN CONTENT -->
|
||||
<div class="screen-content" style="padding-top: var(--space-4);">
|
||||
|
||||
<!-- Current Plan -->
|
||||
<div class="current-plan-card">
|
||||
<div style="flex:1;">
|
||||
<div class="body-sm text-dim" style="margin-bottom: 4px;">Current Plan</div>
|
||||
<div class="subheading text-soft">Kalei Free</div>
|
||||
<div class="body-sm text-dim" style="margin-top: 4px;">3 turns/day · 1 mirror session/day · 3 active goals</div>
|
||||
</div>
|
||||
<div class="plan-badge">Free</div>
|
||||
</div>
|
||||
|
||||
<!-- Price Hero -->
|
||||
<div class="price-hero">
|
||||
<div class="price-amount">$7.99</div>
|
||||
<div class="price-period">per month</div>
|
||||
</div>
|
||||
|
||||
<!-- Prism Features -->
|
||||
<div class="section-header">
|
||||
<span class="section-title">Prism Includes</span>
|
||||
</div>
|
||||
<div class="prism-features">
|
||||
<div class="prism-feature-row">
|
||||
<div class="prism-feature-dot" style="background: var(--amethyst);"></div>
|
||||
<div class="prism-feature-text">Unlimited Turns — reframe as much as you need</div>
|
||||
</div>
|
||||
<div class="prism-feature-row">
|
||||
<div class="prism-feature-dot" style="background: var(--amber);"></div>
|
||||
<div class="prism-feature-text">Unlimited Mirror sessions — reflect without limits</div>
|
||||
</div>
|
||||
<div class="prism-feature-row">
|
||||
<div class="prism-feature-dot" style="background: var(--emerald);"></div>
|
||||
<div class="prism-feature-text">Unlimited goals with advanced milestone tracking</div>
|
||||
</div>
|
||||
<div class="prism-feature-row">
|
||||
<div class="prism-feature-dot" style="background: var(--sapphire);"></div>
|
||||
<div class="prism-feature-text">Full Spectrum analytics — patterns, growth, insights</div>
|
||||
</div>
|
||||
<div class="prism-feature-row">
|
||||
<div class="prism-feature-dot" style="background: var(--rose);"></div>
|
||||
<div class="prism-feature-text">Priority AI processing — faster, deeper reframes</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Comparison Table -->
|
||||
<div class="section-header">
|
||||
<span class="section-title">Compare Plans</span>
|
||||
</div>
|
||||
<div class="comparison-table">
|
||||
<div class="compare-header">
|
||||
<div></div>
|
||||
<div class="compare-col-header" style="color: var(--dim-light);">Free</div>
|
||||
<div class="compare-col-header prism">Prism</div>
|
||||
</div>
|
||||
<div class="compare-row">
|
||||
<div class="compare-feature">Turns per day</div>
|
||||
<div class="compare-check"><span style="font-size: 12px; color: var(--dim-light);">3</span></div>
|
||||
<div class="compare-check"><div class="check-yes"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="var(--emerald)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div></div>
|
||||
</div>
|
||||
<div class="compare-row">
|
||||
<div class="compare-feature">Mirror sessions/day</div>
|
||||
<div class="compare-check"><span style="font-size: 12px; color: var(--dim-light);">1</span></div>
|
||||
<div class="compare-check"><div class="check-yes"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="var(--emerald)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div></div>
|
||||
</div>
|
||||
<div class="compare-row">
|
||||
<div class="compare-feature">Active goals</div>
|
||||
<div class="compare-check"><span style="font-size: 12px; color: var(--dim-light);">3</span></div>
|
||||
<div class="compare-check"><div class="check-yes"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="var(--emerald)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div></div>
|
||||
</div>
|
||||
<div class="compare-row">
|
||||
<div class="compare-feature">Spectrum analytics</div>
|
||||
<div class="compare-check"><div class="check-no"><svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M3 3l4 4M7 3L3 7" stroke="var(--faint-light)" stroke-width="1.5" stroke-linecap="round"/></svg></div></div>
|
||||
<div class="compare-check"><div class="check-yes"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="var(--emerald)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div></div>
|
||||
</div>
|
||||
<div class="compare-row">
|
||||
<div class="compare-feature">Advanced Rituals</div>
|
||||
<div class="compare-check"><div class="check-no"><svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M3 3l4 4M7 3L3 7" stroke="var(--faint-light)" stroke-width="1.5" stroke-linecap="round"/></svg></div></div>
|
||||
<div class="compare-check"><div class="check-yes"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="var(--emerald)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upgrade Button -->
|
||||
<a href="../modals/58-upgrade-modal.html" class="btn-prismatic">Upgrade to Prism</a>
|
||||
<div style="text-align: center; margin-top: var(--space-3); margin-bottom: var(--space-6);">
|
||||
<a href="#" class="body-sm text-dim" style="text-decoration: none;">Restore Purchase</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
255
initial mockups/screens/you/39-evidence-wall-empty.html
Normal file
255
initial mockups/screens/you/39-evidence-wall-empty.html
Normal file
@@ -0,0 +1,255 @@
|
||||
<!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>
|
||||
365
initial mockups/screens/you/40-evidence-wall-early.html
Normal file
365
initial mockups/screens/you/40-evidence-wall-early.html
Normal file
@@ -0,0 +1,365 @@
|
||||
<!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>
|
||||
342
initial mockups/screens/you/41-evidence-wall-mid.html
Normal file
342
initial mockups/screens/you/41-evidence-wall-mid.html
Normal file
@@ -0,0 +1,342 @@
|
||||
<!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>
|
||||
357
initial mockups/screens/you/42-evidence-wall-full.html
Normal file
357
initial mockups/screens/you/42-evidence-wall-full.html
Normal file
@@ -0,0 +1,357 @@
|
||||
<!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>
|
||||
248
initial mockups/screens/you/43-evidence-wall-detail.html
Normal file
248
initial mockups/screens/you/43-evidence-wall-detail.html
Normal file
@@ -0,0 +1,248 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user