1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Clean Patterns — Should NOT Flag</title>
7 <style>
8 body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 2rem; }
9 h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }
10 h2 { font-size: 1.125rem; margin: 2.5rem 0 0.75rem; color: #6b7280; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; }
11 p.intro { color: #6b7280; margin-bottom: 2rem; max-width: 36rem; }
12 .section { max-width: 28rem; }
13 .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; }
14 .card-rounded h3 { font-weight: 600; color: #111827; }
15 .card-rounded p { font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem; }
16 .card-flat { background: white; padding: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); max-width: 28rem; margin-bottom: 1rem; }
17 .badge { display: inline-block; font-size: 0.75rem; padding: 0.125rem 0.5rem; border-radius: 9999px; background: #dbeafe; color: #1d4ed8; }
18
19 /* Below-threshold side borders without radius */
20 .thin-left { border-left: 1px solid #3b82f6; }
21 .thin-right { border-right: 2px solid #8b5cf6; }
22 </style>
23</head>
24<body>
25 <h1>Clean Patterns: Should Pass</h1>
26 <p class="intro">None of these should be flagged. They're all intentional, well-established web patterns.</p>
27
28 <!-- CLEAN CARDS -->
29 <h2>Clean Cards</h2>
30 <div class="section">
31 <div class="card-rounded" style="border: 1px solid #e5e7eb;">
32 <h3>Full border card</h3>
33 <p>Subtle 1px border all around. Clean and intentional.</p>
34 </div>
35
36 <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);">
37 <h3 style="font-weight: 600; color: #111827;">Top border, no radius</h3>
38 <p style="font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem;">Top accent without rounded corners is a clean section divider.</p>
39 </div>
40
41 <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);">
42 <h3 style="font-weight: 600; color: #111827;">Bottom border, no radius</h3>
43 <p style="font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem;">Bottom accent without rounded corners is also clean.</p>
44 </div>
45
46 <div class="card-rounded">
47 <span class="badge">New</span>
48 <h3>No border at all</h3>
49 <p>Just a shadow. Simple and effective.</p>
50 </div>
51 </div>
52
53 <!-- BELOW THRESHOLD -->
54 <h2>Below Threshold (Thin, No Radius)</h2>
55 <div class="section">
56 <div class="card-flat thin-left">
57 <p>border-left: 1px solid, no radius — not flagged</p>
58 </div>
59 <div class="card-flat thin-right">
60 <p>border-right: 2px solid, no radius — not flagged</p>
61 </div>
62 <div class="card-flat" style="border-left: 1px solid #10b981;">
63 <p>1px inline border-left, no radius — not flagged</p>
64 </div>
65 </div>
66 <!-- DARK MODE CLEAN -->
67 <h2>Dark Mode (Clean)</h2>
68 <div class="section">
69 <div style="background: #1f2937; padding: 1.5rem; border-radius: 0.5rem; border: 1px solid #374151; max-width: 28rem; margin-bottom: 1rem;">
70 <h3 style="font-weight: 600; color: white;">Dark card, full border</h3>
71 <p style="font-size: 0.875rem; color: #9ca3af; margin-top: 0.25rem;">Uniform 1px border all around. Clean.</p>
72 </div>
73 <div style="background: #111827; padding: 1.5rem; max-width: 28rem; margin-bottom: 1rem; border-bottom: 2px solid #6366f1;">
74 <h3 style="font-weight: 600; color: white;">Dark section, bottom border, no radius</h3>
75 <p style="font-size: 0.875rem; color: #9ca3af; margin-top: 0.25rem;">Bottom accent without radius is fine.</p>
76 </div>
77 <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);">
78 <h3 style="font-weight: 600; color: white;">Dark card, no border</h3>
79 <p style="font-size: 0.875rem; color: #94a3b8; margin-top: 0.25rem;">Shadow only. Clean.</p>
80 </div>
81 </div>
82<script src="/js/detect-antipatterns-browser.js"></script>
83</body>
84</html>