1<!DOCTYPE html> 2<html lang="en" style="scroll-behavior:smooth;"> 3<head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>ClowdOps â AI Agents for Your Cloud Infrastructure</title> 7 <meta name="description" content="ClowdOps is a chat-oriented AI platform for running intelligent agents against your cloud infrastructure. Describe a task in plain language â the agent plans and executes it." /> 8 9 <!-- Favicon (root-absolute so it resolves from /privacy/ and /terms/ too) --> 10 <link rel="icon" type="image/svg+xml" href="/images/logo-mark.svg" /> 11 <link rel="icon" type="image/png" sizes="512x512" href="/images/logo-mark-512.png" /> 12 <link rel="apple-touch-icon" href="/images/logo-mark-512.png" /> 13 <link rel="canonical" href="https://clowdops.ai/" /> 14 15 <!-- Open Graph / social preview --> 16 <meta property="og:type" content="website" /> 17 <meta property="og:site_name" content="ClowdOps" /> 18 <meta property="og:title" content="ClowdOps â AI Agents for Your Cloud Infrastructure" /> 19 <meta property="og:description" content="A chat-oriented AI platform for running intelligent agents against your cloud infrastructure. Describe a task in plain language â the agent plans and executes it." /> 20 <meta property="og:url" content="https://clowdops.ai/" /> 21 <meta property="og:image" content="https://clowdops.ai/images/logo-mark-1024.png" /> 22 <meta name="twitter:card" content="summary" /> 23 <meta name="twitter:title" content="ClowdOps â AI Agents for Your Cloud Infrastructure" /> 24 <meta name="twitter:description" content="A chat-oriented AI platform for running intelligent agents against your cloud infrastructure." /> 25 <meta name="twitter:image" content="https://clowdops.ai/images/logo-mark-1024.png" /> 26 27 <!-- Fonts --> 28 <link rel="preconnect" href="https://fonts.googleapis.com" /> 29 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> 30 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" /> 31 32 <!-- Cloudflare Turnstile (anti-bot for the demo-request form) --> 33
33<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
33 34 35 <style> 36 /* ââ Design tokens ââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 37 :root { 38 --bg: hsl(240,8%,7%); 39 --bg-surface: hsl(240,8%,9%); 40 --bg-subtle: hsl(240,7%,11%); 41 --bg-muted: hsl(240,6%,14%); 42 --fg: hsl(0,0%,96%); 43 --fg-muted: hsl(240,5%,65%); 44 --border: hsl(240,6%,18%); 45 --border-soft: hsl(240,6%,22%); 46 --radius: 0.625rem; 47 --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif; 48 --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; 49 } 50 51 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } 52 html { font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x:hidden; scroll-padding-top:4.5rem; } 53 body { background:var(--bg); color:var(--fg); font-family:var(--font-sans); font-feature-settings:'cv11','ss01'; font-variation-settings:'opsz' 32; line-height:1.6; overflow-x:hidden; } 54 a { color:inherit; text-decoration:none; } 55 img { display:block; max-width:100%; } 56 button { cursor:pointer; font-family:inherit; } 57 58 /* ââ Utility ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 59 .container { max-width:1200px; margin:auto; padding:0 1.5rem; } 60 .mono { font-family:var(--font-mono); } 61 .section { padding:6rem 0; } 62 .section-sm { padding:4rem 0; } 63 64 /* ââ Typography âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 65 .display { font-size:clamp(2.5rem,6vw,4.5rem); font-weight:500; letter-spacing:-0.03em; line-height:1.1; } 66 .heading-lg { font-size:clamp(1.75rem,3.5vw,2.5rem); font-weight:500; letter-spacing:-0.025em; line-height:1.2; } 67 .heading-md { font-size:clamp(1.25rem,2vw,1.5rem); font-weight:500; letter-spacing:-0.02em; line-height:1.3; } 68 .body-lg { font-size:1.125rem; line-height:1.7; color:var(--fg-muted); } 69 .body-md { font-size:1rem; line-height:1.7; color:var(--fg-muted); } 70 .caption { font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--fg-muted); font-weight:500; } 71 72 /* ââ Buttons ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 73 .btn { display:inline-flex; align-items:center; gap:.5rem; padding:.625rem 1.25rem; border-radius:var(--radius); font-size:.875rem; font-weight:500; transition:opacity .15s,background .15s,border-color .15s; border:1px solid transparent; white-space:nowrap; } 74 .btn-primary { background:var(--fg); color:var(--bg); border-color:var(--fg); } 75 .btn-primary:hover { opacity:.85; } 76 .btn-outline { background:transparent; color:var(--fg); border-color:var(--border-soft); } 77 .btn-outline:hover { border-color:var(--fg-muted); } 78 .btn-lg { padding:.75rem 1.75rem; font-size:.9375rem; } 79 80 /* ââ Misc shared ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 81 .divider { border:none; border-top:1px solid var(--border); } 82 .badge { display:inline-flex; align-items:center; gap:.375rem; padding:.25rem .625rem; border-radius:999px; border:1px solid var(--border-soft); font-size:.75rem; font-weight:500; color:var(--fg-muted); background:var(--bg-subtle); } 83 .badge-dot { width:6px; height:6px; border-radius:50%; background:var(--fg-muted); } 84 .badge-dot.live { background:#4ade80; } 85 .card { background:var(--bg-surface); border:1px solid var(--border); border-radius:calc(var(--radius)*1.5); padding:1.75rem; } 86 .section-ctas { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-top:2rem; } 87 88 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 89 DEMO REQUEST MODAL 90 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
91 .modal-backdrop { 92 position:fixed; inset:0; z-index:200; 93 background:rgba(0,0,0,.75); 94 backdrop-filter:blur(6px); 95 -webkit-backdrop-filter:blur(6px); 96 display:flex; align-items:center; justify-content:center; 97 padding:1rem; 98 opacity:0; pointer-events:none; 99 transition:opacity .2s; 100 } 101 .modal-backdrop.open { opacity:1; pointer-events:all; } 102 .modal { 103 background:var(--bg-surface); 104 border:1px solid var(--border-soft); 105 border-radius:calc(var(--radius)*2); 106 padding:2.5rem; 107 width:100%; max-width:480px; 108 transform:translateY(20px); 109 transition:transform .25s ease; 110 position:relative; 111 } 112 .modal-backdrop.open .modal { transform:translateY(0); } 113 .modal-close { 114 position:absolute; top:.875rem; right:1rem; 115 background:transparent; border:none; 116 color:var(--fg-muted); font-size:1.125rem; line-height:1; 117 padding:.25rem .5rem; transition:color .15s; border-radius:.375rem; 118 } 119 .modal-close:hover { color:var(--fg); background:var(--bg-muted); } 120 .modal-title { font-size:1.375rem; font-weight:500; letter-spacing:-.025em; margin-bottom:.5rem; } 121 .modal-sub { font-size:.875rem; color:var(--fg-muted); margin-bottom:2rem; line-height:1.6; } 122 .form-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; } 123 @media (max-width:480px) { .form-row { grid-template-columns:1fr; } } 124 .form-field { display:flex; flex-direction:column; gap:.375rem; margin-bottom:.875rem; } 125 .form-field label { font-size:.7rem; font-weight:600; color:var(--fg-muted); letter-spacing:.06em; text-transform:uppercase; } 126 .form-field input, .form-field textarea { 127 background:var(--bg-subtle); border:1px solid var(--border-soft); 128 border-radius:var(--radius); padding:.625rem .875rem; 129 font-size:.875rem; font-family:var(--font-sans); color:var(--fg); 130 transition:border-color .15s; outline:none; width:100%; 131 } 132 .form-field input::placeholder, .form-field textarea::placeholder { color:var(--fg-muted); opacity:.6; } 133 .form-field input:focus, .form-field textarea:focus { border-color:var(--fg-muted); } 134 .form-field textarea { resize:vertical; min-height:90px; } 135 .form-submit { width:100%; justify-content:center; margin-top:.5rem; } 136 137 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 138 NAVBAR 139 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 140 .nav { 141 position:fixed; top:0; left:0; right:0; z-index:100; 142 background:color-mix(in srgb, var(--bg) 85%, transparent); 143 backdrop-filter:blur(12px); 144 -webkit-backdrop-filter:blur(12px); 145 border-bottom:1px solid var(--border); 146 } 147 .nav-inner { display:flex; align-items:center; height:3.5rem; gap:2rem; } 148 .nav-logo { display:flex; align-items:center; gap:.5rem; font-size:.9375rem; font-weight:600; letter-spacing:-.01em; flex-shrink:0; } 149 .nav-logo-mark { width:28px; height:28px; background:var(--fg); border-radius:6px; display:flex; align-items:center; justify-content:center; } 150 .nav-logo-mark svg { color:var(--bg); } 151 .nav-links { display:flex; align-items:center; gap:1.5rem; list-style:none; flex:1; } 152 .nav-links a { font-size:.875rem; color:var(--fg-muted); transition:color .15s; } 153 .nav-links a:hover { color:var(--fg); } 154 /* Integrations dropdown */ 155 .nav-dropdown { position:relative; } 156 .nav-dropdown-trigger { display:inline-flex; align-items:center; gap:.3rem; cursor:pointer; } 157 .nav-dropdown-trigger svg { transition:transform .15s; opacity:.6; } 158 .nav-dropdown:hover .nav-dropdown-trigger svg, 159 .nav-dropdown:focus-within .nav-dropdown-trigger svg { transform:rotate(180deg); } 160 .nav-dropdown-menu { 161 position:absolute; top:calc(100% + .5rem); left:0; min-width:13rem; 162 background:var(--bg); border:1px solid var(--border); border-radius:10px; 163 padding:.375rem; display:flex; flex-direction:column; gap:.125rem; 164 box-shadow:0 12px 32px -8px rgba(0,0,0,.35); 165 opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .15s, transform .15s, visibility .15s; 166 z-index:60; 167 } 168 .nav-dropdown:hover .nav-dropdown-menu, 169 .nav-dropdown:focus-within .nav-dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); } 170 .nav-dropdown-menu a { display:flex; flex-direction:column; gap:.1rem; padding:.5rem .625rem; border-radius:6px; color:var(--fg); } 171 .nav-dropdown-menu a:hover { background:var(--bg-surface); } 172 .nav-dropdown-menu a small { font-size:.75rem; color:var(--fg-muted); } 173 .nav-actions { display:flex; align-items:center; gap:.75rem; margin-left:auto; } 174 @media (max-width:768px) { .nav-links { display:none; } } 175 176 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 177 HERO 178 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 179 .hero { padding-top:9rem; padding-bottom:5rem; position:relative; overflow:hidden; } 180 181 /* animated background orbs */ 182 .hero-orb { 183 position:absolute; border-radius:50%; 184 filter:blur(90px); pointer-events:none; 185 animation:orb-drift ease-in-out infinite alternate; 186 } 187 .hero-orb-1 { width:520px; height:520px; background:hsl(220,70%,50%); opacity:.1; top:-140px; left:25%; animation-duration:20s; } 188 .hero-orb-2 { width:360px; height:360px; background:hsl(270,60%,55%); opacity:.09; top:60px; right:-80px; animation-duration:26s; animation-delay:-9s; } 189 .hero-orb-3 { width:300px; height:300px; background:hsl(190,65%,45%); opacity:.07; bottom:0; left:-60px; animation-duration:32s; animation-delay:-16s; }
190 @keyframes orb-drift { 191 from { transform:translate(0,0) scale(1); } 192 to { transform:translate(28px,22px) scale(1.07); } 193 } 194 195 .hero-content { position:relative; } 196 .hero-eyebrow { margin-bottom:1.5rem; } 197 .hero-title { margin-bottom:1.5rem; } 198 .hero-title em { font-style:normal; color:var(--fg-muted); } 199 .hero-body { max-width:600px; margin-bottom:2.5rem; } 200 .hero-ctas { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; } 201 202 /* ââ Chat demo window ââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 203 .demo-window { margin-top:4rem; background:var(--bg-surface); border:1px solid var(--border); border-radius:.75rem; overflow:hidden; box-shadow:0 32px 80px -12px hsl(0,0%,0%,.55); position:relative; } 204 .demo-titlebar { display:flex; align-items:center; gap:.5rem; padding:.75rem 1rem; border-bottom:1px solid var(--border); background:var(--bg-subtle); } 205 .demo-titlebar-dot { width:10px; height:10px; border-radius:50%; } 206 .demo-titlebar-dot:nth-child(1) { background:#ff5f57; } 207 .demo-titlebar-dot:nth-child(2) { background:#febc2e; } 208 .demo-titlebar-dot:nth-child(3) { background:#28c840; } 209 .demo-titlebar-label { flex:1; text-align:center; font-size:.75rem; color:var(--fg-muted); } 210 .demo-body { display:grid; grid-template-columns:220px 1fr; height:440px; } 211 .demo-sidebar { border-right:1px solid var(--border); padding:1rem 0; overflow:hidden; } 212 .demo-sidebar-section { padding:0 .75rem; margin-bottom:1.25rem; } 213 .demo-sidebar-label { font-size:.625rem; text-transform:uppercase; letter-spacing:.1em; color:var(--fg-muted); padding:0 .5rem; margin-bottom:.375rem; } 214 .demo-sidebar-item { display:flex; align-items:center; gap:.5rem; padding:.4rem .5rem; border-radius:.375rem; font-size:.75rem; color:var(--fg-muted); cursor:default; } 215 .demo-sidebar-item.active { background:var(--bg-muted); color:var(--fg); } 216 .demo-sidebar-item svg { flex-shrink:0; } 217 .demo-chat { display:flex; flex-direction:column; } 218 .demo-chat-messages { flex:1; overflow:hidden; padding:1.5rem; display:flex; flex-direction:column; gap:1.25rem; } 219 .demo-msg { display:flex; flex-direction:column; gap:.5rem; } 220 .demo-msg-user { align-self:flex-end; max-width:70%; } 221 .demo-msg-agent { align-self:flex-start; max-width:85%; } 222 .demo-msg-bubble { padding:.625rem .875rem; border-radius:.625rem; font-size:.8rem; line-height:1.5; } 223 .demo-msg-user .demo-msg-bubble { background:var(--fg); color:var(--bg); border-bottom-right-radius:.125rem; } 224 .demo-msg-agent .demo-msg-bubble { background:var(--bg-subtle); color:var(--fg); border:1px solid var(--border); border-bottom-left-radius:.125rem; } 225 .demo-steps { display:flex; flex-direction:column; gap:.35rem; padding:0 .875rem; } 226 .demo-step { display:flex; align-items:center; gap:.5rem; font-size:.725rem; color:var(--fg-muted); font-family:var(--font-mono); } 227 .demo-step-icon { width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.6rem; } 228 .demo-step-icon.done { background:hsl(142,70%,20%); color:#4ade80; } 229 .demo-step-icon.run { background:hsl(220,70%,20%); color:#60a5fa; } 230 .demo-step-icon.wait { background:var(--bg-muted); color:var(--fg-muted); } 231 .demo-composer { 232 padding:.75rem 1rem; border-top:1px solid var(--border); 233 display:flex; align-items:center; gap:.625rem; 234 cursor:pointer; transition:background .15s; 235 } 236 .demo-composer:hover { background:var(--bg-subtle); } 237 .demo-composer-placeholder { flex:1; font-size:.75rem; color:var(--fg-muted); opacity:.7; font-family:var(--font-sans); user-select:none; } 238 .demo-composer-btn { width:28px; height:28px; background:var(--fg); border:none; border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; pointer-events:none; } 239 @media (max-width:640px) { .demo-body { grid-template-columns:1fr; height:380px; } .demo-sidebar { display:none; } } 240 241 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 242 PROVIDERS 243 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 244 .providers-strip { 245 padding:3.75rem 0; 246 border-top:1px solid var(--border); 247 border-bottom:1px solid var(--border); 248 overflow:hidden; 249 background:linear-gradient(180deg, transparent 0%, hsla(240,7%,11%,.55) 100%); 250 } 251 .providers-strip .container { max-width:100%; padding:0; } 252 .providers-label { text-align:center; margin-bottom:.6rem; padding:0 1.5rem; } 253 .providers-sub { text-align:center; max-width:660px; margin:0 auto 1.75rem; padding:0 1.5rem; font-size:.85rem; line-height:1.6; color:var(--fg-muted); } 254 .providers-marquee { 255 position:relative; 256 overflow:hidden; 257 overflow:clip; 258 min-height:96px; 259 contain:layout paint; 260 clip-path:inset(0); 261 -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%); 262 mask-image:linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%); 263 } 264 .providers-track { 265 position:absolute; 266 top:.625rem; 267 left:0; 268 display:flex; 269 width:max-content; 270 will-change:transform; 271 animation:providers-marquee 42s linear infinite; 272 } 273 .providers-marquee:hover .providers-track { animation-play-state:paused; } 274 .providers-group { 275 display:flex; 276 align-items:center; 277 flex:0 0 auto; 278 gap:.875rem; 279 padding-right:.875rem; 280 } 281 .provider-logo { 282 width:142px; 283 height:78px; 284 display:flex; 285 flex-direction:column; 286 align-items:center; 287 justify-content:center; 288 gap:.55rem; 289 padding:.85rem .75rem; 290 border:1px solid var(--border); 291 border-radius:8px; 292 background:linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-subtle) 100%); 293 opacity:.74; 294 transition:opacity .2s, border-color .2s, transform .2s, background .2s; 295 } 296 .provider-logo:hover { 297 opacity:1; 298 border-color:var(--border-soft); 299 transform:translateY(-2px); 300 background:linear-gradient(180deg, hsl(240,7%,12%) 0%, var(--bg-subtle) 100%); 301 } 302 .provider-logo-icon { width:34px; height:34px; display:flex; align-items:center; justify-content:center; } 303 .provider-logo-icon.wide { width:48px; }
304 .provider-logo-icon img { 305 width:100%; 306 height:100%; 307 object-fit:contain; 308 filter:drop-shadow(0 0 10px rgba(255,255,255,.08)); 309 } 310 .provider-logo-name { font-size:.72rem; color:var(--fg-muted); font-weight:500; letter-spacing:.02em; white-space:nowrap; } 311 @keyframes providers-marquee { 312 from { transform:translateX(0); } 313 to { transform:translateX(-50%); } 314 } 315 @media (prefers-reduced-motion: reduce) { 316 .providers-marquee { 317 overflow:visible; 318 -webkit-mask-image:none; 319 mask-image:none; 320 } 321 .providers-track { 322 position:static; 323 width:auto; 324 animation:none; 325 transform:none; 326 justify-content:center; 327 padding:0 1.5rem; 328 } 329 .providers-group { 330 flex-wrap:wrap; 331 justify-content:center; 332 padding-right:0; 333 } 334 .providers-group[aria-hidden="true"] { display:none; } 335 .provider-logo:hover { transform:none; } 336 } 337 338 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 339 FEATURES GRID 340 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 341 .features-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1px; border:1px solid var(--border); border-radius:calc(var(--radius)*1.5); overflow:hidden; background:var(--border); } 342 .feature-cell { background:var(--bg); padding:2rem; transition:background .2s; } 343 .feature-cell:hover { background:var(--bg-surface); } 344 .feature-icon { width:36px; height:36px; background:var(--bg-subtle); border:1px solid var(--border); border-radius:.5rem; display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; color:var(--fg-muted); } 345 .feature-title { font-size:1rem; font-weight:500; margin-bottom:.5rem; letter-spacing:-.01em; } 346 .feature-body { font-size:.875rem; line-height:1.6; color:var(--fg-muted); } 347 348 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 349 HOW IT WORKS â animated flow 350 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 351 .phases-flow { margin-top:3rem; } 352 .phase-step { 353 display:grid; grid-template-columns:5.5rem 1fr; 354 gap:2.5rem; padding:2rem 0; 355 border-top:1px solid var(--border); 356 opacity:0; transform:translateX(-28px); 357 transition:opacity .55s ease, transform .55s ease; 358 } 359 .phase-step.visible { opacity:1; transform:translateX(0); } 360 .phase-step:last-child { border-bottom:1px solid var(--border); } 361 .phase-step-num { font-size:2.25rem; font-weight:600; font-family:var(--font-mono); color:var(--border-soft); line-height:1.1; padding-top:.2rem; } 362 .phase-step-name { font-size:1.125rem; font-weight:500; letter-spacing:-.015em; margin-bottom:.5rem; } 363 .phase-step-desc { font-size:.875rem; color:var(--fg-muted); line-height:1.65; max-width:580px; } 364 @media (max-width:640px) { .phase-step { grid-template-columns:3.5rem 1fr; gap:1.25rem; } .phase-step-num { font-size:1.75rem; } } 365 366 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 367 RESOURCE TREE 368 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 369 .resource-tree { 370 background:var(--bg-surface); border:1px solid var(--border); 371 border-radius:var(--radius); padding:1.5rem 1.25rem; 372 font-family:var(--font-mono); font-size:.725rem; line-height:1.9; 373 color:var(--fg-muted); overflow:hidden; 374 } 375 .resource-tree .r-provider { color:var(--fg); font-weight:500; } 376 .resource-tree .r-active::before { content:'â'; color:#4ade80; margin-right:.375rem; font-size:.5rem; vertical-align:middle; } 377 .resource-tree .r-warn::before { content:'â'; color:#fbbf24; margin-right:.375rem; font-size:.5rem; vertical-align:middle; } 378 379 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 380 TWO-COL HIGHLIGHT 381 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 382 .two-col { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; } 383 .two-col.reverse { direction:rtl; } 384 .two-col.reverse > * { direction:ltr; } 385 @media (max-width:768px) { .two-col { grid-template-columns:1fr; gap:2.5rem; } .two-col.reverse { direction:ltr; } } 386 .check-item { display:flex; align-items:flex-start; gap:.625rem; font-size:.875rem; color:var(--fg-muted); margin-bottom:.75rem; } 387 .check-item-icon { width:18px; height:18px; flex-shrink:0; margin-top:1px; background:var(--bg-subtle); border:1px solid var(--border-soft); border-radius:50%; display:flex; align-items:center; justify-content:center; } 388 .check-item-icon svg { color:#4ade80; } 389 390 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 391 SCHEDULE / CODE CARD 392 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 393 .code-card { background:var(--bg-subtle); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; } 394 .code-card-header { padding:.625rem 1rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.5rem; font-size:.75rem; color:var(--fg-muted); } 395 .code-card pre { padding:1.25rem 1rem; font-family:var(--font-mono); font-size:.75rem; line-height:1.7; color:var(--fg); overflow-x:auto; } 396 .code-card .c-comment { color:var(--fg-muted); } 397 .code-card .c-key { color:#93c5fd; } 398 .code-card .c-val { color:#86efac; } 399 .code-card .c-str { color:#fca5a5; } 400 401 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 402 MCP â coding-agent terminal mockup 403 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 404 .mcp-terminal { 405 background:var(--bg-surface); border:1px solid var(--border); 406 border-radius:.75rem; overflow:hidden; 407 box-shadow:0 24px 60px -16px hsl(0,0%,0%,.5); 408 } 409 .mcp-terminal pre { 410 padding:1.15rem 1.1rem; margin:0; 411 font-family:var(--font-mono); font-size:.735rem; line-height:1.85; 412 color:var(--fg); overflow-x:auto; 413 white-space:pre-wrap; word-break:break-word; 414 } 415 .mcp-terminal .m-prompt { color:var(--fg-muted); } 416 .mcp-terminal .m-cmd { color:#93c5fd; } 417 .mcp-terminal .m-str { color:#fca5a5; } 418 .mcp-terminal .m-flag { color:var(--fg-muted); } 419 .mcp-terminal .m-ok { color:#4ade80; } 420 .mcp-terminal .m-tool { color:#c4b5fd; } 421 .mcp-terminal .m-muted { color:var(--fg-muted); } 422 .mcp-terminal .m-warn { color:#fbbf24; } 423 .mcp-terminal .m-comment { color:var(--fg-muted); opacity:.75; } 424 425 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 426 TELEGRAM â animated agent-session mockup 427 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 428 /* Two independent phone mockups side by side. */ 429 .tg-duo { display:flex; gap:1.5rem; justify-content:center; align-items:flex-start; flex-wrap:wrap; } 430 .tg-phone-wrap { flex:1 1 320px; max-width:400px; } 431 .tg-cardlabel { font-size:.82rem; font-weight:600; color:var(--fg); margin-bottom:.6rem; } 432 .tg-cardlabel small { font-weight:400; color:var(--fg-muted); } 433 .tg-phone { 434 border:1px solid var(--border); border-radius:16px; 435 overflow:hidden; background:#0e1621; box-shadow:0 24px 48px -16px rgba(0,0,0,.5); 436 } 437 .tg-header { display:flex; align-items:center; gap:.6rem; padding:.7rem .9rem; background:#17212b; } 438 .tg-avatar { 439 width:34px; height:34px; border-radius:50%; flex-shrink:0; color:#fff; font-size:1rem; 440 background:linear-gradient(135deg,#5eb5f7,#3390ec); display:flex; align-items:center; justify-content:center; 441 } 442 .tg-title { font-size:.85rem; font-weight:600; color:#fff; line-height:1.2; } 443 .tg-sub { font-size:.72rem; color:#5eb5f7; } 444 .tg-body { 445 padding:1rem .9rem 1.1rem; display:flex; flex-direction:column; gap:.5rem; 446 background: 447 radial-gradient(circle at 20% 15%, rgba(94,181,247,.06), transparent 40%), 448 radial-gradient(circle at 80% 85%, rgba(51,144,236,.06), transparent 40%), 449 #0e1621; 450 } 451 /* Fixed min-heights so bubbles fading in/out never reflow the card. */ 452 .tg-body.inbound { min-height:360px; } 453 .tg-body.outbound { min-height:360px; justify-content:flex-start; } 454 .tg-chip { align-self:center; font-size:.7rem; color:#8aa0b4; background:rgba(255,255,255,.05); padding:.25rem .6rem; border-radius:10px; opacity:0; margin-bottom:.15rem; } 455 .tg-msg { 456 max-width:82%; padding:.5rem .7rem; border-radius:13px; font-size:.82rem; line-height:1.45; 457 opacity:0; will-change:opacity,transform; 458 } 459 .tg-msg.user { align-self:flex-end; background:#2b5278; color:#fff; border-bottom-right-radius:4px; } 460 .tg-msg.bot { align-self:flex-start; background:#1d2b3a; color:#e6edf3; border-bottom-left-radius:4px; } 461 .tg-msg .tg-mono { font-family:var(--font-mono,monospace); font-size:.78rem; } 462 .tg-warn { color:#fbbf24; }
463 .tg-ok { color:#4ade80; } 464 .tg-steps { display:flex; flex-direction:column; gap:.25rem; font-size:.78rem; color:#aebccb; } 465 .tg-steps .s-done { color:#4ade80; } 466 .tg-confirm-title { font-weight:600; color:#fff; margin-bottom:.15rem; } 467 .tg-confirm-meta { color:#8aa0b4; font-size:.76rem; } 468 .tg-btns { display:flex; gap:.45rem; margin-top:.6rem; } 469 .tg-btn { 470 flex:1; text-align:center; padding:.42rem 0; border-radius:9px; font-size:.8rem; font-weight:600; 471 border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); 472 } 473 .tg-btn.allow { color:#4ade80; } 474 .tg-btn.deny { color:#f87171; } 475 .tg-typing { align-self:flex-start; background:#1d2b3a; border-radius:13px; padding:.6rem .75rem; display:flex; gap:.28rem; opacity:0; } 476 .tg-typing span { width:6px; height:6px; border-radius:50%; background:#7d8e9e; animation:tgBlink 1.1s infinite; } 477 .tg-typing span:nth-child(2){ animation-delay:.18s; } .tg-typing span:nth-child(3){ animation-delay:.36s; } 478 479 /* JS-driven single chat: scrollable body + per-bubble entrance */ 480 .tg-body.chat { height:460px; overflow:hidden; justify-content:flex-start; scroll-behavior:smooth; } 481 .tg-cmd { color:#5eb5f7; font-weight:500; } 482 .tg-msg.user .tg-cmd { color:#d4ecff; } 483 .tg-in { animation:tgIn .34s ease both; } 484 @keyframes tgIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } 485 486 /* Two SEPARATE phones, each on its own self-contained loop: every bubble 487 fades in on cue, holds, then the whole sequence fades out and repeats. 488 Inbound = 13s; outbound = 9s. They run independently. */ 489 .tgi-user { animation:tgiU 13s infinite both; } 490 .tgi-typing { animation:tgiTy 13s infinite both; } 491 .tgi-steps { animation:tgiS 13s infinite both; } 492 .tgi-card { animation:tgiC 13s infinite both; } 493 .tgi-tap { animation:tgiTap 13s infinite both; } 494 .tgi-final { animation:tgiF 13s infinite both; } 495 .tgo-chip { animation:tgoChip 9s infinite both; } 496 .tgo-msg { animation:tgoMsg 9s infinite both; } 497 498 @keyframes tgBlink { 0%,100%{opacity:.3;} 50%{opacity:1;} } 499 /* inbound phone â sequential reveal, hold, fade out at the end */ 500 @keyframes tgiU { 0%,2%{opacity:0;transform:translateY(8px);} 5%,90%{opacity:1;transform:none;} 100%{opacity:0;} } 501 @keyframes tgiS { 0%,20%{opacity:0;transform:translateY(8px);} 23%,90%{opacity:1;transform:none;} 100%{opacity:0;} } 502 @keyframes tgiC { 0%,32%{opacity:0;transform:translateY(8px);} 35%,90%{opacity:1;transform:none;} 100%{opacity:0;} } 503 @keyframes tgiF { 0%,46%{opacity:0;transform:translateY(8px);} 50%,90%{opacity:1;transform:none;} 100%{opacity:0;} } 504 @keyframes tgiTy { 0%,8%{opacity:0;} 10%,18%{opacity:1;} 20%,100%{opacity:0;} } 505 @keyframes tgiTap { 506 0%,40% { background:rgba(255,255,255,.03); box-shadow:none; } 507 43%,46% { background:rgba(74,222,128,.22); box-shadow:0 0 0 2px rgba(74,222,128,.5) inset; } 508 49%,100% { background:rgba(74,222,128,.10); box-shadow:none; } 509 } 510 /* outbound phone â chip then digest, hold, fade out, repeat */ 511 @keyframes tgoChip { 0%,6%{opacity:0;transform:translateY(6px);} 12%,88%{opacity:1;transform:none;} 100%{opacity:0;} } 512 @keyframes tgoMsg { 0%,18%{opacity:0;transform:translateY(8px);} 26%,88%{opacity:1;transform:none;} 100%{opacity:0;} } 513 514 @media (prefers-reduced-motion: reduce) { 515 /* hold everything visible, no motion */ 516 .tgi-user,.tgi-steps,.tgi-card,.tgi-final,.tgo-chip,.tgo-msg { animation:none; opacity:1; transform:none; } 517 .tgi-typing,.tgi-tap { animation:none; } 518 .tgi-typing { opacity:0; } 519 .tg-typing span { animation:none; } 520 .tg-in { animation:none; opacity:1; transform:none; } 521 } 522 523 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 524 GUARDRAILS 525 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 526 .grants-panel { 527 background: var(--bg-surface); border: 1px solid var(--border); 528 border-radius: calc(var(--radius)*1.5); overflow: hidden; 529 } 530 .grants-panel-header { 531 padding: .625rem 1rem; border-bottom: 1px solid var(--border); 532 display: flex; align-items: center; gap: .5rem; 533 font-size: .75rem; color: var(--fg-muted); 534 background: var(--bg-subtle); 535 } 536 .grants-grid-inner { 537 display: grid; grid-template-columns: 1fr 1fr; gap: 0; 538 } 539 .grant-row { 540 display: flex; align-items: center; gap: .625rem; 541 padding: .625rem 1rem; font-size: .78rem; color: var(--fg-muted); 542 border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); 543 }
544 .grant-row:nth-child(2n) { border-right: none; } 545 .grant-row:nth-last-child(-n+2) { border-bottom: none; } 546 .grant-dot { 547 width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; 548 } 549 .grant-dot.allow { background: #4ade80; } 550 .grant-dot.deny { background: var(--border-soft); } 551 .grant-row.denied { opacity: .45; } 552 553 .confirm-card-mockup { 554 margin-top: 1rem; 555 background: var(--bg-surface); border: 1px solid var(--border-soft); 556 border-radius: calc(var(--radius)*1.5); padding: 1.25rem; 557 } 558 .confirm-card-title { 559 font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; 560 color: var(--fg-muted); font-weight: 600; margin-bottom: .75rem; 561 } 562 .confirm-cmd { 563 font-family: var(--font-mono); font-size: .72rem; color: var(--fg); 564 background: var(--bg-subtle); border: 1px solid var(--border); 565 border-radius: var(--radius); padding: .625rem .875rem; 566 margin-bottom: .75rem; word-break: break-all; 567 } 568 .confirm-meta { 569 display: flex; align-items: center; gap: .5rem; 570 font-size: .72rem; color: var(--fg-muted); margin-bottom: 1rem; 571 } 572 .confirm-category-badge { 573 display: inline-flex; align-items: center; gap: .3rem; 574 background: hsl(0,60%,18%); color: hsl(0,80%,75%); 575 border: 1px solid hsl(0,50%,30%); 576 border-radius: 999px; padding: .15rem .5rem; 577 font-size: .68rem; font-weight: 500; 578 } 579 .confirm-actions { 580 display: flex; gap: .5rem; 581 } 582 .confirm-btn { 583 flex: 1; padding: .4rem .5rem; border-radius: var(--radius); 584 font-size: .72rem; font-weight: 500; border: 1px solid var(--border-soft); 585 background: transparent; color: var(--fg-muted); 586 text-align: center; 587 } 588 .confirm-btn.allow { background: var(--fg); color: var(--bg); border-color: var(--fg); } 589 590 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 591 SECURITY â 3-column grid 592 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 593 .security-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.5rem; } 594 @media (max-width:900px) { .security-grid { grid-template-columns:repeat(2,1fr); } } 595 @media (max-width:520px) { .security-grid { grid-template-columns:1fr; } } 596 .security-item { display:flex; align-items:flex-start; gap:.875rem; padding:1.5rem; background:var(--bg-surface); border:1px solid var(--border); border-radius:calc(var(--radius)*1.5); transition:border-color .2s; } 597 .security-item:hover { border-color:var(--border-soft); } 598 .security-item-icon { width:38px; height:38px; background:var(--bg-subtle); border:1px solid var(--border); border-radius:.625rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--fg-muted); } 599 .security-item-title { font-size:.9375rem; font-weight:500; margin-bottom:.375rem; } 600 .security-item-body { font-size:.8rem; color:var(--fg-muted); line-height:1.55; } 601 602 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 603 CTA SECTION 604 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 605 .cta-section { padding:6rem 0; text-align:center; position:relative; overflow:hidden; } 606 .cta-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center,hsl(240,6%,14%) 0%,transparent 70%); pointer-events:none; } 607 .cta-section .container { position:relative; } 608 609 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 610 FOOTER 611 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 612 .footer { border-top:1px solid var(--border); padding:3rem 0 2rem; } 613 .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; } 614 .footer-brand-desc { font-size:.8rem; color:var(--fg-muted); line-height:1.6; margin-top:.75rem; max-width:240px; } 615 .footer-col-title { font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--fg-muted); margin-bottom:1rem; } 616 .footer-links { list-style:none; display:flex; flex-direction:column; gap:.625rem; } 617 .footer-links a { font-size:.8rem; color:var(--fg-muted); transition:color .15s; } 618 .footer-links a:hover { color:var(--fg); } 619 .footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:2rem; border-top:1px solid var(--border); font-size:.75rem; color:var(--fg-muted); } 620 @media (max-width:768px) { .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; } } 621 @media (max-width:480px) { .footer-grid { grid-template-columns:1fr; } .footer-bottom { flex-direction:column; gap:.5rem; text-align:center; } } 622 623 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 624 ANIMATIONS 625 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
626 @keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } } 627 .cursor-blink { display:inline-block; width:2px; height:1em; background:var(--fg); vertical-align:text-bottom; animation:blink 1.1s step-end infinite; } 628 @keyframes fade-up { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } 629 .fade-up { animation:fade-up .5s ease both; } 630 .delay-1 { animation-delay:.1s; } 631 .delay-2 { animation-delay:.2s; } 632 .delay-3 { animation-delay:.3s; } 633 .delay-4 { animation-delay:.4s; } 634 @keyframes shimmer { from { background-position:200% center; } to { background-position:-200% center; } } 635 .shimmer-bar { display:inline-block; width:80px; height:2px; border-radius:1px; background:linear-gradient(90deg,var(--border) 25%,var(--fg-muted) 50%,var(--border) 75%); background-size:200% auto; animation:shimmer 1.4s linear infinite; vertical-align:middle; } 636 637 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 638 MOBILE NAV â hamburger + slide-down menu 639 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 640 .nav-hamburger { 641 display: none; 642 background: transparent; 643 border: 1px solid var(--border-soft); 644 border-radius: var(--radius); 645 padding: .375rem .5rem; 646 color: var(--fg); 647 align-items: center; 648 justify-content: center; 649 transition: border-color .15s; 650 margin-left: auto; 651 flex-shrink: 0; 652 } 653 .nav-hamburger:hover { border-color: var(--fg-muted); } 654 @media (max-width:768px) { 655 .nav-hamburger { display: flex; } 656 .nav-actions { display: none; } 657 } 658 659 .mobile-menu { 660 position: fixed; 661 top: 3.5rem; left: 0; right: 0; 662 background: color-mix(in srgb, var(--bg) 97%, transparent); 663 backdrop-filter: blur(20px); 664 -webkit-backdrop-filter: blur(20px); 665 border-bottom: 1px solid var(--border); 666 padding: .5rem 1.5rem 1.5rem; 667 z-index: 99; 668 display: flex; flex-direction: column; 669 opacity: 0; pointer-events: none; 670 transform: translateY(-8px); 671 transition: opacity .18s, transform .18s; 672 } 673 .mobile-menu.open { opacity: 1; pointer-events: all; transform: translateY(0); } 674 .mobile-menu-link { 675 font-size: .9375rem; color: var(--fg-muted); 676 padding: .8rem 0; border-bottom: 1px solid var(--border); 677 display: block; transition: color .15s; 678 } 679 .mobile-menu-link:last-of-type { border-bottom: none; } 680 .mobile-menu-link:hover { color: var(--fg); } 681 .mobile-menu-actions { 682 display: flex; gap: .75rem; margin-top: 1.25rem; 683 } 684 .mobile-menu-actions .btn { flex: 1; justify-content: center; } 685 686 /* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 687 MOBILE â GENERAL RESPONSIVE FIXES 688 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 689 @media (max-width:640px) { 690 html { scroll-padding-top: 5rem; } 691 .section { padding: 3.5rem 0; } 692 .section-sm { padding: 2.5rem 0; } 693 .hero { padding-top: 5.5rem; padding-bottom: 3rem; } 694 695 /* compact floating mobile navbar */ 696 .nav { 697 top: .75rem; 698 left: 1rem; 699 right: 1rem; 700 border: 1px solid var(--border); 701 border-radius: 12px; 702 overflow: hidden; 703 } 704 .nav .container { padding: 0 .75rem; } 705 .nav-inner { height: 3rem; gap: 1rem; } 706 .nav-logo { font-size: .875rem; } 707 .nav-logo-mark { width: 26px;
707 height: 26px; } 708 .nav-hamburger { 709 width: 34px; 710 height: 34px; 711 padding: 0; 712 border-radius: 8px; 713 } 714 .mobile-menu { 715 top: 4.25rem; 716 left: 1rem; 717 right: 1rem; 718 border: 1px solid var(--border); 719 border-radius: 12px; 720 padding: .25rem 0 1rem; 721 overflow: hidden; 722 } 723 .mobile-menu .container { padding: 0 1rem; } 724 725 /* stack hero CTAs full-width */ 726 .hero-ctas { flex-direction: column; align-items: stretch; } 727 .hero-ctas .btn { justify-content: center; } 728 729 /* stack section doc/CTA buttons */ 730 .section-ctas { flex-direction: column; align-items: stretch; } 731 .section-ctas .btn { justify-content: center; } 732 733 /* tighter provider logos */ 734 .providers-strip { padding: 3rem 0; } 735 .providers-label { margin-bottom: 1.25rem; } 736 .providers-marquee { min-height: 88px; } 737 .providers-track { top: .5rem; } 738 .providers-group { gap: .65rem; padding-right: .65rem; } 739 .provider-logo { width: 118px; height: 70px; } 740 .provider-logo-icon { width: 30px; height: 30px; } 741 .provider-logo-icon.wide { width: 42px; } 742 743 /* grants grid â 1 col */ 744 .grants-grid-inner { grid-template-columns: 1fr; } 745 .grant-row { border-right: none !important; } 746 /* re-wire bottom borders for single column */ 747 .grant-row:nth-last-child(-n+2) { border-bottom: 1px solid var(--border) !important; } 748 .grant-row:last-child { border-bottom: none !important; } 749 750 /* confirmation actions wrap */ 751 .confirm-actions { flex-wrap: wrap; } 752 .confirm-btn { flex: 1 1 40%; } 753 } 754 755 @media (max-width:480px) { 756 /* features â single column */ 757 .features-grid { grid-template-columns: 1fr; } 758 759 /* resource tree: horizontally scrollable to handle deep nesting */ 760 .resource-tree { overflow-x: auto; font-size: .68rem; line-height: 1.75; } 761 762 /* modal: tighter padding */ 763 .modal { padding: 1.75rem 1.25rem; } 764 765 /* tighten section base padding further */
766 .section { padding: 2.75rem 0; } 767 .cta-section { padding: 3.5rem 0; } 768 } 769 </style> 770</head> 771<body> 772 773 774<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 775 DEMO REQUEST MODAL 776âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 777<div class="modal-backdrop" id="demoModal" role="dialog" aria-modal="true" aria-labelledby="modalTitle"> 778 <div class="modal"> 779 <button class="modal-close" id="modalClose" aria-label="Close">â</button> 780 <h2 class="modal-title" id="modalTitle">Get started with ClowdOps</h2> 781 <p class="modal-sub">Tell us a bit about yourself and we'll be in touch shortly.</p> 782 <form id="demoForm" novalidate> 783 <div class="form-row"> 784 <div class="form-field"> 785 <label for="firstName">First name</label> 786 <input type="text" id="firstName" name="firstName" required placeholder="Jane" autocomplete="given-name" /> 787 </div> 788 <div class="form-field"> 789 <label for="lastName">Last name</label> 790 <input type="text" id="lastName" name="lastName" required placeholder="Smith" autocomplete="family-name" /> 791 </div> 792 </div> 793 <div class="form-field"> 794 <label for="company">Company</label> 795 <input type="text" id="company" name="company" required placeholder="Acme Corp" autocomplete="organization" /> 796 </div> 797 <div class="form-field"> 798 <label for="email">Email</label> 799 <input type="email" id="email" name="email" required placeholder="[email protected]" autocomplete="email" /> 800 </div> 801 <div class="form-field"> 802 <label for="message">Message</label> 803 <textarea id="message" name="message" placeholder="What are you hoping to use ClowdOps for?"></textarea> 804 </div> 805 <!-- Honeypot: hidden from humans (off-screen + aria-hidden + tabindex). 806 Bots auto-fill it; the backend silently drops any filled submission. --> 807 <div aria-hidden="true" style="position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;"> 808 <label for="website">Website</label> 809 <input type="text" id="website" name="website" tabindex="-1" autocomplete="off" /> 810 </div> 811 <!-- Cloudflare Turnstile widget. Renders the cf-turnstile-response token 812 the submit handler sends as turnstileToken for server-side verify. --> 813 <div class="cf-turnstile" data-sitekey="0x4AAAAAADepLyLZA4s_AYwK" data-theme="dark" style="margin:.25rem 0 .75rem;"></div> 814 <button type="submit" class="btn btn-primary btn-lg form-submit"> 815 Send request 816 <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7H11M11 7L7.5 3.5M11 7L7.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 817 </button> 818 <p id="formStatus" role="status" aria-live="polite" style="display:none;margin-top:.875rem;font-size:.85rem;line-height:1.5;"></p> 819 </form> 820 </div> 821</div> 822 823 824<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 825 NAVBAR 826âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 827<header class="nav"> 828 <div class="container"> 829 <nav class="nav-inner"> 830 <a href="#home" class="nav-logo" aria-label="ClowdOps home"> 831 <div class="nav-logo-mark"> 832 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 833 <path d="M9.5 2C7.57 2 5.9 3.26 5.24 5.02C4.52 4.47 3.62 4.17 2.67 4.25C1.17 4.38 0 5.64 0 7.15C0 8.73 1.27 10 2.85 10H5.5L4 13H7L5.5 16H10.5L9 13H12L10.5 10H13.15C14.73 10 16 8.73 16 7.15C16 5.57 14.73 4.3 13.15 4.3C13.1 4.3 13.05 4.3 13 4.31C12.42 2.96 11.06 2 9.5 2Z" fill="currentColor"/> 834 </svg> 835 </div> 836 ClowdOps 837 </a> 838 839 <ul class="nav-links"> 840 <li><a href="#features">Features</a></li> 841 <li><a href="#how-it-works">How it works</a></li> 842 <li class="nav-dropdown"> 843 <a href="#mcp" class="nav-dropdown-trigger">Integrations 844 <svg width="9" height="9" viewBox="0 0 10 10" fill="none"><path d="M2.5 4l2.5 2.5L7.5 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg> 845 </a> 846 <div class="nav-dropdown-menu"> 847 <a href="#mcp">MCP & coding agents<small>Drive your cloud from Claude Code, Cursor, â¦</small></a> 848 <a href="#telegram">Telegram<small>Notify & drive the agent from a chat</small></a> 849 </div> 850 </li> 851 <li><a href="#providers">Providers</a></li> 852 <li><a href="/demos/">Demos</a></li> 853 <li><a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/README.md" target="_blank" rel="noopener">Docs</a></li> 854 </ul> 855 856 <div class="nav-actions"> 857 <a href="https://platform.clowdops.ai/login" class="btn btn-outline" style="padding:.5rem 1rem;font-size:.8125rem;">Sign in</a> 858 <button onclick="openModal()" class="btn btn-primary" style="padding:.5rem 1rem;font-size:.8125rem;">Get started</button> 859 </div> 860 861 <button class="nav-hamburger" id="navHamburger" aria-label="Open menu" aria-expanded="false" onclick="toggleMobileMenu()"> 862 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" id="hamburgerIcon"> 863 <rect y="3" width="18" height="1.5" rx=".75" fill="currentColor"/> 864 <rect y="8.25" width="18" height="1.5" rx=".75" fill="currentColor"/> 865 <rect y="13.5" width="18" height="1.5" rx=".75" fill="currentColor"/> 866 </svg> 867 </button> 868 </nav> 869 </div> 870</header> 871 872<div class="mobile-menu" id="mobileMenu" role="dialog" aria-label="Mobile navigation"> 873 <div class="container"> 874 <a href="#features" class="mobile-menu-link" onclick="closeMobileMenu()">Features</a> 875 <a href="#how-it-works" class="mobile-menu-link" onclick="closeMobileMenu()">How it works</a> 876 <a href="#mcp" class="mobile-menu-link" onclick="closeMobileMenu()">MCP & coding agents</a> 877 <a href="#telegram" class="mobile-menu-link" onclick="closeMobileMenu()">Telegram</a> 878 <a href="#providers" class="mobile-menu-link" onclick="closeMobileMenu()">Providers</a> 879 <a href="/demos/" class="mobile-menu-link" onclick="closeMobileMenu()">Demos</a> 880 <a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/README.md" target="_blank" rel="noopener" class="mobile-menu-link" onclick="closeMobileMenu()">Docs</a> 881 <div class="mobile-menu-actions"> 882 <a href="https://platform.clowdops.ai/login" class="btn btn-outline">Sign in</a> 883 <button onclick="openModal(); closeMobileMenu();" class="btn btn-primary">Get started</button> 884 </div> 885 </div> 886</div> 887 888 889<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 890 HERO 891âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 892<section class="hero" id="home"> 893 <!-- animated background orbs --> 894 <div class="hero-orb hero-orb-1" aria-hidden="true"></div> 895 <div class="hero-orb hero-orb-2" aria-hidden="true"></div> 896 <div class="hero-orb hero-orb-3" aria-hidden="true"></div> 897 898 <div class="container hero-content"> 899 <div class="hero-eyebrow fade-up">
900 <span class="badge"> 901 <span class="badge-dot live"></span> 902 Preview â now available 903 </span> 904 </div> 905 906 <h1 class="display hero-title fade-up delay-1"> 907 Your cloud,<br/> 908 <em>on command</em> 909 </h1> 910 911 <p class="body-lg hero-body fade-up delay-2"> 912 ClowdOps is a chat-oriented AI platform for running intelligent agents against your cloud infrastructure. Describe a task in plain language â the agent plans and executes it. 913 </p> 914 915 <div class="hero-ctas fade-up delay-3"> 916 <button onclick="openModal()" class="btn btn-primary btn-lg"> 917 Get Started 918 <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7H11M11 7L7.5 3.5M11 7L7.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 919 </button> 920 <a href="#how-it-works" class="btn btn-outline btn-lg">See how it works</a> 921 </div> 922 923 <!-- Demo window --> 924 <div class="demo-window fade-up delay-4"> 925 <div class="demo-titlebar"> 926 <div class="demo-titlebar-dot"></div> 927 <div class="demo-titlebar-dot"></div> 928 <div class="demo-titlebar-dot"></div> 929 <div class="demo-titlebar-label">ClowdOps â AWS Prod / Production</div> 930 </div> 931 <div class="demo-body"> 932 <!-- Sidebar --> 933 <div class="demo-sidebar"> 934 <div class="demo-sidebar-section"> 935 <div class="demo-sidebar-label">AWS Prod</div> 936 <div class="demo-sidebar-item active"> 937 <svg width="12" height="12" fill="none" viewBox="0 0 12 12"><rect x="1" y="1" width="4" height="4" rx="1" stroke="currentColor" stroke-width="1.2"/><rect x="7" y="1" width="4" height="4" rx="1" stroke="currentColor" stroke-width="1.2"/><rect x="1" y="7" width="4" height="4" rx="1" stroke="currentColor" stroke-width="1.2"/><rect x="7" y="7" width="4" height="4" rx="1" stroke="currentColor" stroke-width="1.2"/></svg> 938 S3 audit 939 </div> 940 <div class="demo-sidebar-item"> 941 <svg width="12" height="12" fill="none" viewBox="0 0 12 12"><circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.2"/><path d="M6 3.5v2.75L7.75 8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg> 942 CloudWatch errors 943 </div> 944 <div class="demo-sidebar-item"> 945 <svg width="12" height="12" fill="none" viewBox="0 0 12 12"><path d="M2 3h8M2 6h8M2 9h5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg> 946 Cost comparison 947 </div> 948 </div> 949 <div class="demo-sidebar-section"> 950 <div class="demo-sidebar-label">Yesterday</div> 951 <div class="demo-sidebar-item">IAM policy review</div> 952 <div class="demo-sidebar-item">Lambda timeouts</div> 953 <div class="demo-sidebar-item">RDS snapshot check</div> 954 </div> 955 </div> 956 957 <!-- Chat area --> 958 <div class="demo-chat"> 959 <div class="demo-chat-messages"> 960 <div class="demo-msg demo-msg-user"> 961 <div class="demo-msg-bubble">List all S3 buckets and flag any that have public access enabled.</div> 962 </div> 963 964 <div class="demo-msg demo-msg-agent"> 965 <div class="demo-steps"> 966 <div class="demo-step"> 967 <div class="demo-step-icon done">â</div> 968 Classified request as discovery + audit 969 </div> 970 <div class="demo-step"> 971 <div class="demo-step-icon done">â</div> 972 Listing buckets in us-east-1 region 973 </div> 974 <div class="demo-step"> 975 <div class="demo-step-icon done">â</div> 976 <span>s3:ListBuckets (us-east-1)</span> 977 </div> 978 <div class="demo-step"> 979 <div class="demo-step-icon done">â</div> 980 <span>s3:GetBucketPublicAccessBlock à 14</span> 981 </div> 982 <div class="demo-step"> 983 <div class="demo-step-icon run">â</div>
984 <span>Synthesising results <span class="shimmer-bar"></span></span> 985 </div> 986 </div> 987 </div> 988 989 <div class="demo-msg demo-msg-agent"> 990 <div class="demo-msg-bubble"> 991 Found <strong>14 buckets</strong> in us-east-1. <strong>2 have public access enabled</strong>:<br/><br/> 992 â <span class="mono">prod-assets-cdn</span> â ACL allows public-read<br/> 993 â <span class="mono">legacy-exports-2021</span> â bucket policy allows s3:GetObject for * 994 </div> 995 </div> 996 </div> 997 998 <!-- interactive composer â opens demo form --> 999 <div class="demo-composer" onclick="openModal()" title="Try it â request a demo"> 1000 <div class="demo-composer-placeholder">Type what you want to try with the agentâ¦<span class="cursor-blink"></span></div> 1001 <button class="demo-composer-btn" aria-label="Get started" tabindex="-1"> 1002 <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 10L10 6 2 2v3.5L7.5 6 2 6.5V10Z" fill="currentColor"/></svg> 1003 </button> 1004 </div> 1005 </div> 1006 </div> 1007 </div> 1008 </div> 1009</section> 1010 1011 1012<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1013 PROVIDERS STRIP 1014âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1015<section class="providers-strip" id="providers"> 1016 <div class="container"> 1017 <p class="caption providers-label">Works with your stack</p> 1018 <p class="providers-sub">Operate AWS, Google Cloud, Azure, and OCI â plus SSH-managed Linux hosts on-prem or anywhere else. Bring your own cloud, model-provider, and notification keys, and choose which model (Claude, GPT, Gemini, Bedrock) powers each project.</p> 1019 <div class="providers-marquee" aria-label="Cloud providers, model providers, and workflow tools"> 1020 <div class="providers-track"> 1021 <div class="providers-group" role="list"> 1022 <div class="provider-logo" role="listitem" title="Amazon Web Services"> 1023 <div class="provider-logo-icon wide"><img src="/images/stack/aws.svg" alt="" decoding="async" /></div> 1024 <span class="provider-logo-name">AWS</span> 1025 </div> 1026 <div class="provider-logo" role="listitem" title="Google Cloud"> 1027 <div class="provider-logo-icon"><img src="/images/stack/google-cloud.svg" alt="" decoding="async" /></div> 1028 <span class="provider-logo-name">Google Cloud</span> 1029 </div> 1030 <div class="provider-logo" role="listitem" title="Microsoft Azure"> 1031 <div class="provider-logo-icon"><img src="/images/stack/azure.svg" alt="" decoding="async" /></div> 1032 <span class="provider-logo-name">Azure</span> 1033 </div> 1034 <div class="provider-logo" role="listitem" title="GitHub"> 1035 <div class="provider-logo-icon"><img src="/images/stack/github.svg" alt="" decoding="async" /></div> 1036 <span class="provider-logo-name">GitHub</span> 1037 </div> 1038 <div class="provider-logo" role="listitem" title="GitLab"> 1039 <div class="provider-logo-icon"><img src="/images/stack/gitlab.svg" alt="" decoding="async" /></div> 1040 <span class="provider-logo-name">GitLab</span> 1041 </div> 1042 <div class="provider-logo" role="listitem" title="OpenAI"> 1043 <div class="provider-logo-icon"><img src="/images/stack/openai.svg" alt="" decoding="async" /></div> 1044 <span class="provider-logo-name">OpenAI</span> 1045 </div> 1046 <div class="provider-logo" role="listitem" title="Anthropic"> 1047 <div class="provider-logo-icon"><img src="/images/stack/anthropic.svg" alt="" decoding="async" /></div>
1048 <span class="provider-logo-name">Anthropic</span> 1049 </div> 1050 <div class="provider-logo" role="listitem" title="Amazon Bedrock"> 1051 <div class="provider-logo-icon"><img src="/images/stack/amazon-bedrock.svg" alt="" decoding="async" /></div> 1052 <span class="provider-logo-name">Bedrock</span> 1053 </div> 1054 <div class="provider-logo" role="listitem" title="Google Gemini"> 1055 <div class="provider-logo-icon"><img src="/images/stack/gemini.svg" alt="" decoding="async" /></div> 1056 <span class="provider-logo-name">Gemini</span> 1057 </div> 1058 <div class="provider-logo" role="listitem" title="Terraform"> 1059 <div class="provider-logo-icon"><img src="/images/stack/terraform.svg" alt="" decoding="async" /></div> 1060 <span class="provider-logo-name">Terraform</span> 1061 </div> 1062 <div class="provider-logo" role="listitem" title="Kubernetes"> 1063 <div class="provider-logo-icon"><img src="/images/stack/kubernetes.svg" alt="" decoding="async" /></div> 1064 <span class="provider-logo-name">Kubernetes</span> 1065 </div> 1066 <div class="provider-logo" role="listitem" title="Slack"> 1067 <div class="provider-logo-icon"><img src="/images/stack/slack.svg" alt="" decoding="async" /></div> 1068 <span class="provider-logo-name">Slack</span> 1069 </div> 1070 <div class="provider-logo" role="listitem" title="PagerDuty"> 1071 <div class="provider-logo-icon wide"><img src="/images/stack/pagerduty.svg" alt="" decoding="async" /></div> 1072 <span class="provider-logo-name">PagerDuty</span> 1073 </div> 1074 <div class="provider-logo" role="listitem" title="Azure DevOps"> 1075 <div class="provider-logo-icon"><img src="/images/stack/azure-devops.svg" alt="" decoding="async" /></div> 1076 <span class="provider-logo-name">Azure DevOps</span> 1077 </div> 1078 </div> 1079 <div class="providers-group" aria-hidden="true"> 1080 <div class="provider-logo" title="Amazon Web Services"> 1081 <div class="provider-logo-icon wide"><img src="/images/stack/aws.svg" alt="" decoding="async" /></div> 1082 <span class="provider-logo-name">AWS</span> 1083 </div> 1084 <div class="provider-logo" title="Google Cloud"> 1085 <div class="provider-logo-icon"><img src="/images/stack/google-cloud.svg" alt="" decoding="async" /></div> 1086 <span class="provider-logo-name">Google Cloud</span> 1087 </div> 1088 <div class="provider-logo" title="Microsoft Azure"> 1089 <div class="provider-logo-icon"><img src="/images/stack/azure.svg" alt="" decoding="async" /></div> 1090 <span class="provider-logo-name">Azure</span> 1091 </div> 1092 <div class="provider-logo" title="GitHub"> 1093 <div class="provider-logo-icon"><img src="/images/stack/github.svg" alt="" decoding="async" /></div> 1094 <span class="provider-logo-name">GitHub</span> 1095 </div> 1096 <div class="provider-logo" title="GitLab"> 1097 <div class="provider-logo-icon"><img src="/images/stack/gitlab.svg" alt="" decoding="async" /></div> 1098 <span class="provider-logo-name">GitLab</span> 1099 </div> 1100 <div class="provider-logo" title="OpenAI"> 1101 <div class="provider-logo-icon"><img src="/images/stack/openai.svg" alt="" decoding="async" /></div> 1102 <span class="provider-logo-name">OpenAI</span> 1103 </div> 1104 <div class="provider-logo" title="Anthropic"> 1105 <div class="provider-logo-icon"><img src="/images/stack/anthropic.svg" alt="" decoding="async" /></div> 1106 <span class="provider-logo-name">Anthropic</span> 1107 </div> 1108 <div class="provider-logo" title="Amazon Bedrock"> 1109 <div class="provider-logo-icon"><img src="/images/stack/amazon-bedrock.svg" alt="" decoding="async" /></div> 1110 <span class="provider-logo-name">Bedrock</span> 1111 </div> 1112 <div class="provider-logo" title="Google Gemini"> 1113 <div class="provider-logo-icon"><img src="/images/stack/gemini.svg" alt="" decoding="async" /></div>
1114 <span class="provider-logo-name">Gemini</span> 1115 </div> 1116 <div class="provider-logo" title="Terraform"> 1117 <div class="provider-logo-icon"><img src="/images/stack/terraform.svg" alt="" decoding="async" /></div> 1118 <span class="provider-logo-name">Terraform</span> 1119 </div> 1120 <div class="provider-logo" title="Kubernetes"> 1121 <div class="provider-logo-icon"><img src="/images/stack/kubernetes.svg" alt="" decoding="async" /></div> 1122 <span class="provider-logo-name">Kubernetes</span> 1123 </div> 1124 <div class="provider-logo" title="Slack"> 1125 <div class="provider-logo-icon"><img src="/images/stack/slack.svg" alt="" decoding="async" /></div> 1126 <span class="provider-logo-name">Slack</span> 1127 </div> 1128 <div class="provider-logo" title="PagerDuty"> 1129 <div class="provider-logo-icon wide"><img src="/images/stack/pagerduty.svg" alt="" decoding="async" /></div> 1130 <span class="provider-logo-name">PagerDuty</span> 1131 </div> 1132 <div class="provider-logo" title="Azure DevOps"> 1133 <div class="provider-logo-icon"><img src="/images/stack/azure-devops.svg" alt="" decoding="async" /></div> 1134 <span class="provider-logo-name">Azure DevOps</span> 1135 </div> 1136 </div> 1137 </div> 1138 </div> 1139 </div> 1140</section> 1141 1142 1143<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1144 FEATURES 1145âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1146<section class="section" id="features"> 1147 <div class="container"> 1148 <p class="caption" style="margin-bottom:.75rem;">Platform capabilities</p> 1149 <h2 class="heading-lg" style="margin-bottom:1rem;max-width:480px;">Everything you need to operate your cloud at the speed of thought</h2> 1150 <p class="body-md" style="max-width:560px;margin-bottom:3rem;">From one-off queries to recurring automated audits â ClowdOps handles the full lifecycle of cloud operations through a single conversational interface.</p> 1151 1152 <div class="features-grid"> 1153 <div class="feature-cell"> 1154 <div class="feature-icon"> 1155 <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 9h12M9 3v12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="9" cy="9" r="7.5" stroke="currentColor" stroke-width="1.2"/></svg> 1156 </div> 1157 <div class="feature-title">Chat-first interface</div> 1158 <p class="feature-body">Describe any cloud operation in plain language. No scripts to write, no API docs to read. The agent understands intent and acts accordingly.</p> 1159 </div> 1160 <div class="feature-cell"> 1161 <div class="feature-icon"> 1162 <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="2" y="2" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.2"/><rect x="10" y="2" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.2"/><rect x="2" y="10" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.2"/><rect x="10" y="10" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.2"/></svg> 1163 </div> 1164 <div class="feature-title">Projects & Sandboxes</div> 1165 <p class="feature-body">Organise work by team or application domain. Each sandbox holds its own credentials and run history â fully isolated and reusable.</p> 1166 </div> 1167 <div class="feature-cell"> 1168 <div class="feature-icon"> 1169 <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="7.5" stroke="currentColor" stroke-width="1.2"/><path d="M9 4.5v4.75L12 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 1170 </div> 1171 <div class="feature-title">Scheduled runs</div> 1172 <p class="feature-body">Automate task execution with cron expressions. Hourly, daily, weekly, or any custom schedule. Overlapping runs are skipped automatically.</p> 1173 </div> 1174 <div class="feature-cell"> 1175 <div class="feature-icon"> 1176 <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 5.5h12M3 9.5h12M3 13.5h7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="14.5" cy="13.5" r="2.5" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M16.25 15.25l1.25 1.25" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg> 1177 </div> 1178 <div class="feature-title">Resource inventory</div> 1179 <p class="feature-body">A live, searchable inventory of every resource the agent has discovered. Dependency graphs reveal blast radius before you make changes.</p> 1180 </div> 1181 <div class="feature-cell"> 1182 <div class="feature-icon"> 1183 <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="2" y="8" width="14" height="8" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M5.5 8V6a3.5 3.5 0 0 1 7 0v2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="9" cy="12" r="1.25" fill="currentColor"/></svg> 1184 </div> 1185 <div class="feature-title">Bring your own keys</div> 1186 <p class="feature-body">
1186Add your own cloud, AI model-provider, and notification credentials â each encrypted at rest and never shown in plaintext after creation. Choose which provider powers each project, or hand the agent a preferred order to fall through.</p> 1187 </div> 1188 <div class="feature-cell"> 1189 <div class="feature-icon"> 1190 <!-- bell / notify icon --> 1191 <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M9 2C6.24 2 4 4.24 4 7v4l-1.5 2h13L14 11V7c0-2.76-2.24-5-5-5z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/><path d="M7 15a2 2 0 0 0 4 0" stroke="currentColor" stroke-width="1.2"/></svg> 1192 </div> 1193 <div class="feature-title">Notification channels</div> 1194 <p class="feature-body">Connect Slack, Microsoft Teams, PagerDuty, or SMTP. The agent can push alerts mid-run via the <span class="mono" style="font-size:.8rem;">notify</span> tool, or deliver a post-run digest when a scheduled task finishes.</p> 1195 </div> 1196 <div class="feature-cell"> 1197 <div class="feature-icon"> 1198 <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="7" r="3" stroke="currentColor" stroke-width="1.2"/><path d="M3 16c0-3.31 2.69-6 6-6s6 2.69 6 6" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><path d="M13 3l2 2M15 3l-2 2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg> 1199 </div> 1200 <div class="feature-title">Team & access control</div> 1201 <p class="feature-body">Invite team members with Admin or Member roles. Members see only the projects and sandboxes they are explicitly invited to.</p> 1202 </div> 1203 <div class="feature-cell"> 1204 <div class="feature-icon"> 1205 <!-- cost / analysis icon --> 1206 <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 15V8M7.5 15V4M12 15v-5M16.5 15V6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M2 15.5h14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg> 1207 </div> 1208 <div class="feature-title">Cloud cost analysis</div> 1209 <p class="feature-body">Just ask what you spent and where. The agent pulls cost and usage data straight from AWS, Google Cloud, and Azure and breaks it down by service, account, or period â no dashboards to wire up.</p> 1210 </div> 1211 <div class="feature-cell"> 1212 <div class="feature-icon"> 1213 <!-- live cost meter / gauge icon --> 1214 <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 13a6 6 0 1 1 12 0" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><path d="M9 13l3-3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="9" cy="13" r="1.1" fill="currentColor"/></svg> 1215 </div> 1216 <div class="feature-title">Live cost meter</div> 1217 <p class="feature-body">Watch spend tick up as the agent works. Every model call's cost streams to the budget badge in real time â and daily, monthly, and per-session caps stop a run cleanly before it ever goes over.</p> 1218 </div> 1219 </div> 1220 </div> 1221</section> 1222 1223 1224<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1225 HOW IT WORKS 1226âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1227<section class="section" id="how-it-works" style="background:var(--bg-surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);"> 1228 <div class="container"> 1229 <p class="caption" style="margin-bottom:.75rem;">Execution model</p> 1230 <h2 class="heading-lg" style="max-width:560px;margin-bottom:1rem;">One conversation. Infinite context.</h2> 1231 <p class="body-md" style="max-width:600px;">ClowdOps keeps the full picture in view â every instruction, every action taken, every result returned. The agent that starts your task is the same one that finishes it: nothing is handed off, no context is lost, no detail forgotten along the way.</p> 1232 1233 <div style="margin-top:1.75rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;"> 1234 <a href="/demos/" class="btn btn-primary btn-lg">Watch it work â live demos</a>
1235 <span class="body-md" style="margin:0;">See real agent sessions replay step by step.</span> 1236 </div> 1237 1238 <div class="phases-flow" id="phasesFlow"> 1239 <div class="phase-step"> 1240 <div class="phase-step-num">01</div> 1241 <div> 1242 <div class="phase-step-name">Full context, every turn</div> 1243 <p class="phase-step-desc">The agent reads your message alongside the entire conversation â previous actions, real tool outputs, and earlier replies. Context never degrades as the session grows.</p> 1244 </div> 1245 </div> 1246 <div class="phase-step"> 1247 <div class="phase-step-num">02</div> 1248 <div> 1249 <div class="phase-step-name">Clarify before acting</div> 1250 <p class="phase-step-desc">For ambiguous requests the agent pauses and asks a single targeted question, then proceeds without further interruption once it has what it needs.</p> 1251 </div> 1252 </div> 1253 <div class="phase-step"> 1254 <div class="phase-step-num">03</div> 1255 <div> 1256 <div class="phase-step-name">Execute directly</div> 1257 <p class="phase-step-desc">Actions run in an isolated environment with your credentials pre-loaded. The agent communicates directly with your cloud providers and reads the real output each time â no intermediary layers, no synthetic responses. Every action streams to you as it happens.</p> 1258 </div> 1259 </div> 1260 <div class="phase-step"> 1261 <div class="phase-step-num">04</div> 1262 <div> 1263 <div class="phase-step-name">Adapt from real feedback</div> 1264 <p class="phase-step-desc">Every result â expected or not â becomes part of the agent's reasoning. When something unexpected happens, the agent reads it and adapts immediately, keeping the task on track without human intervention.</p> 1265 </div> 1266 </div> 1267 <div class="phase-step"> 1268 <div class="phase-step-num">05</div> 1269 <div> 1270 <div class="phase-step-name">Answer with a full trace</div> 1271 <p class="phase-step-desc">Once the task is done, you get a clear structured response. The full audit trail â every command run, every output received â is saved so you always know exactly what happened.</p> 1272 </div> 1273 </div> 1274 </div> 1275 </div> 1276</section> 1277 1278 1279<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1280 MCP â CONNECT YOUR CODING AGENT 1281âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1282<section class="section" id="mcp" style="background:var(--bg-surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);"> 1283 <div class="container"> 1284 <div class="two-col reverse"> 1285 <div> 1286 <p class="caption" style="margin-bottom:.75rem;">Coding agents · MCP</p> 1287 <h2 class="heading-lg" style="margin-bottom:1rem;">Drive your cloud from any coding agent</h2> 1288 <p class="body-md" style="margin-bottom:1.75rem;">Every sandbox speaks the Model Context Protocol. Connect your coding agent with a single command and prompt your cloud from inside your editor â it plans and executes against your infrastructure exactly as it does in the web chat.</p> 1289 1290 <div> 1291 <div class="check-item"> 1292 <div class="check-item-icon"> 1293 <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 1294 </div> 1295 <span>Connect Claude Code, Cursor, Codex, or VS Code â paste one config block or run a single command</span> 1296 </div> 1297 <div class="check-item"> 1298 <div class="check-item-icon"> 1299 <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 1300 </div>
1301 <span>Per-sandbox access tokens (<span class="mono" style="font-size:.8rem;">fba_â¦</span>) â shown once, scoped to a single sandbox, revocable in one click</span> 1302 </div> 1303 <div class="check-item"> 1304 <div class="check-item-icon"> 1305 <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 1306 </div> 1307 <span>Same credentials, guardrails, confirmations, and budgets â MCP changes how you reach the agent, never what it's allowed to do</span> 1308 </div> 1309 <div class="check-item"> 1310 <div class="check-item-icon"> 1311 <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 1312 </div> 1313 <span>Sessions stream live and land in the sandbox's Chats tab with an <span class="mono" style="font-size:.8rem;">MCP</span> badge â fully auditable</span> 1314 </div> 1315 </div> 1316 1317 <div class="section-ctas"> 1318 <a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/mcp.md" target="_blank" rel="noopener" class="btn btn-outline">MCP docs</a> 1319 <button onclick="openModal()" class="btn btn-primary">Get Started</button> 1320 </div> 1321 </div> 1322 1323 <!-- Claude Code / Cursor terminal mockup --> 1324 <div> 1325 <div class="mcp-terminal"> 1326 <div class="demo-titlebar"> 1327 <div class="demo-titlebar-dot"></div> 1328 <div class="demo-titlebar-dot"></div> 1329 <div class="demo-titlebar-dot"></div> 1330 <div class="demo-titlebar-label mono">claude ~/infra â clowdops</div> 1331 </div> 1332<pre><span class="m-comment"># ~/.claude.json · register the sandbox as an MCP server</span> 1333<span class="m-prompt">$ </span><span class="m-cmd">claude mcp add --transport http clowdops</span> <span class="m-flag">\</span> 1334 <span class="m-cmd">https://platform.clowdops.ai/mcp</span> <span class="m-flag">--header</span> <span class="m-str">"Authorization: Bearer fba_3kQâ¦"</span> 1335<span class="m-ok">â connected</span><span class="m-muted"> · clowdops · 6 tools · sandbox "AWS Prod"</span> 1336 1337<span class="m-prompt">⯠</span>any S3 buckets in prod with public access? 1338 1339<span class="m-tool">⺠clowdops · create_session</span> 1340<span class="m-muted"> â¿ conversation_id cnv_8f2a4c</span> 1341<span class="m-tool">⺠clowdops · send_message</span> 1342<span class="m-muted"> â¿ scanned 14 buckets · </span><span class="m-warn">2 public â </span> 1343<span class="m-muted"> prod-assets-cdn · legacy-exports-2021</span> 1344<span class="m-muted"> â¿ done · 1,842 tokens · $0.02 · audited in ClowdOps â</span></pre> 1345 </div> 1346 </div> 1347 </div> 1348 </div> 1349</section> 1350 1351 1352<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1353 TELEGRAM 1354âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1355<section class="section" id="telegram" style="border-bottom:1px solid var(--border);"> 1356 <div class="container"> 1357 <div style="text-align:center; max-width:720px; margin:0 auto 2.75rem;"> 1358 <p class="caption" style="margin-bottom:.75rem;">Notify & drive · Telegram</p> 1359 <h2 class="heading-lg" style="margin-bottom:1rem;">Telegram, both ways</h2> 1360 <p class="body-md">From a single bot: the agent posts findings and run digests to your chat â and you can drive a sandbox by messaging it, with anything risky paused for an <strong>Allow / Deny</strong> tap.</p> 1361 </div> 1362 1363 <!-- Single animated mockup: full lifecycle â link â drive â notify --> 1364 <div class="tg-duo" style="justify-content:center;"> 1365 <div class="tg-phone-wrap"> 1366 <div class="tg-cardlabel">Link, drive & get notified <small>· all from one chat</small></div> 1367 <div class="tg-phone"> 1368 <div class="tg-header"> 1369 <div class="tg-avatar">â</div> 1370 <div> 1371 <div class="tg-title">ClowdOps Agent</div> 1372 <div class="tg-sub">bot · sandbox âGCP Prodâ</div> 1373 </div> 1374 </div> 1375 <div class="tg-body chat" id="tgChat"></div> 1376 </div> 1377 </div> 1378 </div> 1379 1380 <!-- Key points + CTAs --> 1381 <div style="max-width:640px; margin:2.75rem auto 0;"> 1382 <div class="check-item"> 1383 <div class="check-item-icon">
1384 <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 1385 </div> 1386 <span>Link a chat with a one-time <span class="mono" style="font-size:.8rem;">/link</span> code â no token pasted into Telegram; one bot per project, one chat per sandbox</span> 1387 </div> 1388 <div class="check-item"> 1389 <div class="check-item-icon"> 1390 <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 1391 </div> 1392 <span>Guarded actions pause for an Allow/Deny tap â same credentials, guardrails, confirmations, and budgets as the web app</span> 1393 </div> 1394 <div class="check-item"> 1395 <div class="check-item-icon"> 1396 <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 1397 </div> 1398 <span>Telegram sessions land in the sandbox's Chats tab with a <span class="mono" style="font-size:.8rem;">Telegram</span> badge â fully auditable</span> 1399 </div> 1400 1401 <div class="section-ctas" style="justify-content:center; margin-top:2rem;"> 1402 <a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/tg.md" target="_blank" rel="noopener" class="btn btn-outline">Telegram docs</a> 1403 <button onclick="openModal()" class="btn btn-primary">Get Started</button> 1404 </div> 1405 </div> 1406 </div> 1407</section> 1408 1409 1410<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1411 RESOURCE INVENTORY HIGHLIGHT 1412âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1413<section class="section"> 1414 <div class="container"> 1415 <div class="two-col"> 1416 <div> 1417 <p class="caption" style="margin-bottom:.75rem;">Resource inventory</p> 1418 <h2 class="heading-lg" style="margin-bottom:1rem;">Your full infrastructure, organised and searchable</h2> 1419 <p class="body-md" style="margin-bottom:1.75rem;">ClowdOps automatically discovers and catalogues every resource it encounters. Drill into any resource to see raw metadata, inbound and outbound dependencies, and blast-radius graphs.</p> 1420 1421 <div> 1422 <div class="check-item"> 1423 <div class="check-item-icon"> 1424 <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 1425 </div> 1426 <span>Hierarchical tree: provider â account â region â type â resource</span> 1427 </div> 1428 <div class="check-item"> 1429 <div class="check-item-icon"> 1430 <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 1431 </div> 1432 <span>Instant search by name, ID, or resource type</span> 1433 </div> 1434 <div class="check-item"> 1435 <div class="check-item-icon"> 1436 <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 1437 </div> 1438 <span>Dependency graph for understanding connectivity and risk</span> 1439 </div> 1440 <div class="check-item"> 1441 <div class="check-item-icon"> 1442 <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 1443 </div>
1444 <span>Populate via chat: "discover all resources in us-east-1"</span> 1445 </div> 1446 </div> 1447 1448 <div class="section-ctas"> 1449 <a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/resources.md" target="_blank" rel="noopener" class="btn btn-outline">View docs</a> 1450 <button onclick="openModal()" class="btn btn-primary">Get Started</button> 1451 </div> 1452 </div> 1453 1454 <!-- vertical resource tree --> 1455 <div class="resource-tree"> 1456<div><span class="r-provider">â¾ AWS</span></div> 1457<div style="padding-left:1.25rem"><span class="r-provider">â¾ 123456789012 (prod)</span></div> 1458<div style="padding-left:2.5rem"><span>â¾ us-east-1</span></div> 1459<div style="padding-left:3.75rem"><span>â¾ EC2</span></div> 1460<div style="padding-left:5rem"><span class="r-active">i-0abc123 web-server-1</span></div> 1461<div style="padding-left:5rem"><span class="r-active">i-0def456 web-server-2</span></div> 1462<div style="padding-left:5rem"><span class="r-warn">i-0ghi789 bastion (public)</span></div> 1463<div style="padding-left:3.75rem"><span>â¾ S3</span></div> 1464<div style="padding-left:5rem"><span class="r-active">prod-assets-cdn</span></div> 1465<div style="padding-left:5rem"><span class="r-warn">legacy-exports-2021</span></div> 1466<div style="padding-left:5rem"><span class="r-active">terraform-state</span></div> 1467<div style="padding-left:3.75rem"><span>â¾ RDS</span></div> 1468<div style="padding-left:5rem"><span class="r-active">db-prod-postgres14</span></div> 1469<div style="padding-left:3.75rem"><span>â¾ Lambda</span></div> 1470<div style="padding-left:5rem"><span class="r-active">payments-handler</span></div> 1471<div style="padding-left:5rem"><span class="r-active">notifications-worker</span></div> 1472<div style="margin-top:.75rem"><span class="r-provider">â¾ Azure</span></div> 1473<div style="padding-left:1.25rem"><span class="r-provider">â¾ sub-analytics (staging)</span></div> 1474<div style="padding-left:2.5rem"><span>â¾ eastus</span></div> 1475<div style="padding-left:3.75rem"><span>â¾ VMs</span></div> 1476<div style="padding-left:5rem"><span class="r-active">analytics-vm-01</span></div> 1477 </div> 1478 </div> 1479 </div> 1480</section> 1481 1482 1483<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1484 SCHEDULES 1485âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1486<section class="section" style="background:var(--bg-surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);"> 1487 <div class="container"> 1488 <div class="two-col reverse"> 1489 <div> 1490 <p class="caption" style="margin-bottom:.75rem;">Schedules</p> 1491 <h2 class="heading-lg" style="margin-bottom:1rem;">Automate your cloud ops on a schedule</h2> 1492 <p class="body-md" style="margin-bottom:1.75rem;">Write a prompt, set a cron expression, and let ClowdOps run it automatically â no extra tooling, no YAML pipelines.</p> 1493 1494 <div> 1495 <div class="check-item"> 1496 <div class="check-item-icon"> 1497 <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 1498 </div> 1499 <span>Hourly, daily, weekly, or any custom cron expression</span> 1500 </div> 1501 <div class="check-item"> 1502 <div class="check-item-icon"> 1503 <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 1504 </div> 1505 <span>Overlap protection â concurrent runs are automatically skipped</span> 1506 </div> 1507 <div class="check-item"> 1508 <div class="check-item-icon">
1509 <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 1510 </div> 1511 <span>Post-run digest via Slack, Teams, PagerDuty, or email â on success, failure, or block</span> 1512 </div> 1513 </div> 1514 1515 <div class="section-ctas"> 1516 <a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/schedules.md" target="_blank" rel="noopener" class="btn btn-outline">Schedules docs</a> 1517 <button onclick="openModal()" class="btn btn-primary">Get Started</button> 1518 </div> 1519 </div> 1520 1521 <div> 1522 <div class="code-card"> 1523 <div class="code-card-header"> 1524 <svg width="12" height="12" fill="none" viewBox="0 0 12 12"><circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.2"/><path d="M6 3.5v2.75L7.75 8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg> 1525 Daily S3 Audit â Prod 1526 </div> 1527 <pre><span class="c-comment">// Schedule: 0 8 * * * (every day at 08:00 UTC)</span> 1528<span class="c-key">prompt</span>: <span class="c-str">"S3 Public Access Audit"</span> 1529<span class="c-key">sandbox</span>: <span class="c-str">"AWS Prod"</span> 1530<span class="c-key">status</span>: <span class="c-val">active</span> 1531 1532<span class="c-comment">// Last run: today at 08:00 UTC</span> 1533<span class="c-key">result</span>: <span class="c-val">2 buckets flagged</span> 1534<span class="c-key">tokens</span>: <span class="c-val">1,842 used</span> 1535<span class="c-key">duration</span>: <span class="c-val">14.3s</span> 1536<span class="c-key">notify</span>: <span class="c-str">slack-ops-channel</span> 1537<span class="c-key">send-on</span>: <span class="c-val">failure | blocked</span></pre> 1538 </div> 1539 1540 <div style="margin-top:1rem;" class="code-card"> 1541 <div class="code-card-header"> 1542 <svg width="12" height="12" fill="none" viewBox="0 0 12 12"><rect x="1" y="1" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M4 6h4M6 4v4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg> 1543 Weekly Cost Report 1544 </div> 1545 <pre><span class="c-comment">// Schedule: 0 9 * * 1 (every Monday at 09:00 UTC)</span> 1546<span class="c-key">prompt</span>: <span class="c-str">"Cross-Account Cost Summary"</span> 1547<span class="c-key">sandbox</span>: <span class="c-str">"GCP Analytics"</span> 1548<span class="c-key">status</span>: <span class="c-val">active</span> 1549<span class="c-key">notify</span>: <span class="c-str">teams-finance</span> 1550<span class="c-key">send-on</span>: <span class="c-val">always</span></pre> 1551 </div> 1552 </div> 1553 </div> 1554 </div> 1555</section> 1556 1557 1558<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1559 SECURITY 1560âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1561<section class="section"> 1562 <div class="container"> 1563 <p class="caption" style="margin-bottom:.75rem;">Security</p> 1564 <h2 class="heading-lg" style="max-width:480px;margin-bottom:1rem;">Built for teams that need to trust their tooling</h2> 1565 <p class="body-md" style="max-width:560px;">ClowdOps is designed around the principle that credentials and access should be explicit, encrypted, and auditable at every layer.</p> 1566 1567 <div class="security-grid"> 1568 <div class="security-item"> 1569 <div class="security-item-icon"> 1570 <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="2" y="8" width="14" height="8" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M5 8V6a4 4 0 0 1 8 0v2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="9" cy="12" r="1.25" fill="currentColor"/></svg> 1571 </div> 1572 <div> 1573 <div class="security-item-title">Encrypted at rest</div> 1574 <p class="security-item-body">All credentials encrypted in storage. Never exposed in plaintext after creation â not in logs, not in UI.</p> 1575 </div> 1576 </div> 1577 <div class="security-item"> 1578 <div class="security-item-icon"> 1579 <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M9 2l1.75 3.5 4 .5-3 3 .75 4L9 11.5 6.5 13 7.25 9 4.25 6l4-.5L9 2Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg> 1580 </div> 1581 <div> 1582 <div class="security-item-title">Multi-factor auth</div> 1583 <p class="security-item-body">Time-based one-time passwords (TOTP) and one-time magic-link email add a strong, phishing-resistant second factor to every account.</p> 1584 </div> 1585 </div> 1586 <div class="security-item"> 1587 <div class="security-item-icon"> 1588 <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="7" stroke="currentColor" stroke-width="1.2"/><path d="M6 9l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 1589 </div> 1590 <div> 1591 <div class="security-item-title">Role-based access</div> 1592 <p class="security-item-body">Admin and Member roles. Members only see the projects and sandboxes they are explicitly invited to.</p> 1593 </div> 1594 </div> 1595 <div class="security-item"> 1596 <div class="security-item-icon"> 1597 <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="2" y="3" width="14" height="12" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M2 8h14M5 3v5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg> 1598 </div> 1599 <div> 1600 <div class="security-item-title">Activity audit log</div> 1601 <p class="security-item-body">Full event history: logins, config changes, credential updates, member invites, and agent runs.</p> 1602 </div> 1603 </div> 1604 <div class="security-item"> 1605 <div class="security-item-icon"> 1606 <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M9 2C5.69 2 3 4.69 3 8v1h1.5V8a4.5 4.5 0 1 1 9 0v1H15V8c0-3.31-2.69-6-6-6Z" stroke="currentColor" stroke-width="1.2"/><rect x="3.5" y="9" width="11" height="7" rx="1.5" stroke="currentColor" stroke-width="1.2"/></svg> 1607 </div> 1608 <div> 1609 <div class="security-item-title">Sandbox isolation</div> 1610 <p class="security-item-body">Each sandbox is a fully isolated execution context â credentials and runs don't bleed across boundaries.</p> 1611 </div> 1612 </div> 1613 <div class="security-item"> 1614 <div class="security-item-icon"> 1615 <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M9 2C5 2 2 4.69 2 8c0 1.5.5 2.9 1.35 4L2 14l3-.5A6.95 6.95 0 0 0 9 15c4 0 7-2.69 7-6s-3-7-7-7z" stroke="currentColor" stroke-width="1.2"/><path d="M6 8h6M9 5v6" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg> 1616 </div> 1617 <div> 1618 <div class="security-item-title">Single sign-on</div> 1619 <p class="security-item-body">Sign in with Google, Microsoft, or GitHub â no extra passwords to manage, with access tied to your identity provider.</p> 1620 </div> 1621 </div> 1622 </div> 1623 </div> 1624</section> 1625 1626 1627<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1628 GUARDRAILS 1629âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1630<section class="section" style="background:var(--bg-surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);"> 1631 <div class="container"> 1632 <div class="two-col"> 1633 <div> 1634 <p class="caption" style="margin-bottom:.75rem;">Guardrails</p> 1635 <h2 class="heading-lg" style="margin-bottom:1rem;">The agent is powerful.<br/>You decide how far it goes.</h2> 1636 <p class="body-md" style="margin-bottom:1.75rem;">Two independent controls govern every run: action grants determine <em>what kind</em> of change the agent can make, and cost caps determine <em>how much</em> it can spend. Neither can be exceeded â even by the agent itself.</p> 1637 1638 <div> 1639 <div class="check-item"> 1640 <div class="check-item-icon">
1641 <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 1642 </div> 1643 <span>Eight action categories â read, write, create, delete, destroy, modify IAM, change network, run on host. Grant only what each sandbox actually needs</span> 1644 </div> 1645 <div class="check-item"> 1646 <div class="check-item-icon"> 1647 <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 1648 </div> 1649 <span>Hierarchical inheritance: limits cascade from org â project â sandbox. A child scope can never be more permissive than its parent</span> 1650 </div> 1651 <div class="check-item"> 1652 <div class="check-item-icon"> 1653 <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 1654 </div> 1655 <span>In-chat confirmation: even for granted actions, the agent shows exactly what it's about to run â you approve, allow for the session, or deny with a note</span> 1656 </div> 1657 <div class="check-item"> 1658 <div class="check-item-icon"> 1659 <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 1660 </div> 1661 <span>Scheduled runs are unattended â confirmation becomes an automatic deny; each schedule carries its own minimal allowlist</span> 1662 </div> 1663 <div class="check-item"> 1664 <div class="check-item-icon"> 1665 <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 1666 </div> 1667 <span>Daily, monthly, and per-session cost caps: a budget-exceeded turn stops cleanly and reports what it completed before halting</span> 1668 </div> 1669 </div> 1670 1671 <div class="section-ctas"> 1672 <a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/guardrails.md" target="_blank" rel="noopener" class="btn btn-outline">Guardrails docs</a> 1673 <button onclick="openModal()" class="btn btn-primary">Get Started</button> 1674 </div> 1675 </div> 1676 1677 <div> 1678 <!-- action grants panel mockup --> 1679 <div class="grants-panel"> 1680 <div class="grants-panel-header"> 1681 <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><rect x="1" y="5.5" width="10" height="5.5" rx="1" stroke="currentColor" stroke-width="1.1"/><path d="M3.5 5.5V4a2.5 2.5 0 0 1 5 0v1.5" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/></svg> 1682 Allowed actions â AWS Prod sandbox 1683 </div> 1684 <div class="grants-grid-inner"> 1685 <div class="grant-row"> 1686 <span class="grant-dot allow"></span>Read (always on) 1687 </div> 1688 <div class="grant-row"> 1689 <span class="grant-dot allow"></span>Write data 1690 </div> 1691 <div class="grant-row"> 1692 <span class="grant-dot allow"></span>Create resource 1693 </div> 1694 <div class="grant-row denied"> 1695 <span class="grant-dot deny"></span>Delete data 1696 </div> 1697 <div class="grant-row denied"> 1698 <span class="grant-dot deny"></span>Destroy resource 1699 </div> 1700 <div class="grant-row denied"> 1701 <span class="grant-dot deny"></span>Scale capacity 1702 </div> 1703 <div class="grant-row denied"> 1704 <span class="grant-dot deny"></span>Modify IAM 1705 </div> 1706 <div class="grant-row denied"> 1707 <span class="grant-dot deny"></span>Modify network 1708 </div> 1709 </div> 1710 </div> 1711 1712 <!-- confirmation card mockup --> 1713 <div class="confirm-card-mockup"> 1714 <div class="confirm-card-title">Confirm action</div> 1715 <div class="confirm-cmd">aws ec2 terminate-instances --instance-ids i-0abc123def456</div> 1716 <div class="confirm-meta">
1717 <span class="confirm-category-badge"> 1718 <svg width="8" height="8" viewBox="0 0 8 8" fill="none"><path d="M1 4.5l1.5 1.5 3.5-3.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg> 1719 Destroy resource 1720 </span> 1721 <span style="opacity:.5;">· requires confirmation</span> 1722 </div> 1723 <div class="confirm-actions"> 1724 <div class="confirm-btn allow">Approve once</div> 1725 <div class="confirm-btn">Allow session</div> 1726 <div class="confirm-btn">Deny</div> 1727 </div> 1728 </div> 1729 </div> 1730 </div> 1731 </div> 1732</section> 1733 1734 1735<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1736 CTA 1737âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1738<section class="cta-section"> 1739 <div class="container"> 1740 <p class="caption" style="margin-bottom:1.5rem;">Get started today</p> 1741 <h2 class="display" style="margin-bottom:1.5rem;">Talk to your cloud.<br/><em style="color:var(--fg-muted);">Finally.</em></h2> 1742 <p class="body-lg" style="max-width:480px;margin:0 auto 2.5rem;">Connect a cloud provider, describe a task, and watch the agent work. Request a demo and we'll get you set up.</p> 1743 <div style="display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap;"> 1744 <button onclick="openModal()" class="btn btn-primary btn-lg"> 1745 Request a demo 1746 <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7H11M11 7L7.5 3.5M11 7L7.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 1747 </button> 1748 <a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/README.md" target="_blank" rel="noopener" class="btn btn-outline btn-lg">Read the docs</a> 1749 </div> 1750 </div> 1751</section> 1752 1753 1754<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1755 FOOTER 1756âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1757<footer class="footer"> 1758 <div class="container"> 1759 <div class="footer-grid"> 1760 <div> 1761 <a href="#home" class="nav-logo" style="display:inline-flex;margin-bottom:.5rem;"> 1762 <div class="nav-logo-mark"> 1763 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 1764 <path d="M9.5 2C7.57 2 5.9 3.26 5.24 5.02C4.52 4.47 3.62 4.17 2.67 4.25C1.17 4.38 0 5.64 0 7.15C0 8.73 1.27 10 2.85 10H5.5L4 13H7L5.5 16H10.5L9 13H12L10.5 10H13.15C14.73 10 16 8.73 16 7.15C16 5.57 14.73 4.3 13.15 4.3C13.1 4.3 13.05 4.3 13 4.31C12.42 2.96 11.06 2 9.5 2Z" fill="currentColor"/> 1765 </svg> 1766 </div> 1767 ClowdOps 1768 </a> 1769 <p class="footer-brand-desc">A chat-oriented AI platform for cloud infrastructure operations. Bring your keys â ClowdOps does the rest.</p> 1770 </div> 1771 <div> 1772 <div class="footer-col-title">Docs</div> 1773 <ul class="footer-links"> 1774 <li><a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/getting-started.md" target="_blank" rel="noopener">Getting started</a></li> 1775 <li><a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/chat.md" target="_blank" rel="noopener">Chat</a></li> 1776 <li><a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/mcp.md" target="_blank" rel="noopener">Connect agents (MCP)</a></li> 1777 <li><a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/tg.md" target="_blank" rel="noopener">Telegram</a></li> 1778 <li><a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/schedules.md" target="_blank" rel="noopener">Schedules</a></li> 1779 <li><a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/runs.md" target="_blank" rel="noopener">Runs</a></li> 1780 <li><a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/resources.md" target="_blank" rel="noopener">Resources</a></li> 1781 <li><a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/your-workspace.md" target="_blank" rel="noopener">Your workspace</a></li> 1782 <li><a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/guardrails.md" target="_blank" rel="noopener">Guardrails</a></li> 1783 <li><a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/team-sett
1783ings.md" target="_blank" rel="noopener">Team & settings</a></li> 1784 </ul> 1785 </div> 1786 <div> 1787 <div class="footer-col-title">Product</div> 1788 <ul class="footer-links"> 1789 <li><a href="#features">Features</a></li> 1790 <li><a href="#how-it-works">How it works</a></li> 1791 <li><a href="#mcp">MCP & coding agents</a></li> 1792 <li><a href="#telegram">Telegram</a></li> 1793 <li><a href="#providers">Providers</a></li> 1794 <li><a href="/demos/">Demos</a></li> 1795 <li><a href="/changelog">Changelog</a></li> 1796 </ul> 1797 </div> 1798 <div> 1799 <div class="footer-col-title">Company</div> 1800 <ul class="footer-links"> 1801 <li><a href="https://www.flashback.tech/" target="_blank" rel="noopener">About us</a></li> 1802 <li><a href="https://www.flashback.tech/blog" target="_blank" rel="noopener">Blog</a></li> 1803 <li><a href="https://www.flashback.tech/contact/" target="_blank" rel="noopener">Contact</a></li> 1804 <li><a href="/privacy">Privacy</a></li> 1805 <li><a href="/terms">Terms</a></li> 1806 </ul> 1807 </div> 1808 </div> 1809 <div class="footer-bottom"> 1810 <span>© 2026 Flashback Corporation. All rights reserved.</span> 1811 <span style="display:flex;gap:1rem;"> 1812 <a href="https://github.com/clowdops" target="_blank" rel="noopener" style="color:var(--fg-muted);transition:color .15s;" onmouseover="this.style.color='var(--fg)'" onmouseout="this.style.color='var(--fg-muted)'">GitHub</a> 1813 <a href="https://twitter.com/clowdops" target="_blank" rel="noopener" style="color:var(--fg-muted);transition:color .15s;" onmouseover="this.style.color='var(--fg)'" onmouseout="this.style.color='var(--fg-muted)'">Twitter / X</a> 1814 </span> 1815 </div> 1816 </div> 1817</footer> 1818 1819
1820<script> 1821 /* ââ Modal ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 1822 const modal = document.getElementById('demoModal'); 1823 const closeBtn = document.getElementById('modalClose'); 1824 1825 function openModal() { 1826 modal.classList.add('open'); 1827 document.body.style.overflow = 'hidden'; 1828 setTimeout(() => document.getElementById('firstName').focus(), 50); 1829 } 1830 1831 function closeModal() { 1832 modal.classList.remove('open'); 1833 document.body.style.overflow = ''; 1834 } 1835 1836 closeBtn.addEventListener('click', closeModal); 1837 modal.addEventListener('click', e => { if (e.target === modal) closeModal(); }); 1838 document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); }); 1839 1840 /* form â backend (POST /contact, which emails the team). Replaces the old 1841 mailto: handler, which silently failed for anyone without a configured 1842 desktop mail client. The endpoint lives on the platform API, reached 1843 same-host via the /api prefix nginx strips before the backend. */ 1844 const CONTACT_ENDPOINT = 'https://platform.clowdops.ai/api/contact'; 1845 const demoForm = document.getElementById('demoForm'); 1846 const formStatus = document.getElementById('formStatus'); 1847 const formSubmit = demoForm.querySelector('.form-submit'); 1848 1849 function setStatus(msg, kind) { 1850 if (!msg) { formStatus.style.display = 'none'; formStatus.textContent = ''; return; } 1851 formStatus.textContent = msg; 1852 formStatus.style.color = kind === 'error' ? 'hsl(0,70%,68%)' : 'hsl(152,55%,60%)'; 1853 formStatus.style.display = 'block'; 1854 } 1855 1856 // Each Turnstile token is single-use; reset the widget after every attempt so 1857 // the next submit (retry or a reopened modal) gets a fresh token. 1858 function resetCaptcha() { if (window.turnstile) { try { turnstile.reset(); } catch (_) {} } } 1859 1860 demoForm.addEventListener('submit', async function(e) { 1861 e.preventDefault(); 1862 const fd = new FormData(this); 1863 const payload = { 1864 firstName: (fd.get('firstName') || '').toString().trim(), 1865 lastName: (fd.get('lastName') || '').toString().trim(), 1866 company: (fd.get('company') || '').toString().trim(), 1867 email: (fd.get('email') || '').toString().trim(), 1868 message: (fd.get('message') || '').toString(), 1869 website: (fd.get('website') || '').toString(), // honeypot 1870 turnstileToken: (fd.get('cf-turnstile-response') || '').toString(), 1871 }; 1872 1873 formSubmit.disabled = true; 1874 formSubmit.style.opacity = '.6'; 1875 const originalLabel = formSubmit.innerHTML; 1876 formSubmit.textContent = 'Sendingâ¦'; 1877 setStatus('', null); 1878 1879 try { 1880 const res = await fetch(CONTACT_ENDPOINT, { 1881 method: 'POST', 1882 headers: { 'Content-Type': 'application/json' }, 1883 body: JSON.stringify(payload), 1884 }); 1885 let data = {}; 1886 try { data = await res.json(); } catch (_) { /* non-JSON error page */ } 1887 1888 if (res.ok && data.success) { 1889 this.reset(); 1890 resetCaptcha(); 1891 setStatus("Thanks â we've got your request and will be in touch shortly.", 'ok'); 1892 formSubmit.innerHTML = originalLabel; 1893 formSubmit.disabled = false; 1894 formSubmit.style.opacity = ''; 1895 setTimeout(closeModal, 2500); 1896 } else { 1897 resetCaptcha(); 1898 setStatus((data && data.message) ? data.message : 'Something went wrong. Please try again.', 'error'); 1899 formSubmit.innerHTML = originalLabel; 1900 formSubmit.disabled = false; 1901 formSubmit.style.opacity = ''; 1902 } 1903 } catch (_) { 1904 resetCaptcha(); 1905 setStatus('Could not reach the server. Please check your connection and try again in a moment.', 'error'); 1906 formSubmit.innerHTML = originalLabel; 1907 formSubmit.disabled = false; 1908 formSubmit.style.opacity = ''; 1909 } 1910 }); 1911 1912 /* ââ Mobile nav âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 1913 function toggleMobileMenu() { 1914 const menu = document.getElementById('mobileMenu'); 1915 const btn = document.getElementById('navHamburger'); 1916 const open = menu.classList.toggle('open'); 1917 btn.setAttribute('aria-expanded', String(open)); 1918 } 1919 1920 function closeMobileMenu() { 1921 const menu = document.getElementById('mobileMenu'); 1922 const btn = document.getElementById('navHamburger'); 1923 menu.classList.remove('open'); 1924 btn.setAttribute('aria-expanded', 'false'); 1925 } 1926 1927 window.addEventListener('resize', () => { 1928 if (window.innerWidth > 768) closeMobileMenu(); 1929 }); 1930 1931 /* ââ How-it-works: slide-in animation via IntersectionObserver ââââââââââââ */ 1932 const steps = document.querySelectorAll('.phase-step'); 1933 const stepObserver = new IntersectionObserver((entries) => {
1934 entries.forEach(entry => { 1935 if (entry.isIntersecting) { 1936 entry.target.classList.add('visible'); 1937 stepObserver.unobserve(entry.target); 1938 } 1939 }); 1940 }, { threshold: 0.15 }); 1941 1942 steps.forEach((step, i) => { 1943 step.style.transitionDelay = (i * 0.1) + 's'; 1944 stepObserver.observe(step); 1945 }); 1946</script>
1946 1947 1948<!-- Telegram chat â full lifecycle replay (link â drive â notify) -->
1949<script> 1950(function () { 1951 var chat = document.getElementById('tgChat'); 1952 if (!chat) return; 1953 var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; 1954 var sleep = function (ms) { return new Promise(function (r) { setTimeout(r, ms); }); }; 1955 var token = 0, started = false; 1956 1957 function node(html, cls) { var d = document.createElement('div'); d.className = cls; d.innerHTML = html; return d; } 1958 function scrollDown() { chat.scrollTop = chat.scrollHeight; } 1959 function add(n) { chat.appendChild(n); scrollDown(); return n; } 1960 function user(html) { return add(node(html, 'tg-msg user tg-in')); } 1961 function bot(html) { return add(node(html, 'tg-msg bot tg-in')); } 1962 function chip(html) { return add(node(html, 'tg-chip tg-in')); } 1963 function typing() { return add(node('<span></span><span></span><span></span>', 'tg-typing tg-in')); } 1964 1965 var STEPS_VM = '<div class="tg-steps">' + 1966 '<div><span class="s-done">â</span> Classified · discovery (read-only)</div>' + 1967 '<div><span class="s-done">â</span> <span class="tg-mono">gcloud compute instances list</span> · us-east + eu-central</div>' + 1968 '</div>'; 1969 var VM_LIST = 'Here are your GCP VMs in those regions:' + 1970 '<div class="tg-steps" style="margin-top:.35rem;">' + 1971 '<div>ð´ <span class="tg-mono">acme-instance-us-east-1</span> · us-east1-b · <span class="tg-warn">TERMINATED</span></div>' + 1972 '<div>ð¢ <span class="tg-mono">acme-instance-eu-central-1</span> · europe-west3-a · <span class="tg-ok">RUNNING</span></div>' + 1973 '<div>ð¢ <span class="tg-mono">acme-api-eu-central-1</span> · europe-west3-a · <span class="tg-ok">RUNNING</span></div>' + 1974 '</div>' + 1975 '<div class="tg-confirm-meta" style="margin-top:.45rem;">done · 1,240 tokens · $0.01 · audited in ClowdOps â</div>'; 1976 var NOTIF = '<div class="tg-confirm-title">ð Heads-up â idle resource</div>' + 1977 '<div class="tg-confirm-meta" style="margin-top:.15rem;"><span class="tg-mono">acme-instance-us-east-1</span> is TERMINATED, but its 100 GB disk is still billing (~$10/mo). Reply here to clean it up.</div>' + 1978 '<div class="tg-confirm-meta" style="margin-top:.45rem;">pushed by ClowdOps â</div>'; 1979
1980 function renderStatic() { 1981 chat.innerHTML = ''; 1982 user('<span class="tg-cmd">/start</span>'); 1983 bot('This chat isn\'t linked to a sandbox yet. Send <span class="tg-cmd">/link <code></span> â get a code from the sandbox Credentials tab.'); 1984 user('<span class="tg-cmd">/link</span> K7M2QX8410'); 1985 bot('â <strong>Linked.</strong> Messages in this chat now drive the connected sandbox. Send <span class="tg-cmd">/new</span> to start a fresh session.'); 1986 user('<span class="tg-cmd">/new</span>'); 1987 bot('⨠Started a new session.'); 1988 user('Give me the list of VMs in GCP indicating the status. Regions us-east and eu-central'); 1989 bot(STEPS_VM); bot(VM_LIST); 1990 chip('ClowdOps · notification'); bot(NOTIF); 1991 } 1992 1993 async function play() { 1994 var t = ++token; 1995 chat.innerHTML = ''; 1996 var step = async function (fn, wait) { if (t !== token) return; fn(); await sleep(wait); }; 1997 await sleep(600); 1998 await step(function(){ user('<span class="tg-cmd">/start</span>'); }, 1100); 1999 await step(function(){ bot('This chat isn\'t linked to a sandbox yet. Send <span class="tg-cmd">/link <code></span> â get a code from the sandbox Credentials tab.'); }, 1700); 2000 await step(function(){ user('<span class="tg-cmd">/link</span> K7M2QX8410'); }, 1000); 2001 await step(function(){ bot('â <strong>Linked.</strong> Messages in this chat now drive the connected sandbox. Send <span class="tg-cmd">/new</span> to start a fresh session.'); }, 1700); 2002 await step(function(){ user('<span class="tg-cmd">/new</span>'); }, 900); 2003 await step(function(){ bot('⨠Started a new session.'); }, 1300); 2004 await step(function(){ user('Give me the list of VMs in GCP indicating the status. Regions us-east and eu-central'); }, 700); 2005 if (t !== token) return; 2006 var ty = typing(); await sleep(1500); 2007 if (t !== token) return; ty.remove(); 2008 await step(function(){ bot(STEPS_VM); }, 1500); 2009 await step(function(){ bot(VM_LIST); }, 2800); 2010 await sleep(1800); // short pause before the notification 2011 await step(function(){ chip('ClowdOps · notification'); }, 550); 2012 await step(function(){ bot(NOTIF); }, 100); 2013 if (t !== token) return; 2014 await sleep(6500); // hold so it can be read 2015 if (t === token) play(); 2016 } 2017 2018 function start() { 2019 if (started) return; started = true; 2020 if (reduce) { renderStatic(); return; } 2021 play(); 2022 } 2023 2024 if ('IntersectionObserver' in window) { 2025 var io = new IntersectionObserver(function (es) { 2026 es.forEach(function (e) { if (e.isIntersecting) start(); }); 2027 }, { threshold: 0.3 }); 2028 io.observe(chat); 2029 } else { start(); } 2030})(); 2031</script>
2031 2032 2033</body> 2034</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.