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>
90 lines
4.8 KiB
HTML
90 lines
4.8 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:14px 20px;display:flex;align-items:center;gap:12px;flex-shrink:0}
|
|
.ba{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
|
|
.hi h1{color:#fff;font-size:17px;font-weight:700}
|
|
.hi p{color:rgba(255,255,255,.7);font-size:12px}
|
|
.ol{display:inline-block;width:8px;height:8px;background:#22c55e;border-radius:50%;margin-right:4px}
|
|
.msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px}
|
|
.msg{display:flex;gap:10px;max-width:85%}
|
|
.mu{align-self:flex-end;flex-direction:row-reverse}
|
|
.mb{padding:12px 14px;border-radius:18px;font-size:13px;line-height:1.6}
|
|
.bot .mb{background:#1e293b;color:#e2e8f0;border-bottom-left-radius:4px}
|
|
.mu .mb{background:#1a5fd8;color:#fff;border-bottom-right-radius:4px}
|
|
.ba2{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;align-self:flex-end}
|
|
.mt{font-size:10px;color:#475569;align-self:flex-end}
|
|
.qr{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 12px;flex-shrink:0}
|
|
.qc{padding:7px 13px;background:#1e293b;border-radius:20px;font-size:12px;color:#94a3b8;border:1px solid rgba(255,255,255,.08)}
|
|
.ib{background:#1e293b;padding:12px 16px;display:flex;gap:10px;align-items:center;flex-shrink:0;border-top:1px solid rgba(255,255,255,.06)}
|
|
.inp{flex:1;background:#0f172a;border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:10px 16px;color:#e2e8f0;font-size:14px}
|
|
.snd{width:40px;height:40px;background:#1a5fd8;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;flex-shrink:0}
|
|
.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">
|
|
<div class="ba">🤖</div>
|
|
<div class="hi"><h1>GUARDiA AI</h1><p><span class="ol"></span>Ollama llama3:8b 연결됨</p></div>
|
|
</div>
|
|
<div class="msgs">
|
|
<div class="msg bot">
|
|
<div class="ba2">🤖</div>
|
|
<div>
|
|
<div class="mb">안녕하세요 홍 관리자님! 👋<br>GUARDiA AI 어시스턴트입니다.<br>무엇을 도와드릴까요?</div>
|
|
<div class="mt">9:35</div>
|
|
</div>
|
|
</div>
|
|
<div class="msg mu">
|
|
<div>
|
|
<div class="mb">서울시청 WAS-01 서비스 상태 확인해줘</div>
|
|
<div class="mt" style="text-align:right">9:40</div>
|
|
</div>
|
|
</div>
|
|
<div class="msg bot">
|
|
<div class="ba2">🤖</div>
|
|
<div>
|
|
<div class="mb">📡 <strong>WAS-01 상태 확인 중...</strong><br><br>✅ <strong>서비스 정상 운영 중</strong><br>• CPU: 34% | 메모리: 2.1/4GB<br>• Tomcat 8.5.99 — UP (14일)<br>• 최근 에러로그: 없음<br><br>⚡ 응답시간: 12ms (정상 범위)</div>
|
|
<div class="mt">9:41</div>
|
|
</div>
|
|
</div>
|
|
<div class="msg mu">
|
|
<div>
|
|
<div class="mb">DR 테스트 실행해줘</div>
|
|
<div class="mt" style="text-align:right">9:41</div>
|
|
</div>
|
|
</div>
|
|
<div class="msg bot">
|
|
<div class="ba2">🤖</div>
|
|
<div>
|
|
<div class="mb">🛡️ <strong>DR 복구 테스트 시작합니다</strong><br><br>시나리오: WAS-01 장애<br>단계 1/4 ✅ 서비스 중단 확인<br>단계 2/4 🔄 대기 서버 활성화 중...</div>
|
|
<div class="mt">9:41</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="qr">
|
|
<span class="qc">서버 상태 확인</span>
|
|
<span class="qc">SR 목록 보여줘</span>
|
|
<span class="qc">최근 인시던트</span>
|
|
<span class="qc">DR 테스트 실행</span>
|
|
</div>
|
|
<div class="ib">
|
|
<div class="inp">메시지 입력...</div>
|
|
<div class="snd">➤</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">DR</div></div>
|
|
<div class="tab"><div class="ic">🤖</div><div class="lb" style="color:#60a5fa">AI</div></div>
|
|
<div class="tab"><div class="ic">⚙️</div><div class="lb">설정</div></div>
|
|
</div>
|
|
</body></html>
|