154 lines
6.7 KiB
HTML
154 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Bitcoin Trading View</title>
|
|
<script src="https://unpkg.com/lightweight-charts@4.1.0/dist/lightweight-charts.standalone.production.js"></script>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header class="header">
|
|
<div class="title-section">
|
|
<h1>BTC/USDT Real-time Trading View</h1>
|
|
<select id="timeframe">
|
|
<option value="1m">1분</option>
|
|
<option value="5m">5분</option>
|
|
<option value="15m" selected>15분</option>
|
|
<option value="1h">1시간</option>
|
|
<option value="4h">4시간</option>
|
|
<option value="1d">1일</option>
|
|
<option value="1w">1주</option>
|
|
<option value="1M">1월</option>
|
|
</select>
|
|
</div>
|
|
<div class="price-info">
|
|
<span id="current-price">--</span>
|
|
<span id="price-change">--</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="main-content">
|
|
<div class="charts-container">
|
|
<!-- Main Chart with Candlestick, MA, Bollinger Bands -->
|
|
<div class="chart-wrapper main-chart">
|
|
<div class="chart-header">
|
|
<span class="chart-title">Price Chart</span>
|
|
<div class="legend" id="main-legend">
|
|
<label class="ma-toggle ma5"><input type="checkbox" id="toggle-ma5" checked><span>MA5</span></label>
|
|
<label class="ma-toggle ma20"><input type="checkbox" id="toggle-ma20" checked><span>MA20</span></label>
|
|
<label class="ma-toggle ma60"><input type="checkbox" id="toggle-ma60" checked><span>MA60</span></label>
|
|
<label class="ma-toggle ma120"><input type="checkbox" id="toggle-ma120"><span>MA120</span></label>
|
|
<label class="ma-toggle ma200"><input type="checkbox" id="toggle-ma200"><span>MA200</span></label>
|
|
<label class="ma-toggle bb"><input type="checkbox" id="toggle-bb" checked><span>BB</span></label>
|
|
<label class="ma-toggle gc-dc"><input type="checkbox" id="toggle-gcdc"><span>GC/DC</span></label>
|
|
</div>
|
|
</div>
|
|
<div id="main-chart"></div>
|
|
<div id="signals-container"></div>
|
|
</div>
|
|
|
|
<!-- MACD Chart -->
|
|
<div class="chart-wrapper indicator-chart">
|
|
<div class="chart-header">
|
|
<span class="chart-title">MACD (12, 26, 9)</span>
|
|
</div>
|
|
<div id="macd-chart"></div>
|
|
</div>
|
|
|
|
<!-- RSI Chart -->
|
|
<div class="chart-wrapper indicator-chart">
|
|
<div class="chart-header">
|
|
<span class="chart-title">RSI (14)</span>
|
|
</div>
|
|
<div id="rsi-chart"></div>
|
|
</div>
|
|
|
|
<!-- Stochastic Chart -->
|
|
<div class="chart-wrapper indicator-chart">
|
|
<div class="chart-header">
|
|
<span class="chart-title">Stochastic (14, 3, 3)</span>
|
|
</div>
|
|
<div id="stochastic-chart"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Analysis Panel -->
|
|
<div class="analysis-panel">
|
|
<div class="analysis-header">
|
|
<h3>Candle Analysis</h3>
|
|
<span id="analysis-time">--</span>
|
|
</div>
|
|
|
|
<!-- Overall Signal -->
|
|
<div class="overall-signal" id="overall-signal">
|
|
<span class="signal-label">Overall</span>
|
|
<span class="signal-value neutral">NEUTRAL</span>
|
|
</div>
|
|
|
|
<!-- Korean Analysis -->
|
|
<div class="korean-analysis">
|
|
<div class="korean-analysis-header">
|
|
<span>분석 요약</span>
|
|
</div>
|
|
<p id="korean-analysis-text">데이터 로딩 중...</p>
|
|
</div>
|
|
|
|
<!-- Indicator Analysis -->
|
|
<div class="indicator-analysis">
|
|
<div class="analysis-item" id="analysis-ma">
|
|
<span class="item-label">MA Trend</span>
|
|
<span class="item-value neutral">--</span>
|
|
<span class="item-detail">--</span>
|
|
</div>
|
|
<div class="analysis-item" id="analysis-bb">
|
|
<span class="item-label">Bollinger</span>
|
|
<span class="item-value neutral">--</span>
|
|
<span class="item-detail">--</span>
|
|
</div>
|
|
<div class="analysis-item" id="analysis-macd">
|
|
<span class="item-label">MACD</span>
|
|
<span class="item-value neutral">--</span>
|
|
<span class="item-detail">--</span>
|
|
</div>
|
|
<div class="analysis-item" id="analysis-rsi">
|
|
<span class="item-label">RSI</span>
|
|
<span class="item-value neutral">--</span>
|
|
<span class="item-detail">--</span>
|
|
</div>
|
|
<div class="analysis-item" id="analysis-stoch">
|
|
<span class="item-label">Stochastic</span>
|
|
<span class="item-value neutral">--</span>
|
|
<span class="item-detail">--</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Summary -->
|
|
<div class="analysis-summary">
|
|
<h4>Summary</h4>
|
|
<p id="analysis-summary-text">Loading...</p>
|
|
</div>
|
|
|
|
<!-- Score -->
|
|
<div class="analysis-score">
|
|
<div class="score-bar">
|
|
<div class="score-fill" id="score-fill"></div>
|
|
<div class="score-marker" id="score-marker"></div>
|
|
</div>
|
|
<div class="score-labels">
|
|
<span>Strong Sell</span>
|
|
<span>Neutral</span>
|
|
<span>Strong Buy</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="indicators.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|