aidev
616 lines
19 KiB
HTML
616 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>투자전략 테스트 UI - V1 대시보드 스타일</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: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
|
min-height: 100vh;
|
|
color: #fff;
|
|
padding: 20px;
|
|
}
|
|
.container {
|
|
max-width: 1600px;
|
|
margin: 0 auto;
|
|
}
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
padding-bottom: 16px;
|
|
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
.header h1 {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.header h1::before {
|
|
content: "📊";
|
|
font-size: 28px;
|
|
}
|
|
.version-badge {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
padding: 6px 16px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 컨트롤 패널 */
|
|
.control-panel {
|
|
background: rgba(255,255,255,0.05);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
margin-bottom: 24px;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
.control-row {
|
|
display: flex;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
}
|
|
.control-group {
|
|
flex: 1;
|
|
min-width: 180px;
|
|
}
|
|
.control-group label {
|
|
display: block;
|
|
font-size: 12px;
|
|
color: #a0aec0;
|
|
margin-bottom: 8px;
|
|
font-weight: 500;
|
|
}
|
|
.control-group select, .control-group input {
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|
background: rgba(255,255,255,0.1);
|
|
color: #fff;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
.control-group select:focus, .control-group input:focus {
|
|
outline: none;
|
|
border-color: #667eea;
|
|
}
|
|
.btn-run {
|
|
padding: 12px 32px;
|
|
background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%);
|
|
border: none;
|
|
border-radius: 10px;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
.btn-run:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(0,210,255,0.3);
|
|
}
|
|
|
|
/* 메트릭 카드 */
|
|
.metrics-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.metric-card {
|
|
background: rgba(255,255,255,0.05);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
transition: transform 0.2s;
|
|
}
|
|
.metric-card:hover {
|
|
transform: translateY(-4px);
|
|
}
|
|
.metric-card.positive { border-left: 4px solid #10b981; }
|
|
.metric-card.negative { border-left: 4px solid #ef4444; }
|
|
.metric-card.neutral { border-left: 4px solid #667eea; }
|
|
.metric-card.warning { border-left: 4px solid #f59e0b; }
|
|
|
|
.metric-label {
|
|
font-size: 12px;
|
|
color: #a0aec0;
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.metric-value {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
}
|
|
.metric-value.positive { color: #10b981; }
|
|
.metric-value.negative { color: #ef4444; }
|
|
.metric-sub {
|
|
font-size: 12px;
|
|
color: #a0aec0;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* 메인 콘텐츠 */
|
|
.main-content {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr;
|
|
gap: 24px;
|
|
}
|
|
|
|
/* 차트 영역 */
|
|
.chart-section {
|
|
background: rgba(255,255,255,0.05);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
.chart-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
.chart-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
.chart-tabs {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.chart-tab {
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
background: rgba(255,255,255,0.1);
|
|
border: none;
|
|
color: #a0aec0;
|
|
}
|
|
.chart-tab.active {
|
|
background: #667eea;
|
|
color: #fff;
|
|
}
|
|
.chart-placeholder {
|
|
height: 400px;
|
|
background: linear-gradient(180deg, rgba(102,126,234,0.1) 0%, rgba(118,75,162,0.1) 100%);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
/* 캔들차트 목업 */
|
|
.candle-chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
padding: 20px;
|
|
}
|
|
.candle-row {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-around;
|
|
height: 70%;
|
|
padding: 0 20px;
|
|
}
|
|
.candle {
|
|
width: 8px;
|
|
position: relative;
|
|
}
|
|
.candle-body {
|
|
width: 100%;
|
|
min-height: 20px;
|
|
border-radius: 2px;
|
|
}
|
|
.candle-body.up { background: #10b981; }
|
|
.candle-body.down { background: #ef4444; }
|
|
.candle-wick {
|
|
width: 2px;
|
|
background: currentColor;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.signal-marker {
|
|
position: absolute;
|
|
font-size: 20px;
|
|
animation: bounce 1s infinite;
|
|
}
|
|
.signal-marker.buy { bottom: -30px; color: #10b981; }
|
|
.signal-marker.sell { top: -30px; color: #ef4444; }
|
|
@keyframes bounce {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-5px); }
|
|
}
|
|
.chart-legend {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 24px;
|
|
margin-top: 16px;
|
|
}
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
color: #a0aec0;
|
|
}
|
|
.legend-dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* 사이드바 */
|
|
.sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
/* 정확도 게이지 */
|
|
.accuracy-card {
|
|
background: rgba(255,255,255,0.05);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
text-align: center;
|
|
}
|
|
.accuracy-title {
|
|
font-size: 14px;
|
|
color: #a0aec0;
|
|
margin-bottom: 16px;
|
|
}
|
|
.accuracy-gauge {
|
|
width: 150px;
|
|
height: 150px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
.gauge-circle {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
background: conic-gradient(
|
|
#10b981 0deg 252deg,
|
|
rgba(255,255,255,0.1) 252deg 360deg
|
|
);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.gauge-inner {
|
|
width: 120px;
|
|
height: 120px;
|
|
background: #1a1a2e;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.gauge-value {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
color: #10b981;
|
|
}
|
|
.gauge-label {
|
|
font-size: 12px;
|
|
color: #a0aec0;
|
|
}
|
|
|
|
/* 거래 내역 */
|
|
.trades-card {
|
|
background: rgba(255,255,255,0.05);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
flex: 1;
|
|
}
|
|
.trades-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.trade-list {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
.trade-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px;
|
|
background: rgba(255,255,255,0.03);
|
|
border-radius: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.trade-type {
|
|
padding: 4px 10px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
.trade-type.buy { background: rgba(16,185,129,0.2); color: #10b981; }
|
|
.trade-type.sell { background: rgba(239,68,68,0.2); color: #ef4444; }
|
|
.trade-info {
|
|
text-align: right;
|
|
}
|
|
.trade-price {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
.trade-date {
|
|
font-size: 11px;
|
|
color: #a0aec0;
|
|
}
|
|
.trade-profit {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
.trade-profit.positive { color: #10b981; }
|
|
.trade-profit.negative { color: #ef4444; }
|
|
|
|
/* 반응형 */
|
|
@media (max-width: 1200px) {
|
|
.main-content {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.sidebar {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
.accuracy-card, .trades-card {
|
|
flex: 1;
|
|
min-width: 300px;
|
|
}
|
|
}
|
|
@media (max-width: 768px) {
|
|
.control-row {
|
|
flex-direction: column;
|
|
}
|
|
.control-group {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header class="header">
|
|
<h1>투자전략 백테스트</h1>
|
|
<span class="version-badge">V1 - 대시보드 스타일</span>
|
|
</header>
|
|
|
|
<!-- 컨트롤 패널 -->
|
|
<section class="control-panel">
|
|
<div class="control-row">
|
|
<div class="control-group">
|
|
<label>📈 종목 선택</label>
|
|
<select>
|
|
<option>BTC/KRW (비트코인)</option>
|
|
<option>ETH/KRW (이더리움)</option>
|
|
<option>XRP/KRW (리플)</option>
|
|
</select>
|
|
</div>
|
|
<div class="control-group">
|
|
<label>🎯 투자전략</label>
|
|
<select>
|
|
<option>MACD + RSI 복합전략</option>
|
|
<option>볼린저밴드 돌파전략</option>
|
|
<option>이동평균 크로스</option>
|
|
</select>
|
|
</div>
|
|
<div class="control-group">
|
|
<label>⏰ 시간봉</label>
|
|
<select>
|
|
<option>1시간봉</option>
|
|
<option>4시간봉</option>
|
|
<option>일봉</option>
|
|
</select>
|
|
</div>
|
|
<div class="control-group">
|
|
<label>📅 분석 기간</label>
|
|
<select>
|
|
<option>최근 1개월</option>
|
|
<option>최근 3개월</option>
|
|
<option>최근 6개월</option>
|
|
</select>
|
|
</div>
|
|
<div class="control-group">
|
|
<label>💰 초기 투자금</label>
|
|
<input type="text" value="10,000,000 원">
|
|
</div>
|
|
<button class="btn-run">🚀 백테스트 실행</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 메트릭 카드 -->
|
|
<section class="metrics-grid">
|
|
<div class="metric-card positive">
|
|
<div class="metric-label">💰 총 수익률</div>
|
|
<div class="metric-value positive">+23.5%</div>
|
|
<div class="metric-sub">초기 대비 +2,350,000원</div>
|
|
</div>
|
|
<div class="metric-card positive">
|
|
<div class="metric-label">📊 최종 자산</div>
|
|
<div class="metric-value">12,350,000</div>
|
|
<div class="metric-sub">원금 10,000,000원</div>
|
|
</div>
|
|
<div class="metric-card neutral">
|
|
<div class="metric-label">🎯 승률</div>
|
|
<div class="metric-value">68%</div>
|
|
<div class="metric-sub">17승 8패</div>
|
|
</div>
|
|
<div class="metric-card warning">
|
|
<div class="metric-label">📉 최대 낙폭</div>
|
|
<div class="metric-value negative">-8.2%</div>
|
|
<div class="metric-sub">2024.01.15 기록</div>
|
|
</div>
|
|
<div class="metric-card neutral">
|
|
<div class="metric-label">🔄 총 거래</div>
|
|
<div class="metric-value">25</div>
|
|
<div class="metric-sub">매수 13회 / 매도 12회</div>
|
|
</div>
|
|
<div class="metric-card positive">
|
|
<div class="metric-label">⚡ 평균 수익</div>
|
|
<div class="metric-value positive">+94,000</div>
|
|
<div class="metric-sub">거래당 평균</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 메인 콘텐츠 -->
|
|
<section class="main-content">
|
|
<!-- 차트 영역 -->
|
|
<div class="chart-section">
|
|
<div class="chart-header">
|
|
<h3 class="chart-title">📈 BTC/KRW 가격 차트 & 매매 시점</h3>
|
|
<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-placeholder">
|
|
<div class="candle-chart">
|
|
<div class="candle-row">
|
|
<div class="candle" style="height: 60px;"><div class="candle-body up" style="height: 40px;"></div></div>
|
|
<div class="candle" style="height: 80px;"><div class="candle-body up" style="height: 50px;"></div></div>
|
|
<div class="candle" style="height: 70px;"><div class="candle-body down" style="height: 45px;"></div></div>
|
|
<div class="candle" style="height: 50px;"><div class="candle-body up" style="height: 30px;"></div><span class="signal-marker buy">▲</span></div>
|
|
<div class="candle" style="height: 90px;"><div class="candle-body up" style="height: 60px;"></div></div>
|
|
<div class="candle" style="height: 100px;"><div class="candle-body up" style="height: 70px;"></div></div>
|
|
<div class="candle" style="height: 85px;"><div class="candle-body down" style="height: 55px;"></div></div>
|
|
<div class="candle" style="height: 95px;"><div class="candle-body up" style="height: 65px;"></div><span class="signal-marker sell">▼</span></div>
|
|
<div class="candle" style="height: 75px;"><div class="candle-body down" style="height: 50px;"></div></div>
|
|
<div class="candle" style="height: 65px;"><div class="candle-body down" style="height: 40px;"></div></div>
|
|
<div class="candle" style="height: 55px;"><div class="candle-body up" style="height: 35px;"></div><span class="signal-marker buy">▲</span></div>
|
|
<div class="candle" style="height: 70px;"><div class="candle-body up" style="height: 45px;"></div></div>
|
|
<div class="candle" style="height: 85px;"><div class="candle-body up" style="height: 55px;"></div></div>
|
|
<div class="candle" style="height: 80px;"><div class="candle-body down" style="height: 50px;"></div></div>
|
|
<div class="candle" style="height: 90px;"><div class="candle-body up" style="height: 60px;"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chart-legend">
|
|
<div class="legend-item"><div class="legend-dot" style="background: #10b981;"></div> 매수 시점</div>
|
|
<div class="legend-item"><div class="legend-dot" style="background: #ef4444;"></div> 매도 시점</div>
|
|
<div class="legend-item"><div class="legend-dot" style="background: #667eea;"></div> MA(20)</div>
|
|
<div class="legend-item"><div class="legend-dot" style="background: #f59e0b;"></div> MA(60)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 사이드바 -->
|
|
<div class="sidebar">
|
|
<!-- 예측 정확도 -->
|
|
<div class="accuracy-card">
|
|
<div class="accuracy-title">🎯 전략 예측 정확도</div>
|
|
<div class="accuracy-gauge">
|
|
<div class="gauge-circle">
|
|
<div class="gauge-inner">
|
|
<div class="gauge-value">70%</div>
|
|
<div class="gauge-label">정확도</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 16px; text-align: left;">
|
|
<div style="display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 8px;">
|
|
<span style="color: #a0aec0;">매수 정확도</span>
|
|
<span style="color: #10b981; font-weight: 600;">76%</span>
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between; font-size: 12px;">
|
|
<span style="color: #a0aec0;">매도 정확도</span>
|
|
<span style="color: #ef4444; font-weight: 600;">64%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 거래 내역 -->
|
|
<div class="trades-card">
|
|
<div class="trades-title">📋 최근 거래 내역</div>
|
|
<div class="trade-list">
|
|
<div class="trade-item">
|
|
<div>
|
|
<span class="trade-type sell">SELL</span>
|
|
</div>
|
|
<div class="trade-info">
|
|
<div class="trade-price">58,450,000원</div>
|
|
<div class="trade-date">2024.03.15 14:00</div>
|
|
</div>
|
|
<div class="trade-profit positive">+5.2%</div>
|
|
</div>
|
|
<div class="trade-item">
|
|
<div>
|
|
<span class="trade-type buy">BUY</span>
|
|
</div>
|
|
<div class="trade-info">
|
|
<div class="trade-price">55,520,000원</div>
|
|
<div class="trade-date">2024.03.12 09:00</div>
|
|
</div>
|
|
<div class="trade-profit">-</div>
|
|
</div>
|
|
<div class="trade-item">
|
|
<div>
|
|
<span class="trade-type sell">SELL</span>
|
|
</div>
|
|
<div class="trade-info">
|
|
<div class="trade-price">54,200,000원</div>
|
|
<div class="trade-date">2024.03.08 16:00</div>
|
|
</div>
|
|
<div class="trade-profit negative">-2.1%</div>
|
|
</div>
|
|
<div class="trade-item">
|
|
<div>
|
|
<span class="trade-type buy">BUY</span>
|
|
</div>
|
|
<div class="trade-info">
|
|
<div class="trade-price">55,350,000원</div>
|
|
<div class="trade-date">2024.03.05 11:00</div>
|
|
</div>
|
|
<div class="trade-profit">-</div>
|
|
</div>
|
|
<div class="trade-item">
|
|
<div>
|
|
<span class="trade-type sell">SELL</span>
|
|
</div>
|
|
<div class="trade-info">
|
|
<div class="trade-price">52,800,000원</div>
|
|
<div class="trade-date">2024.03.01 10:00</div>
|
|
</div>
|
|
<div class="trade-profit positive">+8.3%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
</html>
|