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.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Tradeflow Bot
-emoji: ⚡
-colorFrom: red
-colorTo: yellow
+title: TradeFlow Bot 🚀
+colorFrom: yellow
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/navbar.js

@@ -0,0 +1,117 @@
+// TradeFlow Navbar Component
+class TFNavbar extends HTMLElement {
+    constructor() {
+        super();
+        this.pageTitle = this.getAttribute('page') || 'Dashboard';
+    }
+
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+        this.setupEventListeners();
+    }
+
+    setupEventListeners() {
+        // Mobile menu toggle
+        const menuBtn = this.shadowRoot.getElementById('menu-btn');
+        const sidebar = document.getElementById('app').querySelector('tf-sidebar');
+        
+        menuBtn?.addEventListener('click', () => {
+            const sidebarEl = sidebar.shadowRoot.getElementById('sidebar');
+            const overlay = sidebar.shadowRoot.getElementById('overlay');
+            sidebarEl.classList.toggle('active');
+            overlay.classList.toggle('active');
+        });
+
+        // User menu
+        const userBtn = this.shadowRoot.getElementById('user-btn');
+        userBtn?.addEventListener('click', () => {
+            console.log('User menu clicked');
+        });
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                }
+
+                .navbar {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: 1rem 1.5rem;
+                    background: rgba(15, 23, 42, 0.8); /* slate-900 with opacity */
+                    backdrop-filter: blur(10px);
+                    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
+                }
+
+                .left-section {
+                    display: flex;
+                    align-items: center;
+                    gap: 1rem;
+                }
+
+                .page-title {
+                    font-size: 1.5rem;
+                    font-weight: 700;
+                    background: linear-gradient(135deg, #f1f5f9, #cbd5e1);
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                    background-clip: text;
+                }
+
+                .menu-btn {
+                    display: none;
+                    padding: 0.5rem;
+                    background: rgba(30, 41, 59, 0.6);
+                    border: 1px solid rgba(148, 163, 184, 0.2);
+                    border-radius: 0.5rem;
+                    color: #94a3b8;
+                    cursor: pointer;
+                    transition: all 0.3s ease;
+                }
+
+                .menu-btn:hover {
+                    background: rgba(30, 41, 59, 0.8);
+                    color: #f1f5f9;
+                }
+
+                .right-section {
+                    display: flex;
+                    align-items: center;
+                    gap: 1rem;
+                }
+
+                .status-indicator {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    padding: 0.5rem 1rem;
+                    background: rgba(16, 185, 129, 0.15);
+                    border: 1px solid rgba(16, 185, 129, 0.3);
+                    border-radius: 9999px;
+                    font-size: 0.75rem;
+                    font-weight: 600;
+                    color: #10b981;
+                }
+
+                .status-dot {
+                    width: 6px;
+                    height: 6px;
+                    background: #10b981;
+                    border-radius: 50%;
+                    animation: pulse 2s infinite;
+                }
+
+                .user-menu {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    padding: 0.5rem 1rem;
+                    background: rgba(30, 41, 59, 0.6);
+                    border: 1px solid rgba(148, 163, 184, 0.2);
+                    border-radius: 0.75rem;
+                    cursor: pointer

components/sidebar.js

@@ -0,0 +1,180 @@
+// TradeFlow Sidebar Component
+class TFSidebar extends HTMLElement {
+    constructor() {
+        super();
+        this.currentPage = this.getCurrentPage();
+    }
+
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+    }
+
+    getCurrentPage() {
+        const path = window.location.pathname;
+        if (path.includes('exchanges')) return 'exchanges';
+        if (path.includes('strategies')) return 'strategies';
+        if (path.includes('logs')) return 'logs';
+        if (path.includes('settings')) return 'settings';
+        return 'dashboard';
+    }
+
+    render() {
+        const navItems = [
+            { id: 'dashboard', label: 'Dashboard', icon: 'layout', href: 'index.html' },
+            { id: 'exchanges', label: 'Exchanges', icon: 'server', href: 'exchanges.html' },
+            { id: 'strategies', label: 'Strategies', icon: 'code', href: 'strategies.html' },
+            { id: 'logs', label: 'Signal Logs', icon: 'activity', href: 'logs.html' },
+            { id: 'settings', label: 'Settings', icon: 'settings', href: 'settings.html' }
+        ];
+
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    height: 100vh;
+                    position: relative;
+                }
+
+                .sidebar {
+                    width: 280px;
+                    height: 100%;
+                    background: rgba(15, 23, 42, 0.8); /* slate-900 with opacity */
+                    backdrop-filter: blur(10px);
+                    border-right: 1px solid rgba(148, 163, 184, 0.1);
+                    display: flex;
+                    flex-direction: column;
+                    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                }
+
+                .logo-section {
+                    padding: 2rem 1.5rem;
+                    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
+                }
+
+                .logo {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    font-size: 1.25rem;
+                    font-weight: 800;
+                    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                    background-clip: text;
+                }
+
+                .nav-menu {
+                    flex: 1;
+                    padding: 1rem 0;
+                }
+
+                .nav-item {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    padding: 0.875rem 1.5rem;
+                    margin: 0 0.75rem;
+                    border-radius: 0.75rem;
+                    text-decoration: none;
+                    color: #94a3b8; /* slate-400 */
+                    font-weight: 500;
+                    transition: all 0.3s ease;
+                    position: relative;
+                }
+
+                .nav-item:hover {
+                    background: rgba(30, 41, 59, 0.6);
+                    color: #f1f5f9; /* slate-100 */
+                    transform: translateX(4px);
+                }
+
+                .nav-item.active {
+                    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(139, 92, 246, 0.1));
+                    color: #0ea5e9; /* sky-500 */
+                    border-left: 4px solid #0ea5e9;
+                }
+
+                .nav-item.active::before {
+                    content: '';
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    bottom: 0;
+                    width: 4px;
+                    background: linear-gradient(to bottom, #0ea5e9, #8b5cf6);
+                    border-radius: 0 4px 4px 0;
+                }
+
+                .nav-item div {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                }
+
+                .version {
+                    margin: 1.5rem;
+                    padding: 0.75rem;
+                    background: rgba(30, 41, 59, 0.4);
+                    border-radius: 0.5rem;
+                    text-align: center;
+                    font-size: 0.75rem;
+                    color: #64748b; /* slate-500 */
+                }
+
+                /* Mobile Overlay */
+                .overlay {
+                    position: fixed;
+                    inset: 0;
+                    background: rgba(2, 6, 23, 0.8);
+                    z-index: 40;
+                    display: none;
+                }
+
+                .overlay.active {
+                    display: block;
+                }
+
+                @media (max-width: 768px) {
+                    .sidebar {
+                        position: fixed;
+                        z-index: 50;
+                        transform: translateX(-100%);
+                    }
+                    
+                    .sidebar.active {
+                        transform: translateX(0);
+                    }
+                }
+            </style>
+
+            <div class="overlay" id="overlay"></div>
+            <aside class="sidebar" id="sidebar">
+                <div class="logo-section">
+                    <div class="logo">
+                        <i data-feather="cpu" width="32" height="32"></i>
+                        TradeFlow Bot
+                    </div>
+                </div>
+                
+                <nav class="nav-menu">
+                    ${navItems.map(item => `
+                        <a href="${item.href}" class="nav-item ${this.currentPage === item.id ? 'active' : ''}" data-page="${item.id}">
+                            <div>
+                                <i data-feather="${item.icon}" width="20" height="20"></i>
+                                ${item.label}
+                            </div>
+                        </a>
+                    `).join('')}
+                </nav>
+
+                <div class="version">
+                    <i data-feather="git-commit" width="12" height="12"></i>
+                    v2.1.0-alpha
+                </div>
+            </aside>
+        `;
+    }
+}
+
+customElements.define('tf-sidebar', TFSidebar);

index.html

@@ -1,19 +1,154 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<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>

script.js

@@ -0,0 +1,228 @@
+// TradeFlow Bot - Main JavaScript
+
+// Mock Data Generators
+const generateMockSignal = (index = 0) => {
+    const actions = ['BUY', 'SELL'];
+    const pairs = ['BTC/USDT', 'ETH/USDT', 'SOL/USDT', 'AVAX/USDT', 'MATIC/USDT'];
+    const strategies = ['TrendMaster v2.1', 'ScalpPro 3.0', 'MoonSignal Alpha', 'GridFlow Pro'];
+    const statuses = ['executed', 'pending', 'failed'];
+    
+    return {
+        id: `sig_${Date.now()}_${index}`,
+        timestamp: new Date(Date.now() - Math.random() * 3600000),
+        pair: pairs[Math.floor(Math.random() * pairs.length)],
+        action: actions[Math.floor(Math.random() * actions.length)],
+        price: (Math.random() * 50000 + 1000).toFixed(2),
+        strategy: strategies[Math.floor(Math.random() * strategies.length)],
+        exchange: ['Bitget', 'Pionex', 'Bybit'][Math.floor(Math.random() * 3)],
+        status: statuses[Math.floor(Math.random() * statuses.length)],
+        pnl: (Math.random() * 200 - 50).toFixed(2)
+    };
+};
+
+const generateMockTrade = (index = 0) => {
+    const signal = generateMockSignal(index);
+    return {
+        ...signal,
+        executionTime: new Date(Date.now() - Math.random() * 86400000),
+        filledPrice: (parseFloat(signal.price) * (1 + (Math.random() - 0.5) * 0.001)).toFixed(2),
+        filledAmount: (Math.random() * 2 + 0.1).toFixed(4)
+    };
+};
+
+// DOM Manipulation Helpers
+const formatTime = (date) => {
+    return new Intl.DateTimeFormat('en-US', {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false
+    }).format(date);
+};
+
+const formatDate = (date) => {
+    return new Intl.DateTimeFormat('en-US', {
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    }).format(date);
+};
+
+const getStatusBadge = (status) => {
+    const classes = {
+        'executed': 'status-connected',
+        'pending': 'status-pending',
+        'failed': 'status-disconnected'
+    };
+    const icons = {
+        'executed': 'check-circle',
+        'pending': 'clock',
+        'failed': 'x-circle'
+    };
+    return `
+        <span class="status-badge ${classes[status]}">
+            <i data-feather="${icons[status]}" class="w-3 h-3"></i>
+            ${status}
+        </span>
+    `;
+};
+
+// Signal Feed Manager
+class SignalFeedManager {
+    constructor(containerId) {
+        this.container = document.getElementById(containerId);
+        this.signals = [];
+        this.maxSignals = 10;
+    }
+
+    addSignal(signal) {
+        this.signals.unshift(signal);
+        if (this.signals.length > this.maxSignals) {
+            this.signals.pop();
+        }
+        this.render();
+    }
+
+    render() {
+        if (!this.container) return;
+        
+        const signalsHTML = this.signals.map(signal => `
+            <div class="signal-item ${signal.action.toLowerCase()} glass-card p-4 rounded-lg border">
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-4">
+                        <div class="flex flex-col">
+                            <span class="text-2xl font-bold ${signal.action === 'BUY' ? 'text-emerald-400' : 'text-red-400'}">
+                                ${signal.action}
+                            </span>
+                            <span class="text-xs text-slate-400">${signal.pair}</span>
+                        </div>
+                        <div class="flex flex-col">
+                            <span class="text-lg font-semibold">$${signal.price}</span>
+                            <span class="text-xs text-slate-400">Price</span>
+                        </div>
+                    </div>
+                    <div class="flex flex-col items-end gap-2">
+                        <span class="text-sm font-medium">${signal.strategy}</span>
+                        <span class="text-xs text-slate-400">${signal.exchange}</span>
+                        <span class="text-xs text-slate-500">${formatTime(signal.timestamp)}</span>
+                    </div>
+                </div>
+                <div class="mt-3 flex items-center justify-between">
+                    ${getStatusBadge(signal.status)}
+                    <span class="text-xs text-slate-500">${signal.pnl ? `Est. PnL: $${signal.pnl}` : ''}</span>
+                </div>
+            </div>
+        `).join('');
+        
+        this.container.innerHTML = signalsHTML;
+        feather.replace();
+    }
+
+    startLiveFeed() {
+        // Initial load
+        for (let i = 0; i < 5; i++) {
+            setTimeout(() => {
+                this.addSignal(generateMockSignal(i));
+            }, i * 200);
+        }
+
+        // Live updates every 3-7 seconds
+        const scheduleNext = () => {
+            const delay = Math.random() * 4000 + 3000;
+            setTimeout(() => {
+                this.addSignal(generateMockSignal());
+                scheduleNext();
+            }, delay);
+        };
+        scheduleNext();
+    }
+}
+
+// Trades Table Manager
+class TradesTableManager {
+    constructor(containerId) {
+        this.container = document.getElementById(containerId);
+        this.trades = [];
+        this.maxTrades = 8;
+    }
+
+    addTrade(trade) {
+        this.trades.unshift(trade);
+        if (this.trades.length > this.maxTrades) {
+            this.trades.pop();
+        }
+        this.render();
+    }
+
+    render() {
+        if (!this.container) return;
+        
+        const tradesHTML = this.trades.map(trade => `
+            <tr class="hover:bg-slate-800/50 transition-colors">
+                <td class="py-4">${formatDate(trade.executionTime)}</td>
+                <td class="py-4 font-mono font-semibold">${trade.pair}</td>
+                <td class="py-4">
+                    <span class="font-bold ${trade.action === 'BUY' ? 'text-emerald-400' : 'text-red-400'}">
+                        ${trade.action}
+                    </span>
+                </td>
+                <td class="py-4">${trade.exchange}</td>
+                <td class="py-4">${getStatusBadge(trade.status)}</td>
+                <td class="py-4 font-semibold ${parseFloat(trade.pnl) > 0 ? 'text-emerald-400' : 'text-red-400'}">
+                    ${parseFloat(trade.pnl) > 0 ? '+' : ''}$${trade.pnl}
+                </td>
+            </tr>
+        `).join('');
+        
+        this.container.innerHTML = tradesHTML;
+        feather.replace();
+    }
+
+    loadInitial() {
+        for (let i = 0; i < this.maxTrades; i++) {
+            this.trades.push(generateMockTrade(i));
+        }
+        this.render();
+    }
+}
+
+// Initialize App
+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize signal feed
+    const signalManager = new SignalFeedManager('signal-feed');
+    signalManager.startLiveFeed();
+
+    // Initialize trades table
+    const tradesManager = new TradesTableManager('trades-table');
+    tradesManager.loadInitial();
+
+    // Auto-update stats
+    const updateStats = () => {
+        const statsCards = document.querySelectorAll('tf-stats-card');
+        statsCards.forEach(card => {
+            if (card.getAttribute('title') === 'Total PnL') {
+                const currentValue = parseFloat(card.getAttribute('value').replace(/[$,]/g, ''));
+                const change = (Math.random() - 0.5) * 100;
+                const newValue = (currentValue + change).toFixed(2);
+                card.setAttribute('value', `$${newValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}`);
+            }
+            if (card.getAttribute('title') === 'Total Trades') {
+                const currentValue = parseInt(card.getAttribute('value'));
+                if (Math.random() > 0.8) {
+                    card.setAttribute('value', (currentValue + 1).toString());
+                }
+            }
+        });
+    };
+
+    // Update stats every 10 seconds
+    setInterval(updateStats, 10000);
+
+    // Page navigation
+    window.navigateTo = (page) => {
+        window.location.href = page;
+    };
+
+    console.log('🚀 TradeFlow Bot initialized successfully');
+});

style.css

@@ -1,28 +1,214 @@
+/* Custom CSS for TradeFlow Bot - Glassmorphism & Animations */
+
+/* Custom Font Import */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+
+/* Root Variables */
+:root {
+    --primary: #0ea5e9;      /* sky-500 */
+    --primary-dark: #0284c7; /* sky-600 */
+    --secondary: #8b5cf6;    /* violet-500 */
+    --success: #10b981;      /* emerald-500 */
+    --danger: #ef4444;       /* red-500 */
+    --warning: #f59e0b;      /* amber-500 */
+}
+
+/* Base Styles */
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+}
+
+/* Glassmorphism Cards */
+.glass-card {
+    background: rgba(30, 41, 59, 0.6); /* slate-800 with opacity */
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(148, 163, 184, 0.1); /* slate-400 with opacity */
+    box-shadow: 0 8px 32px rgba(2, 8, 20, 0.4);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glass-card:hover {
+    border-color: rgba(148, 163, 184, 0.2);
+    box-shadow: 0 12px 40px rgba(2, 132, 199, 0.25); /* sky-600 with opacity */
+    transform: translateY(-2px);
+}
+
+/* Gradient Background */
+.gradient-bg {
+    background: linear-gradient(135deg, rgba(2, 6, 23, 0.9) 0%, rgba(15, 23, 42, 0.9) 100%);
+    background-attachment: fixed;
+}
+
+/* Live Indicator Animation */
+.live-indicator {
+    color: var(--success);
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+}
+
+.pulse-dot {
+    width: 8px;
+    height: 8px;
+    background: var(--success);
+    border-radius: 50%;
+    animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.5; transform: scale(1.2); }
+}
+
+/* Custom Buttons */
+.sky-button {
+    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+    color: white;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.sky-button::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.6s;
+}
+
+.sky-button:hover::before {
+    left: 100%;
+}
+
+.sky-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(14, 165, 233, 0.4);
+}
+
+/* Status Badges */
+.status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+.status-connected {
+    background: rgba(16, 185, 129, 0.15);
+    color: var(--success);
+    border: 1px solid rgba(16, 185, 129, 0.3);
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.status-disconnected {
+    background: rgba(239, 68, 68, 0.15);
+    color: var(--danger);
+    border: 1px solid rgba(239, 68, 68, 0.3);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.status-pending {
+    background: rgba(245, 158, 11, 0.15);
+    color: var(--warning);
+    border: 1px solid rgba(245, 158, 11, 0.3);
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+::-webkit-scrollbar-track {
+    background: rgba(15, 23, 42, 0.5);
 }
+
+::-webkit-scrollbar-thumb {
+    background: var(--primary);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--primary-dark);
+}
+
+/* Trading Signal Animation */
+.signal-item {
+    animation: slideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+    border-left: 4px solid transparent;
+    transition: all 0.3s ease;
+}
+
+.signal-item.buy {
+    border-left-color: var(--success);
+}
+
+.signal-item.sell {
+    border-left-color: var(--danger);
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateX(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/* Exchange Status Card */
+.exchange-status-item {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.exchange-status-item:hover {
+    transform: translateX(5px);
+    box-shadow: -4px 0 20px rgba(14, 165, 233, 0.2);
+}
+
+/* Table Row Hover */
+tbody tr {
+    transition: background-color 0.2s ease;
+}
+
+tbody tr:hover {
+    background: rgba(30, 41, 59, 0.8);
+}
+
+/* Feather Icon Transitions */
+.feather {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Mobile Optimizations */
+@media (max-width: 768px) {
+    .glass-card {
+        backdrop-filter: blur(8px);
+    }
+    
+    .sky-button {
+        padding: 0.75rem 1rem;
+    }
+}
+
+/* Loading Skeleton */
+.skeleton {
+    background: linear-gradient(90deg, rgba(30, 41, 59, 0.4) 25%, rgba(51, 65, 85, 0.6) 50%, rgba(30, 41, 59, 0.4) 75%);
+    background-size: 200% 100%;
+    animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}