mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-18 00:56:30 +03:00
Paul BakausandClaude Opus 4.6
d8803c8151
The skill sync wipes .claude/skills/ and re-copies from dist, deleting the generated browser script. Moved build-browser-detector.js to run AFTER the sync. Dev server's /js/* route now falls through to .claude/skills/critique/scripts/ for built artifacts. All fixture HTML references use /js/detect-antipatterns-browser.js (clean URL). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
242 lines
6.0 KiB
HTML
242 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Anti-Pattern: Purple Gradients Everywhere</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
min-height: 100vh;
|
|
background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 50%, #1a0a2e 100%);
|
|
color: white;
|
|
padding: 40px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 960px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
background: linear-gradient(145deg, #2a1a4a 0%, #1a0a2e 100%);
|
|
border-radius: 32px;
|
|
padding: 48px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Purple gradient orbs everywhere */
|
|
.orb {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(80px);
|
|
opacity: 0.6;
|
|
}
|
|
.orb-1 { width: 400px; height: 400px; background: linear-gradient(135deg, #8b5cf6, #a855f7); top: -100px; right: -100px; }
|
|
.orb-2 { width: 300px; height: 300px; background: linear-gradient(135deg, #7c3aed, #c084fc); bottom: -50px; left: -50px; }
|
|
.orb-3 { width: 200px; height: 200px; background: linear-gradient(135deg, #a855f7, #d946ef); top: 40%; left: 30%; }
|
|
|
|
.content {
|
|
position: relative;
|
|
z-index: 1;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Navigation */
|
|
nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 24px;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, #a855f7, #ec4899);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 32px;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: rgba(255,255,255,0.7);
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.nav-cta {
|
|
background: linear-gradient(135deg, #8b5cf6, #a855f7) !important;
|
|
color: white !important;
|
|
padding: 10px 20px;
|
|
border-radius: 999px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Hero */
|
|
.hero {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 0 60px;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(168, 85, 247, 0.2));
|
|
border: 1px solid rgba(168, 85, 247, 0.4);
|
|
padding: 8px 16px;
|
|
border-radius: 999px;
|
|
font-size: 13px;
|
|
margin: 0 auto 24px;
|
|
color: #c4b5fd;
|
|
}
|
|
|
|
.badge::before {
|
|
content: '✨';
|
|
}
|
|
|
|
h1 {
|
|
font-size: 64px;
|
|
font-weight: 800;
|
|
line-height: 1.1;
|
|
margin-bottom: 24px;
|
|
background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 50%, #a855f7 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 20px;
|
|
color: rgba(255,255,255,0.6);
|
|
max-width: 500px;
|
|
margin: 0 auto 40px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.cta-group {
|
|
display: flex;
|
|
gap: 16px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #c026d3 100%);
|
|
color: white;
|
|
padding: 16px 32px;
|
|
border-radius: 12px;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
border: none;
|
|
cursor: pointer;
|
|
box-shadow: 0 0 40px rgba(139, 92, 246, 0.5);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.1));
|
|
border: 1px solid rgba(168, 85, 247, 0.5);
|
|
color: #c4b5fd;
|
|
padding: 16px 32px;
|
|
border-radius: 12px;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Stats */
|
|
.stats {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 60px;
|
|
margin-top: 60px;
|
|
padding-top: 40px;
|
|
border-top: 1px solid rgba(139, 92, 246, 0.3);
|
|
}
|
|
|
|
.stat {
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 36px;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, #a855f7, #ec4899);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 14px;
|
|
color: rgba(255,255,255,0.5);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="orb orb-1"></div>
|
|
<div class="orb orb-2"></div>
|
|
<div class="orb orb-3"></div>
|
|
|
|
<div class="content">
|
|
<nav>
|
|
<div class="logo">Synthwave.ai</div>
|
|
<div class="nav-links">
|
|
<a href="#">Features</a>
|
|
<a href="#">Pricing</a>
|
|
<a href="#">About</a>
|
|
<a href="#" class="nav-cta">Get Started</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="hero">
|
|
<span class="badge">New: AI-Powered Everything</span>
|
|
<h1>Build the Future<br>With AI Magic</h1>
|
|
<p class="subtitle">Transform your workflow with our revolutionary AI platform. Purple gradients included.</p>
|
|
<div class="cta-group">
|
|
<button class="btn-primary">Start Free Trial</button>
|
|
<button class="btn-secondary">Watch Demo</button>
|
|
</div>
|
|
|
|
<div class="stats">
|
|
<div class="stat">
|
|
<div class="stat-value">10K+</div>
|
|
<div class="stat-label">Active Users</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value">99.9%</div>
|
|
<div class="stat-label">Uptime</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value">50M+</div>
|
|
<div class="stat-label">API Calls</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<script src="/js/detect-antipatterns-browser.js"></script>
|
|
</body>
|
|
</html>
|