goldenChat base source add
This commit is contained in:
aidev
@@ -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>
|
||||
Reference in New Issue
Block a user