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>Visual Mode Demo</title>
7 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
8 <style>
9 * { margin: 0; padding: 0; box-sizing: border-box; }
10
11 body {
12 font-family: 'Inter', sans-serif;
13 min-height: 100vh;
14 background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 50%, #1a0a2e 100%);
15 color: white;
16 padding: 60px 24px 24px;
17 overflow-x: hidden;
18 }
19
20 .container {
21 max-width: 720px;
22 margin: 0 auto;
23 background: linear-gradient(145deg, #2a1a4a 0%, #1a0a2e 100%);
24 border-radius: 24px;
25 padding: 32px;
26 position: relative;
27 overflow: hidden;
28 }
29
30 /* orbs removed to reduce detector noise */
31
32 .content { position: relative; z-index: 1; }
33
34 nav {
35 display: flex;
36 justify-content: space-between;
37 align-items: center;
38 margin-bottom: 32px;
39 }
40
41 .logo {
42 font-size: 18px;
43 font-weight: 800;
44 background: linear-gradient(135deg, #a855f7, #ec4899);
45 -webkit-background-clip: text;
46 -webkit-text-fill-color: transparent;
47 }
48
49 .nav-links {
50 display: flex;
51 gap: 20px;
52 align-items: center;
53 }
54
55 .nav-links a {
56 color: rgba(255,255,255,0.6);
57 text-decoration: none;
58 font-size: 13px;
59 }
60
61 .nav-cta {
62 background: linear-gradient(135deg, #8b5cf6, #a855f7) !important;
63 color: white !important;
64 padding: 8px 16px;
65 border-radius: 999px;
66 font-weight: 600;
67 font-size: 12px;
68 }
69
70 .hero {
71 text-align: center;
72 padding: 0 20px;
73 margin-bottom: 32px;
74 }
75
76 .badge {
77 display: inline-flex;
78 align-items: center;
79 gap: 6px;
80 background: linear-gradient(135deg, rgba(139,92,246,0.3), rgba(168,85,247,0.2));
81 border: 1px solid rgba(168,85,247,0.4);
82 padding: 6px 14px;
83 border-radius: 999px;
84 font-size: 11px;
85 margin-bottom: 16px;
86 color: #c4b5fd;
87 }
88
89 .badge::before { content: '\2728'; }
90
91 h1 {
92 font-size: 36px;
93 font-weight: 800;
94 line-height: 1.1;
95 margin-bottom: 12px;
96 background: linear-gradient(135deg, #fff 0%, #c4b5fd 50%, #a855f7 100%);
97 -webkit-background-clip: text;
98 -webkit-text-fill-color: transparent;
99 }
100
101 .subtitle {
102 font-size: 14px;
103 color: rgba(255,255,255,0.5);
104 max-width: 400px;
105 margin: 0 auto 24px;
106 line-height: 1.6;
107 }
108
109 /* Side-tab border cards */
110 .cards {
111 display: grid;
112 grid-template-columns: repeat(3, 1fr);
113 gap: 12px;
114 margin-bottom: 24px;
115 }
116
117 .card {
118 background: rgba(255,255,255,0.06);
119 border-radius: 12px;
120 padding: 20px 16px;
121 backdrop-filter: blur(8px);
122 }
123
124 .card-heading {
125 display: flex;
126 align-items: center;
127 gap: 10px;
128 margin-bottom: 8px;
129 }
130
131 .card-icon {
132 font-size: 18px;
133 line-height: 1;
134 }
135
136 .card h3 {
137 font-size: 14px;
138 font-weight: 700;
139 }
140
141 .card p {
142 font-size: 13px;
143 color: rgba(255,255,255,0.55);
144 line-height: 1.5;
145 }
146
147 /* Stats */
148 .stats {
149 display: flex;
150 justify-content: center;
151 gap: 40px;
152 padding-top: 20px;
153 border-top: 1px solid rgba(139,92,246,0.3);
154 }
155
156 .stat-value {
157 font-size: 24px;
158 font-weight: 800;
159 background: linear-gradient(135deg, #a855f7, #ec4899);
160 -webkit-background-clip: text;
161 -webkit-text-fill-color: transparent;
162 }
163
164 .stat-label {
165 font-size: 11px;
166 color: rgba(255,255,255,0.4);
167 margin-top: 2px;
168 }
169 </style>
170</head>
171<body>
172 <div class="container">
173 <div class="content">
174 <nav>
175 <div class="logo">Synthwave.ai</div>
176 <div class="nav-links">
177 <a href="#">Features</a>
178 <a href="#">Pricing</a>
179 <a href="#" class="nav-cta">Get Started</a>
180 </div>
181 </nav>
182
183 <div class="hero">
184 <span class="badge">New: AI-Powered Everything</span>
185 <h1>Build the Future<br>With AI Magic</h1>
186 <p class="subtitle">Transform your workflow with our revolutionary AI platform. Purple gradients included.</p>
187 </div>
188
189 <div class="cards">
190 <div class="card">
191 <div class="card-heading">
192 <span class="card-icon">⚡</span>
193 <h3>Fast Performance</h3>
194 </div>
195 <p>Blazing fast inference with our optimized pipeline.</p>
196 </div>
197 <div class="card">
198 <div class="card-heading">
199 <span class="card-icon">🔒</span>
200 <h3>Secure & Safe</h3>
201 </div>
202 <p>Enterprise-grade security with encrypted data.</p>
203 </div>
204 <div class="card">
205 <div class="card-heading">
206 <span class="card-icon">📈</span>
207 <h3>Analytics</h3>
208 </div>
209 <p>Powerful insights to help you make better decisions.</p>
210 </div>
211 </div>
212
213 <div class="stats">
214 <div class="stat">
215 <div class="stat-value">10K+</div>
216 <div class="stat-label">Active Users</div>
217 </div>
218 <div class="stat">
219 <div class="stat-value">99.9%</div>
220 <div class="stat-label">Uptime Guaranteed</div>
221 </div>
222 <div class="stat">
223 <div class="stat-value">50M+</div>
224 <div class="stat-label">Data Processed</div>
225 </div>
226 </div>
227 </div>
228 </div>
229<script src="/js/detect-antipatterns-browser.js"></script>
230</body>
231</html>