mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-13 06:36:26 +03:00
Paul BakausandGitHub
e1d3ea0b6f
* Add detector benchmark lab and visual contrast fallback * Expand visual contrast fixture coverage * Add browser visual contrast fallback * Show visual contrast overlays in detector lab * Fix detector lab short viewport layout * Fix detector lab visual overlays * Add visual contrast to browser scan overlays * Avoid browser scroll jumps during visual contrast scans * Resolve visual contrast lazily on scroll * Refresh detector lab visual counts lazily * Update pnpm lockfile for static parser deps * Address Bugbot detector API comments * Report extension visual contrast errors * Refactor detector into engine modules * Address Bugbot detector comments * Fix latest Bugbot detector notes * Fix visual contrast fixture labels * Refine detector lab fixtures * Fix stale detector overlay references * Fix detector lab fixture URLs * Fix typography lab fixture highlights * Fix typography lab page-level signal * Fix visual overlay lifecycle cleanup * Remove dead spotlight timer cleanup * Make browser async APIs reject consistently
114 lines
6.4 KiB
HTML
114 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Legitimate Border Patterns — Should NOT Flag</title>
|
|
<style>
|
|
body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 2rem; color: #111827; }
|
|
h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }
|
|
h2 { font-size: 1.125rem; margin: 2rem 0 0.75rem; color: #6b7280; }
|
|
.demo { max-width: 36rem; margin-bottom: 1.5rem; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Legitimate Border Patterns</h1>
|
|
<p style="color: #6b7280; margin-bottom: 2rem;">Every border here is a well-established web pattern. None should be flagged.</p>
|
|
|
|
<!-- 1. BLOCKQUOTE — the classic border-left usage -->
|
|
<h2>Blockquotes</h2>
|
|
<div class="demo">
|
|
<blockquote style="border-left: 4px solid #d1d5db; padding-left: 1rem; margin: 0; color: #4b5563; font-style: italic;">
|
|
"Design is not just what it looks like and feels like. Design is how it works."
|
|
</blockquote>
|
|
</div>
|
|
|
|
<!-- 2. SIDEBAR NAV — active state indicator -->
|
|
<h2>Sidebar Navigation (Active State)</h2>
|
|
<div class="demo">
|
|
<nav style="width: 200px; background: white; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;">
|
|
<a href="#" style="display: block; padding: 0.75rem 1rem; color: #6b7280; text-decoration: none; border-left: 3px solid transparent;">Dashboard</a>
|
|
<a href="#" style="display: block; padding: 0.75rem 1rem; color: #1d4ed8; text-decoration: none; border-left: 3px solid #3b82f6; background: #eff6ff; font-weight: 500;">Projects</a>
|
|
<a href="#" style="display: block; padding: 0.75rem 1rem; color: #6b7280; text-decoration: none; border-left: 3px solid transparent;">Settings</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- 3. FORM VALIDATION — error indicator on input -->
|
|
<h2>Form Validation</h2>
|
|
<div class="demo">
|
|
<div style="margin-bottom: 1rem;">
|
|
<label style="display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.25rem;">Email</label>
|
|
<input type="email" value="not-an-email" style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #fca5a5; border-left: 3px solid #b91c1c; border-radius: 6px; outline: none; font-size: 0.875rem;">
|
|
<p style="color: #b91c1c; font-size: 0.75rem; margin-top: 0.25rem;">Please enter a valid email address.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4. TIMELINE / STEPPER -->
|
|
<h2>Timeline</h2>
|
|
<div class="demo">
|
|
<div style="border-left: 3px solid #e5e7eb; padding-left: 1.5rem; margin-left: 0.75rem;">
|
|
<div style="position: relative; padding-bottom: 1.5rem;">
|
|
<div style="position: absolute; left: -2.05rem; top: 0.125rem; width: 10px; height: 10px; border-radius: 50%; background: #3b82f6; border: 2px solid white;"></div>
|
|
<p style="font-weight: 500; margin: 0;">Order placed</p>
|
|
<p style="font-size: 0.75rem; color: #6b7280; margin: 0.125rem 0 0;">March 15, 2026</p>
|
|
</div>
|
|
<div style="position: relative; padding-bottom: 1.5rem;">
|
|
<div style="position: absolute; left: -2.05rem; top: 0.125rem; width: 10px; height: 10px; border-radius: 50%; background: #3b82f6; border: 2px solid white;"></div>
|
|
<p style="font-weight: 500; margin: 0;">Shipped</p>
|
|
<p style="font-size: 0.75rem; color: #6b7280; margin: 0.125rem 0 0;">March 16, 2026</p>
|
|
</div>
|
|
<div style="position: relative;">
|
|
<div style="position: absolute; left: -2.05rem; top: 0.125rem; width: 10px; height: 10px; border-radius: 50%; background: #d1d5db; border: 2px solid white;"></div>
|
|
<p style="font-weight: 500; margin: 0; color: #4b5563;">Delivered</p>
|
|
<p style="font-size: 0.75rem; color: #6b7280; margin: 0.125rem 0 0;">Expected March 18</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 5. CODE BLOCK — diff highlighting -->
|
|
<h2>Code Diff Highlighting</h2>
|
|
<div class="demo">
|
|
<pre style="background: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: 8px; font-size: 0.8125rem; overflow-x: auto; margin: 0;">
|
|
<code><span style="display: block; border-left: 3px solid #ef4444; padding-left: 0.75rem; background: rgba(239,68,68,0.1);">- const old = getValue();</span>
|
|
<span style="display: block; border-left: 3px solid #22c55e; padding-left: 0.75rem; background: rgba(34,197,94,0.1);">+ const value = getNewValue();</span>
|
|
<span style="display: block; padding-left: calc(3px + 0.75rem);"> return value;</span></code></pre>
|
|
</div>
|
|
|
|
<!-- 6. TAB ACTIVE STATE — bottom border -->
|
|
<h2>Tab Navigation</h2>
|
|
<div class="demo">
|
|
<div style="display: flex; border-bottom: 1px solid #e5e7eb;">
|
|
<button style="padding: 0.75rem 1.25rem; border: none; background: none; font-size: 0.875rem; color: #1d4ed8; border-bottom: 2px solid #3b82f6; font-weight: 500; cursor: pointer;">Overview</button>
|
|
<button style="padding: 0.75rem 1.25rem; border: none; background: none; font-size: 0.875rem; color: #6b7280; border-bottom: 2px solid transparent; cursor: pointer;">Analytics</button>
|
|
<button style="padding: 0.75rem 1.25rem; border: none; background: none; font-size: 0.875rem; color: #6b7280; border-bottom: 2px solid transparent; cursor: pointer;">Settings</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 7. TABLE CELL BORDERS -->
|
|
<h2>Data Table</h2>
|
|
<div class="demo">
|
|
<table style="width: 100%; border-collapse: collapse; font-size: 0.875rem;">
|
|
<thead>
|
|
<tr>
|
|
<th style="text-align: left; padding: 0.5rem; border-bottom: 2px solid #111827;">Name</th>
|
|
<th style="text-align: right; padding: 0.5rem; border-bottom: 2px solid #111827;">Revenue</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td style="padding: 0.5rem; border-bottom: 1px solid #e5e7eb;">Acme Corp</td><td style="text-align: right; padding: 0.5rem; border-bottom: 1px solid #e5e7eb;">$1.2M</td></tr>
|
|
<tr><td style="padding: 0.5rem; border-bottom: 1px solid #e5e7eb;">Globex</td><td style="text-align: right; padding: 0.5rem; border-bottom: 1px solid #e5e7eb;">$850K</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 8. ALERT BANNER — full-width, not a card -->
|
|
<h2>Alert Banner</h2>
|
|
<div class="demo">
|
|
<div style="border: 1px solid #f59e0b; background: #fffbeb; padding: 0.75rem 1rem; font-size: 0.875rem; color: #92400e;">
|
|
<strong>Warning:</strong> Your trial expires in 3 days. <a href="#" style="color: #d97706;">Upgrade now</a>
|
|
</div>
|
|
</div>
|
|
<script src="/js/detect-antipatterns-browser.js"></script>
|
|
</body>
|
|
</html>
|