Hugging Face's logo

Spaces:
Really-amin
/
Datasourceforcryptocurrency-4
Runtime error

App Files Community
Datasourceforcryptocurrency-4 / hf-data-engine /Can you put data sources /api - Copy.html
Really-amin's picture
Really-amin
Upload 317 files
eebf5c4 verified
raw
history blame contribute delete
29.5 kB
<!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">
<!-- Vazirmatn -->
<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;
}
/* Header */
.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 */
.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 */
.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;
}
/* Cards */
.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 */
.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}
/* Code */
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 */
.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 button */
.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 -->
<header class="topbar" aria-label="Header">
<div class="brand" aria-label="Brand">
<!-- Logo SVG -->
<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>
<!-- Toolbar -->
<section class="toolbar" role="region" aria-label="Toolbar">
<div class="group" aria-label="Auth">
<div class="input" title="Service Token (Api-Key)">
<!-- key icon -->
<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">
<!-- download icon -->
<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>
<!-- Tabs -->
<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>
<!-- Content -->
<main class="content">
<!-- OVERVIEW -->
<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&amp;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&amp;interval=1h&amp;limit=100'</pre>
</div>
</div>
</div>
</section>
<!-- REGISTRY -->
<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>
<!-- FAILOVER -->
<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>
<!-- REALTIME -->
<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>
<!-- COLLECTION PLAN -->
<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>
<!-- TEMPLATES -->
<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}&amp;vs_currencies={fiats}</pre>
<pre>curl -s 'https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum&amp;vs_currencies=usd'</pre>
</div>
<div class="card col-6">
<h3>binance_public.klines</h3>
<pre>GET /api/v3/klines?symbol={symbol}&amp;interval={interval}&amp;limit={n}</pre>
<pre>curl -s 'https://api.binance.com/api/v3/klines?symbol=BTCUSDT&amp;interval=1h&amp;limit=100'</pre>
</div>
</section>
<!-- OBSERVABILITY -->
<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>
<!-- DOCS -->
<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>
<!-- Toast -->
<div class="toast" id="toast" role="status" aria-live="polite">پیام نمونه...</div>
<script>
// -------- Sample Data (compact mirror of your spec) --------
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}]
}
};
// -------- Helpers --------
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);
};
// -------- Init KPIs --------
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');
}
// -------- Registry Tables --------
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);
});
}
// -------- Failover --------
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);
}
}
// -------- Realtime --------
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);
}
// -------- Collection Plan --------
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);
});
}
// -------- Observability --------
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);
});
}
// -------- Tabs --------
$$('.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'});
});
});
// -------- Toggles --------
$('#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'); };
// -------- Token + WS Mock --------
$('#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'); };
// -------- Export --------
$('#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);
};
// -------- Mount --------
function mount(){
initKPIs(); renderRegistry(); renderFailover(); renderRealtime(); renderCollection(); renderObs();
}
mount();
</script>
</body>
</html>