harang-ai
5e6c7085d3
- DESIGN-SYSTEM.md: 색상/타이포/컴포넌트/반응형 규칙 - 6개 페이지 디자인 문서 재작성 (대시/프로젝트/자매/설정/활동로그/조직도) - 관리자 페이지 디자인 가이드 - 원본 HTML 참조 파일 6개 - glassmorphism → 미니멀 터미널 UI - 모바일 breakpoint: 768px/767px
3.4 KiB
3.4 KiB
자매 노드 관리 (/sisters) — 디자인 v2
참조: DESIGN-SYSTEM.md | 원본: 자기야 디자인 파일 #3
레이아웃
┌──────────┬──────────────────────────────────────────────┐
│ Sidebar │ 자매 노드 관리 TOTAL NODES: 04 │
│ │ ─────────────────────────────────────────── │
│ │ │
│ │ ● 하랑 (Primary) │ CAPACITY 24H │ SYNC LOG│
│ │ Uptime: 342:12 │ ▁▂▃▂▄▆█▇ │ 14:05 ✓│
│ │ [ACTIVE][REBOOT]│ LOAD: 84.2% │ 13:55 ✓│
│ │ ─────────────────────────────────────────── │
│ │ ● 나랑 (Secondary)│ CAPACITY 24H │ SYNC LOG│
│ │ Uptime: 112:44 │ ▁▁▁▂▂▃▃▃ │ 14:02 ✓│
│ │ [ACTIVE][REBOOT]│ LOAD: 48.7% │ 13:51 ✓│
│ │ ─────────────────────────────────────────── │
│ │ ○ 다랑 (Standby) │ CAPACITY 24H │ SYNC LOG│
│ │ Last: 02:15 ago │ ░░░░░░░░ │ IDLE │
│ │ [STANDBY][ACTIV]│ LOAD: 0.0% │ IDLE │
│ │ ─────────────────────────────────────────── │
│ │ ● 이랑 (Sync) │ CAPACITY 24H │ SYNC LOG│
│ │ Queue: 12 PKTS │ ▁▂▁▂▃▂▁▁ │ SYNCING │
│ │ [SYNCING][FLUSH]│ LOAD: 15.2% │ SYNCING │
└──────────┴──────────────────────────────────────────────┘
페이지 헤더
- page-title: "자매 노드 관리" (28px 600)
- label-meta:
TOTAL NODES: 04 - border-bottom 1px
노드 엔트리 (Node Entry)
grid-template-columns: 240px 1fr 300px/ gap: 64pxborder-bottom: 1px solid var(--border-color)/ padding-bottom: 40px
좌: Node Info (240px)
- node-name: 20px 600 + status-indicator
- active: 8px 흰색 원 + glow shadow
- inactive: 8px
#555원
- meta-pair: label-meta + val (16px mono)
- 하랑: Uptime 342:12:05
- 다랑: Last Active 02:15:00 ago
- 이랑: Queue Depth 12 PKTS
- node-controls: btn-toggle 2개
- active 상태: 흰색 배경 + 검정 텍스트
- 비active: 투명 + 보더
중: Capacity Section
- label-meta: "CAPACITY HISTORY (24H)"
- graph-container: 60px 높이, flex-end
- graph-bar: 등분,
#333기본 - highlight: 최근 2개 바
var(--text-primary) - border-left + border-bottom 1px
- graph-bar: 등분,
- sync-row: "LOAD INDEX" + 값 (mono)
우: Sync History (300px)
- label-meta: "SYNC LOG"
- sync-row: 타임스탬프 + 상태 (mono 11px)
- 성공:
var(--text-primary)색 "SUCCESS" - IDLE: secondary
- SYNCING: primary
- 성공:
모바일 반응형
- node-entry: 3열 → 수직 스택 (info → capacity → sync)
- graph-container: 높이 유지, 너비 100%
- btn-toggle: 가로 나란히