Spaces:

Yllvar
/

quanttrader-pro

Running

App Files Files Community

quanttrader-pro / index.html

Yllvar

Add 2 files

53f87e9 verified about 1 year ago

raw

history blame contribute delete

54.9 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>QuantTrader Pro \| Institutional-Grade Crypto Trading</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
	<style>
	:root {
	--primary-bg: #000000;
	--primary-text: #FCD535;
	--secondary-text: #EAECEF;
	--accent-yellow: #F0B90B;
	--positive: #0ECB81;
	--negative: #F6465D;
	--panel-bg: #1E2026;
	--border-color: #2B3139;
	--dark-accent: #181A20;
	--light-accent: #474D57;
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}

	body {
	background-color: var(--primary-bg);
	color: var(--secondary-text);
	min-height: 100vh;
	overflow-x: hidden;
	}

	.container {
	max-width: 1800px;
	margin: 0 auto;
	padding: 20px;
	}

	header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 0;
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 20px;
	}

	.logo {
	display: flex;
	align-items: center;
	gap: 10px;
	}

	.logo h1 {
	color: var(--primary-text);
	font-size: 24px;
	font-weight: 700;
	}

	.logo-icon {
	color: var(--primary-text);
	font-size: 28px;
	}

	.header-controls {
	display: flex;
	align-items: center;
	gap: 20px;
	}

	.user-menu {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	}

	.user-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--primary-text);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary-bg);
	font-weight: bold;
	}

	.status-indicator {
	display: flex;
	align-items: center;
	gap: 8px;
	background-color: rgba(240, 185, 11, 0.1);
	padding: 8px 15px;
	border-radius: 20px;
	font-size: 14px;
	color: var(--primary-text);
	}

	.status-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--positive);
	animation: pulse 2s infinite;
	}

	@keyframes pulse {
	0% { opacity: 1; }
	50% { opacity: 0.5; }
	100% { opacity: 1; }
	}

	.dashboard-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 20px;
	}

	.panel {
	background-color: var(--panel-bg);
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	border: 1px solid var(--border-color);
	position: relative;
	}

	.panel-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border-color);
	}

	.panel-title {
	color: var(--primary-text);
	font-size: 18px;
	font-weight: 600;
	}

	.panel-actions {
	display: flex;
	gap: 10px;
	}

	.panel-action {
	background: none;
	border: none;
	color: var(--secondary-text);
	cursor: pointer;
	font-size: 14px;
	transition: color 0.2s;
	}

	.panel-action:hover {
	color: var(--primary-text);
	}

	.market-overview {
	grid-column: span 4;
	}

	.portfolio-status {
	grid-column: span 4;
	}

	.trading-signals {
	grid-column: span 4;
	}

	.recent-trades {
	grid-column: span 6;
	}

	.performance-metrics {
	grid-column: span 6;
	}

	.strategy-config {
	grid-column: span 6;
	}

	.market-pairs {
	display: grid;
	gap: 15px;
	}

	.pair-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 15px;
	background-color: rgba(30, 32, 38, 0.8);
	border-radius: 6px;
	border-left: 3px solid var(--border-color);
	transition: all 0.3s ease;
	cursor: pointer;
	}

	.pair-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	border-left-color: var(--primary-text);
	}

	.pair-info {
	display: flex;
	flex-direction: column;
	gap: 5px;
	}

	.pair-name {
	font-weight: 600;
	color: var(--secondary-text);
	}

	.pair-price {
	font-weight: 700;
	font-size: 18px;
	}

	.price-up {
	color: var(--positive);
	}

	.price-down {
	color: var(--negative);
	}

	.pair-stats {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 5px;
	}

	.pair-change {
	font-weight: 600;
	}

	.pair-volume {
	font-size: 12px;
	color: #848E9C;
	}

	.portfolio-summary {
	display: flex;
	flex-direction: column;
	gap: 15px;
	}

	.portfolio-value {
	font-size: 28px;
	font-weight: 700;
	color: var(--primary-text);
	}

	.portfolio-pl {
	display: flex;
	align-items: center;
	gap: 10px;
	}

	.pl-value {
	font-weight: 600;
	font-size: 18px;
	}

	.portfolio-allocation {
	display: flex;
	flex-direction: column;
	gap: 10px;
	}

	.allocation-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	.allocation-bar {
	height: 8px;
	background-color: #2B3139;
	border-radius: 4px;
	margin-top: 5px;
	overflow: hidden;
	}

	.bar-fill {
	height: 100%;
	border-radius: 4px;
	}

	.btc-fill {
	background-color: #F7931A;
	}

	.eth-fill {
	background-color: #627EEA;
	}

	.usdt-fill {
	background-color: #26A17B;
	}

	.sol-fill {
	background-color: #00FFA3;
	}

	.bnb-fill {
	background-color: #F0B90B;
	}

	.signal-card {
	display: grid;
	gap: 15px;
	}

	.signal-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 15px;
	background-color: rgba(30, 32, 38, 0.8);
	border-radius: 6px;
	border-left: 3px solid var(--border-color);
	}

	.signal-pair {
	font-weight: 600;
	}

	.signal-action {
	padding: 5px 10px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 14px;
	}

	.signal-buy {
	background-color: rgba(14, 203, 129, 0.1);
	color: var(--positive);
	border: 1px solid var(--positive);
	}

	.signal-sell {
	background-color: rgba(246, 70, 93, 0.1);
	color: var(--negative);
	border: 1px solid var(--negative);
	}

	.signal-hold {
	background-color: rgba(240, 185, 11, 0.1);
	color: var(--primary-text);
	border: 1px solid var(--primary-text);
	}

	.signal-reason {
	font-size: 12px;
	color: #848E9C;
	margin-top: 5px;
	}

	.trades-table {
	width: 100%;
	border-collapse: collapse;
	}

	.trades-table th {
	text-align: left;
	padding: 10px 0;
	color: #848E9C;
	font-weight: 500;
	font-size: 14px;
	border-bottom: 1px solid var(--border-color);
	}

	.trades-table td {
	padding: 12px 0;
	font-size: 14px;
	border-bottom: 1px solid var(--border-color);
	}

	.trade-type {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 12px;
	}

	.type-buy {
	background-color: rgba(14, 203, 129, 0.1);
	color: var(--positive);
	}

	.type-sell {
	background-color: rgba(246, 70, 93, 0.1);
	color: var(--negative);
	}

	.metrics-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
	}

	.metric-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 15px;
	background-color: rgba(30, 32, 38, 0.8);
	border-radius: 6px;
	}

	.metric-value {
	font-size: 24px;
	font-weight: 700;
	color: var(--primary-text);
	}

	.metric-label {
	font-size: 14px;
	color: #848E9C;
	}

	.controls {
	grid-column: span 12;
	display: flex;
	justify-content: space-between;
	gap: 15px;
	margin-top: 20px;
	}

	.control-btn {
	flex: 1;
	padding: 15px;
	border-radius: 6px;
	border: none;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	}

	.btn-primary {
	background-color: var(--primary-text);
	color: var(--primary-bg);
	}

	.btn-primary:hover {
	background-color: #e6b008;
	}

	.btn-secondary {
	background-color: var(--panel-bg);
	color: var(--secondary-text);
	border: 1px solid var(--border-color);
	}

	.btn-secondary:hover {
	background-color: #2a2e36;
	}

	.btn-danger {
	background-color: rgba(246, 70, 93, 0.1);
	color: var(--negative);
	border: 1px solid var(--negative);
	}

	.btn-danger:hover {
	background-color: rgba(246, 70, 93, 0.2);
	}

	.btn-success {
	background-color: rgba(14, 203, 129, 0.1);
	color: var(--positive);
	border: 1px solid var(--positive);
	}

	.btn-success:hover {
	background-color: rgba(14, 203, 129, 0.2);
	}

	.agent-message {
	grid-column: span 12;
	padding: 15px;
	background-color: rgba(240, 185, 11, 0.1);
	border-radius: 6px;
	border-left: 4px solid var(--primary-text);
	margin-top: 20px;
	display: flex;
	align-items: center;
	gap: 15px;
	}

	.message-icon {
	font-size: 24px;
	color: var(--primary-text);
	}

	.message-content {
	flex: 1;
	}

	.message-time {
	font-size: 12px;
	color: #848E9C;
	}

	/* Strategy Configuration */
	.strategy-form {
	display: grid;
	gap: 15px;
	}

	.form-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	}

	.form-label {
	font-size: 14px;
	color: var(--secondary-text);
	}

	.form-control {
	background-color: var(--dark-accent);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	padding: 10px;
	color: var(--secondary-text);
	font-size: 14px;
	}

	.form-control:focus {
	outline: none;
	border-color: var(--primary-text);
	}

	.form-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
	}

	.form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 10px;
	}

	/* Modal */
	.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	}

	.modal.active {
	opacity: 1;
	visibility: visible;
	}

	.modal-content {
	background-color: var(--panel-bg);
	border-radius: 8px;
	width: 90%;
	max-width: 600px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 20px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	transform: translateY(-20px);
	transition: transform 0.3s ease;
	}

	.modal.active .modal-content {
	transform: translateY(0);
	}

	.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border-color);
	}

	.modal-title {
	color: var(--primary-text);
	font-size: 20px;
	font-weight: 600;
	}

	.modal-close {
	background: none;
	border: none;
	color: var(--secondary-text);
	font-size: 24px;
	cursor: pointer;
	transition: color 0.2s;
	}

	.modal-close:hover {
	color: var(--primary-text);
	}

	/* Chart */
	.chart-container {
	width: 100%;
	height: 300px;
	margin-top: 20px;
	position: relative;
	}

	.chart-placeholder {
	width: 100%;
	height: 100%;
	background-color: var(--dark-accent);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--light-accent);
	}

	/* Loading spinner */
	.spinner {
	width: 40px;
	height: 40px;
	border: 4px solid rgba(240, 185, 11, 0.3);
	border-radius: 50%;
	border-top-color: var(--primary-text);
	animation: spin 1s ease-in-out infinite;
	}

	@keyframes spin {
	to { transform: rotate(360deg); }
	}

	/* Responsive */
	@media (max-width: 1400px) {
	.market-overview, .portfolio-status, .trading-signals {
	grid-column: span 6;
	}

	.recent-trades, .performance-metrics, .strategy-config {
	grid-column: span 12;
	}
	}

	@media (max-width: 992px) {
	.dashboard-grid {
	grid-template-columns: 1fr;
	}

	.market-overview, .portfolio-status, .trading-signals,
	.recent-trades, .performance-metrics, .strategy-config {
	grid-column: span 1;
	}

	.metrics-grid, .form-row {
	grid-template-columns: 1fr;
	}

	.controls {
	flex-direction: column;
	}
	}

	/* Toastr customization */
	#toast-container > .toast {
	background-color: var(--panel-bg);
	border-left: 4px solid var(--primary-text);
	color: var(--secondary-text);
	}

	#toast-container > .toast-success {
	border-left-color: var(--positive);
	}

	#toast-container > .toast-error {
	border-left-color: var(--negative);
	}

	#toast-container > .toast-info {
	border-left-color: var(--primary-text);
	}
	</style>
	</head>
	<body>
	<div class="container">
	<header>
	<div class="logo">
	<i class="fas fa-robot logo-icon"></i>
	<h1>QuantTrader Pro</h1>
	</div>
	<div class="header-controls">
	<div class="status-indicator">
	<div class="status-dot"></div>
	<span>LIVE TRADING ACTIVE</span>
	</div>
	<div class="user-menu">
	<div class="user-avatar">JD</div>
	<i class="fas fa-chevron-down"></i>
	</div>
	</div>
	</header>

	<div class="dashboard-grid">
	<!-- Market Overview Panel -->
	<div class="panel market-overview">
	<div class="panel-header">
	<h2 class="panel-title">Market Overview</h2>
	<div class="panel-actions">
	<button class="panel-action" title="Refresh">
	<i class="fas fa-sync-alt"></i>
	</button>
	<button class="panel-action" title="Configure">
	<i class="fas fa-cog"></i>
	</button>
	</div>
	</div>
	<div class="market-pairs">
	<div class="pair-card" data-pair="BTC/USDT">
	<div class="pair-info">
	<span class="pair-name">BTC/USDT</span>
	<span class="pair-price price-up">$60,342.75</span>
	</div>
	<div class="pair-stats">
	<span class="pair-change price-up">+2.45%</span>
	<span class="pair-volume">Vol: 1,200 BTC</span>
	</div>
	</div>
	<div class="pair-card" data-pair="ETH/USDT">
	<div class="pair-info">
	<span class="pair-name">ETH/USDT</span>
	<span class="pair-price price-down">$2,498.32</span>
	</div>
	<div class="pair-stats">
	<span class="pair-change price-down">-1.23%</span>
	<span class="pair-volume">Vol: 15,000 ETH</span>
	</div>
	</div>
	<div class="pair-card" data-pair="SOL/USDT">
	<div class="pair-info">
	<span class="pair-name">SOL/USDT</span>
	<span class="pair-price price-up">$142.56</span>
	</div>
	<div class="pair-stats">
	<span class="pair-change price-up">+3.78%</span>
	<span class="pair-volume">Vol: 45,000 SOL</span>
	</div>
	</div>
	<div class="pair-card" data-pair="BNB/USDT">
	<div class="pair-info">
	<span class="pair-name">BNB/USDT</span>
	<span class="pair-price price-up">$405.21</span>
	</div>
	<div class="pair-stats">
	<span class="pair-change price-up">+0.89%</span>
	<span class="pair-volume">Vol: 8,200 BNB</span>
	</div>
	</div>
	</div>
	</div>

	<!-- Portfolio Status Panel -->
	<div class="panel portfolio-status">
	<div class="panel-header">
	<h2 class="panel-title">Portfolio Status</h2>
	<div class="panel-actions">
	<button class="panel-action" title="Refresh">
	<i class="fas fa-sync-alt"></i>
	</button>
	</div>
	</div>
	<div class="portfolio-summary">
	<div>
	<span style="color: #848E9C; font-size: 14px;">Total Value</span>
	<div class="portfolio-value">$10,245.67</div>
	</div>
	<div class="portfolio-pl">
	<span style="color: #848E9C; font-size: 14px;">P/L:</span>
	<span class="pl-value price-up">+$245.67 (2.46%)</span>
	</div>
	<div class="portfolio-allocation">
	<div class="allocation-item">
	<span>BTC</span>
	<span>40% ($4,098.27)</span>
	</div>
	<div class="allocation-bar">
	<div class="bar-fill btc-fill" style="width: 40%"></div>
	</div>
	<div class="allocation-item">
	<span>ETH</span>
	<span>30% ($3,073.70)</span>
	</div>
	<div class="allocation-bar">
	<div class="bar-fill eth-fill" style="width: 30%"></div>
	</div>
	<div class="allocation-item">
	<span>SOL</span>
	<span>15% ($1,536.85)</span>
	</div>
	<div class="allocation-bar">
	<div class="bar-fill sol-fill" style="width: 15%"></div>
	</div>
	<div class="allocation-item">
	<span>BNB</span>
	<span>5% ($512.28)</span>
	</div>
	<div class="allocation-bar">
	<div class="bar-fill bnb-fill" style="width: 5%"></div>
	</div>
	<div class="allocation-item">
	<span>USDT</span>
	<span>10% ($1,024.57)</span>
	</div>
	<div class="allocation-bar">
	<div class="bar-fill usdt-fill" style="width: 10%"></div>
	</div>
	</div>
	</div>
	</div>

	<!-- Trading Signals Panel -->
	<div class="panel trading-signals">
	<div class="panel-header">
	<h2 class="panel-title">Trading Signals</h2>
	<div class="panel-actions">
	<button class="panel-action" title="Refresh">
	<i class="fas fa-sync-alt"></i>
	</button>
	</div>
	</div>
	<div class="signal-card">
	<div class="signal-item">
	<div>
	<div class="signal-pair">BTC/USDT</div>
	<div class="signal-reason">RSI(14) < 30 & MACD bullish crossover</div>
	</div>
	<div class="signal-action signal-buy">BUY</div>
	</div>
	<div class="signal-item">
	<div>
	<div class="signal-pair">ETH/USDT</div>
	<div class="signal-reason">50MA crossed above 200MA</div>
	</div>
	<div class="signal-action signal-hold">HOLD</div>
	</div>
	<div class="signal-item">
	<div>
	<div class="signal-pair">SOL/USDT</div>
	<div class="signal-reason">Bollinger Band squeeze breakout</div>
	</div>
	<div class="signal-action signal-buy">BUY</div>
	</div>
	<div class="signal-item">
	<div>
	<div class="signal-pair">BNB/USDT</div>
	<div class="signal-reason">Approaching resistance level</div>
	</div>
	<div class="signal-action signal-sell">SELL</div>
	</div>
	</div>
	</div>

	<!-- Recent Trades Panel -->
	<div class="panel recent-trades">
	<div class="panel-header">
	<h2 class="panel-title">Recent Trades</h2>
	<div class="panel-actions">
	<button class="panel-action" title="Refresh">
	<i class="fas fa-sync-alt"></i>
	</button>
	<button class="panel-action" title="Export">
	<i class="fas fa-download"></i>
	</button>
	</div>
	</div>
	<table class="trades-table">
	<thead>
	<tr>
	<th>Pair</th>
	<th>Type</th>
	<th>Price</th>
	<th>Amount</th>
	<th>Value</th>
	<th>Time</th>
	<th>Status</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>BTC/USDT</td>
	<td><span class="trade-type type-buy">BUY</span></td>
	<td>$59,800.00</td>
	<td>0.1 BTC</td>
	<td>$5,980.00</td>
	<td>10:00:23</td>
	<td><i class="fas fa-check-circle" style="color: var(--positive);"></i></td>
	</tr>
	<tr>
	<td>ETH/USDT</td>
	<td><span class="trade-type type-sell">SELL</span></td>
	<td>$2,510.00</td>
	<td>1 ETH</td>
	<td>$2,510.00</td>
	<td>10:05:47</td>
	<td><i class="fas fa-check-circle" style="color: var(--positive);"></i></td>
	</tr>
	<tr>
	<td>SOL/USDT</td>
	<td><span class="trade-type type-buy">BUY</span></td>
	<td>$138.50</td>
	<td>20 SOL</td>
	<td>$2,770.00</td>
	<td>09:30:12</td>
	<td><i class="fas fa-check-circle" style="color: var(--positive);"></i></td>
	</tr>
	<tr>
	<td>BNB/USDT</td>
	<td><span class="trade-type type-sell">SELL</span></td>
	<td>$410.00</td>
	<td>5 BNB</td>
	<td>$2,050.00</td>
	<td>08:45:33</td>
	<td><i class="fas fa-check-circle" style="color: var(--positive);"></i></td>
	</tr>
	<tr>
	<td>BTC/USDT</td>
	<td><span class="trade-type type-buy">BUY</span></td>
	<td>$60,100.00</td>
	<td>0.05 BTC</td>
	<td>$3,005.00</td>
	<td>11:20:15</td>
	<td><i class="fas fa-spinner fa-spin" style="color: var(--primary-text);"></i></td>
	</tr>
	</tbody>
	</table>
	</div>

	<!-- Performance Metrics Panel -->
	<div class="panel performance-metrics">
	<div class="panel-header">
	<h2 class="panel-title">Performance Metrics</h2>
	<div class="panel-actions">
	<button class="panel-action" title="Time Period">
	<i class="fas fa-calendar-alt"></i> 24h
	</button>
	</div>
	</div>
	<div class="metrics-grid">
	<div class="metric-card">
	<div class="metric-value">1.85</div>
	<div class="metric-label">Sharpe Ratio</div>
	</div>
	<div class="metric-card">
	<div class="metric-value">62%</div>
	<div class="metric-label">Win Rate</div>
	</div>
	<div class="metric-card">
	<div class="metric-value">1.8:1</div>
	<div class="metric-label">Win/Loss Ratio</div>
	</div>
	<div class="metric-card">
	<div class="metric-value">-3.2%</div>
	<div class="metric-label">Max Drawdown</div>
	</div>
	<div class="metric-card">
	<div class="metric-value">24</div>
	<div class="metric-label">Total Trades</div>
	</div>
	<div class="metric-card">
	<div class="metric-value">5.2%</div>
	<div class="metric-label">Avg Profit per Trade</div>
	</div>
	</div>
	<div class="chart-container">
	<div class="chart-placeholder">
	<i class="fas fa-chart-line" style="font-size: 48px;"></i>
	<span>Performance Chart</span>
	</div>
	</div>
	</div>

	<!-- Strategy Configuration Panel -->
	<div class="panel strategy-config">
	<div class="panel-header">
	<h2 class="panel-title">Strategy Configuration</h2>
	<div class="panel-actions">
	<button class="panel-action" title="Save">
	<i class="fas fa-save"></i>
	</button>
	</div>
	</div>
	<div class="strategy-form">
	<div class="form-row">
	<div class="form-group">
	<label class="form-label">Strategy Type</label>
	<select class="form-control">
	<option>Trend Following</option>
	<option>Mean Reversion</option>
	<option>Breakout</option>
	<option>Arbitrage</option>
	<option>Market Making</option>
	</select>
	</div>
	<div class="form-group">
	<label class="form-label">Risk Level</label>
	<select class="form-control">
	<option>Low</option>
	<option selected>Medium</option>
	<option>High</option>
	<option>Aggressive</option>
	</select>
	</div>
	</div>
	<div class="form-row">
	<div class="form-group">
	<label class="form-label">Max Position Size (%)</label>
	<input type="number" class="form-control" value="10">
	</div>
	<div class="form-group">
	<label class="form-label">Max Daily Loss (%)</label>
	<input type="number" class="form-control" value="5">
	</div>
	</div>
	<div class="form-row">
	<div class="form-group">
	<label class="form-label">Stop Loss (%)</label>
	<input type="number" class="form-control" value="2">
	</div>
	<div class="form-group">
	<label class="form-label">Take Profit (%)</label>
	<input type="number" class="form-control" value="5">
	</div>
	</div>
	<div class="form-group">
	<label class="form-label">Trading Pairs</label>
	<select class="form-control" multiple style="height: 100px;">
	<option selected>BTC/USDT</option>
	<option selected>ETH/USDT</option>
	<option selected>SOL/USDT</option>
	<option selected>BNB/USDT</option>
	<option>ADA/USDT</option>
	<option>XRP/USDT</option>
	<option>DOT/USDT</option>
	<option>AVAX/USDT</option>
	</select>
	</div>
	<div class="form-actions">
	<button class="control-btn btn-secondary">
	<i class="fas fa-times"></i> Cancel
	</button>
	<button class="control-btn btn-primary">
	<i class="fas fa-save"></i> Save Changes
	</button>
	</div>
	</div>
	</div>

	<!-- Control Buttons -->
	<div class="controls">
	<button class="control-btn btn-primary" id="start-trading">
	<i class="fas fa-play"></i> Start Trading
	</button>
	<button class="control-btn btn-danger" id="stop-trading">
	<i class="fas fa-stop"></i> Stop Trading
	</button>
	<button class="control-btn btn-secondary" id="adjust-strategy">
	<i class="fas fa-cog"></i> Adjust Strategy
	</button>
	<button class="control-btn btn-success" id="rebalance-portfolio">
	<i class="fas fa-sync-alt"></i> Rebalance Portfolio
	</button>
	</div>

	<!-- Agent Message -->
	<div class="agent-message">
	<i class="fas fa-comment-dots message-icon"></i>
	<div class="message-content">
	<strong>QuantBot:</strong> I've placed a limit buy order for 0.1 BTC at $59,800 based on RSI(14) < 30 and MACD bullish crossover. Stop-loss set at $58,604 (2% below entry) and take-profit at $62,790 (5% above).
	</div>
	<div class="message-time">11:23 AM</div>
	</div>
	</div>
	</div>

	<!-- Pair Detail Modal -->
	<div class="modal" id="pair-modal">
	<div class="modal-content">
	<div class="modal-header">
	<h2 class="modal-title">BTC/USDT Details</h2>
	<button class="modal-close">×</button>
	</div>
	<div class="modal-body">
	<div class="pair-details">
	<div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
	<div>
	<div style="font-size: 12px; color: #848E9C;">Current Price</div>
	<div style="font-size: 28px; font-weight: bold; color: var(--primary-text);">$60,342.75</div>
	<div style="font-size: 16px; color: var(--positive);">+2.45% (24h)</div>
	</div>
	<div style="text-align: right;">
	<div style="font-size: 12px; color: #848E9C;">24h Volume</div>
	<div style="font-size: 16px; font-weight: bold;">1,200 BTC</div>
	<div style="font-size: 12px; color: #848E9C;">$72.4M</div>
	</div>
	</div>

	<div class="chart-container">
	<div class="chart-placeholder">
	<div class="spinner"></div>
	<span>Loading chart data...</span>
	</div>
	</div>

	<div style="margin-top: 20px;">
	<h3 style="color: var(--primary-text); margin-bottom: 10px;">Technical Indicators</h3>
	<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
	<div style="background-color: var(--dark-accent); padding: 10px; border-radius: 4px;">
	<div style="font-size: 12px; color: #848E9C;">RSI (14)</div>
	<div style="font-size: 16px; font-weight: bold; color: var(--negative);">28.5</div>
	</div>
	<div style="background-color: var(--dark-accent); padding: 10px; border-radius: 4px;">
	<div style="font-size: 12px; color: #848E9C;">MACD</div>
	<div style="font-size: 16px; font-weight: bold; color: var(--positive);">Bullish</div>
	</div>
	<div style="background-color: var(--dark-accent); padding: 10px; border-radius: 4px;">
	<div style="font-size: 12px; color: #848E9C;">50/200 MA</div>
	<div style="font-size: 16px; font-weight: bold; color: var(--positive);">Bullish</div>
	</div>
	<div style="background-color: var(--dark-accent); padding: 10px; border-radius: 4px;">
	<div style="font-size: 12px; color: #848E9C;">Support</div>
	<div style="font-size: 16px; font-weight: bold;">$58,200</div>
	</div>
	<div style="background-color: var(--dark-accent); padding: 10px; border-radius: 4px;">
	<div style="font-size: 12px; color: #848E9C;">Resistance</div>
	<div style="font-size: 16px; font-weight: bold;">$62,500</div>
	</div>
	<div style="background-color: var(--dark-accent); padding: 10px; border-radius: 4px;">
	<div style="font-size: 12px; color: #848E9C;">Volatility</div>
	<div style="font-size: 16px; font-weight: bold;">High</div>
	</div>
	</div>
	</div>

	<div style="margin-top: 20px;">
	<h3 style="color: var(--primary-text); margin-bottom: 10px;">Quick Trade</h3>
	<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
	<div>
	<label style="display: block; font-size: 12px; color: #848E9C; margin-bottom: 5px;">Amount (BTC)</label>
	<input type="text" style="width: 100%; padding: 10px; background-color: var(--dark-accent); border: 1px solid var(--border-color); border-radius: 4px; color: var(--secondary-text);" placeholder="0.00">
	</div>
	<div>
	<label style="display: block; font-size: 12px; color: #848E9C; margin-bottom: 5px;">Price (USDT)</label>
	<input type="text" style="width: 100%; padding: 10px; background-color: var(--dark-accent); border: 1px solid var(--border-color); border-radius: 4px; color: var(--secondary-text);" placeholder="Market Price">
	</div>
	</div>
	<div style="display: flex; gap: 10px; margin-top: 15px;">
	<button style="flex: 1; padding: 12px; background-color: rgba(14, 203, 129, 0.1); color: var(--positive); border: 1px solid var(--positive); border-radius: 4px; font-weight: bold; cursor: pointer;">
	Buy BTC
	</button>
	<button style="flex: 1; padding: 12px; background-color: rgba(246, 70, 93, 0.1); color: var(--negative); border: 1px solid var(--negative); border-radius: 4px; font-weight: bold; cursor: pointer;">
	Sell BTC
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Scripts -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
	<script>
	// Initialize Toastr
	toastr.options = {
	positionClass: "toast-bottom-right",
	progressBar: true,
	timeOut: 5000,
	extendedTimeOut: 2000
	};

	// Trading state
	const tradingState = {
	active: true,
	strategies: {
	current: 'Trend Following',
	riskLevel: 'Medium',
	maxPositionSize: 10,
	maxDailyLoss: 5,
	stopLoss: 2,
	takeProfit: 5,
	pairs: ['BTC/USDT', 'ETH/USDT', 'SOL/USDT', 'BNB/USDT']
	},
	portfolio: {
	totalValue: 10245.67,
	initialValue: 10000,
	allocations: {
	btc: { percent: 40, value: 4098.27 },
	eth: { percent: 30, value: 3073.70 },
	sol: { percent: 15, value: 1536.85 },
	bnb: { percent: 5, value: 512.28 },
	usdt: { percent: 10, value: 1024.57 }
	}
	},
	prices: {
	btc: 60342.75,
	eth: 2498.32,
	sol: 142.56,
	bnb: 405.21
	}
	};

	// Simulate WebSocket connection
	function connectWebSocket() {
	console.log('Connecting to WebSocket server...');
	// In a real app, this would connect to your WebSocket endpoint
	setTimeout(() => {
	console.log('WebSocket connection established');
	toastr.success('Real-time data connection established');
	}, 1500);
	}

	// Initialize the application
	function initApp() {
	connectWebSocket();
	updateAllData();
	setupEventListeners();
	}

	// Update all dashboard data
	function updateAllData() {
	updatePrices();
	updatePortfolioValue();
	updatePerformanceMetrics();
	}

	// Simulate live price updates
	function updatePrices() {
	const pairs = [
	{ selector: '.pair-card:nth-child(1)', symbol: 'btc', current: tradingState.prices.btc },
	{ selector: '.pair-card:nth-child(2)', symbol: 'eth', current: tradingState.prices.eth },
	{ selector: '.pair-card:nth-child(3)', symbol: 'sol', current: tradingState.prices.sol },
	{ selector: '.pair-card:nth-child(4)', symbol: 'bnb', current: tradingState.prices.bnb }
	];

	pairs.forEach(pair => {
	const priceElement = document.querySelector(`${pair.selector} .pair-price`);
	const changeElement = document.querySelector(`${pair.selector} .pair-change`);

	// Generate realistic price changes based on volatility
	let changePercent;
	if (pair.symbol === 'btc') {
	changePercent = (Math.random() * 0.5 - 0.25); // BTC is less volatile
	} else if (pair.symbol === 'eth') {
	changePercent = (Math.random() * 1 - 0.5);
	} else {
	changePercent = (Math.random() * 2 - 1); // Altcoins are more volatile
	}

	const changeValue = pair.current * (changePercent / 100);
	const newPrice = pair.current + changeValue;

	// Update trading state
	tradingState.prices[pair.symbol] = newPrice;

	// Update UI
	priceElement.textContent = `$${newPrice.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;

	if (changePercent > 0) {
	priceElement.classList.add('price-up');
	priceElement.classList.remove('price-down');
	changeElement.textContent = `+${changePercent.toFixed(2)}%`;
	changeElement.classList.add('price-up');
	changeElement.classList.remove('price-down');
	} else if (changePercent < 0) {
	priceElement.classList.add('price-down');
	priceElement.classList.remove('price-up');
	changeElement.textContent = `${changePercent.toFixed(2)}%`;
	changeElement.classList.add('price-down');
	changeElement.classList.remove('price-up');
	}
	});
	}

	// Update portfolio value based on current prices
	function updatePortfolioValue() {
	const btcValue = 0.0679 * tradingState.prices.btc; // 0.0679 BTC
	const ethValue = 1.23 * tradingState.prices.eth; // 1.23 ETH
	const solValue = 20 * tradingState.prices.sol; // 20 SOL
	const bnbValue = 5 * tradingState.prices.bnb; // 5 BNB
	const usdtValue = tradingState.portfolio.allocations.usdt.value;

	const totalValue = btcValue + ethValue + solValue + bnbValue + usdtValue;
	tradingState.portfolio.totalValue = totalValue;

	const plValue = totalValue - tradingState.portfolio.initialValue;
	const plPercent = (plValue / tradingState.portfolio.initialValue * 100);

	// Update allocations
	tradingState.portfolio.allocations.btc.value = btcValue;
	tradingState.portfolio.allocations.eth.value = ethValue;
	tradingState.portfolio.allocations.sol.value = solValue;
	tradingState.portfolio.allocations.bnb.value = bnbValue;

	tradingState.portfolio.allocations.btc.percent = (btcValue / totalValue * 100);
	tradingState.portfolio.allocations.eth.percent = (ethValue / totalValue * 100);
	tradingState.portfolio.allocations.sol.percent = (solValue / totalValue * 100);
	tradingState.portfolio.allocations.bnb.percent = (bnbValue / totalValue * 100);
	tradingState.portfolio.allocations.usdt.percent = (usdtValue / totalValue * 100);

	// Update UI
	document.querySelector('.portfolio-value').textContent = `$${totalValue.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;

	const plElement = document.querySelector('.pl-value');
	if (plValue >= 0) {
	plElement.textContent = `+$${Math.abs(plValue).toFixed(2)} (+${plPercent.toFixed(2)}%)`;
	plElement.classList.add('price-up');
	plElement.classList.remove('price-down');
	} else {
	plElement.textContent = `-$${Math.abs(plValue).toFixed(2)} (-${plPercent.toFixed(2)}%)`;
	plElement.classList.add('price-down');
	plElement.classList.remove('price-up');
	}

	// Update allocation bars and percentages
	const allocations = [
	{ selector: '.allocation-item:nth-child(1)', bar: '.btc-fill', asset: 'btc' },
	{ selector: '.allocation-item:nth-child(2)', bar: '.eth-fill', asset: 'eth' },
	{ selector: '.allocation-item:nth-child(3)', bar: '.sol-fill', asset: 'sol' },
	{ selector: '.allocation-item:nth-child(4)', bar: '.bnb-fill', asset: 'bnb' },
	{ selector: '.allocation-item:nth-child(5)', bar: '.usdt-fill', asset: 'usdt' }
	];

	allocations.forEach(allocation => {
	const asset = tradingState.portfolio.allocations[allocation.asset];
	document.querySelector(`${allocation.selector} span:nth-child(2)`).textContent =
	`${asset.percent.toFixed(1)}% ($${asset.value.toFixed(2)})`;
	document.querySelector(allocation.bar).style.width = `${asset.percent}%`;
	});
	}

	// Update performance metrics with realistic changes
	function updatePerformanceMetrics() {
	const metrics = [
	{ selector: '.metric-card:nth-child(1) .metric-value', value: 1.85, volatility: 0.1 },
	{ selector: '.metric-card:nth-child(2) .metric-value', value: 62, volatility: 1, suffix: '%' },
	{ selector: '.metric-card:nth-child(3) .metric-value', value: 1.8, volatility: 0.05, suffix: ':1' },
	{ selector: '.metric-card:nth-child(4) .metric-value', value: -3.2, volatility: 0.2, suffix: '%' },
	{ selector: '.metric-card:nth-child(5) .metric-value', value: 24, volatility: 0.5 },
	{ selector: '.metric-card:nth-child(6) .metric-value', value: 5.2, volatility: 0.2, suffix: '%' }
	];

	metrics.forEach(metric => {
	// Add small random change to simulate realistic metric fluctuations
	const change = (Math.random() * 2 - 1) * metric.volatility;
	const newValue = metric.value + change;
	const element = document.querySelector(metric.selector);

	if (metric.suffix) {
	element.textContent = `${newValue.toFixed(metric.suffix === ':1' ? 1 : 2)}${metric.suffix}`;
	} else {
	element.textContent = newValue.toFixed(2);
	}
	});
	}

	// Show agent message with timestamp
	function showAgentMessage(message) {
	const messageElement = document.querySelector('.agent-message .message-content');
	const timeElement = document.querySelector('.message-time');

	messageElement.innerHTML = `<strong>QuantBot:</strong> ${message}`;

	const now = new Date();
	const hours = now.getHours() % 12 \|\| 12;
	const minutes = now.getMinutes().toString().padStart(2, '0');
	const ampm = now.getHours() >= 12 ? 'PM' : 'AM';

	timeElement.textContent = `${hours}:${minutes} ${ampm}`;

	// Flash animation
	document.querySelector('.agent-message').style.animation = 'none';
	setTimeout(() => {
	document.querySelector('.agent-message').style.animation = 'flash 1s';
	}, 10);

	// Also show as toast notification
	toastr.info(message, 'QuantBot Notification');
	}

	// Toggle trading state
	function toggleTradingState(active) {
	tradingState.active = active;
	const statusIndicator = document.querySelector('.status-indicator span');
	const statusDot = document.querySelector('.status-dot');

	if (active) {
	statusIndicator.textContent = 'LIVE TRADING ACTIVE';
	statusDot.style.backgroundColor = 'var(--positive)';
	toastr.success('Trading session started');
	} else {
	statusIndicator.textContent = 'TRADING PAUSED';
	statusDot.style.backgroundColor = 'var(--negative)';
	toastr.warning('Trading session paused');
	}
	}

	// Setup event listeners
	function setupEventListeners() {
	// Control buttons
	document.getElementById('start-trading').addEventListener('click', function() {
	toggleTradingState(true);
	showAgentMessage("Starting trading session... All strategies are now active and monitoring the market.");
	});

	document.getElementById('stop-trading').addEventListener('click', function() {
	toggleTradingState(false);
	showAgentMessage("Trading session stopped. No new positions will
	</html>