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>
82 lines
4.7 KiB
HTML
82 lines
4.7 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}
|
|
.se{padding:10px 16px;background:#0f172a;flex-shrink:0}
|
|
.se input{width:100%;background:#1e293b;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px 14px;color:#94a3b8;font-size:13px}
|
|
.sc{flex:1;overflow-y:auto;padding:12px 16px}
|
|
.sr{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
|
|
.su{background:#1e293b;border-radius:10px;padding:10px 8px;text-align:center;border:1px solid rgba(255,255,255,.06)}
|
|
.su .n{font-size:18px;font-weight:700;color:#e2e8f0}
|
|
.su .l{font-size:9px;color:#94a3b8;margin-top:2px}
|
|
.cd{background:#1e293b;border-radius:14px;padding:16px;margin-bottom:10px;border:1px solid rgba(255,255,255,.06)}
|
|
.dt{display:flex;align-items:center;gap:10px;margin-bottom:10px}
|
|
.di{font-size:28px}
|
|
.dn{flex:1}
|
|
.dna{color:#e2e8f0;font-size:14px;font-weight:600}
|
|
.dm{font-size:11px;color:#64748b;margin-top:2px}
|
|
.dst{font-size:20px}
|
|
.dd{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
|
|
.tg{background:rgba(255,255,255,.06);border-radius:8px;padding:4px 10px;font-size:11px;color:#94a3b8}
|
|
.bk{display:flex;align-items:center;justify-content:space-between}
|
|
.bi{font-size:11px;color:#64748b}
|
|
.bb{border-radius:8px;padding:5px 12px;font-size:11px;font-weight:600;color:#fff;background:#1a5fd8}
|
|
.bw{background:rgba(245,158,11,.2);color:#fbbf24}
|
|
.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>🔀 네트워크 장비</h1><p>스위치·라우터·방화벽 관제</p></div>
|
|
<div class="se"><input placeholder="장비명 / 벤더 검색..." /></div>
|
|
<div class="sc">
|
|
<div class="sr">
|
|
<div class="su"><div class="n">12</div><div class="l">전체</div></div>
|
|
<div class="su"><div class="n" style="color:#22c55e">10</div><div class="l">정상</div></div>
|
|
<div class="su"><div class="n" style="color:#ef4444">2</div><div class="l">미백업</div></div>
|
|
</div>
|
|
<div class="cd">
|
|
<div class="dt">
|
|
<div class="di">🔀</div>
|
|
<div class="dn"><div class="dna">Core-Switch-서울-01</div><div class="dm">CISCO Catalyst 9300 · 서울시청 IDC</div></div>
|
|
<div class="dst">✅</div>
|
|
</div>
|
|
<div class="dd"><span class="tg">SWITCH</span><span class="tg">cisco_ios</span><span class="tg">백업 2일 전</span></div>
|
|
<div class="bk"><span class="bi">최근 백업: 2026-05-29 · 변경 0줄</span><span class="bb">백업</span></div>
|
|
</div>
|
|
<div class="cd">
|
|
<div class="dt">
|
|
<div class="di">🛡️</div>
|
|
<div class="dn"><div class="dna">FW-안산-01</div><div class="dm">PIOLINK TPLINK · 안산시청</div></div>
|
|
<div class="dst">⚠️</div>
|
|
</div>
|
|
<div class="dd"><span class="tg">FIREWALL</span><span class="tg">linux</span><span class="tg" style="color:#ef4444">미백업 8일</span></div>
|
|
<div class="bk"><span class="bi" style="color:#f59e0b">갱신 필요 — 8일 초과</span><span class="bb bw">백업 필요</span></div>
|
|
</div>
|
|
<div class="cd">
|
|
<div class="dt">
|
|
<div class="di">🔗</div>
|
|
<div class="dn"><div class="dna">Router-수원-01</div><div class="dm">HUAWEI AR3200 · 수원시청</div></div>
|
|
<div class="dst">✅</div>
|
|
</div>
|
|
<div class="dd"><span class="tg">ROUTER</span><span class="tg">huawei_vrp</span><span class="tg">백업 1일 전</span></div>
|
|
<div class="bk"><span class="bi">최근 백업: 2026-05-30 · 변경 3줄</span><span class="bb">백업</span></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">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>
|