66 lines
4.6 KiB
HTML
66 lines
4.6 KiB
HTML
<!DOCTYPE html><html lang="fr"><head><meta charset="UTF-8"><title>Universal Integration Hub — WEVIA EM</title><style>
|
|
*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,sans-serif;background:#0a0e1a;color:#e2e8f0;padding:20px}
|
|
.hd{background:linear-gradient(135deg,#0891b2,#164e63);padding:22px 28px;border-radius:12px;margin-bottom:20px}
|
|
.hd h1{color:white;font-size:26px}.hd .sub{color:rgba(255,255,255,.85);margin-top:6px;font-size:13px}
|
|
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px}
|
|
.sc{background:#111827;border:1px solid #1e293b;border-radius:10px;padding:14px;text-align:center;cursor:pointer;transition:all .2s}
|
|
.sc:hover{border-color:#06b6d4;transform:translateY(-2px)}
|
|
.sc.active{border-color:#06b6d4;background:#164e63}
|
|
.sc .n{font-size:28px;font-weight:800;color:#06b6d4;font-family:monospace}
|
|
.sc .l{font-size:11px;color:#94a3b8;margin-top:4px;text-transform:uppercase;letter-spacing:1px}
|
|
.search{margin-bottom:20px;display:flex;gap:10px}
|
|
.search input{flex:1;padding:12px;background:#111827;border:1px solid #1e293b;border-radius:8px;color:#e2e8f0;font-size:14px}
|
|
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
|
|
.card{background:#111827;border:1px solid #1e293b;border-radius:10px;padding:16px;transition:all .2s;cursor:pointer}
|
|
.card:hover{border-color:#06b6d4;transform:translateY(-2px);box-shadow:0 4px 20px rgba(8,145,178,.2)}
|
|
.card .name{font-size:16px;font-weight:700;color:#e2e8f0;margin-bottom:4px}
|
|
.card .cat{font-size:10px;color:#06b6d4;text-transform:uppercase;letter-spacing:1px}
|
|
.card .auth{display:inline-block;background:#1e293b;padding:2px 8px;border-radius:4px;font-size:10px;color:#94a3b8;margin-top:6px;margin-right:4px}
|
|
.card .badges{margin-top:8px}
|
|
.card .badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;margin-right:4px}
|
|
.b-rt{background:rgba(168,85,247,.2);color:#c084fc}
|
|
.b-wh{background:rgba(234,179,8,.2);color:#facc15}
|
|
.card .use{font-size:11px;color:#64748b;margin-top:8px}
|
|
.card a{color:#06b6d4;text-decoration:none;font-size:11px}
|
|
</style></head><body>
|
|
<div class="hd"><h1>🔌 Universal Integration Hub</h1><div class="sub">WEVIA EM s'interface avec tout ERP · CRM · IA · Cloud · Hardware · API — 104 connecteurs</div></div>
|
|
<div class="stats" id="stats">Chargement...</div>
|
|
<div class="search"><input type="text" id="q" placeholder="Rechercher (sap, stripe, aws, iot...)" oninput="reload()"><select id="cat" onchange="reload()" style="padding:12px;background:#111827;border:1px solid #1e293b;border-radius:8px;color:#e2e8f0"><option value="">Toutes catégories</option></select></div>
|
|
<div class="grid" id="grid">Chargement...</div>
|
|
<script>
|
|
let currentCat=null;
|
|
async function loadStats(){
|
|
const d=await fetch('/api/em/universal-stats').then(r=>r.json());
|
|
const cats=d.by_category||[];
|
|
const sel=document.getElementById('cat');
|
|
sel.innerHTML='<option value="">Toutes ('+d.total+')</option>'+cats.map(c=>`<option value="${c.category}">${c.category} (${c.c})</option>`).join('');
|
|
document.getElementById('stats').innerHTML=`
|
|
<div class="sc" onclick="filterCat('')"><div class="n">${d.total||0}</div><div class="l">TOTAL</div></div>
|
|
${cats.map(c=>`<div class="sc" onclick="filterCat('${c.category}')"><div class="n">${c.c}</div><div class="l">${c.category}</div></div>`).join('')}
|
|
<div class="sc"><div class="n">${d.webhook_enabled||0}</div><div class="l">🔔 webhook</div></div>
|
|
<div class="sc"><div class="n">${d.realtime_enabled||0}</div><div class="l">⚡ realtime</div></div>
|
|
`;
|
|
}
|
|
function filterCat(c){currentCat=c;document.getElementById('cat').value=c;reload()}
|
|
async function reload(){
|
|
const q=document.getElementById('q').value;
|
|
const c=document.getElementById('cat').value;
|
|
const url=`/api/em/universal-connectors?${c?'category='+c:''}${q?'&q='+encodeURIComponent(q):''}`;
|
|
const d=await fetch(url).then(r=>r.json());
|
|
document.getElementById('grid').innerHTML=(d.connectors||[]).map(x=>`
|
|
<div class="card">
|
|
<div class="cat">${x.category}</div>
|
|
<div class="name">${x.connector_name}</div>
|
|
<span class="auth">${x.auth_type}</span>
|
|
<div class="badges">
|
|
${x.webhook_support?'<span class="badge b-wh">🔔 webhook</span>':''}
|
|
${x.realtime_support?'<span class="badge b-rt">⚡ realtime</span>':''}
|
|
</div>
|
|
<div class="use">${(x.use_cases||[]).slice(0,3).join(' · ')}</div>
|
|
${x.docs_url?`<a href="${x.docs_url}" target="_blank">📖 Docs →</a>`:''}
|
|
</div>
|
|
`).join('')||'<div style="color:#64748b">Aucun résultat</div>';
|
|
}
|
|
(async()=>{await loadStats();await reload()})();
|
|
</script></body></html>
|