Open API for Custom Terminals & Apps

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>USDT/USD P2P Terminal</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-950 text-slate-100 font-sans p-6">
  <div class="max-w-5xl mx-auto space-y-6">
    <div class="flex items-center justify-between pb-6 border-b border-slate-800">
      <div>
        <h1 class="text-2xl font-black text-white">USDT/USD Live P2P Terminal</h1>
        <p class="text-xs text-slate-400 mt-1">Multi-Exchange aggregator powered by P2P Companion Open API</p>
      </div>
      <div id="spread-badge" class="px-3 py-1 rounded-xl bg-emerald-500/15 border border-emerald-500/30 text-emerald-400 font-mono text-xs font-bold">
        Loading...
      </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <div class="p-4 rounded-xl bg-slate-900 border border-emerald-500/25">
        <div id="buy-label" class="text-xs uppercase font-bold text-slate-400">Cheapest Buy</div>
        <div id="buy-price" class="text-2xl font-black font-mono text-emerald-400 mt-1">—</div>
      </div>
      <div class="p-4 rounded-xl bg-slate-900 border border-cyan-500/25">
        <div id="sell-label" class="text-xs uppercase font-bold text-slate-400">Highest Sell</div>
        <div id="sell-price" class="text-2xl font-black font-mono text-cyan-400 mt-1">—</div>
      </div>
    </div>

    <div class="flex items-center justify-between">
      <div class="flex bg-slate-900 p-1 rounded-xl border border-slate-800">
        <button id="tab-buy" onclick="setTab('buy')" class="px-4 py-1.5 rounded-lg text-xs font-bold bg-emerald-500 text-slate-950">Buy USDT</button>
        <button id="tab-sell" onclick="setTab('sell')" class="px-4 py-1.5 rounded-lg text-xs font-bold text-slate-400">Sell USDT</button>
      </div>
      <div id="exchange-buttons" class="flex gap-1.5"></div>
    </div>

    <div class="overflow-x-auto rounded-xl border border-slate-800">
      <table class="w-full text-left text-xs">
        <thead class="bg-slate-900 text-slate-400 uppercase text-[10px] tracking-wider border-b border-slate-800">
          <tr>
            <th class="p-3">Merchant</th>
            <th class="p-3">Price (USD)</th>
            <th class="p-3">Limits (USD)</th>
            <th class="p-3">Payment Methods</th>
            <th class="p-3 text-right">Direct Link</th>
          </tr>
        </thead>
        <tbody id="ads-tbody" class="divide-y divide-slate-800 font-mono">
          <tr><td colspan="5" class="p-6 text-center text-slate-500 font-sans">Connecting to Open API...</td></tr>
        </tbody>
      </table>
    </div>
  </div>

  <script>
    const API_KEY = "P2P-YOUR-KEY-HERE";
    const FIAT = "USD";
    const TOKEN = "USDT";
    const EXCHANGES = "binance,okx,bybit";
    const DEPTH = 5;

    let activeTab = 'buy';
    let selectedEx = 'binance';
    let terminalData = null;

    async function fetchTerminal() {
      try {
        const url = 'https://p2pcompanion.com/api/v1/terminal?fiat=' + FIAT + '&token=' + TOKEN + '&exchanges=' + EXCHANGES + '&depth=' + DEPTH;
        const res = await fetch(url, { headers: { 'Authorization': 'Bearer ' + API_KEY } });
        const json = await res.json();
        if (json.ok) {
          terminalData = json;
          render();
        }
      } catch (e) {
        console.error(e);
      }
    }

    function setTab(tab) {
      activeTab = tab;
      document.getElementById('tab-buy').className = tab === 'buy' ? 'px-4 py-1.5 rounded-lg text-xs font-bold bg-emerald-500 text-slate-950' : 'px-4 py-1.5 rounded-lg text-xs font-bold text-slate-400';
      document.getElementById('tab-sell').className = tab === 'sell' ? 'px-4 py-1.5 rounded-lg text-xs font-bold bg-cyan-500 text-slate-950' : 'px-4 py-1.5 rounded-lg text-xs font-bold text-slate-400';
      render();
    }

    function setExchange(ex) {
      selectedEx = ex;
      render();
    }

    function render() {
      if (!terminalData) return;
      document.getElementById('spread-badge').innerText = "Spread +" + (terminalData.crossExchangeSpreadPct || 0) + "%";
      document.getElementById('buy-label').innerText = "Cheapest Buy (" + (terminalData.bestBuy?.exchange || '').toUpperCase() + ")";
      document.getElementById('buy-price').innerText = (terminalData.bestBuy?.price || '—') + " " + FIAT;
      document.getElementById('sell-label').innerText = "Highest Sell (" + (terminalData.bestSell?.exchange || '').toUpperCase() + ")";
      document.getElementById('sell-price').innerText = (terminalData.bestSell?.price || '—') + " " + FIAT;

      const exContainer = document.getElementById('exchange-buttons');
      exContainer.innerHTML = Object.keys(terminalData.byExchange || {}).map(ex => `
        <button onclick="setExchange('${ex}')" class="px-3 py-1 rounded-lg text-xs font-bold border ${selectedEx === ex ? 'bg-slate-800 border-slate-600 text-white' : 'bg-slate-950 border-slate-800 text-slate-400'}">
          ${ex.toUpperCase()}
        </button>
      `).join('');

      const offers = activeTab === 'buy' ? (terminalData.byExchange?.[selectedEx]?.buyOffers || []) : (terminalData.byExchange?.[selectedEx]?.sellOffers || []);
      const tbody = document.getElementById('ads-tbody');
      if (offers.length === 0) {
        tbody.innerHTML = '<tr><td colspan="5" class="p-6 text-center text-slate-500 font-sans">No ads found.</td></tr>';
        return;
      }
      tbody.innerHTML = offers.map(ad => `
        <tr class="hover:bg-slate-900/50">
          <td class="p-3 font-sans">
            <div class="font-bold text-white">${ad.advertiser.name}</div>
            <div class="text-[10px] text-slate-500">${ad.advertiser.positiveRate}% • ${ad.advertiser.completedOrders} orders</div>
          </td>
          <td class="p-3 font-black text-sm ${activeTab === 'buy' ? 'text-emerald-400' : 'text-cyan-400'}">${ad.price} ${FIAT}</td>
          <td class="p-3 text-slate-300">${ad.minFiat.toLocaleString()} - ${ad.maxFiat.toLocaleString()}</td>
          <td class="p-3 font-sans text-slate-400">${ad.payments.slice(0, 3).join(', ')}</td>
          <td class="p-3 text-right font-sans">
            <a href="${ad.tradeUrl}" target="_blank" rel="noopener noreferrer" class="px-3 py-1 rounded bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-xs inline-block">Trade ↗</a>
          </td>
        </tr>
      `).join('');
    }

    fetchTerminal();
    setInterval(fetchTerminal, 45000);
  </script>
</body>
</html>