012b963a13
- 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>
80 lines
5.2 KiB
HTML
80 lines
5.2 KiB
HTML
<!DOCTYPE html><html><head><meta charset="UTF-8">
|
|
<meta name="viewport" content="width=390">
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
|
|
body{background:#0f172a;width:390px;height:844px;overflow:hidden;display:flex;flex-direction:column}
|
|
.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}
|
|
.gnb{background:linear-gradient(135deg,#1a3a6b,#1a5fd8);padding:16px 20px 20px;flex-shrink:0}
|
|
.gnb .g{color:rgba(255,255,255,.7);font-size:12px;margin-bottom:4px}
|
|
.gnb .n{color:#fff;font-size:20px;font-weight:700}
|
|
.gnb .b{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.15);border-radius:20px;padding:4px 10px;font-size:11px;color:#fff;margin-top:8px}
|
|
.sc{flex:1;overflow-y:auto;padding:16px}
|
|
.sr{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
|
|
.st{background:#1e293b;border-radius:14px;padding:16px;border:1px solid rgba(255,255,255,.06)}
|
|
.st .num{color:#60a5fa;font-size:28px;font-weight:700}
|
|
.st .lab{color:#94a3b8;font-size:11px;margin-top:4px}
|
|
.st .sub{color:#22c55e;font-size:10px;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}
|
|
.si{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05)}
|
|
.si:last-child{border-bottom:none}
|
|
.sd{width:8px;height:8px;border-radius:50%;flex-shrink:0}
|
|
.st2{flex:1}
|
|
.tt{color:#e2e8f0;font-size:13px;font-weight:500}
|
|
.tm{color:#64748b;font-size:11px;margin-top:2px}
|
|
.sb2{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600}
|
|
.bp{background:rgba(59,130,246,.2);color:#60a5fa}
|
|
.bw{background:rgba(245,158,11,.2);color:#fbbf24}
|
|
.bc{background:rgba(34,197,94,.2);color:#4ade80}
|
|
.svr{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05)}
|
|
.svr:last-child{border-bottom:none}
|
|
.sn{color:#e2e8f0;font-size:13px}
|
|
.sp{color:#94a3b8;font-size:11px}
|
|
.sok{color:#22c55e;font-size:12px}
|
|
.swn{color:#f59e0b;font-size:12px}
|
|
.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}
|
|
.tab.act .lb{color:#60a5fa}
|
|
</style></head>
|
|
<body>
|
|
<div class="sb"><span class="t">9:41</span><span class="i">● ●● ▐▌</span></div>
|
|
<div class="gnb">
|
|
<div class="g">안녕하세요</div>
|
|
<div class="n">홍 관리자님 👋</div>
|
|
<span class="b">🟢 ITSM 운영 중 | Enterprise</span>
|
|
</div>
|
|
<div class="sc">
|
|
<div class="sr">
|
|
<div class="st"><div class="num">23</div><div class="lab">오늘 SR 접수</div><div class="sub">▲ 3 증가</div></div>
|
|
<div class="st"><div class="num" style="color:#f59e0b">7</div><div class="lab">처리 대기</div><div class="sub" style="color:#ef4444">SLA 위험 2건</div></div>
|
|
</div>
|
|
<div class="sr">
|
|
<div class="st"><div class="num" style="color:#22c55e">98.2%</div><div class="lab">서버 가용률</div><div class="sub">24대 중 24대 정상</div></div>
|
|
<div class="st"><div class="num" style="color:#a78bfa">14</div><div class="lab">오늘 배포</div><div class="sub">성공 13 / 실패 1</div></div>
|
|
</div>
|
|
<div class="sec">
|
|
<h3>최근 서비스 요청</h3>
|
|
<div class="si"><div class="sd" style="background:#ef4444"></div><div class="st2"><div class="tt">행정망 WAS 서비스 장애</div><div class="tm">서울시청 · 10분 전</div></div><span class="sb2 bp">처리중</span></div>
|
|
<div class="si"><div class="sd" style="background:#f59e0b"></div><div class="st2"><div class="tt">Tomcat 재기동 요청</div><div class="tm">안산시청 · 23분 전</div></div><span class="sb2 bw">대기</span></div>
|
|
<div class="si"><div class="sd" style="background:#3b82f6"></div><div class="st2"><div class="tt">DB 백업 스케줄 변경</div><div class="tm">수원시청 · 1시간 전</div></div><span class="sb2 bc">완료</span></div>
|
|
</div>
|
|
<div class="sec">
|
|
<h3>서버 상태</h3>
|
|
<div class="svr"><div><div class="sn">WAS-서울시청-01</div><div class="sp">응답 12ms</div></div><span class="sok">● 정상</span></div>
|
|
<div class="svr"><div><div class="sn">DB-안산시청-01</div><div class="sp">응답 45ms</div></div><span class="swn">⚠ 주의</span></div>
|
|
<div class="svr"><div><div class="sn">WEB-수원시청-01</div><div class="sp">응답 8ms</div></div><span class="sok">● 정상</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="tb">
|
|
<div class="tab act"><div class="ic">📊</div><div class="lb" style="color:#60a5fa">홈</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">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>
|