zioinfo-mail/workspace/guardia-docs/mockups/m_sr.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

87 lines
5.8 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>