Hugging Face's logo

Spaces:
Shkd1156
/
quantumtrade-pulse-bot
Running

App Files Community
Shkd1156 commited on
Commit
cef81da
·
verified ·
1 Parent(s): cc5afd5

{

Browse files

"project": {
"name": "AI Trading Signal Web App",
"description": "A full-stack AI-powered web application for real-time analysis of crypto and forex markets that generates calibrated Buy/Sell/Hold signals with confidence scores and human-readable explanations.",
"objectives": [
"Collect and process real-time crypto and forex data",
"Run technical, machine learning, and NLP sentiment models",
"Fuse model outputs into actionable trading signals",
"Provide AI-based analysis and explanation for each signal",
"Enable backtesting, paper trading, and risk management"
],
"core_stack": {
"backend": "Python (FastAPI, Celery, Redis, Postgres/TimescaleDB)",
"frontend": "Next.js (React) + Tailwind + Recharts",
"ml": "LightGBM, XGBoost, PyTorch, HuggingFace Transformers",
"infra": "Docker, Kubernetes, Terraform, GitHub Actions, MLflow, Optuna"
}
},

"prompts": {
"backend": "Build a FastAPI-based backend with async real-time data ingestion from Binance/Coinbase/OANDA. Implement TimescaleDB for time-series data, Redis cache, Celery workers, and JWT-based auth. Expose REST and WebSocket APIs for signals and backtests.",
"ml_pipeline": "Create an ML pipeline using LightGBM and optional Transformer models. Use TimescaleDB for features, MLflow for tracking, and Optuna for hyperparameter tuning. Include calibration (Platt or isotonic) and walk-forward validation.",
"ai_analyst": "Develop an LLM-based analyst module that reads signal JSON and produces concise human-readable explanations including drivers, risk flags, and trade plan. Enforce conservative tone and include an educational disclaimer.",
"frontend": "Implement Next.js + Tailwind dashboard showing live signals, charts, backtests, and strategy editor with authentication and role-based access."
},

"architecture": {
"components": [
"Data ingestion (Binance, Coinbase, OANDA)",
"Normalization and feature engineering",
"ML/AI model service (technical + ML + NLP fusion)",
"Signal fusion and calibration",
"AI Analyst explanation layer",
"Backtesting and paper trading engine",
"Monitoring and alerting (Prometheus, Grafana, Sentry)",
"Frontend dashboard"
],
"communication": "Backend exposes REST + WebSocket APIs; data and features stored in TimescaleDB; model artifacts tracked in MLflow."
},

"data_sources": {
"market_data": ["Binance", "Coinbase", "OANDA/MetaTrader", "Dukascopy"],
"news_sentiment": ["NewsAPI", "GDELT", "Twitter/X API", "Benzinga"],
"economic": ["FRED", "ECB API"],
"storage": "TimescaleDB for time-series, Redis for cache, S3 for raw historical data"
},

"signal_schema": {
"id": "string",
"asset": "string",
"exchange": "string",
"timeframe": "string",
"timestamp": "datetime",
"signal": "BUY/SELL/HOLD",
"confidence": "float (0-1)",
"score_components": "object of model/indicator contributions",
"position_sizing": { "risk_pct": "float", "leverage": "float", "qty": "float" },
"explanation": "string",
"backtest_stats": "object",
"meta": "object"
},

"ml_design": {
"features": [
"returns, EMA diff, MACD, RSI, ATR, volatility, spread, sentiment",
"time-based and liquidity features"
],
"labels": "Next-period return > threshold",
"training": "purged walk-forward CV, MLflow tracking, Optuna optimization",
"models": ["LightGBM", "XGBoost", "1D-CNN/Transformer (optional)"],
"calibration": "Platt scaling or isotonic regression"
},

"risk_management": {
"rules": [
"Max risk per trade: 0.5% equity",
"Max daily drawdown: 10%",
"Circuit breakers on data or execution errors",
"Kill-switch for automation",
"Stop-loss and take-profit auto-calculation"
]
},

"backtesting": {
"type": "vectorized event-driven",
"features": [
"next-bar execution (no lookahead)",
"fee and slippage modeling",
"purged overlapping trades",
"metrics: Sharpe, Sortino, CAGR, winrate"
]
},

"monitoring": {
"metrics": [
"ingestion_latency_ms",
"model_predict_latency_ms",
"signals_per_minute",
"avg_confidence_by_asset",
"backtest_daily_sharpe"
],
"alerts": [
"data lag > 2s",
"signal volume spike",
"confidence collapse"
]
},

"security": {
"features": [
"JWT auth, rate limiting, audit logs",
"Secrets in Vault/KMS",
"GDPR compliance and PII anonymization",
"Explicit disclaimer: signals are educational, not financial advice"
]
},

"acceptance_criteria": {
"live_latency": "<1s per tick",
"signal_interval": "5m",
"backtest_sharpe": ">=0.5",
"paper_trade_drawdown": "<=10%",
"uptime": "99%+ during demo"
},

"ai_analyst_prompt": {
"goal": "Generate concise reasoning for each signal",
"required_fields": ["explanation", "drivers", "risk_flags", "trade_plan"],
"style": "conservative, data-driven, transparent",
"example": {
"explanation": "Buy BTC-USDT (5m). RSI=28 (oversold), bullish ML pattern detected, positive sentiment.",
"drivers": ["RSI=28", "ML pattern bullish", "positive sentiment"],
"risk_flags": ["low_liquidity"],
"trade_plan": "entry=68300, stop=67000, target=70000"
}
},

"roadmap": {
"sprints": [
"Sprint 0: infra + data ingestion",
"Sprint 1: indicators + chart dashboard",
"Sprint 2: ML model + backtester",
"Sprint 3: AI Analyst + paper trading",
"Sprint 4: monitoring, CI/CD, hardening"
]
},

"risks": {
"overfitting": "Use purged walk-forward CV and regularization",
"data_latency": "Monitor and use WebSockets for live data",
"lookahead_bias": "Ensure strict next-bar execution logic",
"false_confidence": "Calibrate probabilities and enforce thresholds",
"LLM_hallucination": "Template enforcement and post-validation"
},

"deliverables": [
"backend FastAPI service with REST/WebSocket",
"frontend Next.js dashboard",
"ML pipeline (train.py, features.py, MLflow setup)",
"AI Analyst module",
"docker-compose + GitHub CI/CD + Terraform templates",
"docs + 30-day paper trading report"
]
}

