266 lines
15 KiB
HTML
266 lines
15 KiB
HTML
<!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>
|