<!DOCTYPE html>
<html>
<head>
    <title>Real-Time ETH/USDT Chart</title>
    <script src="https://unpkg.com/lightweight-charts@4.1.3/dist/lightweight-charts.standalone.production.js"></script>
    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
    
    <!-- NOTE: These 'url_for' will not work in a static HTML file. -->
    <!-- They are placeholders for a Flask environment. For a standalone file, you would link directly to the JS files. -->
    <script src="{{ url_for('static', filename='candle-aggregator.js') }}"></script>
    <script src="{{ url_for('static', filename='sma.js') }}"></script>
    <script src="{{ url_for('static', filename='ema.js') }}"></script>
    <script src="{{ url_for('static',filename='bb.js') }}"></script>
    <script src="{{ url_for('static', filename='hurst.js') }}"></script>
    <script src="{{ url_for('static', filename='indicators.js') }}"></script>
    <script src="{{ url_for('static', filename='indicator-manager.js') }}"></script>

    <style>
        :root {
            --background-dark: #161A25; --container-dark: #1E222D; --border-color: #2A2E39;
            --text-primary: #D1D4DC; --text-secondary: #8A91A0; --button-bg: #363A45;
            --button-hover-bg: #434651; --accent-orange: #F0B90B; --green: #26a69a; --red: #ef5350;
            
            /* Colors for measure tool */
            --measure-tool-up-bg: rgba(41, 98, 255, 0.2);
            --measure-tool-up-border: #2962FF;
            --measure-tool-down-bg: rgba(239, 83, 80, 0.2);
            --measure-tool-down-border: #ef5350;
            --measure-tool-text: #FFFFFF;
        }
        body {
            background-color: var(--background-dark); color: var(--text-primary);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            margin: 0; padding: 20px 0; display: flex; flex-direction: column; align-items: center;
        }
        .header {
            width: 90%; max-width: 1400px; text-align: left; padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color); margin-bottom: 20px;
        }
        .header h1 { margin: 0; font-size: 24px; }
        #chart-wrapper { position: relative; width: 90%; max-width: 1400px; height: 500px; }
        #chart { width: 100%; height: 100%; }
        .control-panel {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px; width: 90%; max-width: 1400px; padding: 20px 0;
        }
        .control-cell {
            background-color: var(--container-dark); border: 1px solid var(--border-color);
            border-radius: 8px; padding: 15px; display: flex; flex-direction: column;
            justify-content: flex-start; align-items: center; min-height: 80px;
        }
        .indicator-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 10px; }
        .action-button, .input-field, .control-cell select {
            background-color: var(--button-bg); border: 1px solid var(--border-color);
            color: var(--text-primary); padding: 8px 12px; text-align: center;
            text-decoration: none; display: inline-block; font-size: 14px;
            border-radius: 5px; cursor: pointer; transition: background-color 0.3s, color 0.3s;
        }
        .action-button:hover, .control-cell select:hover { background-color: var(--button-hover-bg); }
        .input-field { width: 60px; }
        #candle-timer { font-size: 2rem; font-weight: 500; color: var(--accent-orange); }
        #timeframe-display { margin-top: 10px; min-width: 60px; }
        .progress-bar-container {
            width: 80%; height: 4px; background-color: var(--button-bg);
            border-radius: 2px; margin-top: 10px; overflow: hidden;
        }
        .progress-bar {
            width: 0%; height: 100%; background-color: var(--green);
            transition: width 0.4s ease-out;
        }

        /* --- Styles for Measure Tool --- */
        #measure-tool {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none; overflow: hidden; z-index: 10;
        }
        #measure-box { position: absolute; }
        #measure-svg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
        #measure-tooltip {
            position: absolute; color: var(--measure-tool-text); padding: 4px 8px;
            border-radius: 4px; font-size: 11px; line-height: 1.2;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
        }

        /* --- Styles for Timeframe Modal --- */
        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: none; /* Hidden by default */
            justify-content: center; align-items: center; z-index: 1000;
        }
        .modal {
            background-color: var(--container-dark); padding: 25px; border-radius: 8px;
            border: 1px solid var(--border-color); text-align: center;
            width: 300px; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        .modal h2 {
            margin-top: 0; margin-bottom: 20px; font-size: 18px; color: var(--text-primary);
        }
        .modal .input-field {
            width: 100%; box-sizing: border-box; font-size: 24px;
            padding: 10px; margin-bottom: 10px; text-align: center;
        }
        .modal #timeframe-preview-text {
            color: var(--text-secondary); font-size: 14px; margin-top: 0;
            margin-bottom: 20px; min-height: 20px;
        }
        .modal .action-button { width: 100%; }
    </style>
