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: Lazy "Impact" Design</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: #0f0f0f;
19 padding: 40px;
20 }
21
22 .container {
23 max-width: 960px;
24 width: 100%;
25 margin: 0 auto;
26 background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
27 border-radius: 24px;
28 padding: 48px;
29 display: flex;
30 flex-direction: column;
31 position: relative;
32 overflow: hidden;
33 }
34
35 /* Animated gradient background */
36 .bg-gradient {
37 position: absolute;
38 inset: 0;
39 background:
40 radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
41 radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.15) 0%, transparent 50%),
42 radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
43 animation: pulse 8s ease-in-out infinite;
44 }
45
46 @keyframes pulse {
47 0%, 100% { opacity: 0.5; }
48 50% { opacity: 1; }
49 }
50
51 .content {
52 position: relative;
53 z-index: 1;
54 flex: 1;
55 display: flex;
56 flex-direction: column;
57 }
58
59 /* Hero with gradient text */
60 .hero {
61 text-align: center;
62 margin-bottom: 40px;
63 }
64
65 .hero-label {
66 display: inline-flex;
67 align-items: center;
68 gap: 8px;
69 background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.2));
70 border: 1px solid rgba(139, 92, 246, 0.3);
71 padding: 8px 20px;
72 border-radius: 999px;
73 font-size: 13px;
74 color: #c4b5fd;
75 margin-bottom: 24px;
76 animation: float 3s ease-in-out infinite;
77 }
78
79 @keyframes float {
80 0%, 100% { transform: translateY(0); }
81 50% { transform: translateY(-5px); }
82 }
83
84 h1 {
85 font-size: 64px;
86 font-weight: 900;
87 line-height: 1.0;
88 margin-bottom: 16px;
89 background: linear-gradient(135deg, #ffffff 0%, #a78bfa 50%, #ec4899 100%);
90 -webkit-background-clip: text;
91 -webkit-text-fill-color: transparent;
92 animation: gradient-shift 5s ease infinite;
93 background-size: 200% 200%;
94 }
95
96 @keyframes gradient-shift {
97 0% { background-position: 0% 50%; }
98 50% { background-position: 100% 50%; }
99 100% { background-position: 0% 50%; }
100 }
101
102 .subtitle {
103 font-size: 18px;
104 color: rgba(255, 255, 255, 0.5);
105 margin-bottom: 32px;
106 }
107
108 /* Metrics with sparklines */
109 .metrics {
110 display: flex;
111 gap: 24px;
112 margin-bottom: 32px;
113 }
114
115 .metric-card {
116 flex: 1;
117 background: rgba(255, 255, 255, 0.03);
118 border: 1px solid rgba(255, 255, 255, 0.08);
119 border-radius: 16px;
120 padding: 24px;
121 animation: card-pop 0.5s ease-out;
122 }
123
124 @keyframes card-pop {
125 0% { transform: scale(0.9); opacity: 0; }
126 100% { transform: scale(1); opacity: 1; }
127 }
128
129 .metric-header {
130 display: flex;
131 justify-content: space-between;
132 align-items: flex-start;
133 margin-bottom: 12px;
134 }
135
136 .metric-label {
137 font-size: 13px;
138 color: rgba(255, 255, 255, 0.4);
139 font-weight: 500;
140 }
141
142 .metric-change {
143 font-size: 12px;
144 font-weight: 600;
145 padding: 4px 8px;
146 border-radius: 6px;
147 animation: bounce 2s ease-in-out infinite;
148 }
149
150 @keyframes bounce {
151 0%, 100% { transform: translateY(0); }
152 50% { transform: translateY(-3px); }
153 }
154
155 .metric-change.positive {
156 background: rgba(34, 197, 94, 0.2);
157 color: #4ade80;
158 }
159
160 .metric-change.negative {
161 background: rgba(239, 68, 68, 0.2);
162 color: #f87171;
163 }
164
165 .metric-value {
166 font-size: 36px;
167 font-weight: 800;
168 background: linear-gradient(135deg, #fff, #a78bfa);
169 -webkit-background-clip: text;
170 -webkit-text-fill-color: transparent;
171 margin-bottom: 16px;
172 }
173
174 /* SVG Sparkline */
175 .sparkline {
176 width: 100%;
177 height: 40px;
178 }
179
180 .sparkline-path {
181 fill: none;
182 stroke: url(#sparkline-gradient);
183 stroke-width: 2;
184 stroke-linecap: round;
185 stroke-linejoin: round;
186 }
187
188 .sparkline-area {
189 fill: url(#sparkline-area-gradient);
190 }
191
192 /* CTA with elastic animation */
193 .cta-section {
194 display: flex;
195 gap: 16px;
196 justify-content: center;
197 margin-bottom: 40px;
198 }
199
200 .btn-primary {
201 background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
202 color: white;
203 padding: 16px 40px;
204 border-radius: 12px;
205 font-weight: 700;
206 font-size: 16px;
207 border: none;
208 cursor: pointer;
209 box-shadow: 0 0 40px rgba(139, 92, 246, 0.4);
210 animation: elastic 2s ease-in-out infinite;
211 position: relative;
212 overflow: hidden;
213 }
214
215 @keyframes elastic {
216 0%, 100% { transform: scale(1); }
217 25% { transform: scale(1.05); }
218 50% { transform: scale(0.98); }
219 75% { transform: scale(1.02); }
220 }
221
222 .btn-primary::after {
223 content: '';
224 position: absolute;
225 inset: 0;
226 background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
227 animation: shimmer 2s ease-in-out infinite;
228 }
229
230 @keyframes shimmer {
231 0% { transform: translateX(-100%); }
232 100% { transform: translateX(100%); }
233 }
234
235 /* Features grid */
236 .features {
237 display: grid;
238 grid-template-columns: repeat(4, 1fr);
239 gap: 16px;
240 flex: 1;
241 }
242
243 .feature {
244 background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
245 border: 1px solid rgba(255, 255, 255, 0.06);
246 border-radius: 12px;
247 padding: 20px;
248 text-align: center;
249 transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
250 }
251
252 .feature:hover {
253 transform: translateY(-8px) scale(1.02);
254 box-shadow: 0 20px 40px rgba(139, 92, 246, 0.2);
255 }
256
257 .feature-icon {
258 font-size: 28px;
259 margin-bottom: 12px;
260 animation: wiggle 3s ease-in-out infinite;
261 }
262
263 @keyframes wiggle {
264 0%, 100% { transform: rotate(0deg); }
265 25% { transform: rotate(5deg); }
266 75% { transform: rotate(-5deg); }
267 }
268
269 .feature h3 {
270 font-size: 14px;
271 font-weight: 700;
272 background: linear-gradient(135deg, #fff, #c4b5fd);
273 -webkit-background-clip: text;
274 -webkit-text-fill-color: transparent;
275 margin-bottom: 6px;
276 }
277
278 .feature p {
279 font-size: 11px;
280 color: rgba(255, 255, 255, 0.4);
281 line-height: 1.4;
282 }
283
284
285 </style>
286</head>
287<body>
288 <div class="container">
289 <div class="bg-gradient"></div>
290
291 <svg width="0" height="0">
292 <defs>
293 <linearGradient id="sparkline-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
294 <stop offset="0%" stop-color="#8b5cf6" />
295 <stop offset="100%" stop-color="#ec4899" />
296 </linearGradient>
297 <linearGradient id="sparkline-area-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
298 <stop offset="0%" stop-color="rgba(139, 92, 246, 0.3)" />
299 <stop offset="100%" stop-color="rgba(139, 92, 246, 0)" />
300 </linearGradient>
301 </defs>
302 </svg>
303
304 <div class="content">
305 <div class="hero">
306 <span class="hero-label">✨ Launching Soon</span>
307 <h1>10X Your Growth</h1>
308 <p class="subtitle">Transform your metrics with AI-powered insights</p>
309 </div>
310
311 <div class="metrics">
312 <div class="metric-card">
313 <div class="metric-header">
314 <span class="metric-label">Revenue</span>
315 <span class="metric-change positive">+127%</span>
316 </div>
317 <div class="metric-value">$2.4M</div>
318 <svg class="sparkline" viewBox="0 0 200 40">
319 <path class="sparkline-area" d="M0,35 L20,30 L40,32 L60,25 L80,28 L100,20 L120,22 L140,15 L160,18 L180,10 L200,5 L200,40 L0,40 Z"/>
320 <path class="sparkline-path" d="M0,35 L20,30 L40,32 L60,25 L80,28 L100,20 L120,22 L140,15 L160,18 L180,10 L200,5"/>
321 </svg>
322 </div>
323 <div class="metric-card">
324 <div class="metric-header">
325 <span class="metric-label">Users</span>
326 <span class="metric-change positive">+89%</span>
327 </div>
328 <div class="metric-value">48.2K</div>
329 <svg class="sparkline" viewBox="0 0 200 40">
330 <path class="sparkline-area" d="M0,30 L20,28 L40,35 L60,30 L80,25 L100,28 L120,20 L140,18 L160,15 L180,12 L200,8 L200,40 L0,40 Z"/>
331 <path class="sparkline-path" d="M0,30 L20,28 L40,35 L60,30 L80,25 L100,28 L120,20 L140,18 L160,15 L180,12 L200,8"/>
332 </svg>
333 </div>
334 <div class="metric-card">
335 <div class="metric-header">
336 <span class="metric-label">Engagement</span>
337 <span class="metric-change negative">-12%</span>
338 </div>
339 <div class="metric-value">94.2%</div>
340 <svg class="sparkline" viewBox="0 0 200 40">
341 <path class="sparkline-area" d="M0,10 L20,12 L40,8 L60,15 L80,12 L100,18 L120,15 L140,20 L160,18 L180,25 L200,22 L200,40 L0,40 Z"/>
342 <path class="sparkline-path" d="M0,10 L20,12 L40,8 L60,15 L80,12 L100,18 L120,15 L140,20 L160,18 L180,25 L200,22"/>
343 </svg>
344 </div>
345 </div>
346
347 <div class="cta-section">
348 <button class="btn-primary">Start Growing Now</button>
349 </div>
350
351 <div class="features">
352 <div class="feature">
353 <div class="feature-icon">📈</div>
354 <h3>Analytics</h3>
355 <p>Real-time insights</p>
356 </div>
357 <div class="feature">
358 <div class="feature-icon">🚀</div>
359 <h3>Growth</h3>
360 <p>Automated scaling</p>
361 </div>
362 <div class="feature">
363 <div class="feature-icon">💎</div>
364 <h3>Premium</h3>
365 <p>Enterprise ready</p>
366 </div>
367 <div class="feature">
368 <div class="feature-icon">⚡</div>
369 <h3>Speed</h3>
370 <p>Lightning fast</p>
371 </div>
372 </div>
373 </div>
374
375 </div>
376<script src="/js/detect-antipatterns-browser.js"></script>
377</body>
378</html>