mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-11 21:57:14 +03:00
Add antipattern examples and clean up simplify→distill rename
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
74c5cb3b41
commit
fd99c1f391
@@ -6,18 +6,25 @@
|
||||
"name": "vibe-design-plugins",
|
||||
"dependencies": {
|
||||
"motion": "^12.23.26",
|
||||
"playwright": "^1.57.0",
|
||||
},
|
||||
},
|
||||
},
|
||||
"packages": {
|
||||
"framer-motion": ["framer-motion@12.23.26", "", { "dependencies": { "motion-dom": "^12.23.23", "motion-utils": "^12.23.6", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-cPcIhgR42xBn1Uj+PzOyheMtZ73H927+uWPDVhUMqxy8UHt6Okavb6xIz9J/phFUHUj0OncR6UvMfJTXoc/LKA=="],
|
||||
|
||||
"fsevents": ["fsevents@2.3.2", "", { "os": "darwin" }, "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="],
|
||||
|
||||
"motion": ["motion@12.23.26", "", { "dependencies": { "framer-motion": "^12.23.26", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-Ll8XhVxY8LXMVYTCfme27WH2GjBrCIzY4+ndr5QKxsK+YwCtOi2B/oBi5jcIbik5doXuWT/4KKDOVAZJkeY5VQ=="],
|
||||
|
||||
"motion-dom": ["motion-dom@12.23.23", "", { "dependencies": { "motion-utils": "^12.23.6" } }, "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA=="],
|
||||
|
||||
"motion-utils": ["motion-utils@12.23.6", "", {}, "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ=="],
|
||||
|
||||
"playwright": ["playwright@1.57.0", "", { "dependencies": { "playwright-core": "1.57.0" }, "optionalDependencies": { "fsevents": "2.3.2" }, "bin": { "playwright": "cli.js" } }, "sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw=="],
|
||||
|
||||
"playwright-core": ["playwright-core@1.57.0", "", { "bin": { "playwright-core": "cli.js" } }, "sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ=="],
|
||||
|
||||
"tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -97,7 +97,7 @@ For each issue:
|
||||
- **What**: Name the problem clearly
|
||||
- **Why it matters**: How this hurts users or undermines goals
|
||||
- **Fix**: What to do about it (be concrete)
|
||||
- **Command**: Which command to use (`/polish`, `/simplify`, `/bolder`, `/quieter`, etc.)
|
||||
- **Command**: Which command to use (`/polish`, `/distill`, `/bolder`, `/quieter`, etc.)
|
||||
|
||||
### Minor Observations
|
||||
Quick notes on smaller issues worth addressing.
|
||||
|
||||
@@ -0,0 +1,222 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Anti-Pattern: Bad Contrast Choices</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: #1e1e1e;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 1080px;
|
||||
height: 1080px;
|
||||
margin: 0 auto;
|
||||
background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 100%);
|
||||
border-radius: 24px;
|
||||
padding: 48px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Header with gray text on colored bg - BAD */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 48px;
|
||||
font-weight: 800;
|
||||
color: #808080; /* Gray on blue/purple - very hard to read */
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 18px;
|
||||
color: #666666; /* Even worse gray */
|
||||
}
|
||||
|
||||
/* Colored cards with gray bg labels - THE PROBLEM */
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card.blue { background: #2563eb; }
|
||||
.card.green { background: #16a34a; }
|
||||
.card.orange { background: #ea580c; }
|
||||
|
||||
/* Gray background labels on colored cards - looks terrible */
|
||||
.card-label {
|
||||
display: inline-block;
|
||||
background: #9ca3af; /* Gray bg on colored card */
|
||||
color: #4b5563; /* Gray text on gray bg */
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 28px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #ffffff; /* Pure white - harsh */
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.card p {
|
||||
font-size: 14px;
|
||||
color: #555555; /* Dark gray on colored bg - hard to read */
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Stats section with absolute black bg */
|
||||
.stats {
|
||||
background: #000000; /* Absolute black */
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.stat {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
color: #ffffff; /* Pure white */
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #444444; /* Dark gray on black - nearly invisible */
|
||||
}
|
||||
|
||||
/* Footer area */
|
||||
.footer {
|
||||
background: #f0f0f0; /* Light gray bg */
|
||||
border-radius: 16px;
|
||||
padding: 28px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
color: #a0a0a0; /* Gray text on gray bg - no contrast */
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
background: #ffffff; /* Pure white btn */
|
||||
color: #000000; /* Pure black text */
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Anti-pattern label */
|
||||
.antipattern-label {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0,0,0,0.9);
|
||||
color: #f87171;
|
||||
padding: 8px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
z-index: 10;
|
||||
border: 1px solid rgba(248, 113, 113, 0.3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>Welcome to Our Platform</h1>
|
||||
<p>The best solution for modern teams and businesses</p>
|
||||
</div>
|
||||
|
||||
<div class="cards">
|
||||
<div class="card blue">
|
||||
<span class="card-label">Popular</span>
|
||||
<div class="card-icon">⚡</div>
|
||||
<h3>Fast Performance</h3>
|
||||
<p>Built for speed with optimized code and efficient algorithms.</p>
|
||||
</div>
|
||||
<div class="card green">
|
||||
<span class="card-label">New</span>
|
||||
<div class="card-icon">🔒</div>
|
||||
<h3>Secure & Safe</h3>
|
||||
<p>Enterprise-grade security with encrypted data storage.</p>
|
||||
</div>
|
||||
<div class="card orange">
|
||||
<span class="card-label">Featured</span>
|
||||
<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 class="footer">
|
||||
<span class="footer-text">Ready to get started? Sign up today and join thousands of happy users.</span>
|
||||
<button class="footer-btn">Get Started</button>
|
||||
</div>
|
||||
|
||||
<div class="antipattern-label">🚨 AI SLOP: Gray on Color, Gray Labels, Absolute Black/White</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,390 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Anti-Pattern: Cardocalypse</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
min-height: 100vh;
|
||||
background: #f3f4f6;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 1080px;
|
||||
height: 1080px;
|
||||
margin: 0 auto;
|
||||
background: #e5e7eb;
|
||||
border-radius: 24px;
|
||||
padding: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Page card */
|
||||
.page-card {
|
||||
background: #f9fafb;
|
||||
border-radius: 20px;
|
||||
padding: 28px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
/* Header card */
|
||||
.header-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 20px 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.logo-card {
|
||||
background: #f3f4f6;
|
||||
border-radius: 10px;
|
||||
padding: 10px 16px;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.nav-card {
|
||||
background: #f3f4f6;
|
||||
border-radius: 10px;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-item-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-item-card.active {
|
||||
background: #111;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Main content area */
|
||||
.content-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
/* Sidebar card */
|
||||
.sidebar-card {
|
||||
background: #f9fafb;
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.sidebar-item-card {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 12px 14px;
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.sidebar-item-card.active {
|
||||
background: #eef2ff;
|
||||
color: #4f46e5;
|
||||
border: 1px solid #c7d2fe;
|
||||
}
|
||||
|
||||
/* Main panel card */
|
||||
.main-panel-card {
|
||||
background: #f9fafb;
|
||||
border-radius: 14px;
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.section-title-card {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 14px 18px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: #1f2937;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
/* Stats row */
|
||||
.stats-row-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: #f9fafb;
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-value-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #111;
|
||||
margin-bottom: 8px;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 11px;
|
||||
color: #9ca3af;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* List card */
|
||||
.list-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.list-item-card {
|
||||
background: #f9fafb;
|
||||
border-radius: 10px;
|
||||
padding: 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-item-info-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 10px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.avatar-card {
|
||||
background: #e5e7eb;
|
||||
border-radius: 6px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.list-item-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.list-item-actions-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.action-btn-card {
|
||||
background: #f3f4f6;
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
font-size: 11px;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Nesting depth indicator */
|
||||
.depth-legend {
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
right: 48px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.depth-title {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.depth-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 11px;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.depth-box {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.depth-1 { background: #e5e7eb; }
|
||||
.depth-2 { background: #f9fafb; }
|
||||
.depth-3 { background: #ffffff; }
|
||||
.depth-4 { background: #f9fafb; border: 1px solid #e5e7eb; }
|
||||
.depth-5 { background: #ffffff; border: 1px solid #e5e7eb; }
|
||||
|
||||
/* Anti-pattern label */
|
||||
.antipattern-label {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0,0,0,0.9);
|
||||
color: #f87171;
|
||||
padding: 8px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
z-index: 10;
|
||||
border: 1px solid rgba(248, 113, 113, 0.3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="depth-legend">
|
||||
<div class="depth-title">Nesting Depth</div>
|
||||
<div class="depth-item"><div class="depth-box depth-1"></div> Level 1</div>
|
||||
<div class="depth-item"><div class="depth-box depth-2"></div> Level 2</div>
|
||||
<div class="depth-item"><div class="depth-box depth-3"></div> Level 3</div>
|
||||
<div class="depth-item"><div class="depth-box depth-4"></div> Level 4</div>
|
||||
<div class="depth-item"><div class="depth-box depth-5"></div> Level 5</div>
|
||||
</div>
|
||||
|
||||
<div class="page-card">
|
||||
<div class="header-card">
|
||||
<div class="logo-card">Dashboard</div>
|
||||
<div class="nav-card">
|
||||
<div class="nav-item-card active">Overview</div>
|
||||
<div class="nav-item-card">Analytics</div>
|
||||
<div class="nav-item-card">Settings</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-card">
|
||||
<div class="sidebar-card">
|
||||
<div class="sidebar-item-card active">Dashboard</div>
|
||||
<div class="sidebar-item-card">Projects</div>
|
||||
<div class="sidebar-item-card">Team</div>
|
||||
<div class="sidebar-item-card">Reports</div>
|
||||
</div>
|
||||
|
||||
<div class="main-panel-card">
|
||||
<div class="section-title-card">Overview</div>
|
||||
|
||||
<div class="stats-row-card">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value-card">2,847</div>
|
||||
<div class="stat-label">Total Users</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value-card">$48.2K</div>
|
||||
<div class="stat-label">Revenue</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value-card">94.2%</div>
|
||||
<div class="stat-label">Uptime</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-card">
|
||||
<div class="list-item-card">
|
||||
<div class="list-item-info-card">
|
||||
<div class="avatar-card"></div>
|
||||
<span class="list-item-name">John Smith</span>
|
||||
</div>
|
||||
<div class="list-item-actions-card">
|
||||
<div class="action-btn-card">Edit</div>
|
||||
<div class="action-btn-card">Delete</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item-card">
|
||||
<div class="list-item-info-card">
|
||||
<div class="avatar-card"></div>
|
||||
<span class="list-item-name">Sarah Johnson</span>
|
||||
</div>
|
||||
<div class="list-item-actions-card">
|
||||
<div class="action-btn-card">Edit</div>
|
||||
<div class="action-btn-card">Delete</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item-card">
|
||||
<div class="list-item-info-card">
|
||||
<div class="avatar-card"></div>
|
||||
<span class="list-item-name">Mike Davis</span>
|
||||
</div>
|
||||
<div class="list-item-actions-card">
|
||||
<div class="action-btn-card">Edit</div>
|
||||
<div class="action-btn-card">Delete</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="antipattern-label">🚨 AI SLOP: Cardocalypse (Cards Within Cards)</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,332 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Anti-Pattern: Inter Font Everywhere</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 1080px;
|
||||
height: 1080px;
|
||||
margin: 0 auto;
|
||||
background: #ffffff;
|
||||
border-radius: 24px;
|
||||
padding: 48px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #111;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-cta {
|
||||
background: #111;
|
||||
color: #fff !important;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Hero */
|
||||
.hero {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: #f0f0f0;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
width: fit-content;
|
||||
margin-bottom: 24px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 56px;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 20px;
|
||||
color: #111;
|
||||
letter-spacing: -2px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 32px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.cta-group {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #111;
|
||||
color: white;
|
||||
padding: 14px 28px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #e0e0e0;
|
||||
color: #333;
|
||||
padding: 14px 28px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Features */
|
||||
.features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
margin-top: 48px;
|
||||
padding-top: 40px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.feature {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.feature h3 {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: #111;
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
.feature p {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Testimonial */
|
||||
.testimonial {
|
||||
background: #fafafa;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.testimonial-text {
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
line-height: 1.6;
|
||||
font-style: italic;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.testimonial-author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.testimonial-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: #ddd;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.testimonial-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.testimonial-role {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Font specimen overlay */
|
||||
.font-specimen {
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
right: 48px;
|
||||
background: #111;
|
||||
color: #fff;
|
||||
padding: 16px 24px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.font-specimen-label {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: #888;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.font-specimen-name {
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.font-specimen-weights {
|
||||
font-size: 9px;
|
||||
color: #666;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* Anti-pattern label */
|
||||
.antipattern-label {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0,0,0,0.9);
|
||||
color: #f87171;
|
||||
padding: 8px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
z-index: 10;
|
||||
border: 1px solid rgba(248, 113, 113, 0.3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<nav>
|
||||
<div class="logo">genericstartup</div>
|
||||
<div class="nav-links">
|
||||
<a href="#">Product</a>
|
||||
<a href="#">Features</a>
|
||||
<a href="#">Pricing</a>
|
||||
<a href="#" class="nav-cta">Sign Up</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="font-specimen">
|
||||
<div class="font-specimen-label">Font Used</div>
|
||||
<div class="font-specimen-name">Inter</div>
|
||||
<div class="font-specimen-weights">400 · 500 · 600 · 700 · 800</div>
|
||||
</div>
|
||||
|
||||
<div class="hero">
|
||||
<span class="badge">Now Available</span>
|
||||
<h1>The platform for modern teams</h1>
|
||||
<p class="subtitle">Streamline your workflow with our all-in-one solution. Built for teams who want to move fast and ship faster.</p>
|
||||
<div class="cta-group">
|
||||
<button class="btn-primary">Get Started Free</button>
|
||||
<button class="btn-secondary">Book a Demo</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="features">
|
||||
<div class="feature">
|
||||
<div class="feature-icon">⚡</div>
|
||||
<h3>Lightning Fast</h3>
|
||||
<p>Built for speed from the ground up. Everything loads instantly.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="feature-icon">🔒</div>
|
||||
<h3>Secure by Default</h3>
|
||||
<p>Enterprise-grade security with end-to-end encryption.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="feature-icon">🔗</div>
|
||||
<h3>Integrations</h3>
|
||||
<p>Connect with 100+ tools your team already uses.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="testimonial">
|
||||
<p class="testimonial-text">"This product has completely transformed how our team works. We've seen a 40% increase in productivity."</p>
|
||||
<div class="testimonial-author">
|
||||
<div class="testimonial-avatar"></div>
|
||||
<div>
|
||||
<div class="testimonial-name">Sarah Johnson</div>
|
||||
<div class="testimonial-role">Head of Product, TechCorp</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="antipattern-label">🚨 AI SLOP: Inter Font Everywhere</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,337 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Anti-Pattern: Layout Templates</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 1080px;
|
||||
height: 1080px;
|
||||
margin: 0 auto;
|
||||
background: #ffffff;
|
||||
border-radius: 24px;
|
||||
padding: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
/* Template indicator */
|
||||
.template-badge {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
border: 1px solid #fcd34d;
|
||||
}
|
||||
|
||||
/* THE TEMPLATE: Hero Metric Layout */
|
||||
.hero-metric {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
margin-bottom: 24px;
|
||||
color: white;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-metric::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
.hero-metric-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-metric-main {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.hero-metric-label {
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.hero-metric-value {
|
||||
font-size: 72px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.hero-metric-change {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: rgba(255,255,255,0.2);
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hero-metric-supporting {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.supporting-stat {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.supporting-stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.supporting-stat-label {
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Repeat the same template 3 more times */
|
||||
.metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.metric-template {
|
||||
border-radius: 16px;
|
||||
padding: 28px;
|
||||
color: white;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.metric-template::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -30%;
|
||||
right: -30%;
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
.metric-template.blue { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
|
||||
.metric-template.green { background: linear-gradient(135deg, #22c55e 0%, #15803d 100%); }
|
||||
.metric-template.orange { background: linear-gradient(135deg, #f97316 0%, #c2410c 100%); }
|
||||
.metric-template.pink { background: linear-gradient(135deg, #ec4899 0%, #be185d 100%); }
|
||||
|
||||
.metric-template-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.metric-template-label {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.metric-template-value {
|
||||
font-size: 42px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.metric-template-change {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: rgba(255,255,255,0.2);
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.metric-template-row {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.metric-template-sub {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.metric-template-sub-value {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.metric-template-sub-label {
|
||||
font-size: 10px;
|
||||
opacity: 0.7;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Anti-pattern label */
|
||||
.antipattern-label {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0,0,0,0.9);
|
||||
color: #f87171;
|
||||
padding: 8px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
z-index: 10;
|
||||
border: 1px solid rgba(248, 113, 113, 0.3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="template-badge">Same layout × 5</div>
|
||||
|
||||
<!-- THE TEMPLATE: Hero Metric Layout -->
|
||||
<div class="hero-metric">
|
||||
<div class="hero-metric-content">
|
||||
<div class="hero-metric-main">
|
||||
<div class="hero-metric-label">Total Revenue</div>
|
||||
<div class="hero-metric-value">$2.4M</div>
|
||||
<div class="hero-metric-change">↑ +24.5% from last month</div>
|
||||
</div>
|
||||
<div class="hero-metric-supporting">
|
||||
<div class="supporting-stat">
|
||||
<div class="supporting-stat-value">12.8K</div>
|
||||
<div class="supporting-stat-label">Customers</div>
|
||||
</div>
|
||||
<div class="supporting-stat">
|
||||
<div class="supporting-stat-value">$187</div>
|
||||
<div class="supporting-stat-label">Avg. Order</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Same template repeated 4 more times -->
|
||||
<div class="metrics-grid">
|
||||
<div class="metric-template blue">
|
||||
<div class="metric-template-content">
|
||||
<div class="metric-template-label">Active Users</div>
|
||||
<div class="metric-template-value">48.2K</div>
|
||||
<div class="metric-template-change">↑ +12.3%</div>
|
||||
<div class="metric-template-row">
|
||||
<div class="metric-template-sub">
|
||||
<div class="metric-template-sub-value">32.1K</div>
|
||||
<div class="metric-template-sub-label">Mobile</div>
|
||||
</div>
|
||||
<div class="metric-template-sub">
|
||||
<div class="metric-template-sub-value">16.1K</div>
|
||||
<div class="metric-template-sub-label">Desktop</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-template green">
|
||||
<div class="metric-template-content">
|
||||
<div class="metric-template-label">Conversion Rate</div>
|
||||
<div class="metric-template-value">8.7%</div>
|
||||
<div class="metric-template-change">↑ +2.1%</div>
|
||||
<div class="metric-template-row">
|
||||
<div class="metric-template-sub">
|
||||
<div class="metric-template-sub-value">12.4%</div>
|
||||
<div class="metric-template-sub-label">Returning</div>
|
||||
</div>
|
||||
<div class="metric-template-sub">
|
||||
<div class="metric-template-sub-value">5.2%</div>
|
||||
<div class="metric-template-sub-label">New</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-template orange">
|
||||
<div class="metric-template-content">
|
||||
<div class="metric-template-label">Avg. Session</div>
|
||||
<div class="metric-template-value">4:32</div>
|
||||
<div class="metric-template-change">↓ -0.8%</div>
|
||||
<div class="metric-template-row">
|
||||
<div class="metric-template-sub">
|
||||
<div class="metric-template-sub-value">5.2</div>
|
||||
<div class="metric-template-sub-label">Pages/Visit</div>
|
||||
</div>
|
||||
<div class="metric-template-sub">
|
||||
<div class="metric-template-sub-value">32%</div>
|
||||
<div class="metric-template-sub-label">Bounce</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-template pink">
|
||||
<div class="metric-template-content">
|
||||
<div class="metric-template-label">NPS Score</div>
|
||||
<div class="metric-template-value">72</div>
|
||||
<div class="metric-template-change">↑ +5 pts</div>
|
||||
<div class="metric-template-row">
|
||||
<div class="metric-template-sub">
|
||||
<div class="metric-template-sub-value">84%</div>
|
||||
<div class="metric-template-sub-label">Promoters</div>
|
||||
</div>
|
||||
<div class="metric-template-sub">
|
||||
<div class="metric-template-sub-value">4%</div>
|
||||
<div class="metric-template-sub-label">Detractors</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="antipattern-label">🚨 AI SLOP: Hero Metric Layout Template (×5)</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,335 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Anti-Pattern: Lazy "Cool" Design</title>
|
||||
<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">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
min-height: 100vh;
|
||||
background: #0a0a0a;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 1080px;
|
||||
height: 1080px;
|
||||
margin: 0 auto;
|
||||
background: linear-gradient(135deg, #0f0f23 0%, #0a0a1a 100%);
|
||||
border-radius: 24px;
|
||||
padding: 48px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Glow orbs in background */
|
||||
.glow-orb {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(100px);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.glow-1 {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: #00ffff;
|
||||
top: -100px;
|
||||
right: -100px;
|
||||
}
|
||||
|
||||
.glow-2 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: #ff00ff;
|
||||
bottom: -50px;
|
||||
left: -50px;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Nav with glassmorphism */
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 48px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #00ffff;
|
||||
text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.nav-cta {
|
||||
background: linear-gradient(135deg, #00ffff, #00ccff) !important;
|
||||
color: #000 !important;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 0 30px rgba(0, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
/* Hero with neon */
|
||||
.hero {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 0 60px;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: rgba(0, 255, 255, 0.1);
|
||||
border: 1px solid rgba(0, 255, 255, 0.3);
|
||||
padding: 8px 16px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
margin: 0 auto 24px;
|
||||
color: #00ffff;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 56px;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 24px;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 40px rgba(0, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
h1 span {
|
||||
color: #00ffff;
|
||||
text-shadow: 0 0 30px rgba(0, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 16px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
max-width: 500px;
|
||||
margin: 0 auto 40px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.cta-group {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
background: linear-gradient(135deg, #00ffff 0%, #00ccff 100%);
|
||||
color: #000;
|
||||
padding: 16px 32px;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 40px rgba(0, 255, 255, 0.5);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(0, 255, 255, 0.3);
|
||||
color: #00ffff;
|
||||
padding: 16px 32px;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Glass cards */
|
||||
.cards {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
flex: 1;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.glass-card-icon {
|
||||
font-size: 28px;
|
||||
margin-bottom: 12px;
|
||||
filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.5));
|
||||
}
|
||||
|
||||
.glass-card h3 {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 14px;
|
||||
color: #00ffff;
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.glass-card p {
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Terminal-style element */
|
||||
.terminal {
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
right: 48px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border: 1px solid rgba(0, 255, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.terminal-header {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.terminal-line {
|
||||
color: #00ffff;
|
||||
}
|
||||
|
||||
.terminal-line::before {
|
||||
content: '> ';
|
||||
color: #ff00ff;
|
||||
}
|
||||
|
||||
/* Anti-pattern label */
|
||||
.antipattern-label {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0,0,0,0.9);
|
||||
color: #f87171;
|
||||
padding: 8px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
z-index: 10;
|
||||
border: 1px solid rgba(248, 113, 113, 0.3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="glow-orb glow-1"></div>
|
||||
<div class="glow-orb glow-2"></div>
|
||||
|
||||
<div class="terminal">
|
||||
<div class="terminal-header">~/hacker-vibes</div>
|
||||
<div class="terminal-line">npm run look-cool</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<nav>
|
||||
<div class="logo"><CYBER/></div>
|
||||
<div class="nav-links">
|
||||
<a href="#">Features</a>
|
||||
<a href="#">Docs</a>
|
||||
<a href="#">Pricing</a>
|
||||
<a href="#" class="nav-cta">Launch</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="hero">
|
||||
<span class="hero-badge">// Now in Beta</span>
|
||||
<h1>Build the Future<br>with <span>Cyber Tech</span></h1>
|
||||
<p class="subtitle">const future = await buildWithAI(); // Neon glow makes everything 10x more futuristic</p>
|
||||
<div class="cta-group">
|
||||
<button class="btn-primary">Initialize_</button>
|
||||
<button class="btn-secondary">View_Code</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cards">
|
||||
<div class="glass-card">
|
||||
<div class="glass-card-icon">⚡</div>
|
||||
<h3>Lightning</h3>
|
||||
<p>Blazing fast with quantum acceleration</p>
|
||||
</div>
|
||||
<div class="glass-card">
|
||||
<div class="glass-card-icon">🔮</div>
|
||||
<h3>AI Powered</h3>
|
||||
<p>Neural networks do the heavy lifting</p>
|
||||
</div>
|
||||
<div class="glass-card">
|
||||
<div class="glass-card-icon">🌐</div>
|
||||
<h3>Web3 Ready</h3>
|
||||
<p>Decentralized by default</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="antipattern-label">🚨 AI SLOP: Lazy "Cool" (Glass, Glow, Neon, Mono)</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,393 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Anti-Pattern: Lazy "Impact" Design</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
min-height: 100vh;
|
||||
background: #0f0f0f;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 1080px;
|
||||
height: 1080px;
|
||||
margin: 0 auto;
|
||||
background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
|
||||
border-radius: 24px;
|
||||
padding: 48px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Animated gradient background */
|
||||
.bg-gradient {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.15) 0%, transparent 50%),
|
||||
radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
|
||||
animation: pulse 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 0.5; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Hero with gradient text */
|
||||
.hero {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.hero-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.2));
|
||||
border: 1px solid rgba(139, 92, 246, 0.3);
|
||||
padding: 8px 20px;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
color: #c4b5fd;
|
||||
margin-bottom: 24px;
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-5px); }
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 64px;
|
||||
font-weight: 900;
|
||||
line-height: 1.0;
|
||||
margin-bottom: 16px;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #a78bfa 50%, #ec4899 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: gradient-shift 5s ease infinite;
|
||||
background-size: 200% 200%;
|
||||
}
|
||||
|
||||
@keyframes gradient-shift {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
/* Metrics with sparklines */
|
||||
.metrics {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
flex: 1;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
animation: card-pop 0.5s ease-out;
|
||||
}
|
||||
|
||||
@keyframes card-pop {
|
||||
0% { transform: scale(0.9); opacity: 0; }
|
||||
100% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
.metric-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.metric-change {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
animation: bounce 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-3px); }
|
||||
}
|
||||
|
||||
.metric-change.positive {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
.metric-change.negative {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, #fff, #a78bfa);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* SVG Sparkline */
|
||||
.sparkline {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.sparkline-path {
|
||||
fill: none;
|
||||
stroke: url(#sparkline-gradient);
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.sparkline-area {
|
||||
fill: url(#sparkline-area-gradient);
|
||||
}
|
||||
|
||||
/* CTA with elastic animation */
|
||||
.cta-section {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||
color: white;
|
||||
padding: 16px 40px;
|
||||
border-radius: 12px;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 40px rgba(139, 92, 246, 0.4);
|
||||
animation: elastic 2s ease-in-out infinite;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@keyframes elastic {
|
||||
0%, 100% { transform: scale(1); }
|
||||
25% { transform: scale(1.05); }
|
||||
50% { transform: scale(0.98); }
|
||||
75% { transform: scale(1.02); }
|
||||
}
|
||||
|
||||
.btn-primary::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
|
||||
animation: shimmer 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
/* Features grid */
|
||||
.features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.feature {
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
.feature:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 20px 40px rgba(139, 92, 246, 0.2);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 28px;
|
||||
margin-bottom: 12px;
|
||||
animation: wiggle 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes wiggle {
|
||||
0%, 100% { transform: rotate(0deg); }
|
||||
25% { transform: rotate(5deg); }
|
||||
75% { transform: rotate(-5deg); }
|
||||
}
|
||||
|
||||
.feature h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #fff, #c4b5fd);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.feature p {
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Anti-pattern label */
|
||||
.antipattern-label {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0,0,0,0.9);
|
||||
color: #f87171;
|
||||
padding: 8px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
z-index: 10;
|
||||
border: 1px solid rgba(248, 113, 113, 0.3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="bg-gradient"></div>
|
||||
|
||||
<svg width="0" height="0">
|
||||
<defs>
|
||||
<linearGradient id="sparkline-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#8b5cf6" />
|
||||
<stop offset="100%" stop-color="#ec4899" />
|
||||
</linearGradient>
|
||||
<linearGradient id="sparkline-area-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="rgba(139, 92, 246, 0.3)" />
|
||||
<stop offset="100%" stop-color="rgba(139, 92, 246, 0)" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="content">
|
||||
<div class="hero">
|
||||
<span class="hero-label">✨ Launching Soon</span>
|
||||
<h1>10X Your Growth</h1>
|
||||
<p class="subtitle">Transform your metrics with AI-powered insights</p>
|
||||
</div>
|
||||
|
||||
<div class="metrics">
|
||||
<div class="metric-card">
|
||||
<div class="metric-header">
|
||||
<span class="metric-label">Revenue</span>
|
||||
<span class="metric-change positive">+127%</span>
|
||||
</div>
|
||||
<div class="metric-value">$2.4M</div>
|
||||
<svg class="sparkline" viewBox="0 0 200 40">
|
||||
<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"/>
|
||||
<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"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-header">
|
||||
<span class="metric-label">Users</span>
|
||||
<span class="metric-change positive">+89%</span>
|
||||
</div>
|
||||
<div class="metric-value">48.2K</div>
|
||||
<svg class="sparkline" viewBox="0 0 200 40">
|
||||
<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"/>
|
||||
<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"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-header">
|
||||
<span class="metric-label">Engagement</span>
|
||||
<span class="metric-change negative">-12%</span>
|
||||
</div>
|
||||
<div class="metric-value">94.2%</div>
|
||||
<svg class="sparkline" viewBox="0 0 200 40">
|
||||
<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"/>
|
||||
<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"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cta-section">
|
||||
<button class="btn-primary">Start Growing Now</button>
|
||||
</div>
|
||||
|
||||
<div class="features">
|
||||
<div class="feature">
|
||||
<div class="feature-icon">📈</div>
|
||||
<h3>Analytics</h3>
|
||||
<p>Real-time insights</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="feature-icon">🚀</div>
|
||||
<h3>Growth</h3>
|
||||
<p>Automated scaling</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="feature-icon">💎</div>
|
||||
<h3>Premium</h3>
|
||||
<p>Enterprise ready</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="feature-icon">⚡</div>
|
||||
<h3>Speed</h3>
|
||||
<p>Lightning fast</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="antipattern-label">🚨 AI SLOP: Lazy "Impact" (Gradients, Sparklines, Elastic)</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,214 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Anti-Pattern: Massive Icons in Cards</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
min-height: 100vh;
|
||||
background: #f8fafc;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 1080px;
|
||||
height: 1080px;
|
||||
margin: 0 auto;
|
||||
background: #ffffff;
|
||||
border-radius: 24px;
|
||||
padding: 48px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 16px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
/* Features grid */
|
||||
.features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* THE PROBLEM: Cards with massive left-aligned icons */
|
||||
.feature-card {
|
||||
background: #f8fafc;
|
||||
border-radius: 16px;
|
||||
padding: 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/* Oversized icon container */
|
||||
.feature-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.feature-icon svg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
stroke: #3b82f6;
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
/* Different colored backgrounds */
|
||||
.feature-card:nth-child(2) .feature-icon {
|
||||
background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
|
||||
}
|
||||
.feature-card:nth-child(2) .feature-icon svg { stroke: #a855f7; }
|
||||
|
||||
.feature-card:nth-child(3) .feature-icon {
|
||||
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
|
||||
}
|
||||
.feature-card:nth-child(3) .feature-icon svg { stroke: #22c55e; }
|
||||
|
||||
.feature-card:nth-child(4) .feature-icon {
|
||||
background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
|
||||
}
|
||||
.feature-card:nth-child(4) .feature-icon svg { stroke: #f97316; }
|
||||
|
||||
.feature-card:nth-child(5) .feature-icon {
|
||||
background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
|
||||
}
|
||||
.feature-card:nth-child(5) .feature-icon svg { stroke: #ec4899; }
|
||||
|
||||
.feature-card:nth-child(6) .feature-icon {
|
||||
background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
|
||||
}
|
||||
.feature-card:nth-child(6) .feature-icon svg { stroke: #06b6d4; }
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
margin-bottom: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
line-height: 1.6;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Anti-pattern label */
|
||||
.antipattern-label {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0,0,0,0.9);
|
||||
color: #f87171;
|
||||
padding: 8px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
z-index: 10;
|
||||
border: 1px solid rgba(248, 113, 113, 0.3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>Why Choose Us</h1>
|
||||
<p>Everything you need to build amazing products</p>
|
||||
</div>
|
||||
|
||||
<div class="features">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<i data-lucide="zap"></i>
|
||||
</div>
|
||||
<h3>Lightning Fast</h3>
|
||||
<p>Built for speed and performance from the ground up.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<i data-lucide="shield"></i>
|
||||
</div>
|
||||
<h3>Secure</h3>
|
||||
<p>Enterprise-grade security for your peace of mind.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<i data-lucide="refresh-cw"></i>
|
||||
</div>
|
||||
<h3>Automated</h3>
|
||||
<p>Automate repetitive tasks and save time.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<i data-lucide="layers"></i>
|
||||
</div>
|
||||
<h3>Scalable</h3>
|
||||
<p>Grows with your business needs seamlessly.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<i data-lucide="heart"></i>
|
||||
</div>
|
||||
<h3>User Friendly</h3>
|
||||
<p>Intuitive interface that anyone can use.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<i data-lucide="bar-chart-3"></i>
|
||||
</div>
|
||||
<h3>Analytics</h3>
|
||||
<p>Powerful insights to drive decisions.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="antipattern-label">🚨 AI SLOP: Massive Rounded Lucide Icons in Cards</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,451 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Anti-Pattern: Modal Abuse</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
min-height: 100vh;
|
||||
background: #1e1e1e;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 1080px;
|
||||
height: 1080px;
|
||||
margin: 0 auto;
|
||||
background: #f8fafc;
|
||||
border-radius: 24px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Base app UI (dimmed) */
|
||||
.app-ui {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
filter: brightness(0.4);
|
||||
}
|
||||
|
||||
.app-header {
|
||||
background: white;
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.app-logo {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.app-nav {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.app-nav a {
|
||||
color: #6b7280;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.app-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
width: 200px;
|
||||
background: white;
|
||||
border-right: 1px solid #e5e7eb;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.sidebar-item {
|
||||
padding: 10px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.sidebar-item.active {
|
||||
background: #f3f4f6;
|
||||
color: #111;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
flex: 1;
|
||||
padding: 24px;
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.app-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.app-card h3 {
|
||||
font-size: 16px;
|
||||
color: #111;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.app-card p {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* Modal backdrop */
|
||||
.modal-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Large modal with advanced settings */
|
||||
.modal {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 600px;
|
||||
max-height: 800px;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 25px 50px rgba(0,0,0,0.3);
|
||||
overflow: hidden;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
background: #f3f4f6;
|
||||
color: #6b7280;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 24px;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Complex settings form that should be on a dedicated page */
|
||||
.settings-section {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.settings-section h4 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.setting-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.setting-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.setting-label {
|
||||
font-size: 14px;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.setting-desc {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
background: #e5e7eb;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle.on {
|
||||
background: #3b82f6;
|
||||
}
|
||||
|
||||
.toggle::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.toggle.on::after {
|
||||
left: 22px;
|
||||
}
|
||||
|
||||
.select-input {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
color: #374151;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.text-input {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: white;
|
||||
border: 1px solid #d1d5db;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Anti-pattern label */
|
||||
.antipattern-label {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0,0,0,0.9);
|
||||
color: #f87171;
|
||||
padding: 8px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
z-index: 200;
|
||||
border: 1px solid rgba(248, 113, 113, 0.3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- Base app -->
|
||||
<div class="app-ui">
|
||||
<div class="app-header">
|
||||
<div class="app-logo">Dashboard</div>
|
||||
<div class="app-nav">
|
||||
<a href="#">Home</a>
|
||||
<a href="#">Projects</a>
|
||||
<a href="#">Team</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-content">
|
||||
<div class="app-sidebar">
|
||||
<div class="sidebar-item active">Overview</div>
|
||||
<div class="sidebar-item">Analytics</div>
|
||||
<div class="sidebar-item">Reports</div>
|
||||
<div class="sidebar-item">Settings</div>
|
||||
</div>
|
||||
<div class="app-main">
|
||||
<div class="app-card">
|
||||
<h3>Recent Activity</h3>
|
||||
<p>Your recent actions will appear here...</p>
|
||||
</div>
|
||||
<div class="app-card">
|
||||
<h3>Quick Stats</h3>
|
||||
<p>Overview of your account metrics...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-backdrop"></div>
|
||||
|
||||
<!-- Advanced settings crammed into a modal instead of a proper settings page -->
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">Advanced Settings</span>
|
||||
<button class="modal-close">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="settings-section">
|
||||
<h4>Notifications</h4>
|
||||
<div class="setting-row">
|
||||
<div>
|
||||
<div class="setting-label">Email notifications</div>
|
||||
<div class="setting-desc">Receive updates via email</div>
|
||||
</div>
|
||||
<div class="toggle on"></div>
|
||||
</div>
|
||||
<div class="setting-row">
|
||||
<div>
|
||||
<div class="setting-label">Push notifications</div>
|
||||
<div class="setting-desc">Browser push alerts</div>
|
||||
</div>
|
||||
<div class="toggle"></div>
|
||||
</div>
|
||||
<div class="setting-row">
|
||||
<div>
|
||||
<div class="setting-label">Notification frequency</div>
|
||||
</div>
|
||||
<select class="select-input">
|
||||
<option>Instant</option>
|
||||
<option>Daily digest</option>
|
||||
<option>Weekly</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<h4>Privacy & Security</h4>
|
||||
<div class="setting-row">
|
||||
<div>
|
||||
<div class="setting-label">Two-factor authentication</div>
|
||||
<div class="setting-desc">Add extra security</div>
|
||||
</div>
|
||||
<div class="toggle on"></div>
|
||||
</div>
|
||||
<div class="setting-row">
|
||||
<div>
|
||||
<div class="setting-label">Session timeout</div>
|
||||
</div>
|
||||
<select class="select-input">
|
||||
<option>30 minutes</option>
|
||||
<option>1 hour</option>
|
||||
<option>4 hours</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="setting-row">
|
||||
<div>
|
||||
<div class="setting-label">Activity logging</div>
|
||||
<div class="setting-desc">Track account activity</div>
|
||||
</div>
|
||||
<div class="toggle on"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<h4>Data & Export</h4>
|
||||
<div class="setting-row">
|
||||
<div>
|
||||
<div class="setting-label">Auto-backup</div>
|
||||
<div class="setting-desc">Automatic data backups</div>
|
||||
</div>
|
||||
<div class="toggle"></div>
|
||||
</div>
|
||||
<div class="setting-row">
|
||||
<div>
|
||||
<div class="setting-label">Export format</div>
|
||||
</div>
|
||||
<select class="select-input">
|
||||
<option>CSV</option>
|
||||
<option>JSON</option>
|
||||
<option>Excel</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<h4>API Settings</h4>
|
||||
<div class="setting-row">
|
||||
<div>
|
||||
<div class="setting-label">API Key</div>
|
||||
</div>
|
||||
<input type="text" class="text-input" value="sk-xxxxx-xxxxx" readonly>
|
||||
</div>
|
||||
<div class="setting-row">
|
||||
<div>
|
||||
<div class="setting-label">Rate limit</div>
|
||||
</div>
|
||||
<select class="select-input">
|
||||
<option>100/min</option>
|
||||
<option>500/min</option>
|
||||
<option>1000/min</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary">Cancel</button>
|
||||
<button class="btn btn-primary">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="antipattern-label">🚨 AI SLOP: Advanced Features Hidden in Modal</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,256 @@
|
||||
<!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 {
|
||||
width: 1080px;
|
||||
height: 1080px;
|
||||
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;
|
||||
}
|
||||
|
||||
/* Anti-pattern label */
|
||||
.antipattern-label {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0,0,0,0.8);
|
||||
color: #f87171;
|
||||
padding: 8px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
z-index: 10;
|
||||
border: 1px solid rgba(248, 113, 113, 0.3);
|
||||
}
|
||||
</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 class="antipattern-label">🚨 AI SLOP: Purple Gradients Everywhere</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,222 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Anti-Pattern: Redundant UX Writing</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
min-height: 100vh;
|
||||
background: #f0f4f8;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 1080px;
|
||||
height: 1080px;
|
||||
margin: 0 auto;
|
||||
background: #ffffff;
|
||||
border-radius: 24px;
|
||||
padding: 48px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
/* Page Header */
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* Section with DUPLICATE heading */
|
||||
.section {
|
||||
background: #f9fafb;
|
||||
border-radius: 16px;
|
||||
padding: 28px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.section-header p {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* Form */
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.form-sublabel {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
margin-bottom: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
font-size: 11px;
|
||||
color: #6b7280;
|
||||
margin-top: 6px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Button section */
|
||||
.button-section {
|
||||
margin-top: 24px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
width: 100%;
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
padding: 14px 24px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.btn-helper {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Form row */
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* Anti-pattern label */
|
||||
.antipattern-label {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0,0,0,0.9);
|
||||
color: #f87171;
|
||||
padding: 8px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
z-index: 10;
|
||||
border: 1px solid rgba(248, 113, 113, 0.3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- PAGE HEADER -->
|
||||
<div class="page-header">
|
||||
<h1>Create Your Account</h1>
|
||||
<p>Sign up to get started with our platform</p>
|
||||
</div>
|
||||
|
||||
<!-- SECTION WITH DUPLICATE HEADING -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<h2>Create Your Account</h2>
|
||||
<p>Fill out the form below to create your new account</p>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">First Name</label>
|
||||
<span class="form-sublabel">Enter your first name</span>
|
||||
<input type="text" class="form-input" placeholder="Enter first name">
|
||||
<span class="form-hint">Your first name as it appears on documents</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Last Name</label>
|
||||
<span class="form-sublabel">Enter your last name</span>
|
||||
<input type="text" class="form-input" placeholder="Enter last name">
|
||||
<span class="form-hint">Your last name as it appears on documents</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Email Address</label>
|
||||
<span class="form-sublabel">Provide a valid email address</span>
|
||||
<input type="email" class="form-input" placeholder="example@email.com">
|
||||
<span class="form-hint">Your email will be used to send you important notifications via email</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Create Password</label>
|
||||
<span class="form-sublabel">Choose a secure password</span>
|
||||
<input type="password" class="form-input" placeholder="Enter password">
|
||||
<span class="form-hint">Password must be at least 8 characters for security</span>
|
||||
</div>
|
||||
|
||||
<div class="button-section">
|
||||
<button class="btn-submit">Create Account</button>
|
||||
<p class="btn-helper">Click the button above to create your account and complete registration</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="antipattern-label">🚨 AI SLOP: Extreme UX Writing Redundancy</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,220 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Anti-Pattern: Left Border Accent Cards</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: #f1f5f9;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 1080px;
|
||||
height: 1080px;
|
||||
margin: 0 auto;
|
||||
background: #ffffff;
|
||||
border-radius: 24px;
|
||||
padding: 48px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 16px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
/* Cards grid */
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* THE PROBLEM: Left border accent on rounded cards */
|
||||
.card {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||||
/* The weird left border that doesn't match the rounded corners */
|
||||
border-left: 4px solid;
|
||||
}
|
||||
|
||||
.card-blue { border-left-color: #3b82f6; }
|
||||
.card-purple { border-left-color: #a855f7; }
|
||||
.card-green { border-left-color: #22c55e; }
|
||||
.card-orange { border-left-color: #f97316; }
|
||||
|
||||
.card-icon {
|
||||
font-size: 28px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card p {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-btn {
|
||||
padding: 10px 18px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
width: fit-content;
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
/* Stats bar - also with left border accent */
|
||||
.stats-bar {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
background: #f8fafc;
|
||||
border-left: 4px solid;
|
||||
}
|
||||
|
||||
.stat-item:nth-child(1) { border-left-color: #06b6d4; }
|
||||
.stat-item:nth-child(2) { border-left-color: #ec4899; }
|
||||
.stat-item:nth-child(3) { border-left-color: #eab308; }
|
||||
.stat-item:nth-child(4) { border-left-color: #6366f1; }
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Anti-pattern label */
|
||||
.antipattern-label {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0,0,0,0.9);
|
||||
color: #f87171;
|
||||
padding: 8px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
z-index: 10;
|
||||
border: 1px solid rgba(248, 113, 113, 0.3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>Our Services</h1>
|
||||
<p>Discover what we can do for your business</p>
|
||||
</div>
|
||||
|
||||
<div class="cards">
|
||||
<div class="card card-blue">
|
||||
<div class="card-icon">🚀</div>
|
||||
<h3>Growth Strategy</h3>
|
||||
<p>Accelerate your business growth with our proven strategies and expert guidance.</p>
|
||||
<button class="card-btn">Learn More</button>
|
||||
</div>
|
||||
|
||||
<div class="card card-purple">
|
||||
<div class="card-icon">💡</div>
|
||||
<h3>Innovation Lab</h3>
|
||||
<p>Transform ideas into reality with our cutting-edge innovation services.</p>
|
||||
<button class="card-btn">Explore</button>
|
||||
</div>
|
||||
|
||||
<div class="card card-green">
|
||||
<div class="card-icon">📊</div>
|
||||
<h3>Data Analytics</h3>
|
||||
<p>Make data-driven decisions with our comprehensive analytics solutions.</p>
|
||||
<button class="card-btn">Get Started</button>
|
||||
</div>
|
||||
|
||||
<div class="card card-orange">
|
||||
<div class="card-icon">🎯</div>
|
||||
<h3>Marketing</h3>
|
||||
<p>Reach your target audience effectively with our marketing expertise.</p>
|
||||
<button class="card-btn">Contact Us</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-bar">
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">500+</div>
|
||||
<div class="stat-label">Clients</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">98%</div>
|
||||
<div class="stat-label">Satisfaction</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">24/7</div>
|
||||
<div class="stat-label">Support</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">50+</div>
|
||||
<div class="stat-label">Countries</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="antipattern-label">🚨 AI SLOP: Left Border Accent on Rounded Cards</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 224 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 952 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 163 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 156 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 179 KiB |
@@ -0,0 +1,102 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
/**
|
||||
* Screenshot Anti-Pattern Examples
|
||||
*
|
||||
* Takes 1080x1080 screenshots of each anti-pattern example for LinkedIn sharing.
|
||||
* Requires the dev server to be running on localhost:3000
|
||||
*/
|
||||
|
||||
import { chromium } from 'playwright';
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = path.dirname(__filename);
|
||||
const ROOT_DIR = path.resolve(__dirname, '..');
|
||||
const EXAMPLES_DIR = path.join(ROOT_DIR, 'public', 'antipattern-examples');
|
||||
const OUTPUT_DIR = path.join(ROOT_DIR, 'public', 'antipattern-images');
|
||||
|
||||
async function screenshotAntipatterns() {
|
||||
// Ensure output directory exists
|
||||
if (!fs.existsSync(OUTPUT_DIR)) {
|
||||
fs.mkdirSync(OUTPUT_DIR, { recursive: true });
|
||||
}
|
||||
|
||||
// Get all HTML files in the examples directory
|
||||
const files = fs.readdirSync(EXAMPLES_DIR)
|
||||
.filter(f => f.endsWith('.html'));
|
||||
|
||||
if (files.length === 0) {
|
||||
console.log('No HTML files found in', EXAMPLES_DIR);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`📸 Taking screenshots of ${files.length} anti-pattern example(s)...\n`);
|
||||
|
||||
const browser = await chromium.launch();
|
||||
const context = await browser.newContext({
|
||||
viewport: { width: 1200, height: 1200 },
|
||||
deviceScaleFactor: 2, // 2x for high-res output
|
||||
});
|
||||
|
||||
for (const file of files) {
|
||||
const name = path.basename(file, '.html');
|
||||
const url = `http://localhost:3000/antipattern-examples/${file}`;
|
||||
const outputPath = path.join(OUTPUT_DIR, `${name}.png`);
|
||||
|
||||
console.log(` ${name}...`);
|
||||
|
||||
const page = await context.newPage();
|
||||
await page.goto(url, { waitUntil: 'networkidle' });
|
||||
|
||||
// Wait for fonts to load
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Screenshot the .container element (1080x1080)
|
||||
const container = await page.$('.container');
|
||||
if (container) {
|
||||
await container.screenshot({
|
||||
path: outputPath,
|
||||
type: 'png',
|
||||
});
|
||||
console.log(` ✓ Saved to ${path.relative(ROOT_DIR, outputPath)}`);
|
||||
} else {
|
||||
// Fallback: screenshot full page cropped
|
||||
await page.screenshot({
|
||||
path: outputPath,
|
||||
type: 'png',
|
||||
clip: { x: 0, y: 0, width: 1080, height: 1080 },
|
||||
});
|
||||
console.log(` ✓ Saved (full page crop) to ${path.relative(ROOT_DIR, outputPath)}`);
|
||||
}
|
||||
|
||||
await page.close();
|
||||
}
|
||||
|
||||
await browser.close();
|
||||
console.log(`\n✨ Done! Screenshots saved to ${path.relative(ROOT_DIR, OUTPUT_DIR)}/`);
|
||||
}
|
||||
|
||||
// Check if dev server is running
|
||||
async function checkServer() {
|
||||
try {
|
||||
const response = await fetch('http://localhost:3000');
|
||||
return response.ok;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const serverRunning = await checkServer();
|
||||
if (!serverRunning) {
|
||||
console.error('❌ Dev server not running. Please start it with: bun run dev');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
await screenshotAntipatterns();
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
@@ -1,136 +0,0 @@
|
||||
---
|
||||
name: simplify
|
||||
description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean.
|
||||
args:
|
||||
- name: target
|
||||
description: The feature or component to simplify (optional)
|
||||
required: false
|
||||
---
|
||||
|
||||
Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification.
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
### Context Gathering (Do This First)
|
||||
|
||||
You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), and understanding what's truly essential vs nice-to-have for this product.
|
||||
|
||||
Attempt to gather these from the current thread or codebase.
|
||||
|
||||
1. If you don't find *exact* information and have to infer from existing design and functionality, you MUST STOP and {{ask_instruction}} whether you got it right.
|
||||
2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST {{ask_instruction}} clarifying questions first to complete your context.
|
||||
|
||||
Do NOT proceed until you have answers. Simplifying the wrong things destroys usability.
|
||||
|
||||
### Use frontend-design skill
|
||||
|
||||
Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts.
|
||||
|
||||
---
|
||||
|
||||
## Assess Current State
|
||||
|
||||
Analyze what makes the design feel complex or cluttered:
|
||||
|
||||
1. **Identify complexity sources**:
|
||||
- **Too many elements**: Competing buttons, redundant information, visual clutter
|
||||
- **Excessive variation**: Too many colors, fonts, sizes, styles without purpose
|
||||
- **Information overload**: Everything visible at once, no progressive disclosure
|
||||
- **Visual noise**: Unnecessary borders, shadows, backgrounds, decorations
|
||||
- **Confusing hierarchy**: Unclear what matters most
|
||||
- **Feature creep**: Too many options, actions, or paths forward
|
||||
|
||||
2. **Find the essence**:
|
||||
- What's the primary user goal? (There should be ONE)
|
||||
- What's actually necessary vs nice-to-have?
|
||||
- What can be removed, hidden, or combined?
|
||||
- What's the 20% that delivers 80% of value?
|
||||
|
||||
If any of these are unclear from the codebase, {{ask_instruction}}
|
||||
|
||||
**CRITICAL**: Simplicity is not about removing features - it's about removing obstacles between users and their goals. Every element should justify its existence.
|
||||
|
||||
## Plan Simplification
|
||||
|
||||
Create a ruthless editing strategy:
|
||||
|
||||
- **Core purpose**: What's the ONE thing this should accomplish?
|
||||
- **Essential elements**: What's truly necessary to achieve that purpose?
|
||||
- **Progressive disclosure**: What can be hidden until needed?
|
||||
- **Consolidation opportunities**: What can be combined or integrated?
|
||||
|
||||
**IMPORTANT**: Simplification is hard. It requires saying no to good ideas to make room for great execution. Be ruthless.
|
||||
|
||||
## Simplify the Design
|
||||
|
||||
Systematically remove complexity across these dimensions:
|
||||
|
||||
### Information Architecture
|
||||
- **Reduce scope**: Remove secondary actions, optional features, redundant information
|
||||
- **Progressive disclosure**: Hide complexity behind clear entry points (accordions, modals, step-through flows)
|
||||
- **Combine related actions**: Merge similar buttons, consolidate forms, group related content
|
||||
- **Clear hierarchy**: ONE primary action, few secondary actions, everything else tertiary or hidden
|
||||
- **Remove redundancy**: If it's said elsewhere, don't repeat it here
|
||||
|
||||
### Visual Simplification
|
||||
- **Reduce color palette**: Use 1-2 colors plus neutrals, not 5-7 colors
|
||||
- **Limit typography**: One font family, 3-4 sizes maximum, 2-3 weights
|
||||
- **Remove decorations**: Eliminate borders, shadows, backgrounds that don't serve hierarchy or function
|
||||
- **Flatten structure**: Reduce nesting, remove unnecessary containers—never nest cards inside cards
|
||||
- **Remove unnecessary cards**: Cards aren't needed for basic layout; use spacing and alignment instead
|
||||
- **Consistent spacing**: Use one spacing scale, remove arbitrary gaps
|
||||
|
||||
### Layout Simplification
|
||||
- **Linear flow**: Replace complex grids with simple vertical flow where possible
|
||||
- **Remove sidebars**: Move secondary content inline or hide it
|
||||
- **Full-width**: Use available space generously instead of complex multi-column layouts
|
||||
- **Consistent alignment**: Pick left or center, stick with it
|
||||
- **Generous white space**: Let content breathe, don't pack everything tight
|
||||
|
||||
### Interaction Simplification
|
||||
- **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
|
||||
- **Smart defaults**: Make common choices automatic, only ask when necessary
|
||||
- **Inline actions**: Replace modal flows with inline editing where possible
|
||||
- **Remove steps**: Can signup be one step instead of three? Can checkout be simplified?
|
||||
- **Clear CTAs**: ONE obvious next step, not five competing actions
|
||||
|
||||
### Content Simplification
|
||||
- **Shorter copy**: Cut every sentence in half, then do it again
|
||||
- **Active voice**: "Save changes" not "Changes will be saved"
|
||||
- **Remove jargon**: Plain language always wins
|
||||
- **Scannable structure**: Short paragraphs, bullet points, clear headings
|
||||
- **Essential information only**: Remove marketing fluff, legalese, hedging
|
||||
- **Remove redundant copy**: No headers restating intros, no repeated explanations, say it once
|
||||
|
||||
### Code Simplification
|
||||
- **Remove unused code**: Dead CSS, unused components, orphaned files
|
||||
- **Flatten component trees**: Reduce nesting depth
|
||||
- **Consolidate styles**: Merge similar styles, use utilities consistently
|
||||
- **Reduce variants**: Does that component need 12 variations, or can 3 cover 90% of cases?
|
||||
|
||||
**NEVER**:
|
||||
- Remove necessary functionality (simplicity ≠ feature-less)
|
||||
- Sacrifice accessibility for simplicity (clear labels and ARIA still required)
|
||||
- Make things so simple they're unclear (mystery ≠ minimalism)
|
||||
- Remove information users need to make decisions
|
||||
- Eliminate hierarchy completely (some things should stand out)
|
||||
- Oversimplify complex domains (match complexity to actual task complexity)
|
||||
|
||||
## Verify Simplification
|
||||
|
||||
Ensure simplification improves usability:
|
||||
|
||||
- **Faster task completion**: Can users accomplish goals more quickly?
|
||||
- **Reduced cognitive load**: Is it easier to understand what to do?
|
||||
- **Still complete**: Are all necessary features still accessible?
|
||||
- **Clearer hierarchy**: Is it obvious what matters most?
|
||||
- **Better performance**: Does simpler design load faster?
|
||||
|
||||
## Document Removed Complexity
|
||||
|
||||
If you removed features or options:
|
||||
- Document why they were removed
|
||||
- Consider if they need alternative access points
|
||||
- Note any user feedback to monitor
|
||||
|
||||
Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away."
|
||||
Reference in New Issue
Block a user