dashboard: glassmorphism cards, compact accent icon box, live search bar
- Tile cards: backdrop-filter blur(22px), rgba white bg, inset highlight - Hover: translateY(-5px) + brighter glass effect - Icon box: 68px compact rounded square with blue gradient accent - Added live search input with glass style (filters by service name) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -88,11 +88,14 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="svc-search-wrap">
|
||||
<input type="search" id="svc-search" class="svc-search" placeholder="Поиск сервиса..." autocomplete="off" />
|
||||
</div>
|
||||
</section>
|
||||
<section class="grid service-grid">
|
||||
{% for service in services %}
|
||||
{% set svc_cats = service_categories.get(service.id, []) %}
|
||||
<div class="tile-wrap">
|
||||
<div class="tile-wrap" data-name="{{ service.name|lower }}">
|
||||
<a class="tile-link" href="/go/{{ service.slug }}" aria-label="{{ service.name }}"></a>
|
||||
<div class="tile">
|
||||
<div class="tile-icon-box">
|
||||
@@ -231,6 +234,17 @@
|
||||
if (loadingOverlay) loadingOverlay.style.display = 'none';
|
||||
});
|
||||
})();
|
||||
|
||||
(function () {
|
||||
const input = document.getElementById('svc-search');
|
||||
if (!input) return;
|
||||
input.addEventListener('input', function () {
|
||||
const q = this.value.trim().toLowerCase();
|
||||
document.querySelectorAll('.tile-wrap[data-name]').forEach(function (wrap) {
|
||||
wrap.style.display = (!q || wrap.dataset.name.includes(q)) ? '' : 'none';
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user