Mini WebContainer Demo

const http = require('http');

const server = http.createServer((req, res) => {
  console.log(`${req.method} ${req.url}`);

if (req.url === '/') {
    res.setHeader('Content-Type', 'text/html');
    res.end(`
      <!DOCTYPE html>
      <html>
        <head>
          <style>
            body {
              font-family: system-ui, sans-serif;
              padding: 2rem;
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
              min-height: 100vh;
              margin: 0;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
            }
            h1 { color: white; margin-bottom: 0.5rem; }
            p { color: rgba(255,255,255,0.8); }
            .card {
              background: white;
              padding: 2rem;
              border-radius: 12px;
              box-shadow: 0 10px 40px rgba(0,0,0,0.2);
              text-align: center;
            }
            a { color: #667eea; }
          </style>
        </head>
        <body>
          <div class="card">
            <h1>Hello from Mini WebContainer!</h1>
            <p>This HTTP server is running entirely in your browser.</p>
            <p>Try visiting <a href="/api/time">/api/time</a> or <a href="/api/random">/api/random</a></p>
          </div>
        </body>
      </html>
    `);
  } else if (req.url === '/api/time') {
    res.setHeader('Content-Type', 'application/json');
    res.end(JSON.stringify({ time: new Date().toISOString() }));
  } else if (req.url === '/api/random') {
    res.setHeader('Content-Type', 'application/json');
    res.end(JSON.stringify({ random: Math.random() }));
  } else {
    res.statusCode = 404;
    res.end('Not Found');
  }
});

server.listen(3000, () => {
  console.log('Server running on port 3000');
});

Preview Ready

Console

server.js

Preview Ready

Console