|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>VN30 Quant Trading</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> |
|
<style> |
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
body { |
|
font-family: 'Inter', sans-serif; |
|
background-color: #f5f7fa; |
|
} |
|
|
|
.card-shadow { |
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
} |
|
|
|
.tradingview-widget-container { |
|
border-radius: 0.5rem; |
|
overflow: hidden; |
|
} |
|
|
|
.grid-bg { |
|
background-image: linear-gradient(to right, #edf2f7 1px, transparent 1px), |
|
linear-gradient(to bottom, #edf2f7 1px, transparent 1px); |
|
background-size: 24px 24px; |
|
} |
|
|
|
.positive { |
|
color: #10b981; |
|
} |
|
|
|
.negative { |
|
color: #ef4444; |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-50"> |
|
<div class="container mx-auto px-4 py-8"> |
|
<div class="flex justify-between items-center mb-8"> |
|
<h1 class="text-3xl font-bold text-gray-800">VN30 Quant Trading System</h1> |
|
<div class="flex items-center space-x-4"> |
|
<span class="text-sm text-gray-500">Last updated: <span id="current-time"></span></span> |
|
<button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors"> |
|
Refresh Data |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
|
<div class="bg-white rounded-lg p-6 card-shadow"> |
|
<h2 class="text-xl font-semibold mb-4 text-gray-800">VN30 Overview</h2> |
|
<div class="flex justify-between mb-4"> |
|
<div> |
|
<p class="text-gray-500">Current Price</p> |
|
<p class="text-2xl font-bold" id="vn30-price">1,253.45</p> |
|
</div> |
|
<div class="text-right"> |
|
<p class="text-gray-500">Today's Change</p> |
|
<p class="text-2xl font-bold positive" id="vn30-change">+12.45 (1.02%)</p> |
|
</div> |
|
</div> |
|
<div class="h-48"> |
|
<canvas id="miniChart"></canvas> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg p-6 card-shadow"> |
|
<h2 class="text-xl font-semibold mb-4 text-gray-800">Strategy Performance</h2> |
|
<div class="grid grid-cols-2 gap-4 mb-4"> |
|
<div class="bg-blue-50 p-3 rounded-lg"> |
|
<p class="text-gray-500 text-sm">Total Return</p> |
|
<p class="text-xl font-bold">246.7%</p> |
|
</div> |
|
<div class="bg-green-50 p-3 rounded-lg"> |
|
<p class="text-gray-500 text-sm">Win Rate</p> |
|
<p class="text-xl font-bold">78.2%</p> |
|
</div> |
|
<div class="bg-purple-50 p-3 rounded-lg"> |
|
<p class="text-gray-500 text-sm">Sharpe Ratio</p> |
|
<p class="text-xl font-bold">1.45</p> |
|
</div> |
|
<div class="bg-yellow-50 p-3 rounded-lg"> |
|
<p class="text-gray-500 text-sm">Max Drawdown</p> |
|
<p class="text-xl font-bold">-12.4%</p> |
|
</div> |
|
</div> |
|
<div class="text-sm text-gray-500"> |
|
<p>Strategy: Mean Reversion + Momentum on VN30 components</p> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg p-6 card-shadow"> |
|
<h2 class="text-xl font-semibold mb-4 text-gray-800">Current Positions</h2> |
|
<div class="overflow-x-auto"> |
|
<table class="min-w-full divide-y divide-gray-200"> |
|
<thead class="bg-gray-50"> |
|
<tr> |
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Ticker</th> |
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Size</th> |
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Entry</th> |
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Current</th> |
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">PnL</th> |
|
</tr> |
|
</thead> |
|
<tbody id="positions-table" class="bg-white divide-y divide-gray-200"> |
|
|
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg p-6 mb-6 card-shadow"> |
|
<div class="flex justify-between items-center mb-4"> |
|
<h2 class="text-xl font-semibold text-gray-800">VN30 Index & Strategy Signals</h2> |
|
<div class="flex space-x-2"> |
|
<select class="border rounded-md px-3 py-1"> |
|
<option>1D</option> |
|
<option>1W</option> |
|
<option selected>1M</option> |
|
<option>3M</option> |
|
<option>1Y</option> |
|
</select> |
|
</div> |
|
</div> |
|
<div class="h-96"> |
|
<canvas id="mainChart"></canvas> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
|
<div class="bg-white rounded-lg p-6 card-shadow"> |
|
<h2 class="text-xl font-semibold mb-4 text-gray-800">Algorithm Controls</h2> |
|
<div class="mb-4"> |
|
<label class="block text-gray-700 text-sm font-medium mb-2" for="strategy-select"> |
|
Strategy |
|
</label> |
|
<select id="strategy-select" class="w-full border rounded-md px-3 py-2"> |
|
<option>Mean Reversion</option> |
|
<option selected>Momentum Breakout</option> |
|
<option>Machine Learning</option> |
|
<option>Pairs Trading</option> |
|
</select> |
|
</div> |
|
|
|
<div class="grid grid-cols-2 gap-4 mb-4"> |
|
<div> |
|
<label class="block text-gray-700 text-sm font-medium mb-2"> |
|
Risk per Trade (%) |
|
</label> |
|
<input type="range" min="0.1" max="5" step="0.1" value="1.5" class="w-full"> |
|
</div> |
|
<div> |
|
<label class="block text-gray-700 text-sm font-medium mb-2"> |
|
Holding Period (days) |
|
</label> |
|
<input type="number" min="1" max="30" value="5" class="w-full border rounded-md px-3 py-2"> |
|
</div> |
|
</div> |
|
|
|
<div class="flex space-x-4"> |
|
<button id="start-algo" class="flex-1 bg-green-600 hover:bg-green-700 text-white py-2 rounded-md transition-colors"> |
|
Start Algorithm |
|
</button> |
|
<button id="stop-algo" class="flex-1 bg-red-600 hover:bg-red-700 text-white py-2 rounded-md transition-colors"> |
|
Stop Algorithm |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white rounded-lg p-6 card-shadow"> |
|
<h2 class="text-xl font-semibold mb-4 text-gray-800">Recent Trades</h2> |
|
<div class="overflow-auto max-h-64"> |
|
<table class="min-w-full divide-y divide-gray-200"> |
|
<thead class="bg-gray-50"> |
|
<tr> |
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Date</th> |
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Ticker</th> |
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Action</th> |
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Size</th> |
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Price</th> |
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">PnL</th> |
|
</tr> |
|
</thead> |
|
<tbody id="trades-table" class="bg-white divide-y divide-gray-200"> |
|
|
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
|
|
function updateCurrentTime() { |
|
const now = new Date(); |
|
const options = { |
|
year: 'numeric', |
|
month: 'short', |
|
day: 'numeric', |
|
hour: '2-digit', |
|
minute: '2-digit', |
|
second: '2-digit', |
|
hour12: false |
|
}; |
|
document.getElementById('current-time').textContent = now.toLocaleDateString('en-US', options); |
|
} |
|
updateCurrentTime(); |
|
setInterval(updateCurrentTime, 1000); |
|
|
|
|
|
const positions = [ |
|
{ ticker: "VIC", size: 1000, entry: 105.5, current: 107.2, pnl: 1700 }, |
|
{ ticker: "VHM", size: 800, entry: 97.3, current: 95.7, pnl: -1280 }, |
|
{ ticker: "HPG", size: 1500, entry: 44.2, current: 46.5, pnl: 3450 } |
|
]; |
|
|
|
|
|
const tradeHistory = [ |
|
{ date: "2024-05-20", ticker: "GVR", action: "BUY", size: 1200, price: 48.2, pnl: "+1,850" }, |
|
{ date: "2024-05-19", ticker: "SSI", action: "SELL", size: 2000, price: 35.1, pnl: "+1,200" }, |
|
{ date: "2024-05-18", ticker: "MWG", action: "BUY", size: 800, price: 132.5, pnl: "-1,020" }, |
|
{ date: "2024-05-16", ticker: "FPT", action: "SELL", size: 1000, price: 86.7, pnl: "+2,450" } |
|
]; |
|
|
|
|
|
function populatePositions() { |
|
const table = document.getElementById('positions-table'); |
|
table.innerHTML = ''; |
|
|
|
positions.forEach(pos => { |
|
const pnlPercent = ((pos.current - pos.entry) / pos.entry * 100).toFixed(2); |
|
const row = document.createElement('tr'); |
|
row.innerHTML = ` |
|
<td class="px-4 py-2 whitespace-nowrap font-medium">${pos.ticker}</td> |
|
<td class="px-4 py-2 whitespace-nowrap">${pos.size.toLocaleString()}</td> |
|
<td class="px-4 py-2 whitespace-nowrap">${pos.entry.toFixed(2)}</td> |
|
<td class="px-4 py-2 whitespace-nowrap">${pos.current.toFixed(2)}</td> |
|
<td class="px-4 py-2 whitespace-nowrap ${pos.pnl >= 0 ? 'positive' : 'negative'}"> |
|
${pos.pnl >= 0 ? '+' : ''}${pos.pnl.toLocaleString()} (${pnlPercent}%) |
|
</td> |
|
`; |
|
table.appendChild(row); |
|
}); |
|
} |
|
|
|
|
|
function populateTrades() { |
|
const table = document.getElementById('trades-table'); |
|
table.innerHTML = ''; |
|
|
|
tradeHistory.forEach(trade => { |
|
const row = document.createElement('tr'); |
|
row.innerHTML = ` |
|
<td class="px-4 py-2 whitespace-nowrap">${trade.date}</td> |
|
<td class="px-4 py-2 whitespace-nowrap font-medium">${trade.ticker}</td> |
|
<td class="px-4 py-2 whitespace-nowrap ${trade.action === 'BUY' ? 'text-blue-600' : 'text-red-600'}">${trade.action}</td> |
|
<td class="px-4 py-2 whitespace-nowrap">${trade.size.toLocaleString()}</td> |
|
<td class="px-4 py-2 whitespace-nowrap">${trade.price.toFixed(2)}</td> |
|
<td class="px-4 py-2 whitespace-nowrap ${trade.pnl.startsWith('+') ? 'positive' : 'negative'}">${trade.pnl}</td> |
|
`; |
|
table.appendChild(row); |
|
}); |
|
} |
|
|
|
|
|
function initMiniChart() { |
|
const ctx = document.getElementById('miniChart').getContext('2d'); |
|
new Chart(ctx, { |
|
type: 'line', |
|
data: { |
|
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Today'], |
|
datasets: [{ |
|
label: 'VN30', |
|
data: [1240.1, 1243.7, 1238.2, 1245.9, 1241.3, 1253.4], |
|
borderColor: '#3b82f6', |
|
backgroundColor: 'rgba(59, 130, 246, 0.05)', |
|
borderWidth: 2, |
|
tension: 0.1, |
|
fill: true |
|
}] |
|
}, |
|
options: { |
|
plugins: { |
|
legend: { display: false } |
|
}, |
|
scales: { |
|
x: { display: false }, |
|
y: { display: false } |
|
}, |
|
elements: { |
|
point: { radius: 0 } |
|
} |
|
} |
|
}); |
|
} |
|
|
|
|
|
function initMainChart() { |
|
const ctx = document.getElementById('mainChart').getContext('2d'); |
|
|
|
|
|
const dates = []; |
|
const prices = []; |
|
const signals = []; |
|
|
|
const today = new Date(); |
|
for (let i = 30; i >= 0; i--) { |
|
const date = new Date(); |
|
date.setDate(today.getDate() - i); |
|
dates.push(date); |
|
|
|
|
|
const prevPrice = prices.length ? prices[prices.length - 1] : 1200; |
|
const change = (Math.random() - 0.5) * 30; |
|
prices.push(prevPrice + change); |
|
|
|
|
|
if (i % 5 === 0) signals.push(Math.random() > 0.5 ? 1 : -1); |
|
else signals.push(0); |
|
} |
|
|
|
|
|
const signalPoints = []; |
|
signals.forEach((signal, index) => { |
|
if (signal !== 0) { |
|
signalPoints.push({ |
|
x: dates[index], |
|
y: prices[index], |
|
signal: signal |
|
}); |
|
} |
|
}); |
|
|
|
new Chart(ctx, { |
|
type: 'line', |
|
data: { |
|
labels: dates, |
|
datasets: [ |
|
{ |
|
label: 'VN30 Index', |
|
data: prices.map((price, index) => ({x: dates[index], y: price})), |
|
borderColor: '#3b82f6', |
|
backgroundColor: 'rgba(59, 130, 246, 0.05)', |
|
borderWidth: 2, |
|
tension: 0.1, |
|
fill: true |
|
}, |
|
{ |
|
label: 'Buy Signals', |
|
data: signalPoints.filter(p => p.signal === 1).map(p => ({x: p.x, y: p.y})), |
|
backgroundColor: '#10b981', |
|
borderColor: '#10b981', |
|
pointRadius: 8, |
|
pointHoverRadius: 10, |
|
showLine: false, |
|
}, |
|
{ |
|
label: 'Sell Signals', |
|
data: signalPoints.filter(p => p.signal === -1).map(p => ({x: p.x, y: p.y})), |
|
backgroundColor: '#ef4444', |
|
borderColor: '#ef4444', |
|
pointRadius: 8, |
|
pointHoverRadius: 10, |
|
showLine: false, |
|
} |
|
] |
|
}, |
|
options: { |
|
responsive: true, |
|
maintainAspectRatio: false, |
|
scales: { |
|
x: { |
|
type: 'time', |
|
time: { |
|
unit: 'day' |
|
} |
|
}, |
|
y: { |
|
title: { |
|
display: true, |
|
text: 'Price' |
|
} |
|
} |
|
}, |
|
plugins: { |
|
tooltip: { |
|
callbacks: { |
|
label: function(context) { |
|
if (context.datasetIndex === 0) { |
|
return `Price: ${context.parsed.y.toFixed(2)}`; |
|
} |
|
return context.dataset.label; |
|
} |
|
} |
|
}, |
|
legend: { |
|
position: 'top', |
|
}, |
|
annotation: { |
|
annotations: { |
|
line1: { |
|
type: 'line', |
|
yMin: 1220, |
|
yMax: 1220, |
|
borderColor: 'rgb(255, 99, 132)', |
|
borderWidth: 2, |
|
borderDash: [6, 6], |
|
label: { |
|
content: 'Support', |
|
enabled: true, |
|
position: 'right' |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
}); |
|
} |
|
|
|
|
|
document.getElementById('start-algo').addEventListener('click', function() { |
|
alert('Algorithm trading started! Simulating trades...'); |
|
|
|
}); |
|
|
|
document.getElementById('stop-algo').addEventListener('click', function() { |
|
alert('Algorithm trading stopped!'); |
|
|
|
}); |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
populatePositions(); |
|
populateTrades(); |
|
initMiniChart(); |
|
initMainChart(); |
|
|
|
|
|
setInterval(function() { |
|
const currentPrice = parseFloat(document.getElementById('vn30-price').textContent.replace(/,/g, '')); |
|
const change = (Math.random() - 0.45) * 3; |
|
const newPrice = currentPrice + change; |
|
const changePercent = (change / currentPrice * 100).toFixed(2); |
|
|
|
document.getElementById('vn30-price').textContent = newPrice.toFixed(2); |
|
|
|
if (change >= 0) { |
|
document.getElementById('vn30-change').className = 'text-2xl font-bold positive'; |
|
document.getElementById('vn30-change').textContent = `+${Math.abs(change).toFixed(2)} (+${Math.abs(changePercent)}%)`; |
|
} else { |
|
document.getElementById('vn30-change').className = 'text-2xl font-bold negative'; |
|
document.getElementById('vn30-change').textContent = `-${Math.abs(change).toFixed(2)} (-${Math.abs(changePercent)}%)`; |
|
} |
|
}, 3000); |
|
}); |
|
</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=hanhnm39/vn30" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
|
</html> |
