index.html (18428B)
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 <meta name="google-site-verification" content="pwteHw44Ax3N2B1zkFzVJB7NIK0-xgQGRihK_vtZTF4" /> 7 <title>Cloud Code Compiler // Amit Dutta</title> 8 <link rel="canonical" href="https://compiler.amit.is-a.dev/" /> 9 <link rel="icon" type="image/x-icon" href="https://compiler.amit.is-a.dev/logo.png"> 10 11 <!-- Fonts --> 12 <link rel="preconnect" href="https://fonts.googleapis.com"> 13 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 14 <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"> 15 16 <!-- Libraries --> 17 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> 18 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> 19 <script src="https://cdn.tailwindcss.com"></script> 20 21 <style> 22 :root { 23 --bg-main: #050505; 24 --accent: #bef264; /* Lime 300 */ 25 --text-muted: #737373; 26 --border-color: rgba(255, 255, 255, 0.1); 27 } 28 29 body { 30 font-family: 'Inter', sans-serif; 31 background-color: var(--bg-main); 32 color: #f5f5f5; 33 overflow-x: hidden; 34 } 35 36 /* Portfolio Aesthetic */ 37 .font-mono { font-family: 'JetBrains Mono', monospace; } 38 .font-heading { font-family: 'Space Grotesk', sans-serif; } 39 40 /* Noise Overlay */ 41 .bg-noise { 42 position: fixed; top: 0; left: 0; width: 100%; height: 100%; 43 pointer-events: none; z-index: 0; opacity: 0.03; 44 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"); 45 } 46 47 /* CRT Scanline */ 48 .crt-scanline { 49 position: fixed; top: 0; left: 0; width: 100%; height: 2px; 50 background: rgba(190, 242, 100, 0.1); opacity: 0.5; 51 pointer-events: none; z-index: 50; 52 animation: scanline 8s linear infinite; 53 } 54 @keyframes scanline { 0% { top: -10vh; } 100% { top: 110vh; } } 55 56 /* Compiler Card Styling */ 57 .compiler-card { 58 background: rgba(255, 255, 255, 0.02); 59 border: 1px solid var(--border-color); 60 border-radius: 1.5rem; 61 position: relative; 62 overflow: hidden; 63 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 64 z-index: 10; 65 } 66 67 .compiler-card:hover { 68 transform: translateY(-5px); 69 border-color: var(--accent); 70 box-shadow: 0 0 20px rgba(190, 242, 100, 0.1); 71 } 72 73 .compiler-card::before { 74 content: ''; 75 position: absolute; 76 inset: 0; 77 background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.06), transparent 40%); 78 opacity: 0; 79 transition: opacity 0.5s; 80 pointer-events: none; 81 } 82 83 .compiler-card:hover::before { 84 opacity: 1; 85 } 86 87 .icon-container { 88 background: rgba(255, 255, 255, 0.03); 89 border: 1px solid var(--border-color); 90 transition: all 0.3s ease; 91 } 92 93 .compiler-card:hover .icon-container { 94 border-color: var(--accent); 95 background: rgba(190, 242, 100, 0.1); 96 } 97 98 /* Feature Card (Smaller) */ 99 .feature-card { 100 background: rgba(255, 255, 255, 0.02); 101 border: 1px solid var(--border-color); 102 border-radius: 1rem; 103 padding: 1.5rem; 104 transition: all 0.3s; 105 } 106 .feature-card:hover { 107 background: rgba(255, 255, 255, 0.04); 108 border-color: rgba(190, 242, 100, 0.3); 109 } 110 111 /* Animations */ 112 .floating-code { 113 position: absolute; 114 font-family: 'JetBrains Mono', monospace; 115 font-size: 0.8rem; 116 color: var(--text-muted); 117 opacity: 0.2; 118 pointer-events: none; 119 animation: float 10s infinite ease-in-out; 120 } 121 @keyframes float { 122 0%, 100% { transform: translateY(0); } 123 50% { transform: translateY(-20px); } 124 } 125 126 /* Social Links */ 127 .social-link { 128 background: rgba(255, 255, 255, 0.03); 129 border: 1px solid var(--border-color); 130 color: #a3a3a3; 131 transition: all 0.3s ease; 132 } 133 .social-link:hover { 134 color: var(--accent); 135 border-color: var(--accent); 136 transform: translateY(-3px); 137 } 138 139 ::selection { background: var(--accent); color: black; } 140 141 .typewriter h1 { border-right: none; } 142 143 .fade-in-create { 144 animation: fadeIn 1s ease-in forwards; 145 opacity: 0; 146 } 147 @keyframes fadeIn { to { opacity: 1; } } 148 </style> 149 </head> 150 <body class="antialiased selection:bg-lime-300 selection:text-black"> 151 152 <div class="bg-noise"></div> 153 <div class="crt-scanline"></div> 154 155 <!-- Background Elements --> 156 <div class="fixed inset-0 z-0 overflow-hidden pointer-events-none"> 157 <div class="floating-code" style="top: 15%; left: 10%; animation-delay: 0s;">print("Hello World")</div> 158 <div class="floating-code" style="top: 25%; right: 15%; animation-delay: 2s;">#include <stdio.h></div> 159 <div class="floating-code" style="bottom: 20%; left: 20%; animation-delay: 4s;">std::cout << "Code";</div> 160 <div class="floating-code" style="bottom: 30%; right: 10%; animation-delay: 1s;">const int MAX = 100;</div> 161 </div> 162 163 <!-- Hero Section --> 164 <div class="relative min-h-screen flex flex-col items-center justify-center p-6 z-10"> 165 166 <header class="text-center mb-16" data-aos="fade-up"> 167 <div class="inline-block mb-4 px-4 py-1 rounded-full border border-white/10 bg-white/5 backdrop-blur-sm"> 168 <span class="text-xs font-mono text-lime-300 tracking-wider">/// V2.0 SYSTEM ONLINE</span> 169 </div> 170 <div class="typewriter max-w-4xl mx-auto"> 171 <h1 class="text-4xl sm:text-6xl md:text-7xl font-heading font-bold text-white mb-6 tracking-tight leading-tight"> 172 <span id="type-text"></span><br /> 173 <span id="create-text" class="text-lime-300 fade-in-create hidden">Execute.</span> 174 </h1> 175 </div> 176 <p class="sub-text-fade opacity-0 text-base sm:text-lg md:text-xl text-gray-400 max-w-3xl mx-auto leading-relaxed mt-4 font-light"> 177 Professional-grade remote execution. Now with AI debugging, local auto-save, and CodeMirror editor integration. 178 </p> 179 </header> 180 181 <!-- Compiler Cards --> 182 <main class="w-full max-w-6xl mx-auto px-4" data-aos="fade-up" data-aos-delay="200"> 183 <div class="grid grid-cols-1 md:grid-cols-3 gap-6" id="compiler-grid"> 184 185 <!-- C Compiler --> 186 <a href="./c.html" class="compiler-card p-8 group block"> 187 <div class="icon-container w-14 h-14 rounded-xl flex items-center justify-center mb-6"> 188 <span class="font-heading font-bold text-2xl text-white">C</span> 189 </div> 190 <h2 class="text-2xl font-heading font-bold text-white mb-2 group-hover:text-lime-300 transition-colors">Standard C</h2> 191 <p class="text-sm text-neutral-500 mb-6 leading-relaxed"> 192 Compile standard C programs via GCC. Now supports <strong>math libraries</strong> and <strong>multi-threading</strong> out of the box. 193 </p> 194 <div class="flex items-center text-xs font-mono text-lime-300 uppercase tracking-widest"> 195 Launch <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i> 196 </div> 197 </a> 198 199 <!-- C++ Compiler --> 200 <a href="./cpp.html" class="compiler-card p-8 group block"> 201 <div class="icon-container w-14 h-14 rounded-xl flex items-center justify-center mb-6"> 202 <span class="font-heading font-bold text-2xl text-white">C++</span> 203 </div> 204 <h2 class="text-2xl font-heading font-bold text-white mb-2 group-hover:text-lime-300 transition-colors">Modern C++</h2> 205 <p class="text-sm text-neutral-500 mb-6 leading-relaxed"> 206 Execute C++ code via G++. Features standard STL support, <strong>math</strong>, and <strong>threading</strong> capabilities. 207 </p> 208 <div class="flex items-center text-xs font-mono text-lime-300 uppercase tracking-widest"> 209 Launch <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i> 210 </div> 211 </a> 212 213 <!-- Python Compiler --> 214 <a href="./python.html" class="compiler-card p-8 group block"> 215 <div class="icon-container w-14 h-14 rounded-xl flex items-center justify-center mb-6"> 216 <i class="fab fa-python text-2xl text-white"></i> 217 </div> 218 <h2 class="text-2xl font-heading font-bold text-white mb-2 group-hover:text-lime-300 transition-colors">Python 3</h2> 219 <p class="text-sm text-neutral-500 mb-6 leading-relaxed"> 220 Full Python 3 environment with pip support. Includes enhanced indentation and real-time execution. 221 </p> 222 <div class="flex items-center text-xs font-mono text-lime-300 uppercase tracking-widest"> 223 Launch <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i> 224 </div> 225 </a> 226 227 </div> 228 </main> 229 230 <a href="#features" class="absolute bottom-10 animate-bounce text-neutral-600 hover:text-white transition-colors"> 231 <i class="fas fa-chevron-down text-xl"></i> 232 </a> 233 </div> 234 235 <!-- Features Section --> 236 <section id="features" class="py-32 px-6 border-t border-white/5 bg-black/20 z-10"> 237 <div class="max-w-6xl mx-auto"> 238 <div class="text-center mb-20" data-aos="fade-up"> 239 <h2 class="text-3xl sm:text-4xl font-heading font-bold text-white mb-4">Features & <span class="text-lime-300">Capabilities</span></h2> 240 <p class="text-neutral-400 max-w-xl mx-auto">Upgraded with developer-focused tools for a complete coding experience.</p> 241 </div> 242 243 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> 244 <!-- Feature: Pro Editor --> 245 <div class="feature-card" data-aos="fade-up" data-aos-delay="100"> 246 <i class="fas fa-code text-lime-300 mb-4 text-xl"></i> 247 <h3 class="text-lg font-bold text-white mb-2">Pro Code Editor</h3> 248 <p class="text-sm text-neutral-500 leading-relaxed">Powered by CodeMirror with Dracula theme, syntax highlighting, bracket matching, and line numbers.</p> 249 </div> 250 251 <!-- Feature: AI Debug --> 252 <div class="feature-card border-lime-300/30" data-aos="fade-up" data-aos-delay="200"> 253 <div class="flex justify-between items-start"> 254 <i class="fas fa-robot text-lime-300 mb-4 text-xl"></i> 255 <span class="text-[10px] bg-lime-300 text-black px-2 py-0.5 rounded font-bold uppercase">New</span> 256 </div> 257 <h3 class="text-lg font-bold text-white mb-2">AI Auto-Debug</h3> 258 <p class="text-sm text-neutral-500 leading-relaxed">Detects runtime errors and offers one-click code fixes powered by Gemini 2.5 Flash.</p> 259 </div> 260 261 <!-- Feature: Persistence --> 262 <div class="feature-card" data-aos="fade-up" data-aos-delay="300"> 263 <i class="fas fa-save text-lime-300 mb-4 text-xl"></i> 264 <h3 class="text-lg font-bold text-white mb-2">Auto-Save & Share</h3> 265 <p class="text-sm text-neutral-500 leading-relaxed">Never lose work. Code is saved locally automatically and can be stored in the cloud via share links.</p> 266 </div> 267 268 <!-- Feature: Mobile --> 269 <div class="feature-card" data-aos="fade-up" data-aos-delay="400"> 270 <i class="fas fa-mobile-alt text-lime-300 mb-4 text-xl"></i> 271 <h3 class="text-lg font-bold text-white mb-2">Mobile Optimized</h3> 272 <p class="text-sm text-neutral-500 leading-relaxed">Includes a custom helper bar for quick access to symbols like <code>{ } [ ] ;</code> on touch devices.</p> 273 </div> 274 275 <!-- Feature: Backend --> 276 <div class="feature-card" data-aos="fade-up" data-aos-delay="500"> 277 <i class="fas fa-server text-lime-300 mb-4 text-xl"></i> 278 <h3 class="text-lg font-bold text-white mb-2">Real Backend</h3> 279 <p class="text-sm text-neutral-500 leading-relaxed">Code runs on a live Linux instance via WebSockets for authentic I/O streaming performance.</p> 280 </div> 281 282 <!-- Feature: Export --> 283 <div class="feature-card" data-aos="fade-up" data-aos-delay="600"> 284 <i class="fas fa-download text-lime-300 mb-4 text-xl"></i> 285 <h3 class="text-lg font-bold text-white mb-2">One-Click Export</h3> 286 <p class="text-sm text-neutral-500 leading-relaxed">Download your source code directly as a <code>.py</code>, <code>.c</code>, or <code>.cpp</code> file.</p> 287 </div> 288 </div> 289 </div> 290 </section> 291 292 <!-- Footer --> 293 <footer class="py-12 border-t border-white/5 z-10 bg-black/40"> 294 <div class="max-w-6xl mx-auto px-6 text-center"> 295 296 <div class="mb-8"> 297 <a href="./docs.html" class="inline-flex items-center gap-2 text-sm font-mono text-neutral-500 hover:text-lime-300 transition-colors uppercase tracking-widest border border-white/10 px-4 py-2 rounded-full bg-white/5 hover:bg-white/10"> 298 <i class="fas fa-book"></i> Read Documentation 299 </a> 300 </div> 301 302 <h3 class="text-xl font-heading font-bold text-white mb-8">Connect with Me</h3> 303 304 <div class="flex flex-wrap justify-center gap-4 mb-12"> 305 <a href="https://github.com/notamitgamer" target="_blank" class="social-link w-12 h-12 rounded-full flex items-center justify-center text-lg"> 306 <i class="fab fa-github"></i> 307 </a> 308 <a href="https://linkedin.com/in/notamitgamer" target="_blank" class="social-link w-12 h-12 rounded-full flex items-center justify-center text-lg"> 309 <i class="fab fa-linkedin-in"></i> 310 </a> 311 <a href="https://twitter.com/notamitgamer" target="_blank" class="social-link w-12 h-12 rounded-full flex items-center justify-center text-lg"> 312 <i class="fab fa-twitter"></i> 313 </a> 314 <a href="https://instagram.com/notamitgamer" target="_blank" class="social-link w-12 h-12 rounded-full flex items-center justify-center text-lg"> 315 <i class="fab fa-instagram"></i> 316 </a> 317 </div> 318 319 <div class="text-neutral-600 text-sm font-mono space-y-2"> 320 <p>© 2025 Amit Dutta. All rights reserved.</p> 321 <p><a href="https://amit.is-a.dev" class="hover:text-lime-300 transition-colors">amit.is-a.dev</a></p> 322 </div> 323 </div> 324 </footer> 325 326 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> 327 <script> 328 document.addEventListener('DOMContentLoaded', () => { 329 AOS.init({ 330 duration: 800, 331 once: true, 332 offset: 50 333 }); 334 335 // Card Hover Effect (Mouse tracking) 336 const cards = document.querySelectorAll('.compiler-card'); 337 document.getElementById('compiler-grid').onmousemove = e => { 338 for(const card of cards) { 339 const rect = card.getBoundingClientRect(); 340 const x = e.clientX - rect.left; 341 const y = e.clientY - rect.top; 342 card.style.setProperty('--mouse-x', `${x}px`); 343 card.style.setProperty('--mouse-y', `${y}px`); 344 } 345 }; 346 347 // Typewriter logic 348 const typeTextElement = document.getElementById('type-text'); 349 const createTextElement = document.getElementById('create-text'); 350 const textToType = "Code. Compile."; 351 let i = 0; 352 const speed = 75; // ms per char 353 354 function typeWriter() { 355 if (i < textToType.length) { 356 typeTextElement.textContent += textToType.charAt(i); 357 i++; 358 setTimeout(typeWriter, speed); 359 } else { 360 // Typing done, show "Create." with fade-in 361 createTextElement.classList.remove('hidden'); 362 363 // Trigger subtext fade 364 document.querySelector('.sub-text-fade').style.animation = 'fadeInDown 2s ease-in-out forwards 0.5s'; 365 } 366 } 367 368 // Start typing after a short delay 369 setTimeout(typeWriter, 500); 370 }); 371 </script> 372 </body> 373 </html>