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 "Cool" Design</title>
7 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono: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: #0a0a0a;
19 padding: 40px;
20 }
21
22 .container {
23 max-width: 960px;
24 width: 100%;
25 margin: 0 auto;
26 background: linear-gradient(135deg, #0f0f23 0%, #0a0a1a 100%);
27 border-radius: 24px;
28 padding: 48px;
29 display: flex;
30 flex-direction: column;
31 position: relative;
32 overflow: hidden;
33 }
34
35 /* Glow orbs in background */
36 .glow-orb {
37 position: absolute;
38 border-radius: 50%;
39 filter: blur(100px);
40 opacity: 0.4;
41 }
42
43 .glow-1 {
44 width: 400px;
45 height: 400px;
46 background: #00ffff;
47 top: -100px;
48 right: -100px;
49 }
50
51 .glow-2 {
52 width: 300px;
53 height: 300px;
54 background: #ff00ff;
55 bottom: -50px;
56 left: -50px;
57 }
58
59 /* Content */
60 .content {
61 position: relative;
62 z-index: 1;
63 flex: 1;
64 display: flex;
65 flex-direction: column;
66 }
67
68 /* Nav with glassmorphism */
69 nav {
70 display: flex;
71 justify-content: space-between;
72 align-items: center;
73 margin-bottom: 48px;
74 background: rgba(255, 255, 255, 0.05);
75 backdrop-filter: blur(20px);
76 -webkit-backdrop-filter: blur(20px);
77 border: 1px solid rgba(255, 255, 255, 0.1);
78 border-radius: 16px;
79 padding: 16px 24px;
80 }
81
82 .logo {
83 font-family: 'JetBrains Mono', monospace;
84 font-size: 20px;
85 font-weight: 700;
86 color: #00ffff;
87 text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
88 }
89
90 .nav-links {
91 display: flex;
92 gap: 24px;
93 }
94
95 .nav-links a {
96 font-family: 'JetBrains Mono', monospace;
97 color: rgba(255, 255, 255, 0.6);
98 text-decoration: none;
99 font-size: 13px;
100 text-transform: uppercase;
101 letter-spacing: 1px;
102 }
103
104 .nav-cta {
105 background: linear-gradient(135deg, #00ffff, #00ccff) !important;
106 color: #000 !important;
107 padding: 10px 20px;
108 border-radius: 8px;
109 font-weight: 600;
110 box-shadow: 0 0 30px rgba(0, 255, 255, 0.4);
111 }
112
113 /* Hero with neon */
114 .hero {
115 flex: 1;
116 display: flex;
117 flex-direction: column;
118 justify-content: center;
119 text-align: center;
120 padding: 0 60px;
121 }
122
123 .hero-badge {
124 font-family: 'JetBrains Mono', monospace;
125 display: inline-flex;
126 align-items: center;
127 gap: 8px;
128 background: rgba(0, 255, 255, 0.1);
129 border: 1px solid rgba(0, 255, 255, 0.3);
130 padding: 8px 16px;
131 border-radius: 999px;
132 font-size: 12px;
133 margin: 0 auto 24px;
134 color: #00ffff;
135 text-transform: uppercase;
136 letter-spacing: 2px;
137 }
138
139 h1 {
140 font-size: 56px;
141 font-weight: 800;
142 line-height: 1.1;
143 margin-bottom: 24px;
144 color: #ffffff;
145 text-shadow: 0 0 40px rgba(0, 255, 255, 0.3);
146 }
147
148 h1 span {
149 color: #00ffff;
150 text-shadow: 0 0 30px rgba(0, 255, 255, 0.8);
151 }
152
153 .subtitle {
154 font-family: 'JetBrains Mono', monospace;
155 font-size: 16px;
156 color: rgba(255, 255, 255, 0.5);
157 max-width: 500px;
158 margin: 0 auto 40px;
159 line-height: 1.7;
160 }
161
162 .cta-group {
163 display: flex;
164 gap: 16px;
165 justify-content: center;
166 }
167
168 .btn-primary {
169 font-family: 'JetBrains Mono', monospace;
170 background: linear-gradient(135deg, #00ffff 0%, #00ccff 100%);
171 color: #000;
172 padding: 16px 32px;
173 border-radius: 12px;
174 font-weight: 600;
175 font-size: 14px;
176 border: none;
177 cursor: pointer;
178 box-shadow: 0 0 40px rgba(0, 255, 255, 0.5);
179 text-transform: uppercase;
180 letter-spacing: 1px;
181 }
182
183 .btn-secondary {
184 font-family: 'JetBrains Mono', monospace;
185 background: rgba(255, 255, 255, 0.05);
186 backdrop-filter: blur(10px);
187 border: 1px solid rgba(0, 255, 255, 0.3);
188 color: #00ffff;
189 padding: 16px 32px;
190 border-radius: 12px;
191 font-weight: 600;
192 font-size: 14px;
193 cursor: pointer;
194 text-transform: uppercase;
195 letter-spacing: 1px;
196 }
197
198 /* Glass cards */
199 .cards {
200 display: flex;
201 gap: 20px;
202 margin-top: 48px;
203 }
204
205 .glass-card {
206 flex: 1;
207 background: rgba(255, 255, 255, 0.03);
208 backdrop-filter: blur(20px);
209 -webkit-backdrop-filter: blur(20px);
210 border: 1px solid rgba(255, 255, 255, 0.08);
211 border-radius: 16px;
212 padding: 24px;
213 text-align: center;
214 }
215
216 .glass-card-icon {
217 font-size: 28px;
218 margin-bottom: 12px;
219 filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.5));
220 }
221
222 .glass-card h3 {
223 font-family: 'JetBrains Mono', monospace;
224 font-size: 14px;
225 color: #00ffff;
226 margin-bottom: 8px;
227 text-transform: uppercase;
228 letter-spacing: 1px;
229 }
230
231 .glass-card p {
232 font-size: 13px;
233 color: rgba(255, 255, 255, 0.4);
234 line-height: 1.5;
235 }
236
237 /* Terminal-style element */
238 .terminal {
239 position: absolute;
240 top: 48px;
241 right: 48px;
242 background: rgba(0, 0, 0, 0.6);
243 border: 1px solid rgba(0, 255, 255, 0.2);
244 border-radius: 8px;
245 padding: 12px 16px;
246 font-family: 'JetBrains Mono', monospace;
247 font-size: 11px;
248 }
249
250 .terminal-header {
251 color: rgba(255, 255, 255, 0.4);
252 margin-bottom: 8px;
253 }
254
255 .terminal-line {
256 color: #00ffff;
257 }
258
259 .terminal-line::before {
260 content: '> ';
261 color: #ff00ff;
262 }
263
264
265 </style>
266</head>
267<body>
268 <div class="container">
269 <div class="glow-orb glow-1"></div>
270 <div class="glow-orb glow-2"></div>
271
272 <div class="terminal">
273 <div class="terminal-header">~/hacker-vibes</div>
274 <div class="terminal-line">npm run look-cool</div>
275 </div>
276
277 <div class="content">
278 <nav>
279 <div class="logo"><CYBER/></div>
280 <div class="nav-links">
281 <a href="#">Features</a>
282 <a href="#">Docs</a>
283 <a href="#">Pricing</a>
284 <a href="#" class="nav-cta">Launch</a>
285 </div>
286 </nav>
287
288 <div class="hero">
289 <span class="hero-badge">// Now in Beta</span>
290 <h1>Build the Future<br>with <span>Cyber Tech</span></h1>
291 <p class="subtitle">const future = await buildWithAI(); // Neon glow makes everything 10x more futuristic</p>
292 <div class="cta-group">
293 <button class="btn-primary">Initialize_</button>
294 <button class="btn-secondary">View_Code</button>
295 </div>
296 </div>
297
298 <div class="cards">
299 <div class="glass-card">
300 <div class="glass-card-icon">⚡</div>
301 <h3>Lightning</h3>
302 <p>Blazing fast with quantum acceleration</p>
303 </div>
304 <div class="glass-card">
305 <div class="glass-card-icon">🔮</div>
306 <h3>AI Powered</h3>
307 <p>Neural networks do the heavy lifting</p>
308 </div>
309 <div class="glass-card">
310 <div class="glass-card-icon">🌐</div>
311 <h3>Web3 Ready</h3>
312 <p>Decentralized by default</p>
313 </div>
314 </div>
315 </div>
316
317 </div>
318<script src="/js/detect-antipatterns-browser.js"></script>
319</body>
320</html>