137 lines
5.7 KiB
Plaintext
137 lines
5.7 KiB
Plaintext
<!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">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>💰 Asset Pilot</h1>
|
|
<p class="subtitle">실시간 자산 모니터링 시스템</p>
|
|
<div class="status-bar">
|
|
<span id="status-indicator" class="status-dot"></span>
|
|
<span id="last-update">데이터 수집 중...</span>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- 손익 요약 -->
|
|
<section class="pnl-summary">
|
|
<div class="pnl-card">
|
|
<h3>금 현물</h3>
|
|
<div class="pnl-value" id="gold-pnl">N/A</div>
|
|
<div class="pnl-percent" id="gold-percent">N/A</div>
|
|
</div>
|
|
<div class="pnl-card">
|
|
<h3>비트코인</h3>
|
|
<div class="pnl-value" id="btc-pnl">N/A</div>
|
|
<div class="pnl-percent" id="btc-percent">N/A</div>
|
|
</div>
|
|
<div class="pnl-card total">
|
|
<h3>총 손익</h3>
|
|
<div class="pnl-value" id="total-pnl">N/A</div>
|
|
<div class="pnl-percent" id="total-percent">N/A</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 자산 테이블 -->
|
|
<section class="assets-section">
|
|
<div class="section-header">
|
|
<h2>📊 자산 현황</h2>
|
|
<button id="refresh-btn" class="btn btn-primary">새로고침</button>
|
|
</div>
|
|
|
|
<div class="table-container">
|
|
<table id="assets-table">
|
|
<thead>
|
|
<tr>
|
|
<th>항목</th>
|
|
<th class="numeric">전일종가</th>
|
|
<th class="numeric">현재가</th>
|
|
<th class="numeric">변동</th>
|
|
<th class="numeric">변동률</th>
|
|
<th class="numeric">평단가</th>
|
|
<th class="numeric">보유량</th>
|
|
<th class="numeric">매입액</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="assets-tbody">
|
|
<!-- 동적으로 생성 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 알림 설정 모달 -->
|
|
<div id="alert-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>🔔 알림 설정</h2>
|
|
<span class="close">×</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="setting-group">
|
|
<h3>급등/급락 알림</h3>
|
|
<label>
|
|
<input type="checkbox" id="급등락_감지">
|
|
활성화
|
|
</label>
|
|
<label>
|
|
변동 임계값:
|
|
<input type="number" id="급등락_임계값" step="0.5" min="0.5" max="20">
|
|
%
|
|
</label>
|
|
</div>
|
|
|
|
<div class="setting-group">
|
|
<h3>목표 수익률 알림</h3>
|
|
<label>
|
|
<input type="checkbox" id="목표수익률_감지">
|
|
활성화
|
|
</label>
|
|
<label>
|
|
목표 수익률:
|
|
<input type="number" id="목표수익률" step="0.5" min="0.1" max="100">
|
|
%
|
|
</label>
|
|
</div>
|
|
|
|
<div class="setting-group">
|
|
<h3>특정 가격 도달 알림</h3>
|
|
<label>
|
|
<input type="checkbox" id="특정가격_감지">
|
|
활성화
|
|
</label>
|
|
<label>
|
|
금 목표가:
|
|
<input type="number" id="금_목표가격" step="1000" min="50000">
|
|
원
|
|
</label>
|
|
<label>
|
|
BTC 목표가:
|
|
<input type="number" id="BTC_목표가격" step="1000000" min="50000000">
|
|
원
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="save-alerts" class="btn btn-primary">저장</button>
|
|
<button id="cancel-alerts" class="btn btn-secondary">취소</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
<button id="alert-settings-btn" class="btn btn-secondary">⚙️ 알림 설정</button>
|
|
<p>Asset Pilot v1.0 - Orange Pi Edition</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="/static/js/app.js"></script>
|
|
</body>
|
|
</html>
|