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-Pattern: Cardocalypse</title>
7 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
8 <style>
9 * {
10 margin: 0;
11 padding: 0;
12 box-sizing: border-box;
13 }
14
15 body {
16 font-family: 'Inter', sans-serif;
17 min-height: 100vh;
18 background: #f3f4f6;
19 padding: 40px;
20 }
21
22 .container {
23 max-width: 960px;
24 width: 100%;
25 margin: 0 auto;
26 background: #e5e7eb;
27 border-radius: 24px;
28 padding: 32px;
29 display: flex;
30 flex-direction: column;
31 position: relative;
32 }
33
34 /* Page card */
35 .page-card {
36 background: #f9fafb;
37 border-radius: 20px;
38 padding: 28px;
39 flex: 1;
40 display: flex;
41 flex-direction: column;
42 box-shadow: 0 4px 16px rgba(0,0,0,0.06);
43 }
44
45 /* Header card */
46 .header-card {
47 background: white;
48 border-radius: 16px;
49 padding: 20px 24px;
50 display: flex;
51 justify-content: space-between;
52 align-items: center;
53 margin-bottom: 20px;
54 box-shadow: 0 2px 8px rgba(0,0,0,0.04);
55 }
56
57 .logo-card {
58 background: #f3f4f6;
59 border-radius: 10px;
60 padding: 10px 16px;
61 font-weight: 700;
62 font-size: 16px;
63 color: #374151;
64 }
65
66 .nav-card {
67 background: #f3f4f6;
68 border-radius: 10px;
69 padding: 8px;
70 display: flex;
71 gap: 4px;
72 }
73
74 .nav-item-card {
75 background: white;
76 border-radius: 8px;
77 padding: 8px 16px;
78 font-size: 13px;
79 color: #6b7280;
80 font-weight: 500;
81 }
82
83 .nav-item-card.active {
84 background: #111;
85 color: white;
86 }
87
88 /* Main content area */
89 .content-card {
90 background: white;
91 border-radius: 16px;
92 padding: 24px;
93 flex: 1;
94 display: flex;
95 gap: 20px;
96 box-shadow: 0 2px 8px rgba(0,0,0,0.04);
97 }
98
99 /* Sidebar card */
100 .sidebar-card {
101 background: #f9fafb;
102 border-radius: 14px;
103 padding: 16px;
104 width: 200px;
105 display: flex;
106 flex-direction: column;
107 gap: 8px;
108 }
109
110 .sidebar-item-card {
111 background: white;
112 border-radius: 10px;
113 padding: 12px 14px;
114 font-size: 13px;
115 color: #6b7280;
116 font-weight: 500;
117 box-shadow: 0 1px 3px rgba(0,0,0,0.04);
118 }
119
120 .sidebar-item-card.active {
121 background: #eef2ff;
122 color: #4f46e5;
123 border: 1px solid #c7d2fe;
124 }
125
126 /* Main panel card */
127 .main-panel-card {
128 background: #f9fafb;
129 border-radius: 14px;
130 padding: 20px;
131 flex: 1;
132 display: flex;
133 flex-direction: column;
134 gap: 16px;
135 }
136
137 .section-title-card {
138 background: white;
139 border-radius: 10px;
140 padding: 14px 18px;
141 font-weight: 600;
142 font-size: 15px;
143 color: #1f2937;
144 box-shadow: 0 1px 3px rgba(0,0,0,0.04);
145 }
146
147 /* Stats row */
148 .stats-row-card {
149 background: white;
150 border-radius: 12px;
151 padding: 16px;
152 display: flex;
153 gap: 12px;
154 box-shadow: 0 1px 3px rgba(0,0,0,0.04);
155 }
156
157 .stat-card {
158 background: #f9fafb;
159 border-radius: 10px;
160 padding: 16px;
161 flex: 1;
162 text-align: center;
163 }
164
165 .stat-value-card {
166 background: white;
167 border-radius: 8px;
168 padding: 8px;
169 font-size: 24px;
170 font-weight: 700;
171 color: #111;
172 margin-bottom: 8px;
173 box-shadow: 0 1px 2px rgba(0,0,0,0.04);
174 }
175
176 .stat-label {
177 font-size: 11px;
178 color: #9ca3af;
179 text-transform: uppercase;
180 letter-spacing: 0.5px;
181 }
182
183 /* List card */
184 .list-card {
185 background: white;
186 border-radius: 12px;
187 padding: 16px;
188 flex: 1;
189 display: flex;
190 flex-direction: column;
191 gap: 10px;
192 box-shadow: 0 1px 3px rgba(0,0,0,0.04);
193 }
194
195 .list-item-card {
196 background: #f9fafb;
197 border-radius: 10px;
198 padding: 14px;
199 display: flex;
200 justify-content: space-between;
201 align-items: center;
202 }
203
204 .list-item-info-card {
205 background: white;
206 border-radius: 8px;
207 padding: 10px 14px;
208 display: flex;
209 align-items: center;
210 gap: 12px;
211 box-shadow: 0 1px 2px rgba(0,0,0,0.04);
212 }
213
214 .avatar-card {
215 background: #e5e7eb;
216 border-radius: 6px;
217 width: 32px;
218 height: 32px;
219 }
220
221 .list-item-name {
222 font-size: 13px;
223 font-weight: 600;
224 color: #374151;
225 }
226
227 .list-item-actions-card {
228 background: white;
229 border-radius: 8px;
230 padding: 8px;
231 display: flex;
232 gap: 4px;
233 box-shadow: 0 1px 2px rgba(0,0,0,0.04);
234 }
235
236 .action-btn-card {
237 background: #f3f4f6;
238 border-radius: 6px;
239 padding: 6px 12px;
240 font-size: 11px;
241 color: #6b7280;
242 font-weight: 500;
243 }
244
245 /* Nesting depth indicator */
246 .depth-legend {
247 position: absolute;
248 top: 48px;
249 right: 48px;
250 background: white;
251 border-radius: 12px;
252 padding: 16px;
253 box-shadow: 0 4px 12px rgba(0,0,0,0.1);
254 }
255
256 .depth-title {
257 font-size: 11px;
258 font-weight: 600;
259 color: #6b7280;
260 margin-bottom: 10px;
261 text-transform: uppercase;
262 letter-spacing: 0.5px;
263 }
264
265 .depth-item {
266 display: flex;
267 align-items: center;
268 gap: 8px;
269 margin-bottom: 6px;
270 font-size: 11px;
271 color: #374151;
272 }
273
274 .depth-box {
275 width: 16px;
276 height: 16px;
277 border-radius: 4px;
278 }
279
280 .depth-1 { background: #e5e7eb; }
281 .depth-2 { background: #f9fafb; }
282 .depth-3 { background: #ffffff; }
283 .depth-4 { background: #f9fafb; border: 1px solid #e5e7eb; }
284 .depth-5 { background: #ffffff; border: 1px solid #e5e7eb; }
285
286
287 </style>
288</head>
289<body>
290 <div class="container">
291 <div class="depth-legend">
292 <div class="depth-title">Nesting Depth</div>
293 <div class="depth-item"><div class="depth-box depth-1"></div> Level 1</div>
294 <div class="depth-item"><div class="depth-box depth-2"></div> Level 2</div>
295 <div class="depth-item"><div class="depth-box depth-3"></div> Level 3</div>
296 <div class="depth-item"><div class="depth-box depth-4"></div> Level 4</div>
297 <div class="depth-item"><div class="depth-box depth-5"></div> Level 5</div>
298 </div>
299
300 <div class="page-card">
301 <div class="header-card">
302 <div class="logo-card">Dashboard</div>
303 <div class="nav-card">
304 <div class="nav-item-card active">Overview</div>
305 <div class="nav-item-card">Analytics</div>
306 <div class="nav-item-card">Settings</div>
307 </div>
308 </div>
309
310 <div class="content-card">
311 <div class="sidebar-card">
312 <div class="sidebar-item-card active">Dashboard</div>
313 <div class="sidebar-item-card">Projects</div>
314 <div class="sidebar-item-card">Team</div>
315 <div class="sidebar-item-card">Reports</div>
316 </div>
317
318 <div class="main-panel-card">
319 <div class="section-title-card">Overview</div>
320
321 <div class="stats-row-card">
322 <div class="stat-card">
323 <div class="stat-value-card">2,847</div>
324 <div class="stat-label">Total Users</div>
325 </div>
326 <div class="stat-card">
327 <div class="stat-value-card">$48.2K</div>
328 <div class="stat-label">Revenue</div>
329 </div>
330 <div class="stat-card">
331 <div class="stat-value-card">94.2%</div>
332 <div class="stat-label">Uptime</div>
333 </div>
334 </div>
335
336 <div class="list-card">
337 <div class="list-item-card">
338 <div class="list-item-info-card">
339 <div class="avatar-card"></div>
340 <span class="list-item-name">John Smith</span>
341 </div>
342 <div class="list-item-actions-card">
343 <div class="action-btn-card">Edit</div>
344 <div class="action-btn-card">Delete</div>
345 </div>
346 </div>
347 <div class="list-item-card">
348 <div class="list-item-info-card">
349 <div class="avatar-card"></div>
350 <span class="list-item-name">Sarah Johnson</span>
351 </div>
352 <div class="list-item-actions-card">
353 <div class="action-btn-card">Edit</div>
354 <div class="action-btn-card">Delete</div>
355 </div>
356 </div>
357 <div class="list-item-card">
358 <div class="list-item-info-card">
359 <div class="avatar-card"></div>
360 <span class="list-item-name">Mike Davis</span>
361 </div>
362 <div class="list-item-actions-card">
363 <div class="action-btn-card">Edit</div>
364 <div class="action-btn-card">Delete</div>
365 </div>
366 </div>
367 </div>
368 </div>
369 </div>
370 </div>
371
372 </div>
373<script src="/js/detect-antipatterns-browser.js"></script>
374</body>
375</html>