<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced RL COB Trading Dashboard</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
</head>
<body>
    <div style="padding: 20px; font-family: Arial, sans-serif;">
        <h1> Enhanced RL COB Trading Dashboard</h1>
        <div id="status">Loading...</div>
        <div id="chart-container" style="width: 100%; height: 400px;">
            <canvas id="priceChart"></canvas>
        </div>
        <div id="predictions">Loading predictions...</div>
    </div>
    
    <script>
        console.log("Enhanced RL COB Dashboard loaded");
        document.getElementById("status").innerHTML = "Dashboard Active - RL Predictions Integration Ready";
        
        // Initialize basic chart
        const ctx = document.getElementById("priceChart").getContext("2d");
        new Chart(ctx, {
            type: "line",
            data: {
                labels: [],
                datasets: [{
                    label: "Price",
                    data: [],
                    borderColor: "#00d4ff",
                    backgroundColor: "rgba(0, 212, 255, 0.1)"
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: { beginAtZero: false }
                }
            }
        });
    </script>
</body>
</html>