From 99ce8ccd0dca3ef4e6eafb122130cdcd00edd6b4 Mon Sep 17 00:00:00 2001
From: "kihong.kim" <kihong.kim@yanolja.com>
Date: Sat, 6 Dec 2025 15:04:36 +0900
Subject: [PATCH] Initial commit: BTC/USDT Trading View with technical
 indicators

---
 .gitignore         |   25 ++
 Caddyfile.example  |   55 +++
 Dockerfile         |   14 +
 app.js             | 1021 ++++++++++++++++++++++++++++++++++++++++++++
 docker-compose.yml |   15 +
 index.html         |  153 +++++++
 indicators.js      |  376 ++++++++++++++++
 nginx.conf         |   21 +
 package-lock.json  |  643 ++++++++++++++++++++++++++++
 package.json       |   15 +
 styles.css         |  523 +++++++++++++++++++++++
 11 files changed, 2861 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 Caddyfile.example
 create mode 100644 Dockerfile
 create mode 100644 app.js
 create mode 100644 docker-compose.yml
 create mode 100644 index.html
 create mode 100644 indicators.js
 create mode 100644 nginx.conf
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 styles.css

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..4314396
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,25 @@
+# Dependencies
+node_modules/
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# Logs
+*.log
+npm-debug.log*
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# Build output
+dist/
+build/
diff --git a/Caddyfile.example b/Caddyfile.example
new file mode 100644
index 0000000..4e40bf9
--- /dev/null
+++ b/Caddyfile.example
@@ -0,0 +1,55 @@
+# Caddyfile 설정 예시 - Authentik Forward Auth 사용
+# 이 내용을 기존 Caddyfile에 추가하세요
+
+trading.yourdomain.com {
+    # Authentik Forward Auth
+    forward_auth authentik-server:9000 {
+        uri /outpost.goauthentik.io/auth/caddy
+
+        # 인증 후 전달할 헤더들
+        copy_headers X-Authentik-Username X-Authentik-Groups X-Authentik-Email X-Authentik-Name X-Authentik-Uid X-Authentik-Jwt X-Authentik-Meta-Jwks X-Authentik-Meta-Outpost X-Authentik-Meta-Provider X-Authentik-Meta-App X-Authentik-Meta-Version
+
+        # 신뢰할 수 있는 프록시 (Docker 네트워크)
+        trusted_proxies private_ranges
+    }
+
+    # 앱으로 프록시
+    reverse_proxy bini-trading-view:80
+
+    # 로그 (선택사항)
+    log {
+        output file /var/log/caddy/trading.log
+    }
+}
+
+# ========================================
+# Authentik 설정 단계
+# ========================================
+#
+# 1. Authentik 관리자 페이지 접속
+#    https://authentik.yourdomain.com/if/admin/
+#
+# 2. Provider 생성
+#    - Applications > Providers > Create
+#    - Type: Proxy Provider
+#    - Name: trading-view-provider
+#    - Authorization flow: default-provider-authorization-implicit-consent
+#    - Forward auth (single application) 선택
+#    - External host: https://trading.yourdomain.com
+#
+# 3. Application 생성
+#    - Applications > Applications > Create
+#    - Name: Trading View
+#    - Slug: trading-view
+#    - Provider: trading-view-provider (위에서 생성한 것)
+#
+# 4. Outpost 설정
+#    - Applications > Outposts
+#    - 기존 Outpost 편집 또는 새로 생성
+#    - Applications에 "Trading View" 추가
+#
+# 5. Docker 네트워크 확인
+#    - Caddy와 Authentik이 같은 네트워크에 있어야 함
+#    - authentik-server는 Authentik 서버 컨테이너 이름
+#
+# ========================================
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..c226234
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,14 @@
+FROM nginx:alpine
+
+# Copy static files
+COPY index.html /usr/share/nginx/html/
+COPY styles.css /usr/share/nginx/html/
+COPY app.js /usr/share/nginx/html/
+COPY indicators.js /usr/share/nginx/html/
+
+# Copy nginx config
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..0bee9d4
--- /dev/null
+++ b/app.js
@@ -0,0 +1,1021 @@
+// Bitcoin Trading View Application
+
+class TradingView {
+    constructor() {
+        this.symbol = 'BTCUSDT';
+        this.timeframe = '15m';
+        this.candleData = [];
+        this.ws = null;
+        this.charts = {};
+        this.series = {};
+        this.signals = [];
+        this.gcDcMarkers = [];
+        this.showGCDC = false;
+
+        this.init();
+    }
+
+    async init() {
+        this.setupCharts();
+        this.setupEventListeners();
+        await this.loadHistoricalData();
+        this.connectWebSocket();
+    }
+
+    setupCharts() {
+        const chartOptions = {
+            layout: {
+                background: { type: 'solid', color: '#1e222d' },
+                textColor: '#d1d4dc',
+            },
+            grid: {
+                vertLines: { color: '#2a2e39' },
+                horzLines: { color: '#2a2e39' },
+            },
+            crosshair: {
+                mode: LightweightCharts.CrosshairMode.Normal,
+            },
+            rightPriceScale: {
+                borderColor: '#2a2e39',
+                scaleMargins: {
+                    top: 0.1,
+                    bottom: 0.1,
+                },
+                autoScale: true,
+            },
+            timeScale: {
+                borderColor: '#2a2e39',
+                timeVisible: true,
+                secondsVisible: false,
+                barSpacing: 8,
+                minBarSpacing: 2,
+                rightOffset: 5,
+                tickMarkFormatter: (timestamp, tickMarkType, locale) => {
+                    const date = new Date(timestamp * 1000);
+                    const options = { timeZone: 'Asia/Seoul' };
+
+                    const month = String(date.toLocaleString('ko-KR', { ...options, month: 'numeric' })).replace('월', '').padStart(2, '0');
+                    const day = String(date.toLocaleString('ko-KR', { ...options, day: 'numeric' })).replace('일', '').padStart(2, '0');
+                    const hours = String(date.toLocaleString('ko-KR', { ...options, hour: 'numeric', hour12: false })).replace('시', '').padStart(2, '0');
+                    const minuteStr = String(date.toLocaleString('ko-KR', { ...options, minute: 'numeric' })).replace('분', '').padStart(2, '0');
+                    const minuteNum = parseInt(minuteStr, 10);
+
+                    // For minute-based timeframes, show only 15-minute intervals
+                    const isMinuteTimeframe = ['1m', '5m', '15m'].includes(this.timeframe);
+
+                    if (isMinuteTimeframe) {
+                        // Show date at midnight (00:00)
+                        if (hours === '00' && minuteNum === 0) {
+                            return `${month}/${day}`;
+                        }
+                        // Show date + time at 15-minute intervals
+                        if (minuteNum % 15 === 0) {
+                            return `${month}/${day} ${hours}:${minuteStr}`;
+                        }
+                        return '';
+                    } else if (this.timeframe === '1h' || this.timeframe === '4h') {
+                        // For hour timeframes, show date + time
+                        return `${month}/${day} ${hours}:${minuteStr}`;
+                    } else {
+                        // For day timeframe, show date only
+                        return `${month}/${day}`;
+                    }
+                },
+            },
+            localization: {
+                timeFormatter: (timestamp) => {
+                    const date = new Date(timestamp * 1000);
+                    return date.toLocaleString('ko-KR', {
+                        timeZone: 'Asia/Seoul',
+                        month: '2-digit',
+                        day: '2-digit',
+                        hour: '2-digit',
+                        minute: '2-digit',
+                    });
+                },
+            },
+        };
+
+        // Main Chart (Candlestick + MA + Bollinger Bands)
+        this.charts.main = LightweightCharts.createChart(
+            document.getElementById('main-chart'),
+            { ...chartOptions, height: 450 }
+        );
+
+        // Candlestick Series
+        this.series.candle = this.charts.main.addCandlestickSeries({
+            upColor: '#26a69a',
+            downColor: '#ef5350',
+            borderUpColor: '#26a69a',
+            borderDownColor: '#ef5350',
+            wickUpColor: '#26a69a',
+            wickDownColor: '#ef5350',
+        });
+
+        // Volume Series (at bottom of main chart)
+        this.series.volume = this.charts.main.addHistogramSeries({
+            color: '#26a69a',
+            priceFormat: {
+                type: 'volume',
+            },
+            priceScaleId: 'volume',
+            scaleMargins: {
+                top: 0.85,
+                bottom: 0,
+            },
+        });
+
+        // Configure volume price scale
+        this.charts.main.priceScale('volume').applyOptions({
+            scaleMargins: {
+                top: 0.85,
+                bottom: 0,
+            },
+        });
+
+        // Moving Average Series
+        this.series.ma5 = this.charts.main.addLineSeries({ color: '#FFEB3B', lineWidth: 2, title: 'MA5', lastValueVisible: false, priceLineVisible: false });
+        this.series.ma20 = this.charts.main.addLineSeries({ color: '#1565C0', lineWidth: 2, title: 'MA20', lastValueVisible: false, priceLineVisible: false });
+        this.series.ma60 = this.charts.main.addLineSeries({ color: '#00E676', lineWidth: 2, title: 'MA60', lastValueVisible: false, priceLineVisible: false });
+        this.series.ma120 = this.charts.main.addLineSeries({ color: '#FF5252', lineWidth: 2, title: 'MA120', visible: false, lastValueVisible: false, priceLineVisible: false });
+        this.series.ma200 = this.charts.main.addLineSeries({ color: '#E040FB', lineWidth: 2, title: 'MA200', visible: false, lastValueVisible: false, priceLineVisible: false });
+
+        // Bollinger Bands (Upper/Lower only, Middle is same as MA20)
+        this.series.bbUpper = this.charts.main.addLineSeries({
+            color: '#FF9800',
+            lineWidth: 1,
+            lineStyle: 2,
+            lastValueVisible: false,
+            priceLineVisible: false,
+        });
+        this.series.bbLower = this.charts.main.addLineSeries({
+            color: '#FF9800',
+            lineWidth: 1,
+            lineStyle: 2,
+            lastValueVisible: false,
+            priceLineVisible: false,
+        });
+
+        // Cross markers series
+        this.series.markers = this.series.candle;
+
+        // MACD Chart
+        const macdOptions = {
+            layout: chartOptions.layout,
+            grid: chartOptions.grid,
+            crosshair: chartOptions.crosshair,
+            rightPriceScale: {
+                ...chartOptions.rightPriceScale,
+                mode: LightweightCharts.PriceScaleMode.Normal,
+            },
+            timeScale: chartOptions.timeScale,
+            localization: chartOptions.localization,
+            height: 150,
+        };
+        this.charts.macd = LightweightCharts.createChart(
+            document.getElementById('macd-chart'),
+            macdOptions
+        );
+
+        this.series.macdLine = this.charts.macd.addLineSeries({
+            color: '#2962ff',
+            lineWidth: 2,
+            title: 'MACD',
+            priceScaleId: 'right',
+        });
+        this.series.signalLine = this.charts.macd.addLineSeries({
+            color: '#ff6d00',
+            lineWidth: 2,
+            title: 'Signal',
+            priceScaleId: 'right',
+        });
+        this.series.histogram = this.charts.macd.addHistogramSeries({
+            color: '#26a69a',
+            title: 'Histogram',
+            priceScaleId: 'right',
+        });
+
+        // RSI Chart
+        this.charts.rsi = LightweightCharts.createChart(
+            document.getElementById('rsi-chart'),
+            { ...chartOptions, height: 150 }
+        );
+
+        this.series.rsi = this.charts.rsi.addLineSeries({
+            color: '#FFEB3B',
+            lineWidth: 2,
+            title: 'RSI',
+        });
+
+        // RSI Overbought/Oversold lines (more visible)
+        this.series.rsiOverbought = this.charts.rsi.addLineSeries({
+            color: '#ef5350',
+            lineWidth: 2,
+            lineStyle: 2,
+            lastValueVisible: false,
+            priceLineVisible: false,
+        });
+        this.series.rsiOversold = this.charts.rsi.addLineSeries({
+            color: '#26a69a',
+            lineWidth: 2,
+            lineStyle: 2,
+            lastValueVisible: false,
+            priceLineVisible: false,
+        });
+
+        // Stochastic Chart
+        this.charts.stochastic = LightweightCharts.createChart(
+            document.getElementById('stochastic-chart'),
+            { ...chartOptions, height: 150 }
+        );
+
+        this.series.stochK = this.charts.stochastic.addLineSeries({
+            color: '#2196f3',
+            lineWidth: 2,
+            title: '%K',
+        });
+        this.series.stochD = this.charts.stochastic.addLineSeries({
+            color: '#ff5722',
+            lineWidth: 2,
+            title: '%D',
+        });
+
+        // Stochastic Overbought/Oversold lines
+        this.series.stochOverbought = this.charts.stochastic.addLineSeries({
+            color: 'rgba(239, 83, 80, 0.5)',
+            lineWidth: 1,
+            lineStyle: 2,
+        });
+        this.series.stochOversold = this.charts.stochastic.addLineSeries({
+            color: 'rgba(38, 166, 154, 0.5)',
+            lineWidth: 1,
+            lineStyle: 2,
+        });
+
+        // Sync all charts
+        this.syncCharts();
+    }
+
+    syncCharts() {
+        const charts = [this.charts.main, this.charts.macd, this.charts.rsi, this.charts.stochastic];
+        let isSyncing = false;
+
+        charts.forEach((chart, index) => {
+            chart.timeScale().subscribeVisibleLogicalRangeChange((logicalRange) => {
+                if (isSyncing || !logicalRange) return;
+                isSyncing = true;
+                charts.forEach((otherChart, otherIndex) => {
+                    if (index !== otherIndex) {
+                        otherChart.timeScale().setVisibleLogicalRange(logicalRange);
+                    }
+                });
+                isSyncing = false;
+            });
+        });
+    }
+
+    setupEventListeners() {
+        document.getElementById('timeframe').addEventListener('change', async (e) => {
+            this.timeframe = e.target.value;
+            // Close WebSocket first to prevent data conflicts
+            if (this.ws) {
+                this.ws.close();
+                this.ws = null;
+            }
+            // Clear all data
+            this.candleData = [];
+            // Clear chart series data to prevent "Cannot update oldest data" error
+            this.series.candle.setData([]);
+            this.series.volume.setData([]);
+            this.series.ma5.setData([]);
+            this.series.ma20.setData([]);
+            this.series.ma60.setData([]);
+            this.series.ma120.setData([]);
+            this.series.ma200.setData([]);
+            this.series.bbUpper.setData([]);
+            this.series.bbLower.setData([]);
+            this.series.macdLine.setData([]);
+            this.series.signalLine.setData([]);
+            this.series.histogram.setData([]);
+            this.series.rsi.setData([]);
+            this.series.rsiOverbought.setData([]);
+            this.series.rsiOversold.setData([]);
+            this.series.stochK.setData([]);
+            this.series.stochD.setData([]);
+            this.series.stochOverbought.setData([]);
+            this.series.stochOversold.setData([]);
+
+            await this.loadHistoricalData();
+            this.connectWebSocket();
+        });
+
+        // MA toggle handlers
+        const maToggles = {
+            'toggle-ma5': 'ma5',
+            'toggle-ma20': 'ma20',
+            'toggle-ma60': 'ma60',
+            'toggle-ma120': 'ma120',
+            'toggle-ma200': 'ma200',
+        };
+
+        Object.entries(maToggles).forEach(([toggleId, seriesName]) => {
+            document.getElementById(toggleId).addEventListener('change', (e) => {
+                this.series[seriesName].applyOptions({
+                    visible: e.target.checked
+                });
+            });
+        });
+
+        // Bollinger Bands toggle
+        document.getElementById('toggle-bb').addEventListener('change', (e) => {
+            const visible = e.target.checked;
+            this.series.bbUpper.applyOptions({ visible });
+            this.series.bbLower.applyOptions({ visible });
+        });
+
+        // GC/DC toggle
+        document.getElementById('toggle-gcdc').addEventListener('change', (e) => {
+            this.showGCDC = e.target.checked;
+            this.updateMarkers();
+        });
+
+        // Resize handler
+        window.addEventListener('resize', () => {
+            Object.values(this.charts).forEach(chart => {
+                chart.applyOptions({ width: chart.options().width });
+            });
+        });
+    }
+
+    async loadHistoricalData() {
+        try {
+            const interval = this.timeframe;
+            const url = `https://api.binance.com/api/v3/klines?symbol=${this.symbol}&interval=${interval}&limit=1000`;
+
+            const response = await fetch(url);
+            const data = await response.json();
+
+            this.candleData = data.map(d => ({
+                time: Math.floor(d[0] / 1000),
+                open: parseFloat(d[1]),
+                high: parseFloat(d[2]),
+                low: parseFloat(d[3]),
+                close: parseFloat(d[4]),
+                volume: parseFloat(d[5]),
+            }));
+
+            this.updateAllCharts();
+            this.updatePriceDisplay();
+        } catch (error) {
+            console.error('Error loading historical data:', error);
+        }
+    }
+
+    updateAllCharts() {
+        if (this.candleData.length === 0) return;
+
+        // Update candlestick
+        this.series.candle.setData(this.candleData);
+
+        // Update volume
+        const volumeData = this.candleData.map(d => ({
+            time: d.time,
+            value: d.volume,
+            color: d.close >= d.open ? 'rgba(38, 166, 154, 0.5)' : 'rgba(239, 83, 80, 0.5)'
+        }));
+        this.series.volume.setData(volumeData);
+
+        // Calculate and update Moving Averages
+        const ma5 = TechnicalIndicators.SMA(this.candleData, 5);
+        const ma20 = TechnicalIndicators.SMA(this.candleData, 20);
+        const ma60 = TechnicalIndicators.SMA(this.candleData, 60);
+        const ma120 = TechnicalIndicators.SMA(this.candleData, 120);
+        const ma200 = TechnicalIndicators.SMA(this.candleData, 200);
+
+        this.series.ma5.setData(ma5.filter(d => d.value !== null));
+        this.series.ma20.setData(ma20.filter(d => d.value !== null));
+        this.series.ma60.setData(ma60.filter(d => d.value !== null));
+        this.series.ma120.setData(ma120.filter(d => d.value !== null));
+        this.series.ma200.setData(ma200.filter(d => d.value !== null));
+
+        // Calculate and update Bollinger Bands (Middle is same as MA20, so skip it)
+        const bb = TechnicalIndicators.BollingerBands(this.candleData, 20, 2);
+        this.series.bbUpper.setData(bb.upper.filter(d => d.value !== null));
+        this.series.bbLower.setData(bb.lower.filter(d => d.value !== null));
+
+        // Calculate and update MACD
+        const macd = TechnicalIndicators.MACD(this.candleData, 12, 26, 9);
+        // Keep null values as 0 to maintain time alignment
+        this.series.macdLine.setData(macd.macdLine.map(d => ({ time: d.time, value: d.value ?? 0 })));
+        this.series.signalLine.setData(macd.signalLine.map(d => ({ time: d.time, value: d.value ?? 0 })));
+        this.series.histogram.setData(macd.histogram.map(d => ({ time: d.time, value: d.value ?? 0, color: d.color })));
+
+        // Calculate and update RSI
+        const rsi = TechnicalIndicators.RSI(this.candleData, 14);
+        this.series.rsi.setData(rsi.filter(d => d.value !== null));
+
+        // RSI reference lines
+        const rsiLineData = this.candleData.map(d => ({ time: d.time }));
+        this.series.rsiOverbought.setData(rsiLineData.map(d => ({ ...d, value: 70 })));
+        this.series.rsiOversold.setData(rsiLineData.map(d => ({ ...d, value: 30 })));
+
+        // Calculate and update Stochastic
+        const stochastic = TechnicalIndicators.Stochastic(this.candleData, 14, 3, 3);
+        this.series.stochK.setData(stochastic.k.filter(d => d.value !== null));
+        this.series.stochD.setData(stochastic.d.filter(d => d.value !== null));
+
+        // Stochastic reference lines
+        this.series.stochOverbought.setData(rsiLineData.map(d => ({ ...d, value: 80 })));
+        this.series.stochOversold.setData(rsiLineData.map(d => ({ ...d, value: 20 })));
+
+        // Detect and display signals
+        this.detectSignals(ma5, ma20, ma60, rsi, macd, stochastic);
+
+        // Update analysis panel
+        this.updateAnalysis(ma5, ma20, ma60, bb, macd, rsi, stochastic);
+
+        // First fit content, then set visible range after a short delay
+        Object.values(this.charts).forEach(chart => {
+            chart.timeScale().fitContent();
+        });
+
+        // Show last 150 candles by default after rendering
+        setTimeout(() => this.setVisibleCandles(150), 100);
+    }
+
+    setVisibleCandles(count) {
+        if (this.candleData.length > 0) {
+            const lastIndex = this.candleData.length - 1;
+            const fromIndex = Math.max(0, lastIndex - count);
+
+            Object.values(this.charts).forEach(chart => {
+                chart.timeScale().setVisibleLogicalRange({
+                    from: fromIndex,
+                    to: lastIndex + 10,
+                });
+            });
+        }
+    }
+
+    detectSignals(ma5, ma20, ma60, rsi, macd, stochastic) {
+        const allSignals = [];
+        const markers = [];
+
+        // MA Cross signals (5-20, 20-60)
+        const ma5_20Cross = TechnicalIndicators.detectCrosses(ma5, ma20);
+        const ma20_60Cross = TechnicalIndicators.detectCrosses(ma20, ma60);
+
+        ma5_20Cross.forEach(signal => {
+            allSignals.push({
+                ...signal,
+                description: signal.type === 'golden' ? 'MA5-20 Golden Cross' : 'MA5-20 Dead Cross'
+            });
+            markers.push({
+                time: signal.time,
+                position: signal.type === 'golden' ? 'belowBar' : 'aboveBar',
+                color: signal.type === 'golden' ? '#26a69a' : '#ef5350',
+                shape: signal.type === 'golden' ? 'arrowUp' : 'arrowDown',
+                text: signal.type === 'golden' ? 'GC' : 'DC'
+            });
+        });
+
+        ma20_60Cross.forEach(signal => {
+            allSignals.push({
+                ...signal,
+                description: signal.type === 'golden' ? 'MA20-60 Golden Cross' : 'MA20-60 Dead Cross'
+            });
+            markers.push({
+                time: signal.time,
+                position: signal.type === 'golden' ? 'belowBar' : 'aboveBar',
+                color: signal.type === 'golden' ? '#26a69a' : '#ef5350',
+                shape: signal.type === 'golden' ? 'arrowUp' : 'arrowDown',
+                text: signal.type === 'golden' ? 'GC20' : 'DC20'
+            });
+        });
+
+        // RSI signals
+        const rsiSignals = TechnicalIndicators.detectRSISignals(rsi);
+        rsiSignals.forEach(signal => {
+            allSignals.push(signal);
+        });
+
+        // MACD signals
+        const macdSignals = TechnicalIndicators.detectMACDSignals(macd);
+        macdSignals.forEach(signal => {
+            allSignals.push(signal);
+        });
+
+        // Stochastic signals
+        const stochSignals = TechnicalIndicators.detectStochasticSignals(stochastic);
+        stochSignals.forEach(signal => {
+            allSignals.push(signal);
+        });
+
+        // Store markers and update display
+        this.gcDcMarkers = markers.sort((a, b) => a.time - b.time);
+        this.updateMarkers();
+
+        // Update signal list (last 20 signals)
+        this.signals = allSignals.sort((a, b) => b.time - a.time).slice(0, 20);
+        this.updateSignalList();
+    }
+
+    updateMarkers() {
+        if (this.showGCDC) {
+            this.series.candle.setMarkers(this.gcDcMarkers);
+        } else {
+            this.series.candle.setMarkers([]);
+        }
+    }
+
+    updateSignalList() {
+        // Signal list panel was removed, so this function is now a no-op
+        // Keeping for potential future use
+    }
+
+    updatePriceDisplay() {
+        if (this.candleData.length === 0) return;
+
+        const currentCandle = this.candleData[this.candleData.length - 1];
+        const prevCandle = this.candleData[this.candleData.length - 2];
+
+        const priceEl = document.getElementById('current-price');
+        const changeEl = document.getElementById('price-change');
+
+        priceEl.textContent = `$${currentCandle.close.toLocaleString('en-US', {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2
+        })}`;
+
+        if (prevCandle) {
+            const change = currentCandle.close - prevCandle.close;
+            const changePercent = (change / prevCandle.close) * 100;
+            const isUp = change >= 0;
+
+            changeEl.textContent = `${isUp ? '+' : ''}${change.toFixed(2)} (${isUp ? '+' : ''}${changePercent.toFixed(2)}%)`;
+            changeEl.className = isUp ? 'up' : 'down';
+        }
+    }
+
+    connectWebSocket() {
+        const wsUrl = `wss://stream.binance.com:9443/ws/${this.symbol.toLowerCase()}@kline_${this.timeframe}`;
+
+        this.ws = new WebSocket(wsUrl);
+
+        this.ws.onopen = () => {
+            console.log('WebSocket connected');
+        };
+
+        this.ws.onmessage = (event) => {
+            const data = JSON.parse(event.data);
+            if (data.k) {
+                this.handleKlineData(data.k);
+            }
+        };
+
+        this.ws.onerror = (error) => {
+            console.error('WebSocket error:', error);
+        };
+
+        this.ws.onclose = () => {
+            console.log('WebSocket disconnected.');
+            // Only auto-reconnect if ws is still set (not manually closed)
+            if (this.ws) {
+                console.log('Reconnecting in 5 seconds...');
+                setTimeout(() => this.connectWebSocket(), 5000);
+            }
+        };
+    }
+
+    handleKlineData(kline) {
+        // Validate that candle data exists (prevents errors during timeframe switch)
+        if (this.candleData.length === 0) {
+            return;
+        }
+
+        const candle = {
+            time: Math.floor(kline.t / 1000),
+            open: parseFloat(kline.o),
+            high: parseFloat(kline.h),
+            low: parseFloat(kline.l),
+            close: parseFloat(kline.c),
+            volume: parseFloat(kline.v),
+        };
+
+        // Check if this is an update to existing candle or new candle
+        const lastCandle = this.candleData[this.candleData.length - 1];
+
+        // Validate candle time - reject if older than our last candle (stale data from previous timeframe)
+        if (lastCandle && candle.time < lastCandle.time) {
+            console.log('Ignoring stale candle data:', candle.time, 'vs', lastCandle.time);
+            return;
+        }
+
+        const isNewCandle = !lastCandle || lastCandle.time !== candle.time;
+
+        if (lastCandle && lastCandle.time === candle.time) {
+            // Update existing candle
+            this.candleData[this.candleData.length - 1] = candle;
+        } else {
+            // New candle started - update analysis with previous candle data before adding new one
+            this.candleData.push(candle);
+            // Keep only last 500 candles
+            if (this.candleData.length > 500) {
+                this.candleData.shift();
+            }
+        }
+
+        // Update chart with new data
+        try {
+            this.series.candle.update(candle);
+
+            // Update volume
+            this.series.volume.update({
+                time: candle.time,
+                value: candle.volume,
+                color: candle.close >= candle.open ? 'rgba(38, 166, 154, 0.5)' : 'rgba(239, 83, 80, 0.5)'
+            });
+        } catch (error) {
+            console.warn('Chart update error (may occur during timeframe switch):', error.message);
+            return;
+        }
+
+        // Update indicators (chart lines) in real-time
+        // Update analysis panel when a new candle starts (previous candle is complete)
+        this.updateIndicatorsRealtime(isNewCandle);
+        this.updatePriceDisplay();
+    }
+
+    updateIndicatorsRealtime(updateAnalysisPanel = false) {
+        // Recalculate all indicators with updated data
+        // For performance, we could optimize to only update the last few values
+
+        const ma5 = TechnicalIndicators.SMA(this.candleData, 5);
+        const ma20 = TechnicalIndicators.SMA(this.candleData, 20);
+        const ma60 = TechnicalIndicators.SMA(this.candleData, 60);
+        const ma120 = TechnicalIndicators.SMA(this.candleData, 120);
+        const ma200 = TechnicalIndicators.SMA(this.candleData, 200);
+
+        // Update only the last point for real-time
+        const lastIdx = this.candleData.length - 1;
+
+        if (ma5[lastIdx]?.value) this.series.ma5.update(ma5[lastIdx]);
+        if (ma20[lastIdx]?.value) this.series.ma20.update(ma20[lastIdx]);
+        if (ma60[lastIdx]?.value) this.series.ma60.update(ma60[lastIdx]);
+        if (ma120[lastIdx]?.value) this.series.ma120.update(ma120[lastIdx]);
+        if (ma200[lastIdx]?.value) this.series.ma200.update(ma200[lastIdx]);
+
+        // Bollinger Bands (Middle is same as MA20, so skip it)
+        const bb = TechnicalIndicators.BollingerBands(this.candleData, 20, 2);
+        if (bb.upper[lastIdx]?.value) this.series.bbUpper.update(bb.upper[lastIdx]);
+        if (bb.lower[lastIdx]?.value) this.series.bbLower.update(bb.lower[lastIdx]);
+
+        // MACD
+        const macd = TechnicalIndicators.MACD(this.candleData, 12, 26, 9);
+        if (macd.macdLine[lastIdx]?.value) this.series.macdLine.update(macd.macdLine[lastIdx]);
+        if (macd.signalLine[lastIdx]?.value) this.series.signalLine.update(macd.signalLine[lastIdx]);
+        if (macd.histogram[lastIdx]) this.series.histogram.update(macd.histogram[lastIdx]);
+
+        // RSI
+        const rsi = TechnicalIndicators.RSI(this.candleData, 14);
+        if (rsi[lastIdx]?.value) this.series.rsi.update(rsi[lastIdx]);
+
+        // Stochastic
+        const stochastic = TechnicalIndicators.Stochastic(this.candleData, 14, 3, 3);
+        if (stochastic.k[lastIdx]?.value) this.series.stochK.update(stochastic.k[lastIdx]);
+        if (stochastic.d[lastIdx]?.value) this.series.stochD.update(stochastic.d[lastIdx]);
+
+        // Update analysis panel only when candle is closed (completed)
+        if (updateAnalysisPanel) {
+            this.updateAnalysis(ma5, ma20, ma60, bb, macd, rsi, stochastic);
+        }
+    }
+
+    updateAnalysis(ma5, ma20, ma60, bb, macd, rsi, stochastic) {
+        // Use the last candle for analysis
+        const lastIdx = this.candleData.length - 1;
+        if (lastIdx < 0) return;
+
+        const lastCandle = this.candleData[lastIdx];
+        const analyzedPrice = lastCandle.close;
+        let totalScore = 0;
+        let analysisCount = 0;
+
+        // Update time to show the analyzed candle's time
+        const candleTime = new Date(lastCandle.time * 1000);
+        const timeStr = candleTime.toLocaleString('ko-KR', {
+            timeZone: 'Asia/Seoul',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+        document.getElementById('analysis-time').textContent = timeStr;
+
+        // 1. MA Trend Analysis
+        const ma5Val = ma5[lastIdx]?.value;
+        const ma20Val = ma20[lastIdx]?.value;
+        const ma60Val = ma60[lastIdx]?.value;
+        let maSignal = 'neutral';
+        let maDetail = '';
+        let maScore = 0;
+
+        if (ma5Val && ma20Val && ma60Val) {
+            if (analyzedPrice > ma5Val && ma5Val > ma20Val && ma20Val > ma60Val) {
+                maSignal = 'buy';
+                maDetail = 'Strong uptrend';
+                maScore = 2;
+            } else if (analyzedPrice > ma5Val && ma5Val > ma20Val) {
+                maSignal = 'buy';
+                maDetail = 'Uptrend';
+                maScore = 1;
+            } else if (analyzedPrice < ma5Val && ma5Val < ma20Val && ma20Val < ma60Val) {
+                maSignal = 'sell';
+                maDetail = 'Strong downtrend';
+                maScore = -2;
+            } else if (analyzedPrice < ma5Val && ma5Val < ma20Val) {
+                maSignal = 'sell';
+                maDetail = 'Downtrend';
+                maScore = -1;
+            } else {
+                maDetail = 'Consolidating';
+            }
+            totalScore += maScore;
+            analysisCount++;
+        }
+        this.updateAnalysisItem('analysis-ma', maSignal, maSignal === 'buy' ? 'BUY' : maSignal === 'sell' ? 'SELL' : 'HOLD', maDetail);
+
+        // 2. Bollinger Bands Analysis
+        const bbUpper = bb.upper[lastIdx]?.value;
+        const bbLower = bb.lower[lastIdx]?.value;
+        let bbSignal = 'neutral';
+        let bbDetail = '';
+        let bbScore = 0;
+
+        if (bbUpper && bbLower) {
+            const bbMiddle = ma20Val;
+            const bbWidth = ((bbUpper - bbLower) / bbMiddle * 100).toFixed(1);
+
+            if (analyzedPrice >= bbUpper) {
+                bbSignal = 'sell';
+                bbDetail = `Overbought (${bbWidth}%)`;
+                bbScore = -1;
+            } else if (analyzedPrice <= bbLower) {
+                bbSignal = 'buy';
+                bbDetail = `Oversold (${bbWidth}%)`;
+                bbScore = 1;
+            } else if (analyzedPrice > bbMiddle) {
+                bbDetail = `Upper zone (${bbWidth}%)`;
+            } else {
+                bbDetail = `Lower zone (${bbWidth}%)`;
+            }
+            totalScore += bbScore;
+            analysisCount++;
+        }
+        this.updateAnalysisItem('analysis-bb', bbSignal, bbSignal === 'buy' ? 'BUY' : bbSignal === 'sell' ? 'SELL' : 'HOLD', bbDetail);
+
+        // 3. MACD Analysis
+        const macdVal = macd.macdLine[lastIdx]?.value;
+        const signalVal = macd.signalLine[lastIdx]?.value;
+        const histVal = macd.histogram[lastIdx]?.value;
+        let macdSignal = 'neutral';
+        let macdDetail = '';
+        let macdScore = 0;
+
+        if (macdVal !== null && signalVal !== null) {
+            const prevHistVal = macd.histogram[lastIdx - 1]?.value ?? 0;
+
+            if (macdVal > signalVal && histVal > 0) {
+                macdSignal = 'buy';
+                macdDetail = histVal > prevHistVal ? 'Bullish momentum+' : 'Bullish';
+                macdScore = histVal > prevHistVal ? 2 : 1;
+            } else if (macdVal < signalVal && histVal < 0) {
+                macdSignal = 'sell';
+                macdDetail = histVal < prevHistVal ? 'Bearish momentum+' : 'Bearish';
+                macdScore = histVal < prevHistVal ? -2 : -1;
+            } else {
+                macdDetail = 'Crossing';
+            }
+            totalScore += macdScore;
+            analysisCount++;
+        }
+        this.updateAnalysisItem('analysis-macd', macdSignal, macdSignal === 'buy' ? 'BUY' : macdSignal === 'sell' ? 'SELL' : 'HOLD', macdDetail);
+
+        // 4. RSI Analysis
+        const rsiVal = rsi[lastIdx]?.value;
+        let rsiSignal = 'neutral';
+        let rsiDetail = '';
+        let rsiScore = 0;
+
+        if (rsiVal !== null) {
+            if (rsiVal >= 70) {
+                rsiSignal = 'sell';
+                rsiDetail = `Overbought (${rsiVal.toFixed(1)})`;
+                rsiScore = -1;
+            } else if (rsiVal <= 30) {
+                rsiSignal = 'buy';
+                rsiDetail = `Oversold (${rsiVal.toFixed(1)})`;
+                rsiScore = 1;
+            } else if (rsiVal >= 50) {
+                rsiDetail = `Bullish (${rsiVal.toFixed(1)})`;
+                rsiScore = 0.5;
+            } else {
+                rsiDetail = `Bearish (${rsiVal.toFixed(1)})`;
+                rsiScore = -0.5;
+            }
+            totalScore += rsiScore;
+            analysisCount++;
+        }
+        this.updateAnalysisItem('analysis-rsi', rsiSignal, rsiSignal === 'buy' ? 'BUY' : rsiSignal === 'sell' ? 'SELL' : 'HOLD', rsiDetail);
+
+        // 5. Stochastic Analysis
+        const stochKVal = stochastic.k[lastIdx]?.value;
+        const stochDVal = stochastic.d[lastIdx]?.value;
+        let stochSignal = 'neutral';
+        let stochDetail = '';
+        let stochScore = 0;
+
+        if (stochKVal !== null && stochDVal !== null) {
+            if (stochKVal >= 80) {
+                stochSignal = 'sell';
+                stochDetail = `Overbought (${stochKVal.toFixed(1)})`;
+                stochScore = -1;
+            } else if (stochKVal <= 20) {
+                stochSignal = 'buy';
+                stochDetail = `Oversold (${stochKVal.toFixed(1)})`;
+                stochScore = 1;
+            } else if (stochKVal > stochDVal) {
+                stochDetail = `Bullish (${stochKVal.toFixed(1)})`;
+                stochScore = 0.5;
+            } else {
+                stochDetail = `Bearish (${stochKVal.toFixed(1)})`;
+                stochScore = -0.5;
+            }
+            totalScore += stochScore;
+            analysisCount++;
+        }
+        this.updateAnalysisItem('analysis-stoch', stochSignal, stochSignal === 'buy' ? 'BUY' : stochSignal === 'sell' ? 'SELL' : 'HOLD', stochDetail);
+
+        // Calculate overall signal
+        const avgScore = analysisCount > 0 ? totalScore / analysisCount : 0;
+        let overallSignal = 'NEUTRAL';
+        let overallClass = 'neutral';
+
+        if (avgScore >= 1) {
+            overallSignal = 'STRONG BUY';
+            overallClass = 'buy';
+        } else if (avgScore >= 0.3) {
+            overallSignal = 'BUY';
+            overallClass = 'buy';
+        } else if (avgScore <= -1) {
+            overallSignal = 'STRONG SELL';
+            overallClass = 'sell';
+        } else if (avgScore <= -0.3) {
+            overallSignal = 'SELL';
+            overallClass = 'sell';
+        }
+
+        const overallEl = document.querySelector('#overall-signal .signal-value');
+        overallEl.textContent = overallSignal;
+        overallEl.className = `signal-value ${overallClass}`;
+
+        // Update score marker (normalize to 0-100 scale, where 50 is neutral)
+        const normalizedScore = Math.max(0, Math.min(100, 50 + avgScore * 25));
+        document.getElementById('score-marker').style.left = `${normalizedScore}%`;
+
+        // Update summary text
+        this.updateSummaryText(avgScore, maSignal, bbSignal, macdSignal, rsiSignal, stochSignal);
+
+        // Update Korean analysis
+        this.updateKoreanAnalysis(avgScore, maDetail, bbDetail, macdDetail, rsiDetail, stochDetail, rsiVal, stochKVal);
+    }
+
+    updateAnalysisItem(elementId, signal, value, detail) {
+        const item = document.getElementById(elementId);
+        const valueEl = item.querySelector('.item-value');
+        const detailEl = item.querySelector('.item-detail');
+
+        valueEl.textContent = value;
+        valueEl.className = `item-value ${signal}`;
+        detailEl.textContent = detail;
+    }
+
+    updateSummaryText(avgScore, ma, bb, macd, rsi, stoch) {
+        let summary = '';
+        const buySignals = [ma, bb, macd, rsi, stoch].filter(s => s === 'buy').length;
+        const sellSignals = [ma, bb, macd, rsi, stoch].filter(s => s === 'sell').length;
+
+        if (avgScore >= 1) {
+            summary = `Strong bullish momentum. ${buySignals}/5 indicators show buy signals. Consider long positions with proper risk management.`;
+        } else if (avgScore >= 0.3) {
+            summary = `Moderate bullish bias. ${buySignals}/5 buy signals detected. Market shows upward tendency.`;
+        } else if (avgScore <= -1) {
+            summary = `Strong bearish momentum. ${sellSignals}/5 indicators show sell signals. Consider short positions or wait for reversal.`;
+        } else if (avgScore <= -0.3) {
+            summary = `Moderate bearish bias. ${sellSignals}/5 sell signals detected. Market shows downward tendency.`;
+        } else {
+            summary = `Market is consolidating. Mixed signals from indicators. Wait for clearer direction before entering positions.`;
+        }
+
+        document.getElementById('analysis-summary-text').textContent = summary;
+    }
+
+    updateKoreanAnalysis(avgScore, maDetail, bbDetail, macdDetail, rsiDetail, stochDetail, rsiVal, stochKVal) {
+        const parts = [];
+
+        // 전체 시장 상황
+        if (avgScore >= 1) {
+            parts.push('현재 시장은 강한 상승 추세입니다.');
+        } else if (avgScore >= 0.3) {
+            parts.push('현재 시장은 상승 추세입니다.');
+        } else if (avgScore <= -1) {
+            parts.push('현재 시장은 강한 하락 추세입니다.');
+        } else if (avgScore <= -0.3) {
+            parts.push('현재 시장은 하락 추세입니다.');
+        } else {
+            parts.push('현재 시장은 횡보 구간입니다.');
+        }
+
+        // 이동평균선 분석
+        if (maDetail.includes('Strong uptrend')) {
+            parts.push('이동평균선이 정배열로 강한 매수세를 보이고 있습니다.');
+        } else if (maDetail.includes('Uptrend')) {
+            parts.push('단기 이동평균선이 상승 추세를 나타내고 있습니다.');
+        } else if (maDetail.includes('Strong downtrend')) {
+            parts.push('이동평균선이 역배열로 강한 매도세를 보이고 있습니다.');
+        } else if (maDetail.includes('Downtrend')) {
+            parts.push('단기 이동평균선이 하락 추세를 나타내고 있습니다.');
+        } else if (maDetail.includes('Consolidating')) {
+            parts.push('이동평균선이 수렴하며 방향성을 찾는 중입니다.');
+        }
+
+        // 볼린저 밴드 분석
+        if (bbDetail.includes('Overbought')) {
+            parts.push('가격이 볼린저 밴드 상단에 위치하여 과매수 구간입니다.');
+        } else if (bbDetail.includes('Oversold')) {
+            parts.push('가격이 볼린저 밴드 하단에 위치하여 과매도 구간입니다.');
+        }
+
+        // RSI 분석
+        if (rsiVal !== null) {
+            if (rsiVal >= 70) {
+                parts.push(`RSI가 ${rsiVal.toFixed(0)}으로 과매수 상태이며, 조정 가능성이 있습니다.`);
+            } else if (rsiVal <= 30) {
+                parts.push(`RSI가 ${rsiVal.toFixed(0)}으로 과매도 상태이며, 반등 가능성이 있습니다.`);
+            } else if (rsiVal >= 60) {
+                parts.push(`RSI가 ${rsiVal.toFixed(0)}으로 매수세가 우세합니다.`);
+            } else if (rsiVal <= 40) {
+                parts.push(`RSI가 ${rsiVal.toFixed(0)}으로 매도세가 우세합니다.`);
+            }
+        }
+
+        // MACD 분석
+        if (macdDetail.includes('Bullish momentum+')) {
+            parts.push('MACD 히스토그램이 증가하며 상승 모멘텀이 강화되고 있습니다.');
+        } else if (macdDetail.includes('Bullish')) {
+            parts.push('MACD가 시그널선 위에서 상승 신호를 유지하고 있습니다.');
+        } else if (macdDetail.includes('Bearish momentum+')) {
+            parts.push('MACD 히스토그램이 감소하며 하락 모멘텀이 강화되고 있습니다.');
+        } else if (macdDetail.includes('Bearish')) {
+            parts.push('MACD가 시그널선 아래에서 하락 신호를 유지하고 있습니다.');
+        } else if (macdDetail.includes('Crossing')) {
+            parts.push('MACD와 시그널선이 교차 중으로 추세 전환 가능성이 있습니다.');
+        }
+
+        // 스토캐스틱 분석
+        if (stochKVal !== null) {
+            if (stochKVal >= 80) {
+                parts.push('스토캐스틱이 과매수 구간에 진입했습니다.');
+            } else if (stochKVal <= 20) {
+                parts.push('스토캐스틱이 과매도 구간에 진입했습니다.');
+            }
+        }
+
+        // 투자 제안
+        if (avgScore >= 1) {
+            parts.push('매수 포지션 진입을 고려해볼 수 있으나, 리스크 관리에 유의하세요.');
+        } else if (avgScore >= 0.3) {
+            parts.push('상승 가능성이 높으나 추가 확인 후 진입을 권장합니다.');
+        } else if (avgScore <= -1) {
+            parts.push('매도 또는 관망을 권장하며, 반등 신호 확인이 필요합니다.');
+        } else if (avgScore <= -0.3) {
+            parts.push('하락 가능성이 있으니 신규 매수는 신중하게 접근하세요.');
+        } else {
+            parts.push('명확한 방향성이 나올 때까지 관망을 권장합니다.');
+        }
+
+        document.getElementById('korean-analysis-text').textContent = parts.join(' ');
+    }
+
+    reconnectWebSocket() {
+        if (this.ws) {
+            this.ws.close();
+        }
+        this.connectWebSocket();
+    }
+}
+
+// Initialize the application
+document.addEventListener('DOMContentLoaded', () => {
+    window.tradingView = new TradingView();
+});
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..ec4120b
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,15 @@
+version: '3.8'
+
+services:
+  bini-trading-view:
+    build: .
+    container_name: bini-trading-view
+    restart: unless-stopped
+    expose:
+      - "80"
+    networks:
+      - caddy_network  # Caddy와 같은 네트워크
+
+networks:
+  caddy_network:
+    external: true  # 기존 Caddy 네트워크에 연결 (네트워크 이름은 환경에 맞게 수정)
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d18a977
--- /dev/null
+++ b/index.html
@@ -0,0 +1,153 @@
+<!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>
diff --git a/indicators.js b/indicators.js
new file mode 100644
index 0000000..b8609d2
--- /dev/null
+++ b/indicators.js
@@ -0,0 +1,376 @@
+// Technical Indicators Calculator
+
+class TechnicalIndicators {
+
+    // Simple Moving Average (SMA)
+    static SMA(data, period) {
+        const result = [];
+        for (let i = 0; i < data.length; i++) {
+            if (i < period - 1) {
+                result.push({ time: data[i].time, value: null });
+            } else {
+                let sum = 0;
+                for (let j = 0; j < period; j++) {
+                    sum += data[i - j].close;
+                }
+                result.push({ time: data[i].time, value: sum / period });
+            }
+        }
+        return result;
+    }
+
+    // Exponential Moving Average (EMA)
+    static EMA(data, period) {
+        const result = [];
+        const multiplier = 2 / (period + 1);
+
+        // First EMA uses SMA
+        let sum = 0;
+        for (let i = 0; i < period; i++) {
+            sum += data[i].close;
+            result.push({ time: data[i].time, value: null });
+        }
+        result[period - 1] = { time: data[period - 1].time, value: sum / period };
+
+        // Calculate EMA for remaining data
+        for (let i = period; i < data.length; i++) {
+            const ema = (data[i].close - result[i - 1].value) * multiplier + result[i - 1].value;
+            result.push({ time: data[i].time, value: ema });
+        }
+
+        return result;
+    }
+
+    // Bollinger Bands
+    static BollingerBands(data, period = 20, stdDev = 2) {
+        const sma = this.SMA(data, period);
+        const upper = [];
+        const lower = [];
+
+        for (let i = 0; i < data.length; i++) {
+            if (i < period - 1) {
+                upper.push({ time: data[i].time, value: null });
+                lower.push({ time: data[i].time, value: null });
+            } else {
+                // Calculate standard deviation
+                let sumSquares = 0;
+                for (let j = 0; j < period; j++) {
+                    sumSquares += Math.pow(data[i - j].close - sma[i].value, 2);
+                }
+                const std = Math.sqrt(sumSquares / period);
+
+                upper.push({ time: data[i].time, value: sma[i].value + stdDev * std });
+                lower.push({ time: data[i].time, value: sma[i].value - stdDev * std });
+            }
+        }
+
+        return { middle: sma, upper, lower };
+    }
+
+    // MACD (Moving Average Convergence Divergence)
+    static MACD(data, fastPeriod = 12, slowPeriod = 26, signalPeriod = 9) {
+        const emaFast = this.EMA(data, fastPeriod);
+        const emaSlow = this.EMA(data, slowPeriod);
+
+        // MACD Line = Fast EMA - Slow EMA
+        const macdLine = [];
+        for (let i = 0; i < data.length; i++) {
+            if (emaFast[i].value === null || emaSlow[i].value === null) {
+                macdLine.push({ time: data[i].time, value: null, close: null });
+            } else {
+                const value = emaFast[i].value - emaSlow[i].value;
+                macdLine.push({ time: data[i].time, value, close: value });
+            }
+        }
+
+        // Signal Line = EMA of MACD Line
+        const validMacdData = macdLine.filter(d => d.value !== null);
+        const signalEma = this.EMA(validMacdData, signalPeriod);
+
+        // Map signal back to full timeline
+        const signalLine = [];
+        let signalIndex = 0;
+        for (let i = 0; i < data.length; i++) {
+            if (macdLine[i].value === null || signalIndex >= signalEma.length) {
+                signalLine.push({ time: data[i].time, value: null });
+            } else if (signalEma[signalIndex] && signalEma[signalIndex].time === data[i].time) {
+                signalLine.push({ time: data[i].time, value: signalEma[signalIndex].value });
+                signalIndex++;
+            } else {
+                signalLine.push({ time: data[i].time, value: null });
+            }
+        }
+
+        // Histogram = MACD Line - Signal Line
+        const histogram = [];
+        for (let i = 0; i < data.length; i++) {
+            if (macdLine[i].value === null || signalLine[i].value === null) {
+                histogram.push({ time: data[i].time, value: 0, color: '#363a45' });
+            } else {
+                const value = macdLine[i].value - signalLine[i].value;
+                histogram.push({
+                    time: data[i].time,
+                    value,
+                    color: value >= 0 ? '#26a69a' : '#ef5350'
+                });
+            }
+        }
+
+        return { macdLine, signalLine, histogram };
+    }
+
+    // RSI (Relative Strength Index)
+    static RSI(data, period = 14) {
+        const result = [];
+        const gains = [];
+        const losses = [];
+
+        // Calculate price changes
+        for (let i = 0; i < data.length; i++) {
+            if (i === 0) {
+                gains.push(0);
+                losses.push(0);
+                result.push({ time: data[i].time, value: null });
+                continue;
+            }
+
+            const change = data[i].close - data[i - 1].close;
+            gains.push(change > 0 ? change : 0);
+            losses.push(change < 0 ? Math.abs(change) : 0);
+
+            if (i < period) {
+                result.push({ time: data[i].time, value: null });
+            } else if (i === period) {
+                // First RSI calculation uses simple average
+                let avgGain = 0, avgLoss = 0;
+                for (let j = 1; j <= period; j++) {
+                    avgGain += gains[j];
+                    avgLoss += losses[j];
+                }
+                avgGain /= period;
+                avgLoss /= period;
+
+                const rs = avgLoss === 0 ? 100 : avgGain / avgLoss;
+                const rsi = 100 - (100 / (1 + rs));
+                result.push({ time: data[i].time, value: rsi, avgGain, avgLoss });
+            } else {
+                // Subsequent RSI uses smoothed average
+                const prevAvgGain = result[i - 1].avgGain;
+                const prevAvgLoss = result[i - 1].avgLoss;
+                const avgGain = (prevAvgGain * (period - 1) + gains[i]) / period;
+                const avgLoss = (prevAvgLoss * (period - 1) + losses[i]) / period;
+
+                const rs = avgLoss === 0 ? 100 : avgGain / avgLoss;
+                const rsi = 100 - (100 / (1 + rs));
+                result.push({ time: data[i].time, value: rsi, avgGain, avgLoss });
+            }
+        }
+
+        return result.map(d => ({ time: d.time, value: d.value }));
+    }
+
+    // Stochastic Oscillator
+    static Stochastic(data, kPeriod = 14, dPeriod = 3, smooth = 3) {
+        const kValues = [];
+
+        // Calculate %K
+        for (let i = 0; i < data.length; i++) {
+            if (i < kPeriod - 1) {
+                kValues.push({ time: data[i].time, value: null, close: null });
+            } else {
+                let highest = -Infinity;
+                let lowest = Infinity;
+
+                for (let j = 0; j < kPeriod; j++) {
+                    highest = Math.max(highest, data[i - j].high);
+                    lowest = Math.min(lowest, data[i - j].low);
+                }
+
+                const k = highest === lowest ? 50 : ((data[i].close - lowest) / (highest - lowest)) * 100;
+                kValues.push({ time: data[i].time, value: k, close: k });
+            }
+        }
+
+        // Smooth %K (Fast %K -> Slow %K)
+        const slowK = [];
+        for (let i = 0; i < kValues.length; i++) {
+            if (i < kPeriod - 1 + smooth - 1) {
+                slowK.push({ time: kValues[i].time, value: null, close: null });
+            } else {
+                let sum = 0;
+                let count = 0;
+                for (let j = 0; j < smooth; j++) {
+                    if (kValues[i - j].value !== null) {
+                        sum += kValues[i - j].value;
+                        count++;
+                    }
+                }
+                const value = count > 0 ? sum / count : null;
+                slowK.push({ time: kValues[i].time, value, close: value });
+            }
+        }
+
+        // Calculate %D (SMA of Slow %K)
+        const dValues = [];
+        for (let i = 0; i < slowK.length; i++) {
+            if (i < kPeriod - 1 + smooth - 1 + dPeriod - 1) {
+                dValues.push({ time: slowK[i].time, value: null });
+            } else {
+                let sum = 0;
+                let count = 0;
+                for (let j = 0; j < dPeriod; j++) {
+                    if (slowK[i - j].value !== null) {
+                        sum += slowK[i - j].value;
+                        count++;
+                    }
+                }
+                dValues.push({ time: slowK[i].time, value: count > 0 ? sum / count : null });
+            }
+        }
+
+        return {
+            k: slowK.map(d => ({ time: d.time, value: d.value })),
+            d: dValues
+        };
+    }
+
+    // Detect Golden Cross / Dead Cross
+    static detectCrosses(shortMA, longMA) {
+        const signals = [];
+
+        for (let i = 1; i < shortMA.length; i++) {
+            if (shortMA[i].value === null || longMA[i].value === null ||
+                shortMA[i - 1].value === null || longMA[i - 1].value === null) {
+                continue;
+            }
+
+            const prevShort = shortMA[i - 1].value;
+            const prevLong = longMA[i - 1].value;
+            const currShort = shortMA[i].value;
+            const currLong = longMA[i].value;
+
+            // Golden Cross: Short MA crosses above Long MA
+            if (prevShort <= prevLong && currShort > currLong) {
+                signals.push({
+                    time: shortMA[i].time,
+                    type: 'golden',
+                    description: 'Golden Cross'
+                });
+            }
+
+            // Dead Cross: Short MA crosses below Long MA
+            if (prevShort >= prevLong && currShort < currLong) {
+                signals.push({
+                    time: shortMA[i].time,
+                    type: 'dead',
+                    description: 'Dead Cross'
+                });
+            }
+        }
+
+        return signals;
+    }
+
+    // Detect RSI signals
+    static detectRSISignals(rsi, oversold = 30, overbought = 70) {
+        const signals = [];
+
+        for (let i = 1; i < rsi.length; i++) {
+            if (rsi[i].value === null || rsi[i - 1].value === null) continue;
+
+            // Oversold -> Recovery (Buy signal)
+            if (rsi[i - 1].value < oversold && rsi[i].value >= oversold) {
+                signals.push({
+                    time: rsi[i].time,
+                    type: 'buy',
+                    description: 'RSI Oversold Recovery'
+                });
+            }
+
+            // Overbought -> Decline (Sell signal)
+            if (rsi[i - 1].value > overbought && rsi[i].value <= overbought) {
+                signals.push({
+                    time: rsi[i].time,
+                    type: 'sell',
+                    description: 'RSI Overbought Decline'
+                });
+            }
+        }
+
+        return signals;
+    }
+
+    // Detect MACD signals
+    static detectMACDSignals(macd) {
+        const signals = [];
+        const { macdLine, signalLine } = macd;
+
+        for (let i = 1; i < macdLine.length; i++) {
+            if (macdLine[i].value === null || signalLine[i].value === null ||
+                macdLine[i - 1].value === null || signalLine[i - 1].value === null) {
+                continue;
+            }
+
+            const prevMacd = macdLine[i - 1].value;
+            const prevSignal = signalLine[i - 1].value;
+            const currMacd = macdLine[i].value;
+            const currSignal = signalLine[i].value;
+
+            // MACD crosses above Signal (Buy)
+            if (prevMacd <= prevSignal && currMacd > currSignal) {
+                signals.push({
+                    time: macdLine[i].time,
+                    type: 'buy',
+                    description: 'MACD Bullish Cross'
+                });
+            }
+
+            // MACD crosses below Signal (Sell)
+            if (prevMacd >= prevSignal && currMacd < currSignal) {
+                signals.push({
+                    time: macdLine[i].time,
+                    type: 'sell',
+                    description: 'MACD Bearish Cross'
+                });
+            }
+        }
+
+        return signals;
+    }
+
+    // Detect Stochastic signals
+    static detectStochasticSignals(stochastic, oversold = 20, overbought = 80) {
+        const signals = [];
+        const { k, d } = stochastic;
+
+        for (let i = 1; i < k.length; i++) {
+            if (k[i].value === null || d[i].value === null ||
+                k[i - 1].value === null || d[i - 1].value === null) {
+                continue;
+            }
+
+            // %K crosses above %D in oversold zone (Buy)
+            if (k[i - 1].value <= d[i - 1].value && k[i].value > d[i].value && k[i].value < oversold) {
+                signals.push({
+                    time: k[i].time,
+                    type: 'buy',
+                    description: 'Stochastic Oversold Cross'
+                });
+            }
+
+            // %K crosses below %D in overbought zone (Sell)
+            if (k[i - 1].value >= d[i - 1].value && k[i].value < d[i].value && k[i].value > overbought) {
+                signals.push({
+                    time: k[i].time,
+                    type: 'sell',
+                    description: 'Stochastic Overbought Cross'
+                });
+            }
+        }
+
+        return signals;
+    }
+}
+
+// Export for use in app.js
+window.TechnicalIndicators = TechnicalIndicators;
diff --git a/nginx.conf b/nginx.conf
new file mode 100644
index 0000000..8d9e887
--- /dev/null
+++ b/nginx.conf
@@ -0,0 +1,21 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Cache static assets
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+        expires 1d;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+}
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..6f01403
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,643 @@
+{
+  "name": "bini-trading-view",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "bini-trading-view",
+      "version": "1.0.0",
+      "license": "MIT",
+      "devDependencies": {
+        "http-server": "^14.1.1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/basic-auth": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
+      "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "5.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/corser": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
+      "integrity": "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "he": "bin/he"
+      }
+    },
+    "node_modules/html-encoding-sniffer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+      "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-encoding": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/http-proxy": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/http-server": {
+      "version": "14.1.1",
+      "resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.1.tgz",
+      "integrity": "sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "basic-auth": "^2.0.1",
+        "chalk": "^4.1.2",
+        "corser": "^2.0.1",
+        "he": "^1.2.0",
+        "html-encoding-sniffer": "^3.0.0",
+        "http-proxy": "^1.18.1",
+        "mime": "^1.6.0",
+        "minimist": "^1.2.6",
+        "opener": "^1.5.1",
+        "portfinder": "^1.0.28",
+        "secure-compare": "3.0.1",
+        "union": "~0.5.0",
+        "url-join": "^4.0.1"
+      },
+      "bin": {
+        "http-server": "bin/http-server"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "dev": true,
+      "license": "(WTFPL OR MIT)",
+      "bin": {
+        "opener": "bin/opener-bin.js"
+      }
+    },
+    "node_modules/portfinder": {
+      "version": "1.0.38",
+      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.38.tgz",
+      "integrity": "sha512-rEwq/ZHlJIKw++XtLAO8PPuOQA/zaPJOZJ37BVuN97nLpMJeuDVLVGRwbFoBgLudgdTMP2hdRJP++H+8QOA3vg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async": "^3.2.6",
+        "debug": "^4.3.6"
+      },
+      "engines": {
+        "node": ">= 10.12"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
+      "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/secure-compare": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz",
+      "integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/union": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
+      "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==",
+      "dev": true,
+      "dependencies": {
+        "qs": "^6.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/url-join": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
+      "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+      "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..a660d02
--- /dev/null
+++ b/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "bini-trading-view",
+  "version": "1.0.0",
+  "description": "Bitcoin Real-time Trading View with Technical Indicators",
+  "main": "index.html",
+  "scripts": {
+    "start": "npx http-server -p 3000 -o"
+  },
+  "keywords": ["bitcoin", "trading", "chart", "technical-analysis"],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "http-server": "^14.1.1"
+  }
+}
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..56ac082
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,523 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+    background-color: #131722;
+    color: #d1d4dc;
+    min-height: 100vh;
+}
+
+.container {
+    max-width: 100%;
+    margin: 0;
+    padding: 10px 20px;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    background: #1e222d;
+    border-radius: 8px;
+    margin-bottom: 10px;
+}
+
+.title-section {
+    display: flex;
+    align-items: center;
+    gap: 25px;
+}
+
+.header h1 {
+    font-size: 1.5rem;
+    color: #f0b90b;
+}
+
+.controls {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+select {
+    padding: 8px 15px;
+    background: #2a2e39;
+    border: 1px solid #363a45;
+    border-radius: 5px;
+    color: #d1d4dc;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+select:hover {
+    border-color: #f0b90b;
+}
+
+.price-info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
+#current-price {
+    font-size: 1.8rem;
+    font-weight: bold;
+    color: #f0b90b;
+}
+
+#price-change {
+    font-size: 0.9rem;
+}
+
+#price-change.up {
+    color: #26a69a;
+}
+
+#price-change.down {
+    color: #ef5350;
+}
+
+.main-content {
+    display: flex;
+    gap: 15px;
+}
+
+.charts-container {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    flex: 1;
+}
+
+/* Analysis Panel */
+.analysis-panel {
+    width: 280px;
+    background: #1e222d;
+    border-radius: 8px;
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    height: fit-content;
+    position: sticky;
+    top: 10px;
+}
+
+.analysis-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #363a45;
+    padding-bottom: 10px;
+}
+
+.analysis-header h3 {
+    color: #f0b90b;
+    font-size: 1rem;
+}
+
+#analysis-time {
+    font-size: 11px;
+    color: #848e9c;
+}
+
+.overall-signal {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 15px;
+    background: #2a2e39;
+    border-radius: 8px;
+}
+
+.overall-signal .signal-label {
+    font-size: 12px;
+    color: #848e9c;
+    margin-bottom: 5px;
+}
+
+.overall-signal .signal-value {
+    font-size: 1.5rem;
+    font-weight: bold;
+}
+
+.overall-signal .signal-value.buy {
+    color: #26a69a;
+}
+
+.overall-signal .signal-value.sell {
+    color: #ef5350;
+}
+
+.overall-signal .signal-value.neutral {
+    color: #848e9c;
+}
+
+/* Korean Analysis */
+.korean-analysis {
+    background: #2a2e39;
+    border-radius: 8px;
+    padding: 12px;
+    border-left: 3px solid #f0b90b;
+}
+
+.korean-analysis-header {
+    font-size: 12px;
+    color: #f0b90b;
+    font-weight: 600;
+    margin-bottom: 8px;
+}
+
+.korean-analysis p {
+    font-size: 13px;
+    line-height: 1.6;
+    color: #d1d4dc;
+    word-break: keep-all;
+}
+
+.indicator-analysis {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.analysis-item {
+    display: flex;
+    align-items: center;
+    padding: 8px 10px;
+    background: #2a2e39;
+    border-radius: 5px;
+    gap: 8px;
+}
+
+.analysis-item .item-label {
+    font-size: 12px;
+    color: #848e9c;
+    min-width: 70px;
+}
+
+.analysis-item .item-value {
+    font-size: 12px;
+    font-weight: 600;
+    min-width: 50px;
+    text-align: center;
+    padding: 2px 6px;
+    border-radius: 3px;
+}
+
+.analysis-item .item-value.buy {
+    background: rgba(38, 166, 154, 0.2);
+    color: #26a69a;
+}
+
+.analysis-item .item-value.sell {
+    background: rgba(239, 83, 80, 0.2);
+    color: #ef5350;
+}
+
+.analysis-item .item-value.neutral {
+    background: rgba(132, 142, 156, 0.2);
+    color: #848e9c;
+}
+
+.analysis-item .item-detail {
+    font-size: 11px;
+    color: #6c7284;
+    flex: 1;
+    text-align: right;
+}
+
+.analysis-summary {
+    padding: 10px;
+    background: #2a2e39;
+    border-radius: 5px;
+}
+
+.analysis-summary h4 {
+    font-size: 12px;
+    color: #848e9c;
+    margin-bottom: 8px;
+}
+
+.analysis-summary p {
+    font-size: 12px;
+    line-height: 1.5;
+    color: #d1d4dc;
+}
+
+.analysis-score {
+    padding: 10px;
+}
+
+.score-bar {
+    position: relative;
+    height: 8px;
+    background: linear-gradient(to right, #ef5350 0%, #ef5350 33%, #848e9c 33%, #848e9c 66%, #26a69a 66%, #26a69a 100%);
+    border-radius: 4px;
+    margin-bottom: 5px;
+}
+
+.score-fill {
+    display: none;
+}
+
+.score-marker {
+    position: absolute;
+    top: -4px;
+    width: 16px;
+    height: 16px;
+    background: #fff;
+    border-radius: 50%;
+    transform: translateX(-50%);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    transition: left 0.3s ease;
+    left: 50%;
+}
+
+.score-labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: 10px;
+    color: #6c7284;
+}
+
+.chart-wrapper {
+    background: #1e222d;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 15px;
+    background: #2a2e39;
+    border-bottom: 1px solid #363a45;
+}
+
+.chart-title {
+    font-weight: 600;
+    color: #d1d4dc;
+}
+
+.legend {
+    display: flex;
+    gap: 10px;
+    font-size: 12px;
+    align-items: center;
+}
+
+.ma-toggle {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 3px 8px;
+    border-radius: 4px;
+    transition: all 0.2s;
+    user-select: none;
+}
+
+.ma-toggle:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.ma-toggle input[type="checkbox"] {
+    display: none;
+}
+
+.ma-toggle span {
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-weight: 500;
+}
+
+.ma-toggle input:not(:checked) + span {
+    opacity: 0.4;
+    text-decoration: line-through;
+}
+
+.legend .ma5 span { color: #FFEB3B; }
+.legend .ma20 span { color: #1565C0; }
+.legend .ma60 span { color: #00E676; }
+.legend .ma120 span { color: #FF5252; }
+.legend .ma200 span { color: #E040FB; }
+.legend .bb span { color: #FF9800; }
+.legend .gc-dc span { color: #26a69a; }
+
+.main-chart {
+    position: relative;
+}
+
+#main-chart {
+    height: 450px;
+}
+
+#macd-chart,
+#rsi-chart,
+#stochastic-chart {
+    height: 150px;
+}
+
+.indicator-chart {
+    margin-top: 5px;
+}
+
+#signals-container {
+    position: absolute;
+    top: 50px;
+    left: 10px;
+    z-index: 100;
+    pointer-events: none;
+}
+
+.signal-marker {
+    position: absolute;
+    padding: 3px 6px;
+    border-radius: 3px;
+    font-size: 10px;
+    font-weight: bold;
+}
+
+.signal-marker.golden {
+    background: rgba(38, 166, 154, 0.9);
+    color: white;
+}
+
+.signal-marker.dead {
+    background: rgba(239, 83, 80, 0.9);
+    color: white;
+}
+
+.signal-panel {
+    margin-top: 10px;
+    padding: 15px;
+    background: #1e222d;
+    border-radius: 8px;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.signal-panel h3 {
+    margin-bottom: 10px;
+    color: #f0b90b;
+    font-size: 1rem;
+}
+
+#signal-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.signal-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    background: #2a2e39;
+    border-radius: 5px;
+    font-size: 13px;
+}
+
+.signal-item .time {
+    color: #848e9c;
+    min-width: 80px;
+}
+
+.signal-item .type {
+    padding: 2px 8px;
+    border-radius: 3px;
+    font-weight: 600;
+    min-width: 100px;
+    text-align: center;
+}
+
+.signal-item .type.buy {
+    background: rgba(38, 166, 154, 0.2);
+    color: #26a69a;
+}
+
+.signal-item .type.sell {
+    background: rgba(239, 83, 80, 0.2);
+    color: #ef5350;
+}
+
+.signal-item .description {
+    flex: 1;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #1e222d;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #363a45;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #4a4e59;
+}
+
+/* Loading indicator */
+.loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    color: #848e9c;
+}
+
+.loading::after {
+    content: '';
+    width: 30px;
+    height: 30px;
+    border: 3px solid #363a45;
+    border-top-color: #f0b90b;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-left: 10px;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .header {
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .header h1 {
+        font-size: 1.2rem;
+    }
+
+    #main-chart {
+        height: 350px;
+    }
+
+    #macd-chart,
+    #rsi-chart,
+    #stochastic-chart {
+        height: 120px;
+    }
+
+    .legend {
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+}