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>
87 lines
5.8 KiB
HTML
87 lines
5.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: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}
|
||
.fr{display:flex;gap:8px;padding:12px 16px;background:#0f172a;flex-shrink:0;overflow-x:auto}
|
||
.ch{padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap;flex-shrink:0}
|
||
.cha{background:#1a5fd8;color:#fff}
|
||
.chi{background:#1e293b;color:#94a3b8}
|
||
.ls{flex:1;overflow-y:auto;padding:12px 16px}
|
||
.cd{background:#1e293b;border-radius:14px;padding:16px;margin-bottom:10px;border:1px solid rgba(255,255,255,.06)}
|
||
.ct{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px}
|
||
.si{font-size:11px;color:#64748b;font-family:monospace}
|
||
.pr{font-size:10px;padding:2px 8px;border-radius:8px;font-weight:700}
|
||
.pc{background:rgba(239,68,68,.2);color:#f87171}
|
||
.ph{background:rgba(245,158,11,.2);color:#fbbf24}
|
||
.pm{background:rgba(59,130,246,.2);color:#60a5fa}
|
||
.cn{color:#e2e8f0;font-size:14px;font-weight:600;margin-bottom:4px}
|
||
.cm{display:flex;gap:8px;align-items:center}
|
||
.cm span{font-size:11px;color:#64748b}
|
||
.dt{width:3px;height:3px;background:#475569;border-radius:50%}
|
||
.sr2{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.05)}
|
||
.av2{display:flex;align-items:center;gap:6px}
|
||
.av{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff}
|
||
.an{font-size:11px;color:#94a3b8}
|
||
.stb{font-size:10px;padding:3px 10px;border-radius:10px;font-weight:600}
|
||
.sp{background:rgba(59,130,246,.2);color:#60a5fa}
|
||
.sw{background:rgba(245,158,11,.2);color:#fbbf24}
|
||
.sc{background:rgba(34,197,94,.2);color:#4ade80}
|
||
.sr3{background:rgba(148,163,184,.2);color:#94a3b8}
|
||
.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}
|
||
.fab{position:fixed;right:20px;bottom:78px;width:52px;height:52px;border-radius:50%;background:#1a5fd8;display:flex;align-items:center;justify-content:center;font-size:26px;color:#fff;box-shadow:0 4px 16px rgba(26,95,216,.5)}
|
||
</style></head>
|
||
<body>
|
||
<div class="sb"><span class="t">9:41</span><span class="i">● ●● ▐▌</span></div>
|
||
<div class="hd"><h1>서비스 요청</h1><p>전체 23건 · 대기 7건</p></div>
|
||
<div class="fr">
|
||
<span class="ch cha">전체</span>
|
||
<span class="ch chi">처리중</span>
|
||
<span class="ch chi">대기</span>
|
||
<span class="ch chi">완료</span>
|
||
<span class="ch chi">CRITICAL</span>
|
||
</div>
|
||
<div class="ls">
|
||
<div class="cd">
|
||
<div class="ct"><span class="si">SR-20260531-0042</span><span class="pr pc">CRITICAL</span></div>
|
||
<div class="cn">행정망 WAS 서비스 장애 — 즉시 대응 요망</div>
|
||
<div class="cm"><span>서울시청</span><div class="dt"></div><span>WAS-01</span><div class="dt"></div><span>10분 전</span></div>
|
||
<div class="sr2"><div class="av2"><div class="av" style="background:linear-gradient(135deg,#6366f1,#8b5cf6)">김</div><span class="an">김엔지니어</span></div><span class="stb sp">처리중</span></div>
|
||
</div>
|
||
<div class="cd">
|
||
<div class="ct"><span class="si">SR-20260531-0041</span><span class="pr ph">HIGH</span></div>
|
||
<div class="cn">Tomcat 8.5 재기동 요청</div>
|
||
<div class="cm"><span>안산시청</span><div class="dt"></div><span>WAS-02</span><div class="dt"></div><span>23분 전</span></div>
|
||
<div class="sr2"><div class="av2"><div class="av" style="background:linear-gradient(135deg,#0ea5e9,#06b6d4)">박</div><span class="an">박엔지니어</span></div><span class="stb sw">대기</span></div>
|
||
</div>
|
||
<div class="cd">
|
||
<div class="ct"><span class="si">SR-20260531-0040</span><span class="pr pm">MEDIUM</span></div>
|
||
<div class="cn">DB 백업 스케줄 매일 02:00 변경</div>
|
||
<div class="cm"><span>수원시청</span><div class="dt"></div><span>DB-01</span><div class="dt"></div><span>1시간 전</span></div>
|
||
<div class="sr2"><div class="av2"><div class="av" style="background:linear-gradient(135deg,#10b981,#059669)">이</div><span class="an">이엔지니어</span></div><span class="stb sc">완료</span></div>
|
||
</div>
|
||
<div class="cd">
|
||
<div class="ct"><span class="si">SR-20260531-0039</span><span class="pr pm">MEDIUM</span></div>
|
||
<div class="cn">SSL 인증서 갱신 — 만료 7일 전</div>
|
||
<div class="cm"><span>화성시청</span><div class="dt"></div><span>WEB-01</span><div class="dt"></div><span>2시간 전</span></div>
|
||
<div class="sr2"><div class="av2"><div class="av" style="background:linear-gradient(135deg,#f59e0b,#d97706)">최</div><span class="an">최엔지니어</span></div><span class="stb sr3">접수됨</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="fab">＋</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" style="color:#60a5fa">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>
|