Ideone.com

fork download

copy

 
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard de Monitoreo de Criptomonedas</title>
    <script src="https://c...content-available-to-author-only...e.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f7f9;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        header {
            background-color: #1e293b;
            color: white;
            padding: 15px 20px;
            border-radius: 8px 8px 0 0;
        }
        .dashboard-title {
            margin: 0;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .dropdown-container {
            display: flex;
            align-items: center;
        }
        #pair-dropdown {
            margin-left: 10px;
            padding: 8px;
            border-radius: 4px;
            border: 1px solid #ccc;
            background: #fff;
            font-size: 14px;
        }
        .tabs {
            margin-top: 20px;
            display: flex;
            border-bottom: 1px solid #ddd;
            background-color: #fff;
            border-radius: 8px 8px 0 0;
        }
        .tab {
            padding: 12px 20px;
            cursor: pointer;
            background-color: #f5f7f9;
            border: none;
            outline: none;
            font-size: 16px;
            transition: background-color 0.3s;
            border-radius: 8px 8px 0 0;
            margin-right: 2px;
        }
        .tab:hover {
            background-color: #e9ecef;
        }
        .active-tab {
            background-color: #fff;
            border-bottom: 3px solid #3b82f6;
            font-weight: 600;
        }
        .tab-content {
            display: none;
            padding: 20px;
            background-color: #fff;
            border-radius: 0 0 8px 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .active {
            display: block;
        }
        .section-title {
            font-size: 20px;
            margin-top: 0;
            margin-bottom: 20px;
            color: #1e293b;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        .rates-grid, .prices-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        .rate-card, .price-card {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 20px;
            transition: transform 0.2s;
        }
        .rate-card:hover, .price-card:hover {
            transform: translateY(-5px);
        }
        .card-title {
            font-size: 16px;
            margin-top: 0;
            color: #64748b;
        }
        .value {
            font-size: 24px;
            font-weight: 600;
            color: #0f172a;
        }
        .estado {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
            margin-top: 10px;
        }
        .LONG {
            background-color: #dcfce7;
            color: #166534;
        }
        .SHORT {
            background-color: #fee2e2;
            color: #b91c1c;
        }
        .bid-ask {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }
        .bid, .ask {
            text-align: center;
            flex: 1;
        }
        .bid .label, .ask .label {
            font-size: 14px;
            color: #64748b;
            margin-bottom: 5px;
        }
        .bid .value {
            color: #16a34a;
        }
        .ask .value {
            color: #dc2626;
        }
        .log-section {
            margin-top: 30px;
        }
        .log-title {
            font-size: 18px;
            margin-bottom: 10px;
            color: #1e293b;
        }
        .event-log {
            background-color: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 15px;
            max-height: 200px;
            overflow-y: auto;
        }
        .event-log ul {
            padding-left: 20px;
            margin: 0;
        }
        .event-log li {
            margin-bottom: 8px;
            color: #334155;
            font-size: 14px;
        }
        .charts-container {
            margin-top: 30px;
        }
        .chart-wrapper {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        .chart-title {
            font-size: 18px;
            margin-top: 0;
            margin-bottom: 15px;
            color: #1e293b;
        }
        canvas {
            width: 100% !important;
            max-height: 300px;
        }
        @media (max-width: 768px) {
            .rates-grid, .prices-grid {
                grid-template-columns: 1fr;
            }
            .tabs {
                flex-direction: column;
            }
            .tab {
                border-radius: 0;
                margin-right: 0;
                margin-bottom: 2px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="dashboard-title">
                <span>Dashboard de Criptomonedas</span>
                <div class="dropdown-container">
                    <label for="pair-dropdown">Par:</label>
                    <select id="pair-dropdown">
                        <option value="BTC/USD">BTC/USD</option>
                        <option value="ETH/USD">ETH/USD</option>
                        <option value="SOL/USD">SOL/USD</option>
                        <option value="XRP/USD">XRP/USD</option>
                    </select>
                </div>
            </div>
        </header>
 
        <div class="tabs">
            <button class="tab active-tab" data-tab="funding-tab">Tasas de Funding</button>
            <button class="tab" data-tab="prices-tab">Precios</button>
            <button class="tab" data-tab="charts-tab">Gráficos</button>
        </div>
 
        <div id="funding-tab" class="tab-content active">
            <h2 class="section-title">Tasas de Funding: <span id="pair-title-funding">BTC/USD</span></h2>
 
            <div class="rates-grid">
                <div class="rate-card">
                    <h3 class="card-title">Exch(1) Funding Rate</h3>
                    <div class="value" id="exch1-funding-rate">0.00%</div>
                    <div class="estado LONG" id="exch1-funding-estado">LONG</div>
                </div>
 
                <div class="rate-card">
                    <h3 class="card-title">Exch(2) Funding Rate</h3>
                    <div class="value" id="exch2-funding-rate">0.00%</div>
                    <div class="estado LONG" id="exch2-funding-estado">LONG</div>
                </div>
 
                <div class="rate-card">
                    <h3 class="card-title">Delta Rate</h3>
                    <div class="value" id="delta-rate">0.00%</div>
                </div>
            </div>
        </div>
 
        <div id="prices-tab" class="tab-content">
            <h2 class="section-title">Precios: <span id="pair-title-prices">BTC/USD</span></h2>
 
            <div class="prices-grid">
                <div class="price-card">
                    <h3 class="card-title">Exch(1)</h3>
                    <div class="bid-ask">
                        <div class="bid">
                            <div class="label">Bid (Compra)</div>
                            <div class="value" id="exch1-bid">0.0000</div>
                        </div>
                        <div class="ask">
                            <div class="label">Ask (Venta)</div>
                            <div class="value" id="exch1-ask">0.0000</div>
                        </div>
                    </div>
                </div>
 
                <div class="price-card">
                    <h3 class="card-title">Exch(2)</h3>
                    <div class="bid-ask">
                        <div class="bid">
                            <div class="label">Bid (Compra)</div>
                            <div class="value" id="exch2-bid">0.0000</div>
                        </div>
                        <div class="ask">
                            <div class="label">Ask (Venta)</div>
                            <div class="value" id="exch2-ask">0.0000</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
 
        <div id="charts-tab" class="tab-content">
            <h2 class="section-title">Gráficos: <span id="pair-title-charts">BTC/USD</span></h2>
 
            <div class="charts-container">
                <div class="chart-wrapper">
                    <h3 class="chart-title">Funding Rates por Intercambio</h3>
                    <canvas id="funding-rates-chart"></canvas>
                </div>
 
                <div class="chart-wrapper">
                    <h3 class="chart-title">Delta Rate con Media Móvil</h3>
                    <canvas id="delta-rate-chart"></canvas>
                </div>
            </div>
        </div>
 
        <div class="log-section">
            <h3 class="log-title">Registro de Eventos</h3>
            <div class="event-log">
                <ul id="event-log-list">
                    <!-- Los eventos se añadirán aquí dinámicamente -->
                </ul>
            </div>
        </div>
    </div>
 
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const tabButtons = document.querySelectorAll('.tab');
            const tabContents = document.querySelectorAll('.tab-content');
            const pairDropdown = document.getElementById('pair-dropdown');
            const pairTitleFunding = document.getElementById('pair-title-funding');
            const pairTitlePrices = document.getElementById('pair-title-prices');
            const pairTitleCharts = document.getElementById('pair-title-charts');
 
            const exch1FundingRateSpan = document.getElementById('exch1-funding-rate');
            const exch2FundingRateSpan = document.getElementById('exch2-funding-rate');
            const deltaRateSpan = document.getElementById('delta-rate');
            const exch1FundingEstadoSpan = document.getElementById('exch1-funding-estado');
            const exch2FundingEstadoSpan = document.getElementById('exch2-funding-estado');
 
            const exch1BidSpan = document.getElementById('exch1-bid');
            const exch1AskSpan = document.getElementById('exch1-ask');
            const exch2BidSpan = document.getElementById('exch2-bid');
            const exch2AskSpan = document.getElementById('exch2-ask');
 
            const eventLogList = document.getElementById('event-log-list');
 
            // Datos para los gráficos
            const maxDataPoints = 20;
            const fundingRatesData = {
                labels: [],
                datasets: [
                    {
                        label: 'Exch(1)',
                        data: [],
                        borderColor: 'rgb(59, 130, 246)',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        fill: false,
                        tension: 0.4
                    },
                    {
                        label: 'Exch(2)',
                        data: [],
                        borderColor: 'rgb(249, 115, 22)',
                        backgroundColor: 'rgba(249, 115, 22, 0.1)',
                        fill: false,
                        tension: 0.4
                    }
                ]
            };
 
            const deltaRateData = {
                labels: [],
                datasets: [
                    {
                        label: 'Delta Rate',
                        data: [],
                        borderColor: 'rgb(16, 185, 129)',
                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
                        fill: false,
                        tension: 0.4
                    },
                    {
                        label: 'Media Móvil (5 períodos)',
                        data: [],
                        borderColor: 'rgb(168, 85, 247)',
                        backgroundColor: 'rgba(168, 85, 247, 0.1)',
                        borderDash: [5, 5],
                        fill: false,
                        tension: 0.4
                    }
                ]
            };
 
            // Inicializar gráficos
            const fundingRatesCtx = document.getElementById('funding-rates-chart').getContext('2d');
            const fundingRatesChart = new Chart(fundingRatesCtx, {
                type: 'line',
                data: fundingRatesData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: {
                        mode: 'index',
                        intersect: false,
                    },
                    scales: {
                        y: {
                            title: {
                                display: true,
                                text: 'Funding Rate (%)'
                            },
                            ticks: {
                                callback: function(value) {
                                    return value.toFixed(2) + '%';
                                }
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: 'Tiempo'
                            }
                        }
                    },
                    plugins: {
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return context.dataset.label + ': ' + context.parsed.y.toFixed(2) + '%';
                                }
                            }
                        }
                    }
                }
            });
 
            const deltaRateCtx = document.getElementById('delta-rate-chart').getContext('2d');
            const deltaRateChart = new Chart(deltaRateCtx, {
                type: 'line',
                data: deltaRateData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: {
                        mode: 'index',
                        intersect: false,
                    },
                    scales: {
                        y: {
                            title: {
                                display: true,
                                text: 'Rate (%)'
                            },
                            ticks: {
                                callback: function(value) {
                                    return value.toFixed(2) + '%';
                                }
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: 'Tiempo'
                            }
                        }
                    },
                    plugins: {
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return context.dataset.label + ': ' + context.parsed.y.toFixed(2) + '%';
                                }
                            }
                        }
                    }
                }
            });
 
            // Funcionalidad de pestañas
            tabButtons.forEach(button => {
                button.addEventListener('click', () => {
                    const tabId = button.dataset.tab;
 
                    tabButtons.forEach(btn => btn.classList.remove('active-tab'));
                    tabContents.forEach(content => content.classList.remove('active'));
 
                    button.classList.add('active-tab');
                    document.getElementById(tabId).classList.add('active');
                });
            });
 
            // Funcionalidad del selector de pares
            pairDropdown.addEventListener('change', (event) => {
                const selectedPair = event.target.value;
                pairTitleFunding.textContent = selectedPair;
                pairTitlePrices.textContent = selectedPair;
                pairTitleCharts.textContent = selectedPair;
                // En un dashboard real, aquí se actualizarían todos los datos para el nuevo par
            });
 
            // Función para calcular la media móvil
            function calculateMovingAverage(data, windowSize) {
                if (data.length < windowSize) {
                    return Array(data.length).fill(null);
                }
 
                const result = [];
                for (let i = 0; i < data.length; i++) {
                    if (i < windowSize - 1) {
                        result.push(null);
                    } else {
                        const windowSlice = data.slice(i - windowSize + 1, i + 1);
                        const sum = windowSlice.reduce((acc, val) => acc + val, 0);
                        result.push(sum / windowSize);
                    }
                }
                return result;
            }
 
            // Función para generar datos aleatorios simulados
            function generarDatoAleatorio() {
                const fundingRate = parseFloat(randomInRange(-0.005, 0.005).toFixed(4)); // Rango típico de funding rate
                const precioBase = 0.17; // Precio base arbitrario
                const spreadPorcentaje = randomInRange(0.001, 0.005); // Spread pequeño
                const ask = precioBase * (1 + spreadPorcentaje);
                const bid = precioBase * (1 - spreadPorcentaje);
                const deltaRate = parseFloat(randomInRange(0.03, 0.05).toFixed(2));
 
                return {
                    exch1_funding_rate: fundingRate * 100, // En porcentaje
                    exch2_funding_rate: (fundingRate + randomInRange(-0.001, 0.001)) * 100, // Ligeramente diferente
                    delta_rate: deltaRate,
                    exch1_bid: bid.toFixed(4),
                    exch1_ask: ask.toFixed(4),
                    exch2_bid: (bid * (1 + randomInRange(-0.0005, 0.0005))).toFixed(4), // Ligeras diferencias
                    exch2_ask: (ask * (1 + randomInRange(-0.0005, 0.0005))).toFixed(4),
                    timestamp: Date.now()
                };
            }
 
            function randomInRange(min, max) {
                return Math.random() * (max - min) + min;
            }
 
            function actualizarDashboard() {
                const datos = generarDatoAleatorio();
 
                exch1FundingRateSpan.textContent = datos.exch1_funding_rate.toFixed(2) + '%';
                exch2FundingRateSpan.textContent = datos.exch2_funding_rate.toFixed(2) + '%';
                deltaRateSpan.textContent = datos.delta_rate + '%';
 
                exch1BidSpan.textContent = datos.exch1_bid;

CjwhRE9DVFlQRSBodG1sPgo8aHRtbCBsYW5nPSJlcyI+CjxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiPgogICAgPHRpdGxlPkRhc2hib2FyZCBkZSBNb25pdG9yZW8gZGUgQ3JpcHRvbW9uZWRhczwvdGl0bGU+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jLi4uY29udGVudC1hdmFpbGFibGUtdG8tYXV0aG9yLW9ubHkuLi5lLmNvbS9hamF4L2xpYnMvQ2hhcnQuanMvMy45LjEvY2hhcnQubWluLmpzIj48L3NjcmlwdD4KICAgIDxzdHlsZT4KICAgICAgICBib2R5IHsKICAgICAgICAgICAgZm9udC1mYW1pbHk6ICdTZWdvZSBVSScsIFRhaG9tYSwgR2VuZXZhLCBWZXJkYW5hLCBzYW5zLXNlcmlmOwogICAgICAgICAgICBtYXJnaW46IDA7CiAgICAgICAgICAgIHBhZGRpbmc6IDA7CiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICNmNWY3Zjk7CiAgICAgICAgICAgIGNvbG9yOiAjMzMzOwogICAgICAgIH0KICAgICAgICAuY29udGFpbmVyIHsKICAgICAgICAgICAgbWF4LXdpZHRoOiAxMjAwcHg7CiAgICAgICAgICAgIG1hcmdpbjogMCBhdXRvOwogICAgICAgICAgICBwYWRkaW5nOiAyMHB4OwogICAgICAgIH0KICAgICAgICBoZWFkZXIgewogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMWUyOTNiOwogICAgICAgICAgICBjb2xvcjogd2hpdGU7CiAgICAgICAgICAgIHBhZGRpbmc6IDE1cHggMjBweDsKICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogOHB4IDhweCAwIDA7CiAgICAgICAgfQogICAgICAgIC5kYXNoYm9hcmQtdGl0bGUgewogICAgICAgICAgICBtYXJnaW46IDA7CiAgICAgICAgICAgIGZvbnQtc2l6ZTogMjRweDsKICAgICAgICAgICAgZGlzcGxheTogZmxleDsKICAgICAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICAgICAgICAgICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuOwogICAgICAgIH0KICAgICAgICAuZHJvcGRvd24tY29udGFpbmVyIHsKICAgICAgICAgICAgZGlzcGxheTogZmxleDsKICAgICAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICAgICAgICB9CiAgICAgICAgI3BhaXItZHJvcGRvd24gewogICAgICAgICAgICBtYXJnaW4tbGVmdDogMTBweDsKICAgICAgICAgICAgcGFkZGluZzogOHB4OwogICAgICAgICAgICBib3JkZXItcmFkaXVzOiA0cHg7CiAgICAgICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7CiAgICAgICAgICAgIGJhY2tncm91bmQ6ICNmZmY7CiAgICAgICAgICAgIGZvbnQtc2l6ZTogMTRweDsKICAgICAgICB9CiAgICAgICAgLnRhYnMgewogICAgICAgICAgICBtYXJnaW4tdG9wOiAyMHB4OwogICAgICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICAgICAgICBib3JkZXItYm90dG9tOiAxcHggc29saWQgI2RkZDsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjsKICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogOHB4IDhweCAwIDA7CiAgICAgICAgfQogICAgICAgIC50YWIgewogICAgICAgICAgICBwYWRkaW5nOiAxMnB4IDIwcHg7CiAgICAgICAgICAgIGN1cnNvcjogcG9pbnRlcjsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2Y1ZjdmOTsKICAgICAgICAgICAgYm9yZGVyOiBub25lOwogICAgICAgICAgICBvdXRsaW5lOiBub25lOwogICAgICAgICAgICBmb250LXNpemU6IDE2cHg7CiAgICAgICAgICAgIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zczsKICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogOHB4IDhweCAwIDA7CiAgICAgICAgICAgIG1hcmdpbi1yaWdodDogMnB4OwogICAgICAgIH0KICAgICAgICAudGFiOmhvdmVyIHsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2U5ZWNlZjsKICAgICAgICB9CiAgICAgICAgLmFjdGl2ZS10YWIgewogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOwogICAgICAgICAgICBib3JkZXItYm90dG9tOiAzcHggc29saWQgIzNiODJmNjsKICAgICAgICAgICAgZm9udC13ZWlnaHQ6IDYwMDsKICAgICAgICB9CiAgICAgICAgLnRhYi1jb250ZW50IHsKICAgICAgICAgICAgZGlzcGxheTogbm9uZTsKICAgICAgICAgICAgcGFkZGluZzogMjBweDsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjsKICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogMCAwIDhweCA4cHg7CiAgICAgICAgICAgIGJveC1zaGFkb3c6IDAgMnB4IDRweCByZ2JhKDAsMCwwLDAuMDUpOwogICAgICAgIH0KICAgICAgICAuYWN0aXZlIHsKICAgICAgICAgICAgZGlzcGxheTogYmxvY2s7CiAgICAgICAgfQogICAgICAgIC5zZWN0aW9uLXRpdGxlIHsKICAgICAgICAgICAgZm9udC1zaXplOiAyMHB4OwogICAgICAgICAgICBtYXJnaW4tdG9wOiAwOwogICAgICAgICAgICBtYXJnaW4tYm90dG9tOiAyMHB4OwogICAgICAgICAgICBjb2xvcjogIzFlMjkzYjsKICAgICAgICAgICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICNlZWU7CiAgICAgICAgICAgIHBhZGRpbmctYm90dG9tOiAxMHB4OwogICAgICAgIH0KICAgICAgICAucmF0ZXMtZ3JpZCwgLnByaWNlcy1ncmlkIHsKICAgICAgICAgICAgZGlzcGxheTogZ3JpZDsKICAgICAgICAgICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoYXV0by1maXQsIG1pbm1heCgzMDBweCwgMWZyKSk7CiAgICAgICAgICAgIGdhcDogMjBweDsKICAgICAgICAgICAgbWFyZ2luLWJvdHRvbTogMzBweDsKICAgICAgICB9CiAgICAgICAgLnJhdGUtY2FyZCwgLnByaWNlLWNhcmQgewogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOwogICAgICAgICAgICBib3JkZXItcmFkaXVzOiA4cHg7CiAgICAgICAgICAgIGJveC1zaGFkb3c6IDAgMnB4IDRweCByZ2JhKDAsMCwwLDAuMSk7CiAgICAgICAgICAgIHBhZGRpbmc6IDIwcHg7CiAgICAgICAgICAgIHRyYW5zaXRpb246IHRyYW5zZm9ybSAwLjJzOwogICAgICAgIH0KICAgICAgICAucmF0ZS1jYXJkOmhvdmVyLCAucHJpY2UtY2FyZDpob3ZlciB7CiAgICAgICAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgtNXB4KTsKICAgICAgICB9CiAgICAgICAgLmNhcmQtdGl0bGUgewogICAgICAgICAgICBmb250LXNpemU6IDE2cHg7CiAgICAgICAgICAgIG1hcmdpbi10b3A6IDA7CiAgICAgICAgICAgIGNvbG9yOiAjNjQ3NDhiOwogICAgICAgIH0KICAgICAgICAudmFsdWUgewogICAgICAgICAgICBmb250LXNpemU6IDI0cHg7CiAgICAgICAgICAgIGZvbnQtd2VpZ2h0OiA2MDA7CiAgICAgICAgICAgIGNvbG9yOiAjMGYxNzJhOwogICAgICAgIH0KICAgICAgICAuZXN0YWRvIHsKICAgICAgICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrOwogICAgICAgICAgICBwYWRkaW5nOiA0cHggOHB4OwogICAgICAgICAgICBib3JkZXItcmFkaXVzOiA0cHg7CiAgICAgICAgICAgIGZvbnQtc2l6ZTogMTJweDsKICAgICAgICAgICAgZm9udC13ZWlnaHQ6IDYwMDsKICAgICAgICAgICAgbWFyZ2luLXRvcDogMTBweDsKICAgICAgICB9CiAgICAgICAgLkxPTkcgewogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZGNmY2U3OwogICAgICAgICAgICBjb2xvcjogIzE2NjUzNDsKICAgICAgICB9CiAgICAgICAgLlNIT1JUIHsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2ZlZTJlMjsKICAgICAgICAgICAgY29sb3I6ICNiOTFjMWM7CiAgICAgICAgfQogICAgICAgIC5iaWQtYXNrIHsKICAgICAgICAgICAgZGlzcGxheTogZmxleDsKICAgICAgICAgICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuOwogICAgICAgICAgICBtYXJnaW4tdG9wOiAxMHB4OwogICAgICAgIH0KICAgICAgICAuYmlkLCAuYXNrIHsKICAgICAgICAgICAgdGV4dC1hbGlnbjogY2VudGVyOwogICAgICAgICAgICBmbGV4OiAxOwogICAgICAgIH0KICAgICAgICAuYmlkIC5sYWJlbCwgLmFzayAubGFiZWwgewogICAgICAgICAgICBmb250LXNpemU6IDE0cHg7CiAgICAgICAgICAgIGNvbG9yOiAjNjQ3NDhiOwogICAgICAgICAgICBtYXJnaW4tYm90dG9tOiA1cHg7CiAgICAgICAgfQogICAgICAgIC5iaWQgLnZhbHVlIHsKICAgICAgICAgICAgY29sb3I6ICMxNmEzNGE7CiAgICAgICAgfQogICAgICAgIC5hc2sgLnZhbHVlIHsKICAgICAgICAgICAgY29sb3I6ICNkYzI2MjY7CiAgICAgICAgfQogICAgICAgIC5sb2ctc2VjdGlvbiB7CiAgICAgICAgICAgIG1hcmdpbi10b3A6IDMwcHg7CiAgICAgICAgfQogICAgICAgIC5sb2ctdGl0bGUgewogICAgICAgICAgICBmb250LXNpemU6IDE4cHg7CiAgICAgICAgICAgIG1hcmdpbi1ib3R0b206IDEwcHg7CiAgICAgICAgICAgIGNvbG9yOiAjMWUyOTNiOwogICAgICAgIH0KICAgICAgICAuZXZlbnQtbG9nIHsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2Y4ZmFmYzsKICAgICAgICAgICAgYm9yZGVyOiAxcHggc29saWQgI2UyZThmMDsKICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogOHB4OwogICAgICAgICAgICBwYWRkaW5nOiAxNXB4OwogICAgICAgICAgICBtYXgtaGVpZ2h0OiAyMDBweDsKICAgICAgICAgICAgb3ZlcmZsb3cteTogYXV0bzsKICAgICAgICB9CiAgICAgICAgLmV2ZW50LWxvZyB1bCB7CiAgICAgICAgICAgIHBhZGRpbmctbGVmdDogMjBweDsKICAgICAgICAgICAgbWFyZ2luOiAwOwogICAgICAgIH0KICAgICAgICAuZXZlbnQtbG9nIGxpIHsKICAgICAgICAgICAgbWFyZ2luLWJvdHRvbTogOHB4OwogICAgICAgICAgICBjb2xvcjogIzMzNDE1NTsKICAgICAgICAgICAgZm9udC1zaXplOiAxNHB4OwogICAgICAgIH0KICAgICAgICAuY2hhcnRzLWNvbnRhaW5lciB7CiAgICAgICAgICAgIG1hcmdpbi10b3A6IDMwcHg7CiAgICAgICAgfQogICAgICAgIC5jaGFydC13cmFwcGVyIHsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjsKICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogOHB4OwogICAgICAgICAgICBib3gtc2hhZG93OiAwIDJweCA0cHggcmdiYSgwLDAsMCwwLjEpOwogICAgICAgICAgICBwYWRkaW5nOiAyMHB4OwogICAgICAgICAgICBtYXJnaW4tYm90dG9tOiAyMHB4OwogICAgICAgIH0KICAgICAgICAuY2hhcnQtdGl0bGUgewogICAgICAgICAgICBmb250LXNpemU6IDE4cHg7CiAgICAgICAgICAgIG1hcmdpbi10b3A6IDA7CiAgICAgICAgICAgIG1hcmdpbi1ib3R0b206IDE1cHg7CiAgICAgICAgICAgIGNvbG9yOiAjMWUyOTNiOwogICAgICAgIH0KICAgICAgICBjYW52YXMgewogICAgICAgICAgICB3aWR0aDogMTAwJSAhaW1wb3J0YW50OwogICAgICAgICAgICBtYXgtaGVpZ2h0OiAzMDBweDsKICAgICAgICB9CiAgICAgICAgQG1lZGlhIChtYXgtd2lkdGg6IDc2OHB4KSB7CiAgICAgICAgICAgIC5yYXRlcy1ncmlkLCAucHJpY2VzLWdyaWQgewogICAgICAgICAgICAgICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAxZnI7CiAgICAgICAgICAgIH0KICAgICAgICAgICAgLnRhYnMgewogICAgICAgICAgICAgICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICAgICAgICAgICAgfQogICAgICAgICAgICAudGFiIHsKICAgICAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDA7CiAgICAgICAgICAgICAgICBtYXJnaW4tcmlnaHQ6IDA7CiAgICAgICAgICAgICAgICBtYXJnaW4tYm90dG9tOiAycHg7CiAgICAgICAgICAgIH0KICAgICAgICB9CiAgICA8L3N0eWxlPgo8L2hlYWQ+Cjxib2R5PgogICAgPGRpdiBjbGFzcz0iY29udGFpbmVyIj4KICAgICAgICA8aGVhZGVyPgogICAgICAgICAgICA8ZGl2IGNsYXNzPSJkYXNoYm9hcmQtdGl0bGUiPgogICAgICAgICAgICAgICAgPHNwYW4+RGFzaGJvYXJkIGRlIENyaXB0b21vbmVkYXM8L3NwYW4+CiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPSJkcm9wZG93bi1jb250YWluZXIiPgogICAgICAgICAgICAgICAgICAgIDxsYWJlbCBmb3I9InBhaXItZHJvcGRvd24iPlBhcjo8L2xhYmVsPgogICAgICAgICAgICAgICAgICAgIDxzZWxlY3QgaWQ9InBhaXItZHJvcGRvd24iPgogICAgICAgICAgICAgICAgICAgICAgICA8b3B0aW9uIHZhbHVlPSJCVEMvVVNEIj5CVEMvVVNEPC9vcHRpb24+CiAgICAgICAgICAgICAgICAgICAgICAgIDxvcHRpb24gdmFsdWU9IkVUSC9VU0QiPkVUSC9VU0Q8L29wdGlvbj4KICAgICAgICAgICAgICAgICAgICAgICAgPG9wdGlvbiB2YWx1ZT0iU09ML1VTRCI+U09ML1VTRDwvb3B0aW9uPgogICAgICAgICAgICAgICAgICAgICAgICA8b3B0aW9uIHZhbHVlPSJYUlAvVVNEIj5YUlAvVVNEPC9vcHRpb24+CiAgICAgICAgICAgICAgICAgICAgPC9zZWxlY3Q+CiAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgPC9oZWFkZXI+CgogICAgICAgIDxkaXYgY2xhc3M9InRhYnMiPgogICAgICAgICAgICA8YnV0dG9uIGNsYXNzPSJ0YWIgYWN0aXZlLXRhYiIgZGF0YS10YWI9ImZ1bmRpbmctdGFiIj5UYXNhcyBkZSBGdW5kaW5nPC9idXR0b24+CiAgICAgICAgICAgIDxidXR0b24gY2xhc3M9InRhYiIgZGF0YS10YWI9InByaWNlcy10YWIiPlByZWNpb3M8L2J1dHRvbj4KICAgICAgICAgICAgPGJ1dHRvbiBjbGFzcz0idGFiIiBkYXRhLXRhYj0iY2hhcnRzLXRhYiI+R3LDoWZpY29zPC9idXR0b24+CiAgICAgICAgPC9kaXY+CgogICAgICAgIDxkaXYgaWQ9ImZ1bmRpbmctdGFiIiBjbGFzcz0idGFiLWNvbnRlbnQgYWN0aXZlIj4KICAgICAgICAgICAgPGgyIGNsYXNzPSJzZWN0aW9uLXRpdGxlIj5UYXNhcyBkZSBGdW5kaW5nOiA8c3BhbiBpZD0icGFpci10aXRsZS1mdW5kaW5nIj5CVEMvVVNEPC9zcGFuPjwvaDI+CiAgICAgICAgICAgIAogICAgICAgICAgICA8ZGl2IGNsYXNzPSJyYXRlcy1ncmlkIj4KICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9InJhdGUtY2FyZCI+CiAgICAgICAgICAgICAgICAgICAgPGgzIGNsYXNzPSJjYXJkLXRpdGxlIj5FeGNoKDEpIEZ1bmRpbmcgUmF0ZTwvaDM+CiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0idmFsdWUiIGlkPSJleGNoMS1mdW5kaW5nLXJhdGUiPjAuMDAlPC9kaXY+CiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0iZXN0YWRvIExPTkciIGlkPSJleGNoMS1mdW5kaW5nLWVzdGFkbyI+TE9ORzwvZGl2PgogICAgICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9InJhdGUtY2FyZCI+CiAgICAgICAgICAgICAgICAgICAgPGgzIGNsYXNzPSJjYXJkLXRpdGxlIj5FeGNoKDIpIEZ1bmRpbmcgUmF0ZTwvaDM+CiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0idmFsdWUiIGlkPSJleGNoMi1mdW5kaW5nLXJhdGUiPjAuMDAlPC9kaXY+CiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0iZXN0YWRvIExPTkciIGlkPSJleGNoMi1mdW5kaW5nLWVzdGFkbyI+TE9ORzwvZGl2PgogICAgICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9InJhdGUtY2FyZCI+CiAgICAgICAgICAgICAgICAgICAgPGgzIGNsYXNzPSJjYXJkLXRpdGxlIj5EZWx0YSBSYXRlPC9oMz4KICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPSJ2YWx1ZSIgaWQ9ImRlbHRhLXJhdGUiPjAuMDAlPC9kaXY+CiAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgPC9kaXY+CgogICAgICAgIDxkaXYgaWQ9InByaWNlcy10YWIiIGNsYXNzPSJ0YWItY29udGVudCI+CiAgICAgICAgICAgIDxoMiBjbGFzcz0ic2VjdGlvbi10aXRsZSI+UHJlY2lvczogPHNwYW4gaWQ9InBhaXItdGl0bGUtcHJpY2VzIj5CVEMvVVNEPC9zcGFuPjwvaDI+CiAgICAgICAgICAgIAogICAgICAgICAgICA8ZGl2IGNsYXNzPSJwcmljZXMtZ3JpZCI+CiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPSJwcmljZS1jYXJkIj4KICAgICAgICAgICAgICAgICAgICA8aDMgY2xhc3M9ImNhcmQtdGl0bGUiPkV4Y2goMSk8L2gzPgogICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9ImJpZC1hc2siPgogICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPSJiaWQiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0ibGFiZWwiPkJpZCAoQ29tcHJhKTwvZGl2PgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0idmFsdWUiIGlkPSJleGNoMS1iaWQiPjAuMDAwMDwvZGl2PgogICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0iYXNrIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9ImxhYmVsIj5Bc2sgKFZlbnRhKTwvZGl2PgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0idmFsdWUiIGlkPSJleGNoMS1hc2siPjAuMDAwMDwvZGl2PgogICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPSJwcmljZS1jYXJkIj4KICAgICAgICAgICAgICAgICAgICA8aDMgY2xhc3M9ImNhcmQtdGl0bGUiPkV4Y2goMik8L2gzPgogICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9ImJpZC1hc2siPgogICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPSJiaWQiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0ibGFiZWwiPkJpZCAoQ29tcHJhKTwvZGl2PgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0idmFsdWUiIGlkPSJleGNoMi1iaWQiPjAuMDAwMDwvZGl2PgogICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0iYXNrIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9ImxhYmVsIj5Bc2sgKFZlbnRhKTwvZGl2PgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0idmFsdWUiIGlkPSJleGNoMi1hc2siPjAuMDAwMDwvZGl2PgogICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICA8L2Rpdj4KICAgICAgICA8L2Rpdj4KCiAgICAgICAgPGRpdiBpZD0iY2hhcnRzLXRhYiIgY2xhc3M9InRhYi1jb250ZW50Ij4KICAgICAgICAgICAgPGgyIGNsYXNzPSJzZWN0aW9uLXRpdGxlIj5HcsOhZmljb3M6IDxzcGFuIGlkPSJwYWlyLXRpdGxlLWNoYXJ0cyI+QlRDL1VTRDwvc3Bhbj48L2gyPgogICAgICAgICAgICAKICAgICAgICAgICAgPGRpdiBjbGFzcz0iY2hhcnRzLWNvbnRhaW5lciI+CiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPSJjaGFydC13cmFwcGVyIj4KICAgICAgICAgICAgICAgICAgICA8aDMgY2xhc3M9ImNoYXJ0LXRpdGxlIj5GdW5kaW5nIFJhdGVzIHBvciBJbnRlcmNhbWJpbzwvaDM+CiAgICAgICAgICAgICAgICAgICAgPGNhbnZhcyBpZD0iZnVuZGluZy1yYXRlcy1jaGFydCI+PC9jYW52YXM+CiAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0iY2hhcnQtd3JhcHBlciI+CiAgICAgICAgICAgICAgICAgICAgPGgzIGNsYXNzPSJjaGFydC10aXRsZSI+RGVsdGEgUmF0ZSBjb24gTWVkaWEgTcOzdmlsPC9oMz4KICAgICAgICAgICAgICAgICAgICA8Y2FudmFzIGlkPSJkZWx0YS1yYXRlLWNoYXJ0Ij48L2NhbnZhcz4KICAgICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICA8L2Rpdj4KICAgICAgICA8L2Rpdj4KCiAgICAgICAgPGRpdiBjbGFzcz0ibG9nLXNlY3Rpb24iPgogICAgICAgICAgICA8aDMgY2xhc3M9ImxvZy10aXRsZSI+UmVnaXN0cm8gZGUgRXZlbnRvczwvaDM+CiAgICAgICAgICAgIDxkaXYgY2xhc3M9ImV2ZW50LWxvZyI+CiAgICAgICAgICAgICAgICA8dWwgaWQ9ImV2ZW50LWxvZy1saXN0Ij4KICAgICAgICAgICAgICAgICAgICA8IS0tIExvcyBldmVudG9zIHNlIGHDsWFkaXLDoW4gYXF1w60gZGluw6FtaWNhbWVudGUgLS0+CiAgICAgICAgICAgICAgICA8L3VsPgogICAgICAgICAgICA8L2Rpdj4KICAgICAgICA8L2Rpdj4KICAgIDwvZGl2PgoKICAgIDxzY3JpcHQ+CiAgICAgICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignRE9NQ29udGVudExvYWRlZCcsICgpID0+IHsKICAgICAgICAgICAgY29uc3QgdGFiQnV0dG9ucyA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoJy50YWInKTsKICAgICAgICAgICAgY29uc3QgdGFiQ29udGVudHMgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCcudGFiLWNvbnRlbnQnKTsKICAgICAgICAgICAgY29uc3QgcGFpckRyb3Bkb3duID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3BhaXItZHJvcGRvd24nKTsKICAgICAgICAgICAgY29uc3QgcGFpclRpdGxlRnVuZGluZyA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwYWlyLXRpdGxlLWZ1bmRpbmcnKTsKICAgICAgICAgICAgY29uc3QgcGFpclRpdGxlUHJpY2VzID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3BhaXItdGl0bGUtcHJpY2VzJyk7CiAgICAgICAgICAgIGNvbnN0IHBhaXJUaXRsZUNoYXJ0cyA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwYWlyLXRpdGxlLWNoYXJ0cycpOwoKICAgICAgICAgICAgY29uc3QgZXhjaDFGdW5kaW5nUmF0ZVNwYW4gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZXhjaDEtZnVuZGluZy1yYXRlJyk7CiAgICAgICAgICAgIGNvbnN0IGV4Y2gyRnVuZGluZ1JhdGVTcGFuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2V4Y2gyLWZ1bmRpbmctcmF0ZScpOwogICAgICAgICAgICBjb25zdCBkZWx0YVJhdGVTcGFuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2RlbHRhLXJhdGUnKTsKICAgICAgICAgICAgY29uc3QgZXhjaDFGdW5kaW5nRXN0YWRvU3BhbiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdleGNoMS1mdW5kaW5nLWVzdGFkbycpOwogICAgICAgICAgICBjb25zdCBleGNoMkZ1bmRpbmdFc3RhZG9TcGFuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2V4Y2gyLWZ1bmRpbmctZXN0YWRvJyk7CgogICAgICAgICAgICBjb25zdCBleGNoMUJpZFNwYW4gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZXhjaDEtYmlkJyk7CiAgICAgICAgICAgIGNvbnN0IGV4Y2gxQXNrU3BhbiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdleGNoMS1hc2snKTsKICAgICAgICAgICAgY29uc3QgZXhjaDJCaWRTcGFuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2V4Y2gyLWJpZCcpOwogICAgICAgICAgICBjb25zdCBleGNoMkFza1NwYW4gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZXhjaDItYXNrJyk7CgogICAgICAgICAgICBjb25zdCBldmVudExvZ0xpc3QgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZXZlbnQtbG9nLWxpc3QnKTsKCiAgICAgICAgICAgIC8vIERhdG9zIHBhcmEgbG9zIGdyw6FmaWNvcwogICAgICAgICAgICBjb25zdCBtYXhEYXRhUG9pbnRzID0gMjA7CiAgICAgICAgICAgIGNvbnN0IGZ1bmRpbmdSYXRlc0RhdGEgPSB7CiAgICAgICAgICAgICAgICBsYWJlbHM6IFtdLAogICAgICAgICAgICAgICAgZGF0YXNldHM6IFsKICAgICAgICAgICAgICAgICAgICB7CiAgICAgICAgICAgICAgICAgICAgICAgIGxhYmVsOiAnRXhjaCgxKScsCiAgICAgICAgICAgICAgICAgICAgICAgIGRhdGE6IFtdLAogICAgICAgICAgICAgICAgICAgICAgICBib3JkZXJDb2xvcjogJ3JnYig1OSwgMTMwLCAyNDYpJywKICAgICAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAncmdiYSg1OSwgMTMwLCAyNDYsIDAuMSknLAogICAgICAgICAgICAgICAgICAgICAgICBmaWxsOiBmYWxzZSwKICAgICAgICAgICAgICAgICAgICAgICAgdGVuc2lvbjogMC40CiAgICAgICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAgICAgICB7CiAgICAgICAgICAgICAgICAgICAgICAgIGxhYmVsOiAnRXhjaCgyKScsCiAgICAgICAgICAgICAgICAgICAgICAgIGRhdGE6IFtdLAogICAgICAgICAgICAgICAgICAgICAgICBib3JkZXJDb2xvcjogJ3JnYigyNDksIDExNSwgMjIpJywKICAgICAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAncmdiYSgyNDksIDExNSwgMjIsIDAuMSknLAogICAgICAgICAgICAgICAgICAgICAgICBmaWxsOiBmYWxzZSwKICAgICAgICAgICAgICAgICAgICAgICAgdGVuc2lvbjogMC40CiAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgXQogICAgICAgICAgICB9OwoKICAgICAgICAgICAgY29uc3QgZGVsdGFSYXRlRGF0YSA9IHsKICAgICAgICAgICAgICAgIGxhYmVsczogW10sCiAgICAgICAgICAgICAgICBkYXRhc2V0czogWwogICAgICAgICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgICAgICAgICAgbGFiZWw6ICdEZWx0YSBSYXRlJywKICAgICAgICAgICAgICAgICAgICAgICAgZGF0YTogW10sCiAgICAgICAgICAgICAgICAgICAgICAgIGJvcmRlckNvbG9yOiAncmdiKDE2LCAxODUsIDEyOSknLAogICAgICAgICAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6ICdyZ2JhKDE2LCAxODUsIDEyOSwgMC4xKScsCiAgICAgICAgICAgICAgICAgICAgICAgIGZpbGw6IGZhbHNlLAogICAgICAgICAgICAgICAgICAgICAgICB0ZW5zaW9uOiAwLjQKICAgICAgICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgICAgICAgICAgbGFiZWw6ICdNZWRpYSBNw7N2aWwgKDUgcGVyw61vZG9zKScsCiAgICAgICAgICAgICAgICAgICAgICAgIGRhdGE6IFtdLAogICAgICAgICAgICAgICAgICAgICAgICBib3JkZXJDb2xvcjogJ3JnYigxNjgsIDg1LCAyNDcpJywKICAgICAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAncmdiYSgxNjgsIDg1LCAyNDcsIDAuMSknLAogICAgICAgICAgICAgICAgICAgICAgICBib3JkZXJEYXNoOiBbNSwgNV0sCiAgICAgICAgICAgICAgICAgICAgICAgIGZpbGw6IGZhbHNlLAogICAgICAgICAgICAgICAgICAgICAgICB0ZW5zaW9uOiAwLjQKICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICBdCiAgICAgICAgICAgIH07CgogICAgICAgICAgICAvLyBJbmljaWFsaXphciBncsOhZmljb3MKICAgICAgICAgICAgY29uc3QgZnVuZGluZ1JhdGVzQ3R4ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2Z1bmRpbmctcmF0ZXMtY2hhcnQnKS5nZXRDb250ZXh0KCcyZCcpOwogICAgICAgICAgICBjb25zdCBmdW5kaW5nUmF0ZXNDaGFydCA9IG5ldyBDaGFydChmdW5kaW5nUmF0ZXNDdHgsIHsKICAgICAgICAgICAgICAgIHR5cGU6ICdsaW5lJywKICAgICAgICAgICAgICAgIGRhdGE6IGZ1bmRpbmdSYXRlc0RhdGEsCiAgICAgICAgICAgICAgICBvcHRpb25zOiB7CiAgICAgICAgICAgICAgICAgICAgcmVzcG9uc2l2ZTogdHJ1ZSwKICAgICAgICAgICAgICAgICAgICBtYWludGFpbkFzcGVjdFJhdGlvOiBmYWxzZSwKICAgICAgICAgICAgICAgICAgICBpbnRlcmFjdGlvbjogewogICAgICAgICAgICAgICAgICAgICAgICBtb2RlOiAnaW5kZXgnLAogICAgICAgICAgICAgICAgICAgICAgICBpbnRlcnNlY3Q6IGZhbHNlLAogICAgICAgICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgICAgICAgc2NhbGVzOiB7CiAgICAgICAgICAgICAgICAgICAgICAgIHk6IHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgIHRpdGxlOiB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZGlzcGxheTogdHJ1ZSwKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0ZXh0OiAnRnVuZGluZyBSYXRlICglKScKICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB0aWNrczogewogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNhbGxiYWNrOiBmdW5jdGlvbih2YWx1ZSkgewogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICByZXR1cm4gdmFsdWUudG9GaXhlZCgyKSArICclJzsKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgICAgICAgICAgIHg6IHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgIHRpdGxlOiB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZGlzcGxheTogdHJ1ZSwKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0ZXh0OiAnVGllbXBvJwogICAgICAgICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAgICAgICBwbHVnaW5zOiB7CiAgICAgICAgICAgICAgICAgICAgICAgIHRvb2x0aXA6IHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNhbGxiYWNrczogewogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGxhYmVsOiBmdW5jdGlvbihjb250ZXh0KSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHJldHVybiBjb250ZXh0LmRhdGFzZXQubGFiZWwgKyAnOiAnICsgY29udGV4dC5wYXJzZWQueS50b0ZpeGVkKDIpICsgJyUnOwogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgfSk7CgogICAgICAgICAgICBjb25zdCBkZWx0YVJhdGVDdHggPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZGVsdGEtcmF0ZS1jaGFydCcpLmdldENvbnRleHQoJzJkJyk7CiAgICAgICAgICAgIGNvbnN0IGRlbHRhUmF0ZUNoYXJ0ID0gbmV3IENoYXJ0KGRlbHRhUmF0ZUN0eCwgewogICAgICAgICAgICAgICAgdHlwZTogJ2xpbmUnLAogICAgICAgICAgICAgICAgZGF0YTogZGVsdGFSYXRlRGF0YSwKICAgICAgICAgICAgICAgIG9wdGlvbnM6IHsKICAgICAgICAgICAgICAgICAgICByZXNwb25zaXZlOiB0cnVlLAogICAgICAgICAgICAgICAgICAgIG1haW50YWluQXNwZWN0UmF0aW86IGZhbHNlLAogICAgICAgICAgICAgICAgICAgIGludGVyYWN0aW9uOiB7CiAgICAgICAgICAgICAgICAgICAgICAgIG1vZGU6ICdpbmRleCcsCiAgICAgICAgICAgICAgICAgICAgICAgIGludGVyc2VjdDogZmFsc2UsCiAgICAgICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAgICAgICBzY2FsZXM6IHsKICAgICAgICAgICAgICAgICAgICAgICAgeTogewogICAgICAgICAgICAgICAgICAgICAgICAgICAgdGl0bGU6IHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBkaXNwbGF5OiB0cnVlLAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHRleHQ6ICdSYXRlICglKScKICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB0aWNrczogewogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNhbGxiYWNrOiBmdW5jdGlvbih2YWx1ZSkgewogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICByZXR1cm4gdmFsdWUudG9GaXhlZCgyKSArICclJzsKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgICAgICAgICAgIHg6IHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgIHRpdGxlOiB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZGlzcGxheTogdHJ1ZSwKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0ZXh0OiAnVGllbXBvJwogICAgICAgICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAgICAgICBwbHVnaW5zOiB7CiAgICAgICAgICAgICAgICAgICAgICAgIHRvb2x0aXA6IHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNhbGxiYWNrczogewogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGxhYmVsOiBmdW5jdGlvbihjb250ZXh0KSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHJldHVybiBjb250ZXh0LmRhdGFzZXQubGFiZWwgKyAnOiAnICsgY29udGV4dC5wYXJzZWQueS50b0ZpeGVkKDIpICsgJyUnOwogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgfSk7CgogICAgICAgICAgICAvLyBGdW5jaW9uYWxpZGFkIGRlIHBlc3Rhw7FhcwogICAgICAgICAgICB0YWJCdXR0b25zLmZvckVhY2goYnV0dG9uID0+IHsKICAgICAgICAgICAgICAgIGJ1dHRvbi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsICgpID0+IHsKICAgICAgICAgICAgICAgICAgICBjb25zdCB0YWJJZCA9IGJ1dHRvbi5kYXRhc2V0LnRhYjsKCiAgICAgICAgICAgICAgICAgICAgdGFiQnV0dG9ucy5mb3JFYWNoKGJ0biA9PiBidG4uY2xhc3NMaXN0LnJlbW92ZSgnYWN0aXZlLXRhYicpKTsKICAgICAgICAgICAgICAgICAgICB0YWJDb250ZW50cy5mb3JFYWNoKGNvbnRlbnQgPT4gY29udGVudC5jbGFzc0xpc3QucmVtb3ZlKCdhY3RpdmUnKSk7CgogICAgICAgICAgICAgICAgICAgIGJ1dHRvbi5jbGFzc0xpc3QuYWRkKCdhY3RpdmUtdGFiJyk7CiAgICAgICAgICAgICAgICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQodGFiSWQpLmNsYXNzTGlzdC5hZGQoJ2FjdGl2ZScpOwogICAgICAgICAgICAgICAgfSk7CiAgICAgICAgICAgIH0pOwoKICAgICAgICAgICAgLy8gRnVuY2lvbmFsaWRhZCBkZWwgc2VsZWN0b3IgZGUgcGFyZXMKICAgICAgICAgICAgcGFpckRyb3Bkb3duLmFkZEV2ZW50TGlzdGVuZXIoJ2NoYW5nZScsIChldmVudCkgPT4gewogICAgICAgICAgICAgICAgY29uc3Qgc2VsZWN0ZWRQYWlyID0gZXZlbnQudGFyZ2V0LnZhbHVlOwogICAgICAgICAgICAgICAgcGFpclRpdGxlRnVuZGluZy50ZXh0Q29udGVudCA9IHNlbGVjdGVkUGFpcjsKICAgICAgICAgICAgICAgIHBhaXJUaXRsZVByaWNlcy50ZXh0Q29udGVudCA9IHNlbGVjdGVkUGFpcjsKICAgICAgICAgICAgICAgIHBhaXJUaXRsZUNoYXJ0cy50ZXh0Q29udGVudCA9IHNlbGVjdGVkUGFpcjsKICAgICAgICAgICAgICAgIC8vIEVuIHVuIGRhc2hib2FyZCByZWFsLCBhcXXDrSBzZSBhY3R1YWxpemFyw61hbiB0b2RvcyBsb3MgZGF0b3MgcGFyYSBlbCBudWV2byBwYXIKICAgICAgICAgICAgfSk7CgogICAgICAgICAgICAvLyBGdW5jacOzbiBwYXJhIGNhbGN1bGFyIGxhIG1lZGlhIG3Ds3ZpbAogICAgICAgICAgICBmdW5jdGlvbiBjYWxjdWxhdGVNb3ZpbmdBdmVyYWdlKGRhdGEsIHdpbmRvd1NpemUpIHsKICAgICAgICAgICAgICAgIGlmIChkYXRhLmxlbmd0aCA8IHdpbmRvd1NpemUpIHsKICAgICAgICAgICAgICAgICAgICByZXR1cm4gQXJyYXkoZGF0YS5sZW5ndGgpLmZpbGwobnVsbCk7CiAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgIGNvbnN0IHJlc3VsdCA9IFtdOwogICAgICAgICAgICAgICAgZm9yIChsZXQgaSA9IDA7IGkgPCBkYXRhLmxlbmd0aDsgaSsrKSB7CiAgICAgICAgICAgICAgICAgICAgaWYgKGkgPCB3aW5kb3dTaXplIC0gMSkgewogICAgICAgICAgICAgICAgICAgICAgICByZXN1bHQucHVzaChudWxsKTsKICAgICAgICAgICAgICAgICAgICB9IGVsc2UgewogICAgICAgICAgICAgICAgICAgICAgICBjb25zdCB3aW5kb3dTbGljZSA9IGRhdGEuc2xpY2UoaSAtIHdpbmRvd1NpemUgKyAxLCBpICsgMSk7CiAgICAgICAgICAgICAgICAgICAgICAgIGNvbnN0IHN1bSA9IHdpbmRvd1NsaWNlLnJlZHVjZSgoYWNjLCB2YWwpID0+IGFjYyArIHZhbCwgMCk7CiAgICAgICAgICAgICAgICAgICAgICAgIHJlc3VsdC5wdXNoKHN1bSAvIHdpbmRvd1NpemUpOwogICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgIHJldHVybiByZXN1bHQ7CiAgICAgICAgICAgIH0KCiAgICAgICAgICAgIC8vIEZ1bmNpw7NuIHBhcmEgZ2VuZXJhciBkYXRvcyBhbGVhdG9yaW9zIHNpbXVsYWRvcwogICAgICAgICAgICBmdW5jdGlvbiBnZW5lcmFyRGF0b0FsZWF0b3JpbygpIHsKICAgICAgICAgICAgICAgIGNvbnN0IGZ1bmRpbmdSYXRlID0gcGFyc2VGbG9hdChyYW5kb21JblJhbmdlKC0wLjAwNSwgMC4wMDUpLnRvRml4ZWQoNCkpOyAvLyBSYW5nbyB0w61waWNvIGRlIGZ1bmRpbmcgcmF0ZQogICAgICAgICAgICAgICAgY29uc3QgcHJlY2lvQmFzZSA9IDAuMTc7IC8vIFByZWNpbyBiYXNlIGFyYml0cmFyaW8KICAgICAgICAgICAgICAgIGNvbnN0IHNwcmVhZFBvcmNlbnRhamUgPSByYW5kb21JblJhbmdlKDAuMDAxLCAwLjAwNSk7IC8vIFNwcmVhZCBwZXF1ZcOxbwogICAgICAgICAgICAgICAgY29uc3QgYXNrID0gcHJlY2lvQmFzZSAqICgxICsgc3ByZWFkUG9yY2VudGFqZSk7CiAgICAgICAgICAgICAgICBjb25zdCBiaWQgPSBwcmVjaW9CYXNlICogKDEgLSBzcHJlYWRQb3JjZW50YWplKTsKICAgICAgICAgICAgICAgIGNvbnN0IGRlbHRhUmF0ZSA9IHBhcnNlRmxvYXQocmFuZG9tSW5SYW5nZSgwLjAzLCAwLjA1KS50b0ZpeGVkKDIpKTsKCiAgICAgICAgICAgICAgICByZXR1cm4gewogICAgICAgICAgICAgICAgICAgIGV4Y2gxX2Z1bmRpbmdfcmF0ZTogZnVuZGluZ1JhdGUgKiAxMDAsIC8vIEVuIHBvcmNlbnRhamUKICAgICAgICAgICAgICAgICAgICBleGNoMl9mdW5kaW5nX3JhdGU6IChmdW5kaW5nUmF0ZSArIHJhbmRvbUluUmFuZ2UoLTAuMDAxLCAwLjAwMSkpICogMTAwLCAvLyBMaWdlcmFtZW50ZSBkaWZlcmVudGUKICAgICAgICAgICAgICAgICAgICBkZWx0YV9yYXRlOiBkZWx0YVJhdGUsCiAgICAgICAgICAgICAgICAgICAgZXhjaDFfYmlkOiBiaWQudG9GaXhlZCg0KSwKICAgICAgICAgICAgICAgICAgICBleGNoMV9hc2s6IGFzay50b0ZpeGVkKDQpLAogICAgICAgICAgICAgICAgICAgIGV4Y2gyX2JpZDogKGJpZCAqICgxICsgcmFuZG9tSW5SYW5nZSgtMC4wMDA1LCAwLjAwMDUpKSkudG9GaXhlZCg0KSwgLy8gTGlnZXJhcyBkaWZlcmVuY2lhcwogICAgICAgICAgICAgICAgICAgIGV4Y2gyX2FzazogKGFzayAqICgxICsgcmFuZG9tSW5SYW5nZSgtMC4wMDA1LCAwLjAwMDUpKSkudG9GaXhlZCg0KSwKICAgICAgICAgICAgICAgICAgICB0aW1lc3RhbXA6IERhdGUubm93KCkKICAgICAgICAgICAgICAgIH07CiAgICAgICAgICAgIH0KCiAgICAgICAgICAgIGZ1bmN0aW9uIHJhbmRvbUluUmFuZ2UobWluLCBtYXgpIHsKICAgICAgICAgICAgICAgIHJldHVybiBNYXRoLnJhbmRvbSgpICogKG1heCAtIG1pbikgKyBtaW47CiAgICAgICAgICAgIH0KCiAgICAgICAgICAgIGZ1bmN0aW9uIGFjdHVhbGl6YXJEYXNoYm9hcmQoKSB7CiAgICAgICAgICAgICAgICBjb25zdCBkYXRvcyA9IGdlbmVyYXJEYXRvQWxlYXRvcmlvKCk7CgogICAgICAgICAgICAgICAgZXhjaDFGdW5kaW5nUmF0ZVNwYW4udGV4dENvbnRlbnQgPSBkYXRvcy5leGNoMV9mdW5kaW5nX3JhdGUudG9GaXhlZCgyKSArICclJzsKICAgICAgICAgICAgICAgIGV4Y2gyRnVuZGluZ1JhdGVTcGFuLnRleHRDb250ZW50ID0gZGF0b3MuZXhjaDJfZnVuZGluZ19yYXRlLnRvRml4ZWQoMikgKyAnJSc7CiAgICAgICAgICAgICAgICBkZWx0YVJhdGVTcGFuLnRleHRDb250ZW50ID0gZGF0b3MuZGVsdGFfcmF0ZSArICclJzsKCiAgICAgICAgICAgICAgICBleGNoMUJpZFNwYW4udGV4dENvbnRlbnQgPSBkYXRvcy5leGNoMV9iaWQ7CiAgIA==

Success #stdin #stdout 0.02s 25660KB

stdin

copy

Standard input is empty

stdout

copy

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard de Monitoreo de Criptomonedas</title>
    <script src="https://c...content-available-to-author-only...e.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f7f9;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        header {
            background-color: #1e293b;
            color: white;
            padding: 15px 20px;
            border-radius: 8px 8px 0 0;
        }
        .dashboard-title {
            margin: 0;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .dropdown-container {
            display: flex;
            align-items: center;
        }
        #pair-dropdown {
            margin-left: 10px;
            padding: 8px;
            border-radius: 4px;
            border: 1px solid #ccc;
            background: #fff;
            font-size: 14px;
        }
        .tabs {
            margin-top: 20px;
            display: flex;
            border-bottom: 1px solid #ddd;
            background-color: #fff;
            border-radius: 8px 8px 0 0;
        }
        .tab {
            padding: 12px 20px;
            cursor: pointer;
            background-color: #f5f7f9;
            border: none;
            outline: none;
            font-size: 16px;
            transition: background-color 0.3s;
            border-radius: 8px 8px 0 0;
            margin-right: 2px;
        }
        .tab:hover {
            background-color: #e9ecef;
        }
        .active-tab {
            background-color: #fff;
            border-bottom: 3px solid #3b82f6;
            font-weight: 600;
        }
        .tab-content {
            display: none;
            padding: 20px;
            background-color: #fff;
            border-radius: 0 0 8px 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .active {
            display: block;
        }
        .section-title {
            font-size: 20px;
            margin-top: 0;
            margin-bottom: 20px;
            color: #1e293b;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        .rates-grid, .prices-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        .rate-card, .price-card {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 20px;
            transition: transform 0.2s;
        }
        .rate-card:hover, .price-card:hover {
            transform: translateY(-5px);
        }
        .card-title {
            font-size: 16px;
            margin-top: 0;
            color: #64748b;
        }
        .value {
            font-size: 24px;
            font-weight: 600;
            color: #0f172a;
        }
        .estado {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
            margin-top: 10px;
        }
        .LONG {
            background-color: #dcfce7;
            color: #166534;
        }
        .SHORT {
            background-color: #fee2e2;
            color: #b91c1c;
        }
        .bid-ask {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }
        .bid, .ask {
            text-align: center;
            flex: 1;
        }
        .bid .label, .ask .label {
            font-size: 14px;
            color: #64748b;
            margin-bottom: 5px;
        }
        .bid .value {
            color: #16a34a;
        }
        .ask .value {
            color: #dc2626;
        }
        .log-section {
            margin-top: 30px;
        }
        .log-title {
            font-size: 18px;
            margin-bottom: 10px;
            color: #1e293b;
        }
        .event-log {
            background-color: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 15px;
            max-height: 200px;
            overflow-y: auto;
        }
        .event-log ul {
            padding-left: 20px;
            margin: 0;
        }
        .event-log li {
            margin-bottom: 8px;
            color: #334155;
            font-size: 14px;
        }
        .charts-container {
            margin-top: 30px;
        }
        .chart-wrapper {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        .chart-title {
            font-size: 18px;
            margin-top: 0;
            margin-bottom: 15px;
            color: #1e293b;
        }
        canvas {
            width: 100% !important;
            max-height: 300px;
        }
        @media (max-width: 768px) {
            .rates-grid, .prices-grid {
                grid-template-columns: 1fr;
            }
            .tabs {
                flex-direction: column;
            }
            .tab {
                border-radius: 0;
                margin-right: 0;
                margin-bottom: 2px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="dashboard-title">
                <span>Dashboard de Criptomonedas</span>
                <div class="dropdown-container">
                    <label for="pair-dropdown">Par:</label>
                    <select id="pair-dropdown">
                        <option value="BTC/USD">BTC/USD</option>
                        <option value="ETH/USD">ETH/USD</option>
                        <option value="SOL/USD">SOL/USD</option>
                        <option value="XRP/USD">XRP/USD</option>
                    </select>
                </div>
            </div>
        </header>

        <div class="tabs">
            <button class="tab active-tab" data-tab="funding-tab">Tasas de Funding</button>
            <button class="tab" data-tab="prices-tab">Precios</button>
            <button class="tab" data-tab="charts-tab">Gráficos</button>
        </div>

        <div id="funding-tab" class="tab-content active">
            <h2 class="section-title">Tasas de Funding: <span id="pair-title-funding">BTC/USD</span></h2>
            
            <div class="rates-grid">
                <div class="rate-card">
                    <h3 class="card-title">Exch(1) Funding Rate</h3>
                    <div class="value" id="exch1-funding-rate">0.00%</div>
                    <div class="estado LONG" id="exch1-funding-estado">LONG</div>
                </div>
                
                <div class="rate-card">
                    <h3 class="card-title">Exch(2) Funding Rate</h3>
                    <div class="value" id="exch2-funding-rate">0.00%</div>
                    <div class="estado LONG" id="exch2-funding-estado">LONG</div>
                </div>
                
                <div class="rate-card">
                    <h3 class="card-title">Delta Rate</h3>
                    <div class="value" id="delta-rate">0.00%</div>
                </div>
            </div>
        </div>

        <div id="prices-tab" class="tab-content">
            <h2 class="section-title">Precios: <span id="pair-title-prices">BTC/USD</span></h2>
            
            <div class="prices-grid">
                <div class="price-card">
                    <h3 class="card-title">Exch(1)</h3>
                    <div class="bid-ask">
                        <div class="bid">
                            <div class="label">Bid (Compra)</div>
                            <div class="value" id="exch1-bid">0.0000</div>
                        </div>
                        <div class="ask">
                            <div class="label">Ask (Venta)</div>
                            <div class="value" id="exch1-ask">0.0000</div>
                        </div>
                    </div>
                </div>
                
                <div class="price-card">
                    <h3 class="card-title">Exch(2)</h3>
                    <div class="bid-ask">
                        <div class="bid">
                            <div class="label">Bid (Compra)</div>
                            <div class="value" id="exch2-bid">0.0000</div>
                        </div>
                        <div class="ask">
                            <div class="label">Ask (Venta)</div>
                            <div class="value" id="exch2-ask">0.0000</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="charts-tab" class="tab-content">
            <h2 class="section-title">Gráficos: <span id="pair-title-charts">BTC/USD</span></h2>
            
            <div class="charts-container">
                <div class="chart-wrapper">
                    <h3 class="chart-title">Funding Rates por Intercambio</h3>
                    <canvas id="funding-rates-chart"></canvas>
                </div>
                
                <div class="chart-wrapper">
                    <h3 class="chart-title">Delta Rate con Media Móvil</h3>
                    <canvas id="delta-rate-chart"></canvas>
                </div>
            </div>
        </div>

        <div class="log-section">
            <h3 class="log-title">Registro de Eventos</h3>
            <div class="event-log">
                <ul id="event-log-list">
                    <!-- Los eventos se añadirán aquí dinámicamente -->
                </ul>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const tabButtons = document.querySelectorAll('.tab');
            const tabContents = document.querySelectorAll('.tab-content');
            const pairDropdown = document.getElementById('pair-dropdown');
            const pairTitleFunding = document.getElementById('pair-title-funding');
            const pairTitlePrices = document.getElementById('pair-title-prices');
            const pairTitleCharts = document.getElementById('pair-title-charts');

            const exch1FundingRateSpan = document.getElementById('exch1-funding-rate');
            const exch2FundingRateSpan = document.getElementById('exch2-funding-rate');
            const deltaRateSpan = document.getElementById('delta-rate');
            const exch1FundingEstadoSpan = document.getElementById('exch1-funding-estado');
            const exch2FundingEstadoSpan = document.getElementById('exch2-funding-estado');

            const exch1BidSpan = document.getElementById('exch1-bid');
            const exch1AskSpan = document.getElementById('exch1-ask');
            const exch2BidSpan = document.getElementById('exch2-bid');
            const exch2AskSpan = document.getElementById('exch2-ask');

            const eventLogList = document.getElementById('event-log-list');

            // Datos para los gráficos
            const maxDataPoints = 20;
            const fundingRatesData = {
                labels: [],
                datasets: [
                    {
                        label: 'Exch(1)',
                        data: [],
                        borderColor: 'rgb(59, 130, 246)',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        fill: false,
                        tension: 0.4
                    },
                    {
                        label: 'Exch(2)',
                        data: [],
                        borderColor: 'rgb(249, 115, 22)',
                        backgroundColor: 'rgba(249, 115, 22, 0.1)',
                        fill: false,
                        tension: 0.4
                    }
                ]
            };

            const deltaRateData = {
                labels: [],
                datasets: [
                    {
                        label: 'Delta Rate',
                        data: [],
                        borderColor: 'rgb(16, 185, 129)',
                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
                        fill: false,
                        tension: 0.4
                    },
                    {
                        label: 'Media Móvil (5 períodos)',
                        data: [],
                        borderColor: 'rgb(168, 85, 247)',
                        backgroundColor: 'rgba(168, 85, 247, 0.1)',
                        borderDash: [5, 5],
                        fill: false,
                        tension: 0.4
                    }
                ]
            };

            // Inicializar gráficos
            const fundingRatesCtx = document.getElementById('funding-rates-chart').getContext('2d');
            const fundingRatesChart = new Chart(fundingRatesCtx, {
                type: 'line',
                data: fundingRatesData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: {
                        mode: 'index',
                        intersect: false,
                    },
                    scales: {
                        y: {
                            title: {
                                display: true,
                                text: 'Funding Rate (%)'
                            },
                            ticks: {
                                callback: function(value) {
                                    return value.toFixed(2) + '%';
                                }
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: 'Tiempo'
                            }
                        }
                    },
                    plugins: {
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return context.dataset.label + ': ' + context.parsed.y.toFixed(2) + '%';
                                }
                            }
                        }
                    }
                }
            });

            const deltaRateCtx = document.getElementById('delta-rate-chart').getContext('2d');
            const deltaRateChart = new Chart(deltaRateCtx, {
                type: 'line',
                data: deltaRateData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: {
                        mode: 'index',
                        intersect: false,
                    },
                    scales: {
                        y: {
                            title: {
                                display: true,
                                text: 'Rate (%)'
                            },
                            ticks: {
                                callback: function(value) {
                                    return value.toFixed(2) + '%';
                                }
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: 'Tiempo'
                            }
                        }
                    },
                    plugins: {
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return context.dataset.label + ': ' + context.parsed.y.toFixed(2) + '%';
                                }
                            }
                        }
                    }
                }
            });

            // Funcionalidad de pestañas
            tabButtons.forEach(button => {
                button.addEventListener('click', () => {
                    const tabId = button.dataset.tab;

                    tabButtons.forEach(btn => btn.classList.remove('active-tab'));
                    tabContents.forEach(content => content.classList.remove('active'));

                    button.classList.add('active-tab');
                    document.getElementById(tabId).classList.add('active');
                });
            });

            // Funcionalidad del selector de pares
            pairDropdown.addEventListener('change', (event) => {
                const selectedPair = event.target.value;
                pairTitleFunding.textContent = selectedPair;
                pairTitlePrices.textContent = selectedPair;
                pairTitleCharts.textContent = selectedPair;
                // En un dashboard real, aquí se actualizarían todos los datos para el nuevo par
            });

            // Función para calcular la media móvil
            function calculateMovingAverage(data, windowSize) {
                if (data.length < windowSize) {
                    return Array(data.length).fill(null);
                }
                
                const result = [];
                for (let i = 0; i < data.length; i++) {
                    if (i < windowSize - 1) {
                        result.push(null);
                    } else {
                        const windowSlice = data.slice(i - windowSize + 1, i + 1);
                        const sum = windowSlice.reduce((acc, val) => acc + val, 0);
                        result.push(sum / windowSize);
                    }
                }
                return result;
            }

            // Función para generar datos aleatorios simulados
            function generarDatoAleatorio() {
                const fundingRate = parseFloat(randomInRange(-0.005, 0.005).toFixed(4)); // Rango típico de funding rate
                const precioBase = 0.17; // Precio base arbitrario
                const spreadPorcentaje = randomInRange(0.001, 0.005); // Spread pequeño
                const ask = precioBase * (1 + spreadPorcentaje);
                const bid = precioBase * (1 - spreadPorcentaje);
                const deltaRate = parseFloat(randomInRange(0.03, 0.05).toFixed(2));

                return {
                    exch1_funding_rate: fundingRate * 100, // En porcentaje
                    exch2_funding_rate: (fundingRate + randomInRange(-0.001, 0.001)) * 100, // Ligeramente diferente
                    delta_rate: deltaRate,
                    exch1_bid: bid.toFixed(4),
                    exch1_ask: ask.toFixed(4),
                    exch2_bid: (bid * (1 + randomInRange(-0.0005, 0.0005))).toFixed(4), // Ligeras diferencias
                    exch2_ask: (ask * (1 + randomInRange(-0.0005, 0.0005))).toFixed(4),
                    timestamp: Date.now()
                };
            }

            function randomInRange(min, max) {
                return Math.random() * (max - min) + min;
            }

            function actualizarDashboard() {
                const datos = generarDatoAleatorio();

                exch1FundingRateSpan.textContent = datos.exch1_funding_rate.toFixed(2) + '%';
                exch2FundingRateSpan.textContent = datos.exch2_funding_rate.toFixed(2) + '%';
                deltaRateSpan.textContent = datos.delta_rate + '%';

                exch1BidSpan.textContent = datos.exch1_bid;

https://ideone.com/EC7Ku5

language:

PHP (php 7.3.5)

created:

visibility:

public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!

Discover > Sphere Engine API

Discover > IDE Widget

Choose your language