aidev
554 lines
15 KiB
HTML
554 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-02 분석 리포트</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;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: #f1f5f9;
|
|
min-height: 100vh;
|
|
padding: 24px;
|
|
}
|
|
|
|
/* 헤더 */
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
.header-title {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
}
|
|
.header-subtitle {
|
|
color: #94a3b8;
|
|
font-size: 14px;
|
|
margin-top: 4px;
|
|
}
|
|
.header-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
.badge {
|
|
background: rgba(59, 130, 246, 0.15);
|
|
color: #3b82f6;
|
|
padding: 8px 16px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
}
|
|
.btn {
|
|
background: #3b82f6;
|
|
color: #fff;
|
|
border: none;
|
|
padding: 12px 24px;
|
|
border-radius: 12px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 설정 카드 */
|
|
.settings-card {
|
|
background: #1e293b;
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
margin-bottom: 24px;
|
|
border: 1px solid #334155;
|
|
}
|
|
.settings-title {
|
|
font-size: 13px;
|
|
color: #94a3b8;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.settings-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 16px;
|
|
}
|
|
.settings-item label {
|
|
display: block;
|
|
font-size: 11px;
|
|
color: #64748b;
|
|
margin-bottom: 6px;
|
|
}
|
|
.settings-item select,
|
|
.settings-item input {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
background: #0f172a;
|
|
border: 1px solid #334155;
|
|
border-radius: 8px;
|
|
color: #f1f5f9;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* 메트릭 그리드 */
|
|
.metrics-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.metric-card {
|
|
background: #1e293b;
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
border: 1px solid #334155;
|
|
}
|
|
.metric-card.highlight {
|
|
background: rgba(34, 197, 94, 0.1);
|
|
border-color: rgba(34, 197, 94, 0.3);
|
|
}
|
|
.metric-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.metric-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
}
|
|
.metric-icon.green { background: rgba(34, 197, 94, 0.2); }
|
|
.metric-icon.blue { background: rgba(59, 130, 246, 0.2); }
|
|
.metric-icon.purple { background: rgba(139, 92, 246, 0.2); }
|
|
.metric-icon.cyan { background: rgba(14, 165, 233, 0.2); }
|
|
.metric-label {
|
|
font-size: 12px;
|
|
color: #94a3b8;
|
|
}
|
|
.metric-value {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
}
|
|
.metric-value.green { color: #22c55e; }
|
|
.metric-value.purple { color: #8b5cf6; }
|
|
|
|
/* 메인 그리드 */
|
|
.main-grid {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr;
|
|
gap: 24px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
/* 차트 카드 */
|
|
.chart-card {
|
|
background: #1e293b;
|
|
border-radius: 16px;
|
|
border: 1px solid #334155;
|
|
overflow: hidden;
|
|
}
|
|
.chart-header {
|
|
padding: 16px;
|
|
border-bottom: 1px solid #334155;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.chart-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
.chart-controls {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
.chart-controls button {
|
|
background: none;
|
|
border: none;
|
|
color: #94a3b8;
|
|
cursor: pointer;
|
|
padding: 4px 8px;
|
|
}
|
|
.chart-controls .chip {
|
|
background: #334155;
|
|
color: #f1f5f9;
|
|
padding: 6px 12px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
}
|
|
.chart-area {
|
|
height: 320px;
|
|
background: #0f172a;
|
|
position: relative;
|
|
}
|
|
.chart-grid {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
linear-gradient(90deg, rgba(51, 65, 85, 0.3) 1px, transparent 1px),
|
|
linear-gradient(rgba(51, 65, 85, 0.3) 1px, transparent 1px);
|
|
background-size: 60px 40px;
|
|
}
|
|
.candles {
|
|
position: absolute;
|
|
inset: 30px 40px 40px 20px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-around;
|
|
}
|
|
.candle {
|
|
width: 14px;
|
|
border-radius: 2px;
|
|
}
|
|
.candle.up { background: #22c55e; }
|
|
.candle.down { background: #ef4444; }
|
|
|
|
/* 사이드 카드 */
|
|
.side-cards {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
.side-card {
|
|
background: #1e293b;
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
border: 1px solid #334155;
|
|
}
|
|
.side-card-title {
|
|
font-size: 13px;
|
|
color: #94a3b8;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* 프로그레스 바 */
|
|
.progress-item {
|
|
margin-bottom: 12px;
|
|
}
|
|
.progress-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 12px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.progress-header span:first-child { color: #94a3b8; }
|
|
.progress-bar {
|
|
height: 8px;
|
|
background: #0f172a;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.progress-fill {
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
}
|
|
.progress-fill.purple { background: #8b5cf6; }
|
|
.progress-fill.green { background: #22c55e; }
|
|
.progress-fill.red { background: #ef4444; }
|
|
|
|
/* 자산 현황 */
|
|
.asset-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 8px 0;
|
|
font-size: 13px;
|
|
}
|
|
.asset-row span:first-child { color: #94a3b8; }
|
|
.asset-row span:last-child { font-weight: 500; }
|
|
.asset-row.green span:last-child { color: #22c55e; }
|
|
.asset-row.red span:last-child { color: #ef4444; }
|
|
|
|
/* 통계 그리드 */
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12px;
|
|
}
|
|
.stat-box {
|
|
text-align: center;
|
|
padding: 12px;
|
|
background: #0f172a;
|
|
border-radius: 12px;
|
|
}
|
|
.stat-value {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
}
|
|
.stat-value.green { color: #22c55e; }
|
|
.stat-value.red { color: #ef4444; }
|
|
.stat-label {
|
|
font-size: 11px;
|
|
color: #64748b;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* 테이블 */
|
|
.table-card {
|
|
background: #1e293b;
|
|
border-radius: 16px;
|
|
border: 1px solid #334155;
|
|
overflow: hidden;
|
|
}
|
|
.table-header {
|
|
padding: 16px;
|
|
border-bottom: 1px solid #334155;
|
|
}
|
|
.table-header h3 {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
th {
|
|
padding: 12px 16px;
|
|
text-align: left;
|
|
font-size: 11px;
|
|
color: #64748b;
|
|
background: #0f172a;
|
|
font-weight: 600;
|
|
}
|
|
th:nth-child(3), th:nth-child(4), th:nth-child(5) { text-align: right; }
|
|
td {
|
|
padding: 12px 16px;
|
|
font-size: 12px;
|
|
border-bottom: 1px solid #334155;
|
|
}
|
|
td:nth-child(3), td:nth-child(4), td:nth-child(5) { text-align: right; }
|
|
tr:hover { background: rgba(59, 130, 246, 0.05); }
|
|
.type-badge {
|
|
display: inline-block;
|
|
padding: 4px 10px;
|
|
border-radius: 12px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
.type-badge.buy { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
|
|
.type-badge.sell { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 헤더 -->
|
|
<div class="header">
|
|
<div>
|
|
<h1 class="header-title">📊 투자 분석 리포트</h1>
|
|
<p class="header-subtitle">KRW-BTC • MACD + RSI 전략 • 2024년 12월 7일</p>
|
|
</div>
|
|
<div class="header-actions">
|
|
<span class="badge">PC-02 분석리포트</span>
|
|
<button class="btn">▶ 백테스트 실행</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 설정 카드 -->
|
|
<div class="settings-card">
|
|
<div class="settings-title">분석 설정</div>
|
|
<div class="settings-grid">
|
|
<div class="settings-item">
|
|
<label>종목</label>
|
|
<select><option>KRW-BTC</option></select>
|
|
</div>
|
|
<div class="settings-item">
|
|
<label>투자 전략</label>
|
|
<select><option>MACD + RSI</option></select>
|
|
</div>
|
|
<div class="settings-item">
|
|
<label>시간봉</label>
|
|
<select><option>1시간</option></select>
|
|
</div>
|
|
<div class="settings-item">
|
|
<label>분석 기간</label>
|
|
<input type="number" value="500">
|
|
</div>
|
|
<div class="settings-item">
|
|
<label>초기 투자금</label>
|
|
<input type="text" value="₩10,000,000">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 메트릭 그리드 -->
|
|
<div class="metrics-grid">
|
|
<div class="metric-card highlight">
|
|
<div class="metric-header">
|
|
<div class="metric-icon green">📈</div>
|
|
<span class="metric-label">총 수익률</span>
|
|
</div>
|
|
<div class="metric-value green">+23.45%</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-header">
|
|
<div class="metric-icon blue">💰</div>
|
|
<span class="metric-label">순이익</span>
|
|
</div>
|
|
<div class="metric-value green">+₩234만</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-header">
|
|
<div class="metric-icon purple">🎯</div>
|
|
<span class="metric-label">승률</span>
|
|
</div>
|
|
<div class="metric-value purple">68.5%</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-header">
|
|
<div class="metric-icon cyan">🔄</div>
|
|
<span class="metric-label">총 거래</span>
|
|
</div>
|
|
<div class="metric-value">27회</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 메인 그리드 -->
|
|
<div class="main-grid">
|
|
<!-- 차트 카드 -->
|
|
<div class="chart-card">
|
|
<div class="chart-header">
|
|
<span class="chart-title">📈 가격 차트 & 매매 신호</span>
|
|
<div class="chart-controls">
|
|
<button>◀</button>
|
|
<span class="chip">1h</span>
|
|
<button>▶</button>
|
|
</div>
|
|
</div>
|
|
<div class="chart-area">
|
|
<div class="chart-grid"></div>
|
|
<div class="candles">
|
|
<div class="candle up" style="height: 60px;"></div>
|
|
<div class="candle up" style="height: 80px;"></div>
|
|
<div class="candle down" style="height: 50px;"></div>
|
|
<div class="candle down" style="height: 70px;"></div>
|
|
<div class="candle up" style="height: 90px;"></div>
|
|
<div class="candle up" style="height: 110px;"></div>
|
|
<div class="candle up" style="height: 100px;"></div>
|
|
<div class="candle down" style="height: 65px;"></div>
|
|
<div class="candle down" style="height: 80px;"></div>
|
|
<div class="candle up" style="height: 70px;"></div>
|
|
<div class="candle up" style="height: 85px;"></div>
|
|
<div class="candle up" style="height: 95px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 사이드 카드 -->
|
|
<div class="side-cards">
|
|
<div class="side-card">
|
|
<div class="side-card-title">정확도 분석</div>
|
|
<div class="progress-item">
|
|
<div class="progress-header">
|
|
<span>전체 정확도</span>
|
|
<span style="color: #8b5cf6; font-weight: 600;">68.5%</span>
|
|
</div>
|
|
<div class="progress-bar"><div class="progress-fill purple" style="width: 68.5%;"></div></div>
|
|
</div>
|
|
<div class="progress-item">
|
|
<div class="progress-header">
|
|
<span>매수 정확도</span>
|
|
<span style="color: #22c55e; font-weight: 600;">72%</span>
|
|
</div>
|
|
<div class="progress-bar"><div class="progress-fill green" style="width: 72%;"></div></div>
|
|
</div>
|
|
<div class="progress-item">
|
|
<div class="progress-header">
|
|
<span>매도 정확도</span>
|
|
<span style="color: #ef4444; font-weight: 600;">65%</span>
|
|
</div>
|
|
<div class="progress-bar"><div class="progress-fill red" style="width: 65%;"></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="side-card">
|
|
<div class="side-card-title">자산 현황</div>
|
|
<div class="asset-row">
|
|
<span>초기 투자금</span>
|
|
<span>₩10,000,000</span>
|
|
</div>
|
|
<div class="asset-row">
|
|
<span>최종 자산</span>
|
|
<span>₩12,345,000</span>
|
|
</div>
|
|
<div class="asset-row green">
|
|
<span>최대 수익</span>
|
|
<span>₩3,200,000</span>
|
|
</div>
|
|
<div class="asset-row red">
|
|
<span>최대 손실</span>
|
|
<span>₩-850,000</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="side-card">
|
|
<div class="side-card-title">거래 통계</div>
|
|
<div class="stats-grid">
|
|
<div class="stat-box">
|
|
<div class="stat-value green">18</div>
|
|
<div class="stat-label">수익 거래</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-value red">9</div>
|
|
<div class="stat-label">손실 거래</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 거래 내역 테이블 -->
|
|
<div class="table-card">
|
|
<div class="table-header">
|
|
<h3>📋 거래 내역</h3>
|
|
</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>유형</th>
|
|
<th>시간</th>
|
|
<th>가격</th>
|
|
<th>수량</th>
|
|
<th>손익</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><span class="type-badge sell">매도</span></td>
|
|
<td style="color: #94a3b8;">2024-12-07 14:00</td>
|
|
<td>₩58,450,000</td>
|
|
<td style="color: #94a3b8;">0.142857</td>
|
|
<td style="color: #22c55e; font-weight: 600;">+₩520,000</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="type-badge buy">매수</span></td>
|
|
<td style="color: #94a3b8;">2024-12-05 09:00</td>
|
|
<td>₩55,520,000</td>
|
|
<td style="color: #94a3b8;">0.142857</td>
|
|
<td style="color: #64748b;">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="type-badge sell">매도</span></td>
|
|
<td style="color: #94a3b8;">2024-12-03 16:00</td>
|
|
<td>₩54,200,000</td>
|
|
<td style="color: #94a3b8;">0.156250</td>
|
|
<td style="color: #ef4444; font-weight: 600;">-₩180,000</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="type-badge buy">매수</span></td>
|
|
<td style="color: #94a3b8;">2024-12-01 11:00</td>
|
|
<td>₩55,350,000</td>
|
|
<td style="color: #94a3b8;">0.156250</td>
|
|
<td style="color: #64748b;">-</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</body>
|
|
</html>
|