diff --git a/src/__pycache__/web_dashboard.cpython-310.pyc b/src/__pycache__/web_dashboard.cpython-310.pyc index c887460..4689ae8 100644 Binary files a/src/__pycache__/web_dashboard.cpython-310.pyc and b/src/__pycache__/web_dashboard.cpython-310.pyc differ diff --git a/src/web_dashboard.py b/src/web_dashboard.py index 18d6043..4216db0 100644 --- a/src/web_dashboard.py +++ b/src/web_dashboard.py @@ -210,207 +210,196 @@ html_content = """ Trading Bot Dashboard + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body { + background-color: #0a0a0a; + color: #e0e0e0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif; + line-height: 1.8; + letter-spacing: 0.3px; + } + + .header { + background-color: #121212; + border-bottom: 1px solid #1f1f1f; + padding: 40px 60px; + } + + .header h1 { + color: #ffffff; + font-size: 32px; + font-weight: 700; + letter-spacing: -0.5px; + } + + .container { + max-width: 1800px; + margin: 0 auto; + padding: 60px 60px; + } + + .grid-auto { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 24px; + margin-bottom: 60px; + } + + .card { + background-color: #1a1a1a; + border: 1px solid #2a2a2a; + border-radius: 16px; + padding: 28px; + backdrop-filter: blur(10px); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); + } + + .card:hover { + background-color: #1f1f1f; + border-color: #3a3a3a; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20); + } + + .card-label { + color: #888888; + font-size: 12px; + text-transform: uppercase; + letter-spacing: 1.2px; + margin-bottom: 12px; + font-weight: 600; + } + + .card-value { + color: #ffffff; + font-size: 36px; + font-weight: 700; + line-height: 1.2; + margin-bottom: 8px; + } + + .card-subtitle { + color: #666666; + font-size: 13px; + font-weight: 500; + } + + .card-positive { + color: #2ecc71; + } + + .card-negative { + color: #e74c3c; + } + + .section-title { + color: #ffffff; + font-size: 24px; + font-weight: 700; + margin: 60px 0 32px 0; + letter-spacing: -0.3px; + } + + .content-block { + background-color: #1a1a1a; + border: 1px solid #2a2a2a; + border-radius: 16px; + padding: 32px; + margin-bottom: 40px; + } + + table { + width: 100%; + border-collapse: collapse; + } + + th { + background-color: #121212; + color: #b0b0b0; + padding: 16px 20px; + text-align: left; + font-size: 12px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 1px; + border-bottom: 1px solid #2a2a2a; + } + + td { + padding: 16px 20px; + border-bottom: 1px solid #1f1f1f; + color: #d0d0d0; + font-size: 14px; + } + + tr:last-child td { + border-bottom: none; + } + + tbody tr:hover { + background-color: #0f0f0f; + } + + .status-badge { + display: inline-block; + padding: 6px 12px; + border-radius: 8px; + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; + } + + .badge-live { + background-color: #1a1a1a; + color: #888888; + border: 1px solid #2a2a2a; + } + + .badge-profit { + background-color: rgba(46, 204, 113, 0.15); + color: #2ecc71; + } + + .badge-loss { + background-color: rgba(231, 76, 60, 0.15); + color: #e74c3c; + } + + .metric-row { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 20px; + margin-bottom: 40px; + } + + .spacer { + height: 1px; + background-color: #1f1f1f; + margin: 40px 0; + } + + .footer-text { + color: #666666; + font-size: 12px; + text-align: right; + margin-top: 40px; + padding-top: 20px; + border-top: 1px solid #1f1f1f; + } + + .empty-state { + text-align: center; + color: #555555; + padding: 60px 20px; + font-size: 14px; + } +