Files changed (6) hide show
  1. README.md +7 -4
  2. components/footer.js +130 -0
  3. components/navbar.js +113 -0
  4. index.html +386 -19
  5. script.js +41 -0
  6. style.css +57 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Quantumtrade Pulse Bot
3
- emoji: 🌖
4
  colorFrom: green
5
- colorTo: indigo
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: QuantumTrade Pulse Bot 🚀
 
3
  colorFrom: green
4
+ colorTo: gray
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/footer.js ADDED
@@ -0,0 +1,130 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ background-color: #1F2937;
9
+ color: white;
10
+ padding: 2rem 0;
11
+ margin-top: 3rem;
12
+ }
13
+ .footer-container {
14
+ max-width: 1200px;
15
+ margin: 0 auto;
16
+ padding: 0 2rem;
17
+ display: grid;
18
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
19
+ gap: 2rem;
20
+ }
21
+ .footer-logo {
22
+ display: flex;
23
+ align-items: center;
24
+ font-size: 1.25rem;
25
+ font-weight: 700;
26
+ color: white;
27
+ text-decoration: none;
28
+ margin-bottom: 1rem;
29
+ }
30
+ .footer-logo i {
31
+ margin-right: 0.5rem;
32
+ }
33
+ .footer-description {
34
+ color: #9CA3AF;
35
+ margin-bottom: 1.5rem;
36
+ line-height: 1.5;
37
+ }
38
+ .footer-links h3 {
39
+ font-size: 1rem;
40
+ font-weight: 600;
41
+ margin-bottom: 1rem;
42
+ }
43
+ .footer-links ul {
44
+ list-style: none;
45
+ padding: 0;
46
+ }
47
+ .footer-links li {
48
+ margin-bottom: 0.75rem;
49
+ }
50
+ .footer-links a {
51
+ color: #9CA3AF;
52
+ text-decoration: none;
53
+ transition: color 0.2s;
54
+ }
55
+ .footer-links a:hover {
56
+ color: white;
57
+ }
58
+ .footer-bottom {
59
+ border-top: 1px solid #374151;
60
+ padding-top: 2rem;
61
+ margin-top: 2rem;
62
+ text-align: center;
63
+ color: #9CA3AF;
64
+ font-size: 0.875rem;
65
+ }
66
+ .disclaimer {
67
+ color: #6B7280;
68
+ font-size: 0.75rem;
69
+ line-height: 1.5;
70
+ margin-top: 2rem;
71
+ padding: 0 2rem;
72
+ max-width: 1200px;
73
+ margin-left: auto;
74
+ margin-right: auto;
75
+ }
76
+ @media (max-width: 768px) {
77
+ .footer-container {
78
+ grid-template-columns: 1fr;
79
+ }
80
+ }
81
+ </style>
82
+ <div class="footer-container">
83
+ <div class="footer-about">
84
+ <a href="/" class="footer-logo">
85
+ <i data-feather="zap"></i>
86
+ QuantumTrade
87
+ </a>
88
+ <p class="footer-description">
89
+ AI-powered trading signals and market analysis to help you make better investment decisions.
90
+ </p>
91
+ </div>
92
+ <div class="footer-links">
93
+ <h3>Product</h3>
94
+ <ul>
95
+ <li><a href="/features">Features</a></li>
96
+ <li><a href="/pricing">Pricing</a></li>
97
+ <li><a href="/api">API</a></li>
98
+ <li><a href="/integrations">Integrations</a></li>
99
+ </ul>
100
+ </div>
101
+ <div class="footer-links">
102
+ <h3>Resources</h3>
103
+ <ul>
104
+ <li><a href="/documentation">Documentation</a></li>
105
+ <li><a href="/blog">Blog</a></li>
106
+ <li><a href="/community">Community</a></li>
107
+ <li><a href="/support">Support</a></li>
108
+ </ul>
109
+ </div>
110
+ <div class="footer-links">
111
+ <h3>Company</h3>
112
+ <ul>
113
+ <li><a href="/about">About</a></li>
114
+ <li><a href="/careers">Careers</a></li>
115
+ <li><a href="/contact">Contact</a></li>
116
+ <li><a href="/legal">Legal</a></li>
117
+ </ul>
118
+ </div>
119
+ </div>
120
+ <div class="footer-bottom">
121
+ <p>© 2023 QuantumTrade Pulse Bot. All rights reserved.</p>
122
+ </div>
123
+ <div class="disclaimer">
124
+ <p><strong>Disclaimer:</strong> Trading involves risk. QuantumTrade does not provide financial advice. All signals and analysis are for educational purposes only. Past performance is not indicative of future results.</p>
125
+ </div>
126
+ `;
127
+ }
128
+ }
129
+
130
+ customElements.define('custom-footer', CustomFooter);
components/navbar.js ADDED
@@ -0,0 +1,113 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ width: 100%;
9
+ background-color: white;
10
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
11
+ position: sticky;
12
+ top: 0;
13
+ z-index: 50;
14
+ }
15
+ .navbar {
16
+ display: flex;
17
+ justify-content: space-between;
18
+ align-items: center;
19
+ padding: 1rem 2rem;
20
+ max-width: 100%;
21
+ }
22
+ .logo {
23
+ display: flex;
24
+ align-items: center;
25
+ font-weight: 700;
26
+ font-size: 1.25rem;
27
+ color: #3B82F6;
28
+ text-decoration: none;
29
+ }
30
+ .logo-icon {
31
+ margin-right: 0.5rem;
32
+ }
33
+ .nav-links {
34
+ display: flex;
35
+ gap: 1.5rem;
36
+ }
37
+ .nav-link {
38
+ color: #4B5563;
39
+ font-weight: 500;
40
+ text-decoration: none;
41
+ transition: color 0.2s;
42
+ display: flex;
43
+ align-items: center;
44
+ }
45
+ .nav-link:hover {
46
+ color: #3B82F6;
47
+ }
48
+ .nav-link i {
49
+ margin-right: 0.5rem;
50
+ }
51
+ .user-menu {
52
+ display: flex;
53
+ align-items: center;
54
+ gap: 1rem;
55
+ }
56
+ .avatar {
57
+ width: 2.5rem;
58
+ height: 2.5rem;
59
+ border-radius: 9999px;
60
+ background-color: #E5E7EB;
61
+ display: flex;
62
+ align-items: center;
63
+ justify-content: center;
64
+ overflow: hidden;
65
+ }
66
+ .avatar img {
67
+ width: 100%;
68
+ height: 100%;
69
+ object-fit: cover;
70
+ }
71
+ @media (max-width: 768px) {
72
+ .nav-links {
73
+ display: none;
74
+ }
75
+ .navbar {
76
+ padding: 1rem;
77
+ }
78
+ }
79
+ </style>
80
+ <nav class="navbar">
81
+ <a href="/" class="logo">
82
+ <i data-feather="zap" class="logo-icon"></i>
83
+ QuantumTrade
84
+ </a>
85
+ <div class="nav-links">
86
+ <a href="/dashboard" class="nav-link">
87
+ <i data-feather="home"></i>
88
+ Dashboard
89
+ </a>
90
+ <a href="/signals" class="nav-link">
91
+ <i data-feather="activity"></i>
92
+ Signals
93
+ </a>
94
+ <a href="/backtesting" class="nav-link">
95
+ <i data-feather="repeat"></i>
96
+ Backtesting
97
+ </a>
98
+ <a href="/analytics" class="nav-link">
99
+ <i data-feather="bar-chart-2"></i>
100
+ Analytics
101
+ </a>
102
+ </div>
103
+ <div class="user-menu">
104
+ <div class="avatar">
105
+ <img src="http://static.photos/technology/200x200/5" alt="User Avatar">
106
+ </div>
107
+ </div>
108
+ </nav>
109
+ `;
110
+ }
111
+ }
112
+
113
+ customElements.define('custom-navbar', CustomNavbar);
index.html CHANGED
@@ -1,19 +1,386 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>QuantumTrade Pulse Bot | AI Trading Signals</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: {
17
+ 500: '#3B82F6',
18
+ },
19
+ secondary: {
20
+ 500: '#6B7280',
21
+ }
22
+ }
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ </head>
28
+ <body class="bg-gray-50 min-h-screen">
29
+ <custom-navbar></custom-navbar>
30
+
31
+ <main class="container mx-auto px-4 py-8">
32
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
33
+ <!-- Dashboard Overview -->
34
+ <div class="lg:col-span-4">
35
+ <div class="bg-white rounded-xl shadow-sm p-6">
36
+ <h1 class="text-2xl font-bold text-primary-500 mb-6">AI Trading Signals Dashboard</h1>
37
+
38
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
39
+ <div class="bg-indigo-50 p-4 rounded-lg">
40
+ <div class="flex items-center">
41
+ <i data-feather="trending-up" class="text-indigo-500 mr-2"></i>
42
+ <span class="font-medium text-gray-700">Active Signals</span>
43
+ </div>
44
+ <div class="text-2xl font-bold mt-2">24</div>
45
+ </div>
46
+ <div class="bg-green-50 p-4 rounded-lg">
47
+ <div class="flex items-center">
48
+ <i data-feather="bar-chart-2" class="text-green-500 mr-2"></i>
49
+ <span class="font-medium text-gray-700">Win Rate</span>
50
+ </div>
51
+ <div class="text-2xl font-bold mt-2">76.5%</div>
52
+ </div>
53
+ <div class="bg-blue-50 p-4 rounded-lg">
54
+ <div class="flex items-center">
55
+ <i data-feather="activity" class="text-blue-500 mr-2"></i>
56
+ <span class="font-medium text-gray-700">Sharpe Ratio</span>
57
+ </div>
58
+ <div class="text-2xl font-bold mt-2">1.82</div>
59
+ </div>
60
+ </div>
61
+
62
+ <div class="bg-gray-50 p-4 rounded-lg mb-6">
63
+ <div class="flex flex-wrap items-center justify-between mb-4">
64
+ <h2 class="text-lg font-semibold">Market Overview</h2>
65
+ <div class="flex space-x-2">
66
+ <button class="px-3 py-1 text-sm bg-primary-500 text-white rounded">Crypto</button>
67
+ <button class="px-3 py-1 text-sm bg-gray-200 text-gray-700 rounded">Forex</button>
68
+ <button class="px-3 py-1 text-sm bg-gray-200 text-gray-700 rounded">Stocks</button>
69
+ </div>
70
+ </div>
71
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
72
+ <div class="bg-white p-3 rounded shadow-xs">
73
+ <div class="text-xs text-gray-500">BTC/USDT</div>
74
+ <div class="font-bold">$42,875</div>
75
+ <div class="text-green-500 text-sm">+2.34%</div>
76
+ </div>
77
+ <div class="bg-white p-3 rounded shadow-xs">
78
+ <div class="text-xs text-gray-500">ETH/USDT</div>
79
+ <div class="font-bold">$2,345</div>
80
+ <div class="text-green-500 text-sm">+1.56%</div>
81
+ </div>
82
+ <div class="bg-white p-3 rounded shadow-xs">
83
+ <div class="text-xs text-gray-500">EUR/USD</div>
84
+ <div class="font-bold">1.0824</div>
85
+ <div class="text-red-500 text-sm">-0.12%</div>
86
+ </div>
87
+ <div class="bg-white p-3 rounded shadow-xs">
88
+ <div class="text-xs text-gray-500">XAU/USD</div>
89
+ <div class="font-bold">$2,034</div>
90
+ <div class="text-green-500 text-sm">+0.78%</div>
91
+ </div>
92
+ <div class="bg-white p-3 rounded shadow-xs">
93
+ <div class="text-xs text-gray-500">SOL/USDT</div>
94
+ <div class="font-bold">$102.34</div>
95
+ <div class="text-red-500 text-sm">-1.23%</div>
96
+ </div>
97
+ <div class="bg-white p-3 rounded shadow-xs">
98
+ <div class="text-xs text-gray-500">ADA/USDT</div>
99
+ <div class="font-bold">$0.512</div>
100
+ <div class="text-green-500 text-sm">+0.45%</div>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Live Signals -->
108
+ <div class="lg:col-span-3">
109
+ <div class="bg-white rounded-xl shadow-sm p-6">
110
+ <div class="flex justify-between items-center mb-6">
111
+ <h2 class="text-xl font-semibold">Live Trading Signals</h2>
112
+ <div class="flex items-center space-x-2">
113
+ <div class="relative">
114
+ <select class="appearance-none bg-gray-100 border border-gray-200 rounded pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500">
115
+ <option>All Assets</option>
116
+ <option>Crypto</option>
117
+ <option>Forex</option>
118
+ </select>
119
+ <i data-feather="chevron-down" class="absolute right-3 top-2.5 text-gray-500" style="pointer-events: none;"></i>
120
+ </div>
121
+ <button class="p-2 bg-primary-500 text-white rounded">
122
+ <i data-feather="refresh-cw" class="w-4 h-4"></i>
123
+ </button>
124
+ </div>
125
+ </div>
126
+
127
+ <div class="overflow-x-auto">
128
+ <table class="min-w-full divide-y divide-gray-200">
129
+ <thead class="bg-gray-50">
130
+ <tr>
131
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Asset</th>
132
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Signal</th>
133
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Confidence</th>
134
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Timeframe</th>
135
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Analysis</th>
136
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
137
+ </tr>
138
+ </thead>
139
+ <tbody class="bg-white divide-y divide-gray-200">
140
+ <tr>
141
+ <td class="px-4 py-3 whitespace-nowrap">
142
+ <div class="flex items-center">
143
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
144
+ <i data-feather="dollar-sign" class="text-blue-500"></i>
145
+ </div>
146
+ <div class="ml-3">
147
+ <div class="font-medium">BTC/USDT</div>
148
+ <div class="text-xs text-gray-500">Binance</div>
149
+ </div>
150
+ </div>
151
+ </td>
152
+ <td class="px-4 py-3 whitespace-nowrap">
153
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">BUY</span>
154
+ </td>
155
+ <td class="px-4 py-3 whitespace-nowrap">
156
+ <div class="flex items-center">
157
+ <div class="w-16 bg-gray-200 rounded-full h-2">
158
+ <div class="bg-green-500 h-2 rounded-full" style="width: 84%"></div>
159
+ </div>
160
+ <span class="ml-2 text-sm font-medium">84%</span>
161
+ </div>
162
+ </td>
163
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">15m</td>
164
+ <td class="px-4 py-3 text-sm text-gray-500">
165
+ <div class="flex items-center">
166
+ <button class="text-primary-500 hover:text-primary-700 flex items-center">
167
+ <i data-feather="eye" class="w-4 h-4 mr-1"></i>
168
+ View
169
+ </button>
170
+ </div>
171
+ </td>
172
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
173
+ <button class="px-3 py-1 bg-primary-500 text-white rounded text-sm">Execute</button>
174
+ </td>
175
+ </tr>
176
+ <tr>
177
+ <td class="px-4 py-3 whitespace-nowrap">
178
+ <div class="flex items-center">
179
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-purple-100 flex items-center justify-center">
180
+ <i data-feather="dollar-sign" class="text-purple-500"></i>
181
+ </div>
182
+ <div class="ml-3">
183
+ <div class="font-medium">ETH/USDT</div>
184
+ <div class="text-xs text-gray-500">Binance</div>
185
+ </div>
186
+ </div>
187
+ </td>
188
+ <td class="px-4 py-3 whitespace-nowrap">
189
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">SELL</span>
190
+ </td>
191
+ <td class="px-4 py-3 whitespace-nowrap">
192
+ <div class="flex items-center">
193
+ <div class="w-16 bg-gray-200 rounded-full h-2">
194
+ <div class="bg-red-500 h-2 rounded-full" style="width: 72%"></div>
195
+ </div>
196
+ <span class="ml-2 text-sm font-medium">72%</span>
197
+ </div>
198
+ </td>
199
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">1h</td>
200
+ <td class="px-4 py-3 text-sm text-gray-500">
201
+ <div class="flex items-center">
202
+ <button class="text-primary-500 hover:text-primary-700 flex items-center">
203
+ <i data-feather="eye" class="w-4 h-4 mr-1"></i>
204
+ View
205
+ </button>
206
+ </div>
207
+ </td>
208
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
209
+ <button class="px-3 py-1 bg-primary-500 text-white rounded text-sm">Execute</button>
210
+ </td>
211
+ </tr>
212
+ <tr>
213
+ <td class="px-4 py-3 whitespace-nowrap">
214
+ <div class="flex items-center">
215
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-yellow-100 flex items-center justify-center">
216
+ <i data-feather="dollar-sign" class="text-yellow-500"></i>
217
+ </div>
218
+ <div class="ml-3">
219
+ <div class="font-medium">XAU/USD</div>
220
+ <div class="text-xs text-gray-500">OANDA</div>
221
+ </div>
222
+ </div>
223
+ </td>
224
+ <td class="px-4 py-3 whitespace-nowrap">
225
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">BUY</span>
226
+ </td>
227
+ <td class="px-4 py-3 whitespace-nowrap">
228
+ <div class="flex items-center">
229
+ <div class="w-16 bg-gray-200 rounded-full h-2">
230
+ <div class="bg-green-500 h-2 rounded-full" style="width: 91%"></div>
231
+ </div>
232
+ <span class="ml-2 text-sm font-medium">91%</span>
233
+ </div>
234
+ </td>
235
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">4h</td>
236
+ <td class="px-4 py-3 text-sm text-gray-500">
237
+ <div class="flex items-center">
238
+ <button class="text-primary-500 hover:text-primary-700 flex items-center">
239
+ <i data-feather="eye" class="w-4 h-4 mr-1"></i>
240
+ View
241
+ </button>
242
+ </div>
243
+ </td>
244
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
245
+ <button class="px-3 py-1 bg-primary-500 text-white rounded text-sm">Execute</button>
246
+ </td>
247
+ </tr>
248
+ <tr>
249
+ <td class="px-4 py-3 whitespace-nowrap">
250
+ <div class="flex items-center">
251
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
252
+ <i data-feather="dollar-sign" class="text-blue-500"></i>
253
+ </div>
254
+ <div class="ml-3">
255
+ <div class="font-medium">EUR/USD</div>
256
+ <div class="text-xs text-gray-500">OANDA</div>
257
+ </div>
258
+ </div>
259
+ </td>
260
+ <td class="px-4 py-3 whitespace-nowrap">
261
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800">HOLD</span>
262
+ </td>
263
+ <td class="px-4 py-3 whitespace-nowrap">
264
+ <div class="flex items-center">
265
+ <div class="w-16 bg-gray-200 rounded-full h-2">
266
+ <div class="bg-gray-500 h-2 rounded-full" style="width: 65%"></div>
267
+ </div>
268
+ <span class="ml-2 text-sm font-medium">65%</span>
269
+ </div>
270
+ </td>
271
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">1d</td>
272
+ <td class="px-4 py-3 text-sm text-gray-500">
273
+ <div class="flex items-center">
274
+ <button class="text-primary-500 hover:text-primary-700 flex items-center">
275
+ <i data-feather="eye" class="w-4 h-4 mr-1"></i>
276
+ View
277
+ </button>
278
+ </div>
279
+ </td>
280
+ <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
281
+ <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded text-sm" disabled>N/A</button>
282
+ </td>
283
+ </tr>
284
+ </tbody>
285
+ </table>
286
+ </div>
287
+
288
+ <div class="mt-4 flex justify-between items-center">
289
+ <div class="text-sm text-gray-500">Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">24</span> signals</div>
290
+ <div class="flex space-x-1">
291
+ <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded text-sm">Previous</button>
292
+ <button class="px-3 py-1 bg-primary-500 text-white rounded text-sm">1</button>
293
+ <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded text-sm">2</button>
294
+ <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded text-sm">3</button>
295
+ <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded text-sm">Next</button>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </div>
300
+
301
+ <!-- Signal Details & AI Analysis -->
302
+ <div class="lg:col-span-1">
303
+ <div class="bg-white rounded-xl shadow-sm p-6">
304
+ <h2 class="text-xl font-semibold mb-6">Signal Details</h2>
305
+
306
+ <div class="bg-indigo-50 p-4 rounded-lg mb-6">
307
+ <div class="flex justify-between items-center mb-2">
308
+ <div class="font-medium">BTC/USDT</div>
309
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">BUY</span>
310
+ </div>
311
+ <div class="text-sm text-gray-600 mb-2">Binance • 15m • 84% Confidence</div>
312
+ <div class="text-sm text-gray-500">Updated: 2 min ago</div>
313
+ </div>
314
+
315
+ <div class="mb-6">
316
+ <h3 class="font-medium text-gray-700 mb-2 flex items-center">
317
+ <i data-feather="activity" class="w-4 h-4 mr-2"></i>
318
+ Trading Plan
319
+ </h3>
320
+ <div class="grid grid-cols-2 gap-2 text-sm">
321
+ <div class="bg-gray-50 p-2 rounded">
322
+ <div class="text-gray-500">Entry</div>
323
+ <div class="font-medium">$42,850</div>
324
+ </div>
325
+ <div class="bg-gray-50 p-2 rounded">
326
+ <div class="text-gray-500">Stop</div>
327
+ <div class="font-medium">$41,900</div>
328
+ </div>
329
+ <div class="bg-gray-50 p-2 rounded">
330
+ <div class="text-gray-500">Target</div>
331
+ <div class="font-medium">$44,200</div>
332
+ </div>
333
+ <div class="bg-gray-50 p-2 rounded">
334
+ <div class="text-gray-500">Risk</div>
335
+ <div class="font-medium">0.5%</div>
336
+ </div>
337
+ </div>
338
+ </div>
339
+
340
+ <div class="mb-6">
341
+ <h3 class="font-medium text-gray-700 mb-2 flex items-center">
342
+ <i data-feather="bar-chart-2" class="w-4 h-4 mr-2"></i>
343
+ Key Indicators
344
+ </h3>
345
+ <div class="space-y-2">
346
+ <div class="flex justify-between text-sm">
347
+ <span class="text-gray-600">RSI (14)</span>
348
+ <span class="font-medium">28.5 (Oversold)</span>
349
+ </div>
350
+ <div class="flex justify-between text-sm">
351
+ <span class="text-gray-600">MACD</span>
352
+ <span class="font-medium">Bullish Cross</span>
353
+ </div>
354
+ <div class="flex justify-between text-sm">
355
+ <span class="text-gray-600">Volume</span>
356
+ <span class="font-medium">+34% above avg</span>
357
+ </div>
358
+ </div>
359
+ </div>
360
+
361
+ <div>
362
+ <h3 class="font-medium text-gray-700 mb-2 flex items-center">
363
+ <i data-feather="cpu" class="w-4 h-4 mr-2"></i>
364
+ AI Analysis
365
+ </h3>
366
+ <div class="bg-blue-50 p-3 rounded text-sm text-gray-700">
367
+ <p class="mb-2">Strong buy signal triggered by oversold RSI (28.5) combined with bullish MACD crossover. Volume spike confirms accumulation. Sentiment score of 0.82 (positive) from news and social media.</p>
368
+ <p class="text-xs italic text-gray-500">Note: This is not financial advice. Past performance is not indicative of future results.</p>
369
+ </div>
370
+ </div>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </main>
375
+
376
+ <custom-footer></custom-footer>
377
+
378
+ <script src="components/navbar.js"></script>
379
+ <script src="components/footer.js"></script>
380
+ <script src="script.js"></script>
381
+ <script>
382
+ feather.replace();
383
+ </script>
384
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
385
+ </body>
386
+ </html>
script.js ADDED
@@ -0,0 +1,41 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Initialize tooltips
2
+ document.addEventListener('DOMContentLoaded', function() {
3
+ // This would be replaced with actual data fetching in a real app
4
+ console.log('QuantumTrade Pulse Bot initialized');
5
+
6
+ // Example of dynamic data update
7
+ setInterval(updateMarketData, 5000);
8
+ });
9
+
10
+ function updateMarketData() {
11
+ // This would fetch real data from an API in a production app
12
+ const priceElements = document.querySelectorAll('.price-update');
13
+ priceElements.forEach(el => {
14
+ const currentPrice = parseFloat(el.textContent.replace('$', '').replace(',', ''));
15
+ const change = (Math.random() * 2 - 1) * 0.2; // Random small change
16
+ const newPrice = currentPrice * (1 + change/100);
17
+ el.textContent = '$' + newPrice.toFixed(2);
18
+
19
+ const changeElement = el.nextElementSibling;
20
+ if (change >= 0) {
21
+ changeElement.textContent = '+' + change.toFixed(2) + '%';
22
+ changeElement.classList.remove('text-red-500');
23
+ changeElement.classList.add('text-green-500');
24
+ } else {
25
+ changeElement.textContent = change.toFixed(2) + '%';
26
+ changeElement.classList.remove('text-green-500');
27
+ changeElement.classList.add('text-red-500');
28
+ }
29
+ });
30
+ }
31
+
32
+ // Handle signal execution
33
+ document.addEventListener('click', function(e) {
34
+ if (e.target && e.target.textContent === 'Execute') {
35
+ const row = e.target.closest('tr');
36
+ const asset = row.querySelector('td:first-child div:first-child').textContent;
37
+ const signal = row.querySelector('td:nth-child(2) span').textContent;
38
+
39
+ alert(`Executing ${signal} order for ${asset}`);
40
+ }
41
+ });
style.css CHANGED
@@ -1,28 +1,67 @@
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
2
+
3
  body {
4
+ font-family: 'Inter', sans-serif;
5
+ }
6
+
7
+ .shadow-xs {
8
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
9
+ }
10
+
11
+ /* Custom scrollbar */
12
+ ::-webkit-scrollbar {
13
+ width: 6px;
14
+ height: 6px;
15
+ }
16
+
17
+ ::-webkit-scrollbar-track {
18
+ background: #f1f1f1;
19
+ border-radius: 3px;
20
+ }
21
+
22
+ ::-webkit-scrollbar-thumb {
23
+ background: #c1c1c1;
24
+ border-radius: 3px;
25
  }
26
 
27
+ ::-webkit-scrollbar-thumb:hover {
28
+ background: #a1a1a1;
 
29
  }
30
 
31
+ /* Animations */
32
+ @keyframes fadeIn {
33
+ from { opacity: 0; }
34
+ to { opacity: 1; }
 
35
  }
36
 
37
+ .fade-in {
38
+ animation: fadeIn 0.3s ease-in;
 
 
 
 
39
  }
40
 
41
+ /* Tooltip styles */
42
+ .tooltip {
43
+ position: relative;
44
+ display: inline-block;
45
  }
46
+
47
+ .tooltip .tooltip-text {
48
+ visibility: hidden;
49
+ width: 120px;
50
+ background-color: #333;
51
+ color: #fff;
52
+ text-align: center;
53
+ border-radius: 4px;
54
+ padding: 5px;
55
+ position: absolute;
56
+ z-index: 1;
57
+ bottom: 125%;
58
+ left: 50%;
59
+ transform: translateX(-50%);
60
+ opacity: 0;
61
+ transition: opacity 0.3s;
62
+ }
63
+
64
+ .tooltip:hover .tooltip-text {
65
+ visibility: visible;
66
+ opacity: 1;
67
+ }