goldenChat base source add
This commit is contained in:
aidev
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" fill="#1976d2"/>
|
||||
<text x="16" y="22" font-size="18" fill="white" text-anchor="middle" font-family="sans-serif">G</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 221 B |
@@ -0,0 +1,63 @@
|
||||
/**
|
||||
* Firebase Cloud Messaging Service Worker
|
||||
* - 브라우저 종료 시에도 푸시 알림 수신
|
||||
* - REACT_APP_FIREBASE_* 환경 변수로 설정 (빌드 시 주입)
|
||||
*
|
||||
* 설정 방법:
|
||||
* 1. Firebase Console에서 프로젝트 생성
|
||||
* 2. Cloud Messaging 활성화, VAPID 키 발급
|
||||
* 3. .env에 REACT_APP_FIREBASE_VAPID_KEY 등 설정
|
||||
* 4. 이 파일이 public/에 있으면 빌드 시 복사됨
|
||||
*/
|
||||
importScripts('https://www.gstatic.com/firebasejs/10.7.1/firebase-app-compat.js');
|
||||
importScripts('https://www.gstatic.com/firebasejs/10.7.1/firebase-messaging-compat.js');
|
||||
|
||||
// Firebase 설정 - 빌드 시 환경 변수로 치환되거나, 수동 설정
|
||||
const firebaseConfig = {
|
||||
apiKey: 'YOUR_API_KEY',
|
||||
authDomain: 'YOUR_PROJECT.firebaseapp.com',
|
||||
projectId: 'YOUR_PROJECT_ID',
|
||||
storageBucket: 'YOUR_PROJECT.appspot.com',
|
||||
messagingSenderId: 'YOUR_SENDER_ID',
|
||||
appId: 'YOUR_APP_ID',
|
||||
};
|
||||
|
||||
if (firebaseConfig.apiKey && firebaseConfig.apiKey !== 'YOUR_API_KEY') {
|
||||
firebase.initializeApp(firebaseConfig);
|
||||
const messaging = firebase.messaging();
|
||||
|
||||
messaging.onBackgroundMessage((payload) => {
|
||||
console.log('[firebase-messaging-sw] Received background message:', payload);
|
||||
|
||||
const notificationTitle = payload.notification?.title || '골든 애널리시스';
|
||||
const notificationOptions = {
|
||||
body: payload.notification?.body || payload.data?.message || '새 알림이 도착했습니다.',
|
||||
icon: '/favicon.ico',
|
||||
badge: '/favicon.ico',
|
||||
tag: 'golden-analysis-fcm',
|
||||
data: payload.data || {},
|
||||
requireInteraction: false,
|
||||
};
|
||||
|
||||
return self.registration.showNotification(notificationTitle, notificationOptions);
|
||||
});
|
||||
|
||||
self.addEventListener('notificationclick', (event) => {
|
||||
event.notification.close();
|
||||
const data = event.notification.data || {};
|
||||
const url = data.page || '/#/alerts';
|
||||
event.waitUntil(
|
||||
clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clientList) => {
|
||||
for (const client of clientList) {
|
||||
if (client.url.includes(self.location.origin) && 'focus' in client) {
|
||||
client.navigate(url);
|
||||
return client.focus();
|
||||
}
|
||||
}
|
||||
if (clients.openWindow) {
|
||||
return clients.openWindow(self.location.origin + (url.startsWith('/') ? url : '/' + url));
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<meta name="theme-color" content="#1976d2" />
|
||||
<meta name="description" content="Golden Analysis - 투자전략 성능 분석 프로그램" />
|
||||
|
||||
<!-- 캐시 무효화 -->
|
||||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
||||
<meta http-equiv="Pragma" content="no-cache" />
|
||||
<meta http-equiv="Expires" content="0" />
|
||||
|
||||
<!-- 빌드 버전 (캐시 식별용) -->
|
||||
<meta name="build-time" content="%REACT_APP_BUILD_TIME%" />
|
||||
<meta name="cache-bust" content="%REACT_APP_CACHE_BUST%" />
|
||||
|
||||
<title>Golden Analysis</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
|
||||
<!-- ✅ Service Worker 제거 (개발 중 캐시 문제 방지) -->
|
||||
<script>
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.getRegistrations().then(function(registrations) {
|
||||
for (let registration of registrations) {
|
||||
registration.unregister();
|
||||
console.log('🗑️ Service Worker 제거됨:', registration);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 빌드 버전 콘솔 출력
|
||||
const buildTime = document.querySelector('meta[name="build-time"]')?.getAttribute('content');
|
||||
const cacheBust = document.querySelector('meta[name="cache-bust"]')?.getAttribute('content');
|
||||
console.log('🔨 빌드 시간:', buildTime || 'unknown');
|
||||
console.log('🔨 캐시 버스트:', cacheBust || 'unknown');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,242 @@
|
||||
/**
|
||||
* 보조지표 계산 Web Worker
|
||||
* - 메인 스레드를 차단하지 않고 지표 계산
|
||||
* - 복잡한 계산(MA, RSI, MACD 등)을 백그라운드에서 처리
|
||||
*/
|
||||
|
||||
self.addEventListener('message', (event) => {
|
||||
const { type, data } = event.data;
|
||||
|
||||
try {
|
||||
switch (type) {
|
||||
case 'CALCULATE_MA':
|
||||
const maResult = calculateMA(data.candles, data.periods);
|
||||
self.postMessage({ type: 'MA_RESULT', data: maResult });
|
||||
break;
|
||||
|
||||
case 'CALCULATE_RSI':
|
||||
const rsiResult = calculateRSI(data.candles, data.period);
|
||||
self.postMessage({ type: 'RSI_RESULT', data: rsiResult });
|
||||
break;
|
||||
|
||||
case 'CALCULATE_MACD':
|
||||
const macdResult = calculateMACD(data.candles, data.fastPeriod, data.slowPeriod, data.signalPeriod);
|
||||
self.postMessage({ type: 'MACD_RESULT', data: macdResult });
|
||||
break;
|
||||
|
||||
case 'CALCULATE_STOCHASTIC':
|
||||
const stochResult = calculateStochastic(data.candles, data.kPeriod, data.dPeriod);
|
||||
self.postMessage({ type: 'STOCHASTIC_RESULT', data: stochResult });
|
||||
break;
|
||||
|
||||
case 'CALCULATE_ALL':
|
||||
const allResults = calculateAllIndicators(data.candles, data.config);
|
||||
self.postMessage({ type: 'ALL_RESULT', data: allResults });
|
||||
break;
|
||||
|
||||
default:
|
||||
self.postMessage({ type: 'ERROR', error: 'Unknown command' });
|
||||
}
|
||||
} catch (error) {
|
||||
self.postMessage({ type: 'ERROR', error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 이동평균선 계산
|
||||
*/
|
||||
function calculateMA(candles, periods) {
|
||||
const results = {};
|
||||
|
||||
periods.forEach(period => {
|
||||
const ma = [];
|
||||
for (let i = 0; i < candles.length; i++) {
|
||||
if (i < period - 1) {
|
||||
ma.push(null);
|
||||
} else {
|
||||
let sum = 0;
|
||||
for (let j = 0; j < period; j++) {
|
||||
sum += candles[i - j].close;
|
||||
}
|
||||
ma.push(sum / period);
|
||||
}
|
||||
}
|
||||
results[`ma${period}`] = ma;
|
||||
});
|
||||
|
||||
return results;
|
||||
}
|
||||
|
||||
/**
|
||||
* RSI 계산
|
||||
*/
|
||||
function calculateRSI(candles, period = 14) {
|
||||
const rsi = [];
|
||||
const gains = [];
|
||||
const losses = [];
|
||||
|
||||
for (let i = 0; i < candles.length; i++) {
|
||||
if (i === 0) {
|
||||
rsi.push(null);
|
||||
continue;
|
||||
}
|
||||
|
||||
const change = candles[i].close - candles[i - 1].close;
|
||||
gains.push(change > 0 ? change : 0);
|
||||
losses.push(change < 0 ? Math.abs(change) : 0);
|
||||
|
||||
if (i < period) {
|
||||
rsi.push(null);
|
||||
continue;
|
||||
}
|
||||
|
||||
const avgGain = gains.slice(-period).reduce((a, b) => a + b, 0) / period;
|
||||
const avgLoss = losses.slice(-period).reduce((a, b) => a + b, 0) / period;
|
||||
|
||||
if (avgLoss === 0) {
|
||||
rsi.push(100);
|
||||
} else {
|
||||
const rs = avgGain / avgLoss;
|
||||
rsi.push(100 - (100 / (1 + rs)));
|
||||
}
|
||||
}
|
||||
|
||||
return rsi;
|
||||
}
|
||||
|
||||
/**
|
||||
* MACD 계산
|
||||
*/
|
||||
function calculateMACD(candles, fastPeriod = 12, slowPeriod = 26, signalPeriod = 9) {
|
||||
// EMA 계산 헬퍼
|
||||
const calculateEMA = (values, period) => {
|
||||
const ema = [];
|
||||
const multiplier = 2 / (period + 1);
|
||||
|
||||
for (let i = 0; i < values.length; i++) {
|
||||
if (i < period - 1) {
|
||||
ema.push(null);
|
||||
} else if (i === period - 1) {
|
||||
const sum = values.slice(0, period).reduce((a, b) => a + b, 0);
|
||||
ema.push(sum / period);
|
||||
} else {
|
||||
const value = (values[i] - ema[i - 1]) * multiplier + ema[i - 1];
|
||||
ema.push(value);
|
||||
}
|
||||
}
|
||||
|
||||
return ema;
|
||||
};
|
||||
|
||||
const closes = candles.map(c => c.close);
|
||||
const fastEMA = calculateEMA(closes, fastPeriod);
|
||||
const slowEMA = calculateEMA(closes, slowPeriod);
|
||||
|
||||
const macdLine = [];
|
||||
for (let i = 0; i < candles.length; i++) {
|
||||
if (fastEMA[i] === null || slowEMA[i] === null) {
|
||||
macdLine.push(null);
|
||||
} else {
|
||||
macdLine.push(fastEMA[i] - slowEMA[i]);
|
||||
}
|
||||
}
|
||||
|
||||
const signalLine = calculateEMA(
|
||||
macdLine.map(v => v === null ? 0 : v),
|
||||
signalPeriod
|
||||
);
|
||||
|
||||
const histogram = [];
|
||||
for (let i = 0; i < candles.length; i++) {
|
||||
if (macdLine[i] === null || signalLine[i] === null) {
|
||||
histogram.push(null);
|
||||
} else {
|
||||
histogram.push(macdLine[i] - signalLine[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return { macdLine, signalLine, histogram };
|
||||
}
|
||||
|
||||
/**
|
||||
* Stochastic 계산
|
||||
*/
|
||||
function calculateStochastic(candles, kPeriod = 14, dPeriod = 3) {
|
||||
const stochK = [];
|
||||
|
||||
for (let i = 0; i < candles.length; i++) {
|
||||
if (i < kPeriod - 1) {
|
||||
stochK.push(null);
|
||||
continue;
|
||||
}
|
||||
|
||||
const slice = candles.slice(i - kPeriod + 1, i + 1);
|
||||
const highest = Math.max(...slice.map(c => c.high));
|
||||
const lowest = Math.min(...slice.map(c => c.low));
|
||||
const current = candles[i].close;
|
||||
|
||||
if (highest === lowest) {
|
||||
stochK.push(50);
|
||||
} else {
|
||||
stochK.push(((current - lowest) / (highest - lowest)) * 100);
|
||||
}
|
||||
}
|
||||
|
||||
// %D 계산 (K의 이동평균)
|
||||
const stochD = [];
|
||||
for (let i = 0; i < stochK.length; i++) {
|
||||
if (i < dPeriod - 1 || stochK[i] === null) {
|
||||
stochD.push(null);
|
||||
} else {
|
||||
const sum = stochK.slice(i - dPeriod + 1, i + 1).reduce((a, b) => a + (b || 0), 0);
|
||||
stochD.push(sum / dPeriod);
|
||||
}
|
||||
}
|
||||
|
||||
return { stochK, stochD };
|
||||
}
|
||||
|
||||
/**
|
||||
* 모든 지표 한 번에 계산
|
||||
*/
|
||||
function calculateAllIndicators(candles, config) {
|
||||
const results = {};
|
||||
|
||||
// MA
|
||||
if (config.maPeriods && config.maPeriods.length > 0) {
|
||||
Object.assign(results, calculateMA(candles, config.maPeriods));
|
||||
}
|
||||
|
||||
// RSI
|
||||
if (config.rsi) {
|
||||
results.rsi = calculateRSI(candles, config.rsiPeriod || 14);
|
||||
}
|
||||
|
||||
// MACD
|
||||
if (config.macd) {
|
||||
const macd = calculateMACD(
|
||||
candles,
|
||||
config.macdFastPeriod || 12,
|
||||
config.macdSlowPeriod || 26,
|
||||
config.macdSignalPeriod || 9
|
||||
);
|
||||
results.macdLine = macd.macdLine;
|
||||
results.macdSignal = macd.signalLine;
|
||||
results.macdHistogram = macd.histogram;
|
||||
}
|
||||
|
||||
// Stochastic
|
||||
if (config.stochastic) {
|
||||
const stoch = calculateStochastic(
|
||||
candles,
|
||||
config.stochasticKPeriod || 14,
|
||||
config.stochasticDPeriod || 3
|
||||
);
|
||||
results.stochasticK = stoch.stochK;
|
||||
results.stochasticD = stoch.stochD;
|
||||
}
|
||||
|
||||
return results;
|
||||
}
|
||||
|
||||
console.log('📊 Indicator Worker initialized');
|
||||
@@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>WebSocket Connection Test</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@stomp/stompjs@7/bundles/stomp.umd.min.js"></script>
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; padding: 20px; }
|
||||
#status { padding: 10px; margin: 10px 0; border-radius: 5px; }
|
||||
.connected { background: #4caf50; color: white; }
|
||||
.disconnected { background: #f44336; color: white; }
|
||||
.connecting { background: #ff9800; color: white; }
|
||||
#messages { border: 1px solid #ccc; padding: 10px; height: 400px; overflow-y: auto; }
|
||||
.message { padding: 5px; border-bottom: 1px solid #eee; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>🔌 WebSocket 연결 테스트</h1>
|
||||
<div id="status" class="connecting">연결 중...</div>
|
||||
<div>
|
||||
<strong>WebSocket URL:</strong> <span id="ws-url"></span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>구독 토픽:</strong> /topic/candles/KRW-BTC/1m
|
||||
</div>
|
||||
<hr>
|
||||
<h2>📨 수신 메시지</h2>
|
||||
<div id="messages"></div>
|
||||
|
||||
<script>
|
||||
// 현재 페이지의 프로토콜에 맞게 URL 생성
|
||||
const protocol = window.location.protocol; // 'http:' or 'https:'
|
||||
const host = window.location.host;
|
||||
const WS_URL = `${protocol}//${host}/ws`;
|
||||
|
||||
document.getElementById('ws-url').textContent = WS_URL;
|
||||
console.log('🔗 Connecting to:', WS_URL);
|
||||
|
||||
const client = new StompJs.Client({
|
||||
webSocketFactory: () => new SockJS(WS_URL),
|
||||
debug: (str) => {
|
||||
console.log('[STOMP Debug]', str);
|
||||
},
|
||||
reconnectDelay: 5000,
|
||||
heartbeatIncoming: 4000,
|
||||
heartbeatOutgoing: 4000,
|
||||
});
|
||||
|
||||
client.onConnect = (frame) => {
|
||||
console.log('✅ Connected:', frame);
|
||||
document.getElementById('status').className = 'connected';
|
||||
document.getElementById('status').textContent = '✅ 연결됨 - ' + new Date().toLocaleTimeString();
|
||||
|
||||
// KRW-BTC 1분봉 구독
|
||||
const subscription = client.subscribe('/topic/candles/KRW-BTC/1m', (message) => {
|
||||
console.log('📨 Message received:', message.body);
|
||||
|
||||
try {
|
||||
const data = JSON.parse(message.body);
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.className = 'message';
|
||||
div.innerHTML = `
|
||||
<strong>[${new Date().toLocaleTimeString()}]</strong>
|
||||
${data.market} ${data.interval}:
|
||||
${data.candles.length} candle(s),
|
||||
type: ${data.type},
|
||||
price: ${data.candles[0]?.close || 'N/A'}
|
||||
`;
|
||||
document.getElementById('messages').prepend(div);
|
||||
} catch (e) {
|
||||
console.error('Failed to parse message:', e);
|
||||
}
|
||||
});
|
||||
|
||||
console.log('✅ Subscribed to /topic/candles/KRW-BTC/1m');
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.className = 'message';
|
||||
div.innerHTML = `<strong>[${new Date().toLocaleTimeString()}]</strong> ✅ 구독 완료: /topic/candles/KRW-BTC/1m`;
|
||||
document.getElementById('messages').prepend(div);
|
||||
};
|
||||
|
||||
client.onDisconnect = () => {
|
||||
console.log('🔌 Disconnected');
|
||||
document.getElementById('status').className = 'disconnected';
|
||||
document.getElementById('status').textContent = '🔌 연결 끊김 - ' + new Date().toLocaleTimeString();
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.className = 'message';
|
||||
div.innerHTML = `<strong>[${new Date().toLocaleTimeString()}]</strong> 🔌 연결 끊김`;
|
||||
document.getElementById('messages').prepend(div);
|
||||
};
|
||||
|
||||
client.onStompError = (frame) => {
|
||||
console.error('❌ STOMP Error:', frame);
|
||||
document.getElementById('status').className = 'disconnected';
|
||||
document.getElementById('status').textContent = '❌ 오류: ' + (frame.headers.message || 'Unknown error');
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.className = 'message';
|
||||
div.innerHTML = `<strong>[${new Date().toLocaleTimeString()}]</strong> ❌ 오류: ${frame.headers.message || 'Unknown'}`;
|
||||
document.getElementById('messages').prepend(div);
|
||||
};
|
||||
|
||||
client.onWebSocketError = (event) => {
|
||||
console.error('❌ WebSocket Error:', event);
|
||||
document.getElementById('status').className = 'disconnected';
|
||||
document.getElementById('status').textContent = '❌ WebSocket 오류';
|
||||
};
|
||||
|
||||
// 연결 시작
|
||||
console.log('🚀 Activating STOMP client...');
|
||||
client.activate();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,603 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>📊 투자전략 백테스트 UI 목업 - 전체 목록</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, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
|
||||
min-height: 100vh;
|
||||
color: #fff;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
.container { max-width: 1600px; margin: 0 auto; }
|
||||
|
||||
/* 헤더 */
|
||||
.header { text-align: center; margin-bottom: 60px; }
|
||||
.header h1 {
|
||||
font-size: 42px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.header p {
|
||||
font-size: 18px;
|
||||
color: #9ca3af;
|
||||
max-width: 800px;
|
||||
margin: 0 auto 24px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.stats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
}
|
||||
.stat {
|
||||
text-align: center;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: #a78bfa;
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* 섹션 */
|
||||
.section { margin-bottom: 60px; }
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
.section-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.3));
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
}
|
||||
.section-info h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.section-info p {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* 카드 그리드 */
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* 카드 */
|
||||
.card {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.card:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 20px 50px rgba(0,0,0,0.4);
|
||||
border-color: rgba(139, 92, 246, 0.5);
|
||||
}
|
||||
|
||||
.card-preview {
|
||||
height: 180px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #1a1a2e;
|
||||
}
|
||||
.card-preview iframe {
|
||||
width: 300%;
|
||||
height: 300%;
|
||||
border: none;
|
||||
transform: scale(0.333);
|
||||
transform-origin: top left;
|
||||
pointer-events: none;
|
||||
}
|
||||
.card-preview-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, transparent 40%, rgba(15, 15, 35, 0.95) 100%);
|
||||
}
|
||||
|
||||
.card-body { padding: 20px; }
|
||||
.card-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.card-badge.pc { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
|
||||
.card-badge.tablet { background: rgba(139, 92, 246, 0.2); color: #a78bfa; }
|
||||
.card-badge.mobile { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
|
||||
|
||||
.card-title {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.card-desc {
|
||||
font-size: 13px;
|
||||
color: #9ca3af;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.tag {
|
||||
padding: 4px 10px;
|
||||
background: rgba(255,255,255,0.08);
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
|
||||
border: 1px solid rgba(139, 92, 246, 0.3);
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.card-link:hover {
|
||||
background: linear-gradient(135deg, #8b5cf6, #6366f1);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* 가이드 */
|
||||
.guide {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border-radius: 24px;
|
||||
padding: 40px;
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
margin-top: 40px;
|
||||
}
|
||||
.guide h2 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.guide-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
.guide-item {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
}
|
||||
.guide-item-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.guide-item-desc {
|
||||
font-size: 14px;
|
||||
color: #9ca3af;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 60px;
|
||||
padding-top: 30px;
|
||||
border-top: 1px solid rgba(255,255,255,0.1);
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header class="header">
|
||||
<h1>📊 투자전략 백테스트 UI 목업</h1>
|
||||
<p>
|
||||
종목, 투자전략, 시간봉을 선택하여 실제 투자를 시뮬레이션하고<br>
|
||||
매수/매도 시점, 수익률, 예측 정확도를 확인하는 15가지 UI 디자인
|
||||
</p>
|
||||
<div class="stats">
|
||||
<div class="stat">
|
||||
<div class="stat-value">5</div>
|
||||
<div class="stat-label">PC 디자인</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-value">5</div>
|
||||
<div class="stat-label">태블릿 디자인</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-value">5</div>
|
||||
<div class="stat-label">모바일 디자인</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- PC 섹션 -->
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-icon">🖥️</div>
|
||||
<div class="section-info">
|
||||
<h2>PC (데스크톱)</h2>
|
||||
<p>1920px 이상 · 넓은 화면에 최적화된 대시보드 스타일</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="pc/pc-01-trading-terminal.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge pc">PC-01</span>
|
||||
<h3 class="card-title">트레이딩 터미널</h3>
|
||||
<p class="card-desc">3단 레이아웃의 트레이딩뷰 스타일. 좌측 종목리스트, 중앙 대형 차트, 우측 성과 패널</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">다크테마</span>
|
||||
<span class="tag">3단레이아웃</span>
|
||||
<span class="tag">실시간스타일</span>
|
||||
</div>
|
||||
<a href="pc/pc-01-trading-terminal.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="pc/pc-02-analytics-report.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge pc">PC-02</span>
|
||||
<h3 class="card-title">분석 리포트</h3>
|
||||
<p class="card-desc">라이트 테마의 비즈니스 리포트 스타일. 깔끔한 카드와 테이블 중심</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">라이트테마</span>
|
||||
<span class="tag">리포트형</span>
|
||||
<span class="tag">비즈니스</span>
|
||||
</div>
|
||||
<a href="pc/pc-02-analytics-report.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="pc/pc-03-minimal-clean.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge pc">PC-03</span>
|
||||
<h3 class="card-title">미니멀 클린</h3>
|
||||
<p class="card-desc">화이트 배경의 미니멀 디자인. 아이콘 사이드바와 넓은 콘텐츠 영역</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">미니멀</span>
|
||||
<span class="tag">화이트</span>
|
||||
<span class="tag">모던</span>
|
||||
</div>
|
||||
<a href="pc/pc-03-minimal-clean.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="pc/pc-04-dark-pro.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge pc">PC-04</span>
|
||||
<h3 class="card-title">다크 프로페셔널</h3>
|
||||
<p class="card-desc">퍼플 액센트의 프로페셔널 다크 테마. 그라데이션과 카드 중심</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">다크</span>
|
||||
<span class="tag">퍼플</span>
|
||||
<span class="tag">그라데이션</span>
|
||||
</div>
|
||||
<a href="pc/pc-04-dark-pro.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="pc/pc-05-splitview.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge pc">PC-05</span>
|
||||
<h3 class="card-title">스플릿뷰</h3>
|
||||
<p class="card-desc">좌우 50:50 분할 레이아웃. 설정/결과와 차트 영역 분리</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">2분할</span>
|
||||
<span class="tag">네이비</span>
|
||||
<span class="tag">정보분리</span>
|
||||
</div>
|
||||
<a href="pc/pc-05-splitview.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 태블릿 섹션 -->
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-icon">📱</div>
|
||||
<div class="section-info">
|
||||
<h2>태블릿 (Tablet)</h2>
|
||||
<p>768px - 1024px · 가로/세로 모드에 최적화</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="tablet/tablet-01-grid-dashboard.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge tablet">Tablet-01</span>
|
||||
<h3 class="card-title">그리드 대시보드</h3>
|
||||
<p class="card-desc">4컬럼 그리드 기반 대시보드. 메트릭 카드와 차트가 조화롭게 배치</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">그리드</span>
|
||||
<span class="tag">다크</span>
|
||||
<span class="tag">카드</span>
|
||||
</div>
|
||||
<a href="tablet/tablet-01-grid-dashboard.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="tablet/tablet-02-card-stack.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge tablet">Tablet-02</span>
|
||||
<h3 class="card-title">카드 스택</h3>
|
||||
<p class="card-desc">세로 스크롤 카드 스택 구조. 라이트 테마의 깔끔한 디자인</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">카드스택</span>
|
||||
<span class="tag">라이트</span>
|
||||
<span class="tag">스크롤</span>
|
||||
</div>
|
||||
<a href="tablet/tablet-02-card-stack.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="tablet/tablet-03-split-horizontal.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge tablet">Tablet-03</span>
|
||||
<h3 class="card-title">가로 분할</h3>
|
||||
<p class="card-desc">상단 설정/결과, 하단 차트/정보로 가로 분할된 레이아웃</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">가로분할</span>
|
||||
<span class="tag">다크</span>
|
||||
<span class="tag">컴팩트</span>
|
||||
</div>
|
||||
<a href="tablet/tablet-03-split-horizontal.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="tablet/tablet-04-slide-panel.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge tablet">Tablet-04</span>
|
||||
<h3 class="card-title">슬라이드 패널</h3>
|
||||
<p class="card-desc">탭 네비게이션과 슬라이드 가능한 메트릭 카드</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">탭</span>
|
||||
<span class="tag">슬라이드</span>
|
||||
<span class="tag">퍼플</span>
|
||||
</div>
|
||||
<a href="tablet/tablet-04-slide-panel.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="tablet/tablet-05-compact-pro.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge tablet">Tablet-05</span>
|
||||
<h3 class="card-title">컴팩트 프로</h3>
|
||||
<p class="card-desc">화이트 배경의 컴팩트한 프로페셔널 디자인</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">컴팩트</span>
|
||||
<span class="tag">화이트</span>
|
||||
<span class="tag">프로</span>
|
||||
</div>
|
||||
<a href="tablet/tablet-05-compact-pro.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 모바일 섹션 -->
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-icon">📲</div>
|
||||
<div class="section-info">
|
||||
<h2>모바일 (Mobile)</h2>
|
||||
<p>375px - 414px · 터치 인터페이스에 최적화</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="mobile/mobile-01-app-style.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge mobile">Mobile-01</span>
|
||||
<h3 class="card-title">앱 스타일</h3>
|
||||
<p class="card-desc">iOS/Android 앱 스타일. 바텀 네비게이션과 플로팅 버튼</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">앱스타일</span>
|
||||
<span class="tag">다크</span>
|
||||
<span class="tag">바텀네비</span>
|
||||
</div>
|
||||
<a href="mobile/mobile-01-app-style.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="mobile/mobile-02-card-scroll.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge mobile">Mobile-02</span>
|
||||
<h3 class="card-title">카드 스크롤</h3>
|
||||
<p class="card-desc">라이트 테마의 카드 기반 스크롤 UI. 가로 스크롤 메트릭</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">카드</span>
|
||||
<span class="tag">라이트</span>
|
||||
<span class="tag">스크롤</span>
|
||||
</div>
|
||||
<a href="mobile/mobile-02-card-scroll.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="mobile/mobile-03-fullscreen-chart.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge mobile">Mobile-03</span>
|
||||
<h3 class="card-title">풀스크린 차트</h3>
|
||||
<p class="card-desc">차트가 화면 전체를 차지. 오버레이로 정보 표시</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">풀스크린</span>
|
||||
<span class="tag">오버레이</span>
|
||||
<span class="tag">몰입형</span>
|
||||
</div>
|
||||
<a href="mobile/mobile-03-fullscreen-chart.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="mobile/mobile-04-bottom-sheet.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge mobile">Mobile-04</span>
|
||||
<h3 class="card-title">바텀시트</h3>
|
||||
<p class="card-desc">상단 차트 + 하단 바텀시트 구조. 드래그로 확장 가능</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">바텀시트</span>
|
||||
<span class="tag">드래그</span>
|
||||
<span class="tag">블루</span>
|
||||
</div>
|
||||
<a href="mobile/mobile-04-bottom-sheet.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="mobile/mobile-05-minimal-dark.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge mobile">Mobile-05</span>
|
||||
<h3 class="card-title">미니멀 다크</h3>
|
||||
<p class="card-desc">대형 수익률 표시의 미니멀 디자인. 심플하고 직관적</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">미니멀</span>
|
||||
<span class="tag">다크</span>
|
||||
<span class="tag">심플</span>
|
||||
</div>
|
||||
<a href="mobile/mobile-05-minimal-dark.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 가이드 -->
|
||||
<div class="guide">
|
||||
<h2>💡 UI 선택 가이드</h2>
|
||||
<div class="guide-grid">
|
||||
<div class="guide-item">
|
||||
<h3 class="guide-item-title">🖥️ 데스크톱 중심</h3>
|
||||
<p class="guide-item-desc">
|
||||
<strong>PC-01 트레이딩 터미널</strong> 또는 <strong>PC-04 다크 프로</strong>를 추천합니다.
|
||||
넓은 화면에서 차트와 정보를 동시에 확인하기 좋습니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="guide-item">
|
||||
<h3 class="guide-item-title">📊 상세 분석</h3>
|
||||
<p class="guide-item-desc">
|
||||
<strong>PC-02 분석 리포트</strong>를 추천합니다.
|
||||
테이블과 상세 데이터 확인에 최적화되어 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="guide-item">
|
||||
<h3 class="guide-item-title">📱 모바일 중심</h3>
|
||||
<p class="guide-item-desc">
|
||||
<strong>Mobile-01 앱 스타일</strong> 또는 <strong>Mobile-03 풀스크린 차트</strong>를 추천합니다.
|
||||
터치에 최적화된 인터페이스입니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="guide-item">
|
||||
<h3 class="guide-item-title">🎨 라이트 테마 선호</h3>
|
||||
<p class="guide-item-desc">
|
||||
<strong>PC-03 미니멀 클린</strong>, <strong>Tablet-02 카드 스택</strong>,
|
||||
<strong>Mobile-02 카드 스크롤</strong>을 추천합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<p>이 목업은 실제 구현 전 UI 디자인 검토를 위한 것입니다.</p>
|
||||
<p>선호하는 스타일을 선택하시면 해당 디자인으로 구현해 드립니다.</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,265 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390">
|
||||
<title>Mobile-01 앱 스타일</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: #0f0f23; color: #fff; width: 390px; min-height: 844px; padding-bottom: 80px; }
|
||||
|
||||
.status-bar { height: 44px; background: #0f0f23; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; font-size: 14px; font-weight: 600; }
|
||||
|
||||
.header { padding: 12px 20px 16px; display: flex; justify-content: space-between; align-items: center; }
|
||||
.header-title { font-size: 22px; font-weight: 700; }
|
||||
.version-badge { background: rgba(139, 92, 246, 0.2); color: #a78bfa; padding: 4px 10px; border-radius: 10px; font-size: 10px; }
|
||||
|
||||
.container { padding: 0 16px; }
|
||||
|
||||
/* 종목 카드 */
|
||||
.symbol-card { background: linear-gradient(135deg, #1e1e3f 0%, #0f0f23 100%); border-radius: 20px; padding: 20px; margin-bottom: 16px; border: 1px solid rgba(255,255,255,0.1); }
|
||||
.symbol-row { display: flex; justify-content: space-between; align-items: center; }
|
||||
.symbol-icon { width: 48px; height: 48px; background: linear-gradient(135deg, #f7931a, #ffab00); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; }
|
||||
.symbol-info { flex: 1; margin-left: 14px; }
|
||||
.symbol-name { font-size: 18px; font-weight: 700; }
|
||||
.symbol-market { font-size: 12px; color: #9ca3af; }
|
||||
.symbol-price { text-align: right; }
|
||||
.price-value { font-size: 18px; font-weight: 700; }
|
||||
.price-change { font-size: 13px; color: #22c55e; }
|
||||
.change-btn { margin-top: 12px; padding: 10px; background: rgba(255,255,255,0.1); border: none; border-radius: 10px; color: #fff; font-size: 13px; width: 100%; cursor: pointer; }
|
||||
|
||||
/* 설정 칩 */
|
||||
.chips-row { display: flex; gap: 8px; margin-bottom: 12px; overflow-x: auto; padding-bottom: 4px; }
|
||||
.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; }
|
||||
.chip.active { background: rgba(139, 92, 246, 0.2); border-color: #8b5cf6; color: #a78bfa; }
|
||||
|
||||
/* 수익률 카드 */
|
||||
.return-card { background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(16, 185, 129, 0.05)); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 20px; padding: 24px; margin-bottom: 16px; text-align: center; }
|
||||
.return-label { font-size: 13px; color: #9ca3af; margin-bottom: 8px; }
|
||||
.return-value { font-size: 48px; font-weight: 700; color: #22c55e; }
|
||||
.return-amount { font-size: 14px; color: #22c55e; margin-top: 4px; }
|
||||
|
||||
/* 메트릭 그리드 */
|
||||
.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
|
||||
.metric-card { background: rgba(255,255,255,0.05); border-radius: 16px; padding: 16px; text-align: center; }
|
||||
.metric-icon { font-size: 24px; margin-bottom: 8px; }
|
||||
.metric-value { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
|
||||
.metric-value.green { color: #22c55e; }
|
||||
.metric-value.red { color: #ef4444; }
|
||||
.metric-label { font-size: 11px; color: #71717a; }
|
||||
|
||||
/* 미니 차트 */
|
||||
.chart-card { background: rgba(255,255,255,0.05); border-radius: 20px; padding: 16px; margin-bottom: 16px; }
|
||||
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
|
||||
.card-title { font-size: 14px; font-weight: 600; }
|
||||
.chart-area { height: 160px; background: rgba(0,0,0,0.2); border-radius: 12px; position: relative; overflow: hidden; }
|
||||
.chart-candles { position: absolute; inset: 16px 12px 30px 12px; display: flex; align-items: flex-end; justify-content: space-around; }
|
||||
.candle { width: 8px; border-radius: 2px; position: relative; }
|
||||
.candle.up { background: #22c55e; }
|
||||
.candle.down { background: #ef4444; }
|
||||
.signal { position: absolute; width: 16px; height: 16px; border-radius: 50%; font-size: 8px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
|
||||
.signal.buy { bottom: -20px; left: 50%; transform: translateX(-50%); background: rgba(34, 197, 94, 0.3); color: #22c55e; border: 1.5px solid #22c55e; }
|
||||
.signal.sell { top: -20px; left: 50%; transform: translateX(-50%); background: rgba(239, 68, 68, 0.3); color: #ef4444; border: 1.5px solid #ef4444; }
|
||||
|
||||
/* 정확도 */
|
||||
.accuracy-card { background: rgba(255,255,255,0.05); border-radius: 20px; padding: 20px; margin-bottom: 16px; }
|
||||
.accuracy-row { display: flex; align-items: center; gap: 16px; }
|
||||
.accuracy-ring { width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(#8b5cf6 0deg 252deg, rgba(255,255,255,0.1) 252deg 360deg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.accuracy-inner { width: 60px; height: 60px; background: #0f0f23; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
||||
.accuracy-pct { font-size: 20px; font-weight: 700; color: #8b5cf6; }
|
||||
.accuracy-text { font-size: 8px; color: #71717a; }
|
||||
.accuracy-bars { flex: 1; }
|
||||
.acc-bar { margin-bottom: 10px; }
|
||||
.acc-bar-header { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 4px; }
|
||||
.acc-bar-bg { height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
|
||||
.acc-bar-fill { height: 100%; border-radius: 3px; }
|
||||
.acc-bar-fill.green { background: #22c55e; }
|
||||
.acc-bar-fill.purple { background: #8b5cf6; }
|
||||
|
||||
/* 거래 */
|
||||
.trades-card { background: rgba(255,255,255,0.05); border-radius: 20px; padding: 16px; margin-bottom: 16px; }
|
||||
.trade-item { display: flex; align-items: center; padding: 12px; background: rgba(255,255,255,0.03); border-radius: 12px; margin-bottom: 8px; }
|
||||
.trade-badge { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-right: 12px; }
|
||||
.trade-badge.buy { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
|
||||
.trade-badge.sell { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
|
||||
.trade-info { flex: 1; }
|
||||
.trade-type { font-size: 13px; font-weight: 500; }
|
||||
.trade-time { font-size: 11px; color: #6b7280; }
|
||||
.trade-result { text-align: right; }
|
||||
.trade-price { font-size: 12px; }
|
||||
.trade-pnl { font-size: 12px; font-weight: 600; }
|
||||
.trade-pnl.profit { color: #22c55e; }
|
||||
.trade-pnl.loss { color: #ef4444; }
|
||||
|
||||
/* 실행 버튼 */
|
||||
.run-btn { position: fixed; bottom: 100px; left: 16px; right: 16px; width: calc(100% - 32px); max-width: 358px; padding: 18px; background: linear-gradient(135deg, #8b5cf6, #6366f1); 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); }
|
||||
|
||||
/* 바텀 네비게이션 */
|
||||
.bottom-nav { position: fixed; bottom: 0; left: 0; width: 390px; background: rgba(15, 15, 35, 0.95); backdrop-filter: blur(20px); border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-around; padding: 10px 0 30px; }
|
||||
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #6b7280; font-size: 10px; }
|
||||
.nav-item.active { color: #8b5cf6; }
|
||||
.nav-icon { font-size: 22px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="status-bar">
|
||||
<span>9:41</span>
|
||||
<span>📶 🔋</span>
|
||||
</div>
|
||||
|
||||
<header class="header">
|
||||
<span class="header-title">백테스트</span>
|
||||
<span class="version-badge">Mobile-01</span>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="symbol-card">
|
||||
<div class="symbol-row">
|
||||
<div class="symbol-icon">₿</div>
|
||||
<div class="symbol-info">
|
||||
<div class="symbol-name">BTC/KRW</div>
|
||||
<div class="symbol-market">비트코인 · 업비트</div>
|
||||
</div>
|
||||
<div class="symbol-price">
|
||||
<div class="price-value">₩58,450,000</div>
|
||||
<div class="price-change">+2.34%</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="change-btn">종목 변경 ▼</button>
|
||||
</div>
|
||||
|
||||
<div class="chips-row">
|
||||
<div class="chip active">MACD+RSI</div>
|
||||
<div class="chip">볼린저밴드</div>
|
||||
<div class="chip">이평크로스</div>
|
||||
</div>
|
||||
<div class="chips-row">
|
||||
<div class="chip">15분</div>
|
||||
<div class="chip active">1시간</div>
|
||||
<div class="chip">4시간</div>
|
||||
<div class="chip">일봉</div>
|
||||
</div>
|
||||
|
||||
<div class="return-card">
|
||||
<div class="return-label">💰 총 수익률</div>
|
||||
<div class="return-value">+23.5%</div>
|
||||
<div class="return-amount">₩10,000,000 → ₩12,350,000</div>
|
||||
</div>
|
||||
|
||||
<div class="metrics-grid">
|
||||
<div class="metric-card">
|
||||
<div class="metric-icon">🎯</div>
|
||||
<div class="metric-value green">68%</div>
|
||||
<div class="metric-label">승률</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-icon">🔄</div>
|
||||
<div class="metric-value">25회</div>
|
||||
<div class="metric-label">총 거래</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-icon">⚡</div>
|
||||
<div class="metric-value green">+₩94K</div>
|
||||
<div class="metric-label">평균 수익</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-icon">📉</div>
|
||||
<div class="metric-value red">-8.2%</div>
|
||||
<div class="metric-label">최대 낙폭</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">📈 차트</span>
|
||||
<span style="font-size: 11px; color: #8b5cf6;">전체보기 →</span>
|
||||
</div>
|
||||
<div class="chart-area">
|
||||
<div class="chart-candles">
|
||||
<div class="candle up" style="height: 30px;"></div>
|
||||
<div class="candle up" style="height: 45px;"></div>
|
||||
<div class="candle down" style="height: 25px;"></div>
|
||||
<div class="candle down" style="height: 40px;"><div class="signal buy">B</div></div>
|
||||
<div class="candle up" style="height: 55px;"></div>
|
||||
<div class="candle up" style="height: 70px;"></div>
|
||||
<div class="candle up" style="height: 60px;"></div>
|
||||
<div class="candle down" style="height: 35px;"><div class="signal sell">S</div></div>
|
||||
<div class="candle down" style="height: 50px;"></div>
|
||||
<div class="candle up" style="height: 40px;"></div>
|
||||
<div class="candle down" style="height: 25px;"><div class="signal buy">B</div></div>
|
||||
<div class="candle up" style="height: 45px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accuracy-card">
|
||||
<div class="card-header" style="margin-bottom: 12px;">
|
||||
<span class="card-title">🎯 전략 정확도</span>
|
||||
</div>
|
||||
<div class="accuracy-row">
|
||||
<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">
|
||||
<div class="acc-bar-header">
|
||||
<span style="color: #9ca3af;">매수</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">
|
||||
<div class="acc-bar-header">
|
||||
<span style="color: #9ca3af;">매도</span>
|
||||
<span style="color: #8b5cf6;">64%</span>
|
||||
</div>
|
||||
<div class="acc-bar-bg"><div class="acc-bar-fill purple" style="width: 64%;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trades-card">
|
||||
<div class="card-header" style="margin-bottom: 12px;">
|
||||
<span class="card-title">📋 최근 거래</span>
|
||||
<span style="font-size: 11px; color: #8b5cf6;">전체보기 →</span>
|
||||
</div>
|
||||
<div class="trade-item">
|
||||
<div class="trade-badge 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,450,000</div>
|
||||
<div class="trade-pnl profit">+5.2%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trade-item">
|
||||
<div class="trade-badge 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,520,000</div>
|
||||
<div class="trade-pnl">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="run-btn">▶ 백테스트 실행</button>
|
||||
|
||||
<nav class="bottom-nav">
|
||||
<div class="nav-item"><span class="nav-icon">🏠</span>홈</div>
|
||||
<div class="nav-item active"><span class="nav-icon">📊</span>백테스트</div>
|
||||
<div class="nav-item"><span class="nav-icon">📋</span>거래</div>
|
||||
<div class="nav-item"><span class="nav-icon">⚙️</span>설정</div>
|
||||
</nav>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,261 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=375">
|
||||
<title>Mobile-02 카드 스크롤</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; color: #1e293b; width: 375px; min-height: 812px; padding-bottom: 90px; }
|
||||
|
||||
.header { background: #fff; padding: 50px 20px 16px; border-bottom: 1px solid #e2e8f0; }
|
||||
.header-row { display: flex; justify-content: space-between; align-items: center; }
|
||||
.header-title { font-size: 24px; font-weight: 700; }
|
||||
.version-badge { background: #dbeafe; color: #1d4ed8; padding: 4px 10px; border-radius: 10px; font-size: 10px; }
|
||||
|
||||
.container { padding: 16px; }
|
||||
|
||||
/* 카드 */
|
||||
.card { background: #fff; border-radius: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 16px; overflow: hidden; }
|
||||
.card-header { padding: 18px 20px; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; }
|
||||
.card-title { font-size: 15px; font-weight: 600; }
|
||||
.card-body { padding: 20px; }
|
||||
|
||||
/* 설정 */
|
||||
.config-row { display: flex; gap: 10px; margin-bottom: 12px; }
|
||||
.config-field { flex: 1; }
|
||||
.config-label { font-size: 11px; color: #64748b; margin-bottom: 4px; }
|
||||
.config-input { width: 100%; padding: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 13px; }
|
||||
.run-btn { width: 100%; padding: 16px; background: linear-gradient(135deg, #3b82f6, #2563eb); border: none; border-radius: 12px; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 8px; }
|
||||
|
||||
/* 결과 헤더 */
|
||||
.result-card { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; }
|
||||
.result-card .card-body { display: flex; justify-content: space-between; align-items: center; }
|
||||
.result-symbol { font-size: 20px; font-weight: 700; }
|
||||
.result-meta { font-size: 12px; opacity: 0.9; margin-top: 4px; }
|
||||
.result-value { font-size: 36px; font-weight: 700; }
|
||||
.result-amount { font-size: 13px; opacity: 0.9; text-align: right; }
|
||||
|
||||
/* 메트릭 스크롤 */
|
||||
.metrics-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 4px 0 12px; }
|
||||
.metric-card { flex-shrink: 0; width: 120px; background: #f8fafc; border-radius: 14px; padding: 16px; text-align: center; }
|
||||
.metric-icon { font-size: 24px; margin-bottom: 8px; }
|
||||
.metric-value { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
|
||||
.metric-value.green { color: #16a34a; }
|
||||
.metric-value.red { color: #dc2626; }
|
||||
.metric-label { font-size: 10px; color: #64748b; }
|
||||
|
||||
/* 차트 */
|
||||
.chart-area { height: 180px; background: #f8fafc; border-radius: 14px; position: relative; overflow: hidden; border: 1px solid #e2e8f0; }
|
||||
.chart-candles { position: absolute; inset: 20px 12px 35px 12px; display: flex; align-items: flex-end; justify-content: space-around; }
|
||||
.candle { width: 10px; border-radius: 2px; position: relative; }
|
||||
.candle.up { background: #16a34a; }
|
||||
.candle.down { background: #dc2626; }
|
||||
.signal { position: absolute; width: 18px; height: 18px; border-radius: 50%; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
|
||||
.signal.buy { bottom: -22px; left: 50%; transform: translateX(-50%); background: #dcfce7; color: #16a34a; border: 2px solid #16a34a; }
|
||||
.signal.sell { top: -22px; left: 50%; transform: translateX(-50%); background: #fee2e2; color: #dc2626; border: 2px solid #dc2626; }
|
||||
|
||||
/* 정확도 */
|
||||
.accuracy-row { display: flex; align-items: center; gap: 16px; }
|
||||
.accuracy-ring { width: 90px; height: 90px; border-radius: 50%; background: conic-gradient(#16a34a 0deg 252deg, #e2e8f0 252deg 360deg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.accuracy-inner { width: 70px; height: 70px; background: #fff; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
||||
.accuracy-pct { font-size: 22px; font-weight: 700; color: #16a34a; }
|
||||
.accuracy-text { font-size: 9px; color: #64748b; }
|
||||
.accuracy-bars { flex: 1; }
|
||||
.acc-bar { margin-bottom: 10px; }
|
||||
.acc-bar-header { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 4px; }
|
||||
.acc-bar-bg { height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; }
|
||||
.acc-bar-fill { height: 100%; border-radius: 4px; }
|
||||
.acc-bar-fill.green { background: linear-gradient(90deg, #16a34a, #22c55e); }
|
||||
.acc-bar-fill.orange { background: linear-gradient(90deg, #ea580c, #f97316); }
|
||||
|
||||
/* 거래 */
|
||||
.trade-item { display: flex; align-items: center; padding: 14px; background: #f8fafc; border-radius: 14px; margin-bottom: 10px; }
|
||||
.trade-badge { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; margin-right: 14px; }
|
||||
.trade-badge.buy { background: #dcfce7; color: #16a34a; }
|
||||
.trade-badge.sell { background: #fee2e2; color: #dc2626; }
|
||||
.trade-info { flex: 1; }
|
||||
.trade-type { font-size: 14px; font-weight: 500; }
|
||||
.trade-time { font-size: 12px; color: #94a3b8; }
|
||||
.trade-result { text-align: right; }
|
||||
.trade-price { font-size: 13px; font-weight: 500; }
|
||||
.trade-pnl { font-size: 13px; font-weight: 600; }
|
||||
.trade-pnl.profit { color: #16a34a; }
|
||||
.trade-pnl.loss { color: #dc2626; }
|
||||
|
||||
/* 바텀 네비게이션 */
|
||||
.bottom-nav { position: fixed; bottom: 0; left: 0; width: 375px; background: #fff; border-top: 1px solid #e2e8f0; display: flex; justify-content: space-around; padding: 10px 0 28px; }
|
||||
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #94a3b8; font-size: 10px; }
|
||||
.nav-item.active { color: #3b82f6; }
|
||||
.nav-icon { font-size: 22px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="header-row">
|
||||
<span class="header-title">백테스트</span>
|
||||
<span class="version-badge">Mobile-02</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">⚙️ 설정</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="config-row">
|
||||
<div class="config-field">
|
||||
<div class="config-label">종목</div>
|
||||
<select class="config-input"><option>BTC/KRW</option></select>
|
||||
</div>
|
||||
<div class="config-field">
|
||||
<div class="config-label">전략</div>
|
||||
<select class="config-input"><option>MACD+RSI</option></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-row">
|
||||
<div class="config-field">
|
||||
<div class="config-label">시간봉</div>
|
||||
<select class="config-input"><option>1시간</option></select>
|
||||
</div>
|
||||
<div class="config-field">
|
||||
<div class="config-label">기간</div>
|
||||
<select class="config-input"><option>3개월</option></select>
|
||||
</div>
|
||||
</div>
|
||||
<button class="run-btn">▶ 백테스트 실행</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card result-card">
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="result-symbol">BTC/KRW</div>
|
||||
<div class="result-meta">MACD+RSI · 1시간</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="result-value">+23.5%</div>
|
||||
<div class="result-amount">₩2,350,000</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metrics-scroll">
|
||||
<div class="metric-card">
|
||||
<div class="metric-icon">💰</div>
|
||||
<div class="metric-value">₩12.35M</div>
|
||||
<div class="metric-label">최종 자산</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-icon">🎯</div>
|
||||
<div class="metric-value green">68%</div>
|
||||
<div class="metric-label">승률</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-icon">🔄</div>
|
||||
<div class="metric-value">25회</div>
|
||||
<div class="metric-label">총 거래</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-icon">📉</div>
|
||||
<div class="metric-value red">-8.2%</div>
|
||||
<div class="metric-label">MDD</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">📈 가격 차트</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart-area">
|
||||
<div class="chart-candles">
|
||||
<div class="candle up" style="height: 35px;"></div>
|
||||
<div class="candle up" style="height: 50px;"></div>
|
||||
<div class="candle down" style="height: 30px;"></div>
|
||||
<div class="candle down" style="height: 45px;"><div class="signal buy">B</div></div>
|
||||
<div class="candle up" style="height: 60px;"></div>
|
||||
<div class="candle up" style="height: 75px;"></div>
|
||||
<div class="candle up" style="height: 65px;"></div>
|
||||
<div class="candle down" style="height: 40px;"><div class="signal sell">S</div></div>
|
||||
<div class="candle down" style="height: 55px;"></div>
|
||||
<div class="candle up" style="height: 45px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">🎯 정확도</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="accuracy-row">
|
||||
<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">
|
||||
<div class="acc-bar-header">
|
||||
<span style="color: #64748b;">매수</span>
|
||||
<span style="color: #16a34a; font-weight: 600;">76%</span>
|
||||
</div>
|
||||
<div class="acc-bar-bg"><div class="acc-bar-fill green" style="width: 76%;"></div></div>
|
||||
</div>
|
||||
<div class="acc-bar">
|
||||
<div class="acc-bar-header">
|
||||
<span style="color: #64748b;">매도</span>
|
||||
<span style="color: #ea580c; font-weight: 600;">64%</span>
|
||||
</div>
|
||||
<div class="acc-bar-bg"><div class="acc-bar-fill orange" style="width: 64%;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">📋 거래 내역</span>
|
||||
<span style="font-size: 12px; color: #3b82f6;">전체 →</span>
|
||||
</div>
|
||||
<div class="card-body" style="padding-top: 12px;">
|
||||
<div class="trade-item">
|
||||
<div class="trade-badge 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,450,000</div>
|
||||
<div class="trade-pnl profit">+5.2%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trade-item">
|
||||
<div class="trade-badge 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,520,000</div>
|
||||
<div class="trade-pnl">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="bottom-nav">
|
||||
<div class="nav-item"><span class="nav-icon">🏠</span>홈</div>
|
||||
<div class="nav-item active"><span class="nav-icon">📊</span>백테스트</div>
|
||||
<div class="nav-item"><span class="nav-icon">📋</span>거래</div>
|
||||
<div class="nav-item"><span class="nav-icon">⚙️</span>설정</div>
|
||||
</nav>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,200 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=414">
|
||||
<title>Mobile-03 풀스크린 차트</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: #000; color: #fff; width: 414px; height: 896px; overflow: hidden; }
|
||||
|
||||
/* 상단 오버레이 */
|
||||
.top-overlay { position: absolute; top: 0; left: 0; right: 0; z-index: 10; background: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, transparent 100%); padding: 50px 20px 30px; }
|
||||
.header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
|
||||
.back-btn { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; }
|
||||
.header-title { font-size: 18px; font-weight: 600; }
|
||||
.version-badge { background: rgba(34, 197, 94, 0.2); color: #22c55e; padding: 4px 10px; border-radius: 10px; font-size: 10px; }
|
||||
|
||||
/* 심볼 정보 */
|
||||
.symbol-info { display: flex; justify-content: space-between; align-items: flex-end; }
|
||||
.symbol-left h2 { font-size: 24px; font-weight: 700; }
|
||||
.symbol-left p { font-size: 12px; color: #9ca3af; margin-top: 2px; }
|
||||
.symbol-right { text-align: right; }
|
||||
.price { font-size: 28px; font-weight: 700; color: #22c55e; }
|
||||
.change { font-size: 14px; color: #22c55e; }
|
||||
|
||||
/* 전체 화면 차트 */
|
||||
.fullscreen-chart { position: absolute; inset: 0; background: #000; }
|
||||
.chart-grid { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(39, 39, 42, 0.2) 1px, transparent 1px), linear-gradient(rgba(39, 39, 42, 0.2) 1px, transparent 1px); background-size: 40px 35px; }
|
||||
.chart-candles { position: absolute; top: 180px; bottom: 320px; left: 12px; right: 12px; display: flex; align-items: flex-end; justify-content: space-around; }
|
||||
.candle { width: 10px; border-radius: 2px; position: relative; }
|
||||
.candle.up { background: #22c55e; }
|
||||
.candle.down { background: #ef4444; }
|
||||
.signal { position: absolute; width: 22px; height: 22px; border-radius: 50%; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 10px; }
|
||||
.signal.buy { bottom: -28px; left: 50%; transform: translateX(-50%); background: rgba(34, 197, 94, 0.3); color: #22c55e; border: 2px solid #22c55e; box-shadow: 0 0 15px rgba(34, 197, 94, 0.5); }
|
||||
.signal.sell { top: -28px; left: 50%; transform: translateX(-50%); background: rgba(239, 68, 68, 0.3); color: #ef4444; border: 2px solid #ef4444; box-shadow: 0 0 15px rgba(239, 68, 68, 0.5); }
|
||||
|
||||
/* 하단 오버레이 */
|
||||
.bottom-overlay { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, transparent 100%); padding: 40px 20px 40px; }
|
||||
|
||||
/* 수익률 */
|
||||
.return-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
|
||||
.return-box { background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 14px; padding: 16px 20px; flex: 1; margin-right: 12px; }
|
||||
.return-label { font-size: 11px; color: #9ca3af; margin-bottom: 4px; }
|
||||
.return-value { font-size: 32px; font-weight: 700; color: #22c55e; }
|
||||
.accuracy-box { background: rgba(139, 92, 246, 0.15); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 14px; padding: 16px 20px; text-align: center; width: 100px; }
|
||||
.accuracy-value { font-size: 28px; font-weight: 700; color: #8b5cf6; }
|
||||
.accuracy-label { font-size: 10px; color: #9ca3af; }
|
||||
|
||||
/* 메트릭 스크롤 */
|
||||
.metrics-scroll { display: flex; gap: 10px; overflow-x: auto; margin-bottom: 20px; padding-bottom: 4px; }
|
||||
.metric-pill { flex-shrink: 0; background: rgba(255,255,255,0.1); border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; }
|
||||
.metric-pill-icon { font-size: 18px; }
|
||||
.metric-pill-value { font-size: 16px; font-weight: 600; }
|
||||
.metric-pill-value.green { color: #22c55e; }
|
||||
.metric-pill-value.red { color: #ef4444; }
|
||||
.metric-pill-label { font-size: 10px; color: #71717a; }
|
||||
|
||||
/* 거래 내역 슬라이드 */
|
||||
.trades-section { }
|
||||
.section-header { display: flex; justify-content: space-between; margin-bottom: 12px; }
|
||||
.section-title { font-size: 13px; font-weight: 600; }
|
||||
.section-link { font-size: 11px; color: #8b5cf6; }
|
||||
.trades-scroll { display: flex; gap: 10px; overflow-x: auto; }
|
||||
.trade-card { flex-shrink: 0; background: rgba(255,255,255,0.08); border-radius: 14px; padding: 14px; width: 160px; }
|
||||
.trade-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.trade-badge { padding: 4px 10px; border-radius: 6px; font-size: 10px; font-weight: 700; }
|
||||
.trade-badge.buy { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
|
||||
.trade-badge.sell { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
|
||||
.trade-pnl { font-size: 12px; font-weight: 600; }
|
||||
.trade-pnl.profit { color: #22c55e; }
|
||||
.trade-pnl.loss { color: #ef4444; }
|
||||
.trade-price { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
|
||||
.trade-time { font-size: 10px; color: #6b7280; }
|
||||
|
||||
/* 설정 버튼 */
|
||||
.settings-btn { position: absolute; top: 50px; right: 20px; width: 40px; height: 40px; background: rgba(255,255,255,0.1); border: none; border-radius: 12px; color: #fff; font-size: 18px; cursor: pointer; z-index: 20; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="fullscreen-chart">
|
||||
<div class="chart-grid"></div>
|
||||
<div class="chart-candles">
|
||||
<div class="candle up" style="height: 40px;"></div>
|
||||
<div class="candle up" style="height: 55px;"></div>
|
||||
<div class="candle down" style="height: 35px;"></div>
|
||||
<div class="candle down" style="height: 50px;"><div class="signal buy">B</div></div>
|
||||
<div class="candle up" style="height: 65px;"></div>
|
||||
<div class="candle up" style="height: 85px;"></div>
|
||||
<div class="candle up" style="height: 75px;"></div>
|
||||
<div class="candle down" style="height: 45px;"><div class="signal sell">S</div></div>
|
||||
<div class="candle down" style="height: 60px;"></div>
|
||||
<div class="candle up" style="height: 50px;"></div>
|
||||
<div class="candle down" style="height: 35px;"><div class="signal buy">B</div></div>
|
||||
<div class="candle up" style="height: 55px;"></div>
|
||||
<div class="candle up" style="height: 70px;"></div>
|
||||
<div class="candle up" style="height: 80px;"></div>
|
||||
<div class="candle down" style="height: 40px;"></div>
|
||||
<div class="candle up" style="height: 60px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="top-overlay">
|
||||
<div class="header-row">
|
||||
<button class="back-btn">←</button>
|
||||
<span class="header-title">백테스트</span>
|
||||
<span class="version-badge">Mobile-03</span>
|
||||
</div>
|
||||
<div class="symbol-info">
|
||||
<div class="symbol-left">
|
||||
<h2>BTC/KRW</h2>
|
||||
<p>MACD+RSI · 1H · 3개월</p>
|
||||
</div>
|
||||
<div class="symbol-right">
|
||||
<div class="price">₩58,450,000</div>
|
||||
<div class="change">+2.34%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="settings-btn">⚙️</button>
|
||||
|
||||
<div class="bottom-overlay">
|
||||
<div class="return-row">
|
||||
<div class="return-box">
|
||||
<div class="return-label">💰 총 수익률</div>
|
||||
<div class="return-value">+23.5%</div>
|
||||
</div>
|
||||
<div class="accuracy-box">
|
||||
<div class="accuracy-value">70%</div>
|
||||
<div class="accuracy-label">🎯 정확도</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metrics-scroll">
|
||||
<div class="metric-pill">
|
||||
<span class="metric-pill-icon">💰</span>
|
||||
<div>
|
||||
<div class="metric-pill-value">₩12.35M</div>
|
||||
<div class="metric-pill-label">최종 자산</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-pill">
|
||||
<span class="metric-pill-icon">🎯</span>
|
||||
<div>
|
||||
<div class="metric-pill-value green">68%</div>
|
||||
<div class="metric-pill-label">승률</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-pill">
|
||||
<span class="metric-pill-icon">🔄</span>
|
||||
<div>
|
||||
<div class="metric-pill-value">25회</div>
|
||||
<div class="metric-pill-label">총 거래</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-pill">
|
||||
<span class="metric-pill-icon">📉</span>
|
||||
<div>
|
||||
<div class="metric-pill-value red">-8.2%</div>
|
||||
<div class="metric-pill-label">MDD</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trades-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">📋 최근 거래</span>
|
||||
<span class="section-link">전체보기 →</span>
|
||||
</div>
|
||||
<div class="trades-scroll">
|
||||
<div class="trade-card">
|
||||
<div class="trade-header">
|
||||
<span class="trade-badge sell">SELL</span>
|
||||
<span class="trade-pnl profit">+5.2%</span>
|
||||
</div>
|
||||
<div class="trade-price">₩58,450,000</div>
|
||||
<div class="trade-time">03.15 14:00</div>
|
||||
</div>
|
||||
<div class="trade-card">
|
||||
<div class="trade-header">
|
||||
<span class="trade-badge buy">BUY</span>
|
||||
<span class="trade-pnl">-</span>
|
||||
</div>
|
||||
<div class="trade-price">₩55,520,000</div>
|
||||
<div class="trade-time">03.12 09:00</div>
|
||||
</div>
|
||||
<div class="trade-card">
|
||||
<div class="trade-header">
|
||||
<span class="trade-badge sell">SELL</span>
|
||||
<span class="trade-pnl loss">-2.1%</span>
|
||||
</div>
|
||||
<div class="trade-price">₩54,200,000</div>
|
||||
<div class="trade-time">03.08 16:00</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,160 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=390">
|
||||
<title>Mobile-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: #18181b; color: #fafafa; width: 390px; height: 844px; overflow: hidden; position: relative; }
|
||||
|
||||
/* 메인 화면 */
|
||||
.main-screen { height: 100%; display: flex; flex-direction: column; }
|
||||
|
||||
/* 헤더 */
|
||||
.header { padding: 50px 20px 16px; background: #18181b; }
|
||||
.header-row { display: flex; justify-content: space-between; align-items: center; }
|
||||
.header-title { font-size: 22px; font-weight: 700; }
|
||||
.version-badge { background: rgba(59, 130, 246, 0.2); color: #60a5fa; padding: 4px 10px; border-radius: 10px; font-size: 10px; }
|
||||
|
||||
/* 종목 선택 */
|
||||
.symbol-selector { padding: 0 20px 16px; }
|
||||
.symbol-card { background: linear-gradient(135deg, #1e3a5f 0%, #18181b 100%); border-radius: 18px; padding: 18px; display: flex; align-items: center; border: 1px solid rgba(59, 130, 246, 0.3); }
|
||||
.symbol-icon { width: 48px; height: 48px; background: linear-gradient(135deg, #f7931a, #ffab00); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; margin-right: 14px; }
|
||||
.symbol-info { flex: 1; }
|
||||
.symbol-name { font-size: 18px; font-weight: 700; }
|
||||
.symbol-meta { font-size: 12px; color: #9ca3af; }
|
||||
.symbol-price { text-align: right; }
|
||||
.price-value { font-size: 18px; font-weight: 700; }
|
||||
.price-change { font-size: 13px; color: #22c55e; }
|
||||
|
||||
/* 차트 영역 */
|
||||
.chart-area { flex: 1; position: relative; background: linear-gradient(90deg, rgba(39, 39, 42, 0.15) 1px, transparent 1px), linear-gradient(rgba(39, 39, 42, 0.15) 1px, transparent 1px); background-size: 35px 30px; margin: 0 12px; border-radius: 16px; overflow: hidden; }
|
||||
.chart-candles { position: absolute; inset: 30px 12px 40px 12px; display: flex; align-items: flex-end; justify-content: space-around; }
|
||||
.candle { width: 8px; border-radius: 2px; position: relative; }
|
||||
.candle.up { background: #22c55e; }
|
||||
.candle.down { background: #ef4444; }
|
||||
.signal { position: absolute; width: 18px; height: 18px; border-radius: 50%; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
|
||||
.signal.buy { bottom: -22px; left: 50%; transform: translateX(-50%); background: rgba(34, 197, 94, 0.3); color: #22c55e; border: 2px solid #22c55e; }
|
||||
.signal.sell { top: -22px; left: 50%; transform: translateX(-50%); background: rgba(239, 68, 68, 0.3); color: #ef4444; border: 2px solid #ef4444; }
|
||||
.chart-timeframes { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; }
|
||||
.tf-btn { padding: 6px 10px; background: rgba(255,255,255,0.1); border: none; border-radius: 6px; color: #71717a; font-size: 10px; }
|
||||
.tf-btn.active { background: #3b82f6; color: #fff; }
|
||||
|
||||
/* 바텀시트 */
|
||||
.bottom-sheet { position: absolute; bottom: 0; left: 0; right: 0; background: #27272a; border-radius: 24px 24px 0 0; padding: 12px 20px 40px; box-shadow: 0 -10px 40px rgba(0,0,0,0.5); }
|
||||
.sheet-handle { width: 40px; height: 4px; background: #52525b; border-radius: 2px; margin: 0 auto 16px; }
|
||||
|
||||
/* 수익률 */
|
||||
.return-row { display: flex; gap: 12px; margin-bottom: 20px; }
|
||||
.return-card { flex: 1; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.2); border-radius: 14px; padding: 16px; text-align: center; }
|
||||
.return-value { font-size: 32px; font-weight: 700; color: #22c55e; }
|
||||
.return-label { font-size: 11px; color: #9ca3af; margin-top: 4px; }
|
||||
.accuracy-card { width: 100px; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 14px; padding: 16px; text-align: center; }
|
||||
.accuracy-value { font-size: 26px; font-weight: 700; color: #3b82f6; }
|
||||
.accuracy-label { font-size: 10px; color: #9ca3af; margin-top: 4px; }
|
||||
|
||||
/* 메트릭 그리드 */
|
||||
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
|
||||
.metric-item { background: rgba(255,255,255,0.05); border-radius: 12px; padding: 14px; text-align: center; }
|
||||
.metric-value { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
|
||||
.metric-value.green { color: #22c55e; }
|
||||
.metric-value.red { color: #ef4444; }
|
||||
.metric-label { font-size: 9px; color: #71717a; }
|
||||
|
||||
/* 실행 버튼 */
|
||||
.action-row { display: flex; gap: 10px; }
|
||||
.settings-btn { flex: 1; padding: 16px; background: rgba(255,255,255,0.1); border: none; border-radius: 14px; color: #fff; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
|
||||
.run-btn { flex: 2; padding: 16px; background: linear-gradient(135deg, #3b82f6, #2563eb); border: none; border-radius: 14px; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-screen">
|
||||
<header class="header">
|
||||
<div class="header-row">
|
||||
<span class="header-title">백테스트</span>
|
||||
<span class="version-badge">Mobile-04</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="symbol-selector">
|
||||
<div class="symbol-card">
|
||||
<div class="symbol-icon">₿</div>
|
||||
<div class="symbol-info">
|
||||
<div class="symbol-name">BTC/KRW</div>
|
||||
<div class="symbol-meta">비트코인 · MACD+RSI</div>
|
||||
</div>
|
||||
<div class="symbol-price">
|
||||
<div class="price-value">₩58.45M</div>
|
||||
<div class="price-change">+2.34%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-area">
|
||||
<div class="chart-timeframes">
|
||||
<button class="tf-btn">15m</button>
|
||||
<button class="tf-btn active">1H</button>
|
||||
<button class="tf-btn">4H</button>
|
||||
<button class="tf-btn">1D</button>
|
||||
</div>
|
||||
<div class="chart-candles">
|
||||
<div class="candle up" style="height: 35px;"></div>
|
||||
<div class="candle up" style="height: 50px;"></div>
|
||||
<div class="candle down" style="height: 30px;"></div>
|
||||
<div class="candle down" style="height: 45px;"><div class="signal buy">B</div></div>
|
||||
<div class="candle up" style="height: 60px;"></div>
|
||||
<div class="candle up" style="height: 80px;"></div>
|
||||
<div class="candle up" style="height: 70px;"></div>
|
||||
<div class="candle down" style="height: 40px;"><div class="signal sell">S</div></div>
|
||||
<div class="candle down" style="height: 55px;"></div>
|
||||
<div class="candle up" style="height: 45px;"></div>
|
||||
<div class="candle down" style="height: 30px;"><div class="signal buy">B</div></div>
|
||||
<div class="candle up" style="height: 50px;"></div>
|
||||
<div class="candle up" style="height: 65px;"></div>
|
||||
<div class="candle up" style="height: 75px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-sheet">
|
||||
<div class="sheet-handle"></div>
|
||||
|
||||
<div class="return-row">
|
||||
<div class="return-card">
|
||||
<div class="return-value">+23.5%</div>
|
||||
<div class="return-label">💰 총 수익률</div>
|
||||
</div>
|
||||
<div class="accuracy-card">
|
||||
<div class="accuracy-value">70%</div>
|
||||
<div class="accuracy-label">🎯 정확도</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metrics-grid">
|
||||
<div class="metric-item">
|
||||
<div class="metric-value">₩12.3M</div>
|
||||
<div class="metric-label">최종 자산</div>
|
||||
</div>
|
||||
<div class="metric-item">
|
||||
<div class="metric-value green">68%</div>
|
||||
<div class="metric-label">승률</div>
|
||||
</div>
|
||||
<div class="metric-item">
|
||||
<div class="metric-value">25</div>
|
||||
<div class="metric-label">거래</div>
|
||||
</div>
|
||||
<div class="metric-item">
|
||||
<div class="metric-value red">-8.2%</div>
|
||||
<div class="metric-label">MDD</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-row">
|
||||
<button class="settings-btn">⚙️ 설정</button>
|
||||
<button class="run-btn">▶ 백테스트 실행</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,201 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=375">
|
||||
<title>Mobile-05 미니멀 다크</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: 'Inter', sans-serif; background: #09090b; color: #fafafa; width: 375px; min-height: 812px; padding-bottom: 100px; }
|
||||
|
||||
.header { padding: 54px 20px 20px; }
|
||||
.header-row { display: flex; justify-content: space-between; align-items: center; }
|
||||
.header-title { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; }
|
||||
.version-badge { background: #27272a; color: #71717a; padding: 6px 12px; border-radius: 8px; font-size: 10px; }
|
||||
|
||||
.container { padding: 0 20px; }
|
||||
|
||||
/* 심볼 */
|
||||
.symbol-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
|
||||
.symbol-name { font-size: 16px; color: #a1a1aa; }
|
||||
.symbol-price { font-size: 16px; font-weight: 600; color: #22c55e; }
|
||||
|
||||
/* 대형 수익률 */
|
||||
.big-return { text-align: center; margin-bottom: 40px; }
|
||||
.big-return-value { font-size: 72px; font-weight: 700; color: #22c55e; letter-spacing: -2px; }
|
||||
.big-return-label { font-size: 14px; color: #52525b; margin-top: 8px; }
|
||||
|
||||
/* 메트릭 리스트 */
|
||||
.metrics-list { margin-bottom: 32px; }
|
||||
.metric-row { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-bottom: 1px solid #27272a; }
|
||||
.metric-row:last-child { border: none; }
|
||||
.metric-label { font-size: 14px; color: #71717a; }
|
||||
.metric-value { font-size: 16px; font-weight: 600; }
|
||||
.metric-value.green { color: #22c55e; }
|
||||
.metric-value.red { color: #ef4444; }
|
||||
|
||||
/* 정확도 바 */
|
||||
.accuracy-section { margin-bottom: 32px; }
|
||||
.accuracy-header { display: flex; justify-content: space-between; margin-bottom: 16px; }
|
||||
.accuracy-title { font-size: 14px; color: #71717a; }
|
||||
.accuracy-value { font-size: 16px; font-weight: 600; }
|
||||
.accuracy-bars { }
|
||||
.acc-bar { margin-bottom: 16px; }
|
||||
.acc-bar-header { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 8px; }
|
||||
.acc-bar-label { color: #71717a; }
|
||||
.acc-bar-pct { font-weight: 600; }
|
||||
.acc-bar-pct.green { color: #22c55e; }
|
||||
.acc-bar-pct.orange { color: #f97316; }
|
||||
.acc-bar-bg { height: 8px; background: #27272a; border-radius: 4px; overflow: hidden; }
|
||||
.acc-bar-fill { height: 100%; border-radius: 4px; }
|
||||
.acc-bar-fill.green { background: linear-gradient(90deg, #22c55e, #4ade80); }
|
||||
.acc-bar-fill.orange { background: linear-gradient(90deg, #f97316, #fb923c); }
|
||||
|
||||
/* 미니 차트 */
|
||||
.mini-chart { background: #18181b; border-radius: 16px; padding: 20px; margin-bottom: 32px; }
|
||||
.chart-header { display: flex; justify-content: space-between; margin-bottom: 16px; }
|
||||
.chart-title { font-size: 12px; color: #71717a; }
|
||||
.chart-area { height: 120px; display: flex; align-items: flex-end; justify-content: space-around; gap: 4px; }
|
||||
.bar { width: 8px; border-radius: 2px; position: relative; }
|
||||
.bar.up { background: #22c55e; }
|
||||
.bar.down { background: #ef4444; }
|
||||
.dot { position: absolute; width: 14px; height: 14px; border-radius: 50%; font-size: 7px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
|
||||
.dot.buy { bottom: -18px; left: 50%; transform: translateX(-50%); background: #22c55e; color: #000; }
|
||||
.dot.sell { top: -18px; left: 50%; transform: translateX(-50%); background: #ef4444; color: #fff; }
|
||||
|
||||
/* 거래 */
|
||||
.trades-section { }
|
||||
.section-header { display: flex; justify-content: space-between; margin-bottom: 16px; }
|
||||
.section-title { font-size: 14px; font-weight: 600; }
|
||||
.section-link { font-size: 12px; color: #3b82f6; }
|
||||
.trade-item { display: flex; align-items: center; padding: 16px; background: #18181b; border-radius: 14px; margin-bottom: 10px; }
|
||||
.trade-type { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; margin-right: 14px; }
|
||||
.trade-type.buy { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
|
||||
.trade-type.sell { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
|
||||
.trade-info { flex: 1; }
|
||||
.trade-action { font-size: 14px; font-weight: 500; }
|
||||
.trade-time { font-size: 11px; color: #52525b; margin-top: 2px; }
|
||||
.trade-result { text-align: right; }
|
||||
.trade-price { font-size: 14px; font-weight: 500; }
|
||||
.trade-pnl { font-size: 12px; font-weight: 600; margin-top: 2px; }
|
||||
.trade-pnl.profit { color: #22c55e; }
|
||||
.trade-pnl.loss { color: #ef4444; }
|
||||
|
||||
/* 실행 버튼 */
|
||||
.run-btn { position: fixed; bottom: 36px; left: 20px; right: 20px; width: calc(100% - 40px); max-width: 335px; padding: 18px; background: #fafafa; border: none; border-radius: 14px; color: #09090b; font-size: 16px; font-weight: 600; cursor: pointer; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="header-row">
|
||||
<span class="header-title">백테스트</span>
|
||||
<span class="version-badge">Mobile-05</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="symbol-row">
|
||||
<span class="symbol-name">BTC/KRW · 1H · MACD+RSI</span>
|
||||
<span class="symbol-price">+2.34%</span>
|
||||
</div>
|
||||
|
||||
<div class="big-return">
|
||||
<div class="big-return-value">+23.5%</div>
|
||||
<div class="big-return-label">₩10,000,000 → ₩12,350,000</div>
|
||||
</div>
|
||||
|
||||
<div class="metrics-list">
|
||||
<div class="metric-row">
|
||||
<span class="metric-label">최종 자산</span>
|
||||
<span class="metric-value">₩12,350,000</span>
|
||||
</div>
|
||||
<div class="metric-row">
|
||||
<span class="metric-label">승률</span>
|
||||
<span class="metric-value green">68% (17/25)</span>
|
||||
</div>
|
||||
<div class="metric-row">
|
||||
<span class="metric-label">최대 낙폭</span>
|
||||
<span class="metric-value red">-8.2%</span>
|
||||
</div>
|
||||
</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="acc-bar">
|
||||
<div class="acc-bar-header">
|
||||
<span class="acc-bar-label">매수</span>
|
||||
<span class="acc-bar-pct green">76%</span>
|
||||
</div>
|
||||
<div class="acc-bar-bg"><div class="acc-bar-fill green" style="width: 76%;"></div></div>
|
||||
</div>
|
||||
<div class="acc-bar">
|
||||
<div class="acc-bar-header">
|
||||
<span class="acc-bar-label">매도</span>
|
||||
<span class="acc-bar-pct orange">64%</span>
|
||||
</div>
|
||||
<div class="acc-bar-bg"><div class="acc-bar-fill orange" style="width: 64%;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mini-chart">
|
||||
<div class="chart-header">
|
||||
<span class="chart-title">가격 차트</span>
|
||||
<span class="chart-title">3개월</span>
|
||||
</div>
|
||||
<div class="chart-area">
|
||||
<div class="bar up" style="height: 30px;"></div>
|
||||
<div class="bar up" style="height: 45px;"></div>
|
||||
<div class="bar down" style="height: 25px;"></div>
|
||||
<div class="bar down" style="height: 40px;"><div class="dot buy">B</div></div>
|
||||
<div class="bar up" style="height: 55px;"></div>
|
||||
<div class="bar up" style="height: 70px;"></div>
|
||||
<div class="bar up" style="height: 60px;"></div>
|
||||
<div class="bar down" style="height: 35px;"><div class="dot sell">S</div></div>
|
||||
<div class="bar down" style="height: 50px;"></div>
|
||||
<div class="bar up" style="height: 40px;"></div>
|
||||
<div class="bar down" style="height: 25px;"><div class="dot buy">B</div></div>
|
||||
<div class="bar up" style="height: 45px;"></div>
|
||||
<div class="bar up" style="height: 55px;"></div>
|
||||
<div class="bar up" style="height: 65px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trades-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">최근 거래</span>
|
||||
<span class="section-link">전체보기 →</span>
|
||||
</div>
|
||||
<div class="trade-item">
|
||||
<div class="trade-type sell">S</div>
|
||||
<div class="trade-info">
|
||||
<div class="trade-action">매도</div>
|
||||
<div class="trade-time">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-type buy">B</div>
|
||||
<div class="trade-info">
|
||||
<div class="trade-action">매수</div>
|
||||
<div class="trade-time">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>
|
||||
</div>
|
||||
|
||||
<button class="run-btn">백테스트 실행</button>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,714 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>PC-01 트레이딩 터미널 스타일</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', -apple-system, sans-serif;
|
||||
background: #0a0a0f;
|
||||
color: #e4e4e7;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 최상단 바 */
|
||||
.top-bar {
|
||||
height: 40px;
|
||||
background: #131318;
|
||||
border-bottom: 1px solid #27272a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
gap: 24px;
|
||||
}
|
||||
.logo {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
color: #22c55e;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.top-nav {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
.top-nav-item {
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
color: #71717a;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.top-nav-item:hover { background: #27272a; color: #fff; }
|
||||
.top-nav-item.active { background: #22c55e; color: #000; font-weight: 500; }
|
||||
.top-right {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
font-size: 12px;
|
||||
color: #71717a;
|
||||
}
|
||||
|
||||
/* 메인 레이아웃 */
|
||||
.main-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr 320px;
|
||||
grid-template-rows: auto 1fr;
|
||||
height: calc(100vh - 40px);
|
||||
}
|
||||
|
||||
/* 왼쪽 패널 */
|
||||
.left-panel {
|
||||
background: #131318;
|
||||
border-right: 1px solid #27272a;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.panel-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #27272a;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #a1a1aa;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.symbol-search {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #27272a;
|
||||
}
|
||||
.symbol-search input {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background: #0a0a0f;
|
||||
border: 1px solid #27272a;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
}
|
||||
.symbol-list {
|
||||
padding: 8px;
|
||||
}
|
||||
.symbol-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.symbol-item:hover { background: #1f1f26; }
|
||||
.symbol-item.active { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); }
|
||||
.symbol-name { font-size: 13px; font-weight: 500; }
|
||||
.symbol-market { font-size: 11px; color: #71717a; }
|
||||
.symbol-price { text-align: right; }
|
||||
.symbol-price-value { font-size: 13px; font-weight: 500; }
|
||||
.symbol-change { font-size: 11px; }
|
||||
.symbol-change.up { color: #22c55e; }
|
||||
.symbol-change.down { color: #ef4444; }
|
||||
|
||||
/* 설정 섹션 */
|
||||
.settings-section {
|
||||
padding: 16px;
|
||||
border-top: 1px solid #27272a;
|
||||
}
|
||||
.setting-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.setting-label {
|
||||
font-size: 11px;
|
||||
color: #71717a;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.setting-select {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background: #0a0a0f;
|
||||
border: 1px solid #27272a;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
}
|
||||
.btn-run {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.btn-run:hover { filter: brightness(1.1); }
|
||||
|
||||
/* 중앙 차트 영역 */
|
||||
.center-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #0a0a0f;
|
||||
}
|
||||
|
||||
/* 차트 헤더 */
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #27272a;
|
||||
background: #131318;
|
||||
}
|
||||
.chart-symbol-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.chart-symbol-name {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.chart-price {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #22c55e;
|
||||
}
|
||||
.chart-change {
|
||||
font-size: 14px;
|
||||
color: #22c55e;
|
||||
}
|
||||
.timeframe-selector {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
background: #1f1f26;
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.tf-btn {
|
||||
padding: 6px 12px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #71717a;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tf-btn:hover { color: #fff; }
|
||||
.tf-btn.active { background: #22c55e; color: #000; font-weight: 500; }
|
||||
|
||||
/* 차트 영역 */
|
||||
.chart-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(39, 39, 42, 0.3) 1px, transparent 1px),
|
||||
linear-gradient(rgba(39, 39, 42, 0.3) 1px, transparent 1px);
|
||||
background-size: 60px 40px;
|
||||
}
|
||||
.chart-candles {
|
||||
position: absolute;
|
||||
inset: 40px 80px 60px 20px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-around;
|
||||
gap: 4px;
|
||||
}
|
||||
.candle {
|
||||
width: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.candle-body { width: 100%; border-radius: 1px; }
|
||||
.candle-body.bull { background: #22c55e; }
|
||||
.candle-body.bear { background: #ef4444; }
|
||||
.signal-badge {
|
||||
position: absolute;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.signal-badge.buy {
|
||||
bottom: -28px;
|
||||
background: #22c55e;
|
||||
color: #000;
|
||||
}
|
||||
.signal-badge.sell {
|
||||
top: -28px;
|
||||
background: #ef4444;
|
||||
color: #fff;
|
||||
}
|
||||
.price-axis {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 40px;
|
||||
bottom: 60px;
|
||||
width: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 8px;
|
||||
font-size: 11px;
|
||||
color: #52525b;
|
||||
text-align: right;
|
||||
background: rgba(19, 19, 24, 0.8);
|
||||
}
|
||||
.time-axis {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 20px;
|
||||
right: 80px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
color: #52525b;
|
||||
}
|
||||
|
||||
/* 보조지표 영역 */
|
||||
.indicators-panel {
|
||||
height: 150px;
|
||||
border-top: 1px solid #27272a;
|
||||
display: flex;
|
||||
}
|
||||
.indicator-chart {
|
||||
flex: 1;
|
||||
border-right: 1px solid #27272a;
|
||||
padding: 12px;
|
||||
position: relative;
|
||||
}
|
||||
.indicator-chart:last-child { border-right: none; }
|
||||
.indicator-title {
|
||||
font-size: 11px;
|
||||
color: #71717a;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.indicator-mock {
|
||||
height: calc(100% - 24px);
|
||||
background: linear-gradient(180deg,
|
||||
rgba(34, 197, 94, 0.1) 0%,
|
||||
transparent 30%,
|
||||
transparent 70%,
|
||||
rgba(239, 68, 68, 0.1) 100%
|
||||
);
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
}
|
||||
.indicator-line {
|
||||
position: absolute;
|
||||
left: 5%;
|
||||
right: 5%;
|
||||
top: 50%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #ef4444, #eab308, #22c55e, #3b82f6, #22c55e);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
/* 오른쪽 패널 */
|
||||
.right-panel {
|
||||
background: #131318;
|
||||
border-left: 1px solid #27272a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 성과 요약 */
|
||||
.performance-summary {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #27272a;
|
||||
}
|
||||
.perf-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #a1a1aa;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.perf-highlight {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border: 1px solid rgba(34, 197, 94, 0.2);
|
||||
border-radius: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.perf-highlight-label {
|
||||
font-size: 12px;
|
||||
color: #71717a;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.perf-highlight-value {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: #22c55e;
|
||||
}
|
||||
.perf-highlight-sub {
|
||||
font-size: 12px;
|
||||
color: #22c55e;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.perf-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
.perf-item {
|
||||
background: #1f1f26;
|
||||
padding: 14px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.perf-item-label {
|
||||
font-size: 11px;
|
||||
color: #71717a;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.perf-item-value {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.perf-item-value.up { color: #22c55e; }
|
||||
.perf-item-value.down { color: #ef4444; }
|
||||
|
||||
/* 정확도 */
|
||||
.accuracy-section {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #27272a;
|
||||
}
|
||||
.accuracy-bar-container {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.accuracy-bar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.accuracy-bar-bg {
|
||||
height: 8px;
|
||||
background: #27272a;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.accuracy-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.accuracy-bar-fill.green { background: linear-gradient(90deg, #22c55e, #4ade80); }
|
||||
.accuracy-bar-fill.yellow { background: linear-gradient(90deg, #eab308, #facc15); }
|
||||
|
||||
/* 거래 내역 */
|
||||
.trades-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.trades-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #27272a;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.trades-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
.trade-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background: #1f1f26;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 6px;
|
||||
gap: 12px;
|
||||
}
|
||||
.trade-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.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: 12px; }
|
||||
.trade-pnl { font-size: 11px; font-weight: 600; }
|
||||
.trade-pnl.profit { color: #22c55e; }
|
||||
.trade-pnl.loss { color: #ef4444; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="logo">📊 BACKTEST PRO</div>
|
||||
<nav class="top-nav">
|
||||
<div class="top-nav-item">대시보드</div>
|
||||
<div class="top-nav-item active">백테스트</div>
|
||||
<div class="top-nav-item">포트폴리오</div>
|
||||
<div class="top-nav-item">전략관리</div>
|
||||
<div class="top-nav-item">리포트</div>
|
||||
</nav>
|
||||
<div class="top-right">
|
||||
<span>PC-01 트레이딩 터미널</span>
|
||||
<span>🔔</span>
|
||||
<span>⚙️</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-layout">
|
||||
<!-- 왼쪽 패널 -->
|
||||
<aside class="left-panel">
|
||||
<div class="panel-header">종목 선택</div>
|
||||
<div class="symbol-search">
|
||||
<input type="text" placeholder="🔍 종목 검색...">
|
||||
</div>
|
||||
<div class="symbol-list">
|
||||
<div class="symbol-item active">
|
||||
<div>
|
||||
<div class="symbol-name">BTC/KRW</div>
|
||||
<div class="symbol-market">비트코인</div>
|
||||
</div>
|
||||
<div class="symbol-price">
|
||||
<div class="symbol-price-value">58,450,000</div>
|
||||
<div class="symbol-change up">+2.34%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="symbol-item">
|
||||
<div>
|
||||
<div class="symbol-name">ETH/KRW</div>
|
||||
<div class="symbol-market">이더리움</div>
|
||||
</div>
|
||||
<div class="symbol-price">
|
||||
<div class="symbol-price-value">3,245,000</div>
|
||||
<div class="symbol-change up">+1.82%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="symbol-item">
|
||||
<div>
|
||||
<div class="symbol-name">XRP/KRW</div>
|
||||
<div class="symbol-market">리플</div>
|
||||
</div>
|
||||
<div class="symbol-price">
|
||||
<div class="symbol-price-value">892</div>
|
||||
<div class="symbol-change down">-0.45%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<div class="panel-header" style="padding: 0 0 12px 0; border: none;">전략 설정</div>
|
||||
<div class="setting-group">
|
||||
<div class="setting-label">투자 전략</div>
|
||||
<select class="setting-select">
|
||||
<option>MACD + RSI 복합전략</option>
|
||||
<option>볼린저밴드 돌파</option>
|
||||
<option>이동평균 크로스</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="setting-group">
|
||||
<div class="setting-label">분석 기간</div>
|
||||
<select class="setting-select">
|
||||
<option>최근 3개월</option>
|
||||
<option>최근 6개월</option>
|
||||
<option>최근 1년</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="setting-group">
|
||||
<div class="setting-label">초기 투자금</div>
|
||||
<input type="text" class="setting-select" value="₩10,000,000">
|
||||
</div>
|
||||
<button class="btn-run">▶ 백테스트 실행</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 중앙 차트 영역 -->
|
||||
<main class="center-area">
|
||||
<div class="chart-header">
|
||||
<div class="chart-symbol-info">
|
||||
<span class="chart-symbol-name">BTC/KRW</span>
|
||||
<span class="chart-price">₩58,450,000</span>
|
||||
<span class="chart-change">+2.34% (+1,340,000)</span>
|
||||
</div>
|
||||
<div class="timeframe-selector">
|
||||
<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>
|
||||
<button class="tf-btn">1주</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-container">
|
||||
<div class="price-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="time-axis">
|
||||
<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: 50px;"></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>
|
||||
<div class="candle"><div class="candle-body bear" style="height: 55px;"></div><div class="signal-badge buy">BUY</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: 90px;"></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: 45px;"></div><div class="signal-badge sell">SELL</div></div>
|
||||
<div class="candle"><div class="candle-body bear" style="height: 60px;"></div></div>
|
||||
<div class="candle"><div class="candle-body bull" style="height: 50px;"></div></div>
|
||||
<div class="candle"><div class="candle-body bear" style="height: 35px;"></div><div class="signal-badge buy">BUY</div></div>
|
||||
<div class="candle"><div class="candle-body bull" style="height: 55px;"></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: 85px;"></div></div>
|
||||
<div class="candle"><div class="candle-body bear" style="height: 40px;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="indicators-panel">
|
||||
<div class="indicator-chart">
|
||||
<div class="indicator-title">MACD (12, 26, 9)</div>
|
||||
<div class="indicator-mock"><div class="indicator-line"></div></div>
|
||||
</div>
|
||||
<div class="indicator-chart">
|
||||
<div class="indicator-title">RSI (14)</div>
|
||||
<div class="indicator-mock"><div class="indicator-line"></div></div>
|
||||
</div>
|
||||
<div class="indicator-chart">
|
||||
<div class="indicator-title">Volume</div>
|
||||
<div class="indicator-mock"><div class="indicator-line"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 오른쪽 패널 -->
|
||||
<aside class="right-panel">
|
||||
<div class="performance-summary">
|
||||
<div class="perf-title">📊 성과 요약</div>
|
||||
<div class="perf-highlight">
|
||||
<div class="perf-highlight-label">총 수익률</div>
|
||||
<div class="perf-highlight-value">+23.5%</div>
|
||||
<div class="perf-highlight-sub">₩2,350,000 수익</div>
|
||||
</div>
|
||||
<div class="perf-grid">
|
||||
<div class="perf-item">
|
||||
<div class="perf-item-label">최종 자산</div>
|
||||
<div class="perf-item-value">₩12.35M</div>
|
||||
</div>
|
||||
<div class="perf-item">
|
||||
<div class="perf-item-label">승률</div>
|
||||
<div class="perf-item-value up">68%</div>
|
||||
</div>
|
||||
<div class="perf-item">
|
||||
<div class="perf-item-label">총 거래</div>
|
||||
<div class="perf-item-value">25회</div>
|
||||
</div>
|
||||
<div class="perf-item">
|
||||
<div class="perf-item-label">최대 낙폭</div>
|
||||
<div class="perf-item-value down">-8.2%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accuracy-section">
|
||||
<div class="perf-title">🎯 전략 정확도</div>
|
||||
<div class="accuracy-bar-container">
|
||||
<div class="accuracy-bar-header">
|
||||
<span style="color: #71717a;">전체 정확도</span>
|
||||
<span style="color: #22c55e; font-weight: 600;">70%</span>
|
||||
</div>
|
||||
<div class="accuracy-bar-bg">
|
||||
<div class="accuracy-bar-fill green" style="width: 70%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accuracy-bar-container">
|
||||
<div class="accuracy-bar-header">
|
||||
<span style="color: #71717a;">매수 정확도</span>
|
||||
<span style="color: #22c55e; font-weight: 600;">76%</span>
|
||||
</div>
|
||||
<div class="accuracy-bar-bg">
|
||||
<div class="accuracy-bar-fill green" style="width: 76%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accuracy-bar-container">
|
||||
<div class="accuracy-bar-header">
|
||||
<span style="color: #71717a;">매도 정확도</span>
|
||||
<span style="color: #eab308; font-weight: 600;">64%</span>
|
||||
</div>
|
||||
<div class="accuracy-bar-bg">
|
||||
<div class="accuracy-bar-fill yellow" style="width: 64%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trades-section">
|
||||
<div class="trades-header">
|
||||
<span class="perf-title" style="margin: 0;">📋 거래 내역</span>
|
||||
<span style="font-size: 11px; color: #22c55e; cursor: pointer;">전체보기 →</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">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-info">
|
||||
<div class="trade-type">매수</div>
|
||||
<div class="trade-time">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-info">
|
||||
<div class="trade-type">매도</div>
|
||||
<div class="trade-time">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>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,553 @@
|
||||
<!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>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,542 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>PC-05 스플릿뷰 스타일</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: #0f172a;
|
||||
color: #e2e8f0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 왼쪽: 설정 & 결과 */
|
||||
.left-pane {
|
||||
background: #1e293b;
|
||||
padding: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.pane-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.logo {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.version-tag {
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
color: #60a5fa;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* 설정 카드 */
|
||||
.config-card {
|
||||
background: #0f172a;
|
||||
border-radius: 20px;
|
||||
padding: 28px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-label {
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 8px;
|
||||
display: block;
|
||||
}
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 14px 16px;
|
||||
background: #1e293b;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
.form-input:focus { outline: none; border-color: #3b82f6; }
|
||||
.run-btn {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
background: linear-gradient(135deg, #3b82f6, #2563eb);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* 결과 헤더 */
|
||||
.result-header {
|
||||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(16, 185, 129, 0.05));
|
||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||
border-radius: 20px;
|
||||
padding: 28px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.result-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.result-symbol {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.result-meta {
|
||||
font-size: 13px;
|
||||
color: #94a3b8;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.result-return {
|
||||
text-align: right;
|
||||
}
|
||||
.return-value {
|
||||
font-size: 42px;
|
||||
font-weight: 700;
|
||||
color: #22c55e;
|
||||
}
|
||||
.return-amount {
|
||||
font-size: 14px;
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
/* 메트릭 그리드 */
|
||||
.metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.metric-card {
|
||||
background: #0f172a;
|
||||
border-radius: 14px;
|
||||
padding: 20px;
|
||||
}
|
||||
.metric-label {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.metric-value {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.metric-value.green { color: #22c55e; }
|
||||
.metric-value.red { color: #ef4444; }
|
||||
|
||||
/* 정확도 */
|
||||
.accuracy-section {
|
||||
background: #0f172a;
|
||||
border-radius: 20px;
|
||||
padding: 28px;
|
||||
}
|
||||
.accuracy-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
.accuracy-ring {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
background: conic-gradient(#3b82f6 0deg 252deg, #334155 252deg 360deg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.accuracy-inner {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
background: #0f172a;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.accuracy-pct {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #3b82f6;
|
||||
}
|
||||
.accuracy-text {
|
||||
font-size: 10px;
|
||||
color: #64748b;
|
||||
}
|
||||
.accuracy-details {
|
||||
flex: 1;
|
||||
}
|
||||
.acc-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #1e293b;
|
||||
}
|
||||
.acc-item:last-child { border: none; }
|
||||
.acc-label { font-size: 13px; color: #94a3b8; }
|
||||
.acc-value { font-size: 15px; font-weight: 600; }
|
||||
.acc-value.green { color: #22c55e; }
|
||||
.acc-value.yellow { color: #eab308; }
|
||||
|
||||
/* 오른쪽: 차트 & 거래 */
|
||||
.right-pane {
|
||||
background: #0f172a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.chart-header {
|
||||
padding: 20px 32px;
|
||||
border-bottom: 1px solid #1e293b;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.chart-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.chart-tabs {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
background: #1e293b;
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.chart-tab {
|
||||
padding: 8px 16px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.chart-tab.active { background: #3b82f6; color: #fff; }
|
||||
|
||||
/* 차트 */
|
||||
.chart-area {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(30, 41, 59, 0.5) 1px, transparent 1px),
|
||||
linear-gradient(rgba(30, 41, 59, 0.5) 1px, transparent 1px);
|
||||
background-size: 50px 35px;
|
||||
}
|
||||
.chart-candles {
|
||||
position: absolute;
|
||||
inset: 30px 60px 80px 30px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.candle {
|
||||
width: 14px;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
}
|
||||
.candle.up { background: #22c55e; }
|
||||
.candle.down { background: #ef4444; }
|
||||
.signal-marker {
|
||||
position: absolute;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.signal-marker.buy {
|
||||
bottom: -34px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: #22c55e;
|
||||
border: 2px solid #22c55e;
|
||||
}
|
||||
.signal-marker.sell {
|
||||
top: -34px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #ef4444;
|
||||
border: 2px solid #ef4444;
|
||||
}
|
||||
|
||||
/* 거래 섹션 */
|
||||
.trades-section {
|
||||
height: 280px;
|
||||
border-top: 1px solid #1e293b;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.trades-header {
|
||||
padding: 16px 32px;
|
||||
border-bottom: 1px solid #1e293b;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.trades-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.trades-view-all {
|
||||
font-size: 12px;
|
||||
color: #3b82f6;
|
||||
cursor: pointer;
|
||||
}
|
||||
.trades-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px 32px;
|
||||
}
|
||||
.trade-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 14px 16px;
|
||||
background: #1e293b;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.trade-badge {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
margin-right: 14px;
|
||||
}
|
||||
.trade-badge.buy { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
|
||||
.trade-badge.sell { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
|
||||
.trade-info { flex: 1; }
|
||||
.trade-type { font-size: 13px; font-weight: 500; }
|
||||
.trade-time { font-size: 11px; color: #64748b; }
|
||||
.trade-result { text-align: right; }
|
||||
.trade-price { font-size: 13px; }
|
||||
.trade-pnl { font-size: 12px; font-weight: 600; }
|
||||
.trade-pnl.profit { color: #22c55e; }
|
||||
.trade-pnl.loss { color: #ef4444; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layout">
|
||||
<!-- 왼쪽 패널 -->
|
||||
<div class="left-pane">
|
||||
<div class="pane-header">
|
||||
<div class="logo">📊 백테스트 시뮬레이터</div>
|
||||
<span class="version-tag">PC-05 스플릿뷰</span>
|
||||
</div>
|
||||
|
||||
<div class="config-card">
|
||||
<h3 class="card-title">⚙️ 테스트 설정</h3>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label class="form-label">종목</label>
|
||||
<select class="form-input"><option>BTC/KRW</option></select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">전략</label>
|
||||
<select class="form-input"><option>MACD + RSI</option></select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">시간봉</label>
|
||||
<select class="form-input"><option>1시간</option></select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">분석기간</label>
|
||||
<select class="form-input"><option>3개월</option></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" style="margin-top: 16px;">
|
||||
<label class="form-label">초기 투자금</label>
|
||||
<input type="text" class="form-input" value="₩10,000,000">
|
||||
</div>
|
||||
<button class="run-btn">▶ 백테스트 실행</button>
|
||||
</div>
|
||||
|
||||
<div class="result-header">
|
||||
<div class="result-row">
|
||||
<div>
|
||||
<div class="result-symbol">BTC/KRW</div>
|
||||
<div class="result-meta">MACD+RSI · 1H · 2024.01.01 - 03.15</div>
|
||||
</div>
|
||||
<div class="result-return">
|
||||
<div class="return-value">+23.5%</div>
|
||||
<div class="return-amount">₩2,350,000</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metrics-grid">
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">최종 자산</div>
|
||||
<div class="metric-value">₩12.35M</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">승률</div>
|
||||
<div class="metric-value green">68%</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">총 거래</div>
|
||||
<div class="metric-value">25회</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">수익 거래</div>
|
||||
<div class="metric-value green">17회</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">손실 거래</div>
|
||||
<div class="metric-value red">8회</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">최대 낙폭</div>
|
||||
<div class="metric-value red">-8.2%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accuracy-section">
|
||||
<h3 class="card-title">🎯 전략 정확도</h3>
|
||||
<div class="accuracy-row">
|
||||
<div class="accuracy-ring">
|
||||
<div class="accuracy-inner">
|
||||
<div class="accuracy-pct">70%</div>
|
||||
<div class="accuracy-text">정확도</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accuracy-details">
|
||||
<div class="acc-item">
|
||||
<span class="acc-label">매수 신호 정확도</span>
|
||||
<span class="acc-value green">76%</span>
|
||||
</div>
|
||||
<div class="acc-item">
|
||||
<span class="acc-label">매도 신호 정확도</span>
|
||||
<span class="acc-value yellow">64%</span>
|
||||
</div>
|
||||
<div class="acc-item">
|
||||
<span class="acc-label">평균 수익률</span>
|
||||
<span class="acc-value green">+4.2%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 오른쪽 패널 -->
|
||||
<div class="right-pane">
|
||||
<div class="chart-header">
|
||||
<span class="chart-title">📈 가격 차트 & 매매 시점</span>
|
||||
<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-area">
|
||||
<div class="chart-candles">
|
||||
<div class="candle up" style="height: 55px;"></div>
|
||||
<div class="candle up" style="height: 75px;"></div>
|
||||
<div class="candle down" style="height: 45px;"></div>
|
||||
<div class="candle down" style="height: 65px;"><div class="signal-marker buy">B</div></div>
|
||||
<div class="candle up" style="height: 85px;"></div>
|
||||
<div class="candle up" style="height: 110px;"></div>
|
||||
<div class="candle up" style="height: 95px;"></div>
|
||||
<div class="candle down" style="height: 60px;"><div class="signal-marker sell">S</div></div>
|
||||
<div class="candle down" style="height: 75px;"></div>
|
||||
<div class="candle up" style="height: 65px;"></div>
|
||||
<div class="candle down" style="height: 45px;"><div class="signal-marker buy">B</div></div>
|
||||
<div class="candle up" style="height: 70px;"></div>
|
||||
<div class="candle up" style="height: 90px;"></div>
|
||||
<div class="candle up" style="height: 100px;"></div>
|
||||
<div class="candle down" style="height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trades-section">
|
||||
<div class="trades-header">
|
||||
<span class="trades-title">📋 거래 내역</span>
|
||||
<span class="trades-view-all">전체보기 →</span>
|
||||
</div>
|
||||
<div class="trades-list">
|
||||
<div class="trade-row">
|
||||
<div class="trade-badge sell">S</div>
|
||||
<div class="trade-info">
|
||||
<div class="trade-type">매도</div>
|
||||
<div class="trade-time">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-row">
|
||||
<div class="trade-badge buy">B</div>
|
||||
<div class="trade-info">
|
||||
<div class="trade-type">매수</div>
|
||||
<div class="trade-time">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-row">
|
||||
<div class="trade-badge sell">S</div>
|
||||
<div class="trade-info">
|
||||
<div class="trade-type">매도</div>
|
||||
<div class="trade-time">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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,615 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,775 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>투자전략 테스트 UI - V2 차트 중심 스타일</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: #0f0f23;
|
||||
min-height: 100vh;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
/* 헤더 */
|
||||
.top-bar {
|
||||
background: linear-gradient(90deg, #1a1a3e 0%, #2d1b4e 100%);
|
||||
padding: 12px 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
.logo {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.logo::before {
|
||||
content: "💹";
|
||||
font-size: 24px;
|
||||
}
|
||||
.version-badge {
|
||||
background: rgba(139, 92, 246, 0.3);
|
||||
color: #a78bfa;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 메인 레이아웃 */
|
||||
.main-layout {
|
||||
display: flex;
|
||||
height: calc(100vh - 56px);
|
||||
}
|
||||
|
||||
/* 왼쪽 사이드바 */
|
||||
.left-sidebar {
|
||||
width: 280px;
|
||||
background: #141428;
|
||||
border-right: 1px solid rgba(255,255,255,0.1);
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.sidebar-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.sidebar-title {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
color: #6b7280;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.input-group {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.input-group label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.input-group select, .input-group input {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255,255,255,0.15);
|
||||
background: rgba(255,255,255,0.05);
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
}
|
||||
.input-group select:focus, .input-group input:focus {
|
||||
outline: none;
|
||||
border-color: #8b5cf6;
|
||||
}
|
||||
|
||||
.btn-execute {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
margin-top: 8px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.btn-execute:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
|
||||
}
|
||||
|
||||
/* 성과 요약 카드 */
|
||||
.performance-cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.perf-card {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border-radius: 10px;
|
||||
padding: 14px;
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
.perf-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.perf-label {
|
||||
font-size: 11px;
|
||||
color: #6b7280;
|
||||
}
|
||||
.perf-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
.perf-value {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.perf-value.up { color: #10b981; }
|
||||
.perf-value.down { color: #ef4444; }
|
||||
.perf-sub {
|
||||
font-size: 11px;
|
||||
color: #6b7280;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 중앙 차트 영역 */
|
||||
.chart-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 심볼 헤더 */
|
||||
.symbol-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border-radius: 12px;
|
||||
}
|
||||
.symbol-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.symbol-name {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.symbol-price {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #10b981;
|
||||
}
|
||||
.symbol-change {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.symbol-change.up { color: #10b981; }
|
||||
.symbol-change.down { color: #ef4444; }
|
||||
.timeframe-tabs {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
background: rgba(255,255,255,0.05);
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.tf-tab {
|
||||
padding: 6px 12px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #6b7280;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.tf-tab.active {
|
||||
background: #8b5cf6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 메인 차트 */
|
||||
.main-chart {
|
||||
flex: 1;
|
||||
background: rgba(255,255,255,0.02);
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chart-toolbar {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
z-index: 10;
|
||||
}
|
||||
.chart-tool {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: #9ca3af;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
.chart-tool:hover {
|
||||
background: rgba(139, 92, 246, 0.3);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 차트 목업 (캔들스틱 + 매매신호) */
|
||||
.chart-mock {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px),
|
||||
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
|
||||
background-size: 60px 40px;
|
||||
}
|
||||
.price-axis {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 60px;
|
||||
width: 80px;
|
||||
background: rgba(0,0,0,0.3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 20px 8px;
|
||||
font-size: 11px;
|
||||
color: #6b7280;
|
||||
}
|
||||
.time-axis {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 80px;
|
||||
height: 60px;
|
||||
background: rgba(0,0,0,0.3);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 0 40px;
|
||||
font-size: 11px;
|
||||
color: #6b7280;
|
||||
}
|
||||
.candles-area {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 40px;
|
||||
right: 100px;
|
||||
bottom: 80px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.mock-candle {
|
||||
width: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.mock-candle-body {
|
||||
width: 100%;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.mock-candle-body.bullish { background: #10b981; }
|
||||
.mock-candle-body.bearish { background: #ef4444; }
|
||||
.mock-wick {
|
||||
width: 2px;
|
||||
background: inherit;
|
||||
}
|
||||
.signal-dot {
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
.signal-dot.buy {
|
||||
bottom: -35px;
|
||||
background: rgba(16, 185, 129, 0.3);
|
||||
border: 2px solid #10b981;
|
||||
color: #10b981;
|
||||
}
|
||||
.signal-dot.sell {
|
||||
top: -35px;
|
||||
background: rgba(239, 68, 68, 0.3);
|
||||
border: 2px solid #ef4444;
|
||||
color: #ef4444;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(1.1); opacity: 0.8; }
|
||||
}
|
||||
|
||||
/* 보조지표 차트 */
|
||||
.indicator-charts {
|
||||
height: 120px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
.indicator-panel {
|
||||
flex: 1;
|
||||
background: rgba(255,255,255,0.02);
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
padding: 12px;
|
||||
}
|
||||
.indicator-title {
|
||||
font-size: 11px;
|
||||
color: #6b7280;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.indicator-chart-mock {
|
||||
height: calc(100% - 24px);
|
||||
background: linear-gradient(180deg, rgba(139, 92, 246, 0.1) 0%, transparent 50%, rgba(239, 68, 68, 0.1) 100%);
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
}
|
||||
.indicator-line {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 10%;
|
||||
right: 10%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981, #8b5cf6);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
/* 오른쪽 패널 */
|
||||
.right-panel {
|
||||
width: 320px;
|
||||
background: #141428;
|
||||
border-left: 1px solid rgba(255,255,255,0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.panel-tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
.panel-tab {
|
||||
flex: 1;
|
||||
padding: 14px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #6b7280;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
.panel-tab.active {
|
||||
color: #fff;
|
||||
border-bottom-color: #8b5cf6;
|
||||
}
|
||||
.panel-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* 통계 그리드 */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.stat-box {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border-radius: 10px;
|
||||
padding: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 11px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* 정확도 바 */
|
||||
.accuracy-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.accuracy-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.accuracy-bar-bg {
|
||||
height: 8px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.accuracy-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #8b5cf6, #10b981);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 거래 리스트 */
|
||||
.trade-list-header {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
.trade-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background: rgba(255,255,255,0.02);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
gap: 12px;
|
||||
}
|
||||
.trade-entry-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.trade-entry-icon.buy {
|
||||
background: rgba(16, 185, 129, 0.2);
|
||||
color: #10b981;
|
||||
}
|
||||
.trade-entry-icon.sell {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #ef4444;
|
||||
}
|
||||
.trade-entry-details {
|
||||
flex: 1;
|
||||
}
|
||||
.trade-entry-price {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.trade-entry-time {
|
||||
font-size: 11px;
|
||||
color: #6b7280;
|
||||
}
|
||||
.trade-entry-result {
|
||||
text-align: right;
|
||||
}
|
||||
.trade-entry-pnl {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.trade-entry-pnl.profit { color: #10b981; }
|
||||
.trade-entry-pnl.loss { color: #ef4444; }
|
||||
.trade-entry-return {
|
||||
font-size: 11px;
|
||||
color: #6b7280;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="logo">투자전략 백테스터</div>
|
||||
<span class="version-badge">V2 - 차트 중심 스타일</span>
|
||||
</div>
|
||||
|
||||
<div class="main-layout">
|
||||
<!-- 왼쪽 사이드바 -->
|
||||
<aside class="left-sidebar">
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-title">📊 백테스트 설정</div>
|
||||
<div class="input-group">
|
||||
<label>종목</label>
|
||||
<select>
|
||||
<option>BTC/KRW</option>
|
||||
<option>ETH/KRW</option>
|
||||
<option>XRP/KRW</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>투자전략</label>
|
||||
<select>
|
||||
<option>MACD 크로스오버</option>
|
||||
<option>RSI 과매수/과매도</option>
|
||||
<option>볼린저밴드</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>시간 프레임</label>
|
||||
<select>
|
||||
<option>1시간</option>
|
||||
<option>4시간</option>
|
||||
<option>1일</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>분석 기간</label>
|
||||
<input type="text" value="2024.01.01 - 2024.03.15">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>초기 자본</label>
|
||||
<input type="text" value="₩10,000,000">
|
||||
</div>
|
||||
<button class="btn-execute">▶ 백테스트 실행</button>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-title">📈 성과 요약</div>
|
||||
<div class="performance-cards">
|
||||
<div class="perf-card">
|
||||
<div class="perf-card-header">
|
||||
<span class="perf-label">총 수익률</span>
|
||||
<span class="perf-icon">📊</span>
|
||||
</div>
|
||||
<div class="perf-value up">+18.7%</div>
|
||||
<div class="perf-sub">₩1,870,000 수익</div>
|
||||
</div>
|
||||
<div class="perf-card">
|
||||
<div class="perf-card-header">
|
||||
<span class="perf-label">최종 자산</span>
|
||||
<span class="perf-icon">💰</span>
|
||||
</div>
|
||||
<div class="perf-value">₩11,870,000</div>
|
||||
<div class="perf-sub">원금 대비 +18.7%</div>
|
||||
</div>
|
||||
<div class="perf-card">
|
||||
<div class="perf-card-header">
|
||||
<span class="perf-label">최대 낙폭</span>
|
||||
<span class="perf-icon">📉</span>
|
||||
</div>
|
||||
<div class="perf-value down">-6.3%</div>
|
||||
<div class="perf-sub">2024.02.05 기록</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 중앙 차트 영역 -->
|
||||
<main class="chart-area">
|
||||
<div class="symbol-header">
|
||||
<div class="symbol-info">
|
||||
<span class="symbol-name">BTC/KRW</span>
|
||||
<span class="symbol-price">₩58,450,000</span>
|
||||
<span class="symbol-change up">▲ +2.34% (+1,340,000)</span>
|
||||
</div>
|
||||
<div class="timeframe-tabs">
|
||||
<button class="tf-tab">15분</button>
|
||||
<button class="tf-tab active">1시간</button>
|
||||
<button class="tf-tab">4시간</button>
|
||||
<button class="tf-tab">1일</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-chart">
|
||||
<div class="chart-toolbar">
|
||||
<button class="chart-tool">✏️</button>
|
||||
<button class="chart-tool">📏</button>
|
||||
<button class="chart-tool">🔍</button>
|
||||
<button class="chart-tool">📷</button>
|
||||
</div>
|
||||
<div class="chart-mock">
|
||||
<div class="price-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="time-axis">
|
||||
<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="candles-area">
|
||||
<div class="mock-candle"><div class="mock-candle-body bullish" style="height: 45px;"></div></div>
|
||||
<div class="mock-candle"><div class="mock-candle-body bullish" style="height: 30px;"></div></div>
|
||||
<div class="mock-candle"><div class="mock-candle-body bearish" style="height: 55px;"></div></div>
|
||||
<div class="mock-candle"><div class="mock-candle-body bearish" style="height: 40px;"></div><div class="signal-dot buy">B</div></div>
|
||||
<div class="mock-candle"><div class="mock-candle-body bullish" style="height: 50px;"></div></div>
|
||||
<div class="mock-candle"><div class="mock-candle-body bullish" style="height: 70px;"></div></div>
|
||||
<div class="mock-candle"><div class="mock-candle-body bullish" style="height: 60px;"></div></div>
|
||||
<div class="mock-candle"><div class="mock-candle-body bearish" style="height: 35px;"></div><div class="signal-dot sell">S</div></div>
|
||||
<div class="mock-candle"><div class="mock-candle-body bearish" style="height: 50px;"></div></div>
|
||||
<div class="mock-candle"><div class="mock-candle-body bullish" style="height: 40px;"></div></div>
|
||||
<div class="mock-candle"><div class="mock-candle-body bearish" style="height: 25px;"></div><div class="signal-dot buy">B</div></div>
|
||||
<div class="mock-candle"><div class="mock-candle-body bullish" style="height: 55px;"></div></div>
|
||||
<div class="mock-candle"><div class="mock-candle-body bullish" style="height: 65px;"></div></div>
|
||||
<div class="mock-candle"><div class="mock-candle-body bullish" style="height: 75px;"></div></div>
|
||||
<div class="mock-candle"><div class="mock-candle-body bearish" style="height: 30px;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="indicator-charts">
|
||||
<div class="indicator-panel">
|
||||
<div class="indicator-title">MACD (12, 26, 9)</div>
|
||||
<div class="indicator-chart-mock">
|
||||
<div class="indicator-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="indicator-panel">
|
||||
<div class="indicator-title">RSI (14)</div>
|
||||
<div class="indicator-chart-mock">
|
||||
<div class="indicator-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="indicator-panel">
|
||||
<div class="indicator-title">Volume</div>
|
||||
<div class="indicator-chart-mock">
|
||||
<div class="indicator-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 오른쪽 패널 -->
|
||||
<aside class="right-panel">
|
||||
<div class="panel-tabs">
|
||||
<button class="panel-tab active">통계</button>
|
||||
<button class="panel-tab">거래내역</button>
|
||||
<button class="panel-tab">분석</button>
|
||||
</div>
|
||||
<div class="panel-content">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-box">
|
||||
<div class="stat-value" style="color: #10b981;">68%</div>
|
||||
<div class="stat-label">승률</div>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<div class="stat-value">23</div>
|
||||
<div class="stat-label">총 거래</div>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<div class="stat-value" style="color: #10b981;">15</div>
|
||||
<div class="stat-label">수익 거래</div>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<div class="stat-value" style="color: #ef4444;">8</div>
|
||||
<div class="stat-label">손실 거래</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accuracy-section">
|
||||
<div class="accuracy-header">
|
||||
<span style="font-size: 12px; color: #9ca3af;">전략 정확도</span>
|
||||
<span style="font-size: 14px; font-weight: 600; color: #10b981;">72%</span>
|
||||
</div>
|
||||
<div class="accuracy-bar-bg">
|
||||
<div class="accuracy-bar" style="width: 72%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accuracy-section">
|
||||
<div class="accuracy-header">
|
||||
<span style="font-size: 12px; color: #9ca3af;">매수 정확도</span>
|
||||
<span style="font-size: 14px; font-weight: 600; color: #8b5cf6;">78%</span>
|
||||
</div>
|
||||
<div class="accuracy-bar-bg">
|
||||
<div class="accuracy-bar" style="width: 78%; background: #8b5cf6;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accuracy-section">
|
||||
<div class="accuracy-header">
|
||||
<span style="font-size: 12px; color: #9ca3af;">매도 정확도</span>
|
||||
<span style="font-size: 14px; font-weight: 600; color: #f59e0b;">65%</span>
|
||||
</div>
|
||||
<div class="accuracy-bar-bg">
|
||||
<div class="accuracy-bar" style="width: 65%; background: #f59e0b;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trade-list-header">최근 거래</div>
|
||||
<div class="trade-entry">
|
||||
<div class="trade-entry-icon sell">S</div>
|
||||
<div class="trade-entry-details">
|
||||
<div class="trade-entry-price">₩58,450,000</div>
|
||||
<div class="trade-entry-time">2024.03.15 14:00</div>
|
||||
</div>
|
||||
<div class="trade-entry-result">
|
||||
<div class="trade-entry-pnl profit">+₩520,000</div>
|
||||
<div class="trade-entry-return">+4.8%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trade-entry">
|
||||
<div class="trade-entry-icon buy">B</div>
|
||||
<div class="trade-entry-details">
|
||||
<div class="trade-entry-price">₩55,800,000</div>
|
||||
<div class="trade-entry-time">2024.03.12 09:00</div>
|
||||
</div>
|
||||
<div class="trade-entry-result">
|
||||
<div class="trade-entry-pnl">진행중</div>
|
||||
<div class="trade-entry-return">-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trade-entry">
|
||||
<div class="trade-entry-icon sell">S</div>
|
||||
<div class="trade-entry-details">
|
||||
<div class="trade-entry-price">₩54,200,000</div>
|
||||
<div class="trade-entry-time">2024.03.08 16:00</div>
|
||||
</div>
|
||||
<div class="trade-entry-result">
|
||||
<div class="trade-entry-pnl loss">-₩180,000</div>
|
||||
<div class="trade-entry-return">-1.8%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trade-entry">
|
||||
<div class="trade-entry-icon buy">B</div>
|
||||
<div class="trade-entry-details">
|
||||
<div class="trade-entry-price">₩55,200,000</div>
|
||||
<div class="trade-entry-time">2024.03.05 11:00</div>
|
||||
</div>
|
||||
<div class="trade-entry-result">
|
||||
<div class="trade-entry-pnl">-</div>
|
||||
<div class="trade-entry-return">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,911 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,726 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,508 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1024">
|
||||
<title>Tablet-01 그리드 대시보드</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%);
|
||||
color: #fff;
|
||||
width: 1024px;
|
||||
min-height: 768px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 16px 24px;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.logo {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.header-right {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
.version-badge {
|
||||
background: rgba(139, 92, 246, 0.2);
|
||||
color: #a78bfa;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #8b5cf6, #6366f1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/* 설정 바 */
|
||||
.config-bar {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.config-field {
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
}
|
||||
.config-label {
|
||||
font-size: 11px;
|
||||
color: #9ca3af;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.config-select {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
}
|
||||
.run-btn {
|
||||
padding: 10px 24px;
|
||||
background: linear-gradient(135deg, #10b981, #059669);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 메인 그리드 */
|
||||
.main-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: auto auto 1fr auto;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* 결과 배너 */
|
||||
.result-banner {
|
||||
grid-column: span 4;
|
||||
background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.05));
|
||||
border: 1px solid rgba(16, 185, 129, 0.3);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.result-symbol {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.result-meta {
|
||||
font-size: 13px;
|
||||
color: #9ca3af;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.result-value {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: #10b981;
|
||||
}
|
||||
.result-amount {
|
||||
font-size: 13px;
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
/* 메트릭 카드 */
|
||||
.metric-card {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-radius: 14px;
|
||||
padding: 18px;
|
||||
}
|
||||
.metric-icon {
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.metric-label {
|
||||
font-size: 11px;
|
||||
color: #9ca3af;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.metric-value {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.metric-value.green { color: #10b981; }
|
||||
.metric-value.red { color: #ef4444; }
|
||||
|
||||
/* 차트 영역 */
|
||||
.chart-card {
|
||||
grid-column: span 3;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.tab {
|
||||
padding: 6px 12px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #9ca3af;
|
||||
font-size: 11px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tab.active { background: #8b5cf6; color: #fff; }
|
||||
|
||||
.chart-area {
|
||||
height: 240px;
|
||||
background: rgba(0,0,0,0.2);
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chart-candles {
|
||||
position: absolute;
|
||||
inset: 20px 40px 40px 20px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.candle {
|
||||
width: 10px;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
}
|
||||
.candle.up { background: #10b981; }
|
||||
.candle.down { background: #ef4444; }
|
||||
.signal {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.signal.buy { bottom: -26px; left: 50%; transform: translateX(-50%); background: rgba(16, 185, 129, 0.3); color: #10b981; border: 2px solid #10b981; }
|
||||
.signal.sell { top: -26px; left: 50%; transform: translateX(-50%); background: rgba(239, 68, 68, 0.3); color: #ef4444; border: 2px solid #ef4444; }
|
||||
|
||||
/* 정확도 */
|
||||
.accuracy-card {
|
||||
grid-row: span 2;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.accuracy-ring {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: 16px auto;
|
||||
border-radius: 50%;
|
||||
background: conic-gradient(#8b5cf6 0deg 252deg, rgba(255,255,255,0.1) 252deg 360deg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.accuracy-inner {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
background: #1a1a2e;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.accuracy-pct {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: #8b5cf6;
|
||||
}
|
||||
.accuracy-text {
|
||||
font-size: 10px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
.acc-bar {
|
||||
margin-bottom: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
.acc-bar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 11px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.acc-bar-bg {
|
||||
height: 6px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.acc-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.acc-bar-fill.green { background: #10b981; }
|
||||
.acc-bar-fill.purple { background: #8b5cf6; }
|
||||
|
||||
/* 거래 */
|
||||
.trades-card {
|
||||
grid-column: span 4;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
}
|
||||
.trades-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
.trade-item {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-radius: 10px;
|
||||
padding: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.trade-badge {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.trade-badge.buy { background: rgba(16, 185, 129, 0.2); color: #10b981; }
|
||||
.trade-badge.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: #6b7280; }
|
||||
.trade-result { text-align: right; }
|
||||
.trade-price { font-size: 11px; }
|
||||
.trade-pnl { font-size: 11px; font-weight: 600; }
|
||||
.trade-pnl.profit { color: #10b981; }
|
||||
.trade-pnl.loss { color: #ef4444; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="logo">📊 백테스트</div>
|
||||
<div class="header-right">
|
||||
<span class="version-badge">Tablet-01 그리드</span>
|
||||
<button class="btn btn-primary">+ 새 테스트</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="config-bar">
|
||||
<div class="config-field">
|
||||
<div class="config-label">종목</div>
|
||||
<select class="config-select"><option>BTC/KRW</option></select>
|
||||
</div>
|
||||
<div class="config-field">
|
||||
<div class="config-label">전략</div>
|
||||
<select class="config-select"><option>MACD+RSI</option></select>
|
||||
</div>
|
||||
<div class="config-field">
|
||||
<div class="config-label">시간봉</div>
|
||||
<select class="config-select"><option>1시간</option></select>
|
||||
</div>
|
||||
<div class="config-field">
|
||||
<div class="config-label">기간</div>
|
||||
<select class="config-select"><option>3개월</option></select>
|
||||
</div>
|
||||
<div class="config-field">
|
||||
<div class="config-label">초기자본</div>
|
||||
<input type="text" class="config-select" value="₩10M">
|
||||
</div>
|
||||
<button class="run-btn">▶ 실행</button>
|
||||
</div>
|
||||
|
||||
<div class="main-grid">
|
||||
<div class="result-banner">
|
||||
<div>
|
||||
<div class="result-symbol">BTC/KRW</div>
|
||||
<div class="result-meta">MACD+RSI · 1H · 3개월</div>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<div class="result-value">+23.5%</div>
|
||||
<div class="result-amount">₩2,350,000 수익</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-card">
|
||||
<div class="metric-icon">💰</div>
|
||||
<div class="metric-label">최종 자산</div>
|
||||
<div class="metric-value">₩12.35M</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-icon">🎯</div>
|
||||
<div class="metric-label">승률</div>
|
||||
<div class="metric-value green">68%</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-icon">🔄</div>
|
||||
<div class="metric-label">총 거래</div>
|
||||
<div class="metric-value">25회</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-icon">📉</div>
|
||||
<div class="metric-label">최대 낙폭</div>
|
||||
<div class="metric-value red">-8.2%</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">📈 가격 차트</span>
|
||||
<div class="tabs">
|
||||
<button class="tab active">캔들</button>
|
||||
<button class="tab">라인</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-area">
|
||||
<div class="chart-candles">
|
||||
<div class="candle up" style="height: 40px;"></div>
|
||||
<div class="candle up" style="height: 55px;"></div>
|
||||
<div class="candle down" style="height: 35px;"></div>
|
||||
<div class="candle down" style="height: 50px;"><div class="signal buy">B</div></div>
|
||||
<div class="candle up" style="height: 65px;"></div>
|
||||
<div class="candle up" style="height: 85px;"></div>
|
||||
<div class="candle up" style="height: 75px;"></div>
|
||||
<div class="candle down" style="height: 45px;"><div class="signal sell">S</div></div>
|
||||
<div class="candle down" style="height: 60px;"></div>
|
||||
<div class="candle up" style="height: 50px;"></div>
|
||||
<div class="candle down" style="height: 35px;"><div class="signal buy">B</div></div>
|
||||
<div class="candle up" style="height: 55px;"></div>
|
||||
<div class="candle up" style="height: 70px;"></div>
|
||||
<div class="candle up" style="height: 80px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accuracy-card">
|
||||
<div class="card-title">🎯 정확도</div>
|
||||
<div class="accuracy-ring">
|
||||
<div class="accuracy-inner">
|
||||
<div class="accuracy-pct">70%</div>
|
||||
<div class="accuracy-text">전체</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="acc-bar">
|
||||
<div class="acc-bar-header">
|
||||
<span style="color: #9ca3af;">매수</span>
|
||||
<span style="color: #10b981;">76%</span>
|
||||
</div>
|
||||
<div class="acc-bar-bg"><div class="acc-bar-fill green" style="width: 76%;"></div></div>
|
||||
</div>
|
||||
<div class="acc-bar">
|
||||
<div class="acc-bar-header">
|
||||
<span style="color: #9ca3af;">매도</span>
|
||||
<span style="color: #8b5cf6;">64%</span>
|
||||
</div>
|
||||
<div class="acc-bar-bg"><div class="acc-bar-fill purple" style="width: 64%;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trades-card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">📋 최근 거래</span>
|
||||
<span style="font-size: 11px; color: #8b5cf6; cursor: pointer;">전체보기 →</span>
|
||||
</div>
|
||||
<div class="trades-grid">
|
||||
<div class="trade-item">
|
||||
<div class="trade-badge 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.4M</div>
|
||||
<div class="trade-pnl profit">+5.2%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trade-item">
|
||||
<div class="trade-badge 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.5M</div>
|
||||
<div class="trade-pnl">-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trade-item">
|
||||
<div class="trade-badge 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 class="trade-item">
|
||||
<div class="trade-badge buy">B</div>
|
||||
<div class="trade-info">
|
||||
<div class="trade-type">매수</div>
|
||||
<div class="trade-time">03.05 11:00</div>
|
||||
</div>
|
||||
<div class="trade-result">
|
||||
<div class="trade-price">₩55.3M</div>
|
||||
<div class="trade-pnl">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,482 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=768">
|
||||
<title>Tablet-02 카드 스택</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: #f1f5f9;
|
||||
color: #1e293b;
|
||||
width: 768px;
|
||||
min-height: 1024px;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #fff;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.logo {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #1e40af;
|
||||
}
|
||||
.version-badge {
|
||||
background: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 카드 */
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.card-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 설정 카드 */
|
||||
.config-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
.config-field {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.config-label {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.config-input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.config-input:focus { outline: none; border-color: #3b82f6; }
|
||||
.run-btn {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
background: linear-gradient(135deg, #3b82f6, #2563eb);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* 결과 카드 */
|
||||
.result-card {
|
||||
background: linear-gradient(135deg, #3b82f6, #2563eb);
|
||||
color: #fff;
|
||||
}
|
||||
.result-card .card-body {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.result-symbol {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.result-meta {
|
||||
font-size: 13px;
|
||||
opacity: 0.9;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.result-value {
|
||||
font-size: 40px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.result-amount {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* 메트릭 */
|
||||
.metrics-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
.metric-item {
|
||||
background: #f8fafc;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
.metric-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.metric-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.metric-value.green { color: #16a34a; }
|
||||
.metric-value.red { color: #dc2626; }
|
||||
.metric-label {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
/* 차트 */
|
||||
.chart-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.chart-tab {
|
||||
padding: 8px 16px;
|
||||
background: #f1f5f9;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
}
|
||||
.chart-tab.active { background: #3b82f6; color: #fff; }
|
||||
.chart-area {
|
||||
height: 280px;
|
||||
background: #fafbfc;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chart-candles {
|
||||
position: absolute;
|
||||
inset: 30px 50px 50px 20px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.candle {
|
||||
width: 12px;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
}
|
||||
.candle.up { background: #16a34a; }
|
||||
.candle.down { background: #dc2626; }
|
||||
.signal {
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.signal.buy { bottom: -28px; left: 50%; transform: translateX(-50%); background: #dcfce7; color: #16a34a; border: 2px solid #16a34a; }
|
||||
.signal.sell { top: -28px; left: 50%; transform: translateX(-50%); background: #fee2e2; color: #dc2626; border: 2px solid #dc2626; }
|
||||
|
||||
/* 정확도 + 거래 */
|
||||
.two-col {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.5fr;
|
||||
gap: 16px;
|
||||
}
|
||||
.accuracy-ring {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
margin: 0 auto 16px;
|
||||
border-radius: 50%;
|
||||
background: conic-gradient(#16a34a 0deg 252deg, #e2e8f0 252deg 360deg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.accuracy-inner {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.accuracy-pct {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #16a34a;
|
||||
}
|
||||
.accuracy-text {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
}
|
||||
.acc-bar {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.acc-bar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.acc-bar-bg {
|
||||
height: 8px;
|
||||
background: #e2e8f0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.acc-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.acc-bar-fill.green { background: linear-gradient(90deg, #16a34a, #22c55e); }
|
||||
.acc-bar-fill.yellow { background: linear-gradient(90deg, #ca8a04, #eab308); }
|
||||
|
||||
/* 거래 리스트 */
|
||||
.trade-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 14px;
|
||||
background: #f8fafc;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.trade-badge {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
margin-right: 14px;
|
||||
}
|
||||
.trade-badge.buy { background: #dcfce7; color: #16a34a; }
|
||||
.trade-badge.sell { background: #fee2e2; color: #dc2626; }
|
||||
.trade-info { flex: 1; }
|
||||
.trade-type { font-size: 14px; font-weight: 500; }
|
||||
.trade-time { font-size: 12px; color: #64748b; }
|
||||
.trade-result { text-align: right; }
|
||||
.trade-price { font-size: 14px; font-weight: 500; }
|
||||
.trade-pnl { font-size: 13px; font-weight: 600; }
|
||||
.trade-pnl.profit { color: #16a34a; }
|
||||
.trade-pnl.loss { color: #dc2626; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<span class="logo">📊 백테스트</span>
|
||||
<span class="version-badge">Tablet-02 카드</span>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<!-- 설정 -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">⚙️ 테스트 설정</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="config-grid">
|
||||
<div class="config-field">
|
||||
<div class="config-label">종목</div>
|
||||
<select class="config-input"><option>BTC/KRW</option></select>
|
||||
</div>
|
||||
<div class="config-field">
|
||||
<div class="config-label">전략</div>
|
||||
<select class="config-input"><option>MACD+RSI</option></select>
|
||||
</div>
|
||||
<div class="config-field">
|
||||
<div class="config-label">시간봉</div>
|
||||
<select class="config-input"><option>1시간</option></select>
|
||||
</div>
|
||||
<div class="config-field">
|
||||
<div class="config-label">분석기간</div>
|
||||
<select class="config-input"><option>3개월</option></select>
|
||||
</div>
|
||||
<div class="config-field">
|
||||
<div class="config-label">초기자본</div>
|
||||
<input type="text" class="config-input" value="₩10,000,000">
|
||||
</div>
|
||||
</div>
|
||||
<button class="run-btn">▶ 백테스트 실행</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 결과 -->
|
||||
<div class="card result-card">
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="result-symbol">BTC/KRW</div>
|
||||
<div class="result-meta">MACD+RSI · 1시간봉 · 3개월</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="result-value">+23.5%</div>
|
||||
<div class="result-amount">₩2,350,000 수익</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 메트릭 -->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="metrics-row">
|
||||
<div class="metric-item">
|
||||
<div class="metric-icon">💰</div>
|
||||
<div class="metric-value">₩12.35M</div>
|
||||
<div class="metric-label">최종 자산</div>
|
||||
</div>
|
||||
<div class="metric-item">
|
||||
<div class="metric-icon">🎯</div>
|
||||
<div class="metric-value green">68%</div>
|
||||
<div class="metric-label">승률</div>
|
||||
</div>
|
||||
<div class="metric-item">
|
||||
<div class="metric-icon">🔄</div>
|
||||
<div class="metric-value">25회</div>
|
||||
<div class="metric-label">총 거래</div>
|
||||
</div>
|
||||
<div class="metric-item">
|
||||
<div class="metric-icon">📉</div>
|
||||
<div class="metric-value red">-8.2%</div>
|
||||
<div class="metric-label">최대 낙폭</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 차트 -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">📈 가격 차트</span>
|
||||
<div class="chart-tabs">
|
||||
<button class="chart-tab active">캔들</button>
|
||||
<button class="chart-tab">라인</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart-area">
|
||||
<div class="chart-candles">
|
||||
<div class="candle up" style="height: 45px;"></div>
|
||||
<div class="candle up" style="height: 60px;"></div>
|
||||
<div class="candle down" style="height: 40px;"></div>
|
||||
<div class="candle down" style="height: 55px;"><div class="signal buy">B</div></div>
|
||||
<div class="candle up" style="height: 70px;"></div>
|
||||
<div class="candle up" style="height: 90px;"></div>
|
||||
<div class="candle up" style="height: 80px;"></div>
|
||||
<div class="candle down" style="height: 50px;"><div class="signal sell">S</div></div>
|
||||
<div class="candle down" style="height: 65px;"></div>
|
||||
<div class="candle up" style="height: 55px;"></div>
|
||||
<div class="candle down" style="height: 40px;"><div class="signal buy">B</div></div>
|
||||
<div class="candle up" style="height: 60px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 정확도 + 거래 -->
|
||||
<div class="two-col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">🎯 정확도</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="accuracy-ring">
|
||||
<div class="accuracy-inner">
|
||||
<div class="accuracy-pct">70%</div>
|
||||
<div class="accuracy-text">전체 정확도</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="acc-bar">
|
||||
<div class="acc-bar-header">
|
||||
<span style="color: #64748b;">매수</span>
|
||||
<span style="color: #16a34a; font-weight: 600;">76%</span>
|
||||
</div>
|
||||
<div class="acc-bar-bg"><div class="acc-bar-fill green" style="width: 76%;"></div></div>
|
||||
</div>
|
||||
<div class="acc-bar">
|
||||
<div class="acc-bar-header">
|
||||
<span style="color: #64748b;">매도</span>
|
||||
<span style="color: #ca8a04; font-weight: 600;">64%</span>
|
||||
</div>
|
||||
<div class="acc-bar-bg"><div class="acc-bar-fill yellow" style="width: 64%;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">📋 최근 거래</span>
|
||||
</div>
|
||||
<div class="card-body" style="padding-top: 12px;">
|
||||
<div class="trade-item">
|
||||
<div class="trade-badge sell">S</div>
|
||||
<div class="trade-info">
|
||||
<div class="trade-type">매도</div>
|
||||
<div class="trade-time">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-badge buy">B</div>
|
||||
<div class="trade-info">
|
||||
<div class="trade-type">매수</div>
|
||||
<div class="trade-time">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-badge sell">S</div>
|
||||
<div class="trade-info">
|
||||
<div class="trade-type">매도</div>
|
||||
<div class="trade-time">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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,272 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1024">
|
||||
<title>Tablet-03 가로 분할</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: #0c0c14; color: #e4e4e7; width: 1024px; height: 768px; overflow: hidden; }
|
||||
|
||||
.layout { display: flex; flex-direction: column; height: 100%; }
|
||||
|
||||
.header { padding: 12px 20px; background: #161622; border-bottom: 1px solid #27272a; display: flex; justify-content: space-between; align-items: center; }
|
||||
.logo { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
|
||||
.version-badge { background: rgba(59, 130, 246, 0.2); color: #60a5fa; padding: 4px 10px; border-radius: 10px; font-size: 10px; }
|
||||
.btn { padding: 8px 16px; background: #3b82f6; border: none; border-radius: 6px; color: #fff; font-size: 12px; font-weight: 500; cursor: pointer; }
|
||||
|
||||
/* 상단: 설정 + 결과 */
|
||||
.top-section { display: flex; border-bottom: 1px solid #27272a; }
|
||||
.config-panel { width: 400px; padding: 16px; border-right: 1px solid #27272a; }
|
||||
.config-row { display: flex; gap: 12px; margin-bottom: 12px; }
|
||||
.config-field { flex: 1; }
|
||||
.config-label { font-size: 10px; color: #71717a; margin-bottom: 4px; }
|
||||
.config-select { width: 100%; padding: 8px 10px; background: #1f1f2e; border: 1px solid #27272a; border-radius: 6px; color: #fff; font-size: 12px; }
|
||||
.run-btn { width: 100%; padding: 10px; background: linear-gradient(135deg, #3b82f6, #2563eb); border: none; border-radius: 8px; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
|
||||
.result-panel { flex: 1; padding: 16px; display: flex; gap: 20px; align-items: center; }
|
||||
.result-main { flex: 1; }
|
||||
.result-symbol { font-size: 20px; font-weight: 700; }
|
||||
.result-meta { font-size: 11px; color: #71717a; margin-top: 2px; }
|
||||
.result-value { font-size: 36px; font-weight: 700; color: #22c55e; }
|
||||
.result-amount { font-size: 12px; color: #22c55e; }
|
||||
.metrics-strip { display: flex; gap: 20px; }
|
||||
.metric-mini { text-align: center; padding: 12px 16px; background: rgba(255,255,255,0.05); border-radius: 10px; }
|
||||
.metric-mini-value { font-size: 18px; font-weight: 600; }
|
||||
.metric-mini-value.green { color: #22c55e; }
|
||||
.metric-mini-value.red { color: #ef4444; }
|
||||
.metric-mini-label { font-size: 10px; color: #71717a; margin-top: 2px; }
|
||||
|
||||
/* 하단: 차트 + 정보 */
|
||||
.bottom-section { flex: 1; display: flex; overflow: hidden; }
|
||||
|
||||
/* 차트 */
|
||||
.chart-section { flex: 1; display: flex; flex-direction: column; border-right: 1px solid #27272a; }
|
||||
.chart-header { padding: 12px 16px; border-bottom: 1px solid #27272a; display: flex; justify-content: space-between; align-items: center; }
|
||||
.chart-title { font-size: 13px; font-weight: 600; }
|
||||
.tabs { display: flex; gap: 4px; }
|
||||
.tab { padding: 6px 12px; background: transparent; border: 1px solid #27272a; border-radius: 6px; color: #71717a; font-size: 11px; cursor: pointer; }
|
||||
.tab.active { background: #3b82f6; border-color: #3b82f6; color: #fff; }
|
||||
.chart-area { flex: 1; position: relative; background: linear-gradient(90deg, rgba(39, 39, 42, 0.2) 1px, transparent 1px), linear-gradient(rgba(39, 39, 42, 0.2) 1px, transparent 1px); background-size: 40px 30px; }
|
||||
.chart-candles { position: absolute; inset: 20px 50px 40px 20px; display: flex; align-items: flex-end; justify-content: space-around; }
|
||||
.candle { width: 10px; border-radius: 2px; position: relative; }
|
||||
.candle.up { background: #22c55e; }
|
||||
.candle.down { background: #ef4444; }
|
||||
.signal { position: absolute; width: 18px; height: 18px; border-radius: 50%; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
|
||||
.signal.buy { bottom: -24px; left: 50%; transform: translateX(-50%); background: rgba(34, 197, 94, 0.3); color: #22c55e; border: 1.5px solid #22c55e; }
|
||||
.signal.sell { top: -24px; left: 50%; transform: translateX(-50%); background: rgba(239, 68, 68, 0.3); color: #ef4444; border: 1.5px solid #ef4444; }
|
||||
|
||||
/* 사이드 패널 */
|
||||
.side-panel { width: 280px; display: flex; flex-direction: column; }
|
||||
.panel-section { padding: 16px; border-bottom: 1px solid #27272a; }
|
||||
.section-title { font-size: 12px; font-weight: 600; margin-bottom: 12px; }
|
||||
.accuracy-row { display: flex; align-items: center; gap: 16px; }
|
||||
.accuracy-ring { width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(#3b82f6 0deg 252deg, #27272a 252deg 360deg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.accuracy-inner { width: 60px; height: 60px; background: #0c0c14; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
||||
.accuracy-pct { font-size: 18px; font-weight: 700; color: #3b82f6; }
|
||||
.accuracy-text { font-size: 8px; color: #71717a; }
|
||||
.accuracy-bars { flex: 1; }
|
||||
.acc-bar { margin-bottom: 8px; }
|
||||
.acc-bar-header { display: flex; justify-content: space-between; font-size: 10px; margin-bottom: 3px; }
|
||||
.acc-bar-bg { height: 5px; background: #27272a; border-radius: 3px; overflow: hidden; }
|
||||
.acc-bar-fill { height: 100%; border-radius: 3px; }
|
||||
.acc-bar-fill.blue { background: #3b82f6; }
|
||||
.acc-bar-fill.green { background: #22c55e; }
|
||||
|
||||
.trades-list { flex: 1; overflow-y: auto; padding: 12px 16px; }
|
||||
.trade-item { display: flex; align-items: center; padding: 10px; background: rgba(255,255,255,0.03); border-radius: 8px; margin-bottom: 6px; }
|
||||
.trade-badge { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; margin-right: 10px; }
|
||||
.trade-badge.buy { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
|
||||
.trade-badge.sell { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
|
||||
.trade-info { flex: 1; }
|
||||
.trade-type { font-size: 11px; font-weight: 500; }
|
||||
.trade-time { font-size: 9px; color: #52525b; }
|
||||
.trade-result { text-align: right; }
|
||||
.trade-price { font-size: 10px; }
|
||||
.trade-pnl { font-size: 10px; font-weight: 600; }
|
||||
.trade-pnl.profit { color: #22c55e; }
|
||||
.trade-pnl.loss { color: #ef4444; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layout">
|
||||
<header class="header">
|
||||
<div class="logo">📊 백테스트 시뮬레이터</div>
|
||||
<div style="display: flex; gap: 12px; align-items: center;">
|
||||
<span class="version-badge">Tablet-03 가로분할</span>
|
||||
<button class="btn">+ 새 테스트</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="top-section">
|
||||
<div class="config-panel">
|
||||
<div class="config-row">
|
||||
<div class="config-field">
|
||||
<div class="config-label">종목</div>
|
||||
<select class="config-select"><option>BTC/KRW</option></select>
|
||||
</div>
|
||||
<div class="config-field">
|
||||
<div class="config-label">전략</div>
|
||||
<select class="config-select"><option>MACD+RSI</option></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-row">
|
||||
<div class="config-field">
|
||||
<div class="config-label">시간봉</div>
|
||||
<select class="config-select"><option>1시간</option></select>
|
||||
</div>
|
||||
<div class="config-field">
|
||||
<div class="config-label">기간</div>
|
||||
<select class="config-select"><option>3개월</option></select>
|
||||
</div>
|
||||
<div class="config-field">
|
||||
<div class="config-label">초기자본</div>
|
||||
<input type="text" class="config-select" value="₩10M">
|
||||
</div>
|
||||
</div>
|
||||
<button class="run-btn">▶ 실행</button>
|
||||
</div>
|
||||
|
||||
<div class="result-panel">
|
||||
<div class="result-main">
|
||||
<div class="result-symbol">BTC/KRW</div>
|
||||
<div class="result-meta">MACD+RSI · 1H · 3개월</div>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<div class="result-value">+23.5%</div>
|
||||
<div class="result-amount">₩2,350,000</div>
|
||||
</div>
|
||||
<div class="metrics-strip">
|
||||
<div class="metric-mini">
|
||||
<div class="metric-mini-value">₩12.35M</div>
|
||||
<div class="metric-mini-label">최종자산</div>
|
||||
</div>
|
||||
<div class="metric-mini">
|
||||
<div class="metric-mini-value green">68%</div>
|
||||
<div class="metric-mini-label">승률</div>
|
||||
</div>
|
||||
<div class="metric-mini">
|
||||
<div class="metric-mini-value">25</div>
|
||||
<div class="metric-mini-label">거래</div>
|
||||
</div>
|
||||
<div class="metric-mini">
|
||||
<div class="metric-mini-value red">-8.2%</div>
|
||||
<div class="metric-mini-label">MDD</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-section">
|
||||
<div class="chart-section">
|
||||
<div class="chart-header">
|
||||
<span class="chart-title">📈 가격 차트 & 매매 시점</span>
|
||||
<div class="tabs">
|
||||
<button class="tab active">캔들</button>
|
||||
<button class="tab">라인</button>
|
||||
<button class="tab">수익곡선</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-area">
|
||||
<div class="chart-candles">
|
||||
<div class="candle up" style="height: 40px;"></div>
|
||||
<div class="candle up" style="height: 55px;"></div>
|
||||
<div class="candle down" style="height: 35px;"></div>
|
||||
<div class="candle down" style="height: 50px;"><div class="signal buy">B</div></div>
|
||||
<div class="candle up" style="height: 65px;"></div>
|
||||
<div class="candle up" style="height: 85px;"></div>
|
||||
<div class="candle up" style="height: 75px;"></div>
|
||||
<div class="candle down" style="height: 45px;"><div class="signal sell">S</div></div>
|
||||
<div class="candle down" style="height: 60px;"></div>
|
||||
<div class="candle up" style="height: 50px;"></div>
|
||||
<div class="candle down" style="height: 35px;"><div class="signal buy">B</div></div>
|
||||
<div class="candle up" style="height: 55px;"></div>
|
||||
<div class="candle up" style="height: 70px;"></div>
|
||||
<div class="candle up" style="height: 80px;"></div>
|
||||
<div class="candle down" style="height: 40px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="side-panel">
|
||||
<div class="panel-section">
|
||||
<div class="section-title">🎯 전략 정확도</div>
|
||||
<div class="accuracy-row">
|
||||
<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">
|
||||
<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">
|
||||
<div class="acc-bar-header">
|
||||
<span style="color: #71717a;">매도</span>
|
||||
<span style="color: #3b82f6;">64%</span>
|
||||
</div>
|
||||
<div class="acc-bar-bg"><div class="acc-bar-fill blue" style="width: 64%;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-title" style="padding: 12px 16px 0;">📋 거래 내역</div>
|
||||
<div class="trades-list">
|
||||
<div class="trade-item">
|
||||
<div class="trade-badge 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.4M</div>
|
||||
<div class="trade-pnl profit">+5.2%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trade-item">
|
||||
<div class="trade-badge 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.5M</div>
|
||||
<div class="trade-pnl">-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trade-item">
|
||||
<div class="trade-badge 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 class="trade-item">
|
||||
<div class="trade-badge buy">B</div>
|
||||
<div class="trade-info">
|
||||
<div class="trade-type">매수</div>
|
||||
<div class="trade-time">03.05 11:00</div>
|
||||
</div>
|
||||
<div class="trade-result">
|
||||
<div class="trade-price">₩55.3M</div>
|
||||
<div class="trade-pnl">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,274 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=768">
|
||||
<title>Tablet-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: #18181b; color: #fafafa; width: 768px; min-height: 1024px; }
|
||||
|
||||
/* 헤더 */
|
||||
.header { padding: 16px 20px; background: #09090b; display: flex; justify-content: space-between; align-items: center; }
|
||||
.logo { font-size: 18px; font-weight: 700; }
|
||||
.version-badge { background: rgba(168, 85, 247, 0.2); color: #a78bfa; padding: 4px 10px; border-radius: 10px; font-size: 10px; }
|
||||
|
||||
/* 탭 네비게이션 */
|
||||
.tab-nav { display: flex; background: #09090b; border-bottom: 1px solid #27272a; padding: 0 20px; }
|
||||
.tab-nav-item { padding: 14px 20px; font-size: 14px; color: #71717a; cursor: pointer; border-bottom: 2px solid transparent; }
|
||||
.tab-nav-item.active { color: #a78bfa; border-bottom-color: #a78bfa; font-weight: 500; }
|
||||
|
||||
.container { padding: 20px; }
|
||||
|
||||
/* 설정 패널 */
|
||||
.config-panel { background: #27272a; border-radius: 16px; padding: 20px; margin-bottom: 20px; }
|
||||
.config-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
|
||||
.config-field { }
|
||||
.config-label { font-size: 11px; color: #71717a; margin-bottom: 6px; }
|
||||
.config-input { width: 100%; padding: 12px; background: #18181b; border: 1px solid #3f3f46; border-radius: 8px; color: #fff; font-size: 13px; }
|
||||
.run-btn { grid-column: span 3; padding: 14px; background: linear-gradient(135deg, #a855f7, #7c3aed); border: none; border-radius: 10px; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 8px; }
|
||||
|
||||
/* 결과 카드 */
|
||||
.result-card { background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(124, 58, 237, 0.1)); border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 20px; padding: 24px; margin-bottom: 20px; }
|
||||
.result-row { display: flex; justify-content: space-between; align-items: center; }
|
||||
.result-symbol { font-size: 22px; font-weight: 700; }
|
||||
.result-meta { font-size: 12px; color: #a1a1aa; margin-top: 4px; }
|
||||
.result-return { text-align: right; }
|
||||
.result-value { font-size: 40px; font-weight: 700; color: #22c55e; }
|
||||
.result-amount { font-size: 13px; color: #22c55e; }
|
||||
|
||||
/* 슬라이드 카드 */
|
||||
.slide-cards { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 20px; }
|
||||
.slide-card { flex-shrink: 0; width: 160px; background: #27272a; border-radius: 14px; padding: 18px; text-align: center; }
|
||||
.slide-card-icon { font-size: 28px; margin-bottom: 10px; }
|
||||
.slide-card-value { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
|
||||
.slide-card-value.green { color: #22c55e; }
|
||||
.slide-card-value.red { color: #ef4444; }
|
||||
.slide-card-label { font-size: 11px; color: #71717a; }
|
||||
|
||||
/* 차트 */
|
||||
.chart-section { background: #27272a; border-radius: 16px; padding: 20px; margin-bottom: 20px; }
|
||||
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
|
||||
.section-title { font-size: 15px; font-weight: 600; }
|
||||
.chart-tabs { display: flex; gap: 4px; }
|
||||
.chart-tab { padding: 6px 14px; background: #3f3f46; border: none; border-radius: 6px; color: #a1a1aa; font-size: 12px; cursor: pointer; }
|
||||
.chart-tab.active { background: #a855f7; color: #fff; }
|
||||
.chart-area { height: 260px; background: #18181b; border-radius: 12px; position: relative; overflow: hidden; }
|
||||
.chart-candles { position: absolute; inset: 25px 40px 45px 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 { position: absolute; width: 20px; height: 20px; border-radius: 50%; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
|
||||
.signal.buy { bottom: -26px; left: 50%; transform: translateX(-50%); background: rgba(34, 197, 94, 0.3); color: #22c55e; border: 2px solid #22c55e; }
|
||||
.signal.sell { top: -26px; left: 50%; transform: translateX(-50%); background: rgba(239, 68, 68, 0.3); color: #ef4444; border: 2px solid #ef4444; }
|
||||
|
||||
/* 2컬럼 */
|
||||
.two-col { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; }
|
||||
.panel { background: #27272a; border-radius: 16px; padding: 20px; }
|
||||
|
||||
/* 정확도 */
|
||||
.accuracy-ring { width: 130px; height: 130px; margin: 0 auto 16px; border-radius: 50%; background: conic-gradient(#a855f7 0deg 252deg, #3f3f46 252deg 360deg); display: flex; align-items: center; justify-content: center; }
|
||||
.accuracy-inner { width: 100px; height: 100px; background: #27272a; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
||||
.accuracy-pct { font-size: 28px; font-weight: 700; color: #a855f7; }
|
||||
.accuracy-text { font-size: 10px; color: #71717a; }
|
||||
.acc-bar { margin-bottom: 10px; }
|
||||
.acc-bar-header { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 4px; }
|
||||
.acc-bar-bg { height: 6px; background: #3f3f46; border-radius: 3px; overflow: hidden; }
|
||||
.acc-bar-fill { height: 100%; border-radius: 3px; }
|
||||
.acc-bar-fill.green { background: #22c55e; }
|
||||
.acc-bar-fill.purple { background: #a855f7; }
|
||||
|
||||
/* 거래 */
|
||||
.trade-list { max-height: 280px; overflow-y: auto; }
|
||||
.trade-item { display: flex; align-items: center; padding: 12px; background: #3f3f46; border-radius: 10px; margin-bottom: 8px; }
|
||||
.trade-badge { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-right: 12px; }
|
||||
.trade-badge.buy { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
|
||||
.trade-badge.sell { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
|
||||
.trade-info { flex: 1; }
|
||||
.trade-type { font-size: 13px; font-weight: 500; }
|
||||
.trade-time { font-size: 11px; color: #71717a; }
|
||||
.trade-result { text-align: right; }
|
||||
.trade-price { font-size: 12px; }
|
||||
.trade-pnl { font-size: 12px; font-weight: 600; }
|
||||
.trade-pnl.profit { color: #22c55e; }
|
||||
.trade-pnl.loss { color: #ef4444; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<span class="logo">📊 백테스트</span>
|
||||
<span class="version-badge">Tablet-04 슬라이드</span>
|
||||
</header>
|
||||
|
||||
<nav class="tab-nav">
|
||||
<div class="tab-nav-item active">백테스트</div>
|
||||
<div class="tab-nav-item">거래내역</div>
|
||||
<div class="tab-nav-item">분석</div>
|
||||
<div class="tab-nav-item">설정</div>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<div class="config-panel">
|
||||
<div class="config-grid">
|
||||
<div class="config-field">
|
||||
<div class="config-label">종목</div>
|
||||
<select class="config-input"><option>BTC/KRW</option></select>
|
||||
</div>
|
||||
<div class="config-field">
|
||||
<div class="config-label">전략</div>
|
||||
<select class="config-input"><option>MACD+RSI</option></select>
|
||||
</div>
|
||||
<div class="config-field">
|
||||
<div class="config-label">시간봉</div>
|
||||
<select class="config-input"><option>1시간</option></select>
|
||||
</div>
|
||||
<div class="config-field">
|
||||
<div class="config-label">기간</div>
|
||||
<select class="config-input"><option>3개월</option></select>
|
||||
</div>
|
||||
<div class="config-field">
|
||||
<div class="config-label">초기자본</div>
|
||||
<input type="text" class="config-input" value="₩10,000,000">
|
||||
</div>
|
||||
<button class="run-btn">▶ 백테스트 실행</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="result-card">
|
||||
<div class="result-row">
|
||||
<div>
|
||||
<div class="result-symbol">BTC/KRW</div>
|
||||
<div class="result-meta">MACD+RSI · 1시간봉 · 3개월</div>
|
||||
</div>
|
||||
<div class="result-return">
|
||||
<div class="result-value">+23.5%</div>
|
||||
<div class="result-amount">₩2,350,000</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide-cards">
|
||||
<div class="slide-card">
|
||||
<div class="slide-card-icon">💰</div>
|
||||
<div class="slide-card-value">₩12.35M</div>
|
||||
<div class="slide-card-label">최종 자산</div>
|
||||
</div>
|
||||
<div class="slide-card">
|
||||
<div class="slide-card-icon">🎯</div>
|
||||
<div class="slide-card-value green">68%</div>
|
||||
<div class="slide-card-label">승률</div>
|
||||
</div>
|
||||
<div class="slide-card">
|
||||
<div class="slide-card-icon">🔄</div>
|
||||
<div class="slide-card-value">25회</div>
|
||||
<div class="slide-card-label">총 거래</div>
|
||||
</div>
|
||||
<div class="slide-card">
|
||||
<div class="slide-card-icon">📉</div>
|
||||
<div class="slide-card-value red">-8.2%</div>
|
||||
<div class="slide-card-label">최대 낙폭</div>
|
||||
</div>
|
||||
<div class="slide-card">
|
||||
<div class="slide-card-icon">⚡</div>
|
||||
<div class="slide-card-value green">+₩94K</div>
|
||||
<div class="slide-card-label">평균 수익</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">📈 가격 차트</span>
|
||||
<div class="chart-tabs">
|
||||
<button class="chart-tab active">캔들</button>
|
||||
<button class="chart-tab">라인</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-area">
|
||||
<div class="chart-candles">
|
||||
<div class="candle up" style="height: 45px;"></div>
|
||||
<div class="candle up" style="height: 60px;"></div>
|
||||
<div class="candle down" style="height: 40px;"></div>
|
||||
<div class="candle down" style="height: 55px;"><div class="signal buy">B</div></div>
|
||||
<div class="candle up" style="height: 70px;"></div>
|
||||
<div class="candle up" style="height: 90px;"></div>
|
||||
<div class="candle up" style="height: 80px;"></div>
|
||||
<div class="candle down" style="height: 50px;"><div class="signal sell">S</div></div>
|
||||
<div class="candle down" style="height: 65px;"></div>
|
||||
<div class="candle up" style="height: 55px;"></div>
|
||||
<div class="candle down" style="height: 40px;"><div class="signal buy">B</div></div>
|
||||
<div class="candle up" style="height: 60px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="two-col">
|
||||
<div class="panel">
|
||||
<div class="section-title" style="margin-bottom: 12px;">🎯 정확도</div>
|
||||
<div class="accuracy-ring">
|
||||
<div class="accuracy-inner">
|
||||
<div class="accuracy-pct">70%</div>
|
||||
<div class="accuracy-text">전체 정확도</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="acc-bar">
|
||||
<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">
|
||||
<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 class="panel">
|
||||
<div class="section-header" style="margin-bottom: 12px;">
|
||||
<span class="section-title">📋 거래 내역</span>
|
||||
<span style="font-size: 11px; color: #a855f7; cursor: pointer;">전체보기 →</span>
|
||||
</div>
|
||||
<div class="trade-list">
|
||||
<div class="trade-item">
|
||||
<div class="trade-badge 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,450,000</div>
|
||||
<div class="trade-pnl profit">+5.2%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trade-item">
|
||||
<div class="trade-badge 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,520,000</div>
|
||||
<div class="trade-pnl">-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trade-item">
|
||||
<div class="trade-badge 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,200,000</div>
|
||||
<div class="trade-pnl loss">-2.1%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,267 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=834">
|
||||
<title>Tablet-05 컴팩트 프로</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: #fff; color: #111827; width: 834px; min-height: 1194px; }
|
||||
|
||||
.header { padding: 16px 24px; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; }
|
||||
.logo { font-size: 18px; font-weight: 700; color: #111827; }
|
||||
.header-right { display: flex; gap: 12px; align-items: center; }
|
||||
.version-badge { background: #f3f4f6; color: #6b7280; padding: 4px 12px; border-radius: 8px; font-size: 11px; }
|
||||
.btn { padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid #e5e7eb; background: #fff; }
|
||||
.btn-primary { background: #111827; color: #fff; border-color: #111827; }
|
||||
|
||||
.container { padding: 24px; }
|
||||
|
||||
/* 설정 */
|
||||
.config-bar { display: flex; gap: 12px; margin-bottom: 24px; align-items: flex-end; flex-wrap: wrap; }
|
||||
.config-field { flex: 1; min-width: 120px; }
|
||||
.config-label { font-size: 11px; color: #6b7280; margin-bottom: 4px; }
|
||||
.config-input { width: 100%; padding: 10px 12px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 13px; }
|
||||
.run-btn { padding: 10px 24px; background: #111827; color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
|
||||
/* 결과 헤더 */
|
||||
.result-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; padding: 24px; background: #f9fafb; border-radius: 16px; }
|
||||
.result-left h2 { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
|
||||
.result-left p { font-size: 13px; color: #6b7280; }
|
||||
.result-return { text-align: right; }
|
||||
.return-value { font-size: 42px; font-weight: 700; color: #16a34a; }
|
||||
.return-amount { font-size: 14px; color: #16a34a; }
|
||||
|
||||
/* 메트릭 */
|
||||
.metrics-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 24px; }
|
||||
.metric-box { background: #f9fafb; border-radius: 12px; padding: 16px; text-align: center; }
|
||||
.metric-value { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
|
||||
.metric-value.green { color: #16a34a; }
|
||||
.metric-value.red { color: #dc2626; }
|
||||
.metric-label { font-size: 11px; color: #6b7280; }
|
||||
|
||||
/* 메인 그리드 */
|
||||
.main-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
|
||||
|
||||
/* 차트 */
|
||||
.chart-card { background: #f9fafb; border-radius: 16px; padding: 20px; }
|
||||
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
|
||||
.card-title { font-size: 15px; font-weight: 600; }
|
||||
.tabs { display: flex; gap: 4px; }
|
||||
.tab { padding: 6px 14px; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 12px; color: #6b7280; cursor: pointer; }
|
||||
.tab.active { background: #111827; border-color: #111827; color: #fff; }
|
||||
.chart-area { height: 300px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; position: relative; overflow: hidden; }
|
||||
.chart-candles { position: absolute; inset: 25px 50px 50px 20px; display: flex; align-items: flex-end; justify-content: space-around; }
|
||||
.candle { width: 12px; border-radius: 2px; position: relative; }
|
||||
.candle.up { background: #16a34a; }
|
||||
.candle.down { background: #dc2626; }
|
||||
.signal { position: absolute; width: 22px; height: 22px; border-radius: 50%; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
|
||||
.signal.buy { bottom: -28px; left: 50%; transform: translateX(-50%); background: #dcfce7; color: #16a34a; border: 2px solid #16a34a; }
|
||||
.signal.sell { top: -28px; left: 50%; transform: translateX(-50%); background: #fee2e2; color: #dc2626; border: 2px solid #dc2626; }
|
||||
|
||||
/* 사이드 */
|
||||
.side-col { display: flex; flex-direction: column; gap: 16px; }
|
||||
.side-card { background: #f9fafb; border-radius: 16px; padding: 20px; }
|
||||
|
||||
/* 정확도 */
|
||||
.accuracy-center { text-align: center; }
|
||||
.accuracy-ring { width: 120px; height: 120px; margin: 0 auto 16px; border-radius: 50%; background: conic-gradient(#16a34a 0deg 252deg, #e5e7eb 252deg 360deg); display: flex; align-items: center; justify-content: center; }
|
||||
.accuracy-inner { width: 94px; height: 94px; background: #f9fafb; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
||||
.accuracy-pct { font-size: 26px; font-weight: 700; color: #16a34a; }
|
||||
.accuracy-text { font-size: 10px; color: #6b7280; }
|
||||
.acc-bar { margin-bottom: 10px; text-align: left; }
|
||||
.acc-bar-header { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 4px; }
|
||||
.acc-bar-bg { height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; }
|
||||
.acc-bar-fill { height: 100%; border-radius: 3px; }
|
||||
.acc-bar-fill.green { background: #16a34a; }
|
||||
.acc-bar-fill.orange { background: #ea580c; }
|
||||
|
||||
/* 거래 */
|
||||
.trade-list { max-height: 320px; overflow-y: auto; }
|
||||
.trade-item { display: flex; align-items: center; padding: 12px; background: #fff; border: 1px solid #f3f4f6; border-radius: 10px; margin-bottom: 8px; }
|
||||
.trade-badge { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-right: 12px; }
|
||||
.trade-badge.buy { background: #dcfce7; color: #16a34a; }
|
||||
.trade-badge.sell { background: #fee2e2; color: #dc2626; }
|
||||
.trade-info { flex: 1; }
|
||||
.trade-type { font-size: 13px; font-weight: 500; }
|
||||
.trade-time { font-size: 11px; color: #9ca3af; }
|
||||
.trade-result { text-align: right; }
|
||||
.trade-price { font-size: 12px; }
|
||||
.trade-pnl { font-size: 12px; font-weight: 600; }
|
||||
.trade-pnl.profit { color: #16a34a; }
|
||||
.trade-pnl.loss { color: #dc2626; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<span class="logo">📊 BackTest Pro</span>
|
||||
<div class="header-right">
|
||||
<span class="version-badge">Tablet-05 컴팩트</span>
|
||||
<button class="btn">내보내기</button>
|
||||
<button class="btn btn-primary">+ 새 테스트</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="config-bar">
|
||||
<div class="config-field">
|
||||
<div class="config-label">종목</div>
|
||||
<select class="config-input"><option>BTC/KRW</option></select>
|
||||
</div>
|
||||
<div class="config-field">
|
||||
<div class="config-label">전략</div>
|
||||
<select class="config-input"><option>MACD+RSI</option></select>
|
||||
</div>
|
||||
<div class="config-field">
|
||||
<div class="config-label">시간봉</div>
|
||||
<select class="config-input"><option>1시간</option></select>
|
||||
</div>
|
||||
<div class="config-field">
|
||||
<div class="config-label">기간</div>
|
||||
<select class="config-input"><option>3개월</option></select>
|
||||
</div>
|
||||
<div class="config-field">
|
||||
<div class="config-label">초기자본</div>
|
||||
<input type="text" class="config-input" value="₩10,000,000">
|
||||
</div>
|
||||
<button class="run-btn">▶ 실행</button>
|
||||
</div>
|
||||
|
||||
<div class="result-header">
|
||||
<div class="result-left">
|
||||
<h2>BTC/KRW</h2>
|
||||
<p>MACD+RSI 전략 · 1시간봉 · 2024.01 - 03</p>
|
||||
</div>
|
||||
<div class="result-return">
|
||||
<div class="return-value">+23.5%</div>
|
||||
<div class="return-amount">₩2,350,000 수익</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metrics-row">
|
||||
<div class="metric-box">
|
||||
<div class="metric-value">₩12.35M</div>
|
||||
<div class="metric-label">최종 자산</div>
|
||||
</div>
|
||||
<div class="metric-box">
|
||||
<div class="metric-value green">68%</div>
|
||||
<div class="metric-label">승률</div>
|
||||
</div>
|
||||
<div class="metric-box">
|
||||
<div class="metric-value">25회</div>
|
||||
<div class="metric-label">총 거래</div>
|
||||
</div>
|
||||
<div class="metric-box">
|
||||
<div class="metric-value green">17회</div>
|
||||
<div class="metric-label">수익</div>
|
||||
</div>
|
||||
<div class="metric-box">
|
||||
<div class="metric-value red">8회</div>
|
||||
<div class="metric-label">손실</div>
|
||||
</div>
|
||||
<div class="metric-box">
|
||||
<div class="metric-value red">-8.2%</div>
|
||||
<div class="metric-label">MDD</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-grid">
|
||||
<div class="chart-card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">📈 가격 차트 & 매매 시점</span>
|
||||
<div class="tabs">
|
||||
<button class="tab active">캔들</button>
|
||||
<button class="tab">라인</button>
|
||||
<button class="tab">수익곡선</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-area">
|
||||
<div class="chart-candles">
|
||||
<div class="candle up" style="height: 50px;"></div>
|
||||
<div class="candle up" style="height: 70px;"></div>
|
||||
<div class="candle down" style="height: 45px;"></div>
|
||||
<div class="candle down" style="height: 60px;"><div class="signal buy">B</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 sell">S</div></div>
|
||||
<div class="candle down" style="height: 70px;"></div>
|
||||
<div class="candle up" style="height: 60px;"></div>
|
||||
<div class="candle down" style="height: 45px;"><div class="signal buy">B</div></div>
|
||||
<div class="candle up" style="height: 65px;"></div>
|
||||
<div class="candle up" style="height: 85px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="side-col">
|
||||
<div class="side-card accuracy-center">
|
||||
<div class="card-title" style="margin-bottom: 12px;">🎯 전략 정확도</div>
|
||||
<div class="accuracy-ring">
|
||||
<div class="accuracy-inner">
|
||||
<div class="accuracy-pct">70%</div>
|
||||
<div class="accuracy-text">정확도</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="acc-bar">
|
||||
<div class="acc-bar-header">
|
||||
<span style="color: #6b7280;">매수</span>
|
||||
<span style="color: #16a34a; font-weight: 600;">76%</span>
|
||||
</div>
|
||||
<div class="acc-bar-bg"><div class="acc-bar-fill green" style="width: 76%;"></div></div>
|
||||
</div>
|
||||
<div class="acc-bar">
|
||||
<div class="acc-bar-header">
|
||||
<span style="color: #6b7280;">매도</span>
|
||||
<span style="color: #ea580c; font-weight: 600;">64%</span>
|
||||
</div>
|
||||
<div class="acc-bar-bg"><div class="acc-bar-fill orange" style="width: 64%;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="side-card">
|
||||
<div class="card-header" style="margin-bottom: 12px;">
|
||||
<span class="card-title">📋 최근 거래</span>
|
||||
</div>
|
||||
<div class="trade-list">
|
||||
<div class="trade-item">
|
||||
<div class="trade-badge 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.4M</div>
|
||||
<div class="trade-pnl profit">+5.2%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trade-item">
|
||||
<div class="trade-badge 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.5M</div>
|
||||
<div class="trade-pnl">-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trade-item">
|
||||
<div class="trade-badge 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>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user