Files
Predictalytics/src/Predictalytics.Api/wwwroot/index.html
T

684 lines
32 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Predictalytics — Multi-Platform Prediction Market Smart-Money Tracker & Analytics">
<title>Predictalytics</title>
<link rel="stylesheet" href="css/style.css?v=20260715">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
</head>
<body>
<!-- Decorative glow layer -->
<div class="glow-layer"></div>
<div class="app-wrapper">
<!-- SIDEBAR -->
<aside class="sidebar">
<div class="sidebar-logo">
<div class="logo-icon"></div>
<div class="logo-text">Predictalytics<span style="color:#5b9dff;">.</span></div>
</div>
<nav class="sidebar-nav">
<div class="nav-title">Navigation</div>
<a href="#" class="nav-item active" data-page="dashboard">
<div class="nav-dot"></div>
<span>Dashboard</span>
</a>
<a href="#" class="nav-item" data-page="traders">
<div class="nav-dot"></div>
<span>Trader</span>
</a>
<a href="#" class="nav-item" data-page="watchlist">
<div class="nav-dot"></div>
<span>Watchlist</span>
</a>
<a href="#" class="nav-item" data-page="markets">
<div class="nav-dot"></div>
<span>Märkte</span>
</a>
<a href="#" class="nav-item" data-page="alerts">
<div class="nav-dot"></div>
<span>Alerts</span>
<span class="badge" id="alertBadge" style="display:none">0</span>
</a>
<a href="#" class="nav-item" data-page="jobs" id="nav-jobs-container">
<div class="nav-dot"></div>
<span>Background Jobs</span>
</a>
</nav>
<div class="sidebar-footer">
<div class="data-feed-badge">
<div class="label">Daten-Feed</div>
<div class="status">
<div class="dot"></div>
<span>Live · On-chain</span>
</div>
</div>
<div class="user-profile">
<div class="user-avatar"></div>
<div class="user-info">
<div class="name">Analyst</div>
<div class="workspace">Pro Workspace</div>
</div>
</div>
</div>
</aside>
<!-- MAIN CONTENT -->
<main class="main-content">
<!-- TOPBAR -->
<header class="topbar">
<div class="topbar-left">
<select id="platformSelect" class="platform-select">
<option value="All">Alle Plattformen</option>
<option value="Polymarket">Polymarket</option>
<option value="Limitless">Limitless</option>
<option value="Azuro">Azuro</option>
</select>
<div class="search-box">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input type="text" id="searchInput" placeholder="Suche nach Tradern, Märkten, Wallets..." autocomplete="off">
</div>
<select id="sortSelect" class="platform-select">
<option value="default">Sortieren: Standard</option>
<option value="score">Sortieren: Score/Vol</option>
<option value="name">Sortieren: Name/Datum</option>
<option value="pnl">Sortieren: PnL/Liq</option>
</select>
</div>
<div class="topbar-right">
<div class="header-vol-badge" id="headerVolumeBadge">24H VOL: Loading...</div>
<div class="theme-toggle" id="themeToggle" title="Design wechseln">
<svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
<svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
</div>
</div>
</header>
<!-- PAGE VIEWS -->
<div id="pageContent">
<!-- 1. Dashboard View -->
<section class="page active" id="page-dashboard">
<div class="page-title-wrap">
<div>
<h1 class="page-title">Märkte Übersicht</h1>
<div class="page-subtitle">Echtzeit-Analysen über alle Prognosemärkte</div>
</div>
<div class="timeframe-toggle" style="display:flex; background:rgba(255,255,255,0.04); border-radius:8px; padding:3px; border:1px solid var(--border);">
<button class="tf-btn active" data-tf="24h" style="padding:6px 12px; border:none; background:transparent; color:var(--text-muted); cursor:pointer; font-size:12px; font-weight:700; border-radius:6px; transition:var(--transition);">24H</button>
<button class="tf-btn" data-tf="7d" style="padding:6px 12px; border:none; background:transparent; color:var(--text-muted); cursor:pointer; font-size:12px; font-weight:700; border-radius:6px; transition:var(--transition);">7D</button>
<button class="tf-btn" data-tf="30d" style="padding:6px 12px; border:none; background:transparent; color:var(--text-muted); cursor:pointer; font-size:12px; font-weight:700; border-radius:6px; transition:var(--transition);">30D</button>
</div>
</div>
<!-- Global Metrics Grid -->
<div class="metrics-grid">
<div class="metric-card">
<div class="metric-label">Überwachte Trader</div>
<div class="metric-value" id="metricTraders"></div>
<div class="metric-delta positive">aktiv erfasst</div>
</div>
<div class="metric-card">
<div class="metric-label">Aktive Trader (24h)</div>
<div class="metric-value" id="metricActive"></div>
<div class="metric-delta positive">live on-chain</div>
</div>
<div class="metric-card">
<div class="metric-label">Erfasste Trades</div>
<div class="metric-value" id="metricTrades"></div>
<div class="metric-delta">gesamt</div>
</div>
<div class="metric-card accent">
<div class="metric-label">Handelsvolumen (24h)</div>
<div class="metric-value" id="metricVolume"></div>
<div class="metric-delta">USD</div>
</div>
</div>
<!-- Charts Row -->
<div class="charts-row">
<div class="card chart-card">
<div class="card-header"><h2>Verteilung nach Plattformen</h2></div>
<div class="chart-container"><canvas id="platformChart"></canvas></div>
</div>
<div class="card chart-card">
<div class="card-header"><h2>Trader Einstufungen</h2></div>
<div class="chart-container"><canvas id="tierChart"></canvas></div>
</div>
</div>
<!-- Top Traders and Recent Trades -->
<div class="glass-row">
<div class="card">
<div class="card-header"><h2>Top-Performer</h2></div>
<div class="table-wrap">
<table class="data-table" id="topTradersTable">
<thead>
<tr>
<th>#</th>
<th>Trader</th>
<th>Plattform</th>
<th class="num-col">Score</th>
<th class="num-col">Win Rate</th>
<th class="num-col">PnL</th>
<th>Trades (30d|All)</th>
</tr>
</thead>
<tbody id="topTradersBody"></tbody>
</table>
</div>
</div>
<div class="card">
<div class="card-header"><h2>Letzte Aktivitäten</h2></div>
<div class="table-wrap">
<table class="data-table" id="recentTradesTable">
<thead>
<tr>
<th>Zeit</th>
<th>Trader</th>
<th>Seite</th>
<th class="num-col">Preis</th>
<th class="num-col">Menge</th>
</tr>
</thead>
<tbody id="recentTradesBody"></tbody>
</table>
</div>
</div>
</div>
</section>
<!-- 2. Traders List View -->
<section class="page" id="page-traders">
<div class="page-title-wrap">
<div>
<h1 class="page-title">Trader-Bibliothek</h1>
<div class="page-subtitle">Verwalte und analysiere überwachte Wallets</div>
</div>
<div>
<select id="tradersSort" class="platform-select" onchange="loadTraders()">
<option value="score">Sortieren: Combined Score</option>
<option value="winrate">Sortieren: Win Rate</option>
<option value="copyability">Sortieren: Copyability</option>
<option value="pnl">Sortieren: Gesamt-PnL</option>
<option value="name">Sortieren: Name</option>
</select>
</div>
</div>
<div style="display:grid; grid-template-columns:1.5fr 1fr; gap:16px; margin-bottom:20px; align-items:stretch;">
<!-- Custom Filter Panel -->
<div class="filter-card">
<div class="filter-section">
<div class="filter-label">Filter nach Kennzahlen</div>
<div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
<div>
<span style="font-size:12px; color:var(--text-muted); font-weight:600;">Mindest-Win-Rate:</span>
<input type="number" id="filterWinrateMin" class="platform-select" style="width:100%; margin-top:6px;" placeholder="%" onchange="loadTraders()">
</div>
<div>
<span style="font-size:12px; color:var(--text-muted); font-weight:600;">Mindest-Copyability:</span>
<input type="number" id="filterCopyabilityMin" class="platform-select" style="width:100%; margin-top:6px;" placeholder="%" onchange="loadTraders()">
</div>
</div>
</div>
<div class="filter-section" style="margin-bottom:0;">
<div class="filter-label">Auswahl nach Traits</div>
<div class="traits-grid">
<select id="filterTrait" class="platform-select" onchange="loadTraders()" style="width:100%;">
<option value="">Alle Traits anzeigen</option>
</select>
<label style="display:flex; align-items:center; gap:8px; font-weight:600; cursor:pointer; font-size:12px; margin-top:10px; color:var(--text-secondary);">
<input type="checkbox" id="chk-highly-copyable" onchange="loadTraders()"> Nur sehr gut kopierbare (Copyability > 70%)
</label>
</div>
</div>
</div>
<!-- Add Trader Panel (Control-Mode Guarded) -->
<div class="filter-card" id="control-add-trader-panel" style="display:flex; flex-direction:column; justify-content:center;">
<div class="filter-label">Trader hinzufügen</div>
<div style="display:flex; flex-direction:column; gap:12px;">
<select id="addPlatform" class="platform-select">
<option value="Polymarket">Polymarket</option>
<option value="Limitless">Limitless</option>
</select>
<input type="text" id="addWallet" placeholder="Wallet-Adresse / Handle" class="platform-select">
<button class="btn-premium" onclick="manualAddTrader()" style="justify-content:center; padding:12px;">
Hinzufügen
</button>
</div>
</div>
</div>
<!-- Traders Table Card -->
<div class="card">
<div class="table-wrap">
<table class="data-table">
<thead>
<tr>
<th style="cursor:pointer" onclick="setTraderSort('score')">#</th>
<th style="cursor:pointer" onclick="setTraderSort('name')">Name ↕</th>
<th style="cursor:pointer" onclick="setTraderSort('platform')">Plattform ↕</th>
<th style="cursor:pointer" onclick="setTraderSort('score')" class="num-col">Score ↕</th>
<th style="cursor:pointer" onclick="setTraderSort('quality')" class="num-col">Quality ↕</th>
<th style="cursor:pointer" onclick="setTraderSort('copyability')" class="num-col">Copyability ↕</th>
<th style="cursor:pointer" onclick="setTraderSort('winrate')" class="num-col">Win Rate ↕</th>
<th style="cursor:pointer" onclick="setTraderSort('pnl')" class="num-col">PnL ↕</th>
<th>Trades (30d|All) ↕</th>
<th>Strategie</th>
</tr>
</thead>
<tbody id="allTradersBody"></tbody>
</table>
</div>
</div>
</section>
<!-- 3. Watchlist View -->
<section class="page" id="page-watchlist">
<div class="page-title-wrap">
<div>
<h1 class="page-title">Beobachtungsliste</h1>
<div class="page-subtitle">Deine fokussierten Smart-Money Wallets</div>
</div>
</div>
<div class="card">
<div class="table-wrap">
<table class="data-table" id="watchlistTable">
<thead>
<tr>
<th>Trader</th>
<th>Plattform</th>
<th class="num-col">Score</th>
<th class="num-col">Win Rate</th>
<th class="num-col">PnL</th>
<th>Label</th>
<th>Hinzugefügt</th>
</tr>
</thead>
<tbody id="watchlistBody"></tbody>
</table>
</div>
</div>
</section>
<!-- 4. Markets List View -->
<section class="page" id="page-markets">
<div class="page-title-wrap">
<div>
<h1 class="page-title">Wettmärkte</h1>
<div class="page-subtitle">On-chain Indizes und Volumenaktivitäten</div>
</div>
<div style="display:flex; align-items:center; gap:10px;">
<select id="marketsCategory" class="platform-select" onchange="loadMarkets()">
<option value="All">Alle Kategorien</option>
<option value="Politics">Politik</option>
<option value="Crypto">Krypto</option>
<option value="Sports">Sport</option>
<option value="PopCulture">Popkultur</option>
<option value="Other">Andere</option>
</select>
<div class="search-box" style="width:240px;">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input type="text" id="marketsSearchInput" placeholder="Suchen..." autocomplete="off" onkeypress="if(event.key==='Enter') loadMarkets()">
</div>
</div>
</div>
<div class="card">
<div class="table-wrap">
<table class="data-table">
<thead>
<tr>
<th>Plattform</th>
<th>Wettfrage</th>
<th class="num-col">Volumen</th>
<th class="num-col">Liquidität</th>
<th>Enddatum</th>
<th>Status</th>
</tr>
</thead>
<tbody id="allMarketsBody"></tbody>
</table>
</div>
</div>
</section>
<!-- 5. Alerts View -->
<section class="page" id="page-alerts">
<div class="page-title-wrap">
<div>
<h1 class="page-title">Sicherheitsmeldungen &amp; Alerts</h1>
<div class="page-subtitle">Auffällige Walletbewegungen und Großorders</div>
</div>
</div>
<div class="card" id="alertsList"></div>
</section>
<!-- 6. Background Jobs View (Control-Mode Guarded) -->
<section class="page" id="page-jobs">
<div class="page-title-wrap">
<div>
<h1 class="page-title">System-Hintergrundprozesse</h1>
<div class="page-subtitle">Statusberichte der Daten-Ingestions-Worker</div>
</div>
<div>
<button class="btn-premium" onclick="queueBacklogAnalysis()">
Backlog analysieren (50)
</button>
</div>
</div>
<div class="card">
<div class="table-wrap">
<table class="data-table">
<thead>
<tr>
<th>Job ID</th>
<th>Typ</th>
<th>Status</th>
<th>Trader</th>
<th>Erstellt am</th>
<th>Gestartet</th>
<th>Abgeschlossen</th>
<th>Meldung</th>
</tr>
</thead>
<tbody id="jobsBody">
<tr><td colspan="8" style="text-align:center;">Lade Jobs...</td></tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 7. Search Results View -->
<section class="page" id="page-search">
<div class="page-title-wrap">
<div>
<h1 class="page-title" id="search-title">Suchergebnisse</h1>
</div>
</div>
<div id="searchResults">
<div class="card" style="margin-bottom:20px;">
<div class="card-header"><h2>Gefundene Trader</h2></div>
<div class="table-wrap">
<table class="data-table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Plattform</th>
<th class="num-col">Score</th>
<th>Kategorie</th>
</tr>
</thead>
<tbody id="searchTradersBody"></tbody>
</table>
</div>
</div>
<div class="card">
<div class="card-header"><h2>Gefundene Märkte</h2></div>
<div class="table-wrap">
<table class="data-table">
<thead>
<tr>
<th>Plattform</th>
<th>Wettfrage</th>
<th class="num-col">Volumen</th>
<th>Status</th>
</tr>
</thead>
<tbody id="searchMarketsBody"></tbody>
</table>
</div>
</div>
</div>
</section>
<!-- 8. Trader Detail View -->
<section class="page" id="page-trader-detail">
<div class="detail-actions-bar">
<div class="detail-actions-bar-left">
<button class="btn-sm" onclick="navigateBack()">← Zurück</button>
<div class="actions-divider"></div>
<h1 class="page-title" id="td-name" style="margin-bottom:0;">Trader Profil</h1>
</div>
<div class="detail-actions-bar-right">
<button class="btn-sm" id="btn-toggle-watchlist">☆ Watchlist</button>
<button class="btn-sm" id="btn-open-platform" style="display:none;">🌐 Plattform öffnen</button>
<!-- Control-Mode Guarded Buttons -->
<span id="control-trader-actions" style="display:inline-flex; gap:10px;">
<button class="btn-sm btn-premium" id="btn-sync-trader">⟱ Sync</button>
<button class="btn-sm" id="btn-deep-resync-trader" style="border-color:var(--danger); color:var(--danger);">Deep Resync</button>
<button class="btn-sm" id="btn-analyze-trader">⚙ Berechnen</button>
</span>
</div>
</div>
<div class="detail-grid">
<!-- Left Sidebar -->
<div class="detail-sidebar">
<div class="profile-header">
<div class="profile-avatar" id="td-avatar" style="background:var(--primary)">P</div>
<div class="profile-name" id="td-displayName"></div>
<div class="profile-sub" id="td-platformId"></div>
</div>
<div class="stat-group">
<div class="stat-label">Plattform</div>
<div class="stat-value" id="td-platform"></div>
</div>
<div class="stat-group">
<div class="stat-label">Einstufung (Tier)</div>
<div class="stat-value" id="td-tier"></div>
</div>
<div class="stat-group">
<div class="stat-label">Handelsstil</div>
<div class="stat-value" id="td-strategy"></div>
</div>
<div class="stat-group" id="td-traits-container" style="display:none;">
<div class="stat-label">Identifizierte Verhaltensmerkmale</div>
<div id="td-traits" style="display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;"></div>
</div>
</div>
<!-- Right Main Area -->
<div class="detail-main">
<div class="tabs-nav">
<button class="btn-tab active" data-tab="td-tab-analytics" onclick="switchTraderTab('td-tab-analytics')">Analyse &amp; KI</button>
<button class="btn-tab" data-tab="td-tab-recent" onclick="switchTraderTab('td-tab-recent')">Handelshistorie</button>
<button class="btn-tab" data-tab="td-tab-positions" onclick="switchTraderTab('td-tab-positions')">Offene Positionen</button>
</div>
<!-- Content: Analytics -->
<div class="tab-content" id="td-tab-analytics" style="display:block;">
<div class="metrics-grid" style="grid-template-columns: repeat(3, 1fr);">
<div class="metric-card"><div class="metric-label">Win Rate (All-Time)</div><div class="metric-value" id="td-winrate"></div></div>
<div class="metric-card"><div class="metric-label">Win Rate (30d)</div><div class="metric-value" id="td-winrate30d"></div></div>
<div class="metric-card"><div class="metric-label">Gesamt-P&amp;L</div><div class="metric-value" id="td-pnl"></div></div>
<div class="metric-card"><div class="metric-label">P&amp;L (30d)</div><div class="metric-value" id="td-pnl30d"></div></div>
<div class="metric-card"><div class="metric-label">Handelsanzahl</div><div class="metric-value" id="td-trades"></div></div>
<div class="metric-card"><div class="metric-label">Est. Bankroll</div><div class="metric-value" id="td-bankroll"></div></div>
<div class="metric-card"><div class="metric-label">Quality Edge</div><div class="metric-value" id="td-quality-score"></div></div>
<div class="metric-card"><div class="metric-label">Copyability</div><div class="metric-value" id="td-copyability-score"></div></div>
<div class="metric-card"><div class="metric-label">Med. Win/Loss</div><div class="metric-value" id="td-median-win-loss" style="font-size:15px; font-weight:700;"></div></div>
<div class="metric-card"><div class="metric-label">Profit Faktor</div><div class="metric-value" id="td-profit-factor"></div></div>
<div class="metric-card"><div class="metric-label">Erwartungswert / Trade</div><div class="metric-value" id="td-expectancy"></div></div>
<div class="metric-card accent">
<div class="metric-label" style="color:rgba(255,255,255,0.7);">Kombinierter Score</div>
<div class="metric-value" id="td-score"></div>
</div>
</div>
<!-- AI Summary Card (Control-Mode Guarded Button) -->
<div class="card">
<div class="card-header">
<h2>Künstliche Intelligenz Analyse</h2>
<button class="btn-sm" id="btn-ai-analysis" style="background:var(--primary); color:white; border:none;">Deep AI-Audit</button>
</div>
<div id="td-ai-summary" style="margin: 16px; font-size:13px; line-height:1.6; white-space:pre-wrap; background:rgba(255,255,255,0.02); padding:16px; border-radius:12px; border:1px solid var(--border);">
Führe ein KI-Audit aus, um detaillierte Strategieprofile dieses Händlers zu generieren.
</div>
</div>
<!-- Category Performance -->
<div class="card">
<div class="card-header"><h2>Erfolge nach Kategorien</h2></div>
<div class="table-wrap">
<table class="data-table">
<thead>
<tr>
<th>Hauptkategorie</th>
<th>Unterkategorie</th>
<th class="num-col">Win Rate</th>
<th class="num-col">PnL</th>
<th class="num-col">Volumen</th>
<th class="num-col">Avg. Return</th>
<th>Trades</th>
</tr>
</thead>
<tbody id="td-categoryBody"></tbody>
</table>
</div>
</div>
</div>
<!-- Content: Recent Trades -->
<div class="tab-content" id="td-tab-recent" style="display:none;">
<div class="card">
<div class="card-header"><h2>Handelshistorie</h2></div>
<div class="table-wrap">
<table class="data-table">
<thead>
<tr>
<th>Zeit</th>
<th>Wettmarkt</th>
<th>Seite</th>
<th class="num-col">Ausführungspreis</th>
<th class="num-col">Menge</th>
<th class="num-col">Gesamtwert</th>
</tr>
</thead>
<tbody id="td-tradesBody"></tbody>
</table>
</div>
</div>
</div>
<!-- Content: Positions -->
<div class="tab-content" id="td-tab-positions" style="display:none;">
<div class="card">
<div class="card-header"><h2>Aktive Positionen</h2></div>
<div class="table-wrap">
<table class="data-table">
<thead>
<tr>
<th>Markt / Wette</th>
<th class="num-col">Anteile</th>
<th class="num-col">Kaufpreis Ø</th>
<th class="num-col">Marktpreis</th>
<th class="num-col">Realisierte P&amp;L</th>
<th class="num-col">Unrealisierte P&amp;L</th>
</tr>
</thead>
<tbody id="td-positionsBody">
<tr><td colspan="6" style="text-align:center;">Lade Positionen...</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 9. Market Detail View -->
<section class="page" id="page-market-detail">
<div class="detail-actions-bar">
<div class="detail-actions-bar-left">
<button class="btn-sm" onclick="navigateBack()">← Zurück</button>
<div class="actions-divider"></div>
<h1 class="page-title" id="md-question" style="margin-bottom:0;">Wettfrage</h1>
</div>
</div>
<div class="detail-grid">
<!-- Sidebar Stats -->
<div class="detail-sidebar">
<div id="md-image" class="market-img-container"></div>
<div class="stat-group">
<div class="stat-label">Plattform</div>
<div class="stat-value" id="md-platform"></div>
</div>
<div class="stat-group">
<div class="stat-label">Kategorie</div>
<div class="stat-value" id="md-category"></div>
</div>
<div class="stat-group">
<div class="stat-label">Ablaufdatum</div>
<div class="stat-value" id="md-ends"></div>
</div>
</div>
<!-- Main stats and elements -->
<div class="detail-main">
<div class="metrics-grid" style="grid-template-columns: repeat(3, 1fr);">
<div class="metric-card"><div class="metric-label">Volumen</div><div class="metric-value" id="md-volume"></div></div>
<div class="metric-card"><div class="metric-label">Liquidität</div><div class="metric-value" id="md-liquidity"></div></div>
<div class="metric-card"><div class="metric-label">Status</div><div class="metric-value" id="md-status"></div></div>
<div class="metric-card accent"><div class="metric-label">Bot-Aktivität Score</div><div class="metric-value" id="md-bot-activity"></div></div>
<div class="metric-card"><div class="metric-label">Eindeutige Trader</div><div class="metric-value" id="md-unique-traders"></div></div>
<div class="metric-card"><div class="metric-label">Durchschnittsgröße</div><div class="metric-value" id="md-avg-trade-size"></div></div>
</div>
<!-- Outcomes -->
<div class="card">
<div class="card-header"><h2>Wahrscheinlichkeiten &amp; Kurse</h2></div>
<div class="outcomes-list" id="md-outcomes"></div>
</div>
<!-- Market Trades -->
<div class="card">
<div class="card-header"><h2>Letzte Trades in diesem Markt</h2></div>
<div class="table-wrap">
<table class="data-table">
<thead>
<tr>
<th>Zeit</th>
<th>Händler</th>
<th>Seite</th>
<th class="num-col">Preis</th>
<th class="num-col">Menge</th>
<th class="num-col">Gesamtwert</th>
</tr>
</thead>
<tbody id="md-tradesBody"></tbody>
</table>
</div>
</div>
</div>
</div>
</section>
</div>
</main>
</div>
<script src="js/app.js?v=20260715"></script>
</body>
</html>