dev-Rachitgarg/codegenius-ai-smart-coding-companion
0
1<!DOCTYPE html>2<html lang="en" class="dark">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>CodeGenius AI - Smart Coding Companion</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script>10 function copyComments() {11 const content = document.getElementById('commentsPanel').textContent;12 navigator.clipboard.writeText(content);13 14 const notification = document.createElement('div');15 notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-md shadow-lg';16 notification.textContent = 'Comments copied to clipboard!';17 document.body.appendChild(notification);18 19 setTimeout(() => {20 notification.remove();21 }, 2000);22 }23 24 function copyDocumentation() {25 const content = document.getElementById('documentationPanel').textContent;26 navigator.clipboard.writeText(content);27 28 const notification = document.createElement('div');29 notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-md shadow-lg';30 notification.textContent = 'Documentation copied to clipboard!';31 document.body.appendChild(notification);32 33 setTimeout(() => {34 notification.remove();35 }, 2000);36 }37 38 function copyBugAnalysis() {39 const content = document.getElementById('bugTerminal').textContent;40 navigator.clipboard.writeText(content);41 42 const notification = document.createElement('div');43 notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-md shadow-lg';44 notification.textContent = 'Bug analysis copied to clipboard!';45 document.body.appendChild(notification);46 47 setTimeout(() => {48 notification.remove();49 }, 2000);50 }51function downloadBugAnalysis() {52 const content = document.getElementById('bugTerminal').textContent;53 const blob = new Blob([content], { type: 'text/plain' });54 const url = URL.createObjectURL(blob);55 56 const a = document.createElement('a');57 a.href = url;58 a.download = 'bug-analysis.txt';59 document.body.appendChild(a);60 a.click();61 document.body.removeChild(a);62 URL.revokeObjectURL(url);63 }64 65 function copyFixedCode() {66 const code = document.getElementById('fixedCode').textContent;67 navigator.clipboard.writeText(code);68 69 const notification = document.createElement('div');70 notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-md shadow-lg';71 notification.textContent = 'Fixed code copied to clipboard!';72 document.body.appendChild(notification);73 74 setTimeout(() => {75 notification.remove();76 }, 2000);77 }78 79 function downloadFixedCode() {80 const code = document.getElementById('fixedCode').textContent;81 const blob = new Blob([code], { type: 'text/javascript' });82 const url = URL.createObjectURL(blob);83 84 const a = document.createElement('a');85 a.href = url;86 a.download = 'fixed-code.js';87 document.body.appendChild(a);88 a.click();89 document.body.removeChild(a);90 URL.revokeObjectURL(url);91 }92 93 function downloadDocumentation() {94 const content = document.getElementById('documentationPanel').textContent;95 const blob = new Blob([content], { type: 'text/plain' });96 const url = URL.createObjectURL(blob);97 98 const a = document.createElement('a');99 a.href = url;100 a.download = 'documentation.txt';101 document.body.appendChild(a);102 a.click();103 document.body.removeChild(a);104 URL.revokeObjectURL(url);105 }106 107 function downloadComments() {108 const content = document.getElementById('commentsPanel').textContent;109 const blob = new Blob([content], { type: 'text/plain' });110 const url = URL.createObjectURL(blob);111 112 const a = document.createElement('a');113 a.href = url;114 a.download = 'code-comments.txt';115 document.body.appendChild(a);116 a.click();117 document.body.removeChild(a);118 URL.revokeObjectURL(url);119 }120tailwind.config = {121 theme: {122 extend: {123 colors: {124 primary: '#6366f1',125 secondary: '#8b5cf6',126 dark: '#0f172a',127 light: '#f8fafc'128 }129 }130 }131 }132 </script>133 <script src="https://unpkg.com/feather-icons"></script>134 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>135 <style>136 @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');137 body {138 font-family: 'Fira Code', monospace;139 }140 .code-editor {141 background-color: #1e293b;142 border-radius: 0.75rem;143 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);144 }145 .gradient-text {146 background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);147 -webkit-background-clip: text;148 background-clip: text;149 color: transparent;150 }151 .vanta-container {152 position: absolute;153 top: 0;154 left: 0;155 width: 100%;156 height: 100%;157 z-index: -1;158 }159 .feature-card:hover {160 transform: translateY(-5px);161 transition: all 0.3s ease;162 }163 .glow {164 box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);165 }166 </style>167</head>168<body class="bg-dark text-light min-h-screen">169 <div id="vanta-bg" class="vanta-container"></div>170 171 <!-- Navigation -->172 <nav class="bg-dark/80 backdrop-blur-md border-b border-gray-800 fixed w-full z-50">173 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">174 <div class="flex items-center justify-between h-16">175 <div class="flex items-center">176 <div class="flex-shrink-0 flex items-center">177 <i data-feather="code" class="text-primary h-6 w-6"></i>178 <span class="ml-2 text-xl font-bold gradient-text">CodeGenius AI</span>179 </div>180 </div>181 <div class="hidden md:block">182 <div class="ml-10 flex items-baseline space-x-4">183 <a href="#" class="text-primary px-3 py-2 rounded-md text-sm font-medium">Home</a>184 <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Features</a>185 <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Pricing</a>186 <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Docs</a>187 <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>188 </div>189 </div>190 <div class="hidden md:block">191 <div class="ml-4 flex items-center md:ml-6">192 <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">193 <i data-feather="log-in" class="mr-2 h-4 w-4"></i> Sign In194 </button>195 </div>196 </div>197 <div class="-mr-2 flex md:hidden">198 <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">199 <i data-feather="menu"></i>200 </button>201 </div>202 </div>203 </div>204 </nav>205 206 <!-- Hero Section -->207 <div class="relative pt-32 pb-20 px-4 sm:px-6 lg:pt-40 lg:pb-28 lg:px-8">208 <div class="max-w-7xl mx-auto">209 <div class="text-center">210 <h1 class="text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl">211 <span class="block">AI-Powered</span>212 <span class="block gradient-text">Coding Companion</span>213 </h1>214 <p class="mt-3 max-w-md mx-auto text-base text-gray-300 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">215 Supercharge your development workflow with our AI-powered tools that detect bugs, fix code, explain logic, and generate documentation automatically.216 </p>217 <div class="mt-10 sm:flex sm:justify-center">218 <div class="rounded-md shadow">219 <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary/90 md:py-4 md:text-lg md:px-10">220 Get Started221 </a>222 </div>223 <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">224 <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">225 Live Demo226 </a>227 </div>228 </div>229 </div>230 </div>231 </div>232 233 <!-- Features Section -->234 <div class="py-12 bg-dark/50 backdrop-blur-sm">235 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">236 <div class="lg:text-center">237 <h2 class="text-base text-primary font-semibold tracking-wide uppercase">Features</h2>238 <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl">239 Everything you need to code smarter240 </p>241 </div>242 243 <div class="mt-10">244 <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">245 <!-- Feature 1 -->246 <div class="feature-card bg-gray-800/50 p-6 rounded-lg border border-gray-700 hover:border-primary">247 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4">248 <i data-feather="bug"></i>249 </div>250 <h3 class="text-lg font-medium text-white mb-2">AI Bug Detector</h3>251 <p class="text-gray-300">252 Real-time scanning and detection of bugs, errors, and vulnerabilities in your code with detailed reports.253 </p>254 </div>255 256 <!-- Feature 2 -->257 <div class="feature-card bg-gray-800/50 p-6 rounded-lg border border-gray-700 hover:border-primary">258 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4">259 <i data-feather="check-circle"></i>260 </div>261 <h3 class="text-lg font-medium text-white mb-2">AI Bug Fixer</h3>262 <p class="text-gray-300">263 Automated suggestions and fixes for identified bugs, with options to apply changes instantly.264 </p>265 </div>266 267 <!-- Feature 3 -->268 <div class="feature-card bg-gray-800/50 p-6 rounded-lg border border-gray-700 hover:border-primary">269 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4">270 <i data-feather="book-open"></i>271 </div>272 <h3 class="text-lg font-medium text-white mb-2">AI Code Explainer</h3>273 <p class="text-gray-300">274 In-depth breakdowns of complex code segments, simplifying logic and functionality for better understanding.275 </p>276 </div>277 278 <!-- Feature 4 -->279 <div class="feature-card bg-gray-800/50 p-6 rounded-lg border border-gray-700 hover:border-primary">280 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4">281 <i data-feather="file-text"></i>282 </div>283 <h3 class="text-lg font-medium text-white mb-2">AI Documentation Maker</h3>284 <p class="text-gray-300">285 Auto-generates comprehensive, well-structured documentation for projects in various formats.286 </p>287 </div>288 289 <!-- Feature 5 -->290 <div class="feature-card bg-gray-800/50 p-6 rounded-lg border border-gray-700 hover:border-primary">291 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4">292 <i data-feather="message-square"></i>293 </div>294 <h3 class="text-lg font-medium text-white mb-2">AI Auto-Commentor</h3>295 <p class="text-gray-300">296 Intelligently adds descriptive comments to code, improving readability and maintainability.297 </p>298 </div>299 300 <!-- Feature 6 -->301 <div class="feature-card bg-gray-800/50 p-6 rounded-lg border border-gray-700 hover:border-primary">302 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4">303 <i data-feather="users"></i>304 </div>305 <h3 class="text-lg font-medium text-white mb-2">Real-time Collaboration</h3>306 <p class="text-gray-300">307 Work together with your team in real-time with built-in collaboration tools and version control.308 </p>309 </div>310 </div>311 </div>312 </div>313 </div>314 <!-- Interactive Code Section -->315 <div class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">316 <div class="grid grid-cols-1 gap-8">317 <!-- Input JS Editor -->318 <div class="code-editor p-4 glow">319 <div class="flex items-center justify-between mb-4">320 <div class="flex items-center">321 <div class="flex space-x-2 mr-4">322 <div class="w-3 h-3 rounded-full bg-red-500"></div>323 <div class="w-3 h-3 rounded-full bg-yellow-500"></div>324 <div class="w-3 h-3 rounded-full bg-green-500"></div>325 </div>326 <div class="text-sm text-gray-400">input.js</div>327 </div>328 <div class="flex space-x-2">329 <button onclick="copyCode()" class="group relative text-gray-400 hover:text-white p-1.5 rounded hover:bg-gray-700/50 transition-all duration-200" title="Copy Code">330 <i data-feather="copy" class="w-4 h-4"></i>331 <span class="absolute top-full left-1/2 transform -translate-x-1/2 mt-1 px-2 py-1 text-xs text-white bg-gray-800 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200">Copy</span>332 </button>333 <button onclick="downloadCode()" class="group relative text-gray-400 hover:text-white p-1.5 rounded hover:bg-gray-700/50 transition-all duration-200" title="Download Code">334 <i data-feather="download" class="w-4 h-4"></i>335 <span class="absolute top-full left-1/2 transform -translate-x-1/2 mt-1 px-2 py-1 text-xs text-white bg-gray-800 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200">Download</span>336 </button>337 </div>338 </div>339 <div id="codeEditor" class="w-full h-96 bg-gray-800 text-gray-300 font-mono text-sm p-4 rounded overflow-auto">340 <div>341 <div class="text-primary font-medium">Function Declaration:</div>342 <div class="text-gray-400 ml-4"><span class="text-purple-400">function</span> <span class="text-yellow-300">calculateTotal</span>(<span class="text-blue-400">items</span>) {</div>343 </div>344 <div class="mt-2">345 <div class="text-primary font-medium">Input Validation:</div>346 <div class="text-gray-400 ml-4"><span class="text-green-400">if</span> (!Array.isArray(<span class="text-blue-400">items</span>)) {</div>347 <div class="text-gray-400 ml-8"><span class="text-green-400">throw</span> <span class="text-purple-400">new</span> <span class="text-blue-400">Error</span>(<span class="text-orange-300">'Items must be an array'</span>);</div>348 <div class="text-gray-400 ml-4">}</div>349 </div>350 <div class="mt-2">351 <div class="text-primary font-medium">Total Calculation:</div>352 <div class="text-gray-400 ml-4"><span class="text-purple-400">let</span> total = <span class="text-blue-400">0</span>;</div>353 <div class="text-gray-400 ml-4"><span class="text-blue-400">items</span>.forEach(<span class="text-blue-400">item</span> => {</div>354 <div class="text-gray-400 ml-8"><span class="text-purple-400">const</span> price = <span class="text-blue-400">Number</span>(<span class="text-blue-400">item</span>.price) || <span class="text-blue-400">0</span>;</div>355 <div class="text-gray-400 ml-8">total += price * (<span class="text-blue-400">item</span>.quantity || <span class="text-blue-400">1</span>);</div>356 <div class="text-gray-400 ml-4">});</div>357 </div>358 <div class="mt-2">359 <div class="text-primary font-medium">Return Value:</div>360 <div class="text-gray-400 ml-4"><span class="text-green-400">return</span> total;</div>361 <div class="text-gray-400 ml-4">}</div>362 </div>363 </div>364 <div class="grid grid-cols-5 gap-3 mt-4">365 <button onclick="explainCode()" class="group relative bg-gray-700/70 hover:bg-gray-600/80 border border-gray-600 hover:border-blue-500 text-white py-2.5 px-3 rounded-lg text-sm font-medium flex items-center justify-center transition-all duration-200 shadow-md hover:shadow-blue-500/20">366 <div class="absolute inset-0 bg-blue-500/10 group-hover:bg-blue-500/20 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>367 <i data-feather="book-open" class="mr-2 w-4 h-4 text-blue-400"></i> 368 <span class="relative">Explain</span>369 </button>370 <button onclick="commentCode()" class="group relative bg-gray-700/70 hover:bg-gray-600/80 border border-gray-600 hover:border-purple-500 text-white py-2.5 px-3 rounded-lg text-sm font-medium flex items-center justify-center transition-all duration-200 shadow-md hover:shadow-purple-500/20">371 <div class="absolute inset-0 bg-purple-500/10 group-hover:bg-purple-500/20 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>372 <i data-feather="message-square" class="mr-2 w-4 h-4 text-purple-400"></i> 373 <span class="relative">Comment</span>374 </button>375 <button onclick="analyzeCode()" class="group relative bg-gray-700/70 hover:bg-gray-600/80 border border-gray-600 hover:border-red-500 text-white py-2.5 px-3 rounded-lg text-sm font-medium flex items-center justify-center transition-all duration-200 shadow-md hover:shadow-red-500/20">376 <div class="absolute inset-0 bg-red-500/10 group-hover:bg-red-500/20 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>377 <i data-feather="bug" class="mr-2 w-4 h-4 text-red-400"></i> 378 <span class="relative">Find Bugs</span>379 </button>380 <button onclick="documentCode()" class="group relative bg-gray-700/70 hover:bg-gray-600/80 border border-gray-600 hover:border-green-500 text-white py-2.5 px-3 rounded-lg text-sm font-medium flex items-center justify-center transition-all duration-200 shadow-md hover:shadow-green-500/20">381 <div class="absolute inset-0 bg-green-500/10 group-hover:bg-green-500/20 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>382 <i data-feather="file-text" class="mr-2 w-4 h-4 text-green-400"></i> 383 <span class="relative">Document</span>384 </button>385 <button onclick="fixCode()" class="group relative bg-gray-700/70 hover:bg-gray-600/80 border border-gray-600 hover:border-indigo-500 text-white py-2.5 px-3 rounded-lg text-sm font-medium flex items-center justify-center transition-all duration-200 shadow-md hover:shadow-indigo-500/20">386 <div class="absolute inset-0 bg-indigo-500/10 group-hover:bg-indigo-500/20 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>387 <i data-feather="wrench" class="mr-2 w-4 h-4 text-indigo-400"></i> 388 <span class="relative">Fix Code</span>389 </button>390 </div>391 </div>392 393 <!-- Combined Analysis Panel -->394<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">395 <!-- Left Column - Bug Analysis and Fixed Code -->396 <div class="space-y-8">397 <!-- Bug Analysis -->398 <div class="code-editor p-4 glow">399 <div class="flex items-center justify-between mb-4">400 <div class="flex items-center">401 <div class="flex space-x-2 mr-4">402 <div class="w-3 h-3 rounded-full bg-red-500"></div>403 <div class="w-3 h-3 rounded-full bg-yellow-500"></div>404 <div class="w-3 h-3 rounded-full bg-green-500"></div>405 </div>406 <div class="text-sm text-gray-400">Bug Analysis</div>407 </div>408 <div class="flex space-x-2">409 <button onclick="copyBugAnalysis()" class="text-gray-400 hover:text-white p-1 rounded hover:bg-gray-700/50 transition-all duration-200" title="Copy Analysis">410 <i data-feather="copy" class="w-4 h-4"></i>411 </button>412 <button onclick="downloadBugAnalysis()" class="text-gray-400 hover:text-white p-1 rounded hover:bg-gray-700/50 transition-all duration-200" title="Download Analysis">413 <i data-feather="download" class="w-4 h-4"></i>414 </button>415 </div>416 </div>417<div id="bugTerminal" class="w-full h-48 bg-gray-800 text-gray-300 font-mono text-sm p-4 rounded overflow-y-auto">418 <div class="text-green-400">$ Waiting for code analysis...</div>419 </div>420 </div>421 422 <!-- Fixed Code -->423 <div class="code-editor p-4 glow">424 <div class="flex items-center justify-between mb-4">425 <div class="flex items-center">426 <div class="flex space-x-2 mr-4">427 <div class="w-3 h-3 rounded-full bg-red-500"></div>428 <div class="w-3 h-3 rounded-full bg-yellow-500"></div>429 <div class="w-3 h-3 rounded-full bg-green-500"></div>430 </div>431 <div class="text-sm text-gray-400">fixed.js</div>432 </div>433 <div class="flex space-x-2">434 <button onclick="copyFixedCode()" class="text-gray-400 hover:text-white p-1 rounded hover:bg-gray-700/50 transition-all duration-200" title="Copy Code">435 <i data-feather="copy" class="w-4 h-4"></i>436 </button>437 <button onclick="downloadFixedCode()" class="text-gray-400 hover:text-white p-1 rounded hover:bg-gray-700/50 transition-all duration-200" title="Download Code">438 <i data-feather="download" class="w-4 h-4"></i>439 </button>440 </div>441 </div>442 <pre id="fixedCode" class="text-gray-300 text-sm font-mono h-48 overflow-auto bg-gray-800 p-4 rounded">443<span class="text-gray-500">// Fixed code will appear here after analysis</span></pre>444 <button onclick="applyFix()" class="group relative mt-4 w-full bg-gray-800/50 hover:bg-gray-700/70 border border-gray-700 hover:border-green-500 text-white py-2 px-4 rounded-md font-medium flex items-center justify-center transition-all duration-200 shadow-md hover:shadow-green-500/20">445 <div class="absolute inset-0 bg-green-500/10 group-hover:bg-green-500/20 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>446 <i data-feather="check-circle" class="mr-2 text-green-400 w-4 h-4"></i> 447 <span class="relative">Apply Fix</span>448 </button>449 </div>450 </div>451 452 <!-- Right Column - Documentation and Comments -->453 <div class="space-y-8">454 <!-- Documentation -->455 <div class="code-editor p-4 glow">456 <div class="flex items-center justify-between mb-4">457 <div class="flex items-center">458 <div class="flex space-x-2 mr-4">459 <div class="w-3 h-3 rounded-full bg-blue-500"></div>460 <div class="w-3 h-3 rounded-full bg-purple-500"></div>461 <div class="w-3 h-3 rounded-full bg-pink-500"></div>462 </div>463 <div class="text-sm text-gray-400">Documentation</div>464 </div>465 <div class="flex space-x-2">466 <button onclick="copyDocumentation()" class="text-gray-400 hover:text-white p-1 rounded hover:bg-gray-700/50 transition-all duration-200" title="Copy Documentation">467 <i data-feather="copy" class="w-4 h-4"></i>468 </button>469 <button onclick="downloadDocumentation()" class="text-gray-400 hover:text-white p-1 rounded hover:bg-gray-700/50 transition-all duration-200" title="Download Documentation">470 <i data-feather="download" class="w-4 h-4"></i>471 </button>472 </div>473 </div>474<div id="documentationPanel" class="w-full h-48 bg-gray-800 text-gray-300 font-mono text-sm p-4 rounded overflow-y-auto">475 <div class="text-blue-400">/**476 * <span class="text-purple-400">@function</span> calculateTotal477 * <span class="text-purple-400">@description</span> Calculates the total price of items in a shopping cart478 * <span class="text-purple-400">@param</span> {Array} items - Array of item objects with price and quantity479 * <span class="text-purple-400">@returns</span> {Number} Total calculated amount480 * <span class="text-purple-400">@throws</span> {Error} If items is not an array481 */</div>482 </div>483 </div>484 <!-- Comments -->485 <div class="code-editor p-4 glow">486 <div class="flex items-center justify-between mb-4">487 <div class="flex items-center">488 <div class="flex space-x-2 mr-4">489 <div class="w-3 h-3 rounded-full bg-green-500"></div>490 <div class="w-3 h-3 rounded-full bg-yellow-500"></div>491 <div class="w-3 h-3 rounded-full bg-red-500"></div>492 </div>493 <div class="text-sm text-gray-400">Comments</div>494 </div>495 <div class="flex space-x-2">496 <button onclick="copyComments()" class="text-gray-400 hover:text-white p-1 rounded hover:bg-gray-700/50 transition-all duration-200" title="Copy Comments">497 <i data-feather="copy" class="w-4 h-4"></i>498 </button>499 <button onclick="downloadComments()" class="text-gray-400 hover:text-white p-1 rounded hover:bg-gray-700/50 transition-all duration-200" title="Download Comments">500 <i data-feather="download" class="w-4 h-4"></i>501 </button>502 </div>503 </div>504 <div id="commentsPanel" class="w-full h-48 bg-gray-800 text-gray-300 font-mono text-sm p-4 rounded overflow-y-auto">505 <div class="text-green-400">// Function declaration with items parameter</div>506 <div class="text-green-400 mt-2">// Input validation - checks if items is an array</div>507 <div class="text-green-400 mt-2">// Initialize total to 0</div>508 <div class="text-green-400 mt-2">// Loop through each item in the array</div>509 <div class="text-green-400 mt-2">// Convert price to number, default to 0 if invalid</div>510 <div class="text-green-400 mt-2">// Calculate line total (price * quantity)</div>511 <div class="text-green-400 mt-2">// Return the calculated total</div>512 </div>513 <button onclick="applyComments()" class="group relative mt-4 w-full bg-gray-800/50 hover:bg-gray-700/70 border border-gray-700 hover:border-purple-500 text-white py-2 px-4 rounded-md font-medium flex items-center justify-center transition-all duration-200 shadow-md hover:shadow-purple-500/20">514 <div class="absolute inset-0 bg-purple-500/10 group-hover:bg-purple-500/20 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>515 <i data-feather="check-circle" class="mr-2 text-purple-400 w-4 h-4"></i> 516 <span class="relative">Apply Comments</span>517 </button>518 </div>519</div>520 </div>521</div>522</div>523 <script>524 function copyCode() {525 const code = document.getElementById('codeEditor').textContent;526 navigator.clipboard.writeText(code);527 528 // Show copied notification529 const notification = document.createElement('div');530 notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-md shadow-lg';531 notification.textContent = 'Code copied to clipboard!';532 document.body.appendChild(notification);533 534 setTimeout(() => {535 notification.remove();536 }, 2000);537 }538 539 function downloadCode() {540 const code = document.getElementById('codeEditor').textContent;541 const blob = new Blob([code], { type: 'text/javascript' });542 const url = URL.createObjectURL(blob);543 544 const a = document.createElement('a');545 a.href = url;546 a.download = 'code.js';547 document.body.appendChild(a);548 a.click();549 document.body.removeChild(a);550 URL.revokeObjectURL(url);551 }552 553 function fixCode() {554 analyzeCode();555 setTimeout(() => {556 applyFix();557 }, 2000);558 }559 560 function analyzeCode() {561const code = document.getElementById('codeInput').value;562 const bugTerminal = document.getElementById('bugTerminal');563 564 // Clear terminal565 bugTerminal.innerHTML = '<div class="text-green-400">$ Analyzing code...</div>';566 567 // Simulate AI analysis568 setTimeout(() => {569 bugTerminal.innerHTML = `570 <div class="text-green-400">$ Code analysis complete</div>571 <div class="text-yellow-400">$ Found 2 potential issues:</div>572 <div class="mt-2">573 <div class="text-red-400">1. Line 3: Missing input validation for 'items' array elements</div>574 <div class="text-gray-400 ml-4">- Items should be validated for required properties (price, quantity)</div>575 </div>576 <div class="mt-2">577 <div class="text-red-400">2. Line 7: Potential floating point precision issue</div>578 <div class="text-gray-400 ml-4">- Consider using toFixed(2) for currency calculations</div>579 </div>580 <div class="mt-4 text-green-400">$ Suggested fixes available</div>581 `;582 583 // Update fixed code584 document.getElementById('fixedCode').innerHTML = `585<span class="text-purple-400">function</span> <span class="text-yellow-300">calculateTotal</span>(items) {586 <span class="text-green-400">if</span> (!Array.isArray(items)) {587 <span class="text-green-400">throw</span> <span class="text-purple-400">new</span> <span class="text-blue-400">Error</span>(<span class="text-orange-300">'Items must be an array'</span>);588 }589 590 <span class="text-purple-400">let</span> total = <span class="text-blue-400">0</span>;591 items.forEach(item => {592 <span class="text-green-400">if</span> (!item.price || !item.quantity) {593 <span class="text-green-400">throw</span> <span class="text-purple-400">new</span> <span class="text-blue-400">Error</span>(<span class="text-orange-300">'Items must have price and quantity'</span>);594 }595 <span class="text-purple-400">const</span> price = <span class="text-blue-400">Number</span>(item.price) || <span class="text-blue-400">0</span>;596 total += <span class="text-blue-400">Number</span>((price * (item.quantity || <span class="text-blue-400">1</span>)).toFixed(<span class="text-blue-400">2</span>));597 });598 599 <span class="text-green-400">return</span> total;600}`;601 }, 1500);602 }603 604 function applyFix() {605 const fixedCode = document.getElementById('fixedCode').textContent;606 document.getElementById('codeInput').value = fixedCode;607 608 const bugTerminal = document.getElementById('bugTerminal');609 bugTerminal.innerHTML = `610 <div class="text-green-400">$ Fix applied successfully!</div>611 <div class="text-gray-400 mt-2">Original code has been replaced with the fixed version.</div>612 <div class="text-green-400 mt-4">$ Ready for new analysis</div>613 `;614 }615 </script>616 <!-- Enhanced Code Explanation Section -->617 <div class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-gradient-to-br from-gray-800/50 to-gray-900/60 rounded-lg border border-gray-700/50">618 <div class="text-center mb-12">619 <h2 class="text-3xl font-extrabold text-white sm:text-4xl">620 <span class="gradient-text">AI-Powered Code Explanation</span>621 </h2>622 <p class="mt-3 max-w-2xl mx-auto text-lg text-gray-300">623 Our AI analyzes your code structure, logic flow, and provides actionable insights.624 </p>625 </div>626 627 <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">628 <!-- Interactive Code Breakdown -->629 <div class="code-editor p-4 glow">630 <div class="flex items-center justify-between mb-4">631 <div class="text-sm text-gray-400">Interactive Code Breakdown</div>632 <button onclick="toggleComplexity()" class="text-xs bg-gray-700/50 hover:bg-gray-600/70 text-gray-300 px-3 py-1 rounded-full">633 <span id="complexityToggle">Show Advanced</span>634 </button>635 </div>636 <div id="codeExplanation" class="text-gray-300 text-sm font-mono space-y-4">637 <div class="bg-gray-800/50 p-3 rounded-lg border-l-4 border-primary">638 <div class="flex items-center">639 <i data-feather="chevron-right" class="text-primary mr-2"></i>640 <div class="text-primary font-medium">Function Declaration</div>641 </div>642 <div class="mt-2 ml-6 text-gray-400">643 <p>• Public function: calculateTotal(items)</p>644 <p>• Accepts single parameter: items array</p>645 <p>• Implicit return type: Number</p>646 </div>647 </div>648 <div class="bg-gray-800/50 p-3 rounded-lg border-l-4 border-red-400">649 <div class="flex items-center">650 <i data-feather="shield" class="text-red-400 mr-2"></i>651 <div class="text-red-400 font-medium">Input Validation</div>652 </div>653 <div class="mt-2 ml-6 text-gray-400">654 <p>• Type check: Array.isArray()</p>655 <p>• Throws Error on invalid input</p>656 <p>• Missing: Element validation</p>657 </div>658 </div>659 <div class="bg-gray-800/50 p-3 rounded-lg border-l-4 border-yellow-400">660 <div class="flex items-center">661 <i data-feather="repeat" class="text-yellow-400 mr-2"></i>662 <div class="text-yellow-400 font-medium">Iteration Logic</div>663 </div>664 <div class="mt-2 ml-6 text-gray-400">665 <p>• Array traversal: forEach</p>666 <p>• Type coercion: Number()</p>667 <p>• Default quantity: 1</p>668 </div>669 </div>670 </div>671 </div>672 673 <!-- Advanced Analysis & Metrics -->674 <div class="code-editor p-4 glow">675 <div class="flex items-center justify-between mb-4">676 <div class="text-sm text-gray-400">Advanced Analysis & Metrics</div>677 <div class="flex space-x-2">678 <button onclick="showPerformance()" class="text-xs bg-gray-700/50 hover:bg-gray-600/70 text-gray-300 px-3 py-1 rounded-full">Performance</button>679 <button onclick="showSecurity()" class="text-xs bg-gray-700/50 hover:bg-gray-600/70 text-gray-300 px-3 py-1 rounded-full">Security</button>680 <button onclick="showBestPractices()" class="text-xs bg-gray-700/50 hover:bg-gray-600/70 text-gray-300 px-3 py-1 rounded-full">Best Practices</button>681 </div>682 </div>683 <div id="analysisMetrics" class="text-gray-300 text-sm font-mono space-y-4">684 <div class="bg-gray-800/50 p-3 rounded-lg">685 <div class="flex items-center justify-between">686 <div class="font-medium flex items-center">687 <i data-feather="clock" class="text-blue-400 mr-2"></i>688 <span>Time Complexity</span>689 </div>690 <span class="text-green-400 text-xs bg-green-400/10 px-2 py-0.5 rounded-full">O(n)</span>691 </div>692 <div class="mt-2 text-gray-400">693 <p>• Linear time operation based on input size</p>694 <p>• No nested loops or recursive calls</p>695 </div>696 </div>697 <div class="bg-gray-800/50 p-3 rounded-lg">698 <div class="flex items-center justify-between">699 <div class="font-medium flex items-center">700 <i data-feather="cpu" class="text-purple-400 mr-2"></i>701 <span>Memory Usage</span>702 </div>703 <span class="text-yellow-400 text-xs bg-yellow-400/10 px-2 py-0.5 rounded-full">O(1)</span>704 </div>705 <div class="mt-2 text-gray-400">706 <p>• Constant space complexity</p>707 <p>• Only primitive variables used</p>708 </div>709 </div>710 <div class="bg-gray-800/50 p-3 rounded-lg">711 <div class="flex items-center justify-between">712 <div class="font-medium flex items-center">713 <i data-feather="alert-triangle" class="text-red-400 mr-2"></i>714 <span>Potential Issues</span>715 </div>716 <span class="text-red-400 text-xs bg-red-400/10 px-2 py-0.5 rounded-full">2 found</span>717 </div>718 <div class="mt-2 text-gray-400">719 <p>• Floating point precision (currency)</p>720 <p>• No input sanitization</p>721 </div>722 </div>723 </div>724 </div>725 </div>726 </div>727 <script>728 function toggleComplexity() {729 const toggle = document.getElementById('complexityToggle');730 const explanation = document.getElementById('codeExplanation');731 732 if (toggle.textContent === 'Show Advanced') {733 toggle.textContent = 'Show Basic';734 // Add advanced explanations735 explanation.innerHTML += `736 <div class="bg-gray-800/50 p-3 rounded-lg border-l-4 border-green-400">737 <div class="flex items-center">738 <i data-feather="code" class="text-green-400 mr-2"></i>739 <div class="text-green-400 font-medium">Advanced Analysis</div>740 </div>741 <div class="mt-2 ml-6 text-gray-400">742 <p>• Potential race conditions: None</p>743 <p>• Memory leaks: Unlikely</p>744 <p>• Side effects: Pure function</p>745 </div>746 </div>747 `;748 } else {749 toggle.textContent = 'Show Advanced';750 // Remove advanced explanations751 const advanced = explanation.querySelector('.border-l-4.border-green-400');752 if (advanced) advanced.remove();753 }754 feather.replace();755 }756 757 function showPerformance() {758 const metrics = document.getElementById('analysisMetrics');759 metrics.innerHTML = `760 <div class="bg-gray-800/50 p-3 rounded-lg">761 <div class="flex items-center justify-between">762 <div class="font-medium flex items-center">763 <i data-feather="clock" class="text-blue-400 mr-2"></i>764 <span>Time Complexity</span>765 </div>766 <span class="text-green-400 text-xs bg-green-400/10 px-2 py-0.5 rounded-full">O(n)</span>767 </div>768 <div class="mt-2 text-gray-400">769 <p>• Linear time operation based on input size</p>770 <p>• No nested loops or recursive calls</p>771 </div>772 </div>773 <div class="bg-gray-800/50 p-3 rounded-lg">774 <div class="flex items-center justify-between">775 <div class="font-medium flex items-center">776 <i data-feather="cpu" class="text-purple-400 mr-2"></i>777 <span>Memory Usage</span>778 </div>779 <span class="text-yellow-400 text-xs bg-yellow-400/10 px-2 py-0.5 rounded-full">O(1)</span>780 </div>781 <div class="mt-2 text-gray-400">782 <p>• Constant space complexity</p>783 <p>• Only primitive variables used</p>784 </div>785 </div>786 `;787 feather.replace();788 }789 790 function showSecurity() {791 const metrics = document.getElementById('analysisMetrics');792 metrics.innerHTML = `793 <div class="bg-gray-800/50 p-3 rounded-lg">794 <div class="flex items-center justify-between">795 <div class="font-medium flex items-center">796 <i data-feather="shield" class="text-red-400 mr-2"></i>797 <span>Security Analysis</span>798 </div>799 <span class="text-red-400 text-xs bg-red-400/10 px-2 py-0.5 rounded-full">3 risks</span>800 </div>801 <div class="mt-2 text-gray-400">802 <p>• No input sanitization</p>803 <p>• Potential type coercion issues</p>804 <p>• No rate limiting protection</p>805 </div>806 </div>807 <div class="bg-gray-800/50 p-3 rounded-lg">808 <div class="flex items-center justify-between">809 <div class="font-medium flex items-center">810 <i data-feather="lock" class="text-green-400 mr-2"></i>811 <span>Recommendations</span>812 </div>813 </div>814 <div class="mt-2 text-gray-400">815 <p>• Add input validation for array elements</p>816 <p>• Implement proper error handling</p>817 <p>• Consider using TypeScript</p>818 </div>819 </div>820 `;821 feather.replace();822 }823 824 function showBestPractices() {825 const metrics = document.getElementById('analysisMetrics');826 metrics.innerHTML = `827 <div class="bg-gray-800/50 p-3 rounded-lg">828 <div class="flex items-center justify-between">829 <div class="font-medium flex items-center">830 <i data-feather="award" class="text-yellow-400 mr-2"></i>831 <span>Code Quality</span>832 </div>833 <span class="text-green-400 text-xs bg-green-400/10 px-2 py-0.5 rounded-full">85%</span>834 </div>835 <div class="mt-2 text-gray-400">836 <p>• Good function naming</p>837 <p>• Clear error handling</p>838 <p>• Missing JSDoc comments</p>839 </div>840 </div>841 <div class="bg-gray-800/50 p-3 rounded-lg">842 <div class="flex items-center justify-between">843 <div class="font-medium flex items-center">844 <i data-feather="zap" class="text-blue-400 mr-2"></i>845 <span>Optimizations</span>846 </div>847 </div>848 <div class="mt-2 text-gray-400">849 <p>• Use reduce() instead of forEach</p>850 <p>• Add floating point precision</p>851 <p>• Consider early returns</p>852 </div>853 </div>854 `;855 feather.replace();856 }857 </script>858 859 <!-- CTA Section -->860<div class="bg-gradient-to-r from-primary/20 to-secondary/20 py-16 px-4 sm:px-6 lg:px-8">861 <div class="max-w-3xl mx-auto text-center">862 <h2 class="text-3xl font-extrabold text-white sm:text-4xl">863 Ready to revolutionize your coding workflow?864 </h2>865 <p class="mt-3 text-xl text-gray-300">866 Join thousands of developers who are coding smarter with AI assistance.867 </p>868 <div class="mt-10 sm:flex sm:justify-center">869 <div class="rounded-md shadow">870 <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary/90 md:py-4 md:text-lg md:px-10">871 Start free trial872 </a>873 </div>874 <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">875 <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">876 See pricing877 </a>878 </div>879 </div>880 </div>881 </div>882 883 <!-- Footer -->884 <footer class="bg-gray-900/80 backdrop-blur-md border-t border-gray-800 mt-20">885 <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">886 <div class="grid grid-cols-2 md:grid-cols-4 gap-8">887 <div>888 <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3>889 <ul class="mt-4 space-y-4">890 <li><a href="#" class="text-base text-gray-300 hover:text-white">Features</a></li>891 <li><a href="#" class="text-base text-gray-300 hover:text-white">Pricing</a></li>892 <li><a href="#" class="text-base text-gray-300 hover:text-white">API</a></li>893 <li><a href="#" class="text-base text-gray-300 hover:text-white">Integrations</a></li>894 </ul>895 </div>896 <div>897 <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3>898 <ul class="mt-4 space-y-4">899 <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li>900 <li><a href="#" class="text-base text-gray-300 hover:text-white">Guides</a></li>901 <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>902 <li><a href="#" class="text-base text-gray-300 hover:text-white">Support</a></li>903 </ul>904 </div>905 <div>906 <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>907 <ul class="mt-4 space-y-4">908 <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li909</body>910</html>