Spaces:

Akademics
/

https-huggingface-co-spaces-akademics

Running

App Files Files Community

https-huggingface-co-spaces-akademics / index.html

Akademics

I cant upload unto the AI chart analysis. Please fix - Follow Up Deployment

534b4d0 verified 11 months ago

raw

history blame contribute delete

99.1 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>QuantumTrade AI - Advanced Trading Scanner</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<script>
	tailwind.config = {
	theme: {
	extend: {
	colors: {
	primary: '#1e40af',
	secondary: '#1e3a8a',
	accent: '#3b82f6',
	dark: '#0f172a',
	light: '#f8fafc',
	success: '#10b981',
	danger: '#ef4444',
	warning: '#f59e0b',
	},
	screens: {
	'xs': '475px',
	}
	}
	}
	}
	</script>
	<style>
	.chart-container {
	height: 400px;
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	border-radius: 0.5rem;
	}

	.signal-buy {
	animation: pulseBuy 2s infinite;
	}

	.signal-sell {
	animation: pulseSell 2s infinite;
	}

	@keyframes pulseBuy {
	0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
	70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
	100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
	}

	@keyframes pulseSell {
	0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
	70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
	100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
	}

	.scrollbar-hide::-webkit-scrollbar {
	display: none;
	}

	.scrollbar-hide {
	-ms-overflow-style: none;
	scrollbar-width: none;
	}

	.tradingview-widget-container {
	height: 100%;
	width: 100%;
	border-radius: 0.5rem;
	}

	.optimizer-chart {
	height: 200px;
	}

	.bot-status-active {
	animation: pulseStatus 1.5s infinite;
	}

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

	/* Enhanced Button Styles */
	.btn {
	transition: all 0.3s ease;
	transform: translateY(0);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	}

	.btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	}

	.btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
	}

	.btn-primary {
	background-color: #1e40af;
	}

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

	.btn-success {
	background-color: #10b981;
	}

	.btn-success:hover {
	background-color: #0d9f6e;
	}

	.btn-danger {
	background-color: #ef4444;
	}

	.btn-danger:hover {
	background-color: #dc2626;
	}

	.btn-accent {
	background-color: #3b82f6;
	}

	.btn-accent:hover {
	background-color: #2563eb;
	}

	/* Responsive adjustments */
	@media (max-width: 768px) {
	.btn-text {
	display: none;
	}

	.btn-icon {
	margin-right: 0 !important;
	}

	.btn-sm {
	padding: 0.5rem;
	min-width: auto;
	}

	.chart-container {
	height: 300px;
	}
	}

	/* Button focus states */
	.btn:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
	}
	</style>
	</head>
	<body class="bg-gray-900 text-gray-100">
	<div class="min-h-screen flex flex-col">
	<!-- Header -->
	<header class="bg-dark py-4 px-6 shadow-lg">
	<div class="flex justify-between items-center">
	<div class="flex items-center space-x-4">
	<div class="bg-accent p-2 rounded-lg">
	<i class="fas fa-robot text-2xl"></i>
	</div>
	<h1 class="text-2xl font-bold">QuantumTrade AI</h1>
	</div>
	<div class="flex items-center space-x-2 sm:space-x-6">
	<div class="relative group">
	<button id="connect-exchange-btn" class="btn btn-primary flex items-center space-x-2 px-3 py-2 rounded-lg transition min-w-[150px]">
	<span class="btn-text">Connect Exchange</span>
	<i class="fas fa-exchange-alt btn-icon"></i>
	</button>
	<div id="exchange-connect-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
	<div class="bg-gray-800 rounded-lg p-6 w-96">
	<h3 class="text-xl font-bold mb-4">Connect to Exchange</h3>
	<div class="space-y-4">
	<div>
	<label class="block text-sm mb-1">Exchange</label>
	<select id="exchange-select" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2">
	<option value="binance">Binance</option>
	<option value="coinbase">Coinbase</option>
	<option value="kraken">Kraken</option>
	<option value="metatrader5">MetaTrader 5</option>
	</select>
	</div>
	<div>
	<label class="block text-sm mb-1">API Key</label>
	<input type="text" id="api-key" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2" placeholder="Enter API Key">
	</div>
	<div>
	<label class="block text-sm mb-1">API Secret</label>
	<input type="password" id="api-secret" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2" placeholder="Enter API Secret">
	</div>
	<div id="mt5-fields" class="hidden space-y-4">
	<div>
	<label class="block text-sm mb-1">MT5 Server</label>
	<input type="text" id="mt5-server" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2" placeholder="Enter MT5 Server">
	</div>
	<div>
	<label class="block text-sm mb-1">MT5 Login</label>
	<input type="text" id="mt5-login" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2" placeholder="Enter MT5 Login">
	</div>
	<div>
	<label class="block text-sm mb-1">MT5 Password</label>
	<input type="password" id="mt5-password" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2" placeholder="Enter MT5 Password">
	</div>
	</div>
	<div class="flex space-x-3">
	<button id="exchange-connect-submit" class="btn btn-primary flex-1 py-2">Connect</button>
	<button id="exchange-connect-cancel" class="btn btn-danger flex-1 py-2">Cancel</button>
	</div>
	</div>
	</div>
	</div>
	<div class="absolute right-0 mt-2 w-64 bg-gray-800 rounded-lg shadow-xl z-40 hidden group-hover:block">
	<a href="#" class="block px-4 py-2 hover:bg-gray-700 rounded-t-lg"><i class="fab fa-bitcoin mr-2"></i> Binance</a>
	<a href="#" class="block px-4 py-2 hover:bg-gray-700"><i class="fab fa-ethereum mr-2"></i> Coinbase</a>
	<a href="#" class="block px-4 py-2 hover:bg-gray-700"><i class="fas fa-chart-line mr-2"></i> Kraken</a>
	<a href="#" class="block px-4 py-2 hover:bg-gray-700"><i class="fas fa-exchange-alt mr-2"></i> FTX</a>
	<a href="#" class="block px-4 py-2 hover:bg-gray-700"><i class="fas fa-university mr-2"></i> Interactive Brokers</a>
	<a href="#" class="block px-4 py-2 hover:bg-gray-700"><i class="fas fa-landmark mr-2"></i> TD Ameritrade</a>
	<a href="#" class="block px-4 py-2 hover:bg-gray-700"><i class="fab fa-cc-visa mr-2"></i> eToro</a>
	<a href="#" class="block px-4 py-2 hover:bg-gray-700 rounded-b-lg"><i class="fas fa-globe mr-2"></i> MetaTrader 5</a>
	</div>
	</div>
	<div class="flex items-center space-x-2">
	<div class="h-10 w-10 rounded-full bg-accent flex items-center justify-center">
	<i class="fas fa-user"></i>
	</div>
	<span class="hidden sm:inline">Trader</span>
	</div>
	</div>
	</div>
	</header>

	<!-- Main Content -->
	<main class="flex-1 grid grid-cols-1 lg:grid-cols-4 gap-6 p-4 sm:p-6">
	<!-- Left Sidebar -->
	<div class="lg:col-span-1 space-y-6">
	<!-- Asset Class Selector -->
	<div class="bg-gray-800 rounded-xl p-4 shadow-lg">
	<h2 class="text-lg font-semibold mb-4 flex items-center">
	<i class="fas fa-chart-pie mr-2"></i> Asset Classes
	</h2>
	<div class="grid grid-cols-2 gap-2">
	<button class="asset-btn btn btn-primary active py-2 px-2 sm:px-4 rounded-lg flex items-center justify-center">
	<i class="fab fa-bitcoin mr-1 sm:mr-2"></i>
	<span class="hidden xs:inline">Crypto</span>
	</button>
	<button class="asset-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 sm:px-4 rounded-lg flex items-center justify-center">
	<i class="fas fa-chart-line mr-1 sm:mr-2"></i>
	<span class="hidden xs:inline">Stocks</span>
	</button>
	<button class="asset-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 sm:px-4 rounded-lg flex items-center justify-center">
	<i class="fas fa-dollar-sign mr-1 sm:mr-2"></i>
	<span class="hidden xs:inline">Forex</span>
	</button>
	<button class="asset-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 sm:px-4 rounded-lg flex items-center justify-center">
	<i class="fas fa-clock mr-1 sm:mr-2"></i>
	<span class="hidden xs:inline">Futures</span>
	</button>
	<button class="asset-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 sm:px-4 rounded-lg flex items-center justify-center">
	<i class="fas fa-cog mr-1 sm:mr-2"></i>
	<span class="hidden xs:inline">Options</span>
	</button>
	<button class="asset-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 sm:px-4 rounded-lg flex items-center justify-center">
	<i class="fas fa-globe mr-1 sm:mr-2"></i>
	<span class="hidden xs:inline">All</span>
	</button>
	</div>
	</div>

	<!-- Timeframe Selector -->
	<div class="bg-gray-800 rounded-xl p-4 shadow-lg">
	<h2 class="text-lg font-semibold mb-4 flex items-center">
	<i class="fas fa-clock mr-2"></i> Timeframes
	</h2>
	<div class="grid grid-cols-3 gap-2">
	<button class="timeframe-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 rounded-lg text-sm">1m</button>
	<button class="timeframe-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 rounded-lg text-sm">5m</button>
	<button class="timeframe-btn btn btn-primary active py-2 px-2 rounded-lg text-sm">15m</button>
	<button class="timeframe-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 rounded-lg text-sm">1h</button>
	<button class="timeframe-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 rounded-lg text-sm">4h</button>
	<button class="timeframe-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 rounded-lg text-sm">1d</button>
	<button class="timeframe-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 rounded-lg text-sm">1w</button>
	<button class="timeframe-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 rounded-lg text-sm">1M</button>
	<button class="timeframe-btn btn bg-gray-700 hover:bg-gray-600 py-2 px-2 rounded-lg text-sm">Custom</button>
	</div>
	</div>

	<!-- Trading Style Selector -->
	<div class="bg-gray-800 rounded-xl p-4 shadow-lg">
	<h2 class="text-lg font-semibold mb-4 flex items-center">
	<i class="fas fa-running mr-2"></i> Trading Style
	</h2>
	<div class="space-y-2">
	<button class="style-btn btn w-full bg-gray-700 hover:bg-gray-600 py-2 px-2 sm:px-4 rounded-lg flex items-center justify-between">
	<span class="hidden sm:inline">Scalping</span>
	<i class="fas fa-bolt"></i>
	</button>
	<button class="style-btn btn w-full bg-gray-700 hover:bg-gray-600 py-2 px-2 sm:px-4 rounded-lg flex items-center justify-between">
	<span class="hidden sm:inline">Day Trading</span>
	<i class="fas fa-sun"></i>
	</button>
	<button class="style-btn btn btn-primary active w-full py-2 px-2 sm:px-4 rounded-lg flex items-center justify-between">
	<span class="hidden sm:inline">Swing Trading</span>
	<i class="fas fa-wave-square"></i>
	</button>
	<button class="style-btn btn w-full bg-gray-700 hover:bg-gray-600 py-2 px-2 sm:px-4 rounded-lg flex items-center justify-between">
	<span class="hidden sm:inline">Investing</span>
	<i class="fas fa-piggy-bank"></i>
	</button>
	</div>
	</div>

	<!-- Strategy Configuration -->
	<div class="bg-gray-800 rounded-xl p-4 shadow-lg">
	<h2 class="text-lg font-semibold mb-4 flex items-center">
	<i class="fas fa-cogs mr-2"></i> Quantum Config
	</h2>
	<div class="space-y-4">
	<div>
	<div class="flex justify-between items-center mb-1">
	<label class="block text-sm">Signal Strength</label>
	<span id="signal-strength-value" class="text-sm font-bold">87%</span>
	</div>
	<input type="range" id="signal-strength" min="0" max="100" value="87" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-accent">
	</div>
	<div>
	<div class="flex justify-between items-center mb-1">
	<label class="block text-sm">AI Aggressiveness</label>
	<span id="aggressiveness-value" class="text-sm font-bold">Medium</span>
	</div>
	<div class="grid grid-cols-4 gap-1">
	<button class="aggressiveness-btn btn btn-xs bg-danger hover:bg-red-700 py-1" data-value="low">Low</button>
	<button class="aggressiveness-btn btn btn-xs bg-primary hover:bg-blue-700 active py-1" data-value="medium">Medium</button>
	<button class="aggressiveness-btn btn btn-xs bg-warning hover:bg-yellow-700 py-1" data-value="high">High</button>
	<button class="aggressiveness-btn btn btn-xs bg-success hover:bg-green-700 py-1" data-value="extreme">Quantum</button>
	</div>
	</div>
	<div>
	<div class="flex justify-between items-center mb-1">
	<label class="block text-sm">Model Selection</label>
	<button class="btn btn-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-xs">
	<i class="fas fa-random"></i>
	</button>
	</div>
	<div class="flex space-x-2 overflow-x-auto pb-2 scrollbar-hide">
	<button class="model-btn btn btn-xs bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg flex-shrink-0">
	<i class="fas fa-brain mr-1"></i>
	<span>QuantumNet</span>
	</button>
	<button class="model-btn btn btn-xs bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg flex-shrink-0">
	<i class="fas fa-network-wired mr-1"></i>
	<span>NeuroLink</span>
	</button>
	<button class="model-btn btn btn-xs bg-primary hover:bg-blue-700 px-3 py-1 rounded-lg flex-shrink-0">
	<i class="fas fa-atom mr-1"></i>
	<span>DeepQ</span>
	</button>
	</div>
	</div>
	<div class="flex space-x-2">
	<button class="btn btn-accent flex-1 py-2 px-4 rounded-lg flex items-center justify-center">
	<i class="fas fa-bolt mr-2"></i>
	<span>Optimize Now</span>
	</button>
	<button class="btn btn-success flex-1 py-2 px-4 rounded-lg flex items-center justify-center">
	<i class="fas fa-save mr-2"></i>
	<span>Save</span>
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Main Chart Area -->
	<div class="lg:col-span-2 space-y-6">
	<!-- Chart Header -->
	<div class="bg-gray-800 rounded-xl p-4 shadow-lg flex flex-col sm:flex-row items-center justify-between gap-2">
	<div class="flex items-center space-x-4">
	<div class="flex items-center">
	<img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC" class="h-8 w-8 mr-2">
	<span class="font-bold text-xl">BTC/USDT</span>
	</div>
	<div class="flex items-center text-success">
	<span class="font-bold text-2xl ml-1" id="current-price">42,876.45</span>
	<span class="text-sm ml-2 px-2 py-0.5 rounded" id="price-change">+2.34%</span>
	</div>
	</div>
	<div class="flex items-center space-x-2 sm:space-x-4">
	<div class="flex items-center space-x-2">
	<span class="hidden sm:inline">Volume:</span>
	<span class="font-bold" id="current-volume">24.5K</span>
	</div>
	<div class="flex space-x-2">
	<button class="btn btn-sm bg-gray-700 hover:bg-gray-600 p-2 rounded-lg">
	<i class="fas fa-indicator"></i>
	</button>
	<button class="btn btn-sm bg-gray-700 hover:bg-gray-600 p-2 rounded-lg">
	<i class="fas fa-drawing"></i>
	</button>
	<button class="btn btn-sm bg-gray-700 hover:bg-gray-600 p-2 rounded-lg">
	<i class="fas fa-cog"></i>
	</button>
	</div>
	</div>
	</div>

	<!-- Main Chart -->
	<div class="chart-container p-4 shadow-lg">
	<!-- TradingView Widget -->
	<div class="tradingview-widget-container">
	<div class="tradingview-widget-container__widget"></div>
	<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js" async>
	{
	"autosize": true,
	"symbol": "BINANCE:BTCUSDT",
	"interval": "15",
	"timezone": "Etc/UTC",
	"theme": "dark",
	"style": "1",
	"locale": "en",
	"enable_publishing": false,
	"hide_top_toolbar": true,
	"allow_symbol_change": true,
	"studies": [
	"BB@tv-basicstudies",
	"MAExp@tv-basicstudies",
	"RSI@tv-basicstudies"
	],
	"support_host": "https://www.tradingview.com"
	}
	</script>
	</div>
	</div>

	<!-- Trading Bot Controls -->
	<div class="bg-gray-800 rounded-xl p-4 shadow-lg">
	<h2 class="text-lg font-semibold mb-4 flex items-center">
	<i class="fas fa-robot mr-2"></i> Auto Trading Bot
	</h2>
	<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
	<div class="p-4 rounded-lg bg-gray-700">
	<div class="flex items-center justify-between mb-2">
	<span class="font-bold">Bot Status</span>
	<span id="bot-status" class="px-2 py-1 rounded-full text-xs bg-danger">OFFLINE</span>
	</div>
	<div class="flex justify-between items-center mt-4">
	<button id="start-bot" class="btn btn-success hover:bg-green-600 px-3 sm:px-4 py-2 rounded-lg flex items-center">
	<i class="fas fa-play mr-1 sm:mr-2"></i>
	<span class="hidden sm:inline">Start</span>
	</button>
	<button id="stop-bot" class="btn btn-danger hover:bg-red-600 px-3 sm:px-4 py-2 rounded-lg flex items-center">
	<i class="fas fa-stop mr-1 sm:mr-2"></i>
	<span class="hidden sm:inline">Stop</span>
	</button>
	</div>
	</div>
	<div class="p-4 rounded-lg bg-gray-700">
	<div class="flex items-center justify-between mb-2">
	<span class="font-bold">Trading Mode</span>
	<i class="fas fa-cog text-accent"></i>
	</div>
	<select id="trading-mode" class="w-full mt-4 bg-gray-700 border border-gray-600 rounded-lg px-3 py-2">
	<option>Paper Trading</option>
	<option selected>Live Trading</option>
	<option>Backtesting</option>
	</select>
	</div>
	<div class="p-4 rounded-lg bg-gray-700">
	<div class="flex items-center justify-between mb-2">
	<span class="font-bold">Today's Stats</span>
	<i class="fas fa-chart-bar text-accent"></i>
	</div>
	<div class="grid grid-cols-2 gap-2 mt-2 text-sm">
	<div>Trades:</div>
	<div class="font-bold" id="today-trades">12</div>
	<div>Profit:</div>
	<div class="font-bold text-success" id="today-profit">+3.2%</div>
	<div>Win Rate:</div>
	<div class="font-bold" id="today-winrate">75%</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Signal Details -->
	<div class="bg-gray-800 rounded-xl p-4 shadow-lg">
	<h2 class="text-lg font-semibold mb-4 flex items-center">
	<i class="fas fa-bell mr-2"></i> Current Signal Details
	</h2>
	<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
	<div class="signal-buy p-4 rounded-lg bg-gray-700">
	<div class="flex items-center justify-between mb-2">
	<span class="font-bold">BUY Signal</span>
	<span class="text-success font-bold">87% Confidence</span>
	</div>
	<div class="grid grid-cols-2 gap-2 text-sm">
	<div>Entry Price:</div>
	<div class="font-bold">$42,120.00</div>
	<div>Stop Loss:</div>
	<div class="font-bold text-danger">$40,850.00 (-3.0%)</div>
	<div>Take Profit 1:</div>
	<div class="font-bold text-success">$43,500.00 (+3.3%)</div>
	<div>Take Profit 2:</div>
	<div class="font-bold text-success">$45,200.00 (+7.3%)</div>
	</div>
	</div>
	<div class="p-4 rounded-lg bg-gray-700">
	<div class="flex items-center justify-between mb-2">
	<span class="font-bold">AI Analysis</span>
	<div class="flex items-center space-x-2">
	<button id="refresh-analysis" class="btn btn-xs bg-gray-600 hover:bg-gray-500 p-1 rounded">
	<i class="fas fa-sync-alt text-xs"></i>
	</button>
	<i class="fas fa-brain text-accent"></i>
	</div>
	</div>
	<div class="flex items-center justify-between mb-1">
	<div class="text-sm font-bold">AI Model: QuantumNet v5 (Enhanced)</div>
	<div class="flex space-x-1">
	<button class="btn btn-xs bg-gray-600 hover:bg-gray-500 p-1 rounded" title="Model Info">
	<i class="fas fa-info-circle"></i>
	</button>
	<button class="btn btn-xs bg-gray-600 hover:bg-gray-500 p-1 rounded" title="Adjust Confidence">
	<i class="fas fa-sliders-h"></i>
	</button>
	</div>
	</div>
	<div class="text-sm" id="ai-analysis-content">
	<div class="flex mb-2">
	<div class="w-1 bg-success mr-2 rounded-full"></div>
	<p>The QuantumNet v5 model identifies institutional accumulation patterns with 92% confidence.</p>
	</div>
	<div class="flex">
	<div class="w-1 bg-warning mr-2 rounded-full"></div>
	<p>Sentiment analysis shows retail traders are 68% fearful while institutions are accumulating.</p>
	</div>
	</div>
	<div class="mt-3 border-t border-gray-600 pt-3">
	<div class="flex justify-between items-center mb-2">
	<button id="show-technical-details" class="btn btn-xs bg-gray-600 hover:bg-gray-500 py-1 px-2 rounded-full text-xs flex items-center">
	<i class="fas fa-chevron-down mr-1 text-accent"></i>
	<span>Advanced Metrics</span>
	</button>
	<div class="text-xs text-gray-400">Confidence: <span class="text-success font-bold">92.7%</span></div>
	</div>
	<div id="technical-details" class="hidden mt-2">
	<div class="grid grid-cols-2 gap-3">
	<div class="p-2 bg-gray-700 rounded">
	<div class="text-xs text-gray-400 mb-1">RSI Divergence</div>
	<div class="font-bold text-success">Strong Bullish</div>
	<div class="h-1 bg-gray-600 rounded-full mt-1">
	<div class="h-1 bg-success rounded-full" style="width: 92%"></div>
	</div>
	</div>
	<div class="p-2 bg-gray-700 rounded">
	<div class="text-xs text-gray-400 mb-1">Volume Spike</div>
	<div class="font-bold text-warning">+34%</div>
	<div class="h-1 bg-gray-600 rounded-full mt-1">
	<div class="h-1 bg-warning rounded-full" style="width: 68%"></div>
	</div>
	</div>
	<div class="p-2 bg-gray-700 rounded">
	<div class="text-xs text-gray-400 mb-1">Order Flow</div>
	<div class="font-bold text-success">Bid Heavy</div>
	<div class="h-1 bg-gray-600 rounded-full mt-1">
	<div class="h-1 bg-success rounded-full" style="width: 87%"></div>
	</div>
	</div>
	<div class="p-2 bg-gray-700 rounded">
	<div class="text-xs text-gray-400 mb-1">Liquidity</div>
	<div class="font-bold text-success">High</div>
	<div class="h-1 bg-gray-600 rounded-full mt-1">
	<div class="h-1 bg-success rounded-full" style="width: 95%"></div>
	</div>
	</div>
	</div>
	<div class="mt-3 p-2 bg-gray-700 rounded text-xs">
	<div class="flex justify-between mb-1">
	<span>Model Version:</span>
	<span class="font-bold">QuantumNet v5 (Multi-Agent)</span>
	</div>
	<div class="flex justify-between">
	<span>Last Retrained:</span>
	<span class="font-bold">3 hours ago</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	<div class="p-4 rounded-lg bg-gray-700">
	<div class="flex items-center justify-between mb-2">
	<span class="font-bold">Risk Management</span>
	<i class="fas fa-shield-alt text-accent"></i>
	</div>
	<div class="grid grid-cols-2 gap-2 text-sm">
	<div>Position Size:</div>
	<div class="font-bold">2.5% of Portfolio</div>
	<div>Risk/Reward:</div>
	<div class="font-bold">1:2.4</div>
	<div>Volatility:</div>
	<div class="font-bold">Medium</div>
	<div>Liquidity:</div>
	<div class="font-bold">High</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Right Sidebar -->
	<div class="lg:col-span-1 space-y-6">
	<!-- Chart Analysis -->
	<div class="bg-gray-800 rounded-xl p-4 shadow-lg">
	<h2 class="text-lg font-semibold mb-4 flex items-center">
	<i class="fas fa-chart-candlestick mr-2"></i> AI Chart Analysis
	</h2>
	<div class="border-2 border-dashed border-gray-600 rounded-lg p-4 text-center mb-4" id="drop-area">
	<input type="file" id="fileInput" accept="image/*" class="hidden" />
	<button id="browseBtn" class="btn btn-accent px-4 py-2 mb-2">
	<i class="fas fa-upload mr-2"></i>Upload Chart
	</button>
	<p class="text-sm text-gray-400">or drag & drop screenshot</p>
	<div class="mt-4 hidden" id="preview-container">
	<img id="preview" class="mx-auto max-h-32 rounded-lg" />
	<button id="analyzeBtn" class="btn btn-success mt-2 px-4 py-1 hidden">
	<i class="fas fa-bolt mr-1"></i>Analyze
	</button>
	</div>
	</div>

	<div id="analysis-results" class="hidden">
	<div class="border-t border-gray-700 pt-4 mb-4">
	<h3 class="font-bold mb-2">Quantum Analysis:</h3>
	<div id="ai-insights" class="text-sm text-gray-300 mb-3"></div>
	</div>

	<div class="grid grid-cols-2 gap-4">
	<div class="bg-gray-700 p-3 rounded-lg">
	<h4 class="font-bold text-sm mb-1 text-success">Recommended Entry</h4>
	<div id="entry-point" class="font-bold text-xl"></div>
	<div class="text-xs text-gray-400">Optimal zone</div>
	</div>
	<div class="bg-gray-700 p-3 rounded-lg">
	<h4 class="font-bold text-sm mb-1 text-success">Take Profit</h4>
	<div id="take-profit" class="font-bold text-xl"></div>
	<div class="text-xs text-gray-400">Primary target</div>
	</div>
	<div class="bg-gray-700 p-3 rounded-lg">
	<h4 class="font-bold text-sm mb-1 text-danger">Stop Loss</h4>
	<div id="stop-loss" class="font-bold text-xl"></div>
	<div class="text-xs text-gray-400">Risk control</div>
	</div>
	<div class="bg-gray-700 p-3 rounded-lg">
	<h4 class="font-bold text-sm mb-1 text-accent">Confidence</h4>
	<div id="confidence-level" class="font-bold text-xl"></div>
	<div class="text-xs text-gray-400">AI certainty</div>
	</div>
	</div>

	<div class="mt-4 flex space-x-2">
	<button id="copy-trade-btn" class="btn btn-primary flex-1 py-2">
	<i class="fas fa-copy mr-2"></i>Copy Trade
	</button>
	<button id="save-analysis-btn" class="btn btn-accent flex-1 py-2">
	<i class="fas fa-save mr-2"></i>Save
	</button>
	</div>
	</div>
	</div>

	<!-- Quantum Optimizer -->
	<div class="bg-gray-800 rounded-xl p-4 shadow-lg">
	<h2 class="text-lg font-semibold mb-4 flex items-center justify-between">
	<span><i class="fas fa-atom mr-2"></i> Quantum Optimizer</span>
	<div class="flex space-x-1">
	<button class="btn btn-xs bg-gray-700 hover:bg-gray-600 p-1 rounded" title="Settings">
	<i class="fas fa-cog"></i>
	</button>
	<button class="btn btn-xs bg-gray-700 hover:bg-gray-600 p-1 rounded" title="Help">
	<i class="fas fa-question"></i>
	</button>
	</div>
	</h2>
	<div class="optimizer-chart mb-4 relative">
	<canvas id="optimizerChart"></canvas>
	<div class="absolute top-3 right-3 flex space-x-1">
	<span class="text-xs bg-primary px-2 py-1 rounded-full">LIVE</span>
	</div>
	</div>
	<div class="grid grid-cols-2 gap-2 text-sm mb-4">
	<div>Current Accuracy:</div>
	<div class="font-bold text-right flex items-center">
	<span class="text-success">92.7%</span>
	<i class="fas fa-info-circle ml-1 text-gray-400 cursor-help" title="Historical Accuracy: 89.2%"></i>
	</div>
	<div>Optimized Accuracy:</div>
	<div class="font-bold text-right text-success">96.4%</div>
	<div>Improvement:</div>
	<div class="font-bold text-right text-success">+3.7%</div>
	<div>Execution Speed:</div>
	<div class="font-bold text-right flex items-center">
	<span class="text-warning">42ms</span>
	<span class="text-xs text-gray-400 ml-1">(Quantum)</span>
	</div>
	</div>
	<div class="mb-4">
	<div class="text-xs text-gray-400 mb-1">Optimization Progress</div>
	<div class="w-full bg-gray-700 rounded-full h-1.5">
	<div class="bg-success h-1.5 rounded-full" style="width: 100%"></div>
	</div>
	</div>
	<div class="flex space-x-2">
	<button id="run-optimizer" class="btn btn-accent flex-1 py-2 px-4 rounded-lg flex items-center justify-center">
	<i class="fas fa-bolt mr-2"></i>
	<span>Quantum Boost</span>
	</button>
	<button class="btn btn-outline flex-1 py-2 px-4 rounded-lg flex items-center justify-center border border-accent text-accent hover:bg-accent hover:text-white">
	<i class="fas fa-file-export mr-2"></i>
	<span>Export</span>
	</button>
	</div>
	</div>

	<!-- Real-time Signals -->
	<div class="bg-gray-800 rounded-xl p-4 shadow-lg">
	<div class="flex justify-between items-center mb-4">
	<h2 class="text-lg font-semibold flex items-center">
	<i class="fas fa-bolt mr-2"></i> Live Signals
	</h2>
	<div class="flex items-center space-x-2">
	<span class="text-xs bg-primary px-2 py-1 rounded-full">15 New</span>
	<button class="btn btn-sm bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded-full text-xs">
	<i class="fas fa-filter"></i>
	<span class="hidden sm:inline">Filter</span>
	</button>
	</div>
	</div>
	<div class="space-y-3 max-h-96 overflow-y-auto scrollbar-hide" id="signals-container">
	<div class="signal-buy p-3 rounded-lg bg-gray-700">
	<div class="flex justify-between items-start">
	<div>
	<div class="font-bold">BTC/USDT</div>
	<div class="text-xs">15m Chart • Swing Trade</div>
	</div>
	<div class="text-success font-bold">BUY</div>
	</div>
	<div class="flex justify-between items-center mt-2 text-sm">
	<div>Entry: $42,120</div>
	<div>TP1: $43,500</div>
	<button class="auto-trade-btn btn btn-success hover:bg-green-600 px-2 py-1 rounded text-xs">
	<i class="fas fa-robot mr-1"></i>
	<span class="hidden sm:inline">Auto Trade</span>
	</button>
	</div>
	</div>
	<div class="signal-sell p-3 rounded-lg bg-gray-700">
	<div class="flex justify-between items-start">
	<div>
	<div class="font-bold">ETH/USDT</div>
	<div class="text-xs">1h Chart • Day Trade</div>
	</div>
	<div class="text-danger font-bold">SELL</div>
	</div>
	<div class="flex justify-between items-center mt-2 text-sm">
	<div>Entry: $2,345</div>
	<div>TP1: $2,280</div>
	<button class="auto-trade-btn btn btn-danger hover:bg-red-600 px-2 py-1 rounded text-xs">
	<i class="fas fa-robot mr-1"></i>
	<span class="hidden sm:inline">Auto Trade</span>
	</button>
	</div>
	</div>
	<div class="signal-buy p-3 rounded-lg bg-gray-700">
	<div class="flex justify-between items-start">
	<div>
	<div class="font-bold">AAPL</div>
	<div class="text-xs">4h Chart • Swing Trade</div>
	</div>
	<div class="text-success font-bold">BUY</div>
	</div>
	<div class="flex justify-between items-center mt-2 text-sm">
	<div>Entry: $175.20</div>
	<div>TP1: $182.50</div>
	<button class="auto-trade-btn btn btn-success hover:bg-green-600 px-2 py-1 rounded text-xs">
	<i class="fas fa-robot mr-1"></i>
	<span class="hidden sm:inline">Auto Trade</span>
	</button>
	</div>
	</div>
	<div class="signal-buy p-3 rounded-lg bg-gray-700">
	<div class="flex justify-between items-start">
	<div>
	<div class="font-bold">EUR/USD</div>
	<div class="text-xs">1d Chart • Position Trade</div>
	</div>
	<div class="text-success font-bold">BUY</div>
	</div>
	<div class="flex justify-between items-center mt-2 text-sm">
	<div>Entry: 1.0950</div>
	<div>TP1: 1.1120</div>
	<button class="auto-trade-btn btn btn-success hover:bg-green-600 px-2 py-1 rounded text-xs">
	<i class="fas fa-robot mr-1"></i>
	<span class="hidden sm:inline">Auto Trade</span>
	</button>
	</div>
	</div>
	<div class="signal-sell p-3 rounded-lg bg-gray-700">
	<div class="flex justify-between items-start">
	<div>
	<div class="font-bold">TSLA</div>
	<div class="text-xs">1h Chart • Day Trade</div>
	</div>
	<div class="text-danger font-bold">SELL</div>
	</div>
	<div class="flex justify-between items-center mt-2 text-sm">
	<div>Entry: $265.75</div>
	<div>TP1: $258.30</div>
	<button class="auto-trade-btn btn btn-danger hover:bg-red-600 px-2 py-1 rounded text-xs">
	<i class="fas fa-robot mr-1"></i>
	<span class="hidden sm:inline">Auto Trade</span>
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Performance Metrics -->
	<div class="bg-gray-800 rounded-xl p-4 shadow-lg">
	<h2 class="text-lg font-semibold mb-4 flex items-center">
	<i class="fas fa-trophy mr-2"></i> Strategy Performance
	</h2>
	<div class="grid grid-cols-2 gap-4">
	<div class="bg-gray-700 p-3 rounded-lg">
	<div class="text-sm mb-1">Win Rate</div>
	<div class="text-2xl font-bold text-success">72.4%</div>
	<div class="text-xs text-gray-400">Last 30 Days</div>
	</div>
	<div class="bg-gray-700 p-3 rounded-lg">
	<div class="text-sm mb-1">Avg Profit</div>
	<div class="text-2xl font-bold text-success">+3.2%</div>
	<div class="text-xs text-gray-400">Per Trade</div>
	</div>
	<div class="bg-gray-700 p-3 rounded-lg">
	<div class="text-sm mb-1">Max Drawdown</div>
	<div class="text-2xl font-bold text-danger">-8.7%</div>
	<div class="text-xs text-gray-400">Last 90 Days</div>
	</div>
	<div class="bg-gray-700 p-3 rounded-lg">
	<div class="text-sm mb-1">Sharpe Ratio</div>
	<div class="text-2xl font-bold text-success">2.1</div>
	<div class="text-xs text-gray-400">Risk Adjusted</div>
	</div>
	</div>
	</div>

	<!-- News & Sentiment -->
	<div class="bg-gray-800 rounded-xl p-4 shadow-lg">
	<div class="flex justify-between items-center mb-4">
	<h2 class="text-lg font-semibold flex items-center">
	<i class="fas fa-newspaper mr-2"></i> Market Sentiment
	</h2>
	<div class="flex space-x-2">
	<button class="sentiment-filter-btn btn btn-xs bg-primary hover:bg-blue-800 px-2 py-1 rounded text-xs" data-filter="all">
	All
	</button>
	<button class="sentiment-filter-btn btn btn-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-xs" data-filter="bullish">
	<i class="fas fa-arrow-up mr-1"></i>
	</button>
	<button class="sentiment-filter-btn btn btn-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-xs" data-filter="bearish">
	<i class="fas fa-arrow-down mr-1"></i>
	</button>
	</div>
	</div>
	<div class="space-y-3" id="sentiment-items">
	<div class="sentiment-item cursor-pointer transition hover:bg-gray-700 flex items-start space-x-3 p-2 rounded-lg" data-sentiment="bullish" onclick="showSentimentDetail('Fed Signals Potential Rate Pause', 'bullish', 'The Federal Reserve has indicated a possible pause in rate hikes for their next meeting, signaling potential relief for markets.')">
	<div class="bg-success p-2 rounded-full">
	<i class="fas fa-bullhorn text-sm"></i>
	</div>
	<div>
	<div class="font-medium">Fed Signals Potential Rate Pause</div>
	<div class="text-xs text-gray-400">2 hours ago • Bullish</div>
	</div>
	</div>
	<div class="sentiment-item cursor-pointer transition hover:bg-gray-700 flex items-start space-x-3 p-2 rounded-lg" data-sentiment="bearish" onclick="showSentimentDetail('Binance Regulatory Concerns', 'bearish', 'Increased regulatory scrutiny on Binance has raised concerns about potential impacts on crypto market liquidity.')">
	<div class="bg-danger p-2 rounded-full">
	<i class="fas fa-exclamation-triangle text-sm"></i>
	</div>
	<div>
	<div class="font-medium">Binance Regulatory Concerns</div>
	<div class="text-xs text-gray-400">4 hours ago • Bearish</div>
	</div>
	</div>
	<div class="sentiment-item cursor-pointer transition hover:bg-gray-700 flex items-start space-x-3 p-2 rounded-lg" data-sentiment="bullish" onclick="showSentimentDetail('Bitcoin ETF Approval Odds Increase', 'bullish', 'Analysts are increasing their odds of SEC approval for a spot Bitcoin ETF following new filings from major asset managers.')">
	<div class="bg-success p-2 rounded-full">
	<i class="fas fa-chart-line text-sm"></i>
	</div>
	<div>
	<div class="font-medium">Bitcoin ETF Approval Odds Increase</div>
	<div class="text-xs text-gray-400">6 hours ago • Bullish</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</main>

	<!-- Footer -->
	<footer class="bg-dark py-3 px-6 border-t border-gray-800">
	<div class="flex flex-col sm:flex-row justify-between items-center text-sm text-gray-400 gap-2">
	<div>
	<span>QuantumTrade AI v4.2.1</span>
	<span class="mx-2 hidden sm:inline">•</span>
	<span>Last Updated: <span id="current-time"></span></span>
	</div>
	<div class="flex items-center space-x-4">
	<span class="hidden sm:inline">Server Load: <span id="server-load">24%</span></span>
	<span>Latency: <span id="server-latency">38ms</span></span>
	<button class="text-accent hover:text-blue-400">
	<i class="fas fa-question-circle"></i>
	</button>
	</div>
	</div>
	</footer>
	</div>

	<script>
	// Chart Analysis Functionality
	document.getElementById('browseBtn').addEventListener('click', function() {
	document.getElementById('fileInput').click();
	});

	const dropArea = document.getElementById('drop-area');
	['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
	dropArea.addEventListener(eventName, preventDefaults, false);
	});

	function preventDefaults(e) {
	e.preventDefault();
	e.stopPropagation();
	}

	['dragenter', 'dragover'].forEach(eventName => {
	dropArea.addEventListener(eventName, highlight, false);
	});

	['dragleave', 'drop'].forEach(eventName => {
	dropArea.addEventListener(eventName, unhighlight, false);
	});

	dropArea.addEventListener('drop', handleDrop, false);
	document.getElementById('fileInput').addEventListener('change', handleFiles, false);

	function highlight() {
	dropArea.classList.add('border-accent');
	}

	function unhighlight() {
	dropArea.classList.remove('border-accent');
	}

	function handleDrop(e) {
	const dt = e.dataTransfer;
	const files = dt.files;
	handleFiles({target: {files}});
	}

	function handleFiles(e) {
	const file = e.target.files[0];
	if (file && file.type.match('image.*')) {
	const reader = new FileReader();
	reader.onload = function(e) {
	const preview = document.getElementById('preview');
	preview.src = e.target.result;
	document.getElementById('preview-container').classList.remove('hidden');
	document.getElementById('analyzeBtn').classList.remove('hidden');
	}
	reader.readAsDataURL(file);
	}
	}

	document.getElementById('analyzeBtn').addEventListener('click', function() {
	// Show loading state
	const analyzeBtn = this;
	analyzeBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Analyzing...';
	analyzeBtn.disabled = true;

	// Get current market data from TradingView widget
	try {
	const tvWidget = document.querySelector('.tradingview-widget-container iframe');
	if (!tvWidget) {
	throw new Error('TradingView widget not loaded');
	}

	const activeTimeframe = document.querySelector('button.timeframe-btn.active').textContent;
	const timeframeMap = {
	'1m': '1',
	'5m': '5',
	'15m': '15',
	'1h': '60',
	'4h': '240',
	'1d': '1D',
	'1w': '1W',
	'1M': '1M'
	};

	tvWidget.contentWindow.postMessage({
	name: 'exportData',
	interval: timeframeMap[activeTimeframe] \|\| '15',
	}, '*');

	// Set timeout for cases where widget doesn't respond
	const timeout = setTimeout(() => {
	window.removeEventListener('message', tradingViewDataHandler);
	displayAnalysisFromSimulatedData();
	analyzeBtn.innerHTML = '<i class="fas fa-bolt mr-1"></i>Analyze';
	analyzeBtn.disabled = false;
	}, 3000);

	// Listen for response
	function tradingViewDataHandler(event) {
	if (event.data && event.data.name === 'exportDataResponse') {
	clearTimeout(timeout);
	const data = event.data.data;
	const currentPrice = data.close[data.close.length - 1];
	const recentLow = Math.min(...data.low.slice(-20));
	const recentHigh = Math.max(...data.high.slice(-20));

	// Calculate levels based on actual price action
	const prices = {
	entry: currentPrice.toFixed(2),
	tp: (currentPrice * 1.03).toFixed(2), // +3% take profit
	sl: (recentLow * 0.99).toFixed(2), // 1% below recent low
	confidence: Math.min(95, Math.floor(
	((currentPrice - recentLow) / (recentHigh - recentLow)) * 100
	)) // Confidence based on position within the range
	};

	// Generate dynamic analysis based on actual market conditions
	let analysis = [];

	// Detect trend
	if (currentPrice > recentHigh * 0.95) {
	analysis.push("The QuantumNet model detects strong bullish momentum approaching recent highs.");
	} else if (currentPrice < recentLow * 1.05) {
	analysis.push("The chart shows prices testing recent lows, indicating potential support zone.");
	} else {
	analysis.push("Price is consolidating within its recent range, waiting for breakout confirmation.");
	}

	// Update UI with analysis
	document.getElementById('ai-insights').innerHTML = `
	<p>Current price: ${prices.entry} \| Recent range: ${recentLow.toFixed(2)}-${recentHigh.toFixed(2)}</p>
	${analysis.map(a => `<p>${a}</p>`).join('')}
	`;
	document.getElementById('entry-point').textContent = `${prices.entry} (Current)`;
	document.getElementById('take-profit').textContent = `${prices.tp} (+${((prices.tp/prices.entry-1)*100).toFixed(1)}%)`;
	document.getElementById('stop-loss').textContent = `${prices.sl} (${((prices.sl/prices.entry-1)*100).toFixed(1)}%)`;
	document.getElementById('confidence-level').textContent = `${prices.confidence}%`;

	// Show results
	document.getElementById('analysis-results').classList.remove('hidden');
	analyzeBtn.innerHTML = '<i class="fas fa-check mr-1"></i>Analysis Complete';
	analyzeBtn.disabled = false;

	// Remove the event listener after receiving data
	window.removeEventListener('message', tradingViewDataHandler);

	// Show notification
	showTradeNotification("Chart analysis complete! AI has identified profitable trade setups.", true);
	}
	}

	window.addEventListener('message', tradingViewDataHandler);
	} catch (error) {
	console.error("Error analyzing chart:", error);
	displayAnalysisFromSimulatedData();
	analyzeBtn.innerHTML = '<i class="fas fa-bolt mr-1"></i>Analyze';
	analyzeBtn.disabled = false;
	}
	});

	// Calculate levels based on actual price action
	const prices = {
	entry: currentPrice.toFixed(2),
	tp: (currentPrice * 1.03).toFixed(2), // +3% take profit
	sl: (recentLow * 0.99).toFixed(2), // 1% below recent low
	confidence: Math.min(95, Math.floor(
	((currentPrice - recentLow) / (recentHigh - recentLow)) * 100
	)) // Confidence based on position within the range
	};

	// Fallback function when TradingView data isn't available
	function displayAnalysisFromSimulatedData() {
	// Simulate data analysis with random but reasonable values
	const currentPrice = parseFloat(document.getElementById('current-price').textContent.replace(/,/g, ''));
	const recentLow = currentPrice * 0.97;
	const recentHigh = currentPrice * 1.03;

	const prices = {
	entry: currentPrice.toFixed(2),
	tp: (currentPrice * 1.03).toFixed(2),
	sl: (recentLow * 0.99).toFixed(2),
	confidence: Math.floor(70 + Math.random() * 25) // 70-95% confidence
	};

	// Generate analysis text
	const analysis = [
	"Quantum analysis detected potential trading opportunity.",
	"Price shows technical patterns matching historical profitable setups."
	];

	// Update UI
	document.getElementById('ai-insights').innerHTML = `
	<p>Current price: ${prices.entry} \| Simulated range: ${recentLow.toFixed(2)}-${recentHigh.toFixed(2)}</p>
	${analysis.map(a => `<p>${a}</p>`).join('')}
	`;
	document.getElementById('entry-point').textContent = `${prices.entry} (Current)`;
	document.getElementById('take-profit').textContent = `${prices.tp} (+${((prices.tp/prices.entry-1)*100).toFixed(1)}%)`;
	document.getElementById('stop-loss').textContent = `${prices.sl} (${((prices.sl/prices.entry-1)*100).toFixed(1)}%)`;
	document.getElementById('confidence-level').textContent = `${prices.confidence}%`;

	document.getElementById('analysis-results').classList.remove('hidden');
	showTradeNotification("Analysis completed with simulated data", true);
	}

	document.getElementById('copy-trade-btn').addEventListener('click', function() {
	const entry = document.getElementById('entry-point').textContent;
	const tp = document.getElementById('take-profit').textContent;
	const sl = document.getElementById('stop-loss').textContent;

	// In a real app, this would copy to clipboard and/or auto-fill trade orders
	showTradeNotification(`Trade copied: Entry ${entry}, TP ${tp}, SL ${sl}`, true);
	});

	document.getElementById('save-analysis-btn').addEventListener('click', function() {
	// In a real app, this would save the analysis to user's history
	showTradeNotification("Analysis saved to your trade journal", true);
	});

	// Trade execution simulation
	function executeTrade(symbol, action, entryPrice) {
	return new Promise((resolve) => {
	setTimeout(() => {
	const isSuccess = Math.random() > 0.1; // 90% success rate
	const priceImpact = (Math.random() * 0.2).toFixed(2);

	const executedPrice = action === 'BUY'
	? (parseFloat(entryPrice) * (1 + parseFloat(priceImpact)/100)).toFixed(2)
	: (parseFloat(entryPrice) * (1 - parseFloat(priceImpact)/100)).toFixed(2);

	resolve({
	success: isSuccess,
	action,
	symbol,
	requestedPrice: entryPrice,
	executedPrice,
	timestamp: new Date().toISOString()
	});
	}, 1000);
	});
	}

	// Initialize Chart.js for ML Optimizer
	const ctx = document.getElementById('optimizerChart').getContext('2d');
	const optimizerChart = new Chart(ctx, {
	type: 'line',
	data: {
	labels: ['Before', 'After'],
	datasets: [{
	label: 'Signal Accuracy',
	data: [82.7, 89.3],
	backgroundColor: 'rgba(59, 130, 246, 0.2)',
	borderColor: 'rgba(59, 130, 246, 1)',
	borderWidth: 2,
	tension: 0.1,
	fill: true
	}]
	},
	options: {
	responsive: true,
	maintainAspectRatio: false,
	scales: {
	y: {
	beginAtZero: false,
	min: 80,
	max: 100
	}
	},
	plugins: {
	legend: {
	display: false
	}
	}
	}
	});

	// Update current time
	function updateTime() {
	const now = new Date();
	const timeString = now.toLocaleTimeString();
	document.getElementById('current-time').textContent = timeString;
	}
	setInterval(updateTime, 1000);
	updateTime();

	// Simulate live price updates
	function updatePrice() {
	// In a real app, you would fetch this from an API
	const basePrice = 105450.00;
	const change = (Math.random() - 0.5) * 200;
	const newPrice = basePrice + change;
	const percentChange = (change / basePrice * 100).toFixed(2);

	document.getElementById('current-price').textContent = newPrice.toFixed(2);

	const priceChangeElement = document.getElementById('price-change');
	if (change >= 0) {
	priceChangeElement.textContent = `+${percentChange}%`;
	priceChangeElement.className = 'text-sm ml-2 px-2 py-0.5 rounded text-success bg-green-900 bg-opacity-40';
	} else {
	priceChangeElement.textContent = `${percentChange}%`;
	priceChangeElement.className = 'text-sm ml-2 px-2 py-0.5 rounded text-danger bg-red-900 bg-opacity-40';
	}

	// Update volume randomly
	const baseVolume = 24500;
	const volumeChange = (Math.random() - 0.3) * 5000;
	const newVolume = baseVolume + volumeChange;
	document.getElementById('current-volume').textContent = `${(newVolume/1000).toFixed(1)}K`;

	// Update server metrics
	document.getElementById('server-load').textContent = `${Math.floor(Math.random() * 30) + 10}%`;
	document.getElementById('server-latency').textContent = `${Math.floor(Math.random() * 50) + 20}ms`;
	}
	setInterval(updatePrice, 3000);
	updatePrice();

	// Button interactions
	document.querySelectorAll('.asset-btn').forEach(btn => {
	btn.addEventListener('click', function() {
	document.querySelectorAll('.asset-btn').forEach(b => b.classList.remove('active', 'bg-primary'));
	document.querySelectorAll('.asset-btn').forEach(b => b.classList.add('bg-gray-700'));
	this.classList.remove('bg-gray-700');
	this.classList.add('active', 'bg-primary');
	});
	});

	document.querySelectorAll('.timeframe-btn').forEach(btn => {
	btn.addEventListener('click', function() {
	document.querySelectorAll('.timeframe-btn').forEach(b => b.classList.remove('active', 'bg-primary'));
	document.querySelectorAll('.timeframe-btn').forEach(b => b.classList.add('bg-gray-700'));
	this.classList.remove('bg-gray-700');
	this.classList.add('active', 'bg-primary');
	});
	});

	document.querySelectorAll('.style-btn').forEach(btn => {
	btn.addEventListener('click', function() {
	document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active', 'bg-primary'));
	document.querySelectorAll('.style-btn').forEach(b => b.classList.add('bg-gray-700'));
	this.classList.remove('bg-gray-700');
	this.classList.add('active', 'bg-primary');
	});
	});

	// Trading Bot Controls
	document.getElementById('start-bot').addEventListener('click', function() {
	const statusElement = document.getElementById('bot-status');
	statusElement.textContent = 'ACTIVE';
	statusElement.classList.remove('bg-danger');
	statusElement.classList.add('bg-success', 'bot-status-active');

	// Update today's stats
	document.getElementById('today-trades').textContent = '0';
	document.getElementById('today-profit').textContent = '+0.0%';
	document.getElementById('today-winrate').textContent = '0%';

	// Simulate bot activity
	let trades = 0;
	let profit = 0;
	let wins = 0;

	const botInterval = setInterval(() => {
	trades++;
	const tradeProfit = (Math.random() * 2).toFixed(2);
	const isWin = Math.random() > 0.3;

	if (isWin) {
	profit += parseFloat(tradeProfit);
	wins++;
	} else {
	profit -= parseFloat(tradeProfit);
	}

	document.getElementById('today-trades').textContent = trades;
	document.getElementById('today-profit').textContent = `${profit >= 0 ? '+' : ''}${profit.toFixed(2)}%`;
	document.getElementById('today-winrate').textContent = `${Math.round((wins / trades) * 100)}%`;
	}, 5000);

	// Store interval so we can clear it when stopping
	this.dataset.interval = botInterval;
	});

	document.getElementById('stop-bot').addEventListener('click', function() {
	const statusElement = document.getElementById('bot-status');
	statusElement.textContent = 'OFFLINE';
	statusElement.classList.remove('bg-success', 'bot-status-active');
	statusElement.classList.add('bg-danger');

	// Clear the bot interval if it exists
	const startButton = document.getElementById('start-bot');
	if (startButton.dataset.interval) {
	clearInterval(parseInt(startButton.dataset.interval));
	delete startButton.dataset.interval;
	}
	});

	// ML Optimizer Button
	document.getElementById('run-optimizer').addEventListener('click', function() {
	const button = this;
	const originalText = button.innerHTML;

	// Show loading state
	button.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Optimizing...';
	button.disabled = true;

	// Simulate optimization process
	setTimeout(() => {
	// Update chart with new optimized values
	const improvement = (Math.random() * 10).toFixed(1);
	const newAccuracy = 82.7 + parseFloat(improvement);

	optimizerChart.data.datasets[0].data = [82.7, newAccuracy];
	optimizerChart.update();

	// Update text displays
	document.querySelectorAll('.optimizer-chart + div div:nth-child(2)').forEach(el => {
	el.textContent = `${newAccuracy.toFixed(1)}%`;
	});
	document.querySelectorAll('.optimizer-chart + div div:nth-child(4)').forEach(el => {
	el.textContent = `+${improvement}%`;
	});

	// Restore button
	button.innerHTML = originalText;
	button.disabled = false;

	// Show notification
	const notification = document.createElement('div');
	notification.className = 'fixed bottom-4 right-4 bg-success text-white px-4 py-2 rounded-lg shadow-lg';
	notification.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Optimization complete! Signal accuracy improved.';
	document.body.appendChild(notification);

	setTimeout(() => {
	notification.remove();
	}, 3000);
	}, 2000);
	});

	// Show/hide MT5 specific fields
	document.getElementById('exchange-select').addEventListener('change', function() {
	const mt5Fields = document.getElementById('mt5-fields');
	if (this.value === 'metatrader5') {
	mt5Fields.classList.remove('hidden');
	} else {
	mt5Fields.classList.add('hidden');
	}
	});

	// Exchange Connection Handling
	document.getElementById('connect-exchange-btn').addEventListener('click', function() {
	document.getElementById('exchange-connect-modal').classList.remove('hidden');
	});

	document.getElementById('exchange-connect-cancel').addEventListener('click', function() {
	document.getElementById('exchange-connect-modal').classList.add('hidden');
	});

	document.getElementById('exchange-connect-submit').addEventListener('click', async function() {
	const exchange = document.getElementById('exchange-select').value;
	const apiKey = document.getElementById('api-key').value;
	const apiSecret = document.getElementById('api-secret').value;

	if (!apiKey \|\| !apiSecret) {
	alert('Please enter both API Key and Secret');
	return;
	}

	// Show loading state
	this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Connecting...';
	this.disabled = true;

	try {
	// Handle MT5 differently since it requires server/password
	if (exchange === 'metatrader5') {
	// MT5 requires server, username and password fields
	alert('For MetaTrader 5, please also specify server and login credentials in your broker app');
	return;
	}

	// For other exchanges, verify credentials
	// In a real app, this would call your backend API to verify credentials
	await new Promise(resolve => setTimeout(resolve, 1500));

	// Update UI to show connected state
	document.getElementById('exchange-connect-modal').classList.add('hidden');
	const connectBtn = document.getElementById('connect-exchange-btn');
	connectBtn.innerHTML = `
	<span class="btn-text">Connected to ${exchange}</span>
	<i class="fas fa-check-circle btn-icon"></i>
	`;
	connectBtn.classList.add('bg-success', 'hover:bg-success');
	connectBtn.classList.remove('btn-primary');

	// Store connection status (in real app would use proper state management)
	localStorage.setItem('exchangeConnection', JSON.stringify({
	exchange,
	connected: true,
	timestamp: new Date().toISOString()
	}));
	} catch (error) {
	alert('Connection failed: ' + (error.message \|\| 'Invalid API credentials'));
	this.innerHTML = 'Connect';
	this.disabled = false;
	}
	});

	// Check for existing connection on page load
	document.addEventListener('DOMContentLoaded', function() {
	const savedConnection = localStorage.getItem('exchangeConnection');
	if (savedConnection) {
	const { exchange, connected } = JSON.parse(savedConnection);
	if (connected) {
	const connectBtn = document.getElementById('connect-exchange-btn');
	connectBtn.innerHTML = `
	<span class="btn-text">Connected to ${exchange}</span>
	<i class="fas fa-check-circle btn-icon"></i>
	`;
	connectBtn.classList.add('bg-success', 'hover:bg-success');
	connectBtn.classList.remove('btn-primary');
	}
	}
	});

	// Show trade notification
	function showTradeNotification(message, isSuccess) {
	const notification = document.createElement('div');
	notification.className = `fixed bottom-4 right-4 ${
	isSuccess ? 'bg-success' : 'bg-danger'
	} text-white px-4 py-2 rounded-lg shadow-lg flex items-center`;
	notification.innerHTML = `
	<i class="fas fa-${isSuccess ? 'check-circle' : 'exclamation-triangle'} mr-2"></i>
	${message}
	`;
	document.body.appendChild(notification);

	setTimeout(() => {
	notification.remove();
	}, 5000);
	}

	// Simulate real-time signal updates
	const symbols = ['BTC/USDT', 'ETH/USDT', 'AAPL', 'EUR/USD', 'TSLA', 'MSFT', 'XAU/USD', 'AMZN'];
	const timeframes = ['1m', '5m', '15m', '1h', '4h', '1d'];
	const strategies = ['Scalping', 'Day Trade', 'Swing Trade', 'Position Trade'];

	function updateSignals() {
	const container = document.getElementById('signals-container');

	// Randomly remove some signals
	if (Math.random() > 0.7 && container.children.length > 3) {
	const indexToRemove = Math.floor(Math.random() * container.children.length);
	container.removeChild(container.children[indexToRemove]);
	}

	// Randomly add new signals
	if (Math.random() > 0.5) {
	const symbol = symbols[Math.floor(Math.random() * symbols.length)];
	const timeframe = timeframes[Math.floor(Math.random() * timeframes.length)];
	const strategy = strategies[Math.floor(Math.random() * strategies.length)];
	const isBuy = Math.random() > 0.4;

	const price = isBuy ?
	(Math.random() * 50000).toFixed(2) :
	(Math.random() * 1000).toFixed(2);
	const tp1 = isBuy ?
	(parseFloat(price) * 1.03).toFixed(2) :
	(parseFloat(price) * 0.98).toFixed(2);

	const signal = document.createElement('div');
	signal.className = isBuy ? 'signal-buy p-3 rounded-lg bg-gray-700' : 'signal-sell p-3 rounded-lg bg-gray-700';
	signal.innerHTML = `
	<div class="flex justify-between items-start">
	<div>
	<div class="font-bold">${symbol}</div>
	<div class="text-xs">${timeframe} Chart • ${strategy}</div>
	</div>
	<div class="${isBuy ? 'text-success' : 'text-danger'} font-bold">${isBuy ? 'BUY' : 'SELL'}</div>
	</div>
	<div class="flex justify-between items-center mt-2 text-sm">
	<div>Entry: $${price}</div>
	<div>TP1: $${tp1}</div>
	<button class="btn ${isBuy ? 'btn-success hover:bg-green-600' : 'btn-danger hover:bg-red-600'} px-2 py-1 rounded text-xs">
	<i class="fas fa-robot mr-1"></i>
	<span class="hidden sm:inline">Auto Trade</span>
	</button>
	</div>
	`;

	// Add to top of container
	container.insertBefore(signal, container.firstChild);

	// Update counter
	const counter = document.querySelector('.bg-primary.text-xs');
	if (counter) {
	const currentCount = parseInt(counter.textContent);
	counter.textContent = `${currentCount + 1} New`;
	}
	}
	}
	setInterval(updateSignals, 8000);
	</script>

	<!-- Sentiment Detail Modal -->
	<div id="sentiment-detail-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
	<div class="bg-gray-800 rounded-lg p-6 w-full max-w-md">
	<div class="flex justify-between items-center mb-4">
	<h3 id="sentiment-title" class="text-xl font-bold"></h3>
	<button onclick="closeSentimentDetail()" class="text-gray-400 hover:text-white">
	<i class="fas fa-times"></i>
	</button>
	</div>
	<div class="flex items-center mb-4">
	<div id="sentiment-icon" class="p-2 rounded-full mr-3">
	<i id="sentiment-icon-inner" class="fas"></i>
	</div>
	<span id="sentiment-type" class="font-bold"></span>
	</div>
	<p id="sentiment-description" class="mb-6 text-gray-300"></p>
	<div class="flex justify-end">
	<button onclick="closeSentimentDetail()" class="btn btn-primary px-4 py-2">Close</button>
	</div>
	</div>
	</div>

	<script>
	// Enhanced AI Analysis Interactivity
	let activeModel = 'QuantumNet';

	// Technical details toggle
	document.getElementById('show-technical-details').addEventListener('click', function() {
	const details = document.getElementById('technical-details');
	const icon = this.querySelector('i');

	details.classList.toggle('hidden');
	icon.classList.toggle('fa-chevron-down');
	icon.classList.toggle('fa-chevron-up');
	});

	// Model selection
	document.querySelectorAll('.model-btn').forEach(btn => {
	btn.addEventListener('click', function() {
	document.querySelectorAll('.model-btn').forEach(b => {
	b.classList.remove('bg-primary', 'hover:bg-blue-700');
	b.classList.add('bg-gray-700', 'hover:bg-gray-600');
	});
	this.classList.add('bg-primary', 'hover:bg-blue-700');
	this.classList.remove('bg-gray-700', 'hover:bg-gray-600');
	activeModel = this.querySelector('span').textContent;
	updateModelBadge();
	});
	});

	// Aggressiveness selection
	document.querySelectorAll('.aggressiveness-btn').forEach(btn => {
	btn.addEventListener('click', function() {
	document.querySelectorAll('.aggressiveness-btn').forEach(b => b.classList.remove('active'));
	this.classList.add('active');
	document.getElementById('aggressiveness-value').textContent =
	this.dataset.value.charAt(0).toUpperCase() + this.dataset.value.slice(1);
	});
	});

	// Signal strength slider
	document.getElementById('signal-strength').addEventListener('input', function() {
	document.getElementById('signal-strength-value').textContent = `${this.value}%`;
	});

	// Update model badge
	function updateModelBadge() {
	const badges = {
	'QuantumNet': { color: 'bg-primary', icon: 'fa-atom' },
	'NeuroLink': { color: 'bg-purple-600', icon: 'fa-network-wired' },
	'DeepQ': { color: 'bg-green-600', icon: 'fa-brain' }
	};

	const badge = document.getElementById('active-model-badge');
	if (badge) {
	badge.className = `${badges[activeModel].color} text-xs px-2 py-1 rounded-full flex items-center`;
	badge.innerHTML = `<i class="fas ${badges[activeModel].icon} mr-1"></i>${activeModel}`;
	}
	}

	// Quantum Optimizer Boost
	document.getElementById('run-optimizer').addEventListener('click', function() {
	const button = this;
	const originalHTML = button.innerHTML;

	button.innerHTML = `
	<div class="flex items-center">
	<div class="w-4 h-4 border-2 border-white border-opacity-50 border-t-transparent rounded-full animate-spin mr-2"></div>
	<span>Quantum Processing...</span>
	</div>
	`;
	button.disabled = true;

	// Simulate quantum processing
	setTimeout(() => {
	// Generate improved numbers
	const current = (Math.random() * 5 + 92).toFixed(1);
	const optimized = (Math.random() * 3 + parseFloat(current)).toFixed(1);
	const improvement = (optimized - current).toFixed(1);

	// Update displays
	optimizerChart.data.datasets[0].data = [current, optimized];
	optimizerChart.update();

	document.querySelectorAll('.optimizer-chart + div div:nth-child(2)').forEach(el => {
	el.textContent = `${current}%`;
	});
	document.querySelectorAll('.optimizer-chart + div div:nth-child(4)').forEach(el => {
	el.textContent = `${optimized}%`;
	});
	document.querySelectorAll('.optimizer-chart + div div:nth-child(6)').forEach(el => {
	el.textContent = `+${improvement}%`;
	});

	// Restore button
	button.innerHTML = originalHTML;
	button.disabled = false;

	// Show quantum completion effect
	showQuantumEffect();
	}, 3000);
	});

	// Show quantum completion effect
	function showQuantumEffect() {
	const effect = document.createElement('div');
	effect.className = 'fixed inset-0 flex items-center justify-center pointer-events-none';
	effect.innerHTML = `
	<div class="absolute w-64 h-64 rounded-full bg-accent bg-opacity-10"
	style="animation: quantumPulse 1.5s forwards"></div>
	<div class="flex items-center justify-center text-white text-xl font-bold">
	<i class="fas fa-atom mr-2 animate-spin"></i>
	Quantum Optimization Complete
	</div>
	`;
	document.body.appendChild(effect);

	setTimeout(() => {
	effect.remove();
	}, 2000);
	}

	// Add to CSS section:
	// Insert after existing @keyframes
	@keyframes quantumPulse {
	0% { transform: scale(0.5); opacity: 1; }
	100% { transform: scale(3); opacity: 0; }
	}

	setTimeout(() => {
	// Update main analysis
	const analysisContent = document.getElementById('ai-analysis-content');
	analysisContent.innerHTML = `
	<p class="mb-2">${analyses[Math.floor(Math.random() * analyses.length)]}</p>
	<p>${analyses[Math.floor(Math.random() * analyses.length)]}</p>
	`;

	// Update technical details
	const techDetails = document.getElementById('technical-details');
	techDetails.innerHTML = `
	<div class="grid grid-cols-2 gap-2">
	<div>RSI:</div>
	<div class="font-bold text-right">${indicators[Math.floor(Math.random() * indicators.length)]}</div>
	<div>MACD:</div>
	<div class="font-bold text-right">${indicators[Math.floor(Math.random() * indicators.length)]}</div>
	<div>Volume:</div>
	<div class="font-bold text-right">${indicators[Math.floor(Math.random() * indicators.length)]}</div>
	<div>Order Flow:</div>
	<div class="font-bold text-right">${indicators[Math.floor(Math.random() * indicators.length)]}</div>
	</div>
	`;

	this.classList.remove('animate-spin');

	// Show notification
	showTradeNotification("Analysis refreshed with latest market data", true);
	}, 1000);
	});

	// Sentiment filtering functionality
	document.querySelectorAll('.sentiment-filter-btn').forEach(btn => {
	btn.addEventListener('click', function() {
	const filter = this.dataset.filter;

	// Update active button
	document.querySelectorAll('.sentiment-filter-btn').forEach(b => {
	b.classList.remove('bg-primary');
	b.classList.add('bg-gray-700');
	});
	this.classList.add('bg-primary');
	this.classList.remove('bg-gray-700');

	// Filter items
	document.querySelectorAll('.sentiment-item').forEach(item => {
	if (filter === 'all' \|\| item.dataset.sentiment === filter) {
	item.classList.remove('hidden');
	} else {
	item.classList.add('hidden');
	}
	});
	});
	});

	// Sentiment detail display
	function showSentimentDetail(title, type, description) {
	const modal = document.getElementById('sentiment-detail-modal');
	const icon = document.getElementById('sentiment-icon');
	const iconInner = document.getElementById('sentiment-icon-inner');

	document.getElementById('sentiment-title').textContent = title;
	document.getElementById('sentiment-type').textContent = type.charAt(0).toUpperCase() + type.slice(1);
	document.getElementById('sentiment-description').textContent = description;

	// Set icon and color based on sentiment type
	if (type === 'bullish') {
	icon.className = 'p-2 rounded-full mr-3 bg-success';
	iconInner.className = 'fas fa-arrow-up';
	} else {
	icon.className = 'p-2 rounded-full mr-3 bg-danger';
	iconInner.className = 'fas fa-arrow-down';
	}

	modal.classList.remove('hidden');
	}

	function closeSentimentDetail() {
	document.getElementById('sentiment-detail-modal').classList.add('hidden');
	}

	// Simulate adding new sentiment items
	setInterval(() => {
	const sentiments = ['bullish', 'bearish'];
	const titles = [
	'Institutional Bitcoin Buying Increases',
	'New Crypto Regulations Proposed',
	'Ethereum Network Activity Spikes',
	'Market Liquidity Concerns Grow',
	'Fed Chair Comments Boost Markets'
	];
	const icons = ['bullhorn', 'chart-line', 'exclamation-triangle', 'university', 'balance-scale'];
	const descriptions = [
	'Large institutional investors are increasing their Bitcoin exposure according to recent filings.',
	'New regulatory proposals could impact crypto exchange operations in multiple jurisdictions.',
	'Ethereum network activity has surged to 6-month highs according to on-chain data.',
	'Analysts warn of decreasing liquidity in some altcoin markets.',
	'Positive remarks from the Federal Reserve chairman sparked a market rally across assets.'
	];

	const randomIndex = Math.floor(Math.random() * titles.length);
	const sentiment = sentiments[Math.floor(Math.random() * sentiments.length)];
	const icon = icons[Math.floor(Math.random() * icons.length)];

	const newItem = document.createElement('div');
	newItem.className = `sentiment-item cursor-pointer transition hover:bg-gray-700 flex items-start space-x-3 p-2 rounded-lg`;
	newItem.dataset.sentiment = sentiment;
	newItem.setAttribute('onclick', `showSentimentDetail('${titles[randomIndex]}', '${sentiment}', '${descriptions[randomIndex]}')`);
	newItem.innerHTML = `
	<div class="bg-${sentiment === 'bullish' ? 'success' : 'danger'} p-2 rounded-full">
	<i class="fas fa-${icon} text-sm"></i>
	</div>
	<div>
	<div class="font-medium">${titles[randomIndex]}</div>
	<div class="text-xs text-gray-400">Just now • ${sentiment.charAt(0).toUpperCase() + sentiment.slice(1)}</div>
	</div>
	`;

	const container = document.getElementById('sentiment-items');
	container.insertBefore(newItem, container.firstChild);

	// Remove oldest item if we have more than 5
	if (container.children.length > 5) {
	container.removeChild(container.lastChild);
	}
	}, 15000);
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Akademics/https-huggingface-co-spaces-akademics" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>