goldenChat base source add
This commit is contained in:
aidev
@@ -0,0 +1,714 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>PC-01 트레이딩 터미널 스타일</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: 'Noto Sans KR', -apple-system, sans-serif;
|
||||
background: #0a0a0f;
|
||||
color: #e4e4e7;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 최상단 바 */
|
||||
.top-bar {
|
||||
height: 40px;
|
||||
background: #131318;
|
||||
border-bottom: 1px solid #27272a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
gap: 24px;
|
||||
}
|
||||
.logo {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
color: #22c55e;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.top-nav {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
.top-nav-item {
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
color: #71717a;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.top-nav-item:hover { background: #27272a; color: #fff; }
|
||||
.top-nav-item.active { background: #22c55e; color: #000; font-weight: 500; }
|
||||
.top-right {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
font-size: 12px;
|
||||
color: #71717a;
|
||||
}
|
||||
|
||||
/* 메인 레이아웃 */
|
||||
.main-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr 320px;
|
||||
grid-template-rows: auto 1fr;
|
||||
height: calc(100vh - 40px);
|
||||
}
|
||||
|
||||
/* 왼쪽 패널 */
|
||||
.left-panel {
|
||||
background: #131318;
|
||||
border-right: 1px solid #27272a;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.panel-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #27272a;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #a1a1aa;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.symbol-search {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #27272a;
|
||||
}
|
||||
.symbol-search input {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background: #0a0a0f;
|
||||
border: 1px solid #27272a;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
}
|
||||
.symbol-list {
|
||||
padding: 8px;
|
||||
}
|
||||
.symbol-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.symbol-item:hover { background: #1f1f26; }
|
||||
.symbol-item.active { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); }
|
||||
.symbol-name { font-size: 13px; font-weight: 500; }
|
||||
.symbol-market { font-size: 11px; color: #71717a; }
|
||||
.symbol-price { text-align: right; }
|
||||
.symbol-price-value { font-size: 13px; font-weight: 500; }
|
||||
.symbol-change { font-size: 11px; }
|
||||
.symbol-change.up { color: #22c55e; }
|
||||
.symbol-change.down { color: #ef4444; }
|
||||
|
||||
/* 설정 섹션 */
|
||||
.settings-section {
|
||||
padding: 16px;
|
||||
border-top: 1px solid #27272a;
|
||||
}
|
||||
.setting-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.setting-label {
|
||||
font-size: 11px;
|
||||
color: #71717a;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.setting-select {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background: #0a0a0f;
|
||||
border: 1px solid #27272a;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
}
|
||||
.btn-run {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.btn-run:hover { filter: brightness(1.1); }
|
||||
|
||||
/* 중앙 차트 영역 */
|
||||
.center-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #0a0a0f;
|
||||
}
|
||||
|
||||
/* 차트 헤더 */
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #27272a;
|
||||
background: #131318;
|
||||
}
|
||||
.chart-symbol-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.chart-symbol-name {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.chart-price {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #22c55e;
|
||||
}
|
||||
.chart-change {
|
||||
font-size: 14px;
|
||||
color: #22c55e;
|
||||
}
|
||||
.timeframe-selector {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
background: #1f1f26;
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.tf-btn {
|
||||
padding: 6px 12px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #71717a;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tf-btn:hover { color: #fff; }
|
||||
.tf-btn.active { background: #22c55e; color: #000; font-weight: 500; }
|
||||
|
||||
/* 차트 영역 */
|
||||
.chart-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(39, 39, 42, 0.3) 1px, transparent 1px),
|
||||
linear-gradient(rgba(39, 39, 42, 0.3) 1px, transparent 1px);
|
||||
background-size: 60px 40px;
|
||||
}
|
||||
.chart-candles {
|
||||
position: absolute;
|
||||
inset: 40px 80px 60px 20px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-around;
|
||||
gap: 4px;
|
||||
}
|
||||
.candle {
|
||||
width: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.candle-body { width: 100%; border-radius: 1px; }
|
||||
.candle-body.bull { background: #22c55e; }
|
||||
.candle-body.bear { background: #ef4444; }
|
||||
.signal-badge {
|
||||
position: absolute;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.signal-badge.buy {
|
||||
bottom: -28px;
|
||||
background: #22c55e;
|
||||
color: #000;
|
||||
}
|
||||
.signal-badge.sell {
|
||||
top: -28px;
|
||||
background: #ef4444;
|
||||
color: #fff;
|
||||
}
|
||||
.price-axis {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 40px;
|
||||
bottom: 60px;
|
||||
width: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 8px;
|
||||
font-size: 11px;
|
||||
color: #52525b;
|
||||
text-align: right;
|
||||
background: rgba(19, 19, 24, 0.8);
|
||||
}
|
||||
.time-axis {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 20px;
|
||||
right: 80px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
color: #52525b;
|
||||
}
|
||||
|
||||
/* 보조지표 영역 */
|
||||
.indicators-panel {
|
||||
height: 150px;
|
||||
border-top: 1px solid #27272a;
|
||||
display: flex;
|
||||
}
|
||||
.indicator-chart {
|
||||
flex: 1;
|
||||
border-right: 1px solid #27272a;
|
||||
padding: 12px;
|
||||
position: relative;
|
||||
}
|
||||
.indicator-chart:last-child { border-right: none; }
|
||||
.indicator-title {
|
||||
font-size: 11px;
|
||||
color: #71717a;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.indicator-mock {
|
||||
height: calc(100% - 24px);
|
||||
background: linear-gradient(180deg,
|
||||
rgba(34, 197, 94, 0.1) 0%,
|
||||
transparent 30%,
|
||||
transparent 70%,
|
||||
rgba(239, 68, 68, 0.1) 100%
|
||||
);
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
}
|
||||
.indicator-line {
|
||||
position: absolute;
|
||||
left: 5%;
|
||||
right: 5%;
|
||||
top: 50%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #ef4444, #eab308, #22c55e, #3b82f6, #22c55e);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
/* 오른쪽 패널 */
|
||||
.right-panel {
|
||||
background: #131318;
|
||||
border-left: 1px solid #27272a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 성과 요약 */
|
||||
.performance-summary {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #27272a;
|
||||
}
|
||||
.perf-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #a1a1aa;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.perf-highlight {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border: 1px solid rgba(34, 197, 94, 0.2);
|
||||
border-radius: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.perf-highlight-label {
|
||||
font-size: 12px;
|
||||
color: #71717a;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.perf-highlight-value {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: #22c55e;
|
||||
}
|
||||
.perf-highlight-sub {
|
||||
font-size: 12px;
|
||||
color: #22c55e;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.perf-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
.perf-item {
|
||||
background: #1f1f26;
|
||||
padding: 14px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.perf-item-label {
|
||||
font-size: 11px;
|
||||
color: #71717a;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.perf-item-value {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.perf-item-value.up { color: #22c55e; }
|
||||
.perf-item-value.down { color: #ef4444; }
|
||||
|
||||
/* 정확도 */
|
||||
.accuracy-section {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #27272a;
|
||||
}
|
||||
.accuracy-bar-container {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.accuracy-bar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.accuracy-bar-bg {
|
||||
height: 8px;
|
||||
background: #27272a;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.accuracy-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.accuracy-bar-fill.green { background: linear-gradient(90deg, #22c55e, #4ade80); }
|
||||
.accuracy-bar-fill.yellow { background: linear-gradient(90deg, #eab308, #facc15); }
|
||||
|
||||
/* 거래 내역 */
|
||||
.trades-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.trades-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #27272a;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.trades-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
.trade-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background: #1f1f26;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 6px;
|
||||
gap: 12px;
|
||||
}
|
||||
.trade-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.trade-icon.buy { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
|
||||
.trade-icon.sell { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
|
||||
.trade-info { flex: 1; }
|
||||
.trade-type { font-size: 12px; font-weight: 500; }
|
||||
.trade-time { font-size: 10px; color: #52525b; }
|
||||
.trade-result { text-align: right; }
|
||||
.trade-price { font-size: 12px; }
|
||||
.trade-pnl { font-size: 11px; font-weight: 600; }
|
||||
.trade-pnl.profit { color: #22c55e; }
|
||||
.trade-pnl.loss { color: #ef4444; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="logo">📊 BACKTEST PRO</div>
|
||||
<nav class="top-nav">
|
||||
<div class="top-nav-item">대시보드</div>
|
||||
<div class="top-nav-item active">백테스트</div>
|
||||
<div class="top-nav-item">포트폴리오</div>
|
||||
<div class="top-nav-item">전략관리</div>
|
||||
<div class="top-nav-item">리포트</div>
|
||||
</nav>
|
||||
<div class="top-right">
|
||||
<span>PC-01 트레이딩 터미널</span>
|
||||
<span>🔔</span>
|
||||
<span>⚙️</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-layout">
|
||||
<!-- 왼쪽 패널 -->
|
||||
<aside class="left-panel">
|
||||
<div class="panel-header">종목 선택</div>
|
||||
<div class="symbol-search">
|
||||
<input type="text" placeholder="🔍 종목 검색...">
|
||||
</div>
|
||||
<div class="symbol-list">
|
||||
<div class="symbol-item active">
|
||||
<div>
|
||||
<div class="symbol-name">BTC/KRW</div>
|
||||
<div class="symbol-market">비트코인</div>
|
||||
</div>
|
||||
<div class="symbol-price">
|
||||
<div class="symbol-price-value">58,450,000</div>
|
||||
<div class="symbol-change up">+2.34%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="symbol-item">
|
||||
<div>
|
||||
<div class="symbol-name">ETH/KRW</div>
|
||||
<div class="symbol-market">이더리움</div>
|
||||
</div>
|
||||
<div class="symbol-price">
|
||||
<div class="symbol-price-value">3,245,000</div>
|
||||
<div class="symbol-change up">+1.82%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="symbol-item">
|
||||
<div>
|
||||
<div class="symbol-name">XRP/KRW</div>
|
||||
<div class="symbol-market">리플</div>
|
||||
</div>
|
||||
<div class="symbol-price">
|
||||
<div class="symbol-price-value">892</div>
|
||||
<div class="symbol-change down">-0.45%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<div class="panel-header" style="padding: 0 0 12px 0; border: none;">전략 설정</div>
|
||||
<div class="setting-group">
|
||||
<div class="setting-label">투자 전략</div>
|
||||
<select class="setting-select">
|
||||
<option>MACD + RSI 복합전략</option>
|
||||
<option>볼린저밴드 돌파</option>
|
||||
<option>이동평균 크로스</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="setting-group">
|
||||
<div class="setting-label">분석 기간</div>
|
||||
<select class="setting-select">
|
||||
<option>최근 3개월</option>
|
||||
<option>최근 6개월</option>
|
||||
<option>최근 1년</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="setting-group">
|
||||
<div class="setting-label">초기 투자금</div>
|
||||
<input type="text" class="setting-select" value="₩10,000,000">
|
||||
</div>
|
||||
<button class="btn-run">▶ 백테스트 실행</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 중앙 차트 영역 -->
|
||||
<main class="center-area">
|
||||
<div class="chart-header">
|
||||
<div class="chart-symbol-info">
|
||||
<span class="chart-symbol-name">BTC/KRW</span>
|
||||
<span class="chart-price">₩58,450,000</span>
|
||||
<span class="chart-change">+2.34% (+1,340,000)</span>
|
||||
</div>
|
||||
<div class="timeframe-selector">
|
||||
<button class="tf-btn">15분</button>
|
||||
<button class="tf-btn active">1시간</button>
|
||||
<button class="tf-btn">4시간</button>
|
||||
<button class="tf-btn">1일</button>
|
||||
<button class="tf-btn">1주</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-container">
|
||||
<div class="price-axis">
|
||||
<span>62,000,000</span>
|
||||
<span>60,000,000</span>
|
||||
<span>58,000,000</span>
|
||||
<span>56,000,000</span>
|
||||
<span>54,000,000</span>
|
||||
</div>
|
||||
<div class="time-axis">
|
||||
<span>03/10</span>
|
||||
<span>03/11</span>
|
||||
<span>03/12</span>
|
||||
<span>03/13</span>
|
||||
<span>03/14</span>
|
||||
<span>03/15</span>
|
||||
</div>
|
||||
<div class="chart-candles">
|
||||
<div class="candle"><div class="candle-body bull" style="height: 50px;"></div></div>
|
||||
<div class="candle"><div class="candle-body bull" style="height: 65px;"></div></div>
|
||||
<div class="candle"><div class="candle-body bear" style="height: 40px;"></div></div>
|
||||
<div class="candle"><div class="candle-body bear" style="height: 55px;"></div><div class="signal-badge buy">BUY</div></div>
|
||||
<div class="candle"><div class="candle-body bull" style="height: 70px;"></div></div>
|
||||
<div class="candle"><div class="candle-body bull" style="height: 90px;"></div></div>
|
||||
<div class="candle"><div class="candle-body bull" style="height: 80px;"></div></div>
|
||||
<div class="candle"><div class="candle-body bear" style="height: 45px;"></div><div class="signal-badge sell">SELL</div></div>
|
||||
<div class="candle"><div class="candle-body bear" style="height: 60px;"></div></div>
|
||||
<div class="candle"><div class="candle-body bull" style="height: 50px;"></div></div>
|
||||
<div class="candle"><div class="candle-body bear" style="height: 35px;"></div><div class="signal-badge buy">BUY</div></div>
|
||||
<div class="candle"><div class="candle-body bull" style="height: 55px;"></div></div>
|
||||
<div class="candle"><div class="candle-body bull" style="height: 75px;"></div></div>
|
||||
<div class="candle"><div class="candle-body bull" style="height: 85px;"></div></div>
|
||||
<div class="candle"><div class="candle-body bear" style="height: 40px;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="indicators-panel">
|
||||
<div class="indicator-chart">
|
||||
<div class="indicator-title">MACD (12, 26, 9)</div>
|
||||
<div class="indicator-mock"><div class="indicator-line"></div></div>
|
||||
</div>
|
||||
<div class="indicator-chart">
|
||||
<div class="indicator-title">RSI (14)</div>
|
||||
<div class="indicator-mock"><div class="indicator-line"></div></div>
|
||||
</div>
|
||||
<div class="indicator-chart">
|
||||
<div class="indicator-title">Volume</div>
|
||||
<div class="indicator-mock"><div class="indicator-line"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 오른쪽 패널 -->
|
||||
<aside class="right-panel">
|
||||
<div class="performance-summary">
|
||||
<div class="perf-title">📊 성과 요약</div>
|
||||
<div class="perf-highlight">
|
||||
<div class="perf-highlight-label">총 수익률</div>
|
||||
<div class="perf-highlight-value">+23.5%</div>
|
||||
<div class="perf-highlight-sub">₩2,350,000 수익</div>
|
||||
</div>
|
||||
<div class="perf-grid">
|
||||
<div class="perf-item">
|
||||
<div class="perf-item-label">최종 자산</div>
|
||||
<div class="perf-item-value">₩12.35M</div>
|
||||
</div>
|
||||
<div class="perf-item">
|
||||
<div class="perf-item-label">승률</div>
|
||||
<div class="perf-item-value up">68%</div>
|
||||
</div>
|
||||
<div class="perf-item">
|
||||
<div class="perf-item-label">총 거래</div>
|
||||
<div class="perf-item-value">25회</div>
|
||||
</div>
|
||||
<div class="perf-item">
|
||||
<div class="perf-item-label">최대 낙폭</div>
|
||||
<div class="perf-item-value down">-8.2%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accuracy-section">
|
||||
<div class="perf-title">🎯 전략 정확도</div>
|
||||
<div class="accuracy-bar-container">
|
||||
<div class="accuracy-bar-header">
|
||||
<span style="color: #71717a;">전체 정확도</span>
|
||||
<span style="color: #22c55e; font-weight: 600;">70%</span>
|
||||
</div>
|
||||
<div class="accuracy-bar-bg">
|
||||
<div class="accuracy-bar-fill green" style="width: 70%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accuracy-bar-container">
|
||||
<div class="accuracy-bar-header">
|
||||
<span style="color: #71717a;">매수 정확도</span>
|
||||
<span style="color: #22c55e; font-weight: 600;">76%</span>
|
||||
</div>
|
||||
<div class="accuracy-bar-bg">
|
||||
<div class="accuracy-bar-fill green" style="width: 76%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accuracy-bar-container">
|
||||
<div class="accuracy-bar-header">
|
||||
<span style="color: #71717a;">매도 정확도</span>
|
||||
<span style="color: #eab308; font-weight: 600;">64%</span>
|
||||
</div>
|
||||
<div class="accuracy-bar-bg">
|
||||
<div class="accuracy-bar-fill yellow" style="width: 64%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trades-section">
|
||||
<div class="trades-header">
|
||||
<span class="perf-title" style="margin: 0;">📋 거래 내역</span>
|
||||
<span style="font-size: 11px; color: #22c55e; cursor: pointer;">전체보기 →</span>
|
||||
</div>
|
||||
<div class="trades-list">
|
||||
<div class="trade-item">
|
||||
<div class="trade-icon sell">S</div>
|
||||
<div class="trade-info">
|
||||
<div class="trade-type">매도</div>
|
||||
<div class="trade-time">2024.03.15 14:00</div>
|
||||
</div>
|
||||
<div class="trade-result">
|
||||
<div class="trade-price">₩58,450,000</div>
|
||||
<div class="trade-pnl profit">+5.2%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trade-item">
|
||||
<div class="trade-icon buy">B</div>
|
||||
<div class="trade-info">
|
||||
<div class="trade-type">매수</div>
|
||||
<div class="trade-time">2024.03.12 09:00</div>
|
||||
</div>
|
||||
<div class="trade-result">
|
||||
<div class="trade-price">₩55,520,000</div>
|
||||
<div class="trade-pnl">-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trade-item">
|
||||
<div class="trade-icon sell">S</div>
|
||||
<div class="trade-info">
|
||||
<div class="trade-type">매도</div>
|
||||
<div class="trade-time">2024.03.08 16:00</div>
|
||||
</div>
|
||||
<div class="trade-result">
|
||||
<div class="trade-price">₩54,200,000</div>
|
||||
<div class="trade-pnl loss">-2.1%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,553 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>PC-02 분석 리포트</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
background: #0f172a;
|
||||
color: #f1f5f9;
|
||||
min-height: 100vh;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/* 헤더 */
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.header-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.header-subtitle {
|
||||
color: #94a3b8;
|
||||
font-size: 14px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
.badge {
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
color: #3b82f6;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.btn {
|
||||
background: #3b82f6;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 설정 카드 */
|
||||
.settings-card {
|
||||
background: #1e293b;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
border: 1px solid #334155;
|
||||
}
|
||||
.settings-title {
|
||||
font-size: 13px;
|
||||
color: #94a3b8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.settings-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.settings-item label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.settings-item select,
|
||||
.settings-item input {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background: #0f172a;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 8px;
|
||||
color: #f1f5f9;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 메트릭 그리드 */
|
||||
.metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.metric-card {
|
||||
background: #1e293b;
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
border: 1px solid #334155;
|
||||
}
|
||||
.metric-card.highlight {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border-color: rgba(34, 197, 94, 0.3);
|
||||
}
|
||||
.metric-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.metric-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
.metric-icon.green { background: rgba(34, 197, 94, 0.2); }
|
||||
.metric-icon.blue { background: rgba(59, 130, 246, 0.2); }
|
||||
.metric-icon.purple { background: rgba(139, 92, 246, 0.2); }
|
||||
.metric-icon.cyan { background: rgba(14, 165, 233, 0.2); }
|
||||
.metric-label {
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
.metric-value {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.metric-value.green { color: #22c55e; }
|
||||
.metric-value.purple { color: #8b5cf6; }
|
||||
|
||||
/* 메인 그리드 */
|
||||
.main-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
/* 차트 카드 */
|
||||
.chart-card {
|
||||
background: #1e293b;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #334155;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chart-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #334155;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.chart-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.chart-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.chart-controls button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #94a3b8;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
.chart-controls .chip {
|
||||
background: #334155;
|
||||
color: #f1f5f9;
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.chart-area {
|
||||
height: 320px;
|
||||
background: #0f172a;
|
||||
position: relative;
|
||||
}
|
||||
.chart-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(51, 65, 85, 0.3) 1px, transparent 1px),
|
||||
linear-gradient(rgba(51, 65, 85, 0.3) 1px, transparent 1px);
|
||||
background-size: 60px 40px;
|
||||
}
|
||||
.candles {
|
||||
position: absolute;
|
||||
inset: 30px 40px 40px 20px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.candle {
|
||||
width: 14px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.candle.up { background: #22c55e; }
|
||||
.candle.down { background: #ef4444; }
|
||||
|
||||
/* 사이드 카드 */
|
||||
.side-cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
.side-card {
|
||||
background: #1e293b;
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
border: 1px solid #334155;
|
||||
}
|
||||
.side-card-title {
|
||||
font-size: 13px;
|
||||
color: #94a3b8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* 프로그레스 바 */
|
||||
.progress-item {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.progress-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.progress-header span:first-child { color: #94a3b8; }
|
||||
.progress-bar {
|
||||
height: 8px;
|
||||
background: #0f172a;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.progress-fill.purple { background: #8b5cf6; }
|
||||
.progress-fill.green { background: #22c55e; }
|
||||
.progress-fill.red { background: #ef4444; }
|
||||
|
||||
/* 자산 현황 */
|
||||
.asset-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
.asset-row span:first-child { color: #94a3b8; }
|
||||
.asset-row span:last-child { font-weight: 500; }
|
||||
.asset-row.green span:last-child { color: #22c55e; }
|
||||
.asset-row.red span:last-child { color: #ef4444; }
|
||||
|
||||
/* 통계 그리드 */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
.stat-box {
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
background: #0f172a;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.stat-value.green { color: #22c55e; }
|
||||
.stat-value.red { color: #ef4444; }
|
||||
.stat-label {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 테이블 */
|
||||
.table-card {
|
||||
background: #1e293b;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #334155;
|
||||
overflow: hidden;
|
||||
}
|
||||
.table-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #334155;
|
||||
}
|
||||
.table-header h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
th {
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
background: #0f172a;
|
||||
font-weight: 600;
|
||||
}
|
||||
th:nth-child(3), th:nth-child(4), th:nth-child(5) { text-align: right; }
|
||||
td {
|
||||
padding: 12px 16px;
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid #334155;
|
||||
}
|
||||
td:nth-child(3), td:nth-child(4), td:nth-child(5) { text-align: right; }
|
||||
tr:hover { background: rgba(59, 130, 246, 0.05); }
|
||||
.type-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.type-badge.buy { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
|
||||
.type-badge.sell { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 헤더 -->
|
||||
<div class="header">
|
||||
<div>
|
||||
<h1 class="header-title">📊 투자 분석 리포트</h1>
|
||||
<p class="header-subtitle">KRW-BTC • MACD + RSI 전략 • 2024년 12월 7일</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<span class="badge">PC-02 분석리포트</span>
|
||||
<button class="btn">▶ 백테스트 실행</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 설정 카드 -->
|
||||
<div class="settings-card">
|
||||
<div class="settings-title">분석 설정</div>
|
||||
<div class="settings-grid">
|
||||
<div class="settings-item">
|
||||
<label>종목</label>
|
||||
<select><option>KRW-BTC</option></select>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<label>투자 전략</label>
|
||||
<select><option>MACD + RSI</option></select>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<label>시간봉</label>
|
||||
<select><option>1시간</option></select>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<label>분석 기간</label>
|
||||
<input type="number" value="500">
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<label>초기 투자금</label>
|
||||
<input type="text" value="₩10,000,000">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 메트릭 그리드 -->
|
||||
<div class="metrics-grid">
|
||||
<div class="metric-card highlight">
|
||||
<div class="metric-header">
|
||||
<div class="metric-icon green">📈</div>
|
||||
<span class="metric-label">총 수익률</span>
|
||||
</div>
|
||||
<div class="metric-value green">+23.45%</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-header">
|
||||
<div class="metric-icon blue">💰</div>
|
||||
<span class="metric-label">순이익</span>
|
||||
</div>
|
||||
<div class="metric-value green">+₩234만</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-header">
|
||||
<div class="metric-icon purple">🎯</div>
|
||||
<span class="metric-label">승률</span>
|
||||
</div>
|
||||
<div class="metric-value purple">68.5%</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-header">
|
||||
<div class="metric-icon cyan">🔄</div>
|
||||
<span class="metric-label">총 거래</span>
|
||||
</div>
|
||||
<div class="metric-value">27회</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 메인 그리드 -->
|
||||
<div class="main-grid">
|
||||
<!-- 차트 카드 -->
|
||||
<div class="chart-card">
|
||||
<div class="chart-header">
|
||||
<span class="chart-title">📈 가격 차트 & 매매 신호</span>
|
||||
<div class="chart-controls">
|
||||
<button>◀</button>
|
||||
<span class="chip">1h</span>
|
||||
<button>▶</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-area">
|
||||
<div class="chart-grid"></div>
|
||||
<div class="candles">
|
||||
<div class="candle up" style="height: 60px;"></div>
|
||||
<div class="candle up" style="height: 80px;"></div>
|
||||
<div class="candle down" style="height: 50px;"></div>
|
||||
<div class="candle down" style="height: 70px;"></div>
|
||||
<div class="candle up" style="height: 90px;"></div>
|
||||
<div class="candle up" style="height: 110px;"></div>
|
||||
<div class="candle up" style="height: 100px;"></div>
|
||||
<div class="candle down" style="height: 65px;"></div>
|
||||
<div class="candle down" style="height: 80px;"></div>
|
||||
<div class="candle up" style="height: 70px;"></div>
|
||||
<div class="candle up" style="height: 85px;"></div>
|
||||
<div class="candle up" style="height: 95px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 사이드 카드 -->
|
||||
<div class="side-cards">
|
||||
<div class="side-card">
|
||||
<div class="side-card-title">정확도 분석</div>
|
||||
<div class="progress-item">
|
||||
<div class="progress-header">
|
||||
<span>전체 정확도</span>
|
||||
<span style="color: #8b5cf6; font-weight: 600;">68.5%</span>
|
||||
</div>
|
||||
<div class="progress-bar"><div class="progress-fill purple" style="width: 68.5%;"></div></div>
|
||||
</div>
|
||||
<div class="progress-item">
|
||||
<div class="progress-header">
|
||||
<span>매수 정확도</span>
|
||||
<span style="color: #22c55e; font-weight: 600;">72%</span>
|
||||
</div>
|
||||
<div class="progress-bar"><div class="progress-fill green" style="width: 72%;"></div></div>
|
||||
</div>
|
||||
<div class="progress-item">
|
||||
<div class="progress-header">
|
||||
<span>매도 정확도</span>
|
||||
<span style="color: #ef4444; font-weight: 600;">65%</span>
|
||||
</div>
|
||||
<div class="progress-bar"><div class="progress-fill red" style="width: 65%;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="side-card">
|
||||
<div class="side-card-title">자산 현황</div>
|
||||
<div class="asset-row">
|
||||
<span>초기 투자금</span>
|
||||
<span>₩10,000,000</span>
|
||||
</div>
|
||||
<div class="asset-row">
|
||||
<span>최종 자산</span>
|
||||
<span>₩12,345,000</span>
|
||||
</div>
|
||||
<div class="asset-row green">
|
||||
<span>최대 수익</span>
|
||||
<span>₩3,200,000</span>
|
||||
</div>
|
||||
<div class="asset-row red">
|
||||
<span>최대 손실</span>
|
||||
<span>₩-850,000</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="side-card">
|
||||
<div class="side-card-title">거래 통계</div>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-box">
|
||||
<div class="stat-value green">18</div>
|
||||
<div class="stat-label">수익 거래</div>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<div class="stat-value red">9</div>
|
||||
<div class="stat-label">손실 거래</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 거래 내역 테이블 -->
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<h3>📋 거래 내역</h3>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>유형</th>
|
||||
<th>시간</th>
|
||||
<th>가격</th>
|
||||
<th>수량</th>
|
||||
<th>손익</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="type-badge sell">매도</span></td>
|
||||
<td style="color: #94a3b8;">2024-12-07 14:00</td>
|
||||
<td>₩58,450,000</td>
|
||||
<td style="color: #94a3b8;">0.142857</td>
|
||||
<td style="color: #22c55e; font-weight: 600;">+₩520,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="type-badge buy">매수</span></td>
|
||||
<td style="color: #94a3b8;">2024-12-05 09:00</td>
|
||||
<td>₩55,520,000</td>
|
||||
<td style="color: #94a3b8;">0.142857</td>
|
||||
<td style="color: #64748b;">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="type-badge sell">매도</span></td>
|
||||
<td style="color: #94a3b8;">2024-12-03 16:00</td>
|
||||
<td>₩54,200,000</td>
|
||||
<td style="color: #94a3b8;">0.156250</td>
|
||||
<td style="color: #ef4444; font-weight: 600;">-₩180,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="type-badge buy">매수</span></td>
|
||||
<td style="color: #94a3b8;">2024-12-01 11:00</td>
|
||||
<td>₩55,350,000</td>
|
||||
<td style="color: #94a3b8;">0.156250</td>
|
||||
<td style="color: #64748b;">-</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,780 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>PC-04 다크 프로페셔널</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
background: #09090b;
|
||||
color: #fafafa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.app {
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 좌측 패널 - 모의투자 설정 */
|
||||
.sidebar {
|
||||
background: #18181b;
|
||||
border-right: 1px solid #27272a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #27272a;
|
||||
background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(99, 102, 241, 0.15));
|
||||
}
|
||||
.sidebar-header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.sidebar-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: linear-gradient(135deg, #a855f7, #6366f1);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
.sidebar-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.sidebar-subtitle {
|
||||
font-size: 11px;
|
||||
color: #a1a1aa;
|
||||
}
|
||||
|
||||
/* 전략 설정 섹션 */
|
||||
.settings-section {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #27272a;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
color: #52525b;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.form-label {
|
||||
font-size: 12px;
|
||||
color: #a1a1aa;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.form-input, .form-select {
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
background: #27272a;
|
||||
border: 1px solid #3f3f46;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
}
|
||||
.form-input:focus, .form-select:focus {
|
||||
outline: none;
|
||||
border-color: #a855f7;
|
||||
}
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
.run-btn {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
background: linear-gradient(135deg, #a855f7, #6366f1);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.run-btn:hover {
|
||||
background: linear-gradient(135deg, #9333ea, #4f46e5);
|
||||
box-shadow: 0 6px 20px rgba(168, 85, 247, 0.5);
|
||||
}
|
||||
|
||||
/* 투자 요약 섹션 */
|
||||
.summary-section {
|
||||
padding: 20px;
|
||||
}
|
||||
.profit-box {
|
||||
padding: 16px;
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||
border-radius: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.profit-label {
|
||||
font-size: 11px;
|
||||
color: #71717a;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.profit-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #22c55e;
|
||||
line-height: 1;
|
||||
}
|
||||
.summary-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.summary-item-label {
|
||||
font-size: 12px;
|
||||
color: #71717a;
|
||||
}
|
||||
.summary-item-value {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.summary-item-value.green { color: #22c55e; }
|
||||
.summary-item-value.purple { color: #a855f7; }
|
||||
|
||||
/* 메인 콘텐츠 */
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 톱바 */
|
||||
.topbar {
|
||||
padding: 16px 32px;
|
||||
border-bottom: 1px solid #27272a;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.topbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.page-title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.version-badge {
|
||||
background: rgba(168, 85, 247, 0.15);
|
||||
color: #a855f7;
|
||||
padding: 6px 14px;
|
||||
border-radius: 20px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.topbar-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: 1px solid #27272a;
|
||||
background: transparent;
|
||||
color: #a1a1aa;
|
||||
}
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #a855f7, #6366f1);
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 콘텐츠 영역 */
|
||||
.content-area {
|
||||
flex: 1;
|
||||
padding: 24px 32px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 현재 설정 요약 바 */
|
||||
.config-summary {
|
||||
background: #18181b;
|
||||
border-radius: 16px;
|
||||
padding: 16px 24px;
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.config-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.config-item-label {
|
||||
font-size: 12px;
|
||||
color: #71717a;
|
||||
}
|
||||
.config-chip {
|
||||
padding: 6px 12px;
|
||||
background: #27272a;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.config-chip.purple {
|
||||
background: rgba(168, 85, 247, 0.2);
|
||||
color: #a855f7;
|
||||
}
|
||||
|
||||
/* 결과 배너 */
|
||||
.result-banner {
|
||||
background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(99, 102, 241, 0.1));
|
||||
border: 1px solid rgba(168, 85, 247, 0.2);
|
||||
border-radius: 20px;
|
||||
padding: 32px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.result-info h2 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.result-info p {
|
||||
color: #71717a;
|
||||
font-size: 14px;
|
||||
}
|
||||
.result-stats {
|
||||
display: flex;
|
||||
gap: 48px;
|
||||
text-align: center;
|
||||
}
|
||||
.result-stat-value {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.result-stat-value.green { color: #22c55e; }
|
||||
.result-stat-label {
|
||||
font-size: 12px;
|
||||
color: #71717a;
|
||||
}
|
||||
|
||||
/* 메트릭 그리드 */
|
||||
.metrics-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.metric-box {
|
||||
background: #18181b;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
border: 1px solid #27272a;
|
||||
}
|
||||
.metric-icon {
|
||||
font-size: 20px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.metric-label {
|
||||
font-size: 11px;
|
||||
color: #71717a;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.metric-value {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.metric-value.up { color: #22c55e; }
|
||||
.metric-value.down { color: #ef4444; }
|
||||
|
||||
/* 차트 + 패널 */
|
||||
.chart-row {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
.chart-panel {
|
||||
background: #18181b;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
border: 1px solid #27272a;
|
||||
}
|
||||
.panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.panel-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.tab-group {
|
||||
display: flex;
|
||||
background: #27272a;
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.tab-btn {
|
||||
padding: 8px 14px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #71717a;
|
||||
font-size: 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tab-btn.active { background: #3f3f46; color: #fff; }
|
||||
|
||||
/* 차트 영역 */
|
||||
.chart-area {
|
||||
height: 320px;
|
||||
background: #0c0c0e;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chart-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(63, 63, 70, 0.3) 1px, transparent 1px),
|
||||
linear-gradient(rgba(63, 63, 70, 0.3) 1px, transparent 1px);
|
||||
background-size: 50px 32px;
|
||||
}
|
||||
.candles-container {
|
||||
position: absolute;
|
||||
inset: 30px 60px 50px 20px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.candle {
|
||||
width: 12px;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
}
|
||||
.candle.up { background: #22c55e; }
|
||||
.candle.down { background: #ef4444; }
|
||||
.signal-tag {
|
||||
position: absolute;
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.signal-tag.buy { bottom: -24px; background: #22c55e; color: #000; }
|
||||
.signal-tag.sell { top: -24px; background: #ef4444; color: #fff; }
|
||||
|
||||
/* 사이드 패널 */
|
||||
.side-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
.accuracy-card {
|
||||
background: #18181b;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
border: 1px solid #27272a;
|
||||
text-align: center;
|
||||
}
|
||||
.accuracy-ring {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
margin: 0 auto 20px;
|
||||
border-radius: 50%;
|
||||
background: conic-gradient(#a855f7 0deg 252deg, #27272a 252deg 360deg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.accuracy-inner {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background: #18181b;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.accuracy-pct {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #a855f7;
|
||||
}
|
||||
.accuracy-text { font-size: 11px; color: #71717a; }
|
||||
.accuracy-bars {
|
||||
text-align: left;
|
||||
}
|
||||
.acc-bar-item {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.acc-bar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.acc-bar-bg {
|
||||
height: 6px;
|
||||
background: #27272a;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.acc-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.acc-bar-fill.purple { background: linear-gradient(90deg, #a855f7, #6366f1); }
|
||||
.acc-bar-fill.green { background: #22c55e; }
|
||||
|
||||
/* 거래 리스트 */
|
||||
.trades-panel {
|
||||
background: #18181b;
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
border: 1px solid #27272a;
|
||||
flex: 1;
|
||||
}
|
||||
.trades-list {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.trade-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background: #27272a;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.trade-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.trade-icon.buy { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
|
||||
.trade-icon.sell { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
|
||||
.trade-info { flex: 1; }
|
||||
.trade-type { font-size: 12px; font-weight: 500; }
|
||||
.trade-time { font-size: 10px; color: #52525b; }
|
||||
.trade-result { text-align: right; }
|
||||
.trade-price { font-size: 11px; }
|
||||
.trade-pnl { font-size: 10px; font-weight: 600; }
|
||||
.trade-pnl.profit { color: #22c55e; }
|
||||
.trade-pnl.loss { color: #ef4444; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<!-- 좌측 패널 - 모의투자 설정 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<div class="sidebar-header-content">
|
||||
<div class="sidebar-icon">📊</div>
|
||||
<div>
|
||||
<div class="sidebar-title">모의투자 설정</div>
|
||||
<div class="sidebar-subtitle">전략을 설정하고 백테스트를 실행하세요</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<div class="section-title">전략 설정</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-label">🪙 종목</div>
|
||||
<select class="form-select">
|
||||
<option>KRW-BTC (비트코인)</option>
|
||||
<option>KRW-ETH (이더리움)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-label">🎯 투자 전략</div>
|
||||
<select class="form-select">
|
||||
<option>MACD + RSI 복합</option>
|
||||
<option>골든크로스</option>
|
||||
<option>볼린저밴드</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-row form-group">
|
||||
<div>
|
||||
<div class="form-label">⏱️ 시간봉</div>
|
||||
<select class="form-select">
|
||||
<option>1시간</option>
|
||||
<option>4시간</option>
|
||||
<option>1일</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<div class="form-label">📅 기간</div>
|
||||
<input type="number" class="form-input" value="500">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-label">💰 초기 투자금</div>
|
||||
<input type="text" class="form-input" value="₩10,000,000">
|
||||
</div>
|
||||
|
||||
<button class="run-btn">▶ 백테스트 실행</button>
|
||||
</div>
|
||||
|
||||
<div class="summary-section">
|
||||
<div class="section-title">투자 요약</div>
|
||||
|
||||
<div class="profit-box">
|
||||
<div class="profit-label">총 수익률</div>
|
||||
<div class="profit-value">+23.5%</div>
|
||||
</div>
|
||||
|
||||
<div class="summary-item">
|
||||
<span class="summary-item-label">순이익</span>
|
||||
<span class="summary-item-value green">+₩235만</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-item-label">승률</span>
|
||||
<span class="summary-item-value purple">68%</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-item-label">총 거래</span>
|
||||
<span class="summary-item-value">25회</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-item-label">최종 자산</span>
|
||||
<span class="summary-item-value">₩12,350,000</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 메인 콘텐츠 -->
|
||||
<main class="main-content">
|
||||
<header class="topbar">
|
||||
<div class="topbar-left">
|
||||
<h1 class="page-title">투자전략 백테스트</h1>
|
||||
<span class="version-badge">PC-04 다크 프로</span>
|
||||
</div>
|
||||
<div class="topbar-actions">
|
||||
<button class="btn">📥 내보내기</button>
|
||||
<button class="btn btn-primary">+ 새 테스트</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content-area">
|
||||
<!-- 현재 설정 요약 바 -->
|
||||
<div class="config-summary">
|
||||
<div class="config-item">
|
||||
<span class="config-item-label">종목:</span>
|
||||
<span class="config-chip">KRW-BTC</span>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<span class="config-item-label">전략:</span>
|
||||
<span class="config-chip purple">MACD + RSI</span>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<span class="config-item-label">시간봉:</span>
|
||||
<span class="config-chip">1h</span>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<span class="config-item-label">기간:</span>
|
||||
<span class="config-chip">500개</span>
|
||||
</div>
|
||||
<div class="config-item">
|
||||
<span class="config-item-label">초기자본:</span>
|
||||
<span class="config-chip">₩1000만</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 결과 배너 -->
|
||||
<div class="result-banner">
|
||||
<div class="result-info">
|
||||
<h2>KRW-BTC 백테스트 완료</h2>
|
||||
<p>MACD + RSI 전략 · 1h 봉 기준</p>
|
||||
</div>
|
||||
<div class="result-stats">
|
||||
<div>
|
||||
<div class="result-stat-value green">+23.5%</div>
|
||||
<div class="result-stat-label">총 수익률</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="result-stat-value">₩12.35M</div>
|
||||
<div class="result-stat-label">최종 자산</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 메트릭 그리드 -->
|
||||
<div class="metrics-row">
|
||||
<div class="metric-box">
|
||||
<div class="metric-icon">💰</div>
|
||||
<div class="metric-label">투자 수익</div>
|
||||
<div class="metric-value up">₩235만</div>
|
||||
</div>
|
||||
<div class="metric-box">
|
||||
<div class="metric-icon">🎯</div>
|
||||
<div class="metric-label">승률</div>
|
||||
<div class="metric-value">68%</div>
|
||||
</div>
|
||||
<div class="metric-box">
|
||||
<div class="metric-icon">🔄</div>
|
||||
<div class="metric-label">총 거래</div>
|
||||
<div class="metric-value">25회</div>
|
||||
</div>
|
||||
<div class="metric-box">
|
||||
<div class="metric-icon">✅</div>
|
||||
<div class="metric-label">수익 거래</div>
|
||||
<div class="metric-value up">17회</div>
|
||||
</div>
|
||||
<div class="metric-box">
|
||||
<div class="metric-icon">❌</div>
|
||||
<div class="metric-label">손실 거래</div>
|
||||
<div class="metric-value down">8회</div>
|
||||
</div>
|
||||
<div class="metric-box">
|
||||
<div class="metric-icon">📉</div>
|
||||
<div class="metric-label">최대 손실</div>
|
||||
<div class="metric-value down">-8.2%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 차트 + 사이드 패널 -->
|
||||
<div class="chart-row">
|
||||
<div class="chart-panel">
|
||||
<div class="panel-header">
|
||||
<span class="panel-title">📈 가격 차트 & 매매 시점</span>
|
||||
<div class="tab-group">
|
||||
<button class="tab-btn active">캔들</button>
|
||||
<button class="tab-btn">라인</button>
|
||||
<button class="tab-btn">수익곡선</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-area">
|
||||
<div class="chart-grid"></div>
|
||||
<div class="candles-container">
|
||||
<div class="candle up" style="height: 50px;"></div>
|
||||
<div class="candle up" style="height: 70px;"></div>
|
||||
<div class="candle down" style="height: 40px;"></div>
|
||||
<div class="candle down" style="height: 60px;"><div class="signal-tag buy">BUY</div></div>
|
||||
<div class="candle up" style="height: 80px;"></div>
|
||||
<div class="candle up" style="height: 100px;"></div>
|
||||
<div class="candle up" style="height: 90px;"></div>
|
||||
<div class="candle down" style="height: 55px;"><div class="signal-tag sell">SELL</div></div>
|
||||
<div class="candle down" style="height: 70px;"></div>
|
||||
<div class="candle up" style="height: 60px;"></div>
|
||||
<div class="candle down" style="height: 40px;"><div class="signal-tag buy">BUY</div></div>
|
||||
<div class="candle up" style="height: 65px;"></div>
|
||||
<div class="candle up" style="height: 85px;"></div>
|
||||
<div class="candle up" style="height: 95px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="side-panel">
|
||||
<div class="accuracy-card">
|
||||
<div class="panel-title" style="margin-bottom: 16px;">🎯 전략 정확도</div>
|
||||
<div class="accuracy-ring">
|
||||
<div class="accuracy-inner">
|
||||
<div class="accuracy-pct">70%</div>
|
||||
<div class="accuracy-text">정확도</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accuracy-bars">
|
||||
<div class="acc-bar-item">
|
||||
<div class="acc-bar-header">
|
||||
<span style="color: #71717a;">매수 정확도</span>
|
||||
<span style="color: #22c55e;">76%</span>
|
||||
</div>
|
||||
<div class="acc-bar-bg"><div class="acc-bar-fill green" style="width: 76%;"></div></div>
|
||||
</div>
|
||||
<div class="acc-bar-item">
|
||||
<div class="acc-bar-header">
|
||||
<span style="color: #71717a;">매도 정확도</span>
|
||||
<span style="color: #a855f7;">64%</span>
|
||||
</div>
|
||||
<div class="acc-bar-bg"><div class="acc-bar-fill purple" style="width: 64%;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trades-panel">
|
||||
<div class="panel-header" style="margin-bottom: 12px;">
|
||||
<span class="panel-title">📋 최근 거래</span>
|
||||
</div>
|
||||
<div class="trades-list">
|
||||
<div class="trade-item">
|
||||
<div class="trade-icon sell">S</div>
|
||||
<div class="trade-info">
|
||||
<div class="trade-type">매도</div>
|
||||
<div class="trade-time">03.15 14:00</div>
|
||||
</div>
|
||||
<div class="trade-result">
|
||||
<div class="trade-price">₩58.45M</div>
|
||||
<div class="trade-pnl profit">+5.2%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trade-item">
|
||||
<div class="trade-icon buy">B</div>
|
||||
<div class="trade-info">
|
||||
<div class="trade-type">매수</div>
|
||||
<div class="trade-time">03.12 09:00</div>
|
||||
</div>
|
||||
<div class="trade-result">
|
||||
<div class="trade-price">₩55.52M</div>
|
||||
<div class="trade-pnl">-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trade-item">
|
||||
<div class="trade-icon sell">S</div>
|
||||
<div class="trade-info">
|
||||
<div class="trade-type">매도</div>
|
||||
<div class="trade-time">03.08 16:00</div>
|
||||
</div>
|
||||
<div class="trade-result">
|
||||
<div class="trade-price">₩54.2M</div>
|
||||
<div class="trade-pnl loss">-2.1%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,542 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>PC-05 스플릿뷰 스타일</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
background: #0f172a;
|
||||
color: #e2e8f0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 왼쪽: 설정 & 결과 */
|
||||
.left-pane {
|
||||
background: #1e293b;
|
||||
padding: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.pane-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.logo {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.version-tag {
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
color: #60a5fa;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* 설정 카드 */
|
||||
.config-card {
|
||||
background: #0f172a;
|
||||
border-radius: 20px;
|
||||
padding: 28px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-label {
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 8px;
|
||||
display: block;
|
||||
}
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 14px 16px;
|
||||
background: #1e293b;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
.form-input:focus { outline: none; border-color: #3b82f6; }
|
||||
.run-btn {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
background: linear-gradient(135deg, #3b82f6, #2563eb);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* 결과 헤더 */
|
||||
.result-header {
|
||||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(16, 185, 129, 0.05));
|
||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||
border-radius: 20px;
|
||||
padding: 28px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.result-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.result-symbol {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.result-meta {
|
||||
font-size: 13px;
|
||||
color: #94a3b8;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.result-return {
|
||||
text-align: right;
|
||||
}
|
||||
.return-value {
|
||||
font-size: 42px;
|
||||
font-weight: 700;
|
||||
color: #22c55e;
|
||||
}
|
||||
.return-amount {
|
||||
font-size: 14px;
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
/* 메트릭 그리드 */
|
||||
.metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.metric-card {
|
||||
background: #0f172a;
|
||||
border-radius: 14px;
|
||||
padding: 20px;
|
||||
}
|
||||
.metric-label {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.metric-value {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.metric-value.green { color: #22c55e; }
|
||||
.metric-value.red { color: #ef4444; }
|
||||
|
||||
/* 정확도 */
|
||||
.accuracy-section {
|
||||
background: #0f172a;
|
||||
border-radius: 20px;
|
||||
padding: 28px;
|
||||
}
|
||||
.accuracy-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
.accuracy-ring {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
background: conic-gradient(#3b82f6 0deg 252deg, #334155 252deg 360deg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.accuracy-inner {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
background: #0f172a;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.accuracy-pct {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #3b82f6;
|
||||
}
|
||||
.accuracy-text {
|
||||
font-size: 10px;
|
||||
color: #64748b;
|
||||
}
|
||||
.accuracy-details {
|
||||
flex: 1;
|
||||
}
|
||||
.acc-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #1e293b;
|
||||
}
|
||||
.acc-item:last-child { border: none; }
|
||||
.acc-label { font-size: 13px; color: #94a3b8; }
|
||||
.acc-value { font-size: 15px; font-weight: 600; }
|
||||
.acc-value.green { color: #22c55e; }
|
||||
.acc-value.yellow { color: #eab308; }
|
||||
|
||||
/* 오른쪽: 차트 & 거래 */
|
||||
.right-pane {
|
||||
background: #0f172a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.chart-header {
|
||||
padding: 20px 32px;
|
||||
border-bottom: 1px solid #1e293b;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.chart-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.chart-tabs {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
background: #1e293b;
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.chart-tab {
|
||||
padding: 8px 16px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.chart-tab.active { background: #3b82f6; color: #fff; }
|
||||
|
||||
/* 차트 */
|
||||
.chart-area {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(30, 41, 59, 0.5) 1px, transparent 1px),
|
||||
linear-gradient(rgba(30, 41, 59, 0.5) 1px, transparent 1px);
|
||||
background-size: 50px 35px;
|
||||
}
|
||||
.chart-candles {
|
||||
position: absolute;
|
||||
inset: 30px 60px 80px 30px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.candle {
|
||||
width: 14px;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
}
|
||||
.candle.up { background: #22c55e; }
|
||||
.candle.down { background: #ef4444; }
|
||||
.signal-marker {
|
||||
position: absolute;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.signal-marker.buy {
|
||||
bottom: -34px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: #22c55e;
|
||||
border: 2px solid #22c55e;
|
||||
}
|
||||
.signal-marker.sell {
|
||||
top: -34px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #ef4444;
|
||||
border: 2px solid #ef4444;
|
||||
}
|
||||
|
||||
/* 거래 섹션 */
|
||||
.trades-section {
|
||||
height: 280px;
|
||||
border-top: 1px solid #1e293b;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.trades-header {
|
||||
padding: 16px 32px;
|
||||
border-bottom: 1px solid #1e293b;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.trades-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.trades-view-all {
|
||||
font-size: 12px;
|
||||
color: #3b82f6;
|
||||
cursor: pointer;
|
||||
}
|
||||
.trades-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px 32px;
|
||||
}
|
||||
.trade-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 14px 16px;
|
||||
background: #1e293b;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.trade-badge {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
margin-right: 14px;
|
||||
}
|
||||
.trade-badge.buy { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
|
||||
.trade-badge.sell { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
|
||||
.trade-info { flex: 1; }
|
||||
.trade-type { font-size: 13px; font-weight: 500; }
|
||||
.trade-time { font-size: 11px; color: #64748b; }
|
||||
.trade-result { text-align: right; }
|
||||
.trade-price { font-size: 13px; }
|
||||
.trade-pnl { font-size: 12px; font-weight: 600; }
|
||||
.trade-pnl.profit { color: #22c55e; }
|
||||
.trade-pnl.loss { color: #ef4444; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layout">
|
||||
<!-- 왼쪽 패널 -->
|
||||
<div class="left-pane">
|
||||
<div class="pane-header">
|
||||
<div class="logo">📊 백테스트 시뮬레이터</div>
|
||||
<span class="version-tag">PC-05 스플릿뷰</span>
|
||||
</div>
|
||||
|
||||
<div class="config-card">
|
||||
<h3 class="card-title">⚙️ 테스트 설정</h3>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label class="form-label">종목</label>
|
||||
<select class="form-input"><option>BTC/KRW</option></select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">전략</label>
|
||||
<select class="form-input"><option>MACD + RSI</option></select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">시간봉</label>
|
||||
<select class="form-input"><option>1시간</option></select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">분석기간</label>
|
||||
<select class="form-input"><option>3개월</option></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" style="margin-top: 16px;">
|
||||
<label class="form-label">초기 투자금</label>
|
||||
<input type="text" class="form-input" value="₩10,000,000">
|
||||
</div>
|
||||
<button class="run-btn">▶ 백테스트 실행</button>
|
||||
</div>
|
||||
|
||||
<div class="result-header">
|
||||
<div class="result-row">
|
||||
<div>
|
||||
<div class="result-symbol">BTC/KRW</div>
|
||||
<div class="result-meta">MACD+RSI · 1H · 2024.01.01 - 03.15</div>
|
||||
</div>
|
||||
<div class="result-return">
|
||||
<div class="return-value">+23.5%</div>
|
||||
<div class="return-amount">₩2,350,000</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metrics-grid">
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">최종 자산</div>
|
||||
<div class="metric-value">₩12.35M</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">승률</div>
|
||||
<div class="metric-value green">68%</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">총 거래</div>
|
||||
<div class="metric-value">25회</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">수익 거래</div>
|
||||
<div class="metric-value green">17회</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">손실 거래</div>
|
||||
<div class="metric-value red">8회</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">최대 낙폭</div>
|
||||
<div class="metric-value red">-8.2%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accuracy-section">
|
||||
<h3 class="card-title">🎯 전략 정확도</h3>
|
||||
<div class="accuracy-row">
|
||||
<div class="accuracy-ring">
|
||||
<div class="accuracy-inner">
|
||||
<div class="accuracy-pct">70%</div>
|
||||
<div class="accuracy-text">정확도</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accuracy-details">
|
||||
<div class="acc-item">
|
||||
<span class="acc-label">매수 신호 정확도</span>
|
||||
<span class="acc-value green">76%</span>
|
||||
</div>
|
||||
<div class="acc-item">
|
||||
<span class="acc-label">매도 신호 정확도</span>
|
||||
<span class="acc-value yellow">64%</span>
|
||||
</div>
|
||||
<div class="acc-item">
|
||||
<span class="acc-label">평균 수익률</span>
|
||||
<span class="acc-value green">+4.2%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 오른쪽 패널 -->
|
||||
<div class="right-pane">
|
||||
<div class="chart-header">
|
||||
<span class="chart-title">📈 가격 차트 & 매매 시점</span>
|
||||
<div class="chart-tabs">
|
||||
<button class="chart-tab active">캔들</button>
|
||||
<button class="chart-tab">라인</button>
|
||||
<button class="chart-tab">수익곡선</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-area">
|
||||
<div class="chart-candles">
|
||||
<div class="candle up" style="height: 55px;"></div>
|
||||
<div class="candle up" style="height: 75px;"></div>
|
||||
<div class="candle down" style="height: 45px;"></div>
|
||||
<div class="candle down" style="height: 65px;"><div class="signal-marker buy">B</div></div>
|
||||
<div class="candle up" style="height: 85px;"></div>
|
||||
<div class="candle up" style="height: 110px;"></div>
|
||||
<div class="candle up" style="height: 95px;"></div>
|
||||
<div class="candle down" style="height: 60px;"><div class="signal-marker sell">S</div></div>
|
||||
<div class="candle down" style="height: 75px;"></div>
|
||||
<div class="candle up" style="height: 65px;"></div>
|
||||
<div class="candle down" style="height: 45px;"><div class="signal-marker buy">B</div></div>
|
||||
<div class="candle up" style="height: 70px;"></div>
|
||||
<div class="candle up" style="height: 90px;"></div>
|
||||
<div class="candle up" style="height: 100px;"></div>
|
||||
<div class="candle down" style="height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trades-section">
|
||||
<div class="trades-header">
|
||||
<span class="trades-title">📋 거래 내역</span>
|
||||
<span class="trades-view-all">전체보기 →</span>
|
||||
</div>
|
||||
<div class="trades-list">
|
||||
<div class="trade-row">
|
||||
<div class="trade-badge sell">S</div>
|
||||
<div class="trade-info">
|
||||
<div class="trade-type">매도</div>
|
||||
<div class="trade-time">2024.03.15 14:00</div>
|
||||
</div>
|
||||
<div class="trade-result">
|
||||
<div class="trade-price">₩58,450,000</div>
|
||||
<div class="trade-pnl profit">+5.2%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trade-row">
|
||||
<div class="trade-badge buy">B</div>
|
||||
<div class="trade-info">
|
||||
<div class="trade-type">매수</div>
|
||||
<div class="trade-time">2024.03.12 09:00</div>
|
||||
</div>
|
||||
<div class="trade-result">
|
||||
<div class="trade-price">₩55,520,000</div>
|
||||
<div class="trade-pnl">-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trade-row">
|
||||
<div class="trade-badge sell">S</div>
|
||||
<div class="trade-info">
|
||||
<div class="trade-type">매도</div>
|
||||
<div class="trade-time">2024.03.08 16:00</div>
|
||||
</div>
|
||||
<div class="trade-result">
|
||||
<div class="trade-price">₩54,200,000</div>
|
||||
<div class="trade-pnl loss">-2.1%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user