mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-14 15:16:35 +03:00
Paul BakausandClaude Opus 4.6
03a4433dcc
Major site restructure reflecting Impeccable's expanded value prop: - 01 The Foundation: 7 design dimensions, 212 guidelines grid - 02 The Language: merged periodic table + Commands in Action - 03 The Antidote: moved from position 1, anti-patterns + gallery - 04 Visual Mode: live iframe embed of detection overlay demo - Composite demo page combining purple gradients + side-tab cards - Updated hero copy (212 guidelines, 22 commands) - 7-item sticky nav, backward-compat anchor aliases Detection overlay improvements: - Staggered entrance animation (80ms per element) - Banner slides in from top - Skip body/html from overlay targeting (fixes scrollbar bug) - Banner overflow: hidden + maxWidth: 100vw - CLAUDE.md: document that browser script is generated, never edit directly Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
233 lines
5.9 KiB
HTML
233 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Visual Mode Demo</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: 60px 24px 24px;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.container {
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
background: linear-gradient(145deg, #2a1a4a 0%, #1a0a2e 100%);
|
|
border-radius: 24px;
|
|
padding: 32px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* orbs removed to reduce detector noise */
|
|
|
|
.content { position: relative; z-index: 1; }
|
|
|
|
nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, #a855f7, #ec4899);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 20px;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: rgba(255,255,255,0.6);
|
|
text-decoration: none;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.nav-cta {
|
|
background: linear-gradient(135deg, #8b5cf6, #a855f7) !important;
|
|
color: white !important;
|
|
padding: 8px 16px;
|
|
border-radius: 999px;
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.hero {
|
|
text-align: center;
|
|
padding: 0 20px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
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: 6px 14px;
|
|
border-radius: 999px;
|
|
font-size: 11px;
|
|
margin-bottom: 16px;
|
|
color: #c4b5fd;
|
|
}
|
|
|
|
.badge::before { content: '\2728'; }
|
|
|
|
h1 {
|
|
font-size: 36px;
|
|
font-weight: 800;
|
|
line-height: 1.1;
|
|
margin-bottom: 12px;
|
|
background: linear-gradient(135deg, #fff 0%, #c4b5fd 50%, #a855f7 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 14px;
|
|
color: rgba(255,255,255,0.5);
|
|
max-width: 400px;
|
|
margin: 0 auto 24px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Side-tab border cards */
|
|
.cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 12px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.card {
|
|
background: rgba(255,255,255,0.06);
|
|
border-radius: 12px;
|
|
padding: 20px 16px;
|
|
border-left: 4px solid #8b5cf6;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.card-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 8px;
|
|
background: linear-gradient(135deg, #8b5cf6, #a855f7);
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.card h3 {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.card p {
|
|
font-size: 11px;
|
|
color: rgba(255,255,255,0.5);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.card:nth-child(2) { border-left-color: #ec4899; }
|
|
.card:nth-child(2) .card-icon { background: linear-gradient(135deg, #ec4899, #f472b6); }
|
|
.card:nth-child(3) { border-left-color: #06b6d4; }
|
|
.card:nth-child(3) .card-icon { background: linear-gradient(135deg, #06b6d4, #22d3ee); }
|
|
|
|
/* Stats */
|
|
.stats {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 40px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid rgba(139,92,246,0.3);
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 24px;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, #a855f7, #ec4899);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 11px;
|
|
color: rgba(255,255,255,0.4);
|
|
margin-top: 2px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="content">
|
|
<nav>
|
|
<div class="logo">Synthwave.ai</div>
|
|
<div class="nav-links">
|
|
<a href="#">Features</a>
|
|
<a href="#">Pricing</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>
|
|
|
|
<div class="cards">
|
|
<div class="card">
|
|
<div class="card-icon">⚡</div>
|
|
<h3>Fast Performance</h3>
|
|
<p>Blazing fast inference with our optimized pipeline.</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">🔒</div>
|
|
<h3>Secure & Safe</h3>
|
|
<p>Enterprise-grade security with encrypted data.</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">📈</div>
|
|
<h3>Analytics</h3>
|
|
<p>Powerful insights to help you make better decisions.</p>
|
|
</div>
|
|
</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 Guaranteed</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value">50M+</div>
|
|
<div class="stat-label">Data Processed</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/js/detect-antipatterns-browser.js"></script>
|
|
</body>
|
|
</html>
|