vibecodingreviewer
Version:
AI-powered code review tool with enhanced analysis
772 lines (679 loc) • 29 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VibeCodingReviewer - AI-Powered Code Review Tool</title>
<meta name="description" content="Professional AI-powered code review tool with comprehensive analysis, security detection, and quality metrics. Available as BYOK and Managed licenses.">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&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: #ffffff;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* Header */
.header {
background: #ffffff;
border-bottom: 1px solid #e5e7eb;
position: sticky;
top: 0;
z-index: 100;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0;
}
.logo {
font-size: 24px;
font-weight: 700;
color: #2563eb;
text-decoration: none;
}
.nav-links {
display: flex;
gap: 32px;
list-style: none;
}
.nav-links a {
color: #6b7280;
text-decoration: none;
font-weight: 500;
transition: color 0.2s;
}
.nav-links a:hover {
color: #2563eb;
}
/* Hero Section */
.hero {
padding: 80px 0;
text-align: center;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}
.hero h1 {
font-size: 48px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 24px;
line-height: 1.2;
}
.hero p {
font-size: 20px;
color: #6b7280;
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.btn {
padding: 16px 32px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 16px;
transition: all 0.2s;
border: none;
cursor: pointer;
}
.btn-primary {
background: #2563eb;
color: white;
}
.btn-primary:hover {
background: #1d4ed8;
transform: translateY(-1px);
}
.btn-secondary {
background: white;
color: #2563eb;
border: 2px solid #2563eb;
}
.btn-secondary:hover {
background: #2563eb;
color: white;
}
/* Features Section */
.features {
padding: 80px 0;
}
.section-title {
text-align: center;
font-size: 36px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 16px;
}
.section-subtitle {
text-align: center;
font-size: 18px;
color: #6b7280;
margin-bottom: 64px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 32px;
}
.feature-card {
background: white;
padding: 32px;
border-radius: 12px;
border: 1px solid #e5e7eb;
transition: all 0.2s;
}
.feature-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.feature-icon {
width: 48px;
height: 48px;
background: #dbeafe;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
font-size: 24px;
}
.feature-title {
font-size: 20px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 12px;
}
.feature-description {
color: #6b7280;
line-height: 1.6;
}
/* Demo Section */
.demo {
padding: 80px 0;
background: #f8fafc;
}
.demo-container {
background: #1a1a1a;
border-radius: 12px;
padding: 32px;
margin: 32px 0;
overflow-x: auto;
}
.demo-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
}
.demo-dots {
display: flex;
gap: 8px;
}
.demo-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.demo-dot.red { background: #ef4444; }
.demo-dot.yellow { background: #f59e0b; }
.demo-dot.green { background: #10b981; }
.demo-title {
color: #ffffff;
font-weight: 600;
}
.demo-code {
color: #e5e7eb;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 14px;
line-height: 1.6;
white-space: pre-wrap;
}
.demo-line {
margin-bottom: 8px;
}
.demo-comment { color: #6b7280; }
.demo-string { color: #10b981; }
.demo-keyword { color: #3b82f6; }
.demo-error { color: #ef4444; }
.demo-warning { color: #f59e0b; }
.demo-success { color: #10b981; }
/* Instructions Section */
.instructions {
padding: 80px 0;
}
.instructions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 32px;
margin-top: 48px;
}
.instruction-step {
text-align: center;
}
.step-number {
width: 48px;
height: 48px;
background: #2563eb;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
margin: 0 auto 16px;
}
.step-title {
font-size: 18px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 8px;
}
.step-description {
color: #6b7280;
}
/* Pricing Section */
.pricing {
padding: 80px 0;
background: #f8fafc;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 32px;
margin-top: 48px;
}
.pricing-card {
background: white;
border-radius: 12px;
padding: 32px;
border: 1px solid #e5e7eb;
position: relative;
transition: all 0.2s;
}
.pricing-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.pricing-card.featured {
border-color: #2563eb;
box-shadow: 0 0 0 1px #2563eb;
}
.pricing-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: #2563eb;
color: white;
padding: 6px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.pricing-title {
font-size: 24px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
}
.pricing-subtitle {
color: #6b7280;
margin-bottom: 24px;
}
.pricing-price {
font-size: 36px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
}
.pricing-period {
color: #6b7280;
font-size: 16px;
}
.pricing-features {
list-style: none;
margin: 24px 0;
}
.pricing-features li {
padding: 8px 0;
color: #6b7280;
display: flex;
align-items: center;
gap: 12px;
}
.pricing-features li::before {
content: "✓";
color: #10b981;
font-weight: 600;
}
.pricing-button {
width: 100%;
margin-top: 24px;
}
/* Footer */
.footer {
background: #1a1a1a;
color: #e5e7eb;
padding: 48px 0;
text-align: center;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 32px;
margin-bottom: 32px;
}
.footer-section h3 {
color: white;
margin-bottom: 16px;
}
.footer-section a {
color: #9ca3af;
text-decoration: none;
display: block;
margin-bottom: 8px;
}
.footer-section a:hover {
color: white;
}
.footer-bottom {
border-top: 1px solid #374151;
padding-top: 24px;
color: #9ca3af;
}
/* Responsive */
@media (max-width: 768px) {
.hero h1 {
font-size: 36px;
}
.hero p {
font-size: 18px;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.nav-links {
display: none;
}
}
</style>
</head>
<body>
<!-- Header -->
<header class="header">
<nav class="nav container">
<a href="#" class="logo">VibeCodingReviewer</a>
<ul class="nav-links">
<li><a href="#features">Features</a></li>
<li><a href="#demo">Demo</a></li>
<li><a href="#instructions">Instructions</a></li>
<li><a href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<h1>AI-Powered Code Review Tool</h1>
<p>Professional code analysis with comprehensive security detection, quality metrics, and actionable insights. Available as BYOK and Managed licenses.</p>
<div class="cta-buttons">
<a href="https://vibecoder65.gumroad.com/l/fzsco" class="btn btn-primary" target="_blank">Get Started</a>
<a href="https://www.npmjs.com/package/vibecodingreviewer" class="btn btn-secondary" target="_blank">Install from NPM</a>
</div>
</div>
</section>
<!-- Features Section -->
<section class="features" id="features">
<div class="container">
<h2 class="section-title">Why Choose VibeCodingReviewer?</h2>
<p class="section-subtitle">Comprehensive AI-powered analysis that goes beyond basic linting to provide deep insights into your code quality and security.</p>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">🔍</div>
<h3 class="feature-title">Comprehensive Analysis</h3>
<p class="feature-description">Deep code analysis covering security vulnerabilities, performance issues, code quality, maintainability, and best practices across multiple programming languages.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🛡️</div>
<h3 class="feature-title">Security Detection</h3>
<p class="feature-description">Advanced security scanning for SQL injection, XSS vulnerabilities, hardcoded secrets, and other critical security issues with actionable patches.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📊</div>
<h3 class="feature-title">Quality Metrics</h3>
<p class="feature-description">Detailed quality scoring with metrics for code complexity, maintainability, testability, and commit hygiene to track improvement over time.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔧</div>
<h3 class="feature-title">Actionable Patches</h3>
<p class="feature-description">Get ready-to-apply unified diff patches for identified issues, making it easy to fix problems quickly and efficiently.</p>
</div>
<div class="feature-card">
<div class="feature-icon">⚡</div>
<h3 class="feature-title">Fast & Efficient</h3>
<p class="feature-description">Lightning-fast analysis with intelligent caching and optimized processing to provide results in seconds, not minutes.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎯</div>
<h3 class="feature-title">Language Agnostic</h3>
<p class="feature-description">Works with any programming language - Python, JavaScript, TypeScript, Go, Java, C++, and more with language-specific best practices.</p>
</div>
</div>
</div>
</section>
<!-- Demo Section -->
<section class="demo" id="demo">
<div class="container">
<h2 class="section-title">See It In Action</h2>
<p class="section-subtitle">Real output from VibeCodingReviewer analyzing a Python script with security vulnerabilities and code quality issues.</p>
<div class="demo-container">
<div class="demo-header">
<div class="demo-dots">
<div class="demo-dot red"></div>
<div class="demo-dot yellow"></div>
<div class="demo-dot green"></div>
</div>
<span class="demo-title">Terminal</span>
</div>
<div class="demo-code">
<span class="demo-line"><span class="demo-comment">$ vibecheck run</span></span>
<span class="demo-line"></span>
<span class="demo-line">🔍 <span class="demo-keyword">VibeCodingReviewer</span> - AI Code Analysis</span>
<span class="demo-line">━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━</span>
<span class="demo-line"></span>
<span class="demo-line">📊 <span class="demo-keyword">Model:</span> gpt-4o-mini | <span class="demo-keyword">Mode:</span> pretty | <span class="demo-keyword">Tokens:</span> 1,247 | <span class="demo-keyword">Used:</span> 15,432/100,000 | <span class="demo-keyword">Remaining:</span> 84,568</span>
<span class="demo-line"></span>
<span class="demo-line">❌ <span class="demo-keyword">app.py:15-15</span> <span class="demo-error">Critical</span> - Hardcoded API key</span>
<span class="demo-line"> <span class="demo-string">API_KEY = "sk-1234567890abcdef"</span></span>
<span class="demo-line"> <span class="demo-comment">API key is hardcoded which poses a security risk.</span></span>
<span class="demo-line"> <span class="demo-comment">It should be stored in environment variables.</span></span>
<span class="demo-line"></span>
<span class="demo-line"> <span class="demo-keyword">Patch:</span></span>
<span class="demo-line"> <span class="demo-comment">--- app.py</span></span>
<span class="demo-line"> <span class="demo-comment">+++ app.py</span></span>
<span class="demo-line"> <span class="demo-comment">@@ -15,1 +15,1 @@</span></span>
<span class="demo-line"> <span class="demo-error">-API_KEY = "sk-1234567890abcdef"</span></span>
<span class="demo-line"> <span class="demo-success">+API_KEY = os.getenv("API_KEY")</span></span>
<span class="demo-line"></span>
<span class="demo-line">⚠️ <span class="demo-keyword">app.py:28-28</span> <span class="demo-warning">Warning</span> - SQL injection vulnerability</span>
<span class="demo-line"> <span class="demo-string">query = f"SELECT * FROM users WHERE id = {user_id}"</span></span>
<span class="demo-line"> <span class="demo-comment">SQL query constructed using string concatenation is vulnerable to SQL injection.</span></span>
<span class="demo-line"></span>
<span class="demo-line"> <span class="demo-keyword">Patch:</span></span>
<span class="demo-line"> <span class="demo-comment">--- app.py</span></span>
<span class="demo-line"> <span class="demo-comment">+++ app.py</span></span>
<span class="demo-line"> <span class="demo-comment">@@ -28,1 +28,1 @@</span></span>
<span class="demo-line"> <span class="demo-error">-query = f"SELECT * FROM users WHERE id = {user_id}"</span></span>
<span class="demo-line"> <span class="demo-success">+query = "SELECT * FROM users WHERE id = ?"</span></span>
<span class="demo-line"> <span class="demo-comment">@@ -30,1 +30,1 @@</span></span>
<span class="demo-line"> <span class="demo-error">-cursor.execute(query)</span></span>
<span class="demo-line"> <span class="demo-success">+cursor.execute(query, (user_id,))</span></span>
<span class="demo-line"></span>
<span class="demo-line">📝 <span class="demo-keyword">Summary:</span></span>
<span class="demo-line"> <span class="demo-comment">This Python script demonstrates various security vulnerabilities and best practices.</span></span>
<span class="demo-line"> <span class="demo-comment">The code includes authentication mechanisms, database operations, and data processing</span></span>
<span class="demo-line"> <span class="demo-comment">with both vulnerable and secure implementations for comparison.</span></span>
<span class="demo-line"></span>
<span class="demo-line">🧪 <span class="demo-keyword">Test Ideas:</span></span>
<span class="demo-line"> <span class="demo-comment">• Test with invalid API key to verify error handling</span></span>
<span class="demo-line"> <span class="demo-comment">• Test SQL injection attempts to verify parameterized queries work</span></span>
<span class="demo-line"> <span class="demo-comment">• Test edge cases for user input validation</span></span>
<span class="demo-line"></span>
<span class="demo-line">⭐ <span class="demo-keyword">Quality Score:</span> 6.2/10</span>
<span class="demo-line"> <span class="demo-comment">Security: 4/10 | Performance: 7/10 | Maintainability: 8/10</span></span>
<span class="demo-line"></span>
<span class="demo-line">━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━</span>
<span class="demo-line">⚠️ <span class="demo-warning">AI-Generated Analysis - Please Verify Important Findings</span></span>
<span class="demo-line"></span>
<span class="demo-line">🔍 <span class="demo-comment">Manually review critical security issues (hardcoded secrets, SQL injection)</span></span>
<span class="demo-line">🧪 <span class="demo-comment">Test patches before applying to production code</span></span>
<span class="demo-line">📚 <span class="demo-comment">Verify language-specific best practices for your framework</span></span>
</div>
</div>
</div>
</section>
<!-- Instructions Section -->
<section class="instructions" id="instructions">
<div class="container">
<h2 class="section-title">Get Started in Minutes</h2>
<p class="section-subtitle">Simple installation and activation process to start analyzing your code immediately.</p>
<div class="instructions-grid">
<div class="instruction-step">
<div class="step-number">1</div>
<h3 class="step-title">Install Package</h3>
<p class="step-description">Install VibeCodingReviewer globally using npm</p>
</div>
<div class="instruction-step">
<div class="step-number">2</div>
<h3 class="step-title">Activate License</h3>
<p class="step-description">Activate your license key from Gumroad purchase</p>
</div>
<div class="instruction-step">
<div class="step-number">3</div>
<h3 class="step-title">Run Analysis</h3>
<p class="step-description">Execute vibecheck run to analyze your code changes</p>
</div>
<div class="instruction-step">
<div class="step-number">4</div>
<h3 class="step-title">Review Results</h3>
<p class="step-description">Review findings, apply patches, and improve code quality</p>
</div>
</div>
<div class="demo-container" style="margin-top: 48px;">
<div class="demo-header">
<div class="demo-dots">
<div class="demo-dot red"></div>
<div class="demo-dot yellow"></div>
<div class="demo-dot green"></div>
</div>
<span class="demo-title">Installation Commands</span>
</div>
<div class="demo-code">
<span class="demo-line"><span class="demo-comment"># Install globally</span></span>
<span class="demo-line">npm install -g vibecodingreviewer</span>
<span class="demo-line"></span>
<span class="demo-line"><span class="demo-comment"># Activate license (BYOK)</span></span>
<span class="demo-line">vibecheck activate VIBE-BM-XXXXX --openai-key sk-proj-your-key</span>
<span class="demo-line"></span>
<span class="demo-line"><span class="demo-comment"># Activate license (Managed)</span></span>
<span class="demo-line">vibecheck activate VIBE-MM-XXXXX</span>
<span class="demo-line"></span>
<span class="demo-line"><span class="demo-comment"># Run analysis</span></span>
<span class="demo-line">vibecheck run</span>
<span class="demo-line"></span>
<span class="demo-line"><span class="demo-comment"># Explain specific file</span></span>
<span class="demo-line">vibecheck explain src/app.py</span>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section class="pricing" id="pricing">
<div class="container">
<h2 class="section-title">Choose Your Plan</h2>
<p class="section-subtitle">Two flexible pricing options. BYOK for unlimited usage with your own API key, or Managed for convenience with our API keys.</p>
<div class="pricing-grid">
<!-- BYOK Monthly -->
<div class="pricing-card">
<h3 class="pricing-title">BYOK Monthly</h3>
<p class="pricing-subtitle">Bring Your Own Key</p>
<div class="pricing-price">$2<span class="pricing-period">/month</span></div>
<ul class="pricing-features">
<li>Unlimited usage</li>
<li>Use your own OpenAI API key</li>
<li>30-day billing cycle</li>
<li>All features included</li>
<li>Email support</li>
</ul>
<a href="https://vibecoder65.gumroad.com/l/fzsco" class="btn btn-secondary pricing-button" target="_blank">Get Started</a>
</div>
<!-- Managed Monthly -->
<div class="pricing-card featured">
<div class="pricing-badge">Most Popular</div>
<h3 class="pricing-title">Managed Monthly</h3>
<p class="pricing-subtitle">We Manage Everything</p>
<div class="pricing-price">$5<span class="pricing-period">/month</span></div>
<ul class="pricing-features">
<li>100K tokens per 30 days</li>
<li>Managed OpenAI API keys</li>
<li>Automatic key rotation</li>
<li>Usage monitoring & alerts</li>
<li>All features included</li>
<li>Priority email support</li>
</ul>
<a href="https://vibecoder65.gumroad.com/l/fzsco" class="btn btn-primary pricing-button" target="_blank">Get Started</a>
</div>
</div>
<div style="text-align: center; margin-top: 48px; padding: 24px; background: white; border-radius: 12px; border: 1px solid #e5e7eb;">
<h3 style="color: #1a1a1a; margin-bottom: 16px;">Enterprise Plans Available</h3>
<p style="color: #6b7280; margin-bottom: 16px;">Need custom token limits, dedicated support, or on-premise deployment?</p>
<a href="mailto:support@vibecodingreviewer.com" class="btn btn-primary">Contact Sales</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>Product</h3>
<a href="#features">Features</a>
<a href="#demo">Demo</a>
<a href="#pricing">Pricing</a>
<a href="https://www.npmjs.com/package/vibecodingreviewer" target="_blank">NPM Package</a>
</div>
<div class="footer-section">
<h3>Support</h3>
<a href="mailto:support@vibecodingreviewer.com">Email Support</a>
<a href="#">Documentation</a>
<a href="#">FAQ</a>
<a href="#">Status Page</a>
</div>
<div class="footer-section">
<h3>Company</h3>
<a href="#">About</a>
<a href="#">Blog</a>
<a href="#">Careers</a>
<a href="#">Contact</a>
</div>
<div class="footer-section">
<h3>Legal</h3>
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
<a href="#">License Agreement</a>
<a href="#">Security</a>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 VibeCodingReviewer. All rights reserved.</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 scroll effect to header
window.addEventListener('scroll', function() {
const header = document.querySelector('.header');
if (window.scrollY > 100) {
header.style.boxShadow = '0 1px 3px 0 rgba(0, 0, 0, 0.1)';
} else {
header.style.boxShadow = 'none';
}
});
</script>
</body>
</html>