code_public/ja4-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashboard): hover infobulles, full-width layout, UX polish

Browse Source 
- Fix doc tooltips: split CSS into <style type='text/tailwindcss'> for
  @apply directives + raw CSS for reliable doc panel rendering
- Convert doc panels from click-toggle to hover-based infobulles with
  arrow pointer, fade-in animation, and auto-dismiss on mobile
- Replace '?' icons with 'ⓘ' across all 11 templates (51 tooltips)
- Full-width layout: reduce padding on mobile (px-3), scale up on
  desktop (lg:px-5, xl:px-6) for maximum screen utilization
- Auto-collapse sidebar on narrow screens (<1024px)
- Keyboard shortcuts: Alt+1–9 for page navigation, Alt+B toggle sidebar
- Add LEGITIMATE_BROWSER filter button to detections page
- Sticky header with stronger blur (backdrop-blur-md)
- All 46 routes pass tests

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
toto
2026-04-09 13:30:16 +02:00
parent 63ba6d203c
commit 6babc55e3e
11 changed files with 115 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
services/dashboard/backend/templates/traffic.html
View File

@ -2,7 +2,7 @@
{% block title %}JA4 SOC — Trafic HTTP{% endblock %}
{% block page_title %}
Trafic HTTP
<span class="relative inline-block ml-1"><button onclick="docToggle(this)" class="doc-btn">?</button><div class="doc-panel">
<span class="relative inline-block ml-1"><button onclick="docToggle(this)" class="doc-btn">ⓘ</button><div class="doc-panel">
<h4>Logs HTTP bruts</h4>
<p>Toutes les requêtes HTTP capturées (24h). Filtrez par méthode, host ou status pour identifier les patterns suspects.</p>
<p><strong>Workflow :</strong> Filtrez POST → cherchez du brute-force → cliquez sur l'IP → investiguez.</p>
@ -16,7 +16,7 @@
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="section-card">
<div class="section-header"><span class="section-title">Méthodes HTTP
<span class="relative inline-block"><button onclick="docToggle(this)" class="doc-btn">?</button><div class="doc-panel">
<span class="relative inline-block"><button onclick="docToggle(this)" class="doc-btn">ⓘ</button><div class="doc-panel">
<h4>Distribution des méthodes</h4>
<p>Ratio des méthodes HTTP. Un ratio POST anormalement élevé peut indiquer du brute-force ou du credential stuffing.</p>
<p class="doc-source">Source : http_logs (24h)</p>
@ -26,7 +26,7 @@
</div>
<div class="section-card">
<div class="section-header"><span class="section-title">Top User-Agents
<span class="relative inline-block"><button onclick="docToggle(this)" class="doc-btn">?</button><div class="doc-panel">
<span class="relative inline-block"><button onclick="docToggle(this)" class="doc-btn">ⓘ</button><div class="doc-panel">
<h4>User-Agents les plus fréquents</h4>
<p>Les bots utilisent souvent des UAs génériques (python-requests, curl) ou vides. Un UA massivement représenté = potentiel botnet.</p>
<p class="doc-source">Source : http_logs (24h)</p>
@ -36,7 +36,7 @@
</div>
<div class="section-card">
<div class="section-header"><span class="section-title">Top Paths
<span class="relative inline-block"><button onclick="docToggle(this)" class="doc-btn">?</button><div class="doc-panel">
<span class="relative inline-block"><button onclick="docToggle(this)" class="doc-btn">ⓘ</button><div class="doc-panel">
<h4>Chemins les plus accédés</h4>
<p>Les paths comme /wp-admin, /xmlrpc.php, /.env indiquent du scanning. Un path API martelé = possible DDoS L7.</p>
<p class="doc-source">Source : http_logs (24h)</p>