50 lines
1.6 KiB
HTML
50 lines
1.6 KiB
HTML
{% extends "base.html" %}
|
|
{% import "macros/ui.html" as m %}
|
|
{% block title %}Tools{% endblock %}
|
|
{% block nav_tools %}btn-active{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h1 class="text-2xl font-bold font-mono">Tools</h1>
|
|
<span class="badge badge-outline font-mono">{{ tools | length }} registered</span>
|
|
</div>
|
|
|
|
<input
|
|
id="search"
|
|
type="text"
|
|
placeholder="Filter tools..."
|
|
class="input input-bordered input-sm w-full max-w-sm mb-4 font-mono"
|
|
oninput="filterTools(this.value)"
|
|
/>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3" id="tools-grid">
|
|
{% for tool in tools %}
|
|
<a href="/ui/tools/{{ tool.name }}"
|
|
class="card bg-base-200 hover:bg-base-300 transition-colors cursor-pointer shadow-sm tool-card"
|
|
data-name="{{ tool.name }}"
|
|
data-cat="{{ tool.category | lower }}"
|
|
data-desc="{{ tool.description | lower }}">
|
|
<div class="card-body p-4">
|
|
<div class="flex items-start justify-between gap-2">
|
|
<span class="font-mono text-sm font-semibold text-primary truncate">{{ tool.name }}</span>
|
|
{{ m::category_badge(cat=tool.category) }}
|
|
</div>
|
|
<p class="text-xs text-base-content/60 mt-1 line-clamp-2">{{ tool.description }}</p>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<script>
|
|
function filterTools(q) {
|
|
const term = q.toLowerCase();
|
|
document.querySelectorAll('.tool-card').forEach(card => {
|
|
const match = !term
|
|
|| card.dataset.name.includes(term)
|
|
|| card.dataset.desc.includes(term)
|
|
|| card.dataset.cat.includes(term);
|
|
card.style.display = match ? '' : 'none';
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %}
|