components/proxy-warning.js

class ProxyWarning extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .warning {
          background: rgba(234, 179, 8, 0.1);
          border: 1px solid rgba(234, 179, 8, 0.2);
          border-radius: 0.75rem;
          padding: 1rem;
          margin: 1rem 0;
          color: rgba(234, 179, 8, 0.9);
        }
        .title {
          font-weight: 600;
          margin-bottom: 0.5rem;
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
        .code {
          background: rgba(0, 0, 0, 0.3);
          padding: 0.75rem;
          border-radius: 0.5rem;
          font-family: monospace;
          font-size: 0.8rem;
          margin-top: 0.5rem;
          overflow-x: auto;
        }
      </style>
      <div class="warning">
        <div class="title">
          <i data-feather="alert-triangle"></i>
          Proxy Recommendation
        </div>
        <div class="text-sm">
          For reliable connections, run this local proxy server:
        </div>
        <div class="code">
          npm install express node-fetch<br>
          // Create server.js with:<br>
          const express = require('express');<br>
          const fetch = require('node-fetch');<br><br>
          const app = express();<br>
          app.use(express.json());<br><br>
          app.post("/api/rosalinda", async (req, res) => {<br>
          &nbsp;&nbsp;try {<br>
          &nbsp;&nbsp;&nbsp;&nbsp;const response = await fetch("API_URL", {<br>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;method: "POST",<br>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;headers: {<br>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"Content-Type": "application/json",<br>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"Authorization": "Bearer YOUR_API_KEY"<br>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body: JSON.stringify(req.body)<br>
          &nbsp;&nbsp;&nbsp;&nbsp;});<br>
          &nbsp;&nbsp;&nbsp;&nbsp;res.json(await response.json());<br>
          &nbsp;&nbsp;} catch (err) {<br>
          &nbsp;&nbsp;&nbsp;&nbsp;res.status(500).json({ error: err.message });<br>
          &nbsp;&nbsp;}<br>
          });<br><br>
          app.listen(3000, () => console.log("Proxy running"));
        </div>
      </div>
    `;
    feather.replace();
  }
}
customElements.define('proxy-warning', ProxyWarning);