e2ea2016d2
- Playwright headless로 HTML 목업 → PNG 스크린샷 변환 11_app_home.png 홈 대시보드 (SR·서버 실시간 현황) 12_app_sr.png SR 서비스 요청 목록 13_app_chat.png AI 챗봇 (Ollama 연동) 14_app_dr.png DR 재해복구 RTO/RPO 모니터링 15_app_network.png 네트워크 장비 백업 현황 - GuardiaDetail.jsx: '모바일 앱' 탭 신규 추가 5장 목업 5열 그리드 (390x844 세로 비율) Google Play / App Store 다운로드 배지 - GuardiaDetail.css: 모바일 스크린샷 5열 그리드 스타일 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
81 lines
5.3 KiB
HTML
81 lines
5.3 KiB
HTML
<!DOCTYPE html><html><head><meta charset="UTF-8">
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
|
|
body{background:#0f172a;width:390px;height:844px;display:flex;flex-direction:column;overflow:hidden}
|
|
.sb{height:44px;background:#0f172a;display:flex;align-items:center;justify-content:space-between;padding:0 20px;flex-shrink:0}
|
|
.sb .t{color:#fff;font-size:15px;font-weight:600}
|
|
.sb .i{color:#fff;font-size:13px}
|
|
.hd{background:linear-gradient(135deg,#1a3a6b,#1a5fd8);padding:16px 20px;flex-shrink:0}
|
|
.hd h1{color:#fff;font-size:20px;font-weight:700}
|
|
.hd p{color:rgba(255,255,255,.7);font-size:12px;margin-top:2px}
|
|
.sc{flex:1;overflow-y:auto;padding:16px}
|
|
.sr{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
|
|
.su{background:#1e293b;border-radius:12px;padding:10px 6px;text-align:center;border:1px solid rgba(255,255,255,.06)}
|
|
.su .n{font-size:20px;font-weight:700;color:#e2e8f0}
|
|
.su .l{font-size:9px;color:#94a3b8;margin-top:2px}
|
|
.sec{background:#1e293b;border-radius:14px;padding:16px;margin-bottom:14px;border:1px solid rgba(255,255,255,.06)}
|
|
.sec h3{color:#94a3b8;font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}
|
|
.sc2{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05)}
|
|
.sc2:last-child{border-bottom:none}
|
|
.st{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
|
|
.sn{color:#e2e8f0;font-size:13px;font-weight:600}
|
|
.sbg{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:700}
|
|
.bps{background:rgba(34,197,94,.2);color:#4ade80}
|
|
.bfl{background:rgba(239,68,68,.2);color:#f87171}
|
|
.bpd{background:rgba(148,163,184,.2);color:#94a3b8}
|
|
.rb{display:flex;align-items:center;gap:8px;margin-top:5px}
|
|
.rl{font-size:10px;color:#64748b;width:55px}
|
|
.rt{flex:1;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
|
|
.rf{height:100%;border-radius:3px}
|
|
.rv{font-size:10px;color:#94a3b8;width:30px;text-align:right}
|
|
.sm{font-size:10px;color:#475569;margin-top:4px}
|
|
.tb{height:60px;background:#1e293b;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-around;flex-shrink:0}
|
|
.tab{display:flex;flex-direction:column;align-items:center;gap:3px}
|
|
.tab .ic{font-size:20px}
|
|
.tab .lb{font-size:9px;color:#64748b}
|
|
</style></head>
|
|
<body>
|
|
<div class="sb"><span class="t">9:41</span><span class="i">● ●● ▐▌</span></div>
|
|
<div class="hd"><h1>🛡️ DR 재해복구</h1><p>RTO/RPO 목표 대비 실적 모니터링</p></div>
|
|
<div class="sc">
|
|
<div class="sr">
|
|
<div class="su"><div class="n">5</div><div class="l">전체</div></div>
|
|
<div class="su"><div class="n" style="color:#22c55e">3</div><div class="l">PASS</div></div>
|
|
<div class="su"><div class="n" style="color:#ef4444">1</div><div class="l">FAIL</div></div>
|
|
<div class="su"><div class="n" style="color:#f59e0b">1</div><div class="l">미테스트</div></div>
|
|
</div>
|
|
<div class="sec">
|
|
<h3>시나리오 목록</h3>
|
|
<div class="sc2">
|
|
<div class="st"><span class="sn">서울시청 WAS 장애</span><span class="sbg bps">PASS</span></div>
|
|
<div class="rb"><span class="rl">RTO 목표</span><div class="rt"><div class="rf" style="width:15%;background:#22c55e"></div></div><span class="rv">120분</span></div>
|
|
<div class="rb"><span class="rl">RTO 실적</span><div class="rt"><div class="rf" style="width:10%;background:#60a5fa"></div></div><span class="rv">18분</span></div>
|
|
<div class="sm">최근 테스트: 2026-05-30 ✔ 충족</div>
|
|
</div>
|
|
<div class="sc2">
|
|
<div class="st"><span class="sn">안산시청 DB 페일오버</span><span class="sbg bps">PASS</span></div>
|
|
<div class="rb"><span class="rl">RTO 목표</span><div class="rt"><div class="rf" style="width:30%;background:#22c55e"></div></div><span class="rv">240분</span></div>
|
|
<div class="rb"><span class="rl">RTO 실적</span><div class="rt"><div class="rf" style="width:18%;background:#60a5fa"></div></div><span class="rv">45분</span></div>
|
|
<div class="sm">최근 테스트: 2026-05-29 ✔ 충족</div>
|
|
</div>
|
|
<div class="sc2">
|
|
<div class="st"><span class="sn">수원시청 사이트 장애</span><span class="sbg bfl">FAIL</span></div>
|
|
<div class="rb"><span class="rl">RTO 목표</span><div class="rt"><div class="rf" style="width:25%;background:#22c55e"></div></div><span class="rv">200분</span></div>
|
|
<div class="rb"><span class="rl">RTO 실적</span><div class="rt"><div class="rf" style="width:80%;background:#ef4444"></div></div><span class="rv">320분</span></div>
|
|
<div class="sm" style="color:#ef4444">최근 테스트: 2026-05-28 ✘ 목표 초과</div>
|
|
</div>
|
|
<div class="sc2">
|
|
<div class="st"><span class="sn">화성시청 네트워크 장애</span><span class="sbg bpd">미테스트</span></div>
|
|
<div class="sm" style="margin-top:4px">테스트 예정: 2026-06-15</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tb">
|
|
<div class="tab"><div class="ic">📊</div><div class="lb">홈</div></div>
|
|
<div class="tab"><div class="ic">📋</div><div class="lb">SR</div></div>
|
|
<div class="tab"><div class="ic">🛡️</div><div class="lb" style="color:#60a5fa">DR</div></div>
|
|
<div class="tab"><div class="ic">🤖</div><div class="lb">AI</div></div>
|
|
<div class="tab"><div class="ic">⚙️</div><div class="lb">설정</div></div>
|
|
</div>
|
|
</body></html>
|