aidev
543 lines
15 KiB
HTML
543 lines
15 KiB
HTML
<!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>
|