144 lines
6.7 KiB
HTML
144 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Asset Pilot - 자산 모니터</title>
|
|
<link rel="stylesheet" href="/static/css/style.css?v=2.0">
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- 시스템 상태바 -->
|
|
<div class="status-bar">
|
|
<span id="status-dot" class="status-dot status-healthy"></span>
|
|
<span id="status-text">시스템 가동 중</span>
|
|
<span style="flex-grow: 1;"></span>
|
|
<div style="display: flex; gap: 15px; align-items: center;">
|
|
<small id="last-sync-time" style="color: #4d566b;"></small>
|
|
<div id="status-indicator" title="SSE Stream Status"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
|
|
<!-- 헤더 -->
|
|
<header>
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<div>
|
|
<h1>💰 Asset Pilot</h1>
|
|
<p class="subtitle">실시간 자산 모니터링 시스템</p>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button id="alert-settings-btn" class="icon-btn">🔔 알림설정</button>
|
|
<button id="refresh-btn" class="icon-btn">🔄 새로고침</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- 손익 요약 카드 -->
|
|
<section class="pnl-summary">
|
|
<div class="pnl-card">
|
|
<h3>KRX 금현물</h3>
|
|
<div class="pnl-value" id="gold-pnl">0 원</div>
|
|
<div class="pnl-percent" id="gold-percent">0%</div>
|
|
</div>
|
|
<div class="pnl-card">
|
|
<h3>업비트 BTC</h3>
|
|
<div class="pnl-value" id="btc-pnl">0 원</div>
|
|
<div class="pnl-percent" id="btc-percent">0%</div>
|
|
</div>
|
|
<div class="pnl-card total">
|
|
<h3>총 손익</h3>
|
|
<div class="pnl-value" id="total-pnl">0 원</div>
|
|
<div class="pnl-percent" id="total-percent">0%</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 자산 테이블 -->
|
|
<section class="table-section">
|
|
<!-- 테이블 래퍼: 모바일 가로 스크롤 -->
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>종목</th>
|
|
<th class="numeric input-cell">전일종가</th>
|
|
<th class="numeric">현재가</th>
|
|
<th class="numeric">변동</th>
|
|
<th class="numeric">변동률</th>
|
|
<th class="numeric input-cell">평단가</th>
|
|
<th class="numeric input-cell">보유수량</th>
|
|
<th class="numeric">매수금액</th>
|
|
<th>업데이트</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="assets-tbody">
|
|
<!-- app.js 가 동적으로 채움 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
</div><!-- /.container -->
|
|
|
|
<!-- 알림 설정 모달 -->
|
|
<div id="alert-modal" class="modal">
|
|
<div class="modal-content card">
|
|
<div class="modal-header">
|
|
<span class="modal-header h2" style="font-size:17px; font-weight:700;">🔔 알림 및 감시 설정</span>
|
|
<span class="close">×</span>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<div class="setting-group">
|
|
<label>
|
|
<input type="checkbox" id="급등락_감지">
|
|
급등락 알림 (전일대비)
|
|
<input type="number" id="급등락_임계값" step="0.1" value="3.0" style="margin-left:auto; width:80px; height:30px; padding:0 6px; text-align:right; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:5px; color:var(--text-primary); font-family:var(--font-mono); font-size:13px;">
|
|
<span style="color:var(--text-muted); font-size:12px; white-space:nowrap;">% 이상</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="setting-group">
|
|
<label>
|
|
<input type="checkbox" id="목표수익률_감지">
|
|
목표수익률 알림
|
|
<input type="number" id="목표수익률" step="0.5" value="10.0" style="margin-left:auto; width:80px; height:30px; padding:0 6px; text-align:right; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:5px; color:var(--text-primary); font-family:var(--font-mono); font-size:13px;">
|
|
<span style="color:var(--text-muted); font-size:12px; white-space:nowrap;">% 달성 시</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="setting-group">
|
|
<label style="margin-bottom:12px;">
|
|
<input type="checkbox" id="특정가격_감지">
|
|
특정가격 도달 알림
|
|
</label>
|
|
<div class="sub-setting">
|
|
<span style="color:var(--text-secondary); font-size:13px; white-space:nowrap;">금(KRX) 목표</span>
|
|
<input type="number" id="금_목표가격" value="100000">
|
|
<span style="color:var(--text-muted); font-size:12px;">원</span>
|
|
</div>
|
|
<div class="sub-setting" style="margin-top:8px;">
|
|
<span style="color:var(--text-secondary); font-size:13px; white-space:nowrap;">BTC 목표</span>
|
|
<input type="number" id="BTC_목표가격" value="100000000">
|
|
<span style="color:var(--text-muted); font-size:12px;">원</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button id="cancel-alerts" class="btn btn-secondary">취소</button>
|
|
<button id="save-alerts" class="btn btn-primary">설정 저장</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/js/app.js"></script>
|
|
</body>
|
|
</html>
|