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>Layout Anti-Patterns — Should Flag vs Should Pass</title>
7 <script src="https://cdn.tailwindcss.com"></script>
8 <style>
9 body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 24px; margin: 0; color: #111827; }
10 .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1280px; margin: 0 auto; }
11 .col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }
12 .col h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin: 24px 0 8px; color: #64748b; }
13 </style>
14</head>
15<body>
16 <div class="grid">
17
18 <!-- ════════════════════════════════════════════════════════════
19 LEFT COLUMN: should flag
20 ═══════════════════════════════════════════════════════════ -->
21 <div class="col" data-col="flag">
22 <h2>Should flag</h2>
23
24 <h3>Nested cards (cardocalypse)</h3>
25
26 <!-- Classic: card inside card -->
27 <div class="bg-white rounded-lg shadow-md p-6 mb-4">
28 <h4 class="text-lg font-semibold mb-3">Outer Card</h4>
29 <div class="bg-white rounded-lg shadow-md p-4">
30 <h5 class="font-medium">Inner Card</h5>
31 <p class="text-sm text-gray-600">Card inside card.</p>
32 </div>
33 </div>
34
35 <!-- Three levels deep -->
36 <div class="bg-white rounded-xl shadow-lg p-6 mb-4">
37 <h4 class="text-lg font-semibold mb-3">Level 1</h4>
38 <div class="bg-gray-50 rounded-lg shadow-sm p-4 mb-3">
39 <h5 class="font-medium mb-2">Level 2</h5>
40 <div class="bg-white rounded-md shadow-sm p-3">
41 <p class="text-sm">Level 3 — nesting inception.</p>
42 </div>
43 </div>
44 </div>
45
46 <!-- CSS variant: border + bg + shadow nesting -->
47 <div style="background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 1.5rem; margin-bottom: 1rem;">
48 <h4 style="font-weight: 600; margin-bottom: 0.75rem;">Outer (CSS)</h4>
49 <div style="background: #f9fafb; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); padding: 1rem;">
50 <p style="font-size: 0.875rem; color: #6b7280;">Inner card via CSS.</p>
51 </div>
52 </div>
53
54 <!-- shadcn-style Card nested in Card -->
55 <div class="rounded-lg border bg-white shadow-sm p-6 mb-4" data-component="card">
56 <h4 class="font-semibold mb-3">shadcn-style Outer Card</h4>
57 <div class="rounded-lg border bg-white shadow-sm p-4" data-component="card">
58 <p class="text-sm text-gray-600">Another shadcn Card nested inside.</p>
59 </div>
60 </div>
61 </div>
62
63 <!-- ════════════════════════════════════════════════════════════
64 RIGHT COLUMN: should pass
65 ═══════════════════════════════════════════════════════════ -->
66 <div class="col" data-col="pass">
67 <h2>Should pass</h2>
68
69 <h3>shadcn Card sub-components (not nested cards)</h3>
70 <div class="rounded-lg border bg-white shadow-sm mb-4">
71 <div class="flex flex-col space-y-1.5 p-6">
72 <h4 class="text-lg font-semibold">Card Title</h4>
73 <p class="text-sm text-gray-500">Card description goes here.</p>
74 </div>
75 <div class="p-6 pt-0">
76 <p class="text-sm text-gray-600">CardContent — a sub-section, not a nested card. No shadow, no border-radius of its own.</p>
77 </div>
78 <div class="flex items-center p-6 pt-0">
79 <button class="px-4 py-2 bg-gray-900 text-white text-sm rounded-md">Action</button>
80 </div>
81 </div>
82
83 <h3>Card with form inputs</h3>
84 <div class="bg-white rounded-lg shadow-sm p-6 mb-4 border">
85 <h4 class="font-semibold mb-4">Settings</h4>
86 <div class="space-y-3">
87 <input type="text" placeholder="Name" class="w-full px-3 py-2 border rounded-md shadow-sm text-sm">
88 <input type="email" placeholder="Email" class="w-full px-3 py-2 border rounded-md shadow-sm text-sm">
89 <select class="w-full px-3 py-2 border rounded-md shadow-sm text-sm bg-white">
90 <option>Select option</option>
91 </select>
92 <textarea placeholder="Bio" class="w-full px-3 py-2 border rounded-md shadow-sm text-sm h-20 resize-none"></textarea>
93 </div>
94 </div>
95
96 <h3>Card with code block</h3>
97 <div class="bg-white rounded-lg shadow-sm p-6 mb-4 border">
98 <h4 class="font-semibold mb-3">Installation</h4>
99 <pre class="bg-gray-900 text-gray-100 rounded-md p-4 text-sm overflow-x-auto"><code>npm install @acme/sdk</code></pre>
100 </div>
101
102 <h3>Card with badges</h3>
103 <div class="bg-white rounded-lg shadow-sm p-6 mb-4 border">
104 <h4 class="font-semibold mb-3">Tags</h4>
105 <div class="flex flex-wrap gap-2">
106 <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium">React</span>
107 <span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs font-medium">TypeScript</span>
108 <span class="px-2 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-medium">Tailwind</span>
109 </div>
110 </div>
111
112 <h3>Card with image</h3>
113 <div class="bg-white rounded-lg shadow-sm p-6 mb-4 border">
114 <div class="w-full h-32 bg-gradient-to-br from-amber-400 to-rose-500 rounded-lg shadow-inner mb-4"></div>
115 <h4 class="font-semibold">Project Preview</h4>
116 <p class="text-sm text-gray-600 mt-1">Image with rounded corners and shadow.</p>
117 </div>
118
119 <h3>Pricing cards (intentionally similar)</h3>
120 <div class="grid grid-cols-3 gap-2 mb-4">
121 <div class="bg-white rounded-lg shadow-sm p-4 border">
122 <h4 class="font-semibold mb-1 text-sm">Free</h4>
123 <div class="text-lg font-bold mb-2">$0</div>
124 </div>
125 <div class="bg-white rounded-lg shadow-sm p-4 border-2 border-blue-500">
126 <h4 class="font-semibold mb-1 text-sm">Pro</h4>
127 <div class="text-lg font-bold mb-2">$29</div>
128 </div>
129 <div class="bg-white rounded-lg shadow-sm p-4 border">
130 <h4 class="font-semibold mb-1 text-sm">Enterprise</h4>
131 <div class="text-lg font-bold mb-2">Custom</div>
132 </div>
133 </div>
134 </div>
135 </div>
136 <script src="/js/detect-antipatterns-browser.js"></script>
137</body>
138</html>