chore(요구): 제안 373 홈 — 진행 중 프로젝트 수에 따라 저절로(1 · 2~3 · 4~8 · 9 넘음)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,265 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Aislo 홈 — 프로젝트 수에 따라</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
||||
<style>
|
||||
:root { --ac: #1f7a4d; --acs: #eaf5ee; --bg: #f6f7f9; --card: #fff; --bd: #e6e8ec; --fg: #1f2328; --mut: #6b7280; --road: #1f7a4d; --plan: #2f5fbf; --stab: #c26a0f; --red: #e5484d; --amb: #f5a524; }
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; font-family: Pretendard, "Malgun Gothic", sans-serif; color: var(--fg); font-size: 13.5px; line-height: 1.5; background: var(--background, #fff); }
|
||||
.intro { max-width: 1120px; margin: 0 auto; padding: 16px 18px 4px; color: var(--foreground, #1f2328); }
|
||||
.intro h1 { font-size: 20px; margin: 0 0 2px; }
|
||||
.intro p { margin: 0 0 8px; color: var(--muted-foreground, #6b7280); }
|
||||
.flow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
|
||||
.flow b { background: var(--acs); color: var(--ac); border-radius: 6px; padding: 2px 8px; font-weight: 600; }
|
||||
.ctl { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
|
||||
.seg { display: inline-flex; border: 1px solid var(--bd); border-radius: 8px; overflow: hidden; background: #fff; }
|
||||
.seg button { border: 0; background: #fff; padding: 5px 11px; font: inherit; cursor: pointer; color: #3b434b; }
|
||||
.seg button.on { background: var(--ac); color: #fff; }
|
||||
.app { max-width: 1120px; margin: 8px auto 30px; border: 1px solid var(--bd); border-radius: 14px; overflow: hidden; background: var(--bg); }
|
||||
.hd { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; background: #fff; border-bottom: 1px solid var(--bd); }
|
||||
.logo { font-weight: 800; letter-spacing: .6px; }
|
||||
.org { border: 1px solid var(--bd); border-radius: 6px; padding: 2px 8px; color: #57606a; }
|
||||
.search { margin-left: 6px; width: 240px; border: 1px solid var(--bd); border-radius: 7px; padding: 4px 10px; color: #8b949e; background: #fafbfc; }
|
||||
.sp { flex: 1; }
|
||||
.ib { width: 28px; height: 28px; border: 1px solid var(--bd); border-radius: 7px; display: grid; place-items: center; color: #57606a; position: relative; background: #fff; }
|
||||
.ib i { position: absolute; top: -5px; right: -5px; background: var(--red); color: #fff; font-style: normal; font-size: 9.5px; border-radius: 8px; padding: 0 4px; }
|
||||
.av { width: 28px; height: 28px; border-radius: 50%; background: #cfe8da; color: var(--ac); display: grid; place-items: center; font-weight: 700; font-size: 12px; }
|
||||
.bodyx { display: grid; grid-template-columns: 208px 1fr; min-height: 640px; }
|
||||
.nav { background: #fff; border-right: 1px solid var(--bd); padding: 10px 8px; }
|
||||
.grp { font-size: 11px; color: #8b949e; margin: 12px 8px 4px; }
|
||||
.it { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; color: #3b434b; cursor: pointer; }
|
||||
.it:hover { background: #f3f4f6; }
|
||||
.it.on { background: var(--acs); color: var(--ac); font-weight: 600; }
|
||||
.it svg { width: 15px; height: 15px; flex: 0 0 15px; }
|
||||
.it .n { margin-left: auto; font-size: 11px; color: #8b949e; }
|
||||
.it .n.r { color: #fff; background: var(--red); border-radius: 8px; padding: 0 5px; }
|
||||
.main { padding: 18px 20px 24px; }
|
||||
.ttl { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
|
||||
.ttl h2 { font-size: 19px; margin: 0; }
|
||||
.crumb { color: #8b949e; font-size: 12px; margin-bottom: 4px; cursor: pointer; }
|
||||
.btnp { background: var(--ac); color: #fff; border-radius: 7px; padding: 6px 12px; font-weight: 600; cursor: pointer; }
|
||||
.btn { border: 1px solid var(--bd); background: #fff; border-radius: 7px; padding: 5px 10px; cursor: pointer; }
|
||||
.screen { display: none; } .screen.on { display: block; }
|
||||
/* board */
|
||||
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
|
||||
.tile { background: var(--card); border: 1px solid var(--bd); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
|
||||
.tile:hover { border-color: #cfd6dd; box-shadow: 0 2px 10px rgba(16,24,40,.06); }
|
||||
.tile.w2 { grid-column: span 2; }
|
||||
.th { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
|
||||
.th .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; }
|
||||
.th b { font-size: 14px; }
|
||||
.th .more { margin-left: auto; color: #8b949e; font-size: 12px; }
|
||||
.kpis { display: flex; gap: 18px; flex-wrap: wrap; }
|
||||
.kpi .v { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
|
||||
.kpi .l { color: var(--mut); font-size: 12px; }
|
||||
.kpi .d { font-size: 11px; margin-left: 4px; }
|
||||
.up { color: #16a34a; } .dn { color: var(--red); }
|
||||
.row { display: flex; gap: 14px; align-items: center; }
|
||||
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
|
||||
.pthumb { border: 1px solid var(--bd); border-radius: 9px; overflow: hidden; background: #fff; }
|
||||
.pthumb svg { display: block; width: 100%; height: 56px; }
|
||||
.pthumb .c { padding: 5px 8px; font-size: 12px; }
|
||||
.badge { display: inline-block; font-size: 10.5px; border-radius: 5px; padding: 0 6px; margin-right: 4px; font-weight: 600; }
|
||||
.b-road { background: #e7f3ec; color: var(--road); } .b-plan { background: #e8effc; color: var(--plan); } .b-stab { background: #fdf0e3; color: var(--stab); } .b-sabang { background: #f1f1f4; color: #6b7280; border: 1px dashed #c9ccd3; }
|
||||
.bar { height: 6px; border-radius: 4px; background: #edf0f2; overflow: hidden; }
|
||||
.bar i { display: block; height: 100%; background: var(--ac); }
|
||||
.legend { display: grid; gap: 4px; font-size: 12px; }
|
||||
.legend span { display: flex; align-items: center; gap: 6px; }
|
||||
.sw { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
|
||||
.mini { font-size: 12px; color: var(--mut); }
|
||||
.todo { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid #f0f1f3; font-size: 12.5px; }
|
||||
.todo:first-child { border-top: 0; }
|
||||
.dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
|
||||
.avs { display: flex; } .avs span { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; margin-left: -6px; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; }
|
||||
.avs span:first-child { margin-left: 0; }
|
||||
[data-roles] { }
|
||||
.hide { display: none !important; }
|
||||
/* list */
|
||||
.tool { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
|
||||
.chip { border: 1px solid var(--bd); border-radius: 14px; padding: 2px 10px; background: #fff; cursor: pointer; font-size: 12.5px; }
|
||||
.chip.on { border-color: var(--ac); color: var(--ac); background: var(--acs); }
|
||||
.kan { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: start; }
|
||||
.col { background: #eef0f3; border-radius: 12px; padding: 10px; }
|
||||
.col h4 { margin: 0 0 8px; font-size: 13px; display: flex; align-items: center; gap: 6px; }
|
||||
.col h4 .n { color: #8b949e; font-weight: 400; }
|
||||
.kc { background: #fff; border: 1px solid var(--bd); border-radius: 10px; margin-bottom: 8px; overflow: hidden; cursor: pointer; }
|
||||
.kc:hover { border-color: #cfd6dd; box-shadow: 0 2px 8px rgba(16,24,40,.06); }
|
||||
.kc svg { display: block; width: 100%; height: 50px; }
|
||||
.kc .c { padding: 7px 9px; }
|
||||
.kc .meta { display: flex; justify-content: space-between; color: #8b949e; font-size: 11.5px; margin-top: 5px; }
|
||||
.col.done .kc { opacity: .75; }
|
||||
.tbl { background: #fff; border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; }
|
||||
table { border-collapse: collapse; width: 100%; }
|
||||
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid #f0f1f3; font-size: 13px; }
|
||||
th { color: #8b949e; font-weight: 600; font-size: 12px; background: #fafbfc; }
|
||||
tr.click { cursor: pointer; } tr.click:hover td { background: #f8faf9; }
|
||||
/* detail */
|
||||
.dgrid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; }
|
||||
.pane { background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
|
||||
.pane h3 { margin: 0 0 10px; font-size: 14px; }
|
||||
.steps { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
|
||||
.st { border: 1px solid var(--bd); border-radius: 9px; padding: 7px 6px; text-align: center; font-size: 11.5px; cursor: pointer; background: #fff; }
|
||||
.st .s { width: 20px; height: 20px; border-radius: 50%; margin: 0 auto 4px; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
|
||||
.st.ok .s { background: var(--ac); color: #fff; } .st.cur { border-color: var(--ac); background: var(--acs); } .st.cur .s { background: #fff; color: var(--ac); border: 2px solid var(--ac); } .st.no .s { background: #edf0f2; color: #8b949e; }
|
||||
.kv { display: grid; grid-template-columns: 96px 1fr; gap: 6px 10px; font-size: 13px; } .kv span { color: var(--mut); }
|
||||
.link { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid #f0f1f3; } .link:first-child { border-top: 0; }
|
||||
.tl { border-left: 2px solid #e6e8ec; margin-left: 4px; padding-left: 12px; }
|
||||
.tl div { position: relative; padding: 4px 0; font-size: 12.5px; } .tl div::before { content: ""; position: absolute; left: -17px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--ac); }
|
||||
.note { max-width: 1120px; margin: 0 auto; padding: 0 18px 20px; color: var(--muted-foreground, #6b7280); font-size: 12.5px; }
|
||||
@media (max-width: 900px) { .board { grid-template-columns: 1fr 1fr; } .tile.w2 { grid-column: span 2; } .kan { grid-template-columns: 1fr 1fr; } .dgrid { grid-template-columns: 1fr; } .bodyx { grid-template-columns: 1fr; } .nav { display: none; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="intro">
|
||||
<h1>Aislo 홈 — 프로젝트 수에 따라 저절로 바뀌는 꼴</h1>
|
||||
<p>요구 373 · 한 홈 · 같은 부품 · <b>진행 중 프로젝트 수</b>에 따라 카드 크기 · 요약 정도만 바뀜 · 가짜 숫자 · 2026-10-26</p>
|
||||
<div class="ctl"><span style="color:var(--muted-foreground,#6b7280)">진행 중 프로젝트 :</span>
|
||||
<span class="seg" id="nSeg"><button data-n="1">1 개 · 사용자</button><button data-n="3" class="on">2~3 개 · 사용자</button><button data-n="5">4~5 개 · 회사 관리자</button><button data-n="many">수십 개 · 시스템 관리자</button></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app">
|
||||
<div class="hd"><span class="logo">AISLO</span><span class="org" id="org">예시건설</span><span class="search" id="srch">찾기 · Ctrl+K</span><span class="sp"></span><span class="ib">?</span><span class="ib">🔔<i>2</i></span><span class="av">홍</span></div>
|
||||
<div class="bodyx" style="grid-template-columns:186px 1fr">
|
||||
<div class="nav">
|
||||
<div class="it on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z"/></svg>홈</div>
|
||||
<div class="it"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18"/></svg>프로젝트<span class="n" id="pcount">3</span></div>
|
||||
<div class="it"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16v12H5l-1 4z"/></svg>받은 예정노선<span class="n r">1</span></div>
|
||||
<div class="it"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h16v13H4zM8 7V4h8v3"/></svg>임시 보관함</div>
|
||||
<div class="it" data-n="5 many"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="8" r="3"/><path d="M3 20a6 6 0 0 1 12 0"/></svg>사람<span class="n r">1</span></div>
|
||||
<div class="grp" data-n="many">시스템 관리</div>
|
||||
<div class="it" data-n="many"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12h4l3-8 4 16 3-8h4"/></svg>개요 · 서버</div>
|
||||
<div class="it" data-n="many"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18M5 21V8l7-4 7 4v13"/></svg>회사 · 사용자</div>
|
||||
<div class="it" data-n="many"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 4h14v16H5zM8 8h8M8 12h8"/></svg>시스템 로그</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="ttl"><h2>홈</h2><span class="mini" id="rule"></span><span class="sp"></span><span class="btn">+ 새 프로젝트</span></div>
|
||||
|
||||
<!-- 1 개 -->
|
||||
<div data-n="1">
|
||||
<div class="pane" style="padding:0;overflow:hidden">
|
||||
<div style="display:grid;grid-template-columns:1.1fr 1fr">
|
||||
<svg viewBox="0 0 400 210" width="100%" height="210" style="display:block;background:#e3efe6"><path d="M0 170 Q90 120 160 140 T300 110 T400 150" fill="none" stroke="#cfe3d4" stroke-width="20"/><path d="M15 190 C 110 170, 150 50, 230 85 S 340 165, 390 25" fill="none" stroke="#c0392b" stroke-width="3.5"/></svg>
|
||||
<div style="padding:14px 16px"><div class="mini">지금 하는 프로젝트</div><div style="display:flex;gap:8px;align-items:center;margin:2px 0 8px"><b style="font-size:17px">용화 임도</b><span class="badge b-road">임도설계</span></div>
|
||||
<b style="font-size:12.5px">4 / 7 · 횡단설계</b><div class="pips"><i class="ok"></i><i class="ok"></i><i class="ok"></i><i class="cur"></i><i></i><i></i><i></i></div>
|
||||
<div class="nextbox">다음 할 일 — 측점 12 곳 횡단 확인</div><div style="margin-top:12px"><span class="btnp">이어서 하기 ›</span> <span class="btn">자세히</span></div></div>
|
||||
</div>
|
||||
<div class="kstrip"><div><b>57</b><span>측점</span></div><div><b>12</b><span>구조물</span></div><div><b>8.2 %</b><span>최대 기울기</span></div><div><b>8,420 / 6,010</b><span>절 / 성토 m³</span></div><div><b>도면 11 장</b><span>PDF ›</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2~3 개 -->
|
||||
<div data-n="3">
|
||||
<div class="pgrid3">
|
||||
<div class="pcard big"><svg viewBox="0 0 200 90" preserveAspectRatio="none"><rect width="200" height="90" fill="#e3efe6"/><path d="M8 80 C 50 72, 70 18, 110 36 S 170 72, 194 10" fill="none" stroke="#c0392b" stroke-width="2.5"/></svg>
|
||||
<div class="c"><div class="mini">최근 작업 · 오늘</div><b>용화 임도</b> <span class="badge b-road">임도</span><div class="mini" style="margin-top:6px">4 / 7 · 횡단설계</div><div class="pips sm"><i class="ok"></i><i class="ok"></i><i class="ok"></i><i class="cur"></i><i></i><i></i><i></i></div><div class="nextbox sm">측점 12 곳 횡단 확인</div><span class="btnp sm">이어서 하기 ›</span></div></div>
|
||||
<div class="pcard"><svg viewBox="0 0 200 90" preserveAspectRatio="none"><rect width="200" height="90" fill="#e5ecf8"/><path d="M5 60 C 60 20, 90 85, 195 30" fill="none" stroke="#2f5fbf" stroke-width="2.5"/></svg>
|
||||
<div class="c"><div class="mini">어제</div><b>용화 안정성평가</b> <span class="badge b-stab">안정성</span><div class="mini" style="margin-top:6px">2 / 6 · 2D 해석</div><div class="pips sm stab"><i class="ok"></i><i class="cur"></i><i></i><i></i><i></i><i></i></div><div class="nextbox sm">N.G 12 측점 보강 검토</div><span class="btn sm">이어서 ›</span></div></div>
|
||||
<div class="pcard"><svg viewBox="0 0 200 90" preserveAspectRatio="none"><rect width="200" height="90" fill="#eef1f4"/></svg>
|
||||
<div class="c"><div class="mini">10-24 · 새로 만듦</div><b>상평 임도</b> <span class="badge b-road">임도</span><div class="mini" style="margin-top:6px">0 / 7 · 파일 입력</div><div class="pips sm"><i class="cur"></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="nextbox sm">측량 파일 올리기</div><span class="btn sm">시작 ›</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4~5 개 (회사 관리자) -->
|
||||
<div data-n="5">
|
||||
<div style="display:grid;grid-template-columns:1fr 250px;gap:14px;align-items:start">
|
||||
<div>
|
||||
<div class="mini" style="margin-bottom:6px">회사 진행 중 5 · 최근 작업 순</div>
|
||||
<div class="clist">
|
||||
<div class="crow"><svg viewBox="0 0 80 44"><rect width="80" height="44" fill="#e3efe6"/><path d="M4 40 C 20 36, 30 8, 76 6" fill="none" stroke="#c0392b" stroke-width="2"/></svg><div class="nm"><b>용화 임도</b> <span class="badge b-road">임도</span><div class="mini">홍길동 · 오늘</div></div><div class="pp"><div class="pips sm"><i class="ok"></i><i class="ok"></i><i class="ok"></i><i class="cur"></i><i></i><i></i><i></i></div><div class="mini">횡단설계 4/7</div></div><span class="btn sm">열기 ›</span></div>
|
||||
<div class="crow"><svg viewBox="0 0 80 44"><rect width="80" height="44" fill="#e3efe6"/><path d="M4 30 C 30 44, 50 4, 76 20" fill="none" stroke="#c0392b" stroke-width="2"/></svg><div class="nm"><b>미원 임도</b> <span class="badge b-road">임도</span><div class="mini">김영희 · 10-22</div></div><div class="pp"><div class="pips sm"><i class="ok"></i><i class="ok"></i><i class="ok"></i><i class="ok"></i><i class="ok"></i><i class="ok"></i><i class="cur"></i></div><div class="mini" style="color:var(--amb)">원가 7/7 · 확정 전</div></div><span class="btn sm">열기 ›</span></div>
|
||||
<div class="crow"><svg viewBox="0 0 80 44"><rect width="80" height="44" fill="#f6eee4"/><path d="M0 40 L30 18 L50 24 L80 8" fill="none" stroke="#c26a0f" stroke-width="2"/></svg><div class="nm"><b>용화 안정성평가</b> <span class="badge b-stab">안정성</span><div class="mini">홍길동 · 어제</div></div><div class="pp"><div class="pips sm stab"><i class="ok"></i><i class="cur"></i><i></i><i></i><i></i><i></i></div><div class="mini">2D 해석 2/6</div></div><span class="btn sm">열기 ›</span></div>
|
||||
<div class="crow warn"><svg viewBox="0 0 80 44"><rect width="80" height="44" fill="#e3efe6"/><path d="M4 22 C 30 8, 50 40, 76 22" fill="none" stroke="#c0392b" stroke-width="2"/></svg><div class="nm"><b>내북 임도</b> <span class="badge b-road">임도</span><div class="mini">박철수 · <b style="color:var(--amb)">12 일째 그대로</b></div></div><div class="pp"><div class="pips sm"><i class="ok"></i><i class="ok"></i><i class="cur"></i><i></i><i></i><i></i><i></i></div><div class="mini">노선 · 종단 3/7</div></div><span class="btn sm">열기 ›</span></div>
|
||||
<div class="crow"><svg viewBox="0 0 80 44"><rect width="80" height="44" fill="#eef1f4"/></svg><div class="nm"><b>상평 임도</b> <span class="badge b-road">임도</span><div class="mini">김영희 · 10-24</div></div><div class="pp"><div class="pips sm"><i class="cur"></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="mini">파일 입력 0/7</div></div><span class="btn sm">열기 ›</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="pane" style="padding:12px 14px"><b style="font-size:13px">팀원별</b>
|
||||
<div class="mrow"><span class="ava" style="background:#1f7a4d">홍</span>홍길동<span class="sp"></span><span class="mini">2 개</span></div>
|
||||
<div class="mrow"><span class="ava" style="background:#2f5fbf">김</span>김영희<span class="sp"></span><span class="mini">2 개</span></div>
|
||||
<div class="mrow"><span class="ava" style="background:#c26a0f">박</span>박철수<span class="sp"></span><span class="mini">1 개</span></div>
|
||||
</div>
|
||||
<div class="pane" style="padding:12px 14px"><b style="font-size:13px">단계 분포</b>
|
||||
<div class="stackbar"><i style="width:20%;background:#cfe5d7" title="시작"></i><i style="width:60%;background:#1f7a4d"></i><i style="width:20%;background:var(--amb)"></i></div>
|
||||
<div class="mini">시작 1 · 설계 중 3 · 확정 대기 1</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 수십 개 (시스템 관리자) -->
|
||||
<div data-n="many">
|
||||
<div class="kgrid">
|
||||
<div class="kbox"><div class="mini">회사</div><b>9</b></div><div class="kbox"><div class="mini">진행 중 프로젝트</div><b>21</b><span class="up">+4 이번 주</span></div><div class="kbox"><div class="mini">처리 대기</div><b style="color:var(--red)">3</b><span class="mini">가입 2 · 새 회사 1</span></div><div class="kbox"><div class="mini">서버</div><b style="color:var(--amb)">디스크 85%</b><span class="mini">CPU 30 · 메모리 48</span></div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1.3fr 1fr;gap:14px;margin-top:14px">
|
||||
<div class="pane"><h3>회사별 진행 중 <span class="mini" style="font-weight:400">· 막대 누르면 그 회사 프로젝트</span></h3>
|
||||
<svg viewBox="0 0 320 130" width="100%" height="130"><g font-size="10" fill="#3b434b">
|
||||
<text x="0" y="14">예시건설</text><rect x="70" y="5" width="150" height="12" rx="3" fill="#1f7a4d"/><text x="226" y="15">5</text>
|
||||
<text x="0" y="36">산림청</text><rect x="70" y="27" width="180" height="12" rx="3" fill="#2f5fbf"/><text x="256" y="37">6</text>
|
||||
<text x="0" y="58">푸른엔지니어링</text><rect x="70" y="49" width="120" height="12" rx="3" fill="#1f7a4d"/><text x="196" y="59">4</text>
|
||||
<text x="0" y="80">숲길설계</text><rect x="70" y="71" width="90" height="12" rx="3" fill="#1f7a4d"/><text x="166" y="81">3</text>
|
||||
<text x="0" y="102">그 밖 5 곳</text><rect x="70" y="93" width="90" height="12" rx="3" fill="#a9d3b8"/><text x="166" y="103">3</text></g></svg></div>
|
||||
<div class="pane"><h3>종류 · 최근 7 일 활동</h3>
|
||||
<div class="row"><svg viewBox="0 0 42 42" width="90" height="90"><circle cx="21" cy="21" r="15.9" fill="none" stroke="#1f7a4d" stroke-width="6" stroke-dasharray="57 43" stroke-dashoffset="25"/><circle cx="21" cy="21" r="15.9" fill="none" stroke="#2f5fbf" stroke-width="6" stroke-dasharray="29 71" stroke-dashoffset="-32"/><circle cx="21" cy="21" r="15.9" fill="none" stroke="#c26a0f" stroke-width="6" stroke-dasharray="14 86" stroke-dashoffset="-61"/><text x="21" y="24" text-anchor="middle" font-size="8" font-weight="700">21</text></svg>
|
||||
<div class="legend"><span><i class="sw" style="background:#1f7a4d"></i>임도 12</span><span><i class="sw" style="background:#2f5fbf"></i>예정노선 6</span><span><i class="sw" style="background:#c26a0f"></i>안정성 3</span></div></div>
|
||||
<svg viewBox="0 0 200 34" width="100%" height="34"><path d="M0 28 L28 20 L57 24 L85 12 L114 16 L142 8 L171 12 L200 4" fill="none" stroke="#4f46e5" stroke-width="2"/></svg></div>
|
||||
</div>
|
||||
<div class="pane"><h3 style="display:flex;align-items:center">모든 프로젝트 <span class="sp" style="flex:1"></span><span class="seg"><button class="on">표</button><button>칸반</button></span></h3>
|
||||
<table><tr><th>이름</th><th>회사</th><th>종류</th><th>진행</th><th>마지막</th></tr>
|
||||
<tr><td>용화 임도</td><td>예시건설</td><td><span class="badge b-road">임도</span></td><td>횡단 4/7</td><td>오늘</td></tr>
|
||||
<tr><td>2027 용화 예정노선</td><td>산림청</td><td><span class="badge b-plan">예정노선</span></td><td>분석 2/3</td><td>어제</td></tr>
|
||||
<tr><td>내북 임도</td><td>예시건설</td><td><span class="badge b-road">임도</span></td><td>노선 3/7 · <b style="color:var(--amb)">12 일 그대로</b></td><td>10-14</td></tr>
|
||||
</table><div class="mini" style="margin-top:6px">회사 · 종류 · 상태 거르기 · 21 개 중 3</div></div>
|
||||
</div>
|
||||
|
||||
<!-- 공통 오른쪽 아래 -->
|
||||
<div class="pane" data-n="1 3" style="padding:12px 14px;margin-top:2px"><b style="font-size:13px">처리할 일</b>
|
||||
<div class="todo"><span class="dot" style="background:#2f5fbf"></span>새 예정노선 1 건 — 2027 용화<span class="sp"></span><span class="btn">보기</span></div>
|
||||
<div class="todo"><span class="dot" style="background:var(--amb)"></span>보관 파일 1 개 · 4 일 남음<span class="sp"></span><span class="btn">열기</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="note">
|
||||
<b>규칙(한 홈 · 저절로)</b> — 진행 중 <b>1 개</b> = 큰 카드 하나 · <b>2~3 개</b> = 중간 카드 나란히(최근 작업이 맨 앞 · 다음 할 일) · <b>4~8 개</b> = 한 줄 카드 목록 + 팀원별 · 단계 분포 · 「오래 멈춘 프로젝트」 표시 · <b>9 개 넘음</b> = 요약 숫자 · 그래프 + 표/칸반. 역할이 아니라 「보이는 진행 중 프로젝트 수」로 정함 — 사용자가 늘면 꼴도 따라 바뀜 · 사람이 바꿔 고정할 수도 있음(작게 / 크게).
|
||||
</div>
|
||||
<style>
|
||||
.pips { display: flex; gap: 4px; margin-top: 4px; } .pips i { flex: 1; height: 8px; border-radius: 4px; background: #e6e9ed; display: block; }
|
||||
.pips i.ok { background: var(--ac); } .pips i.cur { background: #fff; border: 2px solid var(--ac); }
|
||||
.pips.stab i.ok { background: var(--stab); } .pips.stab i.cur { border-color: var(--stab); }
|
||||
.pips.sm i { height: 6px; }
|
||||
.nextbox { margin-top: 10px; background: #fff8eb; border: 1px solid #f6dfb3; color: #8a5a00; border-radius: 8px; padding: 6px 10px; font-size: 12.5px; }
|
||||
.nextbox.sm { font-size: 11.5px; padding: 4px 8px; margin: 8px 0; }
|
||||
.kstrip { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--bd); }
|
||||
.kstrip div { padding: 10px 12px; border-left: 1px solid #f0f1f3; } .kstrip div:first-child { border-left: 0; }
|
||||
.kstrip b { display: block; font-size: 15px; } .kstrip span { color: var(--mut); font-size: 11.5px; }
|
||||
.pgrid3 { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
|
||||
.pcard { background: #fff; border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; }
|
||||
.pcard svg { display: block; width: 100%; height: 90px; } .pcard.big svg { height: 110px; }
|
||||
.pcard .c { padding: 10px 12px; }
|
||||
.btnp.sm, .btn.sm { display: inline-block; padding: 3px 9px; font-size: 12px; }
|
||||
.clist { background: #fff; border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; }
|
||||
.crow { display: grid; grid-template-columns: 80px 1.2fr 1fr auto; gap: 12px; align-items: center; padding: 8px 12px; border-top: 1px solid #f0f1f3; }
|
||||
.crow:first-child { border-top: 0; } .crow svg { width: 80px; height: 44px; border-radius: 6px; display: block; }
|
||||
.crow.warn { background: #fffbf3; }
|
||||
.mrow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid #f0f1f3; font-size: 12.5px; } .mrow:first-of-type { border-top: 0; }
|
||||
.ava { width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
|
||||
.stackbar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; margin: 8px 0 4px; } .stackbar i { display: block; height: 100%; }
|
||||
.kgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
|
||||
.kbox { background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 12px 14px; } .kbox b { display: block; font-size: 22px; margin-top: 2px; } .kbox .up { font-size: 11px; }
|
||||
@media (max-width: 900px) { .pgrid3, .kgrid { grid-template-columns: 1fr 1fr; } .crow { grid-template-columns: 60px 1fr auto; } .crow .pp { display: none; } }
|
||||
</style>
|
||||
<script>
|
||||
const rules = { '1': '진행 중 1 개 → 큰 카드', '3': '진행 중 2~3 개 → 중간 카드 나란히', '5': '진행 중 4~5 개 → 한 줄 카드 목록 + 팀원별', 'many': '진행 중 21 개 → 요약 숫자 · 그래프 + 표/칸반' };
|
||||
const setN = n => { document.querySelectorAll('#nSeg button').forEach(x => x.classList.toggle('on', x.dataset.n === n));
|
||||
document.querySelectorAll('[data-n]').forEach(el => { if (el.tagName === 'BUTTON') return; el.classList.toggle('hide', !el.dataset.n.split(' ').includes(n)); });
|
||||
document.getElementById('rule').textContent = rules[n];
|
||||
document.getElementById('pcount').textContent = { '1': '1', '3': '3', '5': '5', 'many': '21' }[n];
|
||||
document.getElementById('org').textContent = n === 'many' ? '전체 회사 ▾' : '예시건설'; };
|
||||
document.querySelectorAll('#nSeg button').forEach(b => b.onclick = () => setN(b.dataset.n));
|
||||
setN('3');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user