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>Anti-Patterns That Should Be Flagged</title>
7 <script src="https://cdn.tailwindcss.com"></script>
8 <style>
9 body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 2rem; }
10 h1 { font-size: 2rem; margin-bottom: 0.5rem; }
11 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; }
12 p.intro { color: #6b7280; margin-bottom: 2rem; max-width: 36rem; }
13 .cards { display: grid; gap: 1rem; max-width: 28rem; }
14 .card { background: white; padding: 1rem; border-radius: 0.375rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
15 .card h3 { font-weight: 600; color: #111827; font-size: 0.875rem; }
16 .card p { font-size: 0.8125rem; color: #6b7280; margin-top: 0.25rem; }
17
18 /* CSS side-tab variants */
19 .card-shorthand-left { border-left: 4px solid #3b82f6; }
20 .card-shorthand-right { border-right: 5px solid #8b5cf6; }
21 .card-longhand-left { border-left-width: 3px; border-left-style: solid; border-left-color: #10b981; }
22 .card-longhand-right { border-right-width: 6px; border-right-style: solid; border-right-color: #ef4444; }
23
24 /* CSS top/bottom + border-radius */
25 .card-css-top { border-radius: 12px; border-top: 4px solid #3b82f6; }
26 .card-css-bottom { border-radius: 12px; border-bottom: 3px solid #8b5cf6; }
27 </style>
28</head>
29<body>
30 <h1>Anti-Patterns: Should Flag</h1>
31 <p class="intro">Every example on this page should be detected by the anti-pattern scanner.</p>
32
33 <!-- TAILWIND SIDE-TAB -->
34 <h2>Tailwind Side-Tab</h2>
35 <div class="cards">
36 <div class="border-l-4 border-blue-500 bg-white p-4 rounded-r shadow-sm">
37 <h3>border-l-4 + rounded-r</h3>
38 <p>The classic AI tell.</p>
39 </div>
40 <div class="border-r-4 border-purple-500 bg-white p-4 rounded-l shadow-sm">
41 <h3>border-r-4 + rounded-l</h3>
42 <p>Right side variant.</p>
43 </div>
44 <div class="border-e-8 border-red-500 bg-white p-4 rounded-l shadow-sm">
45 <h3>border-e-8 + rounded-l</h3>
46 <p>Logical inline-end, extra thick.</p>
47 </div>
48 </div>
49
50 <!-- CSS SIDE-TAB -->
51 <h2>CSS Side-Tab</h2>
52 <div class="cards">
53 <div class="card card-shorthand-left">
54 <h3>border-left: 4px solid</h3>
55 <p>CSS shorthand.</p>
56 </div>
57 <div class="card card-shorthand-right">
58 <h3>border-right: 5px solid</h3>
59 <p>CSS shorthand right.</p>
60 </div>
61 <div class="card card-longhand-left">
62 <h3>border-left-width: 3px</h3>
63 <p>CSS longhand.</p>
64 </div>
65 <div class="card card-longhand-right">
66 <h3>border-right-width: 6px</h3>
67 <p>CSS longhand right.</p>
68 </div>
69 </div>
70
71 <!-- TOP/BOTTOM + ROUNDED -->
72 <h2>Top/Bottom + Rounded</h2>
73 <div class="cards">
74 <div class="border-t-4 border-blue-500 rounded-lg bg-white p-4 shadow-sm">
75 <h3 class="font-semibold text-sm">border-t-4 + rounded-lg</h3>
76 <p class="text-sm text-gray-600">Top accent on rounded card.</p>
77 </div>
78 <div class="border-b-4 border-purple-500 rounded-xl bg-white p-4 shadow-sm">
79 <h3 class="font-semibold text-sm">border-b-4 + rounded-xl</h3>
80 <p class="text-sm text-gray-600">Bottom accent on rounded card.</p>
81 </div>
82 <div class="border-t-2 border-emerald-500 rounded-md bg-white p-4 shadow-sm">
83 <h3 class="font-semibold text-sm">border-t-2 + rounded-md</h3>
84 <p class="text-sm text-gray-600">Even thin top border on rounded.</p>
85 </div>
86 <div class="card card-css-top">
87 <h3>CSS border-top + border-radius</h3>
88 <p>Top border from style block.</p>
89 </div>
90 <div class="card card-css-bottom">
91 <h3>CSS border-bottom + border-radius</h3>
92 <p>Bottom border from style block.</p>
93 </div>
94 </div>
95 <!-- DARK MODE VARIANTS -->
96 <h2>Dark Mode</h2>
97 <div class="cards">
98 <div class="border-l-4 border-cyan-400 rounded-lg bg-gray-800 p-4 shadow-sm">
99 <h3 class="font-semibold text-sm text-white">Dark card + border-l-4 + rounded</h3>
100 <p class="text-sm text-gray-400">Dark background doesn't make the side-tab OK.</p>
101 </div>
102 <div class="border-t-2 border-violet-500 rounded-xl bg-slate-900 p-4 shadow-sm">
103 <h3 class="font-semibold text-sm text-white">Dark card + border-t-2 + rounded</h3>
104 <p class="text-sm text-gray-400">Top accent on dark rounded card.</p>
105 </div>
106 <div style="background: #1f2937; padding: 1rem; border-radius: 12px; border-left: 4px solid #f472b6; max-width: 28rem;">
107 <h3 style="font-weight: 600; font-size: 0.875rem; color: white;">Dark CSS card + side border + radius</h3>
108 <p style="font-size: 0.8125rem; color: #9ca3af;">Inline dark card with side-tab.</p>
109 </div>
110 </div>
111<script src="/js/detect-antipatterns-browser.js"></script>
112</body>
113</html>