022fddec9c
All checks were successful
Deploy to Server / deploy (push) Successful in 36s
- Add economic calendar tab with monthly view - Display today's events in header - Add weekly summary section - Integrate with Forex Factory via n8n webhook - Add Header Auth API authentication - Add KST timezone conversion - Add country filter (US, JP, CN) - Add importance-based event styling - Add more events modal for days with many events - Update calendar grid to show up to 4 events per day - Add n8n workflow configuration files
203 lines
9.1 KiB
HTML
203 lines
9.1 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</h1>
|
|
<nav class="tab-nav">
|
|
<button class="tab-btn active" data-tab="chart">차트</button>
|
|
<button class="tab-btn" data-tab="calendar">경제일정</button>
|
|
</nav>
|
|
<select id="timeframe" class="chart-only">
|
|
<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="header-events" id="header-events">
|
|
<span class="header-events-loading">일정 로딩 중...</span>
|
|
</div>
|
|
<div class="price-info">
|
|
<span id="current-price">--</span>
|
|
<span id="price-change">--</span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Chart Tab Content -->
|
|
<div class="tab-content active" id="chart-tab">
|
|
<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>
|
|
|
|
<!-- Weekly Calendar Summary (Bottom Bar) -->
|
|
<div class="weekly-summary">
|
|
<div class="weekly-summary-header">
|
|
<span class="weekly-icon">📅</span>
|
|
<span class="weekly-title">이번주 주요 일정</span>
|
|
<button class="weekly-more-btn" id="show-calendar-btn">더보기 ></button>
|
|
</div>
|
|
<div class="weekly-events" id="weekly-events">
|
|
<span class="loading-text">일정 로딩 중...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Economic Calendar Tab Content -->
|
|
<div class="tab-content" id="calendar-tab">
|
|
<div class="calendar-container">
|
|
<!-- Filters -->
|
|
<div class="calendar-filters">
|
|
<div class="country-filters">
|
|
<button class="country-btn active" data-country="all">전체</button>
|
|
<button class="country-btn" data-country="US">🇺🇸 미국</button>
|
|
<button class="country-btn" data-country="KR">🇰🇷 한국</button>
|
|
<button class="country-btn" data-country="CN">🇨🇳 중국</button>
|
|
<button class="country-btn" data-country="JP">🇯🇵 일본</button>
|
|
</div>
|
|
<div class="period-filter">
|
|
<select id="calendar-period">
|
|
<option value="week" selected>이번주</option>
|
|
<option value="month">이번달</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Calendar List -->
|
|
<div class="calendar-list" id="calendar-list">
|
|
<div class="loading-text">경제 일정 로딩 중...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="indicators.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|