From 2bd566ce5e4519bca78c32cc4d4aeaa55f46fd34 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 10 Jun 2026 07:41:12 +0000 Subject: [PATCH] feat: Dashboard mit Tabs (Trading/GridBot) und Preis-Charts mit Trade-Markern - Candlestick-Charts (4h) mit Buy/Sell-Markern und Hover-Tooltips (Trade-Details, OHLC) - Trend-Chart mit Pair-Auswahl (BTC/ETH/SOL/XRP), offene Positionen als Kreis-Marker - Grid-Chart (XRP) mit Grid-Level-Linien (Center + L1-L8) und Lot-Markern - GridBot-Tab mit eigener Equity-Kurve (Daten gab es schon, waren ungenutzt) Co-Authored-By: Claude Fable 5 --- public/index.html | 427 ++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 373 insertions(+), 54 deletions(-) diff --git a/public/index.html b/public/index.html index 2db2521..29875e0 100644 --- a/public/index.html +++ b/public/index.html @@ -12,18 +12,33 @@ } * { box-sizing: border-box; margin: 0; } body { background: var(--bg); color: var(--text); font: 14px/1.5 system-ui, sans-serif; padding: 24px; max-width: 1200px; margin: 0 auto; } - header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; } + header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } h1 { font-size: 20px; font-weight: 600; } h1 small { color: var(--muted); font-weight: 400; font-size: 13px; } #status { margin-left: auto; font-size: 12px; color: var(--muted); } #status .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; } + .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; } + .tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); font: 600 14px system-ui; padding: 8px 16px; cursor: pointer; } + .tab:hover { color: var(--text); } + .tab.active { color: var(--text); border-bottom-color: var(--accent); } .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; } .kpi { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; } .kpi .label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .kpi .value { font-size: 20px; font-weight: 600; font-family: var(--mono); margin-top: 2px; } .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 20px; } .panel h2 { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: var(--muted); } + .panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } + .panel-head h2 { margin-bottom: 0; } + .pair-btns { margin-left: auto; display: flex; gap: 4px; } + .pair-btns button { background: var(--bg); border: 1px solid var(--border); color: var(--muted); font: 600 11px var(--mono); padding: 3px 9px; border-radius: 6px; cursor: pointer; } + .pair-btns button.active { color: var(--text); border-color: var(--accent); } + .legend { font-size: 11px; color: var(--muted); } + .legend .b { color: var(--green); } .legend .s { color: var(--red); } canvas { width: 100%; height: 220px; display: block; } + canvas.price { height: 280px; cursor: crosshair; } + .chart-wrap { position: relative; } + .tooltip { position: absolute; pointer-events: none; background: #1c2128; border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font: 12px/1.6 var(--mono); white-space: nowrap; z-index: 10; display: none; box-shadow: 0 4px 12px rgba(0,0,0,.5); } + .tooltip .t-title { font-weight: 700; margin-bottom: 2px; } table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; } th { text-align: right; color: var(--muted); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--border); } td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; } @@ -38,33 +53,65 @@
-

trade-kuns Donchian-Trendfolge · Paper · BTC ETH SOL XRP

+

trade-kuns Paper · Trend (BTC ETH SOL XRP) + Grid (XRP)

lade…
-
+ -

Equity-Kurve (4h)

+
+
-

Offene Positionen

+
+
+

Preis-Chart (4h) ▲ Buy · ▼ Sell · ○ offen

+
+
+
+ +
+
+
-

Abgeschlossene Trades

+

Equity-Kurve (4h)

-

Letzte Entscheidungen (4h-Bars)

+

Offene Positionen

-
-

GridBot XRP No-Stop · 3×ATR · 8 Levels · Paper

-
-
-

Offene Lots

-

Grid-Trades

-
+

Abgeschlossene Trades

+ +

Letzte Entscheidungen (4h-Bars)

+
+ +