aidev
912 lines
25 KiB
HTML
912 lines
25 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 - V3 탭 기반 스타일</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: #f8fafc;
|
|
min-height: 100vh;
|
|
color: #1e293b;
|
|
}
|
|
|
|
/* 헤더 */
|
|
.header {
|
|
background: #fff;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
padding: 16px 32px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24px;
|
|
}
|
|
.logo {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.logo svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
.breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 14px;
|
|
color: #64748b;
|
|
}
|
|
.breadcrumb a {
|
|
color: #3b82f6;
|
|
text-decoration: none;
|
|
}
|
|
.version-badge {
|
|
background: #dbeafe;
|
|
color: #1d4ed8;
|
|
padding: 4px 12px;
|
|
border-radius: 16px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 컨테이너 */
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 24px;
|
|
}
|
|
|
|
/* 설정 카드 */
|
|
.settings-card {
|
|
background: #fff;
|
|
border-radius: 16px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
padding: 24px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.settings-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
.settings-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.settings-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
.form-group label {
|
|
display: block;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: #475569;
|
|
margin-bottom: 8px;
|
|
}
|
|
.form-group select, .form-group input {
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 10px;
|
|
font-size: 14px;
|
|
background: #f8fafc;
|
|
color: #0f172a;
|
|
}
|
|
.form-group select:focus, .form-group input:focus {
|
|
outline: none;
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
}
|
|
.btn-primary {
|
|
padding: 12px 28px;
|
|
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
|
border: none;
|
|
border-radius: 10px;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
transition: all 0.2s;
|
|
}
|
|
.btn-primary:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
/* 결과 요약 스트립 */
|
|
.summary-strip {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.summary-item {
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.summary-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
}
|
|
.summary-item.green::before { background: linear-gradient(90deg, #10b981, #34d399); }
|
|
.summary-item.red::before { background: linear-gradient(90deg, #ef4444, #f87171); }
|
|
.summary-item.blue::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
|
|
.summary-item.purple::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
|
|
.summary-item.orange::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
|
|
.summary-label {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
margin-bottom: 8px;
|
|
}
|
|
.summary-value {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
}
|
|
.summary-value.positive { color: #10b981; }
|
|
.summary-value.negative { color: #ef4444; }
|
|
.summary-sub {
|
|
font-size: 11px;
|
|
color: #94a3b8;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* 메인 탭 네비게이션 */
|
|
.main-tabs {
|
|
background: #fff;
|
|
border-radius: 16px 16px 0 0;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
|
display: flex;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
}
|
|
.main-tab {
|
|
padding: 18px 28px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #64748b;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
transition: color 0.2s;
|
|
}
|
|
.main-tab:hover {
|
|
color: #3b82f6;
|
|
}
|
|
.main-tab.active {
|
|
color: #3b82f6;
|
|
font-weight: 600;
|
|
}
|
|
.main-tab.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -1px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: #3b82f6;
|
|
border-radius: 3px 3px 0 0;
|
|
}
|
|
.tab-badge {
|
|
background: #dbeafe;
|
|
color: #2563eb;
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 탭 콘텐츠 */
|
|
.tab-content {
|
|
background: #fff;
|
|
border-radius: 0 0 16px 16px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
|
min-height: 500px;
|
|
}
|
|
|
|
/* 차트 탭 */
|
|
.chart-content {
|
|
padding: 24px;
|
|
}
|
|
.chart-controls {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
.chart-types {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.chart-type-btn {
|
|
padding: 8px 16px;
|
|
border: 1px solid #e2e8f0;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
color: #64748b;
|
|
cursor: pointer;
|
|
}
|
|
.chart-type-btn.active {
|
|
background: #3b82f6;
|
|
border-color: #3b82f6;
|
|
color: #fff;
|
|
}
|
|
.chart-timeframes {
|
|
display: flex;
|
|
gap: 4px;
|
|
background: #f1f5f9;
|
|
padding: 4px;
|
|
border-radius: 8px;
|
|
}
|
|
.tf-btn {
|
|
padding: 6px 14px;
|
|
border: none;
|
|
background: transparent;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
cursor: pointer;
|
|
}
|
|
.tf-btn.active {
|
|
background: #fff;
|
|
color: #0f172a;
|
|
font-weight: 500;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.chart-area {
|
|
height: 400px;
|
|
background: #fafbfc;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 12px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
/* 모의 차트 그리드 */
|
|
.chart-grid {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px),
|
|
linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px);
|
|
background-size: 50px 30px;
|
|
}
|
|
.chart-y-axis {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 40px;
|
|
width: 70px;
|
|
background: rgba(255,255,255,0.9);
|
|
border-right: 1px solid #e2e8f0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding: 16px 8px;
|
|
font-size: 11px;
|
|
color: #64748b;
|
|
text-align: right;
|
|
}
|
|
.chart-x-axis {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 70px;
|
|
right: 0;
|
|
height: 40px;
|
|
background: rgba(255,255,255,0.9);
|
|
border-top: 1px solid #e2e8f0;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
font-size: 11px;
|
|
color: #64748b;
|
|
}
|
|
.chart-candles {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 90px;
|
|
right: 20px;
|
|
bottom: 60px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-around;
|
|
gap: 4px;
|
|
}
|
|
.candle {
|
|
width: 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
.candle-body {
|
|
width: 100%;
|
|
border-radius: 2px;
|
|
}
|
|
.candle-body.bull { background: #10b981; }
|
|
.candle-body.bear { background: #ef4444; }
|
|
.signal-marker {
|
|
position: absolute;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
|
}
|
|
.signal-marker.buy {
|
|
bottom: -40px;
|
|
background: #dcfce7;
|
|
color: #16a34a;
|
|
border: 2px solid #16a34a;
|
|
}
|
|
.signal-marker.sell {
|
|
top: -40px;
|
|
background: #fef2f2;
|
|
color: #dc2626;
|
|
border: 2px solid #dc2626;
|
|
}
|
|
|
|
.chart-legend {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 32px;
|
|
margin-top: 16px;
|
|
}
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 13px;
|
|
color: #64748b;
|
|
}
|
|
.legend-dot {
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* 거래 내역 탭 */
|
|
.trades-content {
|
|
padding: 24px;
|
|
}
|
|
.trades-filter {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.filter-btn {
|
|
padding: 8px 16px;
|
|
border: 1px solid #e2e8f0;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
color: #64748b;
|
|
cursor: pointer;
|
|
}
|
|
.filter-btn.active {
|
|
background: #f0fdf4;
|
|
border-color: #10b981;
|
|
color: #059669;
|
|
}
|
|
.trades-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
.trades-table th {
|
|
text-align: left;
|
|
padding: 14px 16px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #64748b;
|
|
background: #f8fafc;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
}
|
|
.trades-table td {
|
|
padding: 16px;
|
|
font-size: 14px;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
}
|
|
.trades-table tr:hover {
|
|
background: #fafbfc;
|
|
}
|
|
.trade-type-badge {
|
|
padding: 4px 12px;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
.trade-type-badge.buy {
|
|
background: #dcfce7;
|
|
color: #16a34a;
|
|
}
|
|
.trade-type-badge.sell {
|
|
background: #fef2f2;
|
|
color: #dc2626;
|
|
}
|
|
.profit-badge {
|
|
font-weight: 600;
|
|
}
|
|
.profit-badge.positive { color: #10b981; }
|
|
.profit-badge.negative { color: #ef4444; }
|
|
|
|
/* 분석 탭 */
|
|
.analysis-content {
|
|
padding: 24px;
|
|
}
|
|
.analysis-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 24px;
|
|
}
|
|
.analysis-card {
|
|
background: #f8fafc;
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
}
|
|
.analysis-card-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* 정확도 차트 */
|
|
.accuracy-chart {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 40px;
|
|
}
|
|
.accuracy-ring {
|
|
width: 160px;
|
|
height: 160px;
|
|
border-radius: 50%;
|
|
background: conic-gradient(
|
|
#10b981 0deg 259.2deg,
|
|
#e2e8f0 259.2deg 360deg
|
|
);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.accuracy-inner {
|
|
width: 120px;
|
|
height: 120px;
|
|
background: #f8fafc;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.accuracy-value {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
color: #10b981;
|
|
}
|
|
.accuracy-label {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
}
|
|
.accuracy-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
.accuracy-detail-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.accuracy-detail-bar {
|
|
width: 100px;
|
|
height: 8px;
|
|
background: #e2e8f0;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.accuracy-detail-fill {
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* 리스크 분석 */
|
|
.risk-metrics {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 16px;
|
|
}
|
|
.risk-item {
|
|
background: #fff;
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
.risk-item-label {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
margin-bottom: 6px;
|
|
}
|
|
.risk-item-value {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* 반응형 */
|
|
@media (max-width: 1200px) {
|
|
.summary-strip {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
.analysis-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
@media (max-width: 768px) {
|
|
.summary-strip {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.settings-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<div class="header-left">
|
|
<div class="logo">
|
|
<svg viewBox="0 0 32 32" fill="none">
|
|
<rect width="32" height="32" rx="8" fill="#3b82f6"/>
|
|
<path d="M8 22L14 14L18 18L24 10" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
투자전략 테스터
|
|
</div>
|
|
<div class="breadcrumb">
|
|
<a href="#">대시보드</a>
|
|
<span>/</span>
|
|
<span>백테스트</span>
|
|
</div>
|
|
</div>
|
|
<span class="version-badge">V3 - 탭 기반 스타일</span>
|
|
</header>
|
|
|
|
<main class="container">
|
|
<!-- 설정 카드 -->
|
|
<div class="settings-card">
|
|
<div class="settings-header">
|
|
<h2 class="settings-title">
|
|
⚙️ 백테스트 설정
|
|
</h2>
|
|
<button class="btn-primary">
|
|
<span>▶</span> 백테스트 실행
|
|
</button>
|
|
</div>
|
|
<div class="settings-grid">
|
|
<div class="form-group">
|
|
<label>종목 선택</label>
|
|
<select>
|
|
<option>BTC/KRW (비트코인)</option>
|
|
<option>ETH/KRW (이더리움)</option>
|
|
<option>XRP/KRW (리플)</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>투자전략</label>
|
|
<select>
|
|
<option>MACD + Stochastic 복합전략</option>
|
|
<option>RSI 과매수/과매도</option>
|
|
<option>이동평균선 크로스</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>시간봉</label>
|
|
<select>
|
|
<option>1시간봉</option>
|
|
<option>4시간봉</option>
|
|
<option>일봉</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>분석 기간</label>
|
|
<select>
|
|
<option>최근 1개월</option>
|
|
<option>최근 3개월</option>
|
|
<option>최근 6개월</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>초기 투자금</label>
|
|
<input type="text" value="₩10,000,000">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 결과 요약 -->
|
|
<div class="summary-strip">
|
|
<div class="summary-item green">
|
|
<div class="summary-label">💰 총 수익률</div>
|
|
<div class="summary-value positive">+21.5%</div>
|
|
<div class="summary-sub">₩2,150,000 수익</div>
|
|
</div>
|
|
<div class="summary-item green">
|
|
<div class="summary-label">📊 최종 자산</div>
|
|
<div class="summary-value">₩12.15M</div>
|
|
<div class="summary-sub">원금 ₩10,000,000</div>
|
|
</div>
|
|
<div class="summary-item blue">
|
|
<div class="summary-label">🎯 승률</div>
|
|
<div class="summary-value" style="color: #3b82f6;">72%</div>
|
|
<div class="summary-sub">18승 7패</div>
|
|
</div>
|
|
<div class="summary-item purple">
|
|
<div class="summary-label">🔄 총 거래</div>
|
|
<div class="summary-value" style="color: #8b5cf6;">25</div>
|
|
<div class="summary-sub">매수 13 / 매도 12</div>
|
|
</div>
|
|
<div class="summary-item orange">
|
|
<div class="summary-label">📉 최대 낙폭</div>
|
|
<div class="summary-value negative">-7.8%</div>
|
|
<div class="summary-sub">2024.02.12 기록</div>
|
|
</div>
|
|
<div class="summary-item green">
|
|
<div class="summary-label">⚡ 평균 수익</div>
|
|
<div class="summary-value positive">+₩86K</div>
|
|
<div class="summary-sub">거래당 평균</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 메인 탭 -->
|
|
<nav class="main-tabs">
|
|
<button class="main-tab active">
|
|
📈 차트 분석
|
|
</button>
|
|
<button class="main-tab">
|
|
📋 거래 내역
|
|
<span class="tab-badge">25</span>
|
|
</button>
|
|
<button class="main-tab">
|
|
📊 상세 분석
|
|
</button>
|
|
<button class="main-tab">
|
|
🎯 전략 정확도
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- 탭 콘텐츠 -->
|
|
<div class="tab-content">
|
|
<!-- 차트 탭 (활성) -->
|
|
<div class="chart-content">
|
|
<div class="chart-controls">
|
|
<div class="chart-types">
|
|
<button class="chart-type-btn active">캔들스틱</button>
|
|
<button class="chart-type-btn">라인차트</button>
|
|
<button class="chart-type-btn">수익곡선</button>
|
|
</div>
|
|
<div class="chart-timeframes">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-area">
|
|
<div class="chart-grid"></div>
|
|
<div class="chart-y-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="chart-x-axis">
|
|
<span>03/08</span>
|
|
<span>03/09</span>
|
|
<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: 40px;"></div></div>
|
|
<div class="candle"><div class="candle-body bull" style="height: 55px;"></div></div>
|
|
<div class="candle"><div class="candle-body bear" style="height: 35px;"></div></div>
|
|
<div class="candle"><div class="candle-body bear" style="height: 50px;"></div><div class="signal-marker buy">B</div></div>
|
|
<div class="candle"><div class="candle-body bull" style="height: 60px;"></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: 65px;"></div></div>
|
|
<div class="candle"><div class="candle-body bear" style="height: 40px;"></div><div class="signal-marker sell">S</div></div>
|
|
<div class="candle"><div class="candle-body bear" style="height: 55px;"></div></div>
|
|
<div class="candle"><div class="candle-body bull" style="height: 45px;"></div></div>
|
|
<div class="candle"><div class="candle-body bear" style="height: 30px;"></div><div class="signal-marker buy">B</div></div>
|
|
<div class="candle"><div class="candle-body bull" style="height: 50px;"></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: 80px;"></div></div>
|
|
<div class="candle"><div class="candle-body bear" style="height: 35px;"></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: #dcfce7; border: 2px solid #16a34a;"></div>
|
|
매수 시점
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-dot" style="background: #fef2f2; border: 2px solid #dc2626;"></div>
|
|
매도 시점
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-dot" style="background: #3b82f6;"></div>
|
|
MA(20)
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-dot" style="background: #f59e0b;"></div>
|
|
MA(60)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 거래 내역 탭 (숨김) - 실제로는 탭 전환 시 표시 -->
|
|
<div class="trades-content" style="display: none;">
|
|
<div class="trades-filter">
|
|
<button class="filter-btn active">전체</button>
|
|
<button class="filter-btn">매수</button>
|
|
<button class="filter-btn">매도</button>
|
|
<button class="filter-btn">수익</button>
|
|
<button class="filter-btn">손실</button>
|
|
</div>
|
|
<table class="trades-table">
|
|
<thead>
|
|
<tr>
|
|
<th>거래유형</th>
|
|
<th>일시</th>
|
|
<th>가격</th>
|
|
<th>수량</th>
|
|
<th>금액</th>
|
|
<th>손익</th>
|
|
<th>수익률</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><span class="trade-type-badge sell">SELL</span></td>
|
|
<td>2024.03.15 14:00</td>
|
|
<td>₩58,450,000</td>
|
|
<td>0.1850 BTC</td>
|
|
<td>₩10,813,250</td>
|
|
<td class="profit-badge positive">+₩520,000</td>
|
|
<td class="profit-badge positive">+5.1%</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="trade-type-badge buy">BUY</span></td>
|
|
<td>2024.03.12 09:00</td>
|
|
<td>₩55,580,000</td>
|
|
<td>0.1850 BTC</td>
|
|
<td>₩10,282,300</td>
|
|
<td>-</td>
|
|
<td>-</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="trade-type-badge sell">SELL</span></td>
|
|
<td>2024.03.08 16:00</td>
|
|
<td>₩54,200,000</td>
|
|
<td>0.1900 BTC</td>
|
|
<td>₩10,298,000</td>
|
|
<td class="profit-badge negative">-₩180,000</td>
|
|
<td class="profit-badge negative">-1.7%</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 분석 탭 (숨김) -->
|
|
<div class="analysis-content" style="display: none;">
|
|
<div class="analysis-grid">
|
|
<div class="analysis-card">
|
|
<h3 class="analysis-card-title">🎯 전략 정확도</h3>
|
|
<div class="accuracy-chart">
|
|
<div class="accuracy-ring">
|
|
<div class="accuracy-inner">
|
|
<div class="accuracy-value">72%</div>
|
|
<div class="accuracy-label">전체 정확도</div>
|
|
</div>
|
|
</div>
|
|
<div class="accuracy-details">
|
|
<div class="accuracy-detail-item">
|
|
<span style="width: 60px; font-size: 13px; color: #64748b;">매수</span>
|
|
<div class="accuracy-detail-bar">
|
|
<div class="accuracy-detail-fill" style="width: 78%; background: #10b981;"></div>
|
|
</div>
|
|
<span style="font-weight: 600; color: #10b981;">78%</span>
|
|
</div>
|
|
<div class="accuracy-detail-item">
|
|
<span style="width: 60px; font-size: 13px; color: #64748b;">매도</span>
|
|
<div class="accuracy-detail-bar">
|
|
<div class="accuracy-detail-fill" style="width: 65%; background: #ef4444;"></div>
|
|
</div>
|
|
<span style="font-weight: 600; color: #ef4444;">65%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="analysis-card">
|
|
<h3 class="analysis-card-title">📊 리스크 분석</h3>
|
|
<div class="risk-metrics">
|
|
<div class="risk-item">
|
|
<div class="risk-item-label">최대 낙폭 (MDD)</div>
|
|
<div class="risk-item-value" style="color: #ef4444;">-7.8%</div>
|
|
</div>
|
|
<div class="risk-item">
|
|
<div class="risk-item-label">샤프 비율</div>
|
|
<div class="risk-item-value" style="color: #10b981;">1.85</div>
|
|
</div>
|
|
<div class="risk-item">
|
|
<div class="risk-item-label">최대 연속 손실</div>
|
|
<div class="risk-item-value">3회</div>
|
|
</div>
|
|
<div class="risk-item">
|
|
<div class="risk-item-label">평균 보유 기간</div>
|
|
<div class="risk-item-value">2.3일</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|