aidev
161 lines
8.2 KiB
HTML
161 lines
8.2 KiB
HTML
<!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>
|