v2.2.0: ops-console UI redesign

- Popup + findings dashboard rebuilt as a dark ops console: radar-sweep
  brand mark, ARMED/PASSIVE status LEDs, scanline texture, mono chrome,
  amber (action) / teal (secret) semantic colors
- Popup: count-up stats, numbered watchlist, command-prompt input,
  typed terminal status line with live counts
- Dashboard: clickable severity stat filters, LATEST ticker, severity
  row edges, LED badges, click-to-copy match chips, relative times,
  skeleton rows, staggered first paint, radar empty state, / and Esc
  shortcuts, prefers-reduced-motion support
- Fix severity sort (critical sorted last) and ticker hidden override
- Add preview/ harness (stubbed chrome API) for headless UI screenshots
This commit is contained in:
momenbasel
2026-07-18 12:41:58 +03:00
parent 5d606109dc
commit 882e298d85
15 changed files with 1585 additions and 434 deletions
+19 -13
View File
@@ -9,31 +9,36 @@
<body>
<header class="header">
<div class="header-brand">
<img src="icons/icon48.png" alt="KeyFinder" class="header-icon">
<h1>KeyFinder</h1>
<span class="version" id="versionLabel"></span>
<span class="radar" aria-hidden="true">
<img src="icons/icon48.png" alt="" class="header-icon">
</span>
<div class="brand-text">
<h1>KEYFINDER<span class="version" id="versionLabel"></span></h1>
<p class="header-tagline">passive secret discovery</p>
</div>
<span class="live-badge" title="Passive scanning is active"><span class="live-dot"></span>ARMED</span>
</div>
<p class="header-tagline">Passive API key & secret discovery</p>
</header>
<section class="stats" id="stats">
<div class="stat-card">
<span class="stat-number" id="findingCount">-</span>
<span class="stat-label">Findings</span>
<div class="stat-card stat-findings">
<span class="stat-top"><span class="stat-led" aria-hidden="true"></span><span class="stat-label">Findings</span></span>
<span class="stat-number" id="findingCount">&ndash;</span>
</div>
<div class="stat-card">
<span class="stat-number" id="keywordCount">-</span>
<span class="stat-label">Keywords</span>
<div class="stat-card stat-keywords">
<span class="stat-top"><span class="stat-led" aria-hidden="true"></span><span class="stat-label">Keywords</span></span>
<span class="stat-number" id="keywordCount">&ndash;</span>
</div>
</section>
<section class="section">
<h2 class="section-title">Keywords</h2>
<h2 class="section-title">Watchlist<span class="section-sub">// custom keywords</span></h2>
<form id="keywordForm" class="keyword-form">
<span class="prompt" aria-hidden="true">&#8250;</span>
<input
type="text"
id="keywordInput"
placeholder="Add a keyword (e.g. api_key)"
placeholder="add keyword, e.g. api_key"
autocomplete="off"
spellcheck="false"
>
@@ -44,8 +49,9 @@
</section>
<footer class="footer">
<div class="term-line" aria-live="polite"><span class="term-text" id="termText"></span><span class="term-cursor" aria-hidden="true"></span></div>
<a href="results.html" target="_blank" id="resultsLink" class="results-btn">
View Findings
View Findings <span class="btn-arrow" aria-hidden="true">&rarr;</span>
</a>
</footer>