aidev
201 lines
9.7 KiB
HTML
201 lines
9.7 KiB
HTML
<!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>
|