diff --git a/app/static/style.css b/app/static/style.css index e5bc124..e856b0a 100644 --- a/app/static/style.css +++ b/app/static/style.css @@ -837,29 +837,46 @@ button { color: #174768; } -/* Service tiles — clean white cards with depth */ +/* Service tiles — glassmorphism */ .dashboard-page .tile { - backdrop-filter: none !important; - background: #ffffff !important; - border: 1px solid rgba(185, 215, 238, 0.7) !important; + backdrop-filter: blur(22px) saturate(160%) !important; + -webkit-backdrop-filter: blur(22px) saturate(160%) !important; + background: rgba(255, 255, 255, 0.22) !important; + border: 1px solid rgba(255, 255, 255, 0.42) !important; box-shadow: - 0 1px 3px rgba(15, 64, 103, 0.06), - 0 6px 20px rgba(15, 64, 103, 0.09) !important; - transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important; + 0 4px 18px rgba(15, 64, 103, 0.14), + 0 1px 4px rgba(15, 64, 103, 0.07), + inset 0 1px 0 rgba(255, 255, 255, 0.55) !important; + transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease !important; + color: #0c1e2f !important; } .dashboard-page .tile-wrap:hover .tile { - transform: translateY(-3px) !important; - border-color: rgba(42, 130, 210, 0.45) !important; + transform: translateY(-5px) !important; + background: rgba(255, 255, 255, 0.34) !important; + border-color: rgba(255, 255, 255, 0.68) !important; box-shadow: - 0 2px 6px rgba(15, 64, 103, 0.08), - 0 12px 32px rgba(15, 64, 103, 0.16) !important; + 0 12px 36px rgba(15, 64, 103, 0.2), + 0 3px 8px rgba(15, 64, 103, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.65) !important; } -/* Icon box */ +/* Icon box — compact accent square */ .dashboard-page .tile-icon-box { - background: #f2f8fd !important; - border-color: rgba(185, 215, 238, 0.65) !important; + width: 68px !important; + height: 68px !important; + max-height: 68px !important; + aspect-ratio: 1 / 1 !important; + border-radius: 18px !important; + background: linear-gradient(135deg, rgba(42,140,214,0.28) 0%, rgba(14,91,153,0.18) 100%) !important; + border: 1.5px solid rgba(42,140,214,0.35) !important; + box-shadow: 0 2px 10px rgba(42,140,214,0.18) !important; + margin: 0 auto 0.85rem !important; +} + +.dashboard-page .tile-icon { + width: 62% !important; + height: 62% !important; } /* Credentials block */ @@ -888,6 +905,53 @@ button { color: rgba(15, 91, 148, 0.65) !important; } +/* Service name in glass card */ +.dashboard-page .tile h3 { + font-size: 1rem !important; + font-weight: 700 !important; + color: #0a1d2e !important; + text-shadow: 0 1px 2px rgba(255,255,255,0.5) !important; + letter-spacing: 0.01em !important; +} + +/* Search bar */ +.svc-search-wrap { + padding: 0.6rem 0 0; + position: relative; +} +.svc-search-wrap::before { + content: ; + position: absolute; + left: 0.9rem; + top: 50%; + transform: translateY(-25%); + width: 16px; + height: 16px; + background: url(data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 24 24 fill=none stroke=%235a8aaa stroke-width=2.2 stroke-linecap=round stroke-linejoin=round%3E%3Ccircle cx=11 cy=11 r=8/%3E%3Cpath d=M21 21l-4.35-4.35/%3E%3C/svg%3E) center/contain no-repeat; + pointer-events: none; +} +.svc-search { + width: 100%; + box-sizing: border-box; + background: rgba(255, 255, 255, 0.3); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.5); + border-radius: 12px; + padding: 0.6rem 1rem 0.6rem 2.5rem; + font-size: 0.95rem; + color: #0c1e2f; + outline: none; + transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; + box-shadow: 0 2px 8px rgba(15,64,103,0.08), inset 0 1px 0 rgba(255,255,255,0.6); +} +.svc-search::placeholder { color: rgba(12,30,47,0.45); } +.svc-search:focus { + background: rgba(255, 255, 255, 0.45); + border-color: rgba(42,140,214,0.55); + box-shadow: 0 4px 16px rgba(15,64,103,0.14), 0 0 0 3px rgba(42,140,214,0.12), inset 0 1px 0 rgba(255,255,255,0.7); +} + /* Suppress transitions on non-tile elements */ .category-chip, .category-chip.active, diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html index f567180..6a96ab4 100644 --- a/app/templates/dashboard.html +++ b/app/templates/dashboard.html @@ -88,11 +88,14 @@ {% endfor %} {% endif %} +
+ +
{% for service in services %} {% set svc_cats = service_categories.get(service.id, []) %} -
+
@@ -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'; + }); + }); + })();