mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 22:26:38 +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
4.8 KiB
HTML
114 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Anti-Patterns That Should Be Flagged</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 2rem; }
|
|
h1 { font-size: 2rem; margin-bottom: 0.5rem; }
|
|
h2 { font-size: 0.875rem; margin: 2.5rem 0 0.75rem; color: #4b5563; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.08em; }
|
|
p.intro { color: #6b7280; margin-bottom: 2rem; max-width: 36rem; }
|
|
.cards { display: grid; gap: 1rem; max-width: 28rem; }
|
|
.card { background: white; padding: 1rem; border-radius: 0.375rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
|
|
.card h3 { font-weight: 600; color: #111827; font-size: 0.875rem; }
|
|
.card p { font-size: 0.8125rem; color: #6b7280; margin-top: 0.25rem; }
|
|
|
|
/* CSS side-tab variants */
|
|
.card-shorthand-left { border-left: 4px solid #3b82f6; }
|
|
.card-shorthand-right { border-right: 5px solid #8b5cf6; }
|
|
.card-longhand-left { border-left-width: 3px; border-left-style: solid; border-left-color: #10b981; }
|
|
.card-longhand-right { border-right-width: 6px; border-right-style: solid; border-right-color: #ef4444; }
|
|
|
|
/* CSS top/bottom + border-radius */
|
|
.card-css-top { border-radius: 12px; border-top: 4px solid #3b82f6; }
|
|
.card-css-bottom { border-radius: 12px; border-bottom: 3px solid #8b5cf6; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Anti-Patterns: Should Flag</h1>
|
|
<p class="intro">Every example on this page should be detected by the anti-pattern scanner.</p>
|
|
|
|
<!-- TAILWIND SIDE-TAB -->
|
|
<h2>Tailwind Side-Tab</h2>
|
|
<div class="cards">
|
|
<div class="border-l-4 border-blue-500 bg-white p-4 rounded-r shadow-sm">
|
|
<h3>border-l-4 + rounded-r</h3>
|
|
<p>The classic AI tell.</p>
|
|
</div>
|
|
<div class="border-r-4 border-purple-500 bg-white p-4 rounded-l shadow-sm">
|
|
<h3>border-r-4 + rounded-l</h3>
|
|
<p>Right side variant.</p>
|
|
</div>
|
|
<div class="border-e-8 border-red-500 bg-white p-4 rounded-l shadow-sm">
|
|
<h3>border-e-8 + rounded-l</h3>
|
|
<p>Logical inline-end, extra thick.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CSS SIDE-TAB -->
|
|
<h2>CSS Side-Tab</h2>
|
|
<div class="cards">
|
|
<div class="card card-shorthand-left">
|
|
<h3>border-left: 4px solid</h3>
|
|
<p>CSS shorthand.</p>
|
|
</div>
|
|
<div class="card card-shorthand-right">
|
|
<h3>border-right: 5px solid</h3>
|
|
<p>CSS shorthand right.</p>
|
|
</div>
|
|
<div class="card card-longhand-left">
|
|
<h3>border-left-width: 3px</h3>
|
|
<p>CSS longhand.</p>
|
|
</div>
|
|
<div class="card card-longhand-right">
|
|
<h3>border-right-width: 6px</h3>
|
|
<p>CSS longhand right.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TOP/BOTTOM + ROUNDED -->
|
|
<h2>Top/Bottom + Rounded</h2>
|
|
<div class="cards">
|
|
<div class="border-t-4 border-blue-500 rounded-lg bg-white p-4 shadow-sm">
|
|
<h3 class="font-semibold text-sm">border-t-4 + rounded-lg</h3>
|
|
<p class="text-sm text-gray-600">Top accent on rounded card.</p>
|
|
</div>
|
|
<div class="border-b-4 border-purple-500 rounded-xl bg-white p-4 shadow-sm">
|
|
<h3 class="font-semibold text-sm">border-b-4 + rounded-xl</h3>
|
|
<p class="text-sm text-gray-600">Bottom accent on rounded card.</p>
|
|
</div>
|
|
<div class="border-t-2 border-emerald-500 rounded-md bg-white p-4 shadow-sm">
|
|
<h3 class="font-semibold text-sm">border-t-2 + rounded-md</h3>
|
|
<p class="text-sm text-gray-600">Even thin top border on rounded.</p>
|
|
</div>
|
|
<div class="card card-css-top">
|
|
<h3>CSS border-top + border-radius</h3>
|
|
<p>Top border from style block.</p>
|
|
</div>
|
|
<div class="card card-css-bottom">
|
|
<h3>CSS border-bottom + border-radius</h3>
|
|
<p>Bottom border from style block.</p>
|
|
</div>
|
|
</div>
|
|
<!-- DARK MODE VARIANTS -->
|
|
<h2>Dark Mode</h2>
|
|
<div class="cards">
|
|
<div class="border-l-4 border-cyan-400 rounded-lg bg-gray-800 p-4 shadow-sm">
|
|
<h3 class="font-semibold text-sm text-white">Dark card + border-l-4 + rounded</h3>
|
|
<p class="text-sm text-gray-400">Dark background doesn't make the side-tab OK.</p>
|
|
</div>
|
|
<div class="border-t-2 border-violet-500 rounded-xl bg-slate-900 p-4 shadow-sm">
|
|
<h3 class="font-semibold text-sm text-white">Dark card + border-t-2 + rounded</h3>
|
|
<p class="text-sm text-gray-400">Top accent on dark rounded card.</p>
|
|
</div>
|
|
<div style="background: #1f2937; padding: 1rem; border-radius: 12px; border-left: 4px solid #f472b6; max-width: 28rem;">
|
|
<h3 style="font-weight: 600; font-size: 0.875rem; color: white;">Dark CSS card + side border + radius</h3>
|
|
<p style="font-size: 0.8125rem; color: #9ca3af;">Inline dark card with side-tab.</p>
|
|
</div>
|
|
</div>
|
|
<script src="/js/detect-antipatterns-browser.js"></script>
|
|
</body>
|
|
</html>
|