Spaces:
Running
Running
ch möchte eine App erstellen die in erster Linie als trading Bot dient. Sie soll Handels Signale die durch pine script Strategien oder Indikatoren auf Tradingview generiert werden, per webhook an meine Exchange wie Bitget, Pionex oder Bybit weiterleiten. Die anbindung zur Exchange läuft über die Exchange Api.
c54a803 verified | <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TradeFlow Bot - Dashboard</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230ea5e9'%3E%3Cpath d='M3 3h18v18H3V3zm4 4v10h10V7H7z'/%3E%3C/svg%3E"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="bg-slate-950 text-slate-100 overflow-hidden"> | |
| <div id="app" class="flex h-screen"> | |
| <!-- Sidebar Component --> | |
| <tf-sidebar></tf-sidebar> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Navbar Component --> | |
| <tf-navbar page="Dashboard"></tf-navbar> | |
| <!-- Page Content --> | |
| <main class="flex-1 overflow-y-auto p-6 space-y-6 gradient-bg"> | |
| <!-- Header Stats --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <tf-stats-card | |
| title="Active Bots" | |
| value="12" | |
| icon="zap" | |
| color="sky" | |
| change="+2" | |
| change-type="positive"> | |
| </tf-stats-card> | |
| <tf-stats-card | |
| title="Total PnL" | |
| value="$2,847.32" | |
| icon="trending-up" | |
| color="green" | |
| change="+12.5%" | |
| change-type="positive"> | |
| </tf-stats-card> | |
| <tf-stats-card | |
| title="Success Rate" | |
| value="87.3%" | |
| icon="target" | |
| color="violet" | |
| change="+3.2%" | |
| change-type="positive"> | |
| </tf-stats-card> | |
| <tf-stats-card | |
| title="Total Trades" | |
| value="1,247" | |
| icon="activity" | |
| color="orange" | |
| change="+18" | |
| change-type="neutral"> | |
| </tf-stats-card> | |
| </div> | |
| <!-- Main Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Active Signals --> | |
| <div class="lg:col-span-2 glass-card p-6 rounded-2xl border"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-bold flex items-center gap-3"> | |
| <i data-feather="radio" class="text-sky-400"></i> | |
| Live Signal Feed | |
| </h2> | |
| <span class="live-indicator flex items-center gap-2"> | |
| <span class="pulse-dot"></span> | |
| LIVE | |
| </span> | |
| </div> | |
| <div id="signal-feed" class="space-y-4 max-h-96 overflow-y-auto"> | |
| <!-- Signals populated by JS --> | |
| </div> | |
| </div> | |
| <!-- Exchange Status --> | |
| <div class="glass-card p-6 rounded-2xl border"> | |
| <h2 class="text-xl font-bold flex items-center gap-3 mb-6"> | |
| <i data-feather="server" class="text-violet-400"></i> | |
| Exchange Status | |
| </h2> | |
| <div class="space-y-4"> | |
| <tf-exchange-status | |
| name="Bitget" | |
| status="connected" | |
| pairs="BTC/USDT, ETH/USDT"> | |
| </tf-exchange-status> | |
| <tf-exchange-status | |
| name="Pionex" | |
| status="connected" | |
| pairs="SOL/USDT, AVAX/USDT"> | |
| </tf-exchange-status> | |
| <tf-exchange-status | |
| name="Bybit" | |
| status="disconnected" | |
| pairs="None"> | |
| </tf-exchange-status> | |
| </div> | |
| <button class="w-full mt-6 sky-button px-4 py-3 rounded-lg font-medium flex items-center justify-center gap-2 group"> | |
| <i data-feather="plus" class="w-4 h-4 group-hover:rotate-90 transition-transform"></i> | |
| Add Exchange | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Recent Trades Table --> | |
| <div class="glass-card p-6 rounded-2xl border"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-bold flex items-center gap-3"> | |
| <i data-feather="list" class="text-emerald-400"></i> | |
| Recent Executions | |
| </h2> | |
| <button class="text-slate-400 hover:text-slate-100 transition-colors flex items-center gap-1"> | |
| View All | |
| <i data-feather="arrow-right" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full text-left"> | |
| <thead> | |
| <tr class="text-slate-400 border-b border-slate-700"> | |
| <th class="pb-3 font-medium">Time</th> | |
| <th class="pb-3 font-medium">Pair</th> | |
| <th class="pb-3 font-medium">Action</th> | |
| <th class="pb-3 font-medium">Exchange</th> | |
| <th class="pb-3 font-medium">Status</th> | |
| <th class="pb-3 font-medium">PnL</th> | |
| </tr> | |
| </thead> | |
| <tbody id="trades-table" class="divide-y divide-slate-800"> | |
| <!-- Populated by JS --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <!-- Component Scripts --> | |
| <script src="components/sidebar.js"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/stats-card.js"></script> | |
| <script src="components/status-badge.js"></script> | |
| <script src="components/exchange-status.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |