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: Layout Templates</title>
7 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&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: #f5f5f5;
19 padding: 40px;
20 }
21
22 .container {
23 max-width: 960px;
24 width: 100%;
25 margin: 0 auto;
26 background: #ffffff;
27 border-radius: 24px;
28 padding: 32px;
29 display: flex;
30 flex-direction: column;
31 position: relative;
32 box-shadow: 0 4px 24px rgba(0,0,0,0.08);
33 }
34
35 /* Template indicator */
36 .template-badge {
37 position: absolute;
38 top: 24px;
39 right: 24px;
40 background: #fef3c7;
41 color: #92400e;
42 padding: 6px 12px;
43 border-radius: 6px;
44 font-size: 11px;
45 font-weight: 600;
46 border: 1px solid #fcd34d;
47 }
48
49 /* THE TEMPLATE: Hero Metric Layout */
50 .hero-metric {
51 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
52 border-radius: 20px;
53 padding: 40px;
54 margin-bottom: 24px;
55 color: white;
56 position: relative;
57 overflow: hidden;
58 }
59
60 .hero-metric::before {
61 content: '';
62 position: absolute;
63 top: -50%;
64 right: -50%;
65 width: 100%;
66 height: 100%;
67 background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
68 }
69
70 .hero-metric-content {
71 position: relative;
72 z-index: 1;
73 display: flex;
74 justify-content: space-between;
75 align-items: center;
76 }
77
78 .hero-metric-main {
79 text-align: left;
80 }
81
82 .hero-metric-label {
83 font-size: 14px;
84 text-transform: uppercase;
85 letter-spacing: 1px;
86 opacity: 0.8;
87 margin-bottom: 8px;
88 }
89
90 .hero-metric-value {
91 font-size: 72px;
92 font-weight: 900;
93 line-height: 1;
94 margin-bottom: 8px;
95 }
96
97 .hero-metric-change {
98 display: inline-flex;
99 align-items: center;
100 gap: 6px;
101 background: rgba(255,255,255,0.2);
102 padding: 6px 12px;
103 border-radius: 6px;
104 font-size: 14px;
105 font-weight: 600;
106 }
107
108 .hero-metric-supporting {
109 display: flex;
110 gap: 32px;
111 }
112
113 .supporting-stat {
114 text-align: right;
115 }
116
117 .supporting-stat-value {
118 font-size: 28px;
119 font-weight: 700;
120 margin-bottom: 4px;
121 }
122
123 .supporting-stat-label {
124 font-size: 12px;
125 opacity: 0.7;
126 text-transform: uppercase;
127 letter-spacing: 0.5px;
128 }
129
130 /* Repeat the same template 3 more times */
131 .metrics-grid {
132 display: grid;
133 grid-template-columns: repeat(2, 1fr);
134 gap: 20px;
135 flex: 1;
136 }
137
138 .metric-template {
139 border-radius: 16px;
140 padding: 28px;
141 color: white;
142 position: relative;
143 overflow: hidden;
144 }
145
146 .metric-template::before {
147 content: '';
148 position: absolute;
149 top: -30%;
150 right: -30%;
151 width: 60%;
152 height: 60%;
153 background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
154 }
155
156 .metric-template.blue { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
157 .metric-template.green { background: linear-gradient(135deg, #22c55e 0%, #15803d 100%); }
158 .metric-template.orange { background: linear-gradient(135deg, #f97316 0%, #c2410c 100%); }
159 .metric-template.pink { background: linear-gradient(135deg, #ec4899 0%, #be185d 100%); }
160
161 .metric-template-content {
162 position: relative;
163 z-index: 1;
164 }
165
166 .metric-template-label {
167 font-size: 12px;
168 text-transform: uppercase;
169 letter-spacing: 1px;
170 opacity: 0.8;
171 margin-bottom: 8px;
172 }
173
174 .metric-template-value {
175 font-size: 42px;
176 font-weight: 800;
177 line-height: 1;
178 margin-bottom: 8px;
179 }
180
181 .metric-template-change {
182 display: inline-flex;
183 align-items: center;
184 gap: 4px;
185 background: rgba(255,255,255,0.2);
186 padding: 4px 10px;
187 border-radius: 4px;
188 font-size: 12px;
189 font-weight: 600;
190 margin-bottom: 16px;
191 }
192
193 .metric-template-row {
194 display: flex;
195 gap: 20px;
196 padding-top: 16px;
197 border-top: 1px solid rgba(255,255,255,0.2);
198 }
199
200 .metric-template-sub {
201 flex: 1;
202 }
203
204 .metric-template-sub-value {
205 font-size: 18px;
206 font-weight: 700;
207 margin-bottom: 2px;
208 }
209
210 .metric-template-sub-label {
211 font-size: 10px;
212 opacity: 0.7;
213 text-transform: uppercase;
214 }
215
216
217 </style>
218</head>
219<body>
220 <div class="container">
221 <div class="template-badge">Same layout × 5</div>
222
223 <!-- THE TEMPLATE: Hero Metric Layout -->
224 <div class="hero-metric">
225 <div class="hero-metric-content">
226 <div class="hero-metric-main">
227 <div class="hero-metric-label">Total Revenue</div>
228 <div class="hero-metric-value">$2.4M</div>
229 <div class="hero-metric-change">↑ +24.5% from last month</div>
230 </div>
231 <div class="hero-metric-supporting">
232 <div class="supporting-stat">
233 <div class="supporting-stat-value">12.8K</div>
234 <div class="supporting-stat-label">Customers</div>
235 </div>
236 <div class="supporting-stat">
237 <div class="supporting-stat-value">$187</div>
238 <div class="supporting-stat-label">Avg. Order</div>
239 </div>
240 </div>
241 </div>
242 </div>
243
244 <!-- Same template repeated 4 more times -->
245 <div class="metrics-grid">
246 <div class="metric-template blue">
247 <div class="metric-template-content">
248 <div class="metric-template-label">Active Users</div>
249 <div class="metric-template-value">48.2K</div>
250 <div class="metric-template-change">↑ +12.3%</div>
251 <div class="metric-template-row">
252 <div class="metric-template-sub">
253 <div class="metric-template-sub-value">32.1K</div>
254 <div class="metric-template-sub-label">Mobile</div>
255 </div>
256 <div class="metric-template-sub">
257 <div class="metric-template-sub-value">16.1K</div>
258 <div class="metric-template-sub-label">Desktop</div>
259 </div>
260 </div>
261 </div>
262 </div>
263
264 <div class="metric-template green">
265 <div class="metric-template-content">
266 <div class="metric-template-label">Conversion Rate</div>
267 <div class="metric-template-value">8.7%</div>
268 <div class="metric-template-change">↑ +2.1%</div>
269 <div class="metric-template-row">
270 <div class="metric-template-sub">
271 <div class="metric-template-sub-value">12.4%</div>
272 <div class="metric-template-sub-label">Returning</div>
273 </div>
274 <div class="metric-template-sub">
275 <div class="metric-template-sub-value">5.2%</div>
276 <div class="metric-template-sub-label">New</div>
277 </div>
278 </div>
279 </div>
280 </div>
281
282 <div class="metric-template orange">
283 <div class="metric-template-content">
284 <div class="metric-template-label">Avg. Session</div>
285 <div class="metric-template-value">4:32</div>
286 <div class="metric-template-change">↓ -0.8%</div>
287 <div class="metric-template-row">
288 <div class="metric-template-sub">
289 <div class="metric-template-sub-value">5.2</div>
290 <div class="metric-template-sub-label">Pages/Visit</div>
291 </div>
292 <div class="metric-template-sub">
293 <div class="metric-template-sub-value">32%</div>
294 <div class="metric-template-sub-label">Bounce</div>
295 </div>
296 </div>
297 </div>
298 </div>
299
300 <div class="metric-template pink">
301 <div class="metric-template-content">
302 <div class="metric-template-label">NPS Score</div>
303 <div class="metric-template-value">72</div>
304 <div class="metric-template-change">↑ +5 pts</div>
305 <div class="metric-template-row">
306 <div class="metric-template-sub">
307 <div class="metric-template-sub-value">84%</div>
308 <div class="metric-template-sub-label">Promoters</div>
309 </div>
310 <div class="metric-template-sub">
311 <div class="metric-template-sub-value">4%</div>
312 <div class="metric-template-sub-label">Detractors</div>
313 </div>
314 </div>
315 </div>
316 </div>
317 </div>
318
319 </div>
320<script src="/js/detect-antipatterns-browser.js"></script>
321</body>
322</html>