Upload files to "templates"
initial
This commit is contained in:
215
templates/index.html
Normal file
215
templates/index.html
Normal file
@ -0,0 +1,215 @@
|
||||
<!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>
|
||||
|
||||
<!-- Indicator & Aggregation Scripts -->
|
||||
<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='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;
|
||||
}
|
||||
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 { width: 90%; max-width: 1400px; height: 500px; }
|
||||
.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); }
|
||||
#analyzeButton:hover { color: var(--accent-orange); }
|
||||
.input-field { width: 60px; }
|
||||
.analysis-section {
|
||||
width: 90%; max-width: 1400px; background-color: var(--container-dark);
|
||||
border: 1px solid var(--border-color); border-radius: 8px; padding: 20px;
|
||||
margin-top: 10px; text-align: center;
|
||||
}
|
||||
#analysisResult {
|
||||
margin-top: 15px; font-size: 0.95rem; line-height: 1.6; text-align: left;
|
||||
white-space: pre-wrap; color: var(--text-primary); background-color: var(--background-dark);
|
||||
padding: 15px; border-radius: 5px; min-height: 50px;
|
||||
}
|
||||
#candle-timer { font-size: 2rem; font-weight: 500; color: var(--accent-orange); }
|
||||
#timeframe-select { margin-top: 10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1 id="chart-title">{{ symbol }} Chart</h1>
|
||||
</div>
|
||||
|
||||
<div id="chart"></div>
|
||||
|
||||
<div class="control-panel">
|
||||
<div class="control-cell">
|
||||
<h3>Candle Closes In</h3>
|
||||
<div id="candle-timer">--:--</div>
|
||||
<select id="timeframe-select">
|
||||
<option value="1">1m</option>
|
||||
<option value="2">2m</option>
|
||||
<option value="3">3m</option>
|
||||
<option value="4">4m</option>
|
||||
<option value="5">5m</option>
|
||||
<option value="6">6m</option>
|
||||
<option value="7">7m</option>
|
||||
<option value="8">8m</option>
|
||||
<option value="9">9m</option>
|
||||
<option value="10">10m</option>
|
||||
</select>
|
||||
</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>
|
||||
|
||||
<div class="analysis-section">
|
||||
<h3>Analysis ✨</h3>
|
||||
<button id="analyzeButton" class="action-button">Analyze Recent Price Action</button>
|
||||
<div id="analysisResult">Click the button for AI analysis.</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 }
|
||||
});
|
||||
const candlestickSeries = chart.addCandlestickSeries({
|
||||
upColor: '#26a69a', downColor: '#ef5350', borderDownColor: '#ef5350',
|
||||
borderUpColor: '#26a69a', wickDownColor: '#ef5350', wickUpColor: '#26a69a',
|
||||
});
|
||||
|
||||
let baseCandleData1m = [];
|
||||
let displayedCandleData = [];
|
||||
let currentCandle1m = null;
|
||||
let manager;
|
||||
|
||||
const timeframeSelect = document.getElementById('timeframe-select');
|
||||
const candleTimerDiv = document.getElementById('candle-timer');
|
||||
const chartTitle = document.getElementById('chart-title');
|
||||
const analyzeButton = document.getElementById('analyzeButton');
|
||||
const analysisResultDiv = document.getElementById('analysisResult');
|
||||
|
||||
manager = createIndicatorManager(chart, baseCandleData1m);
|
||||
manager.populateDropdowns();
|
||||
|
||||
const socket = io();
|
||||
socket.on('connect', () => console.log('Socket.IO connected.'));
|
||||
|
||||
socket.on('history_finished', (data) => {
|
||||
if (!data || !data.klines_1m) return;
|
||||
|
||||
const mappedKlines = 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])
|
||||
}));
|
||||
|
||||
baseCandleData1m.length = 0;
|
||||
for (const kline of mappedKlines) {
|
||||
baseCandleData1m.push(kline);
|
||||
}
|
||||
|
||||
updateChartForTimeframe();
|
||||
});
|
||||
|
||||
socket.on('trade', (trade) => {
|
||||
const price = parseFloat(trade.p);
|
||||
const tradeTime = Math.floor(trade.T / 1000);
|
||||
const candleTimestamp1m = tradeTime - (tradeTime % 60);
|
||||
|
||||
if (!currentCandle1m || candleTimestamp1m > currentCandle1m.time) {
|
||||
if (currentCandle1m) baseCandleData1m.push(currentCandle1m);
|
||||
currentCandle1m = { time: candleTimestamp1m, open: price, high: price, low: price, close: price };
|
||||
} else {
|
||||
currentCandle1m.high = Math.max(currentCandle1m.high, price);
|
||||
currentCandle1m.low = Math.min(currentCandle1m.low, price);
|
||||
currentCandle1m.close = price;
|
||||
}
|
||||
|
||||
const selectedInterval = parseInt(timeframeSelect.value, 10) * 60;
|
||||
const displayedCandleTimestamp = tradeTime - (tradeTime % selectedInterval);
|
||||
const lastDisplayedCandle = displayedCandleData[displayedCandleData.length - 1];
|
||||
|
||||
let candleForUpdate;
|
||||
if (lastDisplayedCandle && displayedCandleTimestamp === lastDisplayedCandle.time) {
|
||||
candleForUpdate = { ...lastDisplayedCandle };
|
||||
candleForUpdate.high = Math.max(candleForUpdate.high, price);
|
||||
candleForUpdate.low = Math.min(candleForUpdate.low, price);
|
||||
candleForUpdate.close = price;
|
||||
displayedCandleData[displayedCandleData.length - 1] = candleForUpdate;
|
||||
} else if (!lastDisplayedCandle || displayedCandleTimestamp > lastDisplayedCandle.time) {
|
||||
candleForUpdate = { time: displayedCandleTimestamp, open: price, high: price, low: price, close: price };
|
||||
displayedCandleData.push(candleForUpdate);
|
||||
|
||||
// A new candle has started, so update the indicators.
|
||||
manager.updateIndicatorsOnNewCandle(displayedCandleData);
|
||||
}
|
||||
|
||||
if (candleForUpdate) candlestickSeries.update(candleForUpdate);
|
||||
});
|
||||
|
||||
function updateChartForTimeframe() {
|
||||
const selectedIntervalMinutes = parseInt(timeframeSelect.value, 10);
|
||||
if (baseCandleData1m.length === 0) return;
|
||||
|
||||
const newCandleData = aggregateCandles(baseCandleData1m, selectedIntervalMinutes);
|
||||
|
||||
if (newCandleData.length > 0) {
|
||||
displayedCandleData = newCandleData;
|
||||
candlestickSeries.setData(displayedCandleData);
|
||||
chartTitle.textContent = `{{ symbol }} Chart (${selectedIntervalMinutes}m)`;
|
||||
manager.recalculateAllAfterHistory(displayedCandleData);
|
||||
chart.timeScale().fitContent();
|
||||
}
|
||||
}
|
||||
|
||||
timeframeSelect.addEventListener('change', updateChartForTimeframe);
|
||||
|
||||
setInterval(() => {
|
||||
const selectedIntervalSeconds = parseInt(timeframeSelect.value, 10) * 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>
|
||||
Reference in New Issue
Block a user