Very Good Web Server Work
This commit is contained in:
Wind
@@ -4,131 +4,138 @@
|
||||
<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">
|
||||
<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>
|
||||
<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 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>금 현물</h3>
|
||||
<div class="pnl-value" id="gold-pnl">N/A</div>
|
||||
<div class="pnl-percent" id="gold-percent">N/A</div>
|
||||
<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>비트코인</h3>
|
||||
<div class="pnl-value" id="btc-pnl">N/A</div>
|
||||
<div class="pnl-percent" id="btc-percent">N/A</div>
|
||||
<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">N/A</div>
|
||||
<div class="pnl-percent" id="total-percent">N/A</div>
|
||||
<div class="pnl-value" id="total-pnl">0 원</div>
|
||||
<div class="pnl-percent" id="total-percent">0%</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">
|
||||
<section class="table-section">
|
||||
<!-- 테이블 래퍼: 모바일 가로 스크롤 -->
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>항목</th>
|
||||
<th class="numeric">전일종가</th>
|
||||
<th>종목</th>
|
||||
<th class="numeric input-cell">전일종가</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 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 id="alert-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>🔔 알림 설정</h2>
|
||||
<span class="close">×</span>
|
||||
</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="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 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>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<button id="alert-settings-btn" class="btn btn-secondary">⚙️ 알림 설정</button>
|
||||
<p>Asset Pilot v1.0 - Orange Pi Edition</p>
|
||||
</footer>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user