1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="utf-8">
5 <link rel="stylesheet" href="panel.css">
6</head>
7<body>
8 <header class="toolbar">
9 <div class="toolbar-left">
10 <span class="logo">/</span>
11 <h1>Impeccable</h1>
12 <span class="badge" id="badge">0</span>
13 </div>
14 <div class="toolbar-right">
15 <button class="tool-btn" id="btn-copy-all" title="Copy all findings">
16 <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M11 1H3a2 2 0 0 0-2 2v10h2V3h8V1zm3 3H7a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 11H7V6h7v9z" fill="currentColor"/></svg>
17 </button>
18 <button class="tool-btn" id="btn-rescan" title="Re-scan page">
19 <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M13.65 2.35A8 8 0 1 0 16 8h-2a6 6 0 1 1-1.76-4.24L10 6h6V0l-2.35 2.35z" fill="currentColor"/></svg>
20 </button>
21 <button class="tool-btn" id="btn-toggle" title="Toggle overlays">
22 <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 3C4.36 3 1.26 5.28 0 8.5c1.26 3.22 4.36 5.5 8 5.5s6.74-2.28 8-5.5C14.74 5.28 11.64 3 8 3zm0 9.17c-2.58 0-4.67-2.09-4.67-4.67S5.42 2.83 8 2.83s4.67 2.09 4.67 4.67S10.58 12.17 8 12.17zM8 5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7z" fill="currentColor"/></svg>
23 </button>
24 <button class="tool-btn" id="btn-settings" title="Settings">
25 <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M13.6 8.8c.04-.26.06-.53.06-.8s-.02-.54-.06-.8l1.74-1.36a.42.42 0 0 0 .1-.52l-1.64-2.84a.41.41 0 0 0-.5-.18l-2.06.82a5.96 5.96 0 0 0-1.38-.8L9.5.2A.4.4 0 0 0 9.1 0H5.82a.4.4 0 0 0-.4.34l-.3 2.12c-.5.2-.96.48-1.38.8l-2.06-.82a.4.4 0 0 0-.5.18L-.46 5.46a.41.41 0 0 0 .1.52L1.38 7.34c-.04.26-.06.53-.06.8s.02.54.06.8L-.36 10.3a.42.42 0 0 0-.1.52l1.64 2.84c.1.18.32.24.5.18l2.06-.82c.42.32.88.6 1.38.8l.3 2.12a.4.4 0 0 0 .4.34h3.28a.4.4 0 0 0 .4-.34l.3-2.12c.5-.2.96-.48 1.38-.8l2.06.82c.18.08.4 0 .5-.18l1.64-2.84a.41.41 0 0 0-.1-.52L13.6 8.8zM7.46 10.8c-1.56 0-2.82-1.26-2.82-2.8s1.26-2.8 2.82-2.8 2.82 1.26 2.82 2.8-1.26 2.8-2.82 2.8z" fill="currentColor"/></svg>
26 </button>
27 </div>
28 </header>
29
30 <div id="settings-container" style="display: none">
31 <div class="settings-header">Preferences</div>
32 <div class="setting-row">
33 <span class="setting-label">Auto-scan</span>
34 <div class="setting-segmented" id="auto-scan-mode">
35 <button data-value="panel">When panel opens</button>
36 <button data-value="devtools">When DevTools opens</button>
37 </div>
38 </div>
39 <div class="setting-row">
40 <span class="setting-label">Line length</span>
41 <div class="setting-segmented" id="line-length-mode">
42 <button data-value="strict">Strict (80)</button>
43 <button data-value="lax">Lax (120)</button>
44 </div>
45 </div>
46 <div class="setting-row">
47 <span class="setting-label">Highlight blur</span>
48 <label class="setting-switch">
49 <input type="checkbox" id="spotlight-blur-toggle">
50 <span class="setting-switch-track"></span>
51 </label>
52 </div>
53 <div id="settings-list"></div>
54 </div>
55
56 <main id="findings-container">
57 <div class="empty-state" id="empty-state">
58 <div class="empty-icon">/</div>
59 <p class="empty-title">No anti-patterns detected</p>
60 <p class="empty-hint">Overlays will appear on the page when issues are found</p>
61 </div>
62 </main>
63
64 <script src="panel.js"></script>
65</body>
66</html>