|
|
<!doctype html>
|
|
|
<html lang="fa" dir="rtl">
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<title>Crypto Data Authority Pack – Demo UI</title>
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;600;700&display=swap" rel="stylesheet">
|
|
|
<style>
|
|
|
:root{
|
|
|
--bg:#ffffff;
|
|
|
--fg:#0b1220;
|
|
|
--muted:#6b7280;
|
|
|
--primary:#4f46e5;
|
|
|
--primary-weak:#eef2ff;
|
|
|
--success:#10b981;
|
|
|
--warn:#f59e0b;
|
|
|
--danger:#ef4444;
|
|
|
--glass: rgba(255,255,255,0.65);
|
|
|
--border: rgba(15,23,42,0.08);
|
|
|
--shadow: 0 12px 30px rgba(2,6,23,0.08);
|
|
|
--radius:14px;
|
|
|
--radius-sm:10px;
|
|
|
--card-blur: 10px;
|
|
|
--kpi-bg:#f8fafc;
|
|
|
--chip:#0ea5e9;
|
|
|
--table-stripe:#f8fafc;
|
|
|
--code-bg:#0b1220;
|
|
|
--code-fg:#e5e7eb;
|
|
|
}
|
|
|
*{box-sizing:border-box}
|
|
|
html,body{height:100%}
|
|
|
body{
|
|
|
margin:0; background:var(--bg); color:var(--fg);
|
|
|
font-family:"Vazirmatn",system-ui,Segoe UI,Roboto,Arial,sans-serif;
|
|
|
}
|
|
|
.page{
|
|
|
display:grid; grid-template-rows:auto auto 1fr; gap:18px; min-height:100vh;
|
|
|
padding:24px clamp(16px,3vw,32px) 32px;
|
|
|
}
|
|
|
|
|
|
|
|
|
.topbar{
|
|
|
display:flex; align-items:center; gap:16px; flex-wrap:wrap;
|
|
|
}
|
|
|
.brand{
|
|
|
display:flex; align-items:center; gap:10px; padding:10px 14px;
|
|
|
border:1px solid var(--border); border-radius:var(--radius);
|
|
|
background:var(--glass); backdrop-filter: blur(var(--card-blur)); box-shadow:var(--shadow);
|
|
|
}
|
|
|
.brand svg{width:24px;height:24px}
|
|
|
.brand h1{font-size:16px; margin:0}
|
|
|
.ribbon{
|
|
|
margin-inline-start:auto; display:flex; gap:10px; align-items:center; flex-wrap:wrap;
|
|
|
}
|
|
|
.chip{
|
|
|
display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
|
|
|
background:var(--primary-weak); color:var(--primary); border:1px solid var(--border);
|
|
|
font-size:12px; font-weight:600;
|
|
|
}
|
|
|
.chip .dot{width:8px;height:8px;border-radius:50%;}
|
|
|
.dot.green{background:var(--success)} .dot.gray{background:#94a3b8} .dot.red{background:var(--danger)}
|
|
|
|
|
|
|
|
|
.toolbar{
|
|
|
display:flex; gap:12px; flex-wrap:wrap; align-items:center;
|
|
|
background:var(--glass); border:1px solid var(--border);
|
|
|
border-radius:var(--radius); padding:12px; backdrop-filter: blur(var(--card-blur)); box-shadow:var(--shadow);
|
|
|
}
|
|
|
.toolbar .group{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
|
|
|
.input{
|
|
|
display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--border);
|
|
|
background:#ffffff; border-radius:12px; min-width:260px;
|
|
|
}
|
|
|
.input input{
|
|
|
border:none; outline:none; background:transparent; width:180px; font-family:inherit; font-size:14px;
|
|
|
}
|
|
|
.btn{
|
|
|
appearance:none; border:none; outline:none; cursor:pointer; font-family:inherit;
|
|
|
padding:10px 14px; border-radius:12px; font-weight:700; transition: .2s ease;
|
|
|
background:var(--primary); color:white; box-shadow:0 6px 16px rgba(79,70,229,.25);
|
|
|
}
|
|
|
.btn.ghost{background:transparent; color:var(--primary); border:1px solid var(--border)}
|
|
|
.btn:active{transform:translateY(1px)}
|
|
|
.switch{
|
|
|
display:inline-flex; gap:6px; border:1px solid var(--border); border-radius:999px; padding:6px;
|
|
|
background:#fff;
|
|
|
}
|
|
|
.switch button{padding:8px 12px; border-radius:999px; border:none; background:transparent; cursor:pointer; font-weight:700}
|
|
|
.switch button.active{background:var(--primary-weak); color:var(--primary)}
|
|
|
|
|
|
|
|
|
.tabs{
|
|
|
display:flex; gap:8px; flex-wrap:wrap; position:sticky; top:12px; z-index:3;
|
|
|
}
|
|
|
.tab{
|
|
|
border:1px solid var(--border); background:#fff; border-radius:12px; padding:10px 12px; cursor:pointer; font-weight:700;
|
|
|
}
|
|
|
.tab.active{background:var(--primary); color:#fff; box-shadow:0 6px 16px rgba(79,70,229,.25)}
|
|
|
.content{
|
|
|
display:grid; gap:18px;
|
|
|
}
|
|
|
|
|
|
|
|
|
.grid{
|
|
|
display:grid; gap:16px;
|
|
|
grid-template-columns: repeat(12, minmax(0,1fr));
|
|
|
}
|
|
|
.col-12{grid-column: span 12}
|
|
|
.col-6{grid-column: span 6}
|
|
|
.col-4{grid-column: span 4}
|
|
|
.col-3{grid-column: span 3}
|
|
|
@media (max-width:1100px){ .col-6,.col-4{grid-column: span 12} .col-3{grid-column: span 6} }
|
|
|
.card{
|
|
|
background:var(--glass); border:1px solid var(--border);
|
|
|
border-radius:var(--radius); box-shadow:var(--shadow); backdrop-filter: blur(var(--card-blur));
|
|
|
padding:16px;
|
|
|
}
|
|
|
.card h3{margin:0 0 6px 0; font-size:15px}
|
|
|
.muted{color:var(--muted); font-size:13px}
|
|
|
.kpi{
|
|
|
display:flex; align-items:end; justify-content:space-between; background:var(--kpi-bg);
|
|
|
border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px;
|
|
|
}
|
|
|
.kpi .big{font-size:26px; font-weight:800}
|
|
|
.kpi .trend{display:flex; align-items:center; gap:6px; font-weight:700}
|
|
|
.trend.up{color:var(--success)} .trend.down{color:var(--danger)}
|
|
|
|
|
|
|
|
|
.table{
|
|
|
width:100%; border-collapse:separate; border-spacing:0; overflow:auto; border:1px solid var(--border); border-radius:12px;
|
|
|
}
|
|
|
.table th, .table td{
|
|
|
text-align:start; padding:10px 12px; border-bottom:1px solid var(--border); font-size:13px;
|
|
|
vertical-align:middle;
|
|
|
}
|
|
|
.table tr:nth-child(odd) td{background:var(--table-stripe)}
|
|
|
.badge{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px;}
|
|
|
.badge.ok{background:#ecfdf5; color:var(--success); border:1px solid #d1fae5}
|
|
|
.badge.warn{background:#fff7ed; color:var(--warn); border:1px solid #ffedd5}
|
|
|
.badge.err{background:#fef2f2; color:var(--danger); border:1px solid #fee2e2}
|
|
|
|
|
|
|
|
|
pre{
|
|
|
margin:0; background:var(--code-bg); color:var(--code-fg);
|
|
|
border-radius:12px; padding:12px; direction:ltr; overflow:auto; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px;
|
|
|
}
|
|
|
|
|
|
|
|
|
.toast{
|
|
|
position:fixed; bottom:24px; inset-inline:24px auto; display:none; z-index:10;
|
|
|
padding:12px 16px; border-radius:12px; background:#0b1220; color:#e5e7eb; box-shadow:var(--shadow);
|
|
|
}
|
|
|
.toast.show{display:block; animation:fade .25s ease}
|
|
|
@keyframes fade{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}}
|
|
|
|
|
|
|
|
|
.icon-btn{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); padding:10px 12px; border-radius:12px; background:#fff; cursor:pointer}
|
|
|
.icon-btn svg{width:18px;height:18px}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="page" id="app">
|
|
|
|
|
|
<header class="topbar" aria-label="Header">
|
|
|
<div class="brand" aria-label="Brand">
|
|
|
|
|
|
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
|
<defs>
|
|
|
<linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">
|
|
|
<stop offset="0" stop-color="#6366f1"/><stop offset="1" stop-color="#22d3ee"/>
|
|
|
</linearGradient>
|
|
|
</defs>
|
|
|
<circle cx="12" cy="12" r="10" stroke="url(#g1)" stroke-width="2"></circle>
|
|
|
<path d="M8 12h8M12 8v8" stroke="url(#g1)" stroke-width="2" stroke-linecap="round"/>
|
|
|
</svg>
|
|
|
<div>
|
|
|
<h1>Crypto Data Authority Pack</h1>
|
|
|
<div class="muted" id="subtitle">مرجع یکپارچه منابع بازار، خبر، سنتیمنت، آنچین</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="ribbon">
|
|
|
<span class="chip" title="Backend status">
|
|
|
<span class="dot green"></span> Backend: Healthy
|
|
|
</span>
|
|
|
<span class="chip" id="ws-status" title="WebSocket status">
|
|
|
<span class="dot gray"></span> WS: Disconnected
|
|
|
</span>
|
|
|
<span class="chip" title="Updated">
|
|
|
⏱️ Updated: <span id="updatedAt">—</span>
|
|
|
</span>
|
|
|
</div>
|
|
|
</header>
|
|
|
|
|
|
|
|
|
<section class="toolbar" role="region" aria-label="Toolbar">
|
|
|
<div class="group" aria-label="Auth">
|
|
|
<div class="input" title="Service Token (Api-Key)">
|
|
|
|
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
|
|
|
<path d="M15 7a4 4 0 1 0-6 3.465V14h3v3h3l2-2v-2h2l1-1" stroke="#64748b" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
</svg>
|
|
|
<input id="token" type="password" placeholder="توکن سرویس (Api-Key)..." aria-label="Service token">
|
|
|
</div>
|
|
|
<button class="btn" id="btnApply">اعمال توکن</button>
|
|
|
<button class="btn ghost" id="btnTest">تست اتصال</button>
|
|
|
</div>
|
|
|
<div class="group" aria-label="Toggles">
|
|
|
<div class="switch" role="tablist" aria-label="Language">
|
|
|
<button id="fa" class="active" aria-selected="true">FA</button>
|
|
|
<button id="en">EN</button>
|
|
|
</div>
|
|
|
<div class="switch" aria-label="Direction">
|
|
|
<button id="rtl" class="active">RTL</button>
|
|
|
<button id="ltr">LTR</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="group">
|
|
|
<button class="icon-btn" id="btnExport" title="Export current JSON">
|
|
|
|
|
|
<svg viewBox="0 0 24 24" fill="none"><path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14" stroke="#0ea5e9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
|
خروجی JSON
|
|
|
</button>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
|
|
|
<nav class="tabs" aria-label="Sections">
|
|
|
<button class="tab active" data-tab="overview">Overview</button>
|
|
|
<button class="tab" data-tab="registry">Registry</button>
|
|
|
<button class="tab" data-tab="failover">Failover</button>
|
|
|
<button class="tab" data-tab="realtime">Realtime</button>
|
|
|
<button class="tab" data-tab="collection">Collection Plan</button>
|
|
|
<button class="tab" data-tab="templates">Query Templates</button>
|
|
|
<button class="tab" data-tab="observability">Observability</button>
|
|
|
<button class="tab" data-tab="docs">Docs</button>
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
<main class="content">
|
|
|
|
|
|
|
|
|
<section class="grid" id="tab-overview" role="tabpanel" aria-labelledby="Overview">
|
|
|
<div class="card col-12">
|
|
|
<h3>خلاصه / Summary</h3>
|
|
|
<div class="muted">این دموی UI نمای کلی «پک مرجع دادههای رمز ارز» را با کارتهای KPI، تبهای پیمایش و جدولهای فشرده نمایش میدهد.</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="col-3 card">
|
|
|
<div class="kpi">
|
|
|
<div>
|
|
|
<div class="muted">Total Providers</div>
|
|
|
<div class="big" id="kpiTotal">—</div>
|
|
|
</div>
|
|
|
<div class="trend up">▲ +5</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-3 card">
|
|
|
<div class="kpi">
|
|
|
<div>
|
|
|
<div class="muted">Free Endpoints</div>
|
|
|
<div class="big" id="kpiFree">—</div>
|
|
|
</div>
|
|
|
<div class="trend up">▲ 2</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-3 card">
|
|
|
<div class="kpi">
|
|
|
<div>
|
|
|
<div class="muted">Failover Chains</div>
|
|
|
<div class="big" id="kpiChains">—</div>
|
|
|
</div>
|
|
|
<div class="trend up">▲ 1</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-3 card">
|
|
|
<div class="kpi">
|
|
|
<div>
|
|
|
<div class="muted">WS Topics</div>
|
|
|
<div class="big" id="kpiWs">—</div>
|
|
|
</div>
|
|
|
<div class="trend up">▲ 3</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="col-12 card">
|
|
|
<h3>نمونه درخواستها (Examples)</h3>
|
|
|
<div class="grid">
|
|
|
<div class="col-6">
|
|
|
<div class="muted">CoinGecko – Simple Price</div>
|
|
|
<pre>curl -s 'https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum&vs_currencies=usd'</pre>
|
|
|
</div>
|
|
|
<div class="col-6">
|
|
|
<div class="muted">Binance – Klines</div>
|
|
|
<pre>curl -s 'https://api.binance.com/api/v3/klines?symbol=BTCUSDT&interval=1h&limit=100'</pre>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
|
|
|
<section class="grid" id="tab-registry" role="tabpanel" hidden>
|
|
|
<div class="card col-12">
|
|
|
<h3>Registry Snapshot</h3>
|
|
|
<div class="muted">نمای خلاصهی ردهها و سرویسها (نمونهداده داخلی)</div>
|
|
|
</div>
|
|
|
<div class="card col-6">
|
|
|
<h3>Categories</h3>
|
|
|
<table class="table" id="tblCategories" aria-label="Categories table">
|
|
|
<thead><tr><th>Category</th><th>Count</th><th>Notes</th></tr></thead>
|
|
|
<tbody></tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
<div class="card col-6">
|
|
|
<h3>Highlighted Providers</h3>
|
|
|
<table class="table" id="tblProviders" aria-label="Providers table">
|
|
|
<thead><tr><th>Name</th><th>Role</th><th>Status</th></tr></thead>
|
|
|
<tbody></tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
|
|
|
<section class="grid" id="tab-failover" role="tabpanel" hidden>
|
|
|
<div class="card col-12">
|
|
|
<h3>Failover Chains</h3>
|
|
|
<div class="muted">زنجیرههای جایگزینی آزاد-محور (Free-first)</div>
|
|
|
</div>
|
|
|
<div class="card col-12" id="failoverList"></div>
|
|
|
</section>
|
|
|
|
|
|
|
|
|
<section class="grid" id="tab-realtime" role="tabpanel" hidden>
|
|
|
<div class="card col-12">
|
|
|
<h3>Realtime (WebSocket)</h3>
|
|
|
<div class="muted">قرارداد موضوعها، پیامها، heartbeat و استراتژی reconnect</div>
|
|
|
</div>
|
|
|
<div class="card col-6">
|
|
|
<h3>Topics</h3>
|
|
|
<table class="table" id="tblWs" aria-label="WS topics">
|
|
|
<thead><tr><th>Topic</th><th>Example</th></tr></thead>
|
|
|
<tbody></tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
<div class="card col-6">
|
|
|
<h3>Sample Message</h3>
|
|
|
<pre id="wsMessage"></pre>
|
|
|
<div style="margin-top:10px; display:flex; gap:8px">
|
|
|
<button class="btn" id="btnWsConnect">Connect (Mock)</button>
|
|
|
<button class="btn ghost" id="btnWsDisconnect">Disconnect</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
|
|
|
<section class="grid" id="tab-collection" role="tabpanel" hidden>
|
|
|
<div class="card col-12">
|
|
|
<h3>Collection Plan (ETL/ELT)</h3>
|
|
|
<div class="muted">زمانبندی دریافت داده و TTL</div>
|
|
|
</div>
|
|
|
<div class="card col-12">
|
|
|
<table class="table" id="tblCollection">
|
|
|
<thead><tr><th>Bucket</th><th>Endpoints</th><th>Schedule</th><th>TTL</th></tr></thead>
|
|
|
<tbody></tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
|
|
|
<section class="grid" id="tab-templates" role="tabpanel" hidden>
|
|
|
<div class="card col-12">
|
|
|
<h3>Query Templates</h3>
|
|
|
<div class="muted">قرارداد endpointها + نمونه cURL</div>
|
|
|
</div>
|
|
|
<div class="card col-6">
|
|
|
<h3>coingecko.simple_price</h3>
|
|
|
<pre>GET /simple/price?ids={ids}&vs_currencies={fiats}</pre>
|
|
|
<pre>curl -s 'https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum&vs_currencies=usd'</pre>
|
|
|
</div>
|
|
|
<div class="card col-6">
|
|
|
<h3>binance_public.klines</h3>
|
|
|
<pre>GET /api/v3/klines?symbol={symbol}&interval={interval}&limit={n}</pre>
|
|
|
<pre>curl -s 'https://api.binance.com/api/v3/klines?symbol=BTCUSDT&interval=1h&limit=100'</pre>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
|
|
|
<section class="grid" id="tab-observability" role="tabpanel" hidden>
|
|
|
<div class="card col-12">
|
|
|
<h3>Observability</h3>
|
|
|
<div class="muted">متریکها، بررسی کیفیت داده، هشدارها</div>
|
|
|
</div>
|
|
|
<div class="card col-4">
|
|
|
<div class="kpi">
|
|
|
<div><div class="muted">Success Rate</div><div class="big" id="succRate">—</div></div>
|
|
|
<div class="trend up">▲</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card col-4">
|
|
|
<div class="kpi">
|
|
|
<div><div class="muted">p95 Latency</div><div class="big" id="p95">—</div></div>
|
|
|
<div class="trend down">▼</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card col-4">
|
|
|
<div class="kpi">
|
|
|
<div><div class="muted">Failover Activations</div><div class="big" id="fo">—</div></div>
|
|
|
<div class="trend up">▲</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card col-12">
|
|
|
<h3>Data Quality Checklist</h3>
|
|
|
<table class="table" id="tblDQ">
|
|
|
<thead><tr><th>Rule</th><th>Status</th><th>Note</th></tr></thead>
|
|
|
<tbody></tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
|
|
|
<section class="grid" id="tab-docs" role="tabpanel" hidden>
|
|
|
<div class="card col-12">
|
|
|
<h3>Docs (Compact)</h3>
|
|
|
<div class="muted">راهنمای استفاده، امنیت و نسخهبندی بهصورت خلاصه</div>
|
|
|
</div>
|
|
|
<div class="card col-6">
|
|
|
<h3>Quick Start</h3>
|
|
|
<ol style="margin:0; padding-inline-start:20px">
|
|
|
<li>JSON اصلی را لود کنید.</li>
|
|
|
<li>از discovery برای یافتن id استفاده کنید.</li>
|
|
|
<li>query_templates را بخوانید.</li>
|
|
|
<li>Auth را اعمال کنید (توکن سرویس + کلید آزاد).</li>
|
|
|
<li>درخواست بزنید یا به WS مشترک شوید.</li>
|
|
|
</ol>
|
|
|
</div>
|
|
|
<div class="card col-6">
|
|
|
<h3>Security Notes</h3>
|
|
|
<ul style="margin:0; padding-inline-start:20px">
|
|
|
<li>کلیدهای رایگان عمومیاند؛ برای سقف بیشتر کلید خودتان را وارد کنید.</li>
|
|
|
<li>توکن سرویس، سهمیه و دسترسی را کنترل میکند.</li>
|
|
|
<li>کلیدها در لاگ ماسک میشوند.</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="card col-12">
|
|
|
<h3>Change Log</h3>
|
|
|
<pre>{
|
|
|
"version": "3.0.0",
|
|
|
"changes": ["Added WS spec","Expanded failover","Token-based access & quotas","Observability & DQ"]
|
|
|
}</pre>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
</main>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="toast" id="toast" role="status" aria-live="polite">پیام نمونه...</div>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
const sample = {
|
|
|
metadata:{updated:new Date().toISOString()},
|
|
|
registry:{
|
|
|
rpc_nodes: [{id:"publicnode_eth_mainnet",name:"PublicNode Ethereum",role:"rpc",base_url:"https://ethereum.publicnode.com"}],
|
|
|
block_explorers:[{id:"etherscan_primary",name:"Etherscan",role:"primary",base_url:"https://api.etherscan.io/api"}],
|
|
|
market_data_apis:[
|
|
|
{id:"coingecko",name:"CoinGecko",free:true,base_url:"https://api.coingecko.com/api/v3"},
|
|
|
{id:"binance_public",name:"Binance Public",free:true,base_url:"https://api.binance.com"}
|
|
|
],
|
|
|
news_apis:[
|
|
|
{id:"rss_coindesk",name:"CoinDesk RSS",free:true},
|
|
|
{id:"cointelegraph_rss",name:"CoinTelegraph RSS",free:true}
|
|
|
],
|
|
|
sentiment_apis:[{id:"alternative_me_fng",name:"Alternative.me FNG",free:true}],
|
|
|
onchain_analytics_apis:[{id:"glassnode_general",name:"Glassnode",free:false}],
|
|
|
whale_tracking_apis:[{id:"whale_alert",name:"Whale Alert",free:false}],
|
|
|
community_sentiment_apis:[{id:"reddit_cryptocurrency_new",name:"Reddit r/CryptoCurrency",free:true}],
|
|
|
hf_resources:[{id:"hf_model_elkulako_cryptobert",name:"CryptoBERT",type:"model"}],
|
|
|
free_http_endpoints:[
|
|
|
{id:"cg_simple_price",name:"CG Simple Price"},
|
|
|
{id:"binance_klines",name:"Binance Klines"}
|
|
|
],
|
|
|
local_backend_routes:[{id:"local_market_quotes",name:"Local Quotes"}],
|
|
|
cors_proxies:[{id:"allorigins",name:"AllOrigins"}]
|
|
|
},
|
|
|
failover:{
|
|
|
market:{chain:["coingecko","coinpaprika","coincap"],ttlSec:120},
|
|
|
news:{chain:["rss_coindesk","cointelegraph_rss","decrypt_rss"],ttlSec:600},
|
|
|
sentiment:{chain:["alternative_me_fng","cfgi_v1","cfgi_legacy"],ttlSec:300},
|
|
|
onchain:{chain:["etherscan_primary","blockscout_ethereum","blockchair_ethereum"],ttlSec:180}
|
|
|
},
|
|
|
realtime_spec:{
|
|
|
topics:["market.ticker","market.klines","indices.fng","news.headlines","social.aggregate"],
|
|
|
example:{topic:"market.ticker",ts:0,payload:{symbol:"BTCUSDT",price:67890.12}}
|
|
|
},
|
|
|
collection_plan:[
|
|
|
{bucket:"market", endpoints:["coingecko.simple_price"], schedule:"every 1 min", ttlSec:120},
|
|
|
{bucket:"indices", endpoints:["alternative_me_fng.fng"], schedule:"every 5 min", ttlSec:300},
|
|
|
{bucket:"news", endpoints:["rss_coindesk.feed","cointelegraph_rss.feed"], schedule:"every 10 min", ttlSec:600}
|
|
|
],
|
|
|
observability:{
|
|
|
successRate:"98.2%", p95:"420 ms", failovers:3,
|
|
|
dq:[{rule:"non_empty_payload",ok:true},{rule:"freshness_within_ttl",ok:true},{rule:"price_nonnegative",ok:true}]
|
|
|
}
|
|
|
};
|
|
|
|
|
|
|
|
|
const $ = (sel, root=document)=>root.querySelector(sel);
|
|
|
const $$ = (sel, root=document)=>Array.from(root.querySelectorAll(sel));
|
|
|
const toast = (msg,ms=2400)=>{
|
|
|
const t = $('#toast'); t.textContent = msg; t.classList.add('show');
|
|
|
setTimeout(()=>t.classList.remove('show'), ms);
|
|
|
};
|
|
|
|
|
|
|
|
|
function initKPIs(){
|
|
|
const r = sample.registry;
|
|
|
const total = Object.values(r).reduce((s,arr)=> s + (Array.isArray(arr)?arr.length:0), 0);
|
|
|
const free = (r.market_data_apis?.filter(x=>x.free).length||0) +
|
|
|
(r.news_apis?.filter(x=>x.free).length||0) +
|
|
|
(r.community_sentiment_apis?.filter(x=>x.free).length||0) +
|
|
|
(r.free_http_endpoints?.length||0);
|
|
|
$('#kpiTotal').textContent = total;
|
|
|
$('#kpiFree').textContent = free;
|
|
|
$('#kpiChains').textContent = Object.keys(sample.failover||{}).length;
|
|
|
$('#kpiWs').textContent = (sample.realtime_spec?.topics||[]).length;
|
|
|
$('#updatedAt').textContent = new Date(sample.metadata.updated).toLocaleString('fa-IR');
|
|
|
}
|
|
|
|
|
|
|
|
|
function renderRegistry(){
|
|
|
const tbody = $('#tblCategories tbody');
|
|
|
tbody.innerHTML = '';
|
|
|
const reg = sample.registry;
|
|
|
for(const k of Object.keys(reg)){
|
|
|
const count = (reg[k]||[]).length;
|
|
|
const tr = document.createElement('tr');
|
|
|
tr.innerHTML = `<td>${k}</td><td>${count}</td><td class="muted">—</td>`;
|
|
|
tbody.appendChild(tr);
|
|
|
}
|
|
|
|
|
|
const pBody = $('#tblProviders tbody');
|
|
|
pBody.innerHTML = '';
|
|
|
const highlights = [
|
|
|
{name:"CoinGecko", role:"Market", ok:true},
|
|
|
{name:"Binance Public", role:"Market/Klines", ok:true},
|
|
|
{name:"Etherscan", role:"Explorer", ok:true},
|
|
|
{name:"Glassnode", role:"On-chain", ok:false},
|
|
|
];
|
|
|
highlights.forEach(h=>{
|
|
|
const badge = h.ok ? '<span class="badge ok">Online</span>' : '<span class="badge warn">Limited</span>';
|
|
|
const tr = document.createElement('tr');
|
|
|
tr.innerHTML = `<td>${h.name}</td><td>${h.role}</td><td>${badge}</td>`;
|
|
|
pBody.appendChild(tr);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
function renderFailover(){
|
|
|
const wrap = $('#failoverList'); wrap.innerHTML = '';
|
|
|
const fo = sample.failover;
|
|
|
for(const bucket in fo){
|
|
|
const row = document.createElement('div');
|
|
|
row.className = 'card';
|
|
|
const chips = fo[bucket].chain.map((id,i)=>`<span class="chip" style="margin:4px">${i+1}. ${id}</span>`).join(' ');
|
|
|
row.innerHTML = `<div class="muted">Bucket</div><h3 style="margin:4px 0 10px">${bucket}</h3>
|
|
|
<div>${chips}</div>
|
|
|
<div class="muted" style="margin-top:8px">TTL: ${fo[bucket].ttlSec}s</div>`;
|
|
|
wrap.appendChild(row);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
function renderRealtime(){
|
|
|
const tb = $('#tblWs tbody'); tb.innerHTML='';
|
|
|
(sample.realtime_spec.topics||[]).forEach(t=>{
|
|
|
const tr = document.createElement('tr');
|
|
|
tr.innerHTML = `<td>${t}</td><td class="muted">SUBSCRIBE → "${t}"</td>`;
|
|
|
tb.appendChild(tr);
|
|
|
});
|
|
|
$('#wsMessage').textContent = JSON.stringify(sample.realtime_spec.example,null,2);
|
|
|
}
|
|
|
|
|
|
|
|
|
function renderCollection(){
|
|
|
const tb = $('#tblCollection tbody'); tb.innerHTML='';
|
|
|
(sample.collection_plan||[]).forEach(x=>{
|
|
|
const tr = document.createElement('tr');
|
|
|
tr.innerHTML = `<td>${x.bucket}</td><td>${x.endpoints.join(', ')}</td><td>${x.schedule}</td><td>${x.ttlSec}s</td>`;
|
|
|
tb.appendChild(tr);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
function renderObs(){
|
|
|
$('#succRate').textContent = sample.observability.successRate;
|
|
|
$('#p95').textContent = sample.observability.p95;
|
|
|
$('#fo').textContent = sample.observability.failovers;
|
|
|
const tb = $('#tblDQ tbody'); tb.innerHTML='';
|
|
|
sample.observability.dq.forEach(r=>{
|
|
|
const st = r.ok ? '<span class="badge ok">OK</span>' : '<span class="badge err">Fail</span>';
|
|
|
const tr = document.createElement('tr');
|
|
|
tr.innerHTML = `<td>${r.rule}</td><td>${st}</td><td class="muted">—</td>`;
|
|
|
tb.appendChild(tr);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
$$('.tab').forEach(btn=>{
|
|
|
btn.addEventListener('click', ()=>{
|
|
|
$$('.tab').forEach(b=>b.classList.remove('active'));
|
|
|
btn.classList.add('active');
|
|
|
const key = btn.dataset.tab;
|
|
|
$$('[role="tabpanel"]').forEach(p=>p.hidden = true);
|
|
|
$('#tab-'+key).hidden = false;
|
|
|
window.scrollTo({top:0,behavior:'smooth'});
|
|
|
});
|
|
|
});
|
|
|
|
|
|
|
|
|
$('#fa').onclick = ()=>{ document.documentElement.lang='fa'; $('#fa').classList.add('active'); $('#en').classList.remove('active'); $('#subtitle').textContent='مرجع یکپارچه منابع بازار، خبر، سنتیمنت، آنچین'; toast('زبان: فارسی'); };
|
|
|
$('#en').onclick = ()=>{ document.documentElement.lang='en'; $('#en').classList.add('active'); $('#fa').classList.remove('active'); $('#subtitle').textContent='Unified registry for market, news, sentiment & on-chain'; toast('Language: English'); };
|
|
|
$('#rtl').onclick = ()=>{ document.documentElement.dir='rtl'; $('#rtl').classList.add('active'); $('#ltr').classList.remove('active'); toast('جهت: RTL'); };
|
|
|
$('#ltr').onclick = ()=>{ document.documentElement.dir='ltr'; $('#ltr').classList.add('active'); $('#rtl').classList.remove('active'); toast('Direction: LTR'); };
|
|
|
|
|
|
|
|
|
$('#btnApply').onclick = ()=>{
|
|
|
const tok = $('#token').value.trim();
|
|
|
if(!tok){ toast('توکن خالی است'); return;}
|
|
|
toast('توکن اعمال شد');
|
|
|
};
|
|
|
$('#btnTest').onclick = ()=> toast('اتصال HTTP (نمونه) موفق ✔');
|
|
|
|
|
|
let wsMock = false;
|
|
|
function setWsStatus(on){
|
|
|
const chip = $('#ws-status'); const dot = chip.querySelector('.dot');
|
|
|
if(on){ dot.className='dot green'; chip.lastChild.textContent=' WS: Connected'; }
|
|
|
else{ dot.className='dot gray'; chip.lastChild.textContent=' WS: Disconnected'; }
|
|
|
}
|
|
|
$('#btnWsConnect').onclick = ()=>{ wsMock=true; setWsStatus(true); toast('WS connected (mock)'); };
|
|
|
$('#btnWsDisconnect').onclick = ()=>{ wsMock=false; setWsStatus(false); toast('WS disconnected'); };
|
|
|
|
|
|
|
|
|
$('#btnExport').onclick = ()=>{
|
|
|
const blob = new Blob([JSON.stringify(sample,null,2)], {type:'application/json'});
|
|
|
const a = document.createElement('a');
|
|
|
a.href = URL.createObjectURL(blob);
|
|
|
a.download = 'crypto_resources_authoritative.sample.json';
|
|
|
a.click();
|
|
|
URL.revokeObjectURL(a.href);
|
|
|
};
|
|
|
|
|
|
|
|
|
function mount(){
|
|
|
initKPIs(); renderRegistry(); renderFailover(); renderRealtime(); renderCollection(); renderObs();
|
|
|
}
|
|
|
mount();
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
