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:
269
initial mockups/screens/gallery/31-gallery-all.html
Normal file
269
initial mockups/screens/gallery/31-gallery-all.html
Normal file
@@ -0,0 +1,269 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Gallery</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.gallery-header {
|
||||
padding: var(--space-4) var(--space-4) 0;
|
||||
}
|
||||
.gallery-title-row {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.gallery-heading {
|
||||
font-size: 26px; font-weight: 700; color: var(--pure-light);
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
.search-icon-btn {
|
||||
width: 40px; height: 40px; border-radius: var(--radius-md);
|
||||
background: var(--deep-glass); border: 1px solid var(--twilight);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: var(--dim-light); text-decoration: none; cursor: pointer;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.search-icon-btn:hover { border-color: var(--sapphire); color: var(--sapphire-light); }
|
||||
.toggle-row {
|
||||
display: flex; gap: 0; background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight); border-radius: var(--radius-lg);
|
||||
padding: 3px; margin-bottom: 12px;
|
||||
}
|
||||
.toggle-btn {
|
||||
flex: 1; height: 36px; border-radius: var(--radius-md);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 14px; font-weight: 600; cursor: pointer;
|
||||
text-decoration: none; transition: all 0.2s;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.toggle-btn.active {
|
||||
background: var(--sapphire); color: var(--pure-light);
|
||||
box-shadow: var(--glow-sapphire);
|
||||
}
|
||||
.sort-chips {
|
||||
display: flex; gap: 8px; margin-bottom: 14px;
|
||||
}
|
||||
.sort-chip {
|
||||
height: 30px; padding: 0 14px; border-radius: var(--radius-full);
|
||||
font-size: 12px; font-weight: 600; cursor: pointer;
|
||||
display: flex; align-items: center; transition: all 0.15s;
|
||||
border: 1px solid var(--twilight); color: var(--dim-light);
|
||||
background: transparent;
|
||||
}
|
||||
.sort-chip.active {
|
||||
background: rgba(var(--sapphire-rgb, 59,130,246), 0.15); border-color: var(--sapphire);
|
||||
color: var(--sapphire-light);
|
||||
}
|
||||
.pattern-card:hover { border-color: var(--amethyst); }
|
||||
@keyframes patternBreathing {
|
||||
0%, 100% { opacity: 0.75; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.04); }
|
||||
}
|
||||
.pattern-visual-area svg { animation: patternBreathing 6s ease-in-out infinite; }
|
||||
.pattern-grid {
|
||||
display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
|
||||
padding: 0 var(--space-4) var(--space-6);
|
||||
}
|
||||
.pattern-card {
|
||||
background: var(--kalei-navy); border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl); overflow: hidden; cursor: pointer;
|
||||
text-decoration: none; transition: border-color 0.2s;
|
||||
display: block;
|
||||
}
|
||||
.pattern-card:hover { border-color: rgba(139,92,246,0.4); }
|
||||
.pattern-visual-area {
|
||||
height: 130px; background: var(--void);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.pattern-bg-aura {
|
||||
position: absolute; inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.pattern-info { padding: 10px 12px 12px; }
|
||||
.pattern-thought {
|
||||
font-size: 12px; color: var(--soft-light); line-height: 1.4;
|
||||
margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical; overflow: hidden;
|
||||
}
|
||||
.pattern-meta {
|
||||
font-size: 11px; color: var(--dim-light); margin-bottom: 6px;
|
||||
}
|
||||
.pattern-chips { display: flex; flex-wrap: wrap; gap: 4px; }
|
||||
.distortion-mini-chip {
|
||||
background: rgba(245,158,11,0.1); color: var(--amber-light);
|
||||
border-radius: 4px; padding: 2px 7px; font-size: 10px; font-weight: 500;
|
||||
}
|
||||
.screen-content { padding: 0; overflow-y: auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
<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>
|
||||
|
||||
<div class="screen-content">
|
||||
<div class="gallery-header">
|
||||
<div class="gallery-title-row">
|
||||
<div class="gallery-heading">Gallery</div>
|
||||
<a class="search-icon-btn" href="34-gallery-search.html">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5"/>
|
||||
<path d="M12.5 12.5L16 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Toggle -->
|
||||
<div class="toggle-row">
|
||||
<a class="toggle-btn active" href="31-gallery-all.html">Patterns</a>
|
||||
<a class="toggle-btn" href="32-gallery-keepsakes.html">Keepsakes</a>
|
||||
</div>
|
||||
|
||||
<!-- Sort chips -->
|
||||
<div class="sort-chips">
|
||||
<div class="sort-chip active" onclick="setSort(this)">Recent</div>
|
||||
<div class="sort-chip" onclick="setSort(this)">Most Reframed</div>
|
||||
<div class="sort-chip" onclick="setSort(this)">This Week</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pattern grid -->
|
||||
<div class="pattern-grid">
|
||||
|
||||
<!-- Card 1 — Turn pattern (amethyst 6-fold), blade from patterns-kaleidoscope.svg -->
|
||||
<a class="pattern-card" href="33-gallery-detail.html">
|
||||
<div class="pattern-visual-area">
|
||||
<div class="pattern-bg-aura" style="background: radial-gradient(circle at 50% 50%, rgba(139,92,246,0.2), transparent 70%);"></div>
|
||||
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: 8px;">
|
||||
</div>
|
||||
<div class="pattern-info">
|
||||
<div class="pattern-thought">I completely bombed my presentation today and everyone saw</div>
|
||||
<div class="pattern-meta">Feb 22 · 3 perspectives</div>
|
||||
<div class="pattern-chips">
|
||||
<span class="distortion-mini-chip">Catastrophizing</span>
|
||||
<span class="distortion-mini-chip">Overgeneralization</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Card 2 — Black-and-White + Labeling (rose/indigo) -->
|
||||
<a class="pattern-card" href="33-gallery-detail.html">
|
||||
<div class="pattern-visual-area">
|
||||
<div class="pattern-bg-aura" style="background: radial-gradient(circle at 50% 50%, rgba(99,102,241,0.2), transparent 70%);"></div>
|
||||
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: 8px;">
|
||||
</div>
|
||||
<div class="pattern-info">
|
||||
<div class="pattern-thought">I never stick to anything I start — I'm not disciplined</div>
|
||||
<div class="pattern-meta">Feb 17 · 3 perspectives</div>
|
||||
<div class="pattern-chips">
|
||||
<span class="distortion-mini-chip">Black-and-White</span>
|
||||
<span class="distortion-mini-chip">Labeling</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Card 3 — Complex pattern (sapphire 6-fold), blade from patterns-kaleidoscope.svg Complex: M 0,0 L 6,-2 L -4,38 L -6,1 Z -->
|
||||
<a class="pattern-card" href="33-gallery-detail.html">
|
||||
<div class="pattern-visual-area">
|
||||
<div class="pattern-bg-aura" style="background: radial-gradient(circle at 50% 50%, rgba(59,130,246,0.2), transparent 70%);"></div>
|
||||
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: 8px;">
|
||||
</div>
|
||||
<div class="pattern-info">
|
||||
<div class="pattern-thought">Nobody at work respects my opinion anymore</div>
|
||||
<div class="pattern-meta">Feb 20 · 3 perspectives</div>
|
||||
<div class="pattern-chips">
|
||||
<span class="distortion-mini-chip">Mind Reading</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Card 4 — Turn pattern (amber, 6-fold), blade from patterns-kaleidoscope.svg -->
|
||||
<a class="pattern-card" href="33-gallery-detail.html">
|
||||
<div class="pattern-visual-area">
|
||||
<div class="pattern-bg-aura" style="background: radial-gradient(circle at 50% 50%, rgba(245,158,11,0.2), transparent 70%);"></div>
|
||||
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: 8px;">
|
||||
</div>
|
||||
<div class="pattern-info">
|
||||
<div class="pattern-thought">Everything is going to fall apart if I don't fix this today</div>
|
||||
<div class="pattern-meta">Feb 19 · 3 perspectives</div>
|
||||
<div class="pattern-chips">
|
||||
<span class="distortion-mini-chip">Catastrophizing</span>
|
||||
<span class="distortion-mini-chip">Fortune Telling</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Card 5 — Complex pattern (rose/pink, 6-fold), Complex blade from patterns-kaleidoscope.svg -->
|
||||
<a class="pattern-card" href="33-gallery-detail.html">
|
||||
<div class="pattern-visual-area">
|
||||
<div class="pattern-bg-aura" style="background: radial-gradient(circle at 50% 50%, rgba(236,72,153,0.2), transparent 70%);"></div>
|
||||
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: 8px;">
|
||||
</div>
|
||||
<div class="pattern-info">
|
||||
<div class="pattern-thought">It's all my fault the team missed the deadline</div>
|
||||
<div class="pattern-meta">Feb 18 · 3 perspectives</div>
|
||||
<div class="pattern-chips">
|
||||
<span class="distortion-mini-chip">Personalization</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Card 6 — Turn pattern (indigo 6-fold), blade from patterns-kaleidoscope.svg -->
|
||||
<a class="pattern-card" href="33-gallery-detail.html">
|
||||
<div class="pattern-visual-area">
|
||||
<div class="pattern-bg-aura" style="background: radial-gradient(circle at 50% 50%, rgba(99,102,241,0.2), transparent 70%);"></div>
|
||||
<img src="../../assets/kalei-logo.svg" width="44" height="44" alt="Kalei" style="border-radius: 8px;">
|
||||
</div>
|
||||
<div class="pattern-info">
|
||||
<div class="pattern-thought">I should be further along in my career by now</div>
|
||||
<div class="pattern-meta">Feb 17 · 3 perspectives</div>
|
||||
<div class="pattern-chips">
|
||||
<span class="distortion-mini-chip">Should Statements</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</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 active" data-tab="gallery" href="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 inactive" data-tab="you" href="../you/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>
|
||||
|
||||
<script>
|
||||
function setSort(el) {
|
||||
document.querySelectorAll('.sort-chip').forEach(c => c.classList.remove('active'));
|
||||
el.classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
277
initial mockups/screens/gallery/32-gallery-keepsakes.html
Normal file
277
initial mockups/screens/gallery/32-gallery-keepsakes.html
Normal file
@@ -0,0 +1,277 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Keepsakes</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.gallery-header { padding: var(--space-4) var(--space-4) 0; }
|
||||
.gallery-title-row {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.gallery-heading {
|
||||
font-size: 26px; font-weight: 700; color: var(--pure-light);
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
.toggle-row {
|
||||
display: flex; gap: 0; background: var(--deep-glass);
|
||||
border: 1px solid var(--twilight); border-radius: var(--radius-lg);
|
||||
padding: 3px; margin-bottom: 16px;
|
||||
}
|
||||
.toggle-btn {
|
||||
flex: 1; height: 36px; border-radius: var(--radius-md);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 14px; font-weight: 600; cursor: pointer;
|
||||
text-decoration: none; transition: all 0.2s;
|
||||
color: var(--dim-light);
|
||||
}
|
||||
.toggle-btn.active {
|
||||
background: var(--sapphire); color: var(--pure-light);
|
||||
box-shadow: var(--glow-sapphire);
|
||||
}
|
||||
.keepsake-card {
|
||||
background: var(--kalei-navy); border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-xl); padding: var(--space-4);
|
||||
margin-bottom: var(--space-3); display: flex; gap: var(--space-3);
|
||||
cursor: pointer; text-decoration: none; transition: border-color 0.2s;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.keepsake-card:hover { border-color: var(--sapphire); }
|
||||
.keepsake-pattern svg { animation: breathing 6s ease-in-out infinite; }
|
||||
.keepsake-pattern {
|
||||
width: 64px; height: 64px; border-radius: var(--radius-md);
|
||||
background: var(--void); flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
overflow: hidden; position: relative;
|
||||
}
|
||||
.keepsake-content { flex: 1; min-width: 0; }
|
||||
.keepsake-reframe {
|
||||
font-size: 14px; color: var(--pure-light); line-height: 1.4;
|
||||
margin-bottom: 6px; font-weight: 500;
|
||||
}
|
||||
.keepsake-source {
|
||||
font-size: 12px; color: var(--dim-light); margin-bottom: 8px;
|
||||
display: -webkit-box; -webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical; overflow: hidden;
|
||||
font-style: italic;
|
||||
}
|
||||
.keepsake-meta {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
}
|
||||
.keepsake-date { font-size: 11px; color: var(--dim-light); }
|
||||
.keepsake-bookmark {
|
||||
margin-left: auto; color: var(--sapphire-light); flex-shrink: 0;
|
||||
}
|
||||
.section-label {
|
||||
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
||||
letter-spacing: 0.06em; color: var(--dim-light);
|
||||
padding: 4px 0 8px;
|
||||
}
|
||||
.screen-content { padding: 0 var(--space-4) var(--space-6); overflow-y: auto; }
|
||||
.empty-keepsake {
|
||||
text-align: center; padding: 40px var(--space-4);
|
||||
}
|
||||
.keepsake-count-chip {
|
||||
background: rgba(var(--sapphire-rgb, 59,130,246), 0.1); border: 1px solid rgba(var(--sapphire-rgb, 59,130,246), 0.25);
|
||||
border-radius: var(--radius-full); padding: 3px 12px; font-size: 12px;
|
||||
color: var(--sapphire-light); font-weight: 500;
|
||||
}
|
||||
.search-icon-btn {
|
||||
width: 40px; height: 40px; border-radius: var(--radius-md);
|
||||
background: var(--deep-glass); border: 1px solid var(--twilight);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: var(--dim-light); text-decoration: none; cursor: pointer;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.search-icon-btn:hover { border-color: var(--sapphire); color: var(--sapphire-light); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
<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>
|
||||
|
||||
<div class="gallery-header">
|
||||
<div class="gallery-title-row">
|
||||
<div class="gallery-heading">Gallery</div>
|
||||
<a class="search-icon-btn" href="34-gallery-search.html">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5"/>
|
||||
<path d="M12.5 12.5L16 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="toggle-row">
|
||||
<a class="toggle-btn" href="31-gallery-all.html">Patterns</a>
|
||||
<a class="toggle-btn active" href="32-gallery-keepsakes.html">Keepsakes</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="screen-content">
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;">
|
||||
<div class="section-label">Saved Reframes</div>
|
||||
<span class="keepsake-count-chip">4 keepsakes</span>
|
||||
</div>
|
||||
|
||||
<!-- Keepsake 1 -->
|
||||
<a class="keepsake-card" href="33-gallery-detail.html">
|
||||
<div class="keepsake-pattern">
|
||||
<div style="position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(139,92,246,0.25), transparent 70%);"></div>
|
||||
<svg width="50" height="50" viewBox="0 0 50 50" style="mix-blend-mode: screen; position: relative; z-index: 1;">
|
||||
<defs><linearGradient id="gk1" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#C4B5FD" stop-opacity="0.9"/><stop offset="100%" stop-color="#7C3AED" stop-opacity="0.3"/></linearGradient></defs>
|
||||
<g transform="translate(25,25)">
|
||||
<g><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#gk1)"/></g>
|
||||
<g transform="rotate(60)"><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#gk1)"/></g>
|
||||
<g transform="rotate(120)"><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#gk1)"/></g>
|
||||
<g transform="rotate(180)"><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#gk1)"/></g>
|
||||
<g transform="rotate(240)"><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#gk1)"/></g>
|
||||
<g transform="rotate(300)"><path d="M0,0 L4,-20 L0,-24 L-4,-20Z" fill="url(#gk1)"/></g>
|
||||
<circle r="5" fill="white" opacity="0.1"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="keepsake-content">
|
||||
<div class="keepsake-reframe">"What if the people in that room saw something you didn't — someone who showed up, spoke up, and kept going when the pressure was highest?"</div>
|
||||
<div class="keepsake-source">From: "I completely bombed my presentation today and everyone saw"</div>
|
||||
<div class="keepsake-meta">
|
||||
<span class="keepsake-date">Feb 22</span>
|
||||
<span class="label text-dim">· Perspective Shift</span>
|
||||
<span class="keepsake-bookmark">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path d="M4 2h8a1 1 0 011 1v11l-5-3-5 3V3a1 1 0 011-1z"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Keepsake 2 -->
|
||||
<a class="keepsake-card" href="33-gallery-detail.html">
|
||||
<div class="keepsake-pattern">
|
||||
<div style="position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(16,185,129,0.25), transparent 70%);"></div>
|
||||
<svg width="50" height="50" viewBox="0 0 50 50" style="mix-blend-mode: screen; position: relative; z-index: 1;">
|
||||
<defs><linearGradient id="gk2" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#6EE7B7" stop-opacity="0.9"/><stop offset="100%" stop-color="#059669" stop-opacity="0.3"/></linearGradient></defs>
|
||||
<g transform="translate(25,25)">
|
||||
<g><path d="M0,0 L4,-18 L0,-23 L-4,-18Z" fill="url(#gk2)"/></g>
|
||||
<g transform="rotate(72)"><path d="M0,0 L4,-18 L0,-23 L-4,-18Z" fill="url(#gk2)"/></g>
|
||||
<g transform="rotate(144)"><path d="M0,0 L4,-18 L0,-23 L-4,-18Z" fill="url(#gk2)"/></g>
|
||||
<g transform="rotate(216)"><path d="M0,0 L4,-18 L0,-23 L-4,-18Z" fill="url(#gk2)"/></g>
|
||||
<g transform="rotate(288)"><path d="M0,0 L4,-18 L0,-23 L-4,-18Z" fill="url(#gk2)"/></g>
|
||||
<circle r="4" fill="white" opacity="0.1"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="keepsake-content">
|
||||
<div class="keepsake-reframe">"You came back to this — today, again. That's not someone who never sticks to things. That's exactly what sticking to something looks like from the inside."</div>
|
||||
<div class="keepsake-source">From: "I never stick to anything I start — I'm not disciplined"</div>
|
||||
<div class="keepsake-meta">
|
||||
<span class="keepsake-date">Feb 17</span>
|
||||
<span class="label text-dim">· Evidence Check</span>
|
||||
<span class="keepsake-bookmark">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="color: var(--sapphire-light);">
|
||||
<path d="M4 2h8a1 1 0 011 1v11l-5-3-5 3V3a1 1 0 011-1z"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Keepsake 3 -->
|
||||
<a class="keepsake-card" href="33-gallery-detail.html">
|
||||
<div class="keepsake-pattern">
|
||||
<div style="position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(59,130,246,0.25), transparent 70%);"></div>
|
||||
<svg width="50" height="50" viewBox="0 0 50 50" style="mix-blend-mode: screen; position: relative; z-index: 1;">
|
||||
<defs><linearGradient id="gk3" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#93C5FD" stop-opacity="0.9"/><stop offset="100%" stop-color="#2563EB" stop-opacity="0.3"/></linearGradient></defs>
|
||||
<g transform="translate(25,25)">
|
||||
<g><path d="M0,0 L5,-20 L0,-26 L-5,-20Z" fill="url(#gk3)"/></g>
|
||||
<g transform="rotate(120)"><path d="M0,0 L5,-20 L0,-26 L-5,-20Z" fill="url(#gk3)"/></g>
|
||||
<g transform="rotate(240)"><path d="M0,0 L5,-20 L0,-26 L-5,-20Z" fill="url(#gk3)"/></g>
|
||||
<circle r="4" fill="white" opacity="0.1"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="keepsake-content">
|
||||
<div class="keepsake-reframe">"Minds are harder to read than we think. What if the silence wasn't indifference — but the kind of stillness that comes right before something lands?"</div>
|
||||
<div class="keepsake-source">From: "Nobody at work respects my opinion anymore"</div>
|
||||
<div class="keepsake-meta">
|
||||
<span class="keepsake-date">Feb 20</span>
|
||||
<span class="label text-dim">· Perspective Shift</span>
|
||||
<span class="keepsake-bookmark">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="color: var(--sapphire-light);">
|
||||
<path d="M4 2h8a1 1 0 011 1v11l-5-3-5 3V3a1 1 0 011-1z"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Keepsake 4 -->
|
||||
<a class="keepsake-card" href="33-gallery-detail.html">
|
||||
<div class="keepsake-pattern">
|
||||
<div style="position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(245,158,11,0.25), transparent 70%);"></div>
|
||||
<svg width="50" height="50" viewBox="0 0 50 50" style="mix-blend-mode: screen; position: relative; z-index: 1;">
|
||||
<defs><linearGradient id="gk4" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#FDE68A" stop-opacity="0.9"/><stop offset="100%" stop-color="#D97706" stop-opacity="0.3"/></linearGradient></defs>
|
||||
<g transform="translate(25,25)">
|
||||
<g><path d="M0,0 L5,-22 L0,-27 L-5,-22Z" fill="url(#gk4)"/></g>
|
||||
<g transform="rotate(45)"><path d="M0,0 L5,-22 L0,-27 L-5,-22Z" fill="url(#gk4)"/></g>
|
||||
<g transform="rotate(90)"><path d="M0,0 L5,-22 L0,-27 L-5,-22Z" fill="url(#gk4)"/></g>
|
||||
<g transform="rotate(135)"><path d="M0,0 L5,-22 L0,-27 L-5,-22Z" fill="url(#gk4)"/></g>
|
||||
<g transform="rotate(180)"><path d="M0,0 L5,-22 L0,-27 L-5,-22Z" fill="url(#gk4)"/></g>
|
||||
<g transform="rotate(225)"><path d="M0,0 L5,-22 L0,-27 L-5,-22Z" fill="url(#gk4)"/></g>
|
||||
<g transform="rotate(270)"><path d="M0,0 L5,-22 L0,-27 L-5,-22Z" fill="url(#gk4)"/></g>
|
||||
<g transform="rotate(315)"><path d="M0,0 L5,-22 L0,-27 L-5,-22Z" fill="url(#gk4)"/></g>
|
||||
<circle r="5" fill="white" opacity="0.08"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="keepsake-content">
|
||||
<div class="keepsake-reframe">"The story that everything falls apart unless you carry it — that's the exhausting part. What's the smallest thing that would make today count? Start there."</div>
|
||||
<div class="keepsake-source">From: "Everything is going to fall apart if I don't fix this today"</div>
|
||||
<div class="keepsake-meta">
|
||||
<span class="keepsake-date">Feb 19</span>
|
||||
<span class="label text-dim">· Action Step</span>
|
||||
<span class="keepsake-bookmark">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="color: var(--sapphire-light);">
|
||||
<path d="M4 2h8a1 1 0 011 1v11l-5-3-5 3V3a1 1 0 011-1z"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</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 active" data-tab="gallery" href="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 inactive" data-tab="you" href="../you/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>
|
||||
267
initial mockups/screens/gallery/33-gallery-detail.html
Normal file
267
initial mockups/screens/gallery/33-gallery-detail.html
Normal file
@@ -0,0 +1,267 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Pattern Detail</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.nav-back { color: var(--sapphire-light) !important; transition: opacity 0.2s; }
|
||||
.nav-action { color: var(--sapphire-light) !important; transition: opacity 0.2s; }
|
||||
.nav-back:hover, .nav-action:hover { opacity: 0.75; }
|
||||
.pattern-hero {
|
||||
background: var(--void); position: relative;
|
||||
height: 200px; display: flex; align-items: center; justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.pattern-hero-aura {
|
||||
position: absolute; inset: 0;
|
||||
background: radial-gradient(ellipse at 50% 50%, rgba(139,92,246,0.2), transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.pattern-hero-aura-outer {
|
||||
position: absolute; inset: 0;
|
||||
background: radial-gradient(ellipse at 50% 50%, rgba(59,130,246,0.08), transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero-kaleidoscope { animation: breathing 6s ease-in-out infinite; }
|
||||
.hero-shard-1 { position: absolute; top: 20px; left: 20px; opacity: 0.15; animation: breathing 6s ease-in-out infinite; }
|
||||
.hero-shard-2 { position: absolute; bottom: 20px; right: 20px; opacity: 0.12; animation: breathing 6s ease-in-out infinite 1s; }
|
||||
.original-thought-card {
|
||||
margin: var(--space-4) var(--space-4) var(--space-3);
|
||||
background: var(--deep-glass); border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4);
|
||||
}
|
||||
.original-label {
|
||||
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
||||
letter-spacing: 0.06em; color: var(--dim-light); margin-bottom: 6px;
|
||||
}
|
||||
.original-text {
|
||||
font-size: 15px; color: var(--soft-light); line-height: 1.5; font-style: italic;
|
||||
}
|
||||
.reframes-section { padding: 0 var(--space-4); margin-bottom: var(--space-4); }
|
||||
.section-label {
|
||||
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
||||
letter-spacing: 0.06em; color: var(--dim-light); margin-bottom: 10px;
|
||||
}
|
||||
.distortions-section { padding: 0 var(--space-4); margin-bottom: var(--space-4); }
|
||||
.distortion-card {
|
||||
background: var(--kalei-navy); border: 1px solid rgba(245,158,11,0.2);
|
||||
border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4);
|
||||
margin-bottom: var(--space-2); display: flex; gap: var(--space-3); align-items: flex-start;
|
||||
}
|
||||
.distortion-icon-wrap {
|
||||
width: 36px; height: 36px; border-radius: var(--radius-md);
|
||||
background: rgba(245,158,11,0.1); display: flex; align-items: center;
|
||||
justify-content: center; flex-shrink: 0;
|
||||
}
|
||||
.distortion-info { flex: 1; }
|
||||
.distortion-name {
|
||||
font-size: 14px; font-weight: 600; color: var(--amber-light); margin-bottom: 3px;
|
||||
}
|
||||
.distortion-explanation {
|
||||
font-size: 13px; color: var(--dim-light); line-height: 1.4;
|
||||
}
|
||||
.actions-section { padding: 0 var(--space-4); margin-bottom: var(--space-4); }
|
||||
.meta-row {
|
||||
padding: var(--space-3) var(--space-4);
|
||||
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
||||
}
|
||||
.meta-chip {
|
||||
background: var(--deep-glass); border: 1px solid var(--twilight);
|
||||
border-radius: var(--radius-full); padding: 4px 12px;
|
||||
font-size: 12px; color: var(--dim-light);
|
||||
}
|
||||
.btn-turn-again {
|
||||
display: flex; align-items: center; justify-content: center; gap: 8px;
|
||||
height: 52px; width: 100%;
|
||||
background: var(--amethyst); color: var(--pure-light);
|
||||
font-size: 15px; font-weight: 600; border-radius: var(--radius-lg);
|
||||
box-shadow: var(--glow-amethyst); text-decoration: none;
|
||||
transition: background 0.2s; margin-bottom: var(--space-2);
|
||||
}
|
||||
.btn-turn-again:hover { background: var(--amethyst-light); }
|
||||
.btn-bookmark {
|
||||
display: flex; align-items: center; justify-content: center; gap: 8px;
|
||||
height: 44px; width: 100%;
|
||||
background: var(--deep-glass); color: var(--sapphire-light);
|
||||
font-size: 14px; font-weight: 600; border-radius: var(--radius-lg);
|
||||
border: 1px solid rgba(59,130,246,0.3); text-decoration: none;
|
||||
transition: all 0.2s; cursor: pointer;
|
||||
}
|
||||
.btn-bookmark:hover { background: rgba(59,130,246,0.1); }
|
||||
.screen-content { padding-bottom: 24px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
<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>
|
||||
|
||||
<div class="nav-header">
|
||||
<a class="nav-back" href="31-gallery-all.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">Pattern</span>
|
||||
<a class="nav-action" href="../modals/61-pattern-share.html" style="text-decoration: none;">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<circle cx="15" cy="4" r="2" stroke="currentColor" stroke-width="1.4"/>
|
||||
<circle cx="4" cy="10" r="2" stroke="currentColor" stroke-width="1.4"/>
|
||||
<circle cx="15" cy="16" r="2" stroke="currentColor" stroke-width="1.4"/>
|
||||
<path d="M6 9l7-4M6 11l7 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="screen-content">
|
||||
<!-- Large kaleidoscope pattern hero -->
|
||||
<div class="pattern-hero">
|
||||
<div class="pattern-hero-aura"></div>
|
||||
<div class="pattern-hero-aura-outer"></div>
|
||||
<svg class="hero-shard-1" width="28" height="28" viewBox="0 0 28 28"><path d="M14 2L20 14L14 26L8 14Z" fill="var(--amethyst)"/></svg>
|
||||
<svg class="hero-shard-2" width="20" height="20" viewBox="0 0 20 20"><path d="M10 2L14 10L10 18L6 10Z" fill="var(--sapphire)"/></svg>
|
||||
<!-- Hero kaleidoscope — canonical logo -->
|
||||
<img src="../../assets/kalei-logo.svg" width="100" height="100" alt="Kalei" class="hero-kaleidoscope" style="filter: drop-shadow(0 0 12px rgba(139,92,246,0.3));">
|
||||
</div>
|
||||
|
||||
<!-- Original thought -->
|
||||
<div class="original-thought-card">
|
||||
<div class="original-label">Original Thought — Feb 22, 2026</div>
|
||||
<div class="original-text">"I completely bombed my presentation today and everyone saw how unprepared I was."</div>
|
||||
</div>
|
||||
|
||||
<!-- 3 Reframe perspectives -->
|
||||
<div class="reframes-section">
|
||||
<div class="section-label">3 Perspectives</div>
|
||||
<div class="reframe-block amethyst">
|
||||
<div class="reframe-label">Perspective Shift</div>
|
||||
<div class="reframe-text">What if stumbling through this actually revealed something real about you — not incompetence, but the courage to show up when the stakes felt high? Everyone in that room has had a moment like this.</div>
|
||||
</div>
|
||||
<div class="reframe-block sapphire">
|
||||
<div class="reframe-label">Evidence Check</div>
|
||||
<div class="reframe-text">Think of a presentation or high-pressure moment where you felt underprepared — and survived. What did you do that got you through? That same resilience is what brought you here today, too.</div>
|
||||
</div>
|
||||
<div class="reframe-block emerald">
|
||||
<div class="reframe-label">Action Step</div>
|
||||
<div class="reframe-text">Write down one thing that went better than expected today, however small. Then name one specific thing you'd adjust next time. That's not failure — that's preparation.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Detected distortions -->
|
||||
<div class="distortions-section">
|
||||
<div class="section-label">Detected Patterns</div>
|
||||
|
||||
<div class="distortion-card">
|
||||
<div class="distortion-icon-wrap">
|
||||
<!-- Extracted from icons-distortions.svg → Catastrophizing (translate 28,60) -->
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="d33-amberGr1" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<filter id="d33-gAmber1" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g transform="translate(12,12)" filter="url(#d33-gAmber1)">
|
||||
<!-- Main falling shard -->
|
||||
<path d="M 0,-10 L 5,0 L 0,10 L -5,0 Z" fill="url(#d33-amberGr1)" opacity="0.9"/>
|
||||
<path d="M 0,-10 L 5,0 L -5,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<!-- Broken fragments -->
|
||||
<path d="M -8,6 L -5,10 L -9,12 L -11,8 Z" fill="#F59E0B" opacity="0.5"/>
|
||||
<path d="M 7,8 L 10,12 L 8,14 L 5,11 Z" fill="#F59E0B" opacity="0.4"/>
|
||||
<!-- Motion line -->
|
||||
<line x1="0" y1="11" x2="0" y2="16" stroke="#FCD34D" stroke-width="0.5" opacity="0.4"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="distortion-info">
|
||||
<div class="distortion-name">Catastrophizing</div>
|
||||
<div class="distortion-explanation">Magnifying the negatives of a situation while minimizing any positives. One setback becomes a total disaster in your mind.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="distortion-card">
|
||||
<div class="distortion-icon-wrap">
|
||||
<!-- Extracted from icons-distortions.svg → Overgeneralization (translate 448,180) -->
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="d33-amberGr2" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FDE68A"/>
|
||||
<stop offset="100%" stop-color="#D97706"/>
|
||||
</linearGradient>
|
||||
<filter id="d33-gAmber2" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="1.5" result="b"/>
|
||||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g transform="translate(12,12)" filter="url(#d33-gAmber2)">
|
||||
<!-- Source diamond -->
|
||||
<path d="M -10,0 L -7,-3 L -4,0 L -7,3 Z" fill="url(#d33-amberGr2)" opacity="0.9"/>
|
||||
<path d="M -10,0 L -7,-3 L -4,0 Z" fill="#fff" opacity="0.15"/>
|
||||
<!-- Spreading replicated diamonds -->
|
||||
<path d="M 2,-6 L 4,-8 L 6,-6 L 4,-4 Z" fill="#F59E0B" opacity="0.7"/>
|
||||
<path d="M 4,0 L 6,-2 L 8,0 L 6,2 Z" fill="#F59E0B" opacity="0.6"/>
|
||||
<path d="M 2,4 L 4,2 L 6,4 L 4,6 Z" fill="#F59E0B" opacity="0.5"/>
|
||||
<path d="M 8,-5 L 10,-7 L 12,-5 L 10,-3 Z" fill="#F59E0B" opacity="0.35"/>
|
||||
<path d="M 9,3 L 11,1 L 13,3 L 11,5 Z" fill="#F59E0B" opacity="0.3"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="distortion-info">
|
||||
<div class="distortion-name">Overgeneralization</div>
|
||||
<div class="distortion-explanation">Drawing a broad, absolute conclusion from a single event. "Everyone saw" and "completely bombed" turn one difficult moment into a sweeping verdict about your ability.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Meta info -->
|
||||
<div class="meta-row">
|
||||
<span class="meta-chip">Feb 22, 2026</span>
|
||||
<span class="meta-chip">Compassionate style</span>
|
||||
<span class="meta-chip">4 min</span>
|
||||
<span class="meta-chip">Turn #47</span>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="actions-section">
|
||||
<a class="btn-turn-again" href="../turn/11-turn-input-active.html">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M2 9C2 5.1 5.1 2 9 2s7 3.1 7 7-3.1 7-7 7" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M2 9l2-2M2 9l2 2" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
Turn again
|
||||
</a>
|
||||
<button class="btn-bookmark" onclick="toggleBookmark(this)">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" id="bmIcon">
|
||||
<path d="M4 2h8a1 1 0 011 1v11l-5-3-5 3V3a1 1 0 011-1z" stroke="currentColor" stroke-width="1.2" fill="none"/>
|
||||
</svg>
|
||||
Save to Keepsakes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleBookmark(btn) {
|
||||
const icon = document.getElementById('bmIcon');
|
||||
const isSaved = btn.textContent.includes('Saved');
|
||||
if (isSaved) {
|
||||
icon.innerHTML = '<path d="M4 2h8a1 1 0 011 1v11l-5-3-5 3V3a1 1 0 011-1z" stroke="currentColor" stroke-width="1.2" fill="none"/>';
|
||||
btn.innerHTML = btn.innerHTML.replace('Saved', 'Save to Keepsakes');
|
||||
} else {
|
||||
icon.innerHTML = '<path d="M4 2h8a1 1 0 011 1v11l-5-3-5 3V3a1 1 0 011-1z" fill="currentColor"/>';
|
||||
btn.innerHTML = btn.innerHTML.replace('Save to Keepsakes', 'Saved');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
265
initial mockups/screens/gallery/34-gallery-search.html
Normal file
265
initial mockups/screens/gallery/34-gallery-search.html
Normal file
@@ -0,0 +1,265 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390, initial-scale=1">
|
||||
<title>Kalei — Gallery Search</title>
|
||||
<link rel="stylesheet" href="../../assets/design-system.css">
|
||||
<style>
|
||||
.nav-back { color: var(--sapphire-light) !important; }
|
||||
.search-container {
|
||||
padding: 0 var(--space-4) var(--space-3);
|
||||
}
|
||||
.search-input-wrap {
|
||||
position: relative; margin-bottom: var(--space-3);
|
||||
}
|
||||
.search-input {
|
||||
width: 100%; height: 48px;
|
||||
background: var(--deep-glass); border: 1.5px solid var(--sapphire);
|
||||
border-radius: var(--radius-lg); padding: 0 44px 0 44px;
|
||||
font-size: 16px; color: var(--pure-light); outline: none;
|
||||
font-family: var(--font-primary);
|
||||
box-shadow: 0 0 12px rgba(59,130,246,0.15);
|
||||
}
|
||||
.search-input::placeholder { color: var(--faint-light); }
|
||||
.search-icon {
|
||||
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
|
||||
color: var(--sapphire-light);
|
||||
}
|
||||
.clear-btn {
|
||||
position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
|
||||
color: var(--dim-light); cursor: pointer; background: none; border: none;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.filter-section { margin-bottom: var(--space-3); }
|
||||
.filter-label {
|
||||
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
||||
letter-spacing: 0.06em; color: var(--dim-light); margin-bottom: 8px;
|
||||
}
|
||||
.filter-chips { display: flex; flex-wrap: wrap; gap: 7px; }
|
||||
.filter-chip {
|
||||
height: 30px; padding: 0 12px; border-radius: var(--radius-full);
|
||||
font-size: 12px; font-weight: 500; cursor: pointer;
|
||||
display: flex; align-items: center; gap: 5px;
|
||||
border: 1px solid var(--twilight); color: var(--dim-light);
|
||||
background: transparent; transition: all 0.15s;
|
||||
}
|
||||
.filter-chip.active {
|
||||
background: rgba(var(--sapphire-rgb, 59,130,246), 0.15); border-color: var(--sapphire);
|
||||
color: var(--sapphire-light);
|
||||
}
|
||||
.filter-chip.amber.active {
|
||||
background: rgba(245,158,11,0.12); border-color: var(--amber);
|
||||
color: var(--amber-light);
|
||||
}
|
||||
.search-input:focus { box-shadow: var(--glow-sapphire); }
|
||||
.divider { height: 1px; background: var(--twilight); margin: 4px 0 12px; }
|
||||
.results-count {
|
||||
font-size: 13px; color: var(--dim-light); padding: 0 var(--space-4);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.result-row {
|
||||
display: flex; align-items: center; gap: var(--space-3);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-bottom: 1px solid rgba(28,34,64,0.5);
|
||||
cursor: pointer; text-decoration: none; transition: background 0.15s;
|
||||
}
|
||||
.result-row:hover { background: var(--deep-glass); }
|
||||
.result-thumb {
|
||||
width: 52px; height: 52px; border-radius: var(--radius-md);
|
||||
background: var(--void); flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
overflow: hidden; position: relative;
|
||||
}
|
||||
.result-info { flex: 1; min-width: 0; }
|
||||
.result-text {
|
||||
font-size: 14px; color: var(--soft-light); line-height: 1.4;
|
||||
margin-bottom: 4px;
|
||||
display: -webkit-box; -webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical; overflow: hidden;
|
||||
}
|
||||
.result-meta-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
|
||||
.result-date { font-size: 12px; color: var(--dim-light); }
|
||||
.result-distortion {
|
||||
background: rgba(245,158,11,0.1); color: var(--amber-light);
|
||||
border-radius: 4px; padding: 2px 7px; font-size: 10px; font-weight: 500;
|
||||
}
|
||||
.empty-state {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
padding: 48px var(--space-4); text-align: center;
|
||||
}
|
||||
.screen-content { padding: 0; overflow-y: auto; }
|
||||
.screen-content::-webkit-scrollbar { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="device-frame">
|
||||
<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>
|
||||
|
||||
<div class="nav-header">
|
||||
<a class="nav-back" href="31-gallery-all.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">Search</span>
|
||||
<span class="nav-action"></span>
|
||||
</div>
|
||||
|
||||
<div class="screen-content">
|
||||
<div class="search-container">
|
||||
<!-- Search input -->
|
||||
<div class="search-input-wrap">
|
||||
<div class="search-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5"/>
|
||||
<path d="M12.5 12.5L16 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<input type="text" class="search-input" placeholder="Search your thoughts..." id="searchInput" value="presentation" autofocus>
|
||||
<button class="clear-btn" onclick="clearSearch()">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Distortion type filters -->
|
||||
<div class="filter-section">
|
||||
<div class="filter-label">Distortion Type</div>
|
||||
<div class="filter-chips" id="distortionFilters">
|
||||
<div class="filter-chip amber" onclick="toggleFilter(this)">All</div>
|
||||
<div class="filter-chip amber active" onclick="toggleFilter(this)">Catastrophizing</div>
|
||||
<div class="filter-chip amber" onclick="toggleFilter(this)">Black-and-White</div>
|
||||
<div class="filter-chip amber" onclick="toggleFilter(this)">Mind Reading</div>
|
||||
<div class="filter-chip amber" onclick="toggleFilter(this)">Personalization</div>
|
||||
<div class="filter-chip amber" onclick="toggleFilter(this)">Should Statements</div>
|
||||
<div class="filter-chip amber" onclick="toggleFilter(this)">Overgeneralization</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Date filters -->
|
||||
<div class="filter-section">
|
||||
<div class="filter-label">Date Range</div>
|
||||
<div class="filter-chips">
|
||||
<div class="filter-chip active" onclick="toggleDateFilter(this)">This Week</div>
|
||||
<div class="filter-chip" onclick="toggleDateFilter(this)">This Month</div>
|
||||
<div class="filter-chip" onclick="toggleDateFilter(this)">Last 3 Months</div>
|
||||
<div class="filter-chip" onclick="toggleDateFilter(this)">All Time</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
|
||||
<!-- Results -->
|
||||
<div class="results-count" id="resultsCount">3 results for "presentation"</div>
|
||||
|
||||
<a class="result-row" href="33-gallery-detail.html">
|
||||
<div class="result-thumb">
|
||||
<div style="position: absolute; inset: 0; background: radial-gradient(circle, rgba(139,92,246,0.3), transparent 70%);"></div>
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" style="mix-blend-mode: screen; position: relative; z-index: 1;">
|
||||
<defs><linearGradient id="gs1" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#C4B5FD" stop-opacity="0.9"/><stop offset="100%" stop-color="#7C3AED" stop-opacity="0.4"/></linearGradient></defs>
|
||||
<g transform="translate(18,18)"><g><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs1)"/></g><g transform="rotate(60)"><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs1)"/></g><g transform="rotate(120)"><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs1)"/></g><g transform="rotate(180)"><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs1)"/></g><g transform="rotate(240)"><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs1)"/></g><g transform="rotate(300)"><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs1)"/></g></g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="result-info">
|
||||
<div class="result-text">I completely bombed my <mark style="background: rgba(59,130,246,0.2); color: var(--sapphire-light); border-radius: 2px; padding: 0 2px;">presentation</mark> today and everyone saw</div>
|
||||
<div class="result-meta-row">
|
||||
<span class="result-date">Feb 22</span>
|
||||
<span class="result-distortion">Catastrophizing</span>
|
||||
<span class="result-distortion">Overgeneralization</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" style="color: var(--faint-light); flex-shrink: 0;">
|
||||
<path d="M5 3l4 4-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="result-row" href="33-gallery-detail.html">
|
||||
<div class="result-thumb">
|
||||
<div style="position: absolute; inset: 0; background: radial-gradient(circle, rgba(245,158,11,0.3), transparent 70%);"></div>
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" style="mix-blend-mode: screen; position: relative; z-index: 1;">
|
||||
<defs><linearGradient id="gs2" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#FDE68A" stop-opacity="0.9"/><stop offset="100%" stop-color="#D97706" stop-opacity="0.4"/></linearGradient></defs>
|
||||
<g transform="translate(18,18)"><g><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs2)"/></g><g transform="rotate(45)"><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs2)"/></g><g transform="rotate(90)"><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs2)"/></g><g transform="rotate(135)"><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs2)"/></g><g transform="rotate(180)"><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs2)"/></g><g transform="rotate(225)"><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs2)"/></g><g transform="rotate(270)"><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs2)"/></g><g transform="rotate(315)"><path d="M0,0 L4,-14 L0,-18 L-4,-14Z" fill="url(#gs2)"/></g></g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="result-info">
|
||||
<div class="result-text">Everything is going to fall apart if I don't fix this today — no time for another <mark style="background: rgba(59,130,246,0.2); color: var(--sapphire-light); border-radius: 2px; padding: 0 2px;">presentation</mark></div>
|
||||
<div class="result-meta-row">
|
||||
<span class="result-date">Feb 19</span>
|
||||
<span class="result-distortion">Catastrophizing</span>
|
||||
<span class="result-distortion">Fortune Telling</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" style="color: var(--faint-light); flex-shrink: 0;">
|
||||
<path d="M5 3l4 4-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="result-row" href="33-gallery-detail.html">
|
||||
<div class="result-thumb">
|
||||
<div style="position: absolute; inset: 0; background: radial-gradient(circle, rgba(99,102,241,0.3), transparent 70%);"></div>
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" style="mix-blend-mode: screen; position: relative; z-index: 1;">
|
||||
<defs><linearGradient id="gs3" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#A5B4FC" stop-opacity="0.9"/><stop offset="100%" stop-color="#4338CA" stop-opacity="0.4"/></linearGradient></defs>
|
||||
<g transform="translate(18,18)"><g><path d="M0,0 L5,-15 L0,-19 L-5,-15Z" fill="url(#gs3)"/></g><g transform="rotate(60)"><path d="M0,0 L5,-15 L0,-19 L-5,-15Z" fill="url(#gs3)"/></g><g transform="rotate(120)"><path d="M0,0 L5,-15 L0,-19 L-5,-15Z" fill="url(#gs3)"/></g><g transform="rotate(180)"><path d="M0,0 L5,-15 L0,-19 L-5,-15Z" fill="url(#gs3)"/></g><g transform="rotate(240)"><path d="M0,0 L5,-15 L0,-19 L-5,-15Z" fill="url(#gs3)"/></g><g transform="rotate(300)"><path d="M0,0 L5,-15 L0,-19 L-5,-15Z" fill="url(#gs3)"/></g></g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="result-info">
|
||||
<div class="result-text">I should be further along by now — one bad <mark style="background: rgba(59,130,246,0.2); color: var(--sapphire-light); border-radius: 2px; padding: 0 2px;">presentation</mark> proves it</div>
|
||||
<div class="result-meta-row">
|
||||
<span class="result-date">Feb 17</span>
|
||||
<span class="result-distortion">Should Statements</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" style="color: var(--faint-light); flex-shrink: 0;">
|
||||
<path d="M5 3l4 4-4 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- Suggestion: No results state when query is empty -->
|
||||
<div style="padding: 20px var(--space-4); text-align: center; display: none;" id="emptyState">
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" style="margin: 0 auto 12px; display: block; opacity: 0.3;">
|
||||
<circle cx="22" cy="22" r="14" stroke="var(--dim-light)" stroke-width="2"/>
|
||||
<path d="M33 33l9 9" stroke="var(--dim-light)" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<div class="subheading text-dim">No results found</div>
|
||||
<div class="body-sm text-faint" style="margin-top: var(--space-1);">Try different keywords or remove filters</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function clearSearch() {
|
||||
const input = document.getElementById('searchInput');
|
||||
input.value = '';
|
||||
document.getElementById('resultsCount').textContent = 'Type to search your gallery';
|
||||
input.focus();
|
||||
}
|
||||
|
||||
function toggleFilter(el) {
|
||||
el.classList.toggle('active');
|
||||
}
|
||||
|
||||
function toggleDateFilter(el) {
|
||||
document.querySelectorAll('.filter-chip:not(.amber)').forEach(c => c.classList.remove('active'));
|
||||
el.classList.add('active');
|
||||
}
|
||||
|
||||
document.getElementById('searchInput').addEventListener('input', function() {
|
||||
const q = this.value.trim();
|
||||
const count = document.getElementById('resultsCount');
|
||||
if (q) {
|
||||
count.textContent = `3 results for "${q}"`;
|
||||
} else {
|
||||
count.textContent = 'Type to search your gallery';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user