Axel HocksandClaude Opus 5
43b7756df3
User-Vorgabe: die drei sind Rueckschau, das Dashboard soll das
Handlungsrelevante zeigen. Reiner Umzug im Markup - keine Logik beruehrt.
Die Karten werden weiterhin von render() aus dem Snapshot gefuettert und
haengen NICHT an loadStats(); ein ausgeblendeter View ist nur display:none,
die Elemente bleiben im DOM.
Noetig war eine CSS-Regel: #view-stats > .card{margin:11px 10px}. Das
Dashboard ist ein <main>-GRID mit eigenem Padding, #view-stats eine schlichte
<section> - ohne die Regel klebten die Karten randlos aneinander und
.card.wide{grid-column:1/-1} liefe ins Leere.
Verifiziert am ausgelieferten HTML (alle drei nach id="view-stats",
card-stats-live bleibt im Dashboard), keine doppelten IDs, Tag-Balance
geprueft. v=138.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
287 lines
13 KiB
HTML
287 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
<meta name="theme-color" content="#0d1117">
|
||
<title>Oil · MT5</title>
|
||
<link rel="manifest" href="manifest.json">
|
||
<link rel="stylesheet" href="style.css?v=138">
|
||
</head>
|
||
<body>
|
||
<!-- Modul-Menü (ganz oben) -->
|
||
<nav id="tabs">
|
||
<button class="tab active" data-view="dash">Dashboard</button>
|
||
<button class="tab" data-view="logs">Logs</button>
|
||
<button class="tab" data-view="stats">Statistik</button>
|
||
<button class="tab" data-view="charts">Charts</button>
|
||
<button class="tab" data-view="news">News</button>
|
||
<button class="tab mute-tab" id="mute-btn" title="Töne an/aus">🔊</button>
|
||
</nav>
|
||
|
||
<header id="top">
|
||
<div class="sym-row">
|
||
<span id="symbol">—</span>
|
||
<div class="hdr-right">
|
||
<div class="hdr-meta">
|
||
<span id="hdr-clock" class="hdr-clock">—</span>
|
||
<span id="session" class="session-line dim">—</span>
|
||
</div>
|
||
<span id="conn" class="dot off" title="Verbindung"></span>
|
||
</div>
|
||
</div>
|
||
<div class="price-row">
|
||
<div class="px"><label>BALANCE</label><span id="balance">—</span></div>
|
||
<div class="px"><label>TAG P/L</label><span id="day-pl">—</span></div>
|
||
<div class="px"><label>EQUITY</label><span id="equity">—</span></div>
|
||
<div class="px"><label id="hdr-price-lbl">PEPPERSTONE KURS</label><span id="hdr-price">—</span></div>
|
||
<!-- Hyperliquid-Kurs NEBEN dem Broker-Kurs (User 2026-08-01). HL handelt 24/7,
|
||
Pepperstone nicht — am Wochenende der einzige lebende Kurs. Basis-korrigiert,
|
||
also direkt vergleichbar. Beide Quellen AUSGESCHRIEBEN (User 2026-08-01):
|
||
„KURS"/„HL" ließ offen, welcher Kurs woher kommt. -->
|
||
<div class="px" id="px-hl"><label>HYPERLIQUID KURS</label><span id="hdr-hl">—</span></div>
|
||
<div class="px"><label>G/V</label><span id="hdr-pnl">—</span></div>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="view-dash" class="view">
|
||
<!-- Circuit Breaker (Tagesverlust-Stopp) — roter Banner, nur wenn ausgelöst/nah -->
|
||
<div id="circuit-banner" class="circuit hidden"></div>
|
||
<!-- Aktueller Trade (nur bei offener Position) — Anzeige + SL/TP/Close editierbar -->
|
||
<section class="card wide trade-bar hidden" id="trade-bar">
|
||
<h2 class="tb-title">aktueller Trade läuft <span class="tb-runtime" id="tb-runtime"></span></h2>
|
||
<div class="tb-row">
|
||
<span class="tb-field"><label>Laufzeit</label>
|
||
<b class="tb-val" id="tb-dur">—</b></span>
|
||
<span class="tb-field"><label>Richtung</label>
|
||
<b class="tb-val tb-dir" id="tb-dir">—</b></span>
|
||
<span class="tb-field"><label>Lots</label>
|
||
<b class="tb-val" id="tb-lots">—</b></span>
|
||
<span class="tb-field"><label>Einsatz</label>
|
||
<b class="tb-val" id="tb-margin">—</b></span>
|
||
<span class="tb-field"><label>Auto-Close</label>
|
||
<button id="srclose-btn" class="tb-val tb-btn">—</button></span>
|
||
<span class="tb-field stop"><label>SL</label>
|
||
<input id="tb-sl" type="number" inputmode="decimal" step="0.01" placeholder="—"></span>
|
||
<span class="tb-field gain"><label>TP</label>
|
||
<input id="tb-tp" type="number" inputmode="decimal" step="0.01" placeholder="—"></span>
|
||
<span class="tb-field gain"><label>Gewinn-Close</label>
|
||
<input id="srmin-input" type="number" inputmode="decimal" step="1" placeholder="€"></span>
|
||
<span class="tb-field stop"><label>Notfall-Close</label>
|
||
<input id="emg-input" type="number" inputmode="decimal" step="1" placeholder="€"></span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Gesamtempfehlung (aus allen Modulen aggregiert) -->
|
||
<section class="card wide" id="card-verdict">
|
||
<h2>Gesamtempfehlung</h2>
|
||
<div class="vd-head">
|
||
<div class="vd-ring" id="vd-ring"><span id="vd-conf">—</span></div>
|
||
<div class="vd-main">
|
||
<div class="vd-signal" id="vd-signal">◌ —</div>
|
||
<div class="vd-consensus" id="vd-consensus">—</div>
|
||
</div>
|
||
</div>
|
||
<div class="vd-meter">
|
||
<span class="vd-end short">SHORT</span>
|
||
<div class="vd-track"><div class="vd-needle" id="vd-needle"></div></div>
|
||
<span class="vd-end long">LONG</span>
|
||
</div>
|
||
<div class="vd-modules" id="vd-modules"></div>
|
||
<!-- Zeitebenen-Ampel (M1/M5/M15/M30/H1), aus der Welle hierher verschoben -->
|
||
<div class="tf-turns" id="wave-turns"></div>
|
||
</section>
|
||
|
||
<!-- Meldungen (ex-Position + Wellen-Meldungen; Welle-Karte entfällt) -->
|
||
<section class="card wide" id="card-pos">
|
||
<h2>Meldungen</h2>
|
||
<div class="squeeze-ind" id="wave-squeeze"></div>
|
||
<div class="bounce-ind" id="wave-bounce"></div>
|
||
<div class="cur-near" id="cur-near"></div>
|
||
<div class="pos-srhint hidden" id="pos-srhint"></div>
|
||
<div class="pos-stophint hidden" id="pos-stophint"></div>
|
||
<div class="news-conflict hidden" id="news-conflict"></div>
|
||
<div class="news-conflict hidden" id="cal-note"></div>
|
||
<div class="reasons" id="wave-reasons"></div>
|
||
<div class="kv"><span>Setup</span><b id="wave-setup">—</b></div>
|
||
<div class="kv"><span>Lauf</span><b id="wave-move">—</b></div>
|
||
</section>
|
||
|
||
<!-- Marktstruktur (M30) — reine Anzeige, kein Signal -->
|
||
<section class="card wide" id="card-structure">
|
||
<h2>Marktstruktur <span class="ms-tf">M30</span></h2>
|
||
<div class="ms-top">
|
||
<span class="ms-trend" id="ms-trend">—</span>
|
||
<div class="ms-swings" id="ms-swings"></div>
|
||
</div>
|
||
<div class="ms-bos" id="ms-bos"></div>
|
||
<div class="ms-chan" id="ms-chan">
|
||
<div class="ms-chan-head"><span id="ms-chan-dir">—</span>
|
||
<span class="ms-chan-note" id="ms-chan-note"></span></div>
|
||
<div class="ms-chan-track"><div class="ms-chan-fill" id="ms-chan-fill"></div>
|
||
<div class="ms-chan-dot" id="ms-chan-dot"></div></div>
|
||
<div class="ms-chan-scale"><span>Kanal unten</span><span>oben</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Chartmuster (visuell) — reine Anzeige, kein Signal (noch nicht backtestet) -->
|
||
<section class="card wide" id="card-patterns">
|
||
<h2>Chartmuster <span class="pt-tf">M30 · visuell</span></h2>
|
||
<div class="pt-list" id="pt-list"><span class="dim">—</span></div>
|
||
</section>
|
||
|
||
<!-- Kerzen-Anatomie (M5) — reine Anzeige; die Lehrbuch-Deutung ist gemessen
|
||
invertiert, deshalb steht die GEMESSENE Lesart im Hinweistext -->
|
||
<section class="card wide" id="card-candles">
|
||
<h2>Kerzen-Anatomie <span class="ca-tf">M5 · nur Anzeige</span></h2>
|
||
<div class="ca-list" id="ca-list"><span class="dim">—</span></div>
|
||
</section>
|
||
|
||
<!-- Wahrscheinlichkeits-Kegel — Streuung, NICHT Richtung. Out-of-sample
|
||
kalibriert (analyze_cone.py); die UI nennt die REAL gemessene Abdeckung -->
|
||
<section class="card wide" id="card-cone">
|
||
<h2>Erwartete Spanne <span class="ca-tf">kalibriert · keine Richtung</span></h2>
|
||
<div class="cone-list" id="cone-list"><span class="dim">—</span></div>
|
||
</section>
|
||
|
||
<!-- KI-Agent -->
|
||
<section class="card wide" id="card-agent">
|
||
<h2>KI-Copilot</h2>
|
||
<div class="signal" id="agent-bias">◌ —</div>
|
||
<div class="agent-head" id="agent-head"></div>
|
||
<div class="agent-text" id="agent-reason"></div>
|
||
<ul class="risks" id="agent-risks"></ul>
|
||
</section>
|
||
|
||
<!-- Trailing (Dashboard-Kachel ausgeblendet 2026-07-22, User-Vorgabe; Backend/
|
||
Logik unverändert aktiv, nur die Anzeige raus) -->
|
||
<section class="card wide hidden" id="card-trail">
|
||
<h2>Trailing</h2>
|
||
<div class="kv"><span>Status</span><b id="trail-state">—</b></div>
|
||
<div class="kv"><span>Phase</span><b id="trail-phase">—</b></div>
|
||
<div class="kv"><span>SL</span><b id="trail-sl">—</b></div>
|
||
<div class="kv"><span>TP</span><b id="trail-tp">—</b></div>
|
||
<div class="kv"><span>ATR · TF</span><b id="trail-atr">—</b></div>
|
||
</section>
|
||
|
||
<!-- Live-Statistik — ganz unten -->
|
||
<section class="card wide" id="card-stats-live">
|
||
<h2>Statistik (live)</h2>
|
||
<div class="stx-row" id="stx-row"><span class="dim">lade …</span></div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Logs -->
|
||
<section id="view-logs" class="view hidden">
|
||
<div class="view-head">
|
||
<h2>Logs</h2>
|
||
<button class="reload" id="logs-reload">↻</button>
|
||
</div>
|
||
<pre id="logs-body" class="logbox">lade …</pre>
|
||
</section>
|
||
|
||
<!-- Statistik -->
|
||
<section id="view-stats" class="view hidden">
|
||
<div class="view-head">
|
||
<h2>Statistik</h2>
|
||
<button class="reload" id="stats-reload">↻</button>
|
||
</div>
|
||
<div id="sqm-box"><div class="dim" style="padding:8px">lade Monitor …</div></div>
|
||
<div id="stats-body"></div>
|
||
<h2 class="sub-h">Setups (gesamt)</h2>
|
||
<div id="stats-setups"></div>
|
||
|
||
<!-- ⚠ Aus dem Dashboard hierher verschoben (User-Vorgabe 2026-08-05): das
|
||
Dashboard soll die HANDLUNGSrelevanten Module zeigen, die Rückschau
|
||
gehört in die Statistik. Die drei Karten werden weiterhin von `render()`
|
||
aus dem Snapshot gefüttert — sie hängen NICHT an `loadStats()`. Das
|
||
funktioniert, weil ein ausgeblendeter View nur `display:none` ist und
|
||
die Elemente im DOM bleiben; sonst würden die IDs beim Rendern fehlen. -->
|
||
|
||
<!-- Manuelle Trades — deskriptiv (2026-08-04). Zeigt die EIGENE Historie,
|
||
rechnet nichts hoch. Der volle Entscheidungskontext (ctx_*) wird erst
|
||
seit dem 04.08. mitgeschrieben; die Reifegrad-Zeile macht das sichtbar. -->
|
||
<section class="card wide" id="card-manual">
|
||
<h2>Manuelle Trades <span class="mt-sub">deine Historie · 30 Tage</span></h2>
|
||
<div class="mt-grid" id="mt-grid"></div>
|
||
<div class="mt-split" id="mt-split"></div>
|
||
<div class="mt-note dim" id="mt-note"></div>
|
||
</section>
|
||
|
||
<!-- Letzte Trades -->
|
||
<section class="card wide" id="card-trades">
|
||
<h2>Letzte Trades</h2>
|
||
<div class="trades" id="trades"></div>
|
||
</section>
|
||
|
||
<!-- Kurslücken (Gaps) — Fill-Magnete, nur Kontext -->
|
||
<section class="card wide" id="card-gaps">
|
||
<h2>Kurslücken (Gaps 2026)</h2>
|
||
<div class="gaps-list" id="gaps-list"><span class="dim">lade …</span></div>
|
||
</section>
|
||
</section>
|
||
|
||
<!-- Charts: M1/M5/M15/M30/H1 untereinander mit Trend (Lightweight Charts) -->
|
||
<section id="view-charts" class="view hidden">
|
||
<div class="view-head">
|
||
<h2>Charts</h2>
|
||
<button class="reload" id="charts-reload">↻</button>
|
||
</div>
|
||
<div id="charts-body"></div>
|
||
</section>
|
||
|
||
<!-- News -->
|
||
<section id="view-news" class="view hidden">
|
||
<div class="view-head">
|
||
<h2>News</h2>
|
||
<button class="reload" id="news-reload">↻</button>
|
||
</div>
|
||
<div id="news-sentiment" class="news-sent"></div>
|
||
<div id="news-body"></div>
|
||
</section>
|
||
|
||
<!-- Aktionsleiste (Trade-Steuerung) -->
|
||
<nav id="actions">
|
||
<!-- Einsatz-Margin manuell vorgeben (User 2026-08-04). Leer/0 = automatisch
|
||
(margin_buffer_pct % der freien Margin). ⚠ BEWUSST hier und nicht in der
|
||
Trade-Leiste: die ist nur bei OFFENER Position sichtbar, der Einsatz muss
|
||
aber VOR dem Öffnen einstellbar sein. Wirkt auf ALLE neuen Positionen. -->
|
||
<span class="mg-field" title="Feste Einsatz-Margin in € — leer/0 = automatisch (dann gilt der Prozentsatz rechts). Gilt auch für autonome Trades.">
|
||
<label for="margin-input">Einsatz €</label>
|
||
<input id="margin-input" type="number" inputmode="decimal" step="10" min="0" placeholder="auto">
|
||
</span>
|
||
<!-- Prozent-Gegenstück (User 2026-08-05). Steuert `margin_buffer_pct`, das
|
||
bisher nur in der ini stand. ⚠ Der feste €-Betrag hat VORRANG — steht er,
|
||
wird dieses Feld ausgegraut, damit nicht unklar bleibt, was gilt. -->
|
||
<span class="mg-field" id="marginpct-wrap" title="Einsatz als Prozent der freien Margin (1–99). Greift, solange links kein fester Betrag steht.">
|
||
<label for="marginpct-input">Einsatz %</label>
|
||
<input id="marginpct-input" type="number" inputmode="decimal" step="5" min="1" max="99" placeholder="95">
|
||
</span>
|
||
<button class="btn long" data-side="long">▲ LONG</button>
|
||
<button class="btn short" data-side="short">▼ SHORT</button>
|
||
<button class="btn close" data-side="close">✕ CLOSE</button>
|
||
<button class="btn tog" id="btn-squeeze" title="Autonomer Entry auf Squeeze-Ausbruch">🚀 BRK</button>
|
||
<button class="btn tog" id="btn-autosig" title="Autonomer Entry auf die Empfehlung — GEMESSEN NICHT tragfähig (H1 negativ), auf eigenen Wunsch aktiv">🎯 SIG</button>
|
||
<button class="btn tog" id="btn-trail">🎯 TRAIL</button>
|
||
</nav>
|
||
|
||
<!-- Modal (Bestätigung / Token-Eingabe) -->
|
||
<div id="modal" class="modal hidden">
|
||
<div class="box">
|
||
<div class="box-title" id="modal-title"></div>
|
||
<div class="box-msg" id="modal-msg"></div>
|
||
<input id="modal-input" class="hidden" type="password"
|
||
placeholder="App-Token" autocomplete="off" autocapitalize="off">
|
||
<div class="box-btns">
|
||
<button id="modal-cancel" class="mbtn cancel">Abbrechen</button>
|
||
<button id="modal-ok" class="mbtn ok">Bestätigen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="toast" class="toast hidden"></div>
|
||
|
||
<script src="lightweight-charts.standalone.production.js?v=114"></script>
|
||
<script src="app.js?v=138"></script>
|
||
</body>
|
||
</html>
|