HTML ⎘ × 123456 <div class="wrap"> <span class="eyebrow">FluxPen — Demo</span> <h1>Build <i>anything</i> in the browser</h1> <p>Resize panels, watch the console, export when done.</p> <button onclick="demo()">Trigger console.log</button> <div class="grid"> <div class="card">HTML</div><div class="card">CSS</div><div class="card">JS</div> </div> </div>
CSS ⎘ × 12345678 *{margin:0;padding:0;box-sizing:border-box} body{font-family:system-ui;background:#f6f7f9;color:#0f172a;min-height:100vh;display:grid;place-items:center;padding:32px} .wrap{max-width:560px;background:white;padding:32px;border-radius:18px;box-shadow:0 16px 40px rgba(0,0,0,.08);border:1px solid #eef0f4} .eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#4F7DFF;font-weight:700} h1{font-size:32px;line-height:1.05;letter-spacing:-.03em;margin:10px 0} h1 i{font-style:normal;color:#FF5A2B} p{color:#64748b;margin-bottom:16px} button{background:#0f172a;color:white;border:none;padding:10px 18px;border-radius:999px;cursor:pointer;font-weight:600} .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px} .card{background:#f8fafc;border:1px solid #eef2f7;padding:16px;border-radius:12px;text-align:center;font-weight:600}
JS ⎘ × 123456 function demo(){ console.log("Hello from FluxPen 👋"); console.warn("This is a warning — check console panel"); console.info("Tip: errors also appear here"); } console.log("Page loaded at", new Date().toLocaleTimeString());
