ripbug-ai-detector
Version:
🔥 RipBug AI Bug Detector - Built by an AI that rips its own bugs. Destroy AI-generated bugs before you commit.
684 lines (597 loc) • 25.1 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🔥 RipBug AI Bug Detector - Catch AI-Generated Bugs Before You Commit</title>
<meta name="description" content="The world's first AI bug detector built by an AI that knows its own limitations. Catch AI-generated bugs before they break your code.">
<!-- Open Graph / Social Media -->
<meta property="og:type" content="website">
<meta property="og:title" content="🔥 RipBug AI Bug Detector - Catch AI-Generated Bugs">
<meta property="og:description" content="Built by an AI that rips its own bugs. Install globally and protect your codebase from AI-generated errors.">
<meta property="og:image" content="https://ripbug.dev/og-image.png">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1.6;
color: #1a1a1a;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header */
.header {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
}
.logo {
font-size: 1.5rem;
font-weight: 800;
color: #ff4757;
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}
.nav-links a {
text-decoration: none;
color: #333;
font-weight: 500;
transition: color 0.3s;
}
.nav-links a:hover {
color: #ff4757;
}
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
text-align: center;
color: white;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
opacity: 0.3;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.hero .subtitle {
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
margin-bottom: 2rem;
opacity: 0.9;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 3rem;
}
.btn {
padding: 1rem 2rem;
border: none;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s;
cursor: pointer;
font-size: 1.1rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.btn-primary {
background: #ff4757;
color: white;
box-shadow: 0 10px 30px rgba(255, 71, 87, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 15px 40px rgba(255, 71, 87, 0.4);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.2);
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
.install-command {
background: rgba(0, 0, 0, 0.3);
padding: 1rem 2rem;
border-radius: 10px;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 1.1rem;
margin: 2rem auto;
max-width: 500px;
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
/* Features Section */
.features {
padding: 5rem 0;
background: white;
}
.section-title {
text-align: center;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 3rem;
color: #333;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.feature-card {
background: #f8f9fa;
padding: 2rem;
border-radius: 15px;
text-align: center;
transition: transform 0.3s;
border: 1px solid #e9ecef;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.feature-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.feature-card h3 {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 1rem;
color: #333;
}
.feature-card p {
color: #666;
line-height: 1.6;
}
/* Stats Section */
.stats {
padding: 4rem 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.stat-item h3 {
font-size: 3rem;
font-weight: 800;
margin-bottom: 0.5rem;
}
.stat-item p {
font-size: 1.1rem;
opacity: 0.9;
}
/* How it Works */
.how-it-works {
padding: 5rem 0;
background: #f8f9fa;
}
.steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.step {
text-align: center;
position: relative;
}
.step-number {
width: 60px;
height: 60px;
background: #ff4757;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
margin: 0 auto 1rem;
}
.step h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1rem;
color: #333;
}
.step p {
color: #666;
}
/* Footer */
.footer {
background: #1a1a1a;
color: white;
padding: 3rem 0;
text-align: center;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer h4 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1rem;
}
.footer a {
color: #ccc;
text-decoration: none;
transition: color 0.3s;
}
.footer a:hover {
color: #ff4757;
}
.footer-bottom {
border-top: 1px solid #333;
padding-top: 2rem;
margin-top: 2rem;
color: #999;
}
/* Responsive */
@media (max-width: 768px) {
.nav-links {
display: none;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.btn {
width: 100%;
max-width: 300px;
}
}
</style>
</head>
<body>
<!-- Header -->
<header class="header">
<nav class="nav container">
<div class="logo">🔥 RipBug</div>
<ul class="nav-links">
<li><a href="#features">Features</a></li>
<li><a href="#how-it-works">How it Works</a></li>
<li><a href="#install">Install</a></li>
<li><a href="https://github.com/ripbug/ripbug" target="_blank">GitHub</a></li>
</ul>
</nav>
</header>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="hero-content">
<h1>🔥 RipBug AI Bug Detector</h1>
<p class="subtitle">
The world's first AI bug detector built by an AI that knows its own limitations.
Catch AI-generated bugs before they break your code.
</p>
<div class="cta-buttons">
<a href="#install" class="btn btn-primary">
🚀 Install Now
</a>
<a href="#how-it-works" class="btn btn-secondary">
📖 Learn More
</a>
</div>
<div class="install-command">
<code>npm install -g ripbug-ai-detector</code>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="stats">
<div class="container">
<h2 class="section-title" style="color: white;">Trusted by Developers Worldwide</h2>
<div class="stats-grid">
<div class="stat-item">
<h3>1000+</h3>
<p>Bugs Detected</p>
</div>
<div class="stat-item">
<h3>95%</h3>
<p>AI Detection Accuracy</p>
</div>
<div class="stat-item">
<h3>54</h3>
<p>Files Analyzed in 1.6s</p>
</div>
<div class="stat-item">
<h3>FREE</h3>
<p>50 validations/month</p>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="features">
<div class="container">
<h2 class="section-title">🎯 Why RipBug?</h2>
<p style="text-align: center; font-size: 1.2rem; color: #666; max-width: 600px; margin: 0 auto;">
Built by an AI that understands AI limitations. RipBug catches the bugs that other tools miss.
</p>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">🤖</div>
<h3>AI Pattern Detection</h3>
<p>Identifies AI-generated code patterns with 95% confidence. Knows exactly what to look for because it's built by an AI.</p>
</div>
<div class="feature-card">
<div class="feature-icon">⚡</div>
<h3>Lightning Fast</h3>
<p>Analyzes 54 files in just 1.6 seconds. Tree-sitter parsing with regex fallback for maximum speed and accuracy.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔍</div>
<h3>Multiple Detectors</h3>
<p>Stale reference detection, import/export mismatches, signature drift, and function call validation.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🌐</div>
<h3>Glob Pattern Support</h3>
<p>Analyze specific files or entire projects with powerful glob patterns like <code>src/**/*.ts</code></p>
</div>
<div class="feature-card">
<div class="feature-icon">🔗</div>
<h3>Git Integration</h3>
<p>Works seamlessly with git hooks, staged files, and CI/CD pipelines. JSON output for automation.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎨</div>
<h3>Beautiful Output</h3>
<p>Clear, actionable error messages with suggestions. Console and JSON formats available.</p>
</div>
</div>
</div>
</section>
<!-- How it Works -->
<section id="how-it-works" class="how-it-works">
<div class="container">
<h2 class="section-title">🚀 How It Works</h2>
<div class="steps">
<div class="step">
<div class="step-number">1</div>
<h3>Install Globally</h3>
<p>One command installs RipBug globally on your system. Works with any JavaScript/TypeScript project.</p>
</div>
<div class="step">
<div class="step-number">2</div>
<h3>Initialize Project</h3>
<p>Run <code>ripbug init</code> in your project to set up configuration and git hooks.</p>
</div>
<div class="step">
<div class="step-number">3</div>
<h3>Analyze & Fix</h3>
<p>Use <code>ripbug validate</code> to analyze staged files or <code>--all</code> for entire project.</p>
</div>
<div class="step">
<div class="step-number">4</div>
<h3>Commit Safely</h3>
<p>Fix detected issues and commit with confidence. Your code is now AI-bug-free!</p>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section class="features" style="background: #f8f9fa;">
<div class="container">
<h2 class="section-title">💰 Simple, Transparent Pricing</h2>
<p style="text-align: center; font-size: 1.2rem; color: #666; max-width: 600px; margin: 0 auto 3rem;">
Start free, upgrade when you need more validations. No hidden fees, cancel anytime.
</p>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; max-width: 800px; margin: 0 auto;">
<!-- Free Plan -->
<div style="background: white; padding: 2rem; border-radius: 15px; text-align: center; border: 2px solid #e9ecef; position: relative;">
<h3 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; color: #333;">Free</h3>
<div style="font-size: 3rem; font-weight: 800; color: #28a745; margin-bottom: 1rem;">$0</div>
<p style="color: #666; margin-bottom: 2rem;">Perfect for getting started</p>
<ul style="list-style: none; padding: 0; margin-bottom: 2rem; text-align: left;">
<li style="padding: 0.5rem 0; color: #333;">✅ 50 validations/month</li>
<li style="padding: 0.5rem 0; color: #333;">✅ All detection features</li>
<li style="padding: 0.5rem 0; color: #333;">✅ CLI tool</li>
<li style="padding: 0.5rem 0; color: #333;">✅ Git integration</li>
<li style="padding: 0.5rem 0; color: #333;">✅ JSON output</li>
</ul>
<a href="#install" class="btn btn-secondary" style="width: 100%; background: #28a745; color: white; border: none;">
Get Started Free
</a>
</div>
<!-- Pro Plan -->
<div style="background: white; padding: 2rem; border-radius: 15px; text-align: center; border: 2px solid #ff4757; position: relative; transform: scale(1.05);">
<div style="position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #ff4757; color: white; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.9rem; font-weight: 600;">
MOST POPULAR
</div>
<h3 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; color: #333;">Pro</h3>
<div style="font-size: 3rem; font-weight: 800; color: #ff4757; margin-bottom: 0.5rem;">$49</div>
<p style="color: #666; margin-bottom: 2rem;">per month</p>
<ul style="list-style: none; padding: 0; margin-bottom: 2rem; text-align: left;">
<li style="padding: 0.5rem 0; color: #333;">🚀 1,000 validations/month</li>
<li style="padding: 0.5rem 0; color: #333;">✅ All detection features</li>
<li style="padding: 0.5rem 0; color: #333;">✅ Priority support</li>
<li style="padding: 0.5rem 0; color: #333;">✅ Early access to new features</li>
</ul>
<a href="https://ripbug.dev/pro" target="_blank" class="btn btn-primary" style="width: 100%;">
Upgrade to Pro
</a>
</div>
</div>
</div>
</section>
<!-- Installation Section -->
<section id="install" class="stats">
<div class="container">
<h2 class="section-title" style="color: white;">🔥 Get Started in Seconds</h2>
<div style="background: rgba(0,0,0,0.3); padding: 2rem; border-radius: 15px; margin: 2rem 0; backdrop-filter: blur(10px);">
<h3 style="margin-bottom: 1rem; font-size: 1.3rem;">Quick Install</h3>
<div style="background: rgba(0,0,0,0.5); padding: 1rem; border-radius: 10px; font-family: Monaco, monospace; margin-bottom: 1rem;">
<code style="color: #00ff88;">npm install -g ripbug-ai-detector@1.2.4</code>
</div>
<h3 style="margin: 2rem 0 1rem; font-size: 1.3rem;">Basic Usage</h3>
<div style="background: rgba(0,0,0,0.5); padding: 1rem; border-radius: 10px; font-family: Monaco, monospace; text-align: left;">
<div style="margin-bottom: 0.5rem;"><code style="color: #ff6b6b;"># Initialize in your project</code></div>
<div style="margin-bottom: 0.5rem;"><code style="color: #00ff88;">ripbug init</code></div>
<div style="margin-bottom: 1rem;"></div>
<div style="margin-bottom: 0.5rem;"><code style="color: #ff6b6b;"># Analyze staged files</code></div>
<div style="margin-bottom: 0.5rem;"><code style="color: #00ff88;">ripbug validate</code></div>
<div style="margin-bottom: 1rem;"></div>
<div style="margin-bottom: 0.5rem;"><code style="color: #ff6b6b;"># Analyze entire project</code></div>
<div style="margin-bottom: 0.5rem;"><code style="color: #00ff88;">ripbug validate --all</code></div>
<div style="margin-bottom: 1rem;"></div>
<div style="margin-bottom: 0.5rem;"><code style="color: #ff6b6b;"># Analyze specific files with glob patterns</code></div>
<div style="margin-bottom: 0.5rem;"><code style="color: #00ff88;">ripbug validate --files "src/**/*.ts"</code></div>
</div>
</div>
<div class="cta-buttons">
<a href="https://www.npmjs.com/package/ripbug-ai-detector" target="_blank" class="btn btn-primary">
📦 View on NPM
</a>
<a href="https://ripbug.dev/pro" target="_blank" class="btn btn-secondary">
🚀 Upgrade to Pro ($49/month)
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div>
<h4>🔥 RipBug</h4>
<p>AI Bug Detector built by an AI that rips its own bugs.</p>
</div>
<div>
<h4>Links</h4>
<p><a href="https://www.npmjs.com/package/ripbug-ai-detector">NPM Package</a></p>
<p><a href="https://github.com/ripbug/ripbug">GitHub Repository</a></p>
<p><a href="#features">Documentation</a></p>
</div>
<div>
<h4>Support</h4>
<p><a href="https://github.com/ripbug/ripbug/issues">Report Issues</a></p>
<p><a href="https://ripbug.dev/community">Community</a></p>
<p><a href="https://ripbug.dev/pro">Upgrade to Pro</a></p>
</div>
<div>
<h4>Version</h4>
<p>Current: v1.2.4</p>
<p>Released: July 2025</p>
<p>License: MIT</p>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 RipBug AI Bug Detector. Built with 🔥 by an AI that knows its limitations.</p>
<p>Catch AI-generated bugs before they catch you.</p>
</div>
</div>
</footer>
<script>
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Add some interactive animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// Observe all feature cards and steps
document.querySelectorAll('.feature-card, .step').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(el);
});
// Copy install command on click
document.querySelectorAll('code').forEach(code => {
code.style.cursor = 'pointer';
code.addEventListener('click', () => {
navigator.clipboard.writeText(code.textContent);
const originalText = code.textContent;
code.textContent = 'Copied!';
setTimeout(() => {
code.textContent = originalText;
}, 1000);
});
});
</script>
</body>
</html>