</head>
<body>
    <div class="header">
        <h1 id="chart-title">{{ symbol }} Chart</h1>
    </div>

    <div id="chart-wrapper">
        <div id="chart"></div>
        <div id="measure-tool" style="display: none;">
            <div id="measure-box"></div>
            <svg id="measure-svg"></svg>
            <div id="measure-tooltip"></div>
        </div>
    </div>

    <div class="control-panel">
        <div class="control-cell">
            <h3>Candle Closes In</h3>
            <div id="candle-timer">--:--</div>
            <div id="timeframe-display" class="action-button">1m</div>
            <div id="progress-container" class="progress-bar-container">
                <div class="progress-bar"></div>
            </div>
        </div>
        <div class="control-cell" id="indicator-cell-1"></div>
        <div class="control-cell" id="indicator-cell-2"></div>
        <div class="control-cell" id="indicator-cell-3"></div>
        <div class="control-cell" id="indicator-cell-4"></div>
    </div>

    <!-- Timeframe Modal -->
    <div id="timeframe-modal-overlay" class="modal-overlay">
        <div id="timeframe-modal" class="modal">
            <h2>Change interval</h2>
            <input type="number" id="timeframe-input" class="input-field" min="1" placeholder="Enter minutes"/>
            <p id="timeframe-preview-text"></p>
            <button id="timeframe-confirm-btn" class="action-button">OK</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            const chartElement = document.getElementById('chart');
            const chart = LightweightCharts.createChart(chartElement, {
                width: chartElement.clientWidth, height: 500,
                layout: { background: { type: 'solid', color: '#1E222D' }, textColor: '#D1D4DC' },
                grid: { vertLines: { color: '#2A2E39' }, horzLines: { color: '#2A2E39' } },
                timeScale: { timeVisible: true, secondsVisible: true },
                crosshair: {
                    mode: LightweightCharts.CrosshairMode.Normal,
                },
            });
            const candlestickSeries = chart.addCandlestickSeries({
                upColor: 'rgba(255, 152, 0, 1.0)', downColor: 'rgba(255, 152, 0, 0.66)', borderDownColor: 'rgba(255, 152, 0, 0.66)',
                borderUpColor: 'rgba(255, 152, 0, 1.0)', wickDownColor: 'rgba(255, 152, 0, 0.66)', wickUpColor: 'rgba(255, 152, 0, 1.0)'
            });

            const originalAddLineSeries = chart.addLineSeries;
            chart.addLineSeries = function(options) {
                const newOptions = { ...options, crosshairMarkerVisible: false, };
                return originalAddLineSeries.call(this, newOptions);
            };

            let baseCandleData1m = [];
            let displayedCandleData = [];
            let manager;
            let currentTimeframeMinutes = 1;

            const candleTimerDiv = document.getElementById('candle-timer');
            const chartTitle = document.getElementById('chart-title');
            const progressContainer = document.getElementById('progress-container');
            const progressBar = document.querySelector('.progress-bar');
            
            const measureToolEl = document.getElementById('measure-tool');
            const measureBoxEl = document.getElementById('measure-box');
            const measureSvgEl = document.getElementById('measure-svg');
            const measureTooltipEl = document.getElementById('measure-tooltip');
            let measureState = { active: false, finished: false, startPoint: null, endPoint: null };
            let isRedrawScheduled = false;

            const timeframeDisplay = document.getElementById('timeframe-display');
            const modalOverlay = document.getElementById('timeframe-modal-overlay');
            const modalInput = document.getElementById('timeframe-input');
            const modalPreviewText = document.getElementById('timeframe-preview-text');
            const modalConfirmBtn = document.getElementById('timeframe-confirm-btn');

            function openModal(initialValue = '') {
                modalOverlay.style.display = 'flex';
                modalInput.value = initialValue;
                updatePreviewText();
                modalInput.focus();
                modalInput.select();
            }

            function closeModal() {
                modalOverlay.style.display = 'none';
            }

            function updatePreviewText() {
                const value = modalInput.value;
                if (value && parseInt(value) > 0) {
                    modalPreviewText.textContent = `${value} minute${parseInt(value) > 1 ? 's' : ''}`;
                } else {
                    modalPreviewText.textContent = '';
                }
            }

            function confirmTimeframe() {
                const newTimeframe = parseInt(modalInput.value);
                if (newTimeframe && newTimeframe > 0) {
                    currentTimeframeMinutes = newTimeframe;
                    timeframeDisplay.textContent = `${newTimeframe}m`;
                    updateChartForTimeframe(true);
                    closeModal();
                }
            }

            timeframeDisplay.addEventListener('click', () => openModal(currentTimeframeMinutes));
            modalConfirmBtn.addEventListener('click', confirmTimeframe);
            modalInput.addEventListener('input', updatePreviewText);
            modalInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') confirmTimeframe(); });
            modalOverlay.addEventListener('click', (e) => { if (e.target === modalOverlay) closeModal(); });
            window.addEventListener('keydown', (e) => {
                if (modalOverlay.style.display === 'flex' && e.key === 'Escape') {
                    closeModal();
                } 
                else if (modalOverlay.style.display !== 'flex' && !isNaN(parseInt(e.key)) && !e.ctrlKey && !e.metaKey) {
                    const activeEl = document.activeElement;
                    if (activeEl.tagName !== 'INPUT' && activeEl.tagName !== 'TEXTAREA') {
                        e.preventDefault();
                        openModal(e.key);
                    }
                }
            });

            manager = createIndicatorManager(chart, baseCandleData1m, displayedCandleData);
            manager.populateDropdowns();

            const socket = io();
            socket.on('connect', () => console.log('Socket.IO connected.'));

            socket.on('history_progress', (data) => {
                if (data && data.progress) progressBar.style.width = `${data.progress}%`;
            });

            socket.on('history_finished', (data) => {
                if (!data || !data.klines_1m) return;
                progressBar.style.width = '100%';
                baseCandleData1m = data.klines_1m.map(k => ({
                    time: k[0] / 1000, open: parseFloat(k[1]), high: parseFloat(k[2]),
                    low: parseFloat(k[3]), close: parseFloat(k[4])
                }));
                updateChartForTimeframe(true);
                setTimeout(() => { progressContainer.style.display = 'none'; }, 500);
            });

            // --- MODIFICATION START: Rewritten candle update and creation logic ---
            function handleLiveUpdate(update) {
                if (baseCandleData1m.length === 0 || displayedCandleData.length === 0) return;

                // First, ensure the base 1m data is up-to-date.
                const lastBaseCandle = baseCandleData1m[baseCandleData1m.length - 1];
                if (update.time > lastBaseCandle.time) {
                    baseCandleData1m.push(update);
                } else if (update.time === lastBaseCandle.time) {
                    baseCandleData1m[baseCandleData1m.length - 1] = update;
                }

                const candleDurationSeconds = currentTimeframeMinutes * 60;
                let lastDisplayedCandle = displayedCandleData[displayedCandleData.length - 1];

                // Check if the update belongs to the currently forming displayed candle
                if (update.time >= lastDisplayedCandle.time && update.time < lastDisplayedCandle.time + candleDurationSeconds) {
                    // It does, so just update the High, Low, and Close prices
                    lastDisplayedCandle.high = Math.max(lastDisplayedCandle.high, update.high);
                    lastDisplayedCandle.low = Math.min(lastDisplayedCandle.low, update.low);
                    lastDisplayedCandle.close = update.close;
                    candlestickSeries.update(lastDisplayedCandle);
                } else if (update.time >= lastDisplayedCandle.time + candleDurationSeconds) {
                    // This update is for a NEW candle.
                    const newCandleTime = Math.floor(update.time / candleDurationSeconds) * candleDurationSeconds;
                    
                    // Create the new candle. Its O,H,L,C are all from this first tick.
                    const newCandle = {
                        time: newCandleTime,
                        open: update.open,
                        high: update.high,
                        low: update.low,
                        close: update.close,
                    };

                    displayedCandleData.push(newCandle);
                    candlestickSeries.update(newCandle);

                    // Since a new candle has been formed, we should recalculate indicators
                    manager.recalculateAllAfterHistory(baseCandleData1m, displayedCandleData);
                }
            }
            
            let latestCandleUpdate = null;
            let isUpdateScheduled = false;

            function processLatestUpdate() {
                if (latestCandleUpdate) {
                    handleLiveUpdate(latestCandleUpdate);
                    latestCandleUpdate = null;
                }
                isUpdateScheduled = false;
            }

            socket.on('candle_update', (update) => {
                latestCandleUpdate = update;
                if (!isUpdateScheduled) {
                    isUpdateScheduled = true;
                    requestAnimationFrame(processLatestUpdate);
                }
            });

            socket.on('candle_closed', (closedCandle) => {
                // This handler's primary job is to ensure data integrity by using the final, closed 1m candle.
                
                // 1. Update the master 1-minute data array with the final version of the candle.
                const candleIndex = baseCandleData1m.findIndex(c => c.time === closedCandle.time);
                if (candleIndex !== -1) {
                    baseCandleData1m[candleIndex] = closedCandle;
                } else {
                    // This case might happen if connection was lost and we missed updates for this candle
                    baseCandleData1m.push(closedCandle);
                    baseCandleData1m.sort((a, b) => a.time - b.time); // Keep it sorted just in case
                }
                
                if (displayedCandleData.length === 0) return;

                // 2. Determine which displayed candle this closed 1m candle belongs to.
                const candleDurationSeconds = currentTimeframeMinutes * 60;
                const bucketTime = Math.floor(closedCandle.time / candleDurationSeconds) * candleDurationSeconds;

                // 3. Find the displayed candle that needs to be corrected with final data.
                const displayedCandleToUpdate = displayedCandleData.find(c => c.time === bucketTime);
                if (!displayedCandleToUpdate) {
                    console.warn("Could not find a displayed candle to update for closed 1m candle at", new Date(closedCandle.time * 1000).toISOString());
                    // As a fallback, a full redraw can fix inconsistencies.
                    // updateChartForTimeframe(true); 
                    return;
                }

                // 4. Find all 1m source candles for this bucket.
                const sourceCandles = baseCandleData1m.filter(c => 
                    c.time >= bucketTime && c.time < bucketTime + candleDurationSeconds
                );

                // 5. If we have source candles, aggregate them to get the CORRECT final data.
                if (sourceCandles.length > 0) {
                    const finalCandle = {
                        time: bucketTime,
                        open: sourceCandles[0].open,
                        high: Math.max(...sourceCandles.map(c => c.high)),
                        low: Math.min(...sourceCandles.map(c => c.low)),
                        close: sourceCandles[sourceCandles.length - 1].close
                    };

                    // 6. Update the specific candle in the displayed data array
                    const displayedIndex = displayedCandleData.findIndex(c => c.time === bucketTime);
                    if (displayedIndex !== -1) {
                        displayedCandleData[displayedIndex] = finalCandle;
                    }

                    // 7. Update the series on the chart and recalculate indicators for accuracy.
                    candlestickSeries.update(finalCandle);
                    manager.recalculateAllAfterHistory(baseCandleData1m, displayedCandleData);
                }
            });
            // --- MODIFICATION END ---
            
            function updateChartForTimeframe(isFullReset = false) {
                if (baseCandleData1m.length === 0) return;
                const visibleTimeRange = isFullReset ? null : chart.timeScale().getVisibleTimeRange();
                const newCandleData = aggregateCandles(baseCandleData1m, currentTimeframeMinutes);
                
                if (newCandleData.length > 0) {
                    displayedCandleData = newCandleData;
                    candlestickSeries.setData(displayedCandleData);
                    chartTitle.textContent = `{{ symbol }} Chart (${currentTimeframeMinutes}m)`;
                    manager.recalculateAllAfterHistory(baseCandleData1m, displayedCandleData);
                    if (visibleTimeRange) {
                        chart.timeScale().setVisibleRange(visibleTimeRange);
                    } else {
                        chart.timeScale().fitContent();
                    }
                }
            }

            function clearMeasureTool() {
                measureState = { active: false, finished: false, startPoint: null, endPoint: null };
                measureToolEl.style.display = 'none';
                measureSvgEl.innerHTML = '';
            }

            function formatDuration(seconds) {
                const d = Math.floor(seconds / (3600*24));
                const h = Math.floor(seconds % (3600*24) / 3600);
                const m = Math.floor(seconds % 3600 / 60);
                let result = '';
                if (d > 0) result += `${d}d `;
                if (h > 0) result += `${h}h `;
                if (m > 0) result += `${m}m`;
                return result.trim() || '0m';
            }

            function drawMeasureTool() {
                if (!measureState.startPoint || !measureState.endPoint) return;
                const startCoord = {
                    x: chart.timeScale().timeToCoordinate(measureState.startPoint.time),
                    y: candlestickSeries.priceToCoordinate(measureState.startPoint.price)
                };
                const endCoord = {
                    x: chart.timeScale().timeToCoordinate(measureState.endPoint.time),
                    y: candlestickSeries.priceToCoordinate(measureState.endPoint.price)
                };
                if (startCoord.x === null || startCoord.y === null || endCoord.x === null || endCoord.y === null) {
                    measureToolEl.style.display = 'none';
                    return;
                }
                measureToolEl.style.display = 'block';
                const isUp = measureState.endPoint.price >= measureState.startPoint.price;
                const boxColor = isUp ? 'var(--measure-tool-up-bg)' : 'var(--measure-tool-down-bg)';
                const borderColor = isUp ? 'var(--measure-tool-up-border)' : 'var(--measure-tool-down-border)';
                measureBoxEl.style.backgroundColor = boxColor;
                measureBoxEl.style.borderColor = borderColor;
                measureTooltipEl.style.backgroundColor = borderColor;
                const minX = Math.min(startCoord.x, endCoord.x);
                const maxX = Math.max(startCoord.x, endCoord.x);
                const minY = Math.min(startCoord.y, endCoord.y);
                const maxY = Math.max(startCoord.y, endCoord.y);
                measureBoxEl.style.left = `${minX}px`;
                measureBoxEl.style.top = `${minY}px`;
                measureBoxEl.style.width = `${maxX - minX}px`;
                measureBoxEl.style.height = `${maxY - minY}px`;
                const midX = minX + (maxX - minX) / 2;
                const midY = minY + (maxY - minY) / 2;
                const arrowSize = 5;
                const isTimeGoingForward = measureState.endPoint.time >= measureState.startPoint.time;
                let hArrowPoints = isTimeGoingForward
                    ? `${maxX - arrowSize},${midY - arrowSize} ${maxX},${midY} ${maxX - arrowSize},${midY + arrowSize}`
                    : `${minX + arrowSize},${midY - arrowSize} ${minX},${midY} ${minX + arrowSize},${midY + arrowSize}`;
                let vArrowPoints = isUp
                    ? `${midX - arrowSize},${minY + arrowSize} ${midX},${minY} ${midX + arrowSize},${minY + arrowSize}`
                    : `${midX - arrowSize},${maxY - arrowSize} ${midX},${maxY} ${midX + arrowSize},${maxY - arrowSize}`;
                measureSvgEl.innerHTML = `
                    <line x1="${minX}" y1="${midY}" x2="${maxX}" y2="${midY}" stroke="${borderColor}" stroke-width="1"/>
                    <polygon points="${hArrowPoints}" fill="${borderColor}" />
                    <line x1="${midX}" y1="${minY}" x2="${midX}" y2="${maxY}" stroke="${borderColor}" stroke-width="1"/>
                    <polygon points="${vArrowPoints}" fill="${borderColor}" />
                `;
                const priceChange = measureState.endPoint.price - measureState.startPoint.price;
                const pctChange = (priceChange / measureState.startPoint.price) * 100;
                const timeDifference = measureState.endPoint.time - measureState.startPoint.time;
                const bars = Math.round(timeDifference / (currentTimeframeMinutes * 60));
                const duration = formatDuration(Math.abs(timeDifference));
                measureTooltipEl.innerHTML = `
                    <div>${priceChange.toFixed(2)} (${pctChange.toFixed(2)}%)</div>
                    <div>${bars} bars, ${duration}</div>
                `;
                measureTooltipEl.style.left = `${midX}px`;
                const tooltipMargin = 8; 
                if (isUp) {
                    measureTooltipEl.style.top = `${minY}px`;
                    measureTooltipEl.style.transform = `translate(-50%, calc(-100% - ${tooltipMargin}px))`;
                } else {
                    measureTooltipEl.style.top = `${maxY}px`;
                    measureTooltipEl.style.transform = `translate(-50%, ${tooltipMargin}px)`;
                }
            }

            const onMeasureMove = (param) => {
                if (!measureState.active || !param.point) return;
                measureState.endPoint.time = chart.timeScale().coordinateToTime(param.point.x);
                measureState.endPoint.price = candlestickSeries.coordinateToPrice(param.point.y);
                if (!measureState.endPoint.time || !measureState.endPoint.price) return;
                drawMeasureTool();
            };
            
            const onMeasureUp = () => {
                measureState.active = false;
                measureState.finished = true;
                chart.unsubscribeCrosshairMove(onMeasureMove);
            };

            let priceScaleDragState = { isDragging: false };
            function priceScaleRedrawLoop() {
                if (!priceScaleDragState.isDragging) return;
                drawMeasureTool();
                requestAnimationFrame(priceScaleRedrawLoop);
            }
            chartElement.addEventListener('mousedown', (e) => {
                if (!measureState.finished) return;
                const rect = chartElement.getBoundingClientRect();
                const priceScaleWidth = chart.priceScale('right').width();
                if (e.clientX > rect.left + rect.width - priceScaleWidth) {
                    priceScaleDragState.isDragging = true;
                    requestAnimationFrame(priceScaleRedrawLoop);
                }
            });
            window.addEventListener('mouseup', () => {
                if (priceScaleDragState.isDragging) {
                    priceScaleDragState.isDragging = false;
                }
            });

            chart.timeScale().subscribeVisibleTimeRangeChange(() => {
                if (measureState.finished) {
                    drawMeasureTool();
                }
            });

            chart.subscribeCrosshairMove(() => {
                if (measureState.finished && !isRedrawScheduled) {
                    isRedrawScheduled = true;
                    requestAnimationFrame(() => {
                        drawMeasureTool();
                        isRedrawScheduled = false;
                    });
                }
            });

            chart.subscribeClick((param) => {
                if (measureState.finished) {
                    clearMeasureTool();
                    return;
                }
                if (!param.point || !param.sourceEvent.shiftKey) return;
                if (measureState.active) {
                    onMeasureUp();
                    return;
                }
                clearMeasureTool();
                const time = chart.timeScale().coordinateToTime(param.point.x);
                const price = candlestickSeries.coordinateToPrice(param.point.y);
                if (!time || !price) return;
                measureState.startPoint = { time, price };
                measureState.endPoint = { time, price };
                measureState.active = true;
                measureToolEl.style.display = 'block';
                drawMeasureTool();
                chart.subscribeCrosshairMove(onMeasureMove);
            });

            setInterval(() => {
                const selectedIntervalSeconds = currentTimeframeMinutes * 60;
                const now = new Date().getTime() / 1000;
                const secondsRemaining = Math.floor(selectedIntervalSeconds - (now % selectedIntervalSeconds));
                const minutes = Math.floor(secondsRemaining / 60);
                const seconds = secondsRemaining % 60;
                candleTimerDiv.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
            }, 1000);

            window.addEventListener('resize', () => chart.resize(chartElement.clientWidth, 500));
        });
    </script>
</body>
</html>
