mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-15 15:46:30 +03:00
Paul BakausandClaude Opus 4.6
3c9cc86061
Merges the impeccable-detect CLI repo (pbakaus/impeccable-cli@831a6cc) into this repo. The BSL-1.1 license that motivated the split is gone; everything is now Apache 2.0. - Add bin/, src/, detection tests and fixtures from CLI repo - Merge package.json: name → "impeccable", add bin/exports/files fields - Internal refs now read from local src/ instead of node_modules/ - Update SPDX headers, NOTICE.md, CLAUDE.md, FAQ, npm README - Add prepack/postpack scripts for CLI-focused README on npm - Remove terminal license labels (no longer needed) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
85 lines
4.3 KiB
HTML
85 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Clean Patterns — Should NOT Flag</title>
|
|
<style>
|
|
body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 2rem; }
|
|
h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }
|
|
h2 { font-size: 1.125rem; margin: 2.5rem 0 0.75rem; color: #6b7280; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; }
|
|
p.intro { color: #6b7280; margin-bottom: 2rem; max-width: 36rem; }
|
|
.section { max-width: 28rem; }
|
|
.card-rounded { background: white; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); max-width: 28rem; margin-bottom: 1rem; }
|
|
.card-rounded h3 { font-weight: 600; color: #111827; }
|
|
.card-rounded p { font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem; }
|
|
.card-flat { background: white; padding: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); max-width: 28rem; margin-bottom: 1rem; }
|
|
.badge { display: inline-block; font-size: 0.75rem; padding: 0.125rem 0.5rem; border-radius: 9999px; background: #dbeafe; color: #1d4ed8; }
|
|
|
|
/* Below-threshold side borders without radius */
|
|
.thin-left { border-left: 1px solid #3b82f6; }
|
|
.thin-right { border-right: 2px solid #8b5cf6; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Clean Patterns: Should Pass</h1>
|
|
<p class="intro">None of these should be flagged. They're all intentional, well-established web patterns.</p>
|
|
|
|
<!-- CLEAN CARDS -->
|
|
<h2>Clean Cards</h2>
|
|
<div class="section">
|
|
<div class="card-rounded" style="border: 1px solid #e5e7eb;">
|
|
<h3>Full border card</h3>
|
|
<p>Subtle 1px border all around. Clean and intentional.</p>
|
|
</div>
|
|
|
|
<div style="max-width: 28rem; margin-bottom: 1rem; padding: 1.5rem; background: white; border-top: 3px solid #3b82f6; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
|
|
<h3 style="font-weight: 600; color: #111827;">Top border, no radius</h3>
|
|
<p style="font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem;">Top accent without rounded corners is a clean section divider.</p>
|
|
</div>
|
|
|
|
<div style="max-width: 28rem; margin-bottom: 1rem; padding: 1.5rem; background: white; border-bottom: 2px solid #10b981; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
|
|
<h3 style="font-weight: 600; color: #111827;">Bottom border, no radius</h3>
|
|
<p style="font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem;">Bottom accent without rounded corners is also clean.</p>
|
|
</div>
|
|
|
|
<div class="card-rounded">
|
|
<span class="badge">New</span>
|
|
<h3>No border at all</h3>
|
|
<p>Just a shadow. Simple and effective.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BELOW THRESHOLD -->
|
|
<h2>Below Threshold (Thin, No Radius)</h2>
|
|
<div class="section">
|
|
<div class="card-flat thin-left">
|
|
<p>border-left: 1px solid, no radius — not flagged</p>
|
|
</div>
|
|
<div class="card-flat thin-right">
|
|
<p>border-right: 2px solid, no radius — not flagged</p>
|
|
</div>
|
|
<div class="card-flat" style="border-left: 1px solid #10b981;">
|
|
<p>1px inline border-left, no radius — not flagged</p>
|
|
</div>
|
|
</div>
|
|
<!-- DARK MODE CLEAN -->
|
|
<h2>Dark Mode (Clean)</h2>
|
|
<div class="section">
|
|
<div style="background: #1f2937; padding: 1.5rem; border-radius: 0.5rem; border: 1px solid #374151; max-width: 28rem; margin-bottom: 1rem;">
|
|
<h3 style="font-weight: 600; color: white;">Dark card, full border</h3>
|
|
<p style="font-size: 0.875rem; color: #9ca3af; margin-top: 0.25rem;">Uniform 1px border all around. Clean.</p>
|
|
</div>
|
|
<div style="background: #111827; padding: 1.5rem; max-width: 28rem; margin-bottom: 1rem; border-bottom: 2px solid #6366f1;">
|
|
<h3 style="font-weight: 600; color: white;">Dark section, bottom border, no radius</h3>
|
|
<p style="font-size: 0.875rem; color: #9ca3af; margin-top: 0.25rem;">Bottom accent without radius is fine.</p>
|
|
</div>
|
|
<div style="background: #1e293b; padding: 1.5rem; border-radius: 0.5rem; max-width: 28rem; margin-bottom: 1rem; box-shadow: 0 4px 6px rgba(0,0,0,0.3);">
|
|
<h3 style="font-weight: 600; color: white;">Dark card, no border</h3>
|
|
<p style="font-size: 0.875rem; color: #94a3b8; margin-top: 0.25rem;">Shadow only. Clean.</p>
|
|
</div>
|
|
</div>
|
|
<script src="/js/detect-antipatterns-browser.js"></script>
|
|
</body>
|
|
</html>
|