docs.html (31811B)
1 <!DOCTYPE html> 2 <html lang="en" class="scroll-smooth"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Documentation // Cloud Code Compiler</title> 7 <link rel="icon" type="image/x-icon" href="https://compiler.aranag.site/logo.png"> 8 9 <!-- Fonts --> 10 <link rel="preconnect" href="https://fonts.googleapis.com"> 11 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 12 <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet"> 13 14 <!-- Libraries --> 15 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> 16 <script src="https://cdn.tailwindcss.com"></script> 17 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> 18 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"> 19 20 <style> 21 :root { 22 --bg-main: #050505; 23 --accent: #bef264; /* Lime 300 */ 24 --text-muted: #737373; 25 --border-color: rgba(255, 255, 255, 0.1); 26 } 27 28 body { 29 font-family: 'Inter', sans-serif; 30 background-color: var(--bg-main); 31 color: #f5f5f5; 32 line-height: 1.6; 33 } 34 35 .font-mono { font-family: 'JetBrains Mono', monospace; } 36 .font-heading { font-family: 'Space Grotesk', sans-serif; } 37 38 /* Custom Scrollbar */ 39 ::-webkit-scrollbar { width: 8px; } 40 ::-webkit-scrollbar-track { background: #050505; } 41 ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; } 42 ::-webkit-scrollbar-thumb:hover { background: #555; } 43 44 /* Doc Sections */ 45 .doc-section { 46 margin-bottom: 4rem; 47 scroll-margin-top: 6rem; 48 border-bottom: 1px solid rgba(255,255,255,0.05); 49 padding-bottom: 3rem; 50 } 51 .doc-section:last-child { border-bottom: none; } 52 53 .code-block { 54 background: #0f1115; 55 border: 1px solid var(--border-color); 56 border-radius: 0.75rem; 57 padding: 1rem; 58 margin: 1.5rem 0; 59 font-size: 0.9rem; 60 overflow-x: auto; 61 } 62 63 .nav-link { 64 display: block; 65 padding: 0.5rem 1rem; 66 color: var(--text-muted); 67 border-left: 2px solid transparent; 68 transition: all 0.2s; 69 } 70 .nav-link:hover, .nav-link.active { 71 color: var(--accent); 72 border-left-color: var(--accent); 73 background: rgba(190, 242, 100, 0.05); 74 } 75 76 /* Noise Overlay */ 77 .bg-noise { 78 position: fixed; top: 0; left: 0; width: 100%; height: 100%; 79 pointer-events: none; z-index: 0; opacity: 0.03; 80 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); 81 } 82 </style> 83 </head> 84 <body class="antialiased selection:bg-lime-300 selection:text-black"> 85 86 <div class="bg-noise"></div> 87 88 <!-- Layout Grid --> 89 <div class="max-w-7xl mx-auto px-6 py-12 grid grid-cols-1 lg:grid-cols-4 gap-12 relative z-10"> 90 91 <!-- Sidebar Navigation --> 92 <aside class="hidden lg:block col-span-1 sticky top-12 h-[calc(100vh-6rem)] overflow-y-auto pr-4"> 93 <div class="mb-8"> 94 <a href="./index.html" class="flex items-center gap-2 group"> 95 <i class="fas fa-arrow-left text-neutral-500 group-hover:text-white transition-colors"></i> 96 <span class="font-heading font-bold text-xl text-white">Back to Home</span> 97 </a> 98 </div> 99 100 <nav class="space-y-1"> 101 <p class="px-4 text-xs font-mono text-neutral-500 uppercase tracking-widest mb-2">Core System</p> 102 <a href="#architecture" class="nav-link font-mono text-sm">01. Architecture</a> 103 <a href="#editor" class="nav-link font-mono text-sm text-lime-300">02. Editor & Tools (NEW)</a> 104 <a href="#communication" class="nav-link font-mono text-sm">03. WebSocket I/O</a> 105 106 <p class="px-4 text-xs font-mono text-neutral-500 uppercase tracking-widest mb-2 mt-6">Engines</p> 107 <a href="#engines" class="nav-link font-mono text-sm">04. Execution Engines</a> 108 109 <p class="px-4 text-xs font-mono text-neutral-500 uppercase tracking-widest mb-2 mt-6">Intelligence</p> 110 <a href="#ai-debug" class="nav-link font-mono text-sm">05. AI Auto-Debug</a> 111 112 <p class="px-4 text-xs font-mono text-neutral-500 uppercase tracking-widest mb-2 mt-6">Data</p> 113 <a href="#persistence" class="nav-link font-mono text-sm">06. Sharing & Persistence</a> 114 <a href="#lifecycle" class="nav-link font-mono text-sm">07. Data Lifecycle</a> 115 <a href="#security" class="nav-link font-mono text-sm">08. Security</a> 116 117 <p class="px-4 text-xs font-mono text-neutral-500 uppercase tracking-widest mb-2 mt-6">Community</p> 118 <a href="#contribution" class="nav-link font-mono text-sm">09. Contribution</a> 119 <a href="#disclaimer" class="nav-link font-mono text-sm text-red-400">10. Disclaimer</a> 120 </nav> 121 122 <div class="mt-12 p-4 rounded-xl bg-white/5 border border-white/10"> 123 <p class="text-xs text-neutral-400 mb-2">Tech Stack</p> 124 <div class="flex flex-wrap gap-2"> 125 <span class="text-xs px-2 py-1 rounded bg-black border border-white/10 text-lime-300 font-mono">CodeMirror</span> 126 <span class="text-xs px-2 py-1 rounded bg-black border border-white/10 text-lime-300 font-mono">Gemini 2.5</span> 127 <span class="text-xs px-2 py-1 rounded bg-black border border-white/10 text-lime-300 font-mono">Firebase</span> 128 <span class="text-xs px-2 py-1 rounded bg-black border border-white/10 text-lime-300 font-mono">aiohttp</span> 129 </div> 130 </div> 131 </aside> 132 133 <!-- Main Content --> 134 <main class="col-span-1 lg:col-span-3"> 135 136 <!-- Mobile Header --> 137 <div class="lg:hidden mb-12"> 138 <a href="./index.html" class="flex items-center gap-2 text-neutral-400 hover:text-white mb-6"> 139 <i class="fas fa-arrow-left"></i> Return Home 140 </a> 141 <h1 class="text-4xl font-heading font-bold text-white">System Documentation</h1> 142 </div> 143 144 <!-- Intro --> 145 <div class="mb-16 border-b border-white/10 pb-12"> 146 <h1 class="hidden lg:block text-5xl font-heading font-bold text-white mb-6">System Documentation</h1> 147 <p class="text-xl text-neutral-400 leading-relaxed max-w-3xl"> 148 A comprehensive technical overview of the Cloud Code Compiler v2.0. This document covers the full stack, from the CodeMirror-enhanced frontend to the AI-powered debugging backend and real-time execution engines. 149 </p> 150 </div> 151 152 <!-- 01 Architecture --> 153 <section id="architecture" class="doc-section"> 154 <h2 class="text-2xl font-heading font-bold text-lime-300 mb-6 flex items-center"> 155 <span class="mr-3 text-neutral-600">01.</span> Architecture 156 </h2> 157 <p class="text-neutral-300 mb-4"> 158 The platform operates as a distributed system designed for low-latency feedback. It replaces traditional HTTP polling with persistent WebSocket connections, enabling interactive coding (REPL-like behavior) over the web. 159 </p> 160 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 my-8"> 161 <div class="p-6 rounded-xl bg-white/5 border border-white/10"> 162 <h3 class="text-white font-bold mb-2"><i class="fas fa-laptop-code text-lime-300 mr-2"></i> Frontend (Client)</h3> 163 <ul class="text-sm text-neutral-400 space-y-2"> 164 <li>• <strong>Editor:</strong> CodeMirror 5 (Dracula Theme)</li> 165 <li>• <strong>Terminal:</strong> Xterm.js with FitAddon</li> 166 <li>• <strong>State:</strong> Browser LocalStorage</li> 167 <li>• <strong>Intelligence:</strong> Client-side Error Parsing</li> 168 </ul> 169 </div> 170 <div class="p-6 rounded-xl bg-white/5 border border-white/10"> 171 <h3 class="text-white font-bold mb-2"><i class="fas fa-server text-lime-300 mr-2"></i> Backend (Server)</h3> 172 <ul class="text-sm text-neutral-400 space-y-2"> 173 <li>• <strong>Server:</strong> Python <code>aiohttp</code> (AsyncIO)</li> 174 <li>• <strong>Runtime:</strong> <code>subprocess</code> pipelines</li> 175 <li>• <strong>AI Engine:</strong> Google Gemini 2.5 Flash</li> 176 <li>• <strong>Database:</strong> Firebase Firestore (NoSQL)</li> 177 </ul> 178 </div> 179 </div> 180 </section> 181 182 <!-- 02 Editor --> 183 <section id="editor" class="doc-section"> 184 <h2 class="text-2xl font-heading font-bold text-lime-300 mb-6 flex items-center"> 185 <span class="mr-3 text-neutral-600">02.</span> Professional Editor Experience 186 </h2> 187 <p class="text-neutral-300 mb-4"> 188 Replaced the standard textarea with <strong>CodeMirror</strong> to provide an IDE-grade environment directly in the browser. 189 </p> 190 191 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> 192 <div class="p-4 border border-lime-300/20 bg-lime-300/5 rounded-lg"> 193 <h4 class="text-lime-300 font-bold mb-2">Visual & Editing</h4> 194 <ul class="text-xs text-neutral-300 space-y-1"> 195 <li>• <strong>Syntax Highlighting:</strong> Dracula theme for easy reading.</li> 196 <li>• <strong>Line Numbers:</strong> Essential for debugging.</li> 197 <li>• <strong>Bracket Matching:</strong> Visual cues for matching parentheses.</li> 198 <li>• <strong>Auto-Indent:</strong> Smart indentation for Python and C++.</li> 199 </ul> 200 </div> 201 <div class="p-4 border border-white/10 bg-white/5 rounded-lg"> 202 <h4 class="text-white font-bold mb-2">Developer Tools</h4> 203 <ul class="text-xs text-neutral-300 space-y-1"> 204 <li>• <strong>Undo/Redo:</strong> <code>Ctrl+Z</code> / <code>Ctrl+Y</code> support with history stack.</li> 205 <li>• <strong>Mobile Helper Bar:</strong> Sticky keys for <code>{ } [ ] ;</code> on touch devices.</li> 206 <li>• <strong>Export:</strong> Download code as <code>.py</code>, <code>.c</code>, or <code>.cpp</code> files.</li> 207 <li>• <strong>Clear Code:</strong> Quick reset with confirmation modal.</li> 208 </ul> 209 </div> 210 </div> 211 </section> 212 213 <!-- 03 Communication --> 214 <section id="communication" class="doc-section"> 215 <h2 class="text-2xl font-heading font-bold text-lime-300 mb-6 flex items-center"> 216 <span class="mr-3 text-neutral-600">03.</span> WebSocket I/O Protocol 217 </h2> 218 <p class="text-neutral-300 mb-4"> 219 Real-time interaction handles input/output streams efficiently. The server streams <code>stdout</code> characters immediately, preventing "hanging" on long-running processes. 220 </p> 221 222 <div class="code-block"> 223 <pre><code class="language-json">// 1. Run Command (Client -> Server) 224 { "type": "run", "language": "python", "code": "print('Hello')" } 225 226 // 2. Output Stream (Server -> Client) 227 // Streamed character-by-character or line-by-line 228 { "type": "stdout", "data": "H" } 229 { "type": "stdout", "data": "e" } ... 230 231 // 3. User Input (Client -> Server) 232 // Sent when user types in terminal 233 { "type": "input", "data": "user_input\n" }</code></pre> 234 </div> 235 </section> 236 237 <!-- 04 Engines --> 238 <section id="engines" class="doc-section"> 239 <h2 class="text-2xl font-heading font-bold text-lime-300 mb-6 flex items-center"> 240 <span class="mr-3 text-neutral-600">04.</span> Execution Engines 241 </h2> 242 <p class="text-neutral-300 mb-6"> 243 Each language runs in a specialized, isolated subprocess on the backend. 244 </p> 245 246 <div class="space-y-6"> 247 <div class="p-6 bg-white/5 rounded-xl border border-white/10"> 248 <div class="flex items-center gap-3 mb-4"> 249 <i class="fab fa-python text-2xl text-blue-400"></i> 250 <h3 class="text-xl font-bold text-white">Python 3 Engine</h3> 251 </div> 252 <p class="text-sm text-neutral-400 mb-4"> 253 The Python environment runs on the latest stable <strong>Python 3</strong> release. 254 </p> 255 <ul class="list-disc list-inside text-sm text-neutral-300 space-y-1"> 256 <li><strong>Execution:</strong> Code is written to a temporary file and executed via `python3 -u` (unbuffered) to ensure real-time output.</li> 257 <li><strong>Pip Packages:</strong> The environment comes pre-configured with standard libraries. <code>pip</code> is available in the backend environment, allowing for pre-installed packages to be imported (e.g., math, time, random).</li> 258 <li><strong>Indentation:</strong> The editor converts Tabs to 4 Spaces automatically to prevent <code>IndentationError</code>.</li> 259 </ul> 260 </div> 261 262 <div class="p-6 bg-white/5 rounded-xl border border-white/10"> 263 <div class="flex items-center gap-3 mb-4"> 264 <i class="fas fa-microchip text-2xl text-blue-600"></i> 265 <h3 class="text-xl font-bold text-white">C / C++ Compiler</h3> 266 </div> 267 <p class="text-sm text-neutral-400 mb-4"> 268 Powered by the <strong>GNU Compiler Collection (GCC)</strong>. 269 </p> 270 <ul class="list-disc list-inside text-sm text-neutral-300 space-y-1"> 271 <li><strong>C Language:</strong> Compiles via `gcc source.c -o app -lm -pthread`. Uses standard C11/C17 standards.</li> 272 <li><strong>C++ Language:</strong> Compiles via `g++ source.cpp -o app -lm -pthread`. Supports modern C++ standards.</li> 273 <li><strong>Extended Support:</strong> Explicitly links against the Math library (<code>-lm</code>) and Threads library (<code>-pthread</code>), enabling advanced mathematical operations and multi-threaded applications.</li> 274 <li><strong>Binary Execution:</strong> After compilation, the binary is immediately executed (`./app`), and output is piped to the WebSocket.</li> 275 <li><strong>Error Handling:</strong> Compilation errors (stderr) are captured and displayed in red in the terminal.</li> 276 </ul> 277 </div> 278 279 <!-- NEW PERFORMANCE BLOCK --> 280 <div class="p-6 bg-amber-500/5 rounded-xl border border-amber-500/20 mt-8"> 281 <div class="flex items-center gap-3 mb-4 text-amber-500"> 282 <i class="fas fa-tachometer-alt text-xl"></i> 283 <h3 class="text-lg font-bold">Performance Notes</h3> 284 </div> 285 <div class="text-sm text-neutral-300 leading-relaxed space-y-4"> 286 <p> 287 This project is currently hosted on <strong>Render’s free tier</strong>, which utilizes automatic sleep cycles to conserve resources. This introduces specific behavior patterns: 288 </p> 289 <ul class="list-disc list-inside space-y-2 text-neutral-400"> 290 <li><strong>Cold Starts:</strong> The first execution after a period of inactivity may take several seconds due to the container waking up.</li> 291 <li><strong>Warm Execution:</strong> Subsequent runs happen in real-time and are significantly faster.</li> 292 <li><strong>CPU Limits:</strong> CPU-intensive Python benchmarks are not representative of real-world interactive usage on this deployment.</li> 293 </ul> 294 </div> 295 </div> 296 297 </div> 298 </section> 299 300 <!-- 05 AI Auto-Debug --> 301 <section id="ai-debug" class="doc-section"> 302 <h2 class="text-2xl font-heading font-bold text-lime-300 mb-6 flex items-center"> 303 <span class="mr-3 text-neutral-600">05.</span> AI Auto-Debug System 304 </h2> 305 <p class="text-neutral-300 mb-4"> 306 The compiler monitors the output stream for common error patterns (e.g., <code>Traceback</code>, <code>Segmentation fault</code>, <code>error:</code>). 307 </p> 308 <div class="bg-black/30 p-4 rounded-lg border-l-2 border-lime-300"> 309 <h4 class="text-sm font-bold text-white mb-2">How it works:</h4> 310 <ol class="list-decimal list-inside text-xs text-neutral-400 space-y-2"> 311 <li><strong>Capture:</strong> The client buffers the last 4KB of terminal output.</li> 312 <li><strong>Trigger:</strong> If an error keyword is found, the "Ask AI" button appears.</li> 313 <li><strong>Processing:</strong> Code + Error Log is sent to <strong>Gemini 2.5 Flash</strong>.</li> 314 <li><strong>Response:</strong> The AI generates a JSON object containing a plain-English explanation and the corrected code block.</li> 315 <li><strong>Patch:</strong> The user can review the fix in a modal and apply it to the editor instantly.</li> 316 </ol> 317 </div> 318 </section> 319 320 <!-- 06 Persistence --> 321 <section id="persistence" class="doc-section"> 322 <h2 class="text-2xl font-heading font-bold text-lime-300 mb-6 flex items-center"> 323 <span class="mr-3 text-neutral-600">06.</span> Sharing & Persistence 324 </h2> 325 <p class="text-neutral-300 mb-6"> 326 Data storage is handled in two distinct layers to balance privacy and collaboration. 327 </p> 328 329 <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> 330 <div class="border border-white/10 rounded-xl p-5"> 331 <div class="flex items-center gap-2 mb-3 text-lime-300"> 332 <i class="fas fa-hdd"></i> 333 <h3 class="font-bold">Local Persistence</h3> 334 </div> 335 <p class="text-xs text-neutral-400 leading-relaxed"> 336 Every keystroke is saved to the browser's <code>localStorage</code>. This data never leaves your device until you execute or share it. 337 </p> 338 </div> 339 340 <div class="border border-white/10 rounded-xl p-5"> 341 <div class="flex items-center gap-2 mb-3 text-lime-300"> 342 <i class="fas fa-share-alt"></i> 343 <h3 class="font-bold">Cloud Sharing</h3> 344 </div> 345 <p class="text-xs text-neutral-400 leading-relaxed"> 346 Uploads a snapshot to <strong>Firebase</strong> generating a short 7-char ID (e.g., <code>?share=AbC123X</code>). 347 </p> 348 </div> 349 350 <div class="border border-white/10 rounded-xl p-5"> 351 <div class="flex items-center gap-2 mb-3 text-lime-300"> 352 <i class="fas fa-link"></i> 353 <h3 class="font-bold">Base64 / LZ Fallback</h3> 354 </div> 355 <p class="text-xs text-neutral-400 leading-relaxed"> 356 Code can be encoded directly into the URL (e.g., <code>?code=...</code>). 357 <br><span class="text-lime-300/80 mt-2 block">Pro Tip: Use <strong>LZ-String</strong> compression to reduce URL length by ~60% vs standard Base64.</span> 358 </p> 359 </div> 360 </div> 361 </section> 362 363 <!-- 07 Lifecycle --> 364 <section id="lifecycle" class="doc-section"> 365 <h2 class="text-2xl font-heading font-bold text-lime-300 mb-6 flex items-center"> 366 <span class="mr-3 text-neutral-600">07.</span> Data Lifecycle 367 </h2> 368 <div class="overflow-x-auto"> 369 <table class="w-full text-left text-sm text-neutral-400"> 370 <thead class="bg-white/5 text-white font-mono uppercase text-xs"> 371 <tr> 372 <th class="p-3">Stage</th> 373 <th class="p-3">Storage Location</th> 374 <th class="p-3">Duration</th> 375 <th class="p-3">Accessibility</th> 376 </tr> 377 </thead> 378 <tbody class="divide-y divide-white/5"> 379 <tr> 380 <td class="p-3 text-lime-300">Drafting</td> 381 <td class="p-3">Browser LocalStorage</td> 382 <td class="p-3">Persistent (User Control)</td> 383 <td class="p-3">Private (Device Only)</td> 384 </tr> 385 <tr> 386 <td class="p-3 text-lime-300">Execution</td> 387 <td class="p-3">Server RAM / Temp File</td> 388 <td class="p-3">Ephemeral (Seconds)</td> 389 <td class="p-3">System (Deleted after run)</td> 390 </tr> 391 <tr> 392 <td class="p-3 text-lime-300">Sharing</td> 393 <td class="p-3">Firebase Firestore</td> 394 <td class="p-3">Permanent</td> 395 <td class="p-3">Public (Link Holders)</td> 396 </tr> 397 </tbody> 398 </table> 399 </div> 400 </section> 401 402 <!-- 08 Security --> 403 <section id="security" class="doc-section"> 404 <h2 class="text-2xl font-heading font-bold text-lime-300 mb-6 flex items-center"> 405 <span class="mr-3 text-neutral-600">08.</span> Security Implementation 406 </h2> 407 <p class="text-neutral-300 mb-4"> 408 Security is enforced at the environment level to prevent abuse. 409 </p> 410 <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> 411 <div class="p-4 border border-white/10 bg-white/5 rounded-lg"> 412 <h4 class="text-white font-bold mb-2">Sanitized Environment</h4> 413 <p class="text-xs text-neutral-400"> 414 Subprocesses run with a stripped environment (`safe_env`). API keys, system paths, and sensitive variables are removed from the execution context. 415 </p> 416 </div> 417 <div class="p-4 border border-white/10 bg-white/5 rounded-lg"> 418 <h4 class="text-white font-bold mb-2">Session Isolation</h4> 419 <p class="text-xs text-neutral-400"> 420 Each client connection generates a unique <strong>UUID-based session directory</strong> (e.g., `temp_sessions/abc-123`). All temporary files are created within this isolated sandbox and are automatically wiped upon disconnection, preventing data leakage between concurrent users. 421 </p> 422 </div> 423 </div> 424 </section> 425 426 <!-- 09 Developer / Contribution --> 427 <section id="contribution" class="doc-section"> 428 <h2 class="text-2xl font-heading font-bold text-lime-300 mb-6 flex items-center"> 429 <span class="mr-3 text-neutral-600">09.</span> Developers & Contribution 430 </h2> 431 <p class="text-neutral-300 mb-6"> 432 We welcome contributions from the community. Whether you've found a bug, want to suggest a feature, or add support for a new language, here is how you can get involved. 433 </p> 434 435 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> 436 <!-- Open Source Card --> 437 <div class="p-6 bg-white/5 rounded-xl border border-white/10 hover:border-lime-300/50 transition-colors group"> 438 <i class="fab fa-github text-3xl text-white group-hover:text-lime-300 mb-4 transition-colors"></i> 439 <h3 class="text-xl font-bold text-white mb-2">Open Source</h3> 440 <p class="text-sm text-neutral-400 mb-6"> 441 The core infrastructure is open-source. Clone the repo, create a branch, and submit a Pull Request. 442 </p> 443 <div class="flex gap-3"> 444 <a href="https://github.com/notamitgamer/cloud-compiler/issues" target="_blank" class="px-3 py-1.5 rounded bg-white/10 text-xs font-mono hover:bg-white/20 transition-colors border border-white/10"> 445 <i class="fas fa-bug mr-1"></i> Report Bug 446 </a> 447 <a href="https://github.com/notamitgamer/cloud-compiler" target="_blank" class="px-3 py-1.5 rounded bg-lime-300/10 text-lime-300 text-xs font-mono hover:bg-lime-300/20 transition-colors border border-lime-300/20"> 448 <i class="fas fa-code-branch mr-1"></i> Fork Repo 449 </a> 450 </div> 451 </div> 452 453 <!-- Contact Card --> 454 <div class="p-6 bg-white/5 rounded-xl border border-white/10"> 455 <i class="fas fa-envelope-open-text text-3xl text-white mb-4"></i> 456 <h3 class="text-xl font-bold text-white mb-2">Direct Contact</h3> 457 <p class="text-sm text-neutral-400 mb-6"> 458 For security vulnerabilities, private feedback, or collaboration inquiries, please email directly. 459 </p> 460 <a href="mailto:amitdutta4255@gmail.com" class="text-lime-300 font-mono text-sm hover:underline flex items-center gap-2"> 461 <i class="fas fa-at"></i> amitdutta4255@gmail.com 462 </a> 463 </div> 464 </div> 465 </section> 466 467 <!-- 10 Disclaimer --> 468 <section id="disclaimer" class="doc-section"> 469 <h2 class="text-2xl font-heading font-bold text-lime-300 mb-6 flex items-center"> 470 <span class="mr-3 text-neutral-600">10.</span> Legal & Disclaimer 471 </h2> 472 <div class="p-6 rounded-xl border border-red-500/20 bg-red-500/5"> 473 <p class="text-neutral-300 mb-4"> 474 This compiler infrastructure utilizes Google's Generative AI services and Firebase for data storage. 475 </p> 476 <ul class="text-lime-300 font-mono text-sm mb-6 space-y-1"> 477 <li><i class="fas fa-envelope mr-2"></i> <a href="mailto:amitdutta4255@gmail.com" class="hover:underline">amitdutta4255@gmail.com</a></li> 478 <li><i class="fas fa-envelope mr-2"></i> <a href="mailto:mail@amit.is-a.dev" class="hover:underline">mail@amit.is-a.dev</a></li> 479 <li><i class="fab fa-github mr-2"></i> <a href="https://github.com/notamitgamer" target="_blank" class="hover:underline">@notamitgamer</a></li> 480 </ul> 481 <div class="text-neutral-400 text-sm border-t border-white/10 pt-4 leading-relaxed"> 482 <p class="mb-4"><strong class="text-red-400 uppercase">Disclaimer of Liability:</strong> This tool is provided "as is". Amit Dutta assumes no responsibility or liability for any consequences, errors, or data loss arising from the use of this compiler. This project is provided for demonstration purposes only.</p> 483 484 <p class="italic font-mono text-xs opacity-80 bg-black/20 p-3 border border-red-500/20 rounded"> 485 "I explicitly disclaim any affiliation with or responsibility for the ongoing operation of this project. I reserve the absolute right to modify, suspend, or permanently delete this compiler and its associated services at any time, for any reason, without prior notice." 486 </p> 487 </div> 488 </div> 489 </section> 490 491 </main> 492 </div> 493 494 <script> 495 hljs.highlightAll(); 496 497 // Simple scroll spy for nav 498 window.addEventListener('scroll', () => { 499 const sections = document.querySelectorAll('.doc-section'); 500 const navLinks = document.querySelectorAll('.nav-link'); 501 502 let current = ''; 503 sections.forEach(section => { 504 const sectionTop = section.offsetTop; 505 if (pageYOffset >= sectionTop - 150) { 506 current = section.getAttribute('id'); 507 } 508 }); 509 510 navLinks.forEach(link => { 511 link.classList.remove('active'); 512 if (link.getAttribute('href').includes(current)) { 513 link.classList.add('active'); 514 } 515 }); 516 }); 517 </script> 518 </body> 519 </html>