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: 1.5rem; margin-bottom: 0.5rem; }
11 h2 { font-size: 1.125rem; margin: 2.5rem 0 0.75rem; color: #6b7280; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; }
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 .card-logical-start { border-inline-start: 4px solid #f59e0b; }
24 .card-logical-end { border-inline-end: 3px solid #ec4899; }
25 .card-logical-start-width { border-inline-start-width: 5px; border-inline-start-style: solid; border-inline-start-color: #06b6d4; }
26
27 /* CSS top/bottom + border-radius */
28 .card-css-top { border-radius: 12px; border-top: 4px solid #3b82f6; }
29 .card-css-bottom { border-radius: 12px; border-bottom: 3px solid #8b5cf6; }
30 </style>
31</head>
32<body>
33 <h1>Anti-Patterns: Should Flag</h1>
34 <p class="intro">Every example on this page should be detected by the anti-pattern scanner.</p>
35
36 <!-- TAILWIND SIDE-TAB -->
37 <h2>Tailwind Side-Tab</h2>
38 <div class="cards">
39 <div class="border-l-4 border-blue-500 bg-white p-4 rounded-r shadow-sm">
40 <h3>border-l-4 + rounded-r</h3>
41 <p>The classic AI tell.</p>
42 </div>
43 <div class="border-l-2 border-emerald-500 bg-white p-4 rounded-r shadow-sm">
44 <h3>border-l-2 + rounded-r</h3>
45 <p>Thin but still recognizable with rounded corners.</p>
46 </div>
47 <div class="border-r-4 border-purple-500 bg-white p-4 rounded-l shadow-sm">
48 <h3>border-r-4 + rounded-l</h3>
49 <p>Right side variant.</p>
50 </div>
51 <div class="border-s-3 border-amber-500 bg-white p-4 rounded-r shadow-sm">
52 <h3>border-s-3 + rounded-r</h3>
53 <p>Logical inline-start.</p>
54 </div>
55 <div class="border-e-8 border-red-500 bg-white p-4 rounded-l shadow-sm">
56 <h3>border-e-8 + rounded-l</h3>
57 <p>Logical inline-end, extra thick.</p>
58 </div>
59 </div>
60
61 <!-- CSS SIDE-TAB -->
62 <h2>CSS Side-Tab</h2>
63 <div class="cards">
64 <div class="card card-shorthand-left">
65 <h3>border-left: 4px solid</h3>
66 <p>CSS shorthand.</p>
67 </div>
68 <div class="card card-shorthand-right">
69 <h3>border-right: 5px solid</h3>
70 <p>CSS shorthand right.</p>
71 </div>
72 <div class="card card-longhand-left">
73 <h3>border-left-width: 3px</h3>
74 <p>CSS longhand.</p>
75 </div>
76 <div class="card card-longhand-right">
77 <h3>border-right-width: 6px</h3>
78 <p>CSS longhand right.</p>
79 </div>
80 <div class="card card-logical-start">
81 <h3>border-inline-start: 4px solid</h3>
82 <p>CSS logical start.</p>
83 </div>
84 <div class="card card-logical-end">
85 <h3>border-inline-end: 3px solid</h3>
86 <p>CSS logical end.</p>
87 </div>
88 <div class="card card-logical-start-width">
89 <h3>border-inline-start-width: 5px</h3>
90 <p>CSS logical longhand.</p>
91 </div>
92 </div>
93
94 <!-- TOP/BOTTOM + ROUNDED -->
95 <h2>Top/Bottom + Rounded</h2>
96 <div class="cards">
97 <div class="border-t-4 border-blue-500 rounded-lg bg-white p-4 shadow-sm">
98 <h3 class="font-semibold text-sm">border-t-4 + rounded-lg</h3>
99 <p class="text-sm text-gray-600">Top accent on rounded card.</p>
100 </div>
101 <div class="border-b-4 border-purple-500 rounded-xl bg-white p-4 shadow-sm">
102 <h3 class="font-semibold text-sm">border-b-4 + rounded-xl</h3>
103 <p class="text-sm text-gray-600">Bottom accent on rounded card.</p>
104 </div>
105 <div class="border-t-2 border-emerald-500 rounded-md bg-white p-4 shadow-sm">
106 <h3 class="font-semibold text-sm">border-t-2 + rounded-md</h3>
107 <p class="text-sm text-gray-600">Even thin top border on rounded.</p>
108 </div>
109 <div class="card card-css-top">
110 <h3>CSS border-top + border-radius</h3>
111 <p>Top border from style block.</p>
112 </div>
113 <div class="card card-css-bottom">
114 <h3>CSS border-bottom + border-radius</h3>
115 <p>Bottom border from style block.</p>
116 </div>
117 </div>
118 <!-- DARK MODE VARIANTS -->
119 <h2>Dark Mode</h2>
120 <div class="cards">
121 <div class="border-l-4 border-cyan-400 rounded-lg bg-gray-800 p-4 shadow-sm">
122 <h3 class="font-semibold text-sm text-white">Dark card + border-l-4 + rounded</h3>
123 <p class="text-sm text-gray-400">Dark background doesn't make the side-tab OK.</p>
124 </div>
125 <div class="border-t-2 border-violet-500 rounded-xl bg-slate-900 p-4 shadow-sm">
126 <h3 class="font-semibold text-sm text-white">Dark card + border-t-2 + rounded</h3>
127 <p class="text-sm text-gray-400">Top accent on dark rounded card.</p>
128 </div>
129 <div style="background: #1f2937; padding: 1rem; border-radius: 12px; border-left: 4px solid #f472b6; max-width: 28rem;">
130 <h3 style="font-weight: 600; font-size: 0.875rem; color: white;">Dark CSS card + side border + radius</h3>
131 <p style="font-size: 0.8125rem; color: #9ca3af;">Inline dark card with side-tab.</p>
132 </div>
133 </div>
134<script src="/js/detect-antipatterns-browser.js"></script>
135</body>
136</html>