connor/flask_apps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add search filter with auto-launch to tools index

Browse source
This commit is contained in:
Connor Rhodes 2026-05-24 07:40:57 -05:00
parent 3cd6d20d13
commit 7ebccc793a
1 changed files with 62 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

62
server.py
View file

@ -114,6 +114,41 @@ def index():
color: var(--text-muted);
}}
.search-wrap {{
position: relative;
margin-bottom: 24px;
}}
.search-wrap input {{
width: 100%;
padding: 12px 16px 12px 42px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text);
font-family: inherit;
font-size: 0.92rem;
outline: none;
transition: border-color 0.2s;
}}
.search-wrap input:focus {{
border-color: rgba(108,92,231,0.5);
}}
.search-wrap input::placeholder {{
color: var(--text-muted);
}}
.search-wrap svg {{
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
pointer-events: none;
}}
.category {{
margin-bottom: 28px;
}}
@ -196,8 +231,35 @@ def index():
<h1>Tools</h1>
<p class="subtitle">Flask applications</p>
</header>
<div class="search-wrap">
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input type="text" id="search" placeholder="Filter tools..." autocomplete="off" autofocus>
</div>
{sections}
</div>
<script>
const input = document.getElementById('search');
const items = document.querySelectorAll('.app-item');
const categories = document.querySelectorAll('.category');
input.addEventListener('input', () => {{
const q = input.value.toLowerCase().trim();
let visible = [];
categories.forEach(cat => {{
let catHasVisible = false;
cat.querySelectorAll('.app-item').forEach(item => {{
const name = item.querySelector('.app-name').textContent.toLowerCase();
const show = !q || name.includes(q);
item.style.display = show ? '' : 'none';
if (show) catHasVisible = true, visible.push(item);
}});
cat.style.display = catHasVisible ? '' : 'none';
}});
if (visible.length === 1) {{
window.location.href = visible[0].getAttribute('href');
}}
}});
</script>
</body>
</html>
""")