aidev
727 lines
19 KiB
HTML
727 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 - V4 모바일 친화 스타일</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: #1a1a2e;
|
|
min-height: 100vh;
|
|
color: #fff;
|
|
}
|
|
|
|
/* 모바일 네비게이션 */
|
|
.mobile-nav {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: rgba(26, 26, 46, 0.95);
|
|
backdrop-filter: blur(20px);
|
|
border-top: 1px solid rgba(255,255,255,0.1);
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 8px 0 24px;
|
|
z-index: 100;
|
|
}
|
|
.nav-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
color: #6b7280;
|
|
font-size: 10px;
|
|
cursor: pointer;
|
|
padding: 8px 16px;
|
|
border-radius: 12px;
|
|
transition: all 0.2s;
|
|
}
|
|
.nav-item.active {
|
|
color: #8b5cf6;
|
|
}
|
|
.nav-item-icon {
|
|
font-size: 22px;
|
|
}
|
|
|
|
/* 스크롤 컨테이너 */
|
|
.scroll-container {
|
|
padding: 16px;
|
|
padding-bottom: 100px;
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* 헤더 */
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
.page-title {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
}
|
|
.version-badge {
|
|
background: rgba(139, 92, 246, 0.2);
|
|
color: #a78bfa;
|
|
padding: 4px 10px;
|
|
border-radius: 12px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
/* 종목 선택 카드 */
|
|
.symbol-card {
|
|
background: linear-gradient(135deg, #2d1b69 0%, #1a1a3e 100%);
|
|
border-radius: 20px;
|
|
padding: 20px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.symbol-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
.symbol-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.symbol-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: linear-gradient(135deg, #f7931a 0%, #ffab00 100%);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
}
|
|
.symbol-name {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
.symbol-market {
|
|
font-size: 12px;
|
|
color: #9ca3af;
|
|
}
|
|
.change-btn {
|
|
padding: 8px 16px;
|
|
background: rgba(255,255,255,0.1);
|
|
border: none;
|
|
border-radius: 10px;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
.price-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
}
|
|
.current-price {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
}
|
|
.price-change {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
}
|
|
.price-change-value {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
.price-change-value.up { color: #10b981; }
|
|
.price-change-value.down { color: #ef4444; }
|
|
.price-change-pct {
|
|
font-size: 12px;
|
|
color: #10b981;
|
|
}
|
|
|
|
/* 빠른 설정 */
|
|
.quick-settings {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 16px;
|
|
overflow-x: auto;
|
|
padding-bottom: 8px;
|
|
}
|
|
.quick-setting-chip {
|
|
flex-shrink: 0;
|
|
padding: 10px 16px;
|
|
background: rgba(255,255,255,0.05);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
border-radius: 12px;
|
|
font-size: 13px;
|
|
color: #9ca3af;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
.quick-setting-chip.active {
|
|
background: rgba(139, 92, 246, 0.2);
|
|
border-color: #8b5cf6;
|
|
color: #a78bfa;
|
|
}
|
|
|
|
/* 성과 그리드 */
|
|
.performance-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.perf-card {
|
|
background: rgba(255,255,255,0.05);
|
|
border-radius: 16px;
|
|
padding: 16px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.perf-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 4px;
|
|
height: 100%;
|
|
}
|
|
.perf-card.profit::after { background: linear-gradient(180deg, #10b981, #059669); }
|
|
.perf-card.loss::after { background: linear-gradient(180deg, #ef4444, #dc2626); }
|
|
.perf-card.neutral::after { background: linear-gradient(180deg, #8b5cf6, #7c3aed); }
|
|
.perf-card.info::after { background: linear-gradient(180deg, #3b82f6, #2563eb); }
|
|
|
|
.perf-label {
|
|
font-size: 11px;
|
|
color: #9ca3af;
|
|
margin-bottom: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.perf-value {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
}
|
|
.perf-value.up { color: #10b981; }
|
|
.perf-value.down { color: #ef4444; }
|
|
.perf-sub {
|
|
font-size: 10px;
|
|
color: #6b7280;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* 대형 성과 카드 */
|
|
.big-perf-card {
|
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.05) 100%);
|
|
border: 1px solid rgba(16, 185, 129, 0.3);
|
|
border-radius: 20px;
|
|
padding: 24px;
|
|
margin-bottom: 16px;
|
|
text-align: center;
|
|
}
|
|
.big-perf-title {
|
|
font-size: 14px;
|
|
color: #9ca3af;
|
|
margin-bottom: 8px;
|
|
}
|
|
.big-perf-value {
|
|
font-size: 48px;
|
|
font-weight: 700;
|
|
color: #10b981;
|
|
margin-bottom: 8px;
|
|
}
|
|
.big-perf-sub {
|
|
font-size: 14px;
|
|
color: #10b981;
|
|
}
|
|
|
|
/* 차트 카드 */
|
|
.chart-card {
|
|
background: rgba(255,255,255,0.05);
|
|
border-radius: 20px;
|
|
padding: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.chart-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
.chart-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
.chart-period-selector {
|
|
display: flex;
|
|
gap: 4px;
|
|
background: rgba(0,0,0,0.2);
|
|
padding: 4px;
|
|
border-radius: 8px;
|
|
}
|
|
.period-btn {
|
|
padding: 6px 10px;
|
|
border: none;
|
|
background: transparent;
|
|
color: #6b7280;
|
|
font-size: 11px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
}
|
|
.period-btn.active {
|
|
background: #8b5cf6;
|
|
color: #fff;
|
|
}
|
|
|
|
/* 미니 캔들차트 */
|
|
.mini-chart {
|
|
height: 180px;
|
|
background: rgba(0,0,0,0.2);
|
|
border-radius: 12px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: 16px;
|
|
}
|
|
.mini-candles {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-around;
|
|
height: 100%;
|
|
gap: 4px;
|
|
}
|
|
.mini-candle {
|
|
width: 10px;
|
|
border-radius: 2px;
|
|
position: relative;
|
|
}
|
|
.mini-candle.up { background: #10b981; }
|
|
.mini-candle.down { background: #ef4444; }
|
|
.mini-signal {
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
}
|
|
.mini-signal.buy {
|
|
bottom: -28px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: rgba(16, 185, 129, 0.3);
|
|
color: #10b981;
|
|
border: 1.5px solid #10b981;
|
|
}
|
|
.mini-signal.sell {
|
|
top: -28px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: rgba(239, 68, 68, 0.3);
|
|
color: #ef4444;
|
|
border: 1.5px solid #ef4444;
|
|
}
|
|
|
|
/* 정확도 섹션 */
|
|
.accuracy-section {
|
|
background: rgba(255,255,255,0.05);
|
|
border-radius: 20px;
|
|
padding: 20px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.accuracy-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
.accuracy-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
.accuracy-value {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #10b981;
|
|
}
|
|
.accuracy-bars {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
.accuracy-bar-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.accuracy-bar-label {
|
|
width: 50px;
|
|
font-size: 12px;
|
|
color: #9ca3af;
|
|
}
|
|
.accuracy-bar-bg {
|
|
flex: 1;
|
|
height: 10px;
|
|
background: rgba(255,255,255,0.1);
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
}
|
|
.accuracy-bar-fill {
|
|
height: 100%;
|
|
border-radius: 5px;
|
|
transition: width 0.5s ease;
|
|
}
|
|
.accuracy-bar-fill.buy { background: linear-gradient(90deg, #10b981, #34d399); }
|
|
.accuracy-bar-fill.sell { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
|
|
.accuracy-bar-pct {
|
|
width: 40px;
|
|
text-align: right;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 거래 내역 */
|
|
.trades-section {
|
|
background: rgba(255,255,255,0.05);
|
|
border-radius: 20px;
|
|
padding: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.trades-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
.trades-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
.trades-view-all {
|
|
font-size: 12px;
|
|
color: #8b5cf6;
|
|
cursor: pointer;
|
|
}
|
|
.trade-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 14px;
|
|
background: rgba(255,255,255,0.03);
|
|
border-radius: 12px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.trade-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
.trade-icon.buy {
|
|
background: rgba(16, 185, 129, 0.2);
|
|
color: #10b981;
|
|
}
|
|
.trade-icon.sell {
|
|
background: rgba(239, 68, 68, 0.2);
|
|
color: #ef4444;
|
|
}
|
|
.trade-details {
|
|
flex: 1;
|
|
}
|
|
.trade-type {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
margin-bottom: 2px;
|
|
}
|
|
.trade-date {
|
|
font-size: 11px;
|
|
color: #6b7280;
|
|
}
|
|
.trade-result {
|
|
text-align: right;
|
|
}
|
|
.trade-price {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
margin-bottom: 2px;
|
|
}
|
|
.trade-pnl {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
.trade-pnl.profit { color: #10b981; }
|
|
.trade-pnl.loss { color: #ef4444; }
|
|
|
|
/* 실행 버튼 */
|
|
.run-button {
|
|
position: fixed;
|
|
bottom: 100px;
|
|
left: 16px;
|
|
right: 16px;
|
|
max-width: 468px;
|
|
margin: 0 auto;
|
|
padding: 18px;
|
|
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
|
|
border: none;
|
|
border-radius: 16px;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
box-shadow: 0 8px 30px rgba(139, 92, 246, 0.4);
|
|
z-index: 99;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
}
|
|
.run-button:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
/* 섹션 제목 */
|
|
.section-title {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #6b7280;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
margin-bottom: 12px;
|
|
margin-top: 8px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="scroll-container">
|
|
<!-- 헤더 -->
|
|
<header class="page-header">
|
|
<h1 class="page-title">백테스트</h1>
|
|
<span class="version-badge">V4 모바일</span>
|
|
</header>
|
|
|
|
<!-- 종목 선택 카드 -->
|
|
<div class="symbol-card">
|
|
<div class="symbol-header">
|
|
<div class="symbol-info">
|
|
<div class="symbol-icon">₿</div>
|
|
<div>
|
|
<div class="symbol-name">BTC/KRW</div>
|
|
<div class="symbol-market">비트코인 · 업비트</div>
|
|
</div>
|
|
</div>
|
|
<button class="change-btn">변경 ▼</button>
|
|
</div>
|
|
<div class="price-row">
|
|
<div class="current-price">₩58,450,000</div>
|
|
<div class="price-change">
|
|
<div class="price-change-value up">+₩1,340,000</div>
|
|
<div class="price-change-pct">+2.34%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 빠른 설정 -->
|
|
<div class="quick-settings">
|
|
<div class="quick-setting-chip active">MACD+RSI</div>
|
|
<div class="quick-setting-chip">볼린저밴드</div>
|
|
<div class="quick-setting-chip">이평선크로스</div>
|
|
<div class="quick-setting-chip">Stochastic</div>
|
|
</div>
|
|
|
|
<div class="quick-settings">
|
|
<div class="quick-setting-chip">15분</div>
|
|
<div class="quick-setting-chip active">1시간</div>
|
|
<div class="quick-setting-chip">4시간</div>
|
|
<div class="quick-setting-chip">일봉</div>
|
|
</div>
|
|
|
|
<!-- 대형 수익률 카드 -->
|
|
<div class="big-perf-card">
|
|
<div class="big-perf-title">💰 총 수익률</div>
|
|
<div class="big-perf-value">+23.5%</div>
|
|
<div class="big-perf-sub">₩10,000,000 → ₩12,350,000</div>
|
|
</div>
|
|
|
|
<!-- 성과 그리드 -->
|
|
<div class="performance-grid">
|
|
<div class="perf-card neutral">
|
|
<div class="perf-label">🎯 승률</div>
|
|
<div class="perf-value">68%</div>
|
|
<div class="perf-sub">17승 8패</div>
|
|
</div>
|
|
<div class="perf-card info">
|
|
<div class="perf-label">🔄 총 거래</div>
|
|
<div class="perf-value">25</div>
|
|
<div class="perf-sub">매수 13 / 매도 12</div>
|
|
</div>
|
|
<div class="perf-card profit">
|
|
<div class="perf-label">⚡ 평균 수익</div>
|
|
<div class="perf-value up">+₩94K</div>
|
|
<div class="perf-sub">거래당</div>
|
|
</div>
|
|
<div class="perf-card loss">
|
|
<div class="perf-label">📉 최대 낙폭</div>
|
|
<div class="perf-value down">-8.2%</div>
|
|
<div class="perf-sub">2024.01.15</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 미니 차트 -->
|
|
<div class="section-title">📈 차트 분석</div>
|
|
<div class="chart-card">
|
|
<div class="chart-header">
|
|
<span class="chart-title">가격 & 매매 시점</span>
|
|
<div class="chart-period-selector">
|
|
<button class="period-btn">1W</button>
|
|
<button class="period-btn active">1M</button>
|
|
<button class="period-btn">3M</button>
|
|
</div>
|
|
</div>
|
|
<div class="mini-chart">
|
|
<div class="mini-candles">
|
|
<div class="mini-candle up" style="height: 40px;"></div>
|
|
<div class="mini-candle up" style="height: 55px;"></div>
|
|
<div class="mini-candle down" style="height: 35px;"></div>
|
|
<div class="mini-candle down" style="height: 50px;"><div class="mini-signal buy">B</div></div>
|
|
<div class="mini-candle up" style="height: 60px;"></div>
|
|
<div class="mini-candle up" style="height: 80px;"></div>
|
|
<div class="mini-candle up" style="height: 70px;"></div>
|
|
<div class="mini-candle down" style="height: 45px;"><div class="mini-signal sell">S</div></div>
|
|
<div class="mini-candle down" style="height: 55px;"></div>
|
|
<div class="mini-candle up" style="height: 50px;"></div>
|
|
<div class="mini-candle down" style="height: 35px;"><div class="mini-signal buy">B</div></div>
|
|
<div class="mini-candle up" style="height: 60px;"></div>
|
|
<div class="mini-candle up" style="height: 75px;"></div>
|
|
<div class="mini-candle up" style="height: 85px;"></div>
|
|
<div class="mini-candle down" style="height: 40px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 정확도 섹션 -->
|
|
<div class="section-title">🎯 전략 정확도</div>
|
|
<div class="accuracy-section">
|
|
<div class="accuracy-header">
|
|
<span class="accuracy-title">예측 정확도</span>
|
|
<span class="accuracy-value">70%</span>
|
|
</div>
|
|
<div class="accuracy-bars">
|
|
<div class="accuracy-bar-item">
|
|
<span class="accuracy-bar-label">매수</span>
|
|
<div class="accuracy-bar-bg">
|
|
<div class="accuracy-bar-fill buy" style="width: 76%;"></div>
|
|
</div>
|
|
<span class="accuracy-bar-pct" style="color: #10b981;">76%</span>
|
|
</div>
|
|
<div class="accuracy-bar-item">
|
|
<span class="accuracy-bar-label">매도</span>
|
|
<div class="accuracy-bar-bg">
|
|
<div class="accuracy-bar-fill sell" style="width: 64%;"></div>
|
|
</div>
|
|
<span class="accuracy-bar-pct" style="color: #f59e0b;">64%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 거래 내역 -->
|
|
<div class="section-title">📋 최근 거래</div>
|
|
<div class="trades-section">
|
|
<div class="trades-header">
|
|
<span class="trades-title">거래 내역</span>
|
|
<span class="trades-view-all">전체보기 →</span>
|
|
</div>
|
|
<div class="trade-item">
|
|
<div class="trade-icon sell">S</div>
|
|
<div class="trade-details">
|
|
<div class="trade-type">매도</div>
|
|
<div class="trade-date">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-details">
|
|
<div class="trade-type">매수</div>
|
|
<div class="trade-date">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-details">
|
|
<div class="trade-type">매도</div>
|
|
<div class="trade-date">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 class="trade-item">
|
|
<div class="trade-icon buy">B</div>
|
|
<div class="trade-details">
|
|
<div class="trade-type">매수</div>
|
|
<div class="trade-date">2024.03.05 11:00</div>
|
|
</div>
|
|
<div class="trade-result">
|
|
<div class="trade-price">₩55,350,000</div>
|
|
<div class="trade-pnl">-</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 실행 버튼 -->
|
|
<button class="run-button">
|
|
<span>▶</span> 백테스트 실행
|
|
</button>
|
|
|
|
<!-- 모바일 네비게이션 -->
|
|
<nav class="mobile-nav">
|
|
<div class="nav-item">
|
|
<span class="nav-item-icon">🏠</span>
|
|
<span>홈</span>
|
|
</div>
|
|
<div class="nav-item">
|
|
<span class="nav-item-icon">📊</span>
|
|
<span>차트</span>
|
|
</div>
|
|
<div class="nav-item active">
|
|
<span class="nav-item-icon">🎯</span>
|
|
<span>백테스트</span>
|
|
</div>
|
|
<div class="nav-item">
|
|
<span class="nav-item-icon">📋</span>
|
|
<span>거래내역</span>
|
|
</div>
|
|
<div class="nav-item">
|
|
<span class="nav-item-icon">⚙️</span>
|
|
<span>설정</span>
|
|
</div>
|
|
</nav>
|
|
</body>
|
|
</html>
|