zioinfo-mail/workspace/guardia-docs/mockups/m_network.html
DESKTOP-TKLFCPR\ython cfe2901a55 refactor(structure): consolidate all projects under workspace/
- itsm/    -> workspace/guardia-itsm/
- manager/ -> workspace/guardia-manager/
- app/     -> workspace/guardia-messenger/
- manual/  -> workspace/guardia-docs/

workspace/zioinfo-web/ unchanged.
git mv preserves full commit history.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-31 23:50:56 +09:00

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>