harang-ai
5e6c7085d3
- DESIGN-SYSTEM.md: 색상/타이포/컴포넌트/반응형 규칙 - 6개 페이지 디자인 문서 재작성 (대시/프로젝트/자매/설정/활동로그/조직도) - 관리자 페이지 디자인 가이드 - 원본 HTML 참조 파일 6개 - glassmorphism → 미니멀 터미널 UI - 모바일 breakpoint: 768px/767px
511 lines
16 KiB
HTML
511 lines
16 KiB
HTML
The code below contains a design. This design should be used to create a new app or be added to an existing one.
|
|
|
|
Look at the current open project to determine if a project exists. If no project is open, create a new Vite project then create this view in React after componentizing it.
|
|
|
|
If a project does exist, determine the framework being used and implement the design within that framework. Identify whether reusable components already exist that can be used to implement the design faithfully and if so use them, otherwise create new components. If other views already exist in the project, make sure to place the view in a sensible route and connect it to the other views.
|
|
|
|
Ensure the visual characteristics, layout, and interactions in the design are preserved with perfect fidelity.
|
|
|
|
Run the dev command so the user can see the app once finished.
|
|
|
|
```
|
|
<html lang="ko" vid="0"><head vid="1">
|
|
<meta charset="UTF-8" vid="2">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" vid="3">
|
|
<title vid="4">하나랑 대시보드</title>
|
|
<style vid="5">
|
|
|
|
|
|
:root {
|
|
--bg-main: #151515;
|
|
--bg-surface: #151515;
|
|
--text-primary: #F5F5F5;
|
|
--text-secondary: #8A8A8A;
|
|
--border-color: #333333;
|
|
--accent-hover: #FFFFFF;
|
|
|
|
--font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
|
|
--space-xs: 4px;
|
|
--space-sm: 8px;
|
|
--space-md: 16px;
|
|
--space-lg: 24px;
|
|
--space-xl: 40px;
|
|
--space-xxl: 64px;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
background-color: var(--bg-main);
|
|
color: var(--text-primary);
|
|
line-height: 1.5;
|
|
font-size: 14px;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
display: flex;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
|
|
.label-meta {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.label-meta span {
|
|
color: var(--text-secondary);
|
|
margin-right: var(--space-sm);
|
|
}
|
|
|
|
.bracket-value {
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
|
|
.app-container {
|
|
display: flex;
|
|
width: 100%;
|
|
max-width: 1600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
|
|
.sidebar {
|
|
width: 240px;
|
|
flex-shrink: 0;
|
|
border-right: 1px solid var(--border-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: var(--space-xl) var(--space-lg);
|
|
position: sticky;
|
|
top: 0;
|
|
height: 100vh;
|
|
}
|
|
|
|
.logo-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
margin-bottom: var(--space-xxl);
|
|
}
|
|
|
|
.logo-circle-full {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: var(--text-primary);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.logo-circle-half {
|
|
width: 10px;
|
|
height: 20px;
|
|
background-color: var(--text-primary);
|
|
border-radius: 0 20px 20px 0;
|
|
}
|
|
|
|
.nav-menu {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-link {
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
padding: var(--space-sm) 0;
|
|
transition: color 0.2s ease;
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.nav-link:hover, .nav-link.active {
|
|
color: var(--accent-hover);
|
|
}
|
|
|
|
.nav-link.active::before {
|
|
content: "[";
|
|
margin-right: 4px;
|
|
color: var(--text-secondary);
|
|
}
|
|
.nav-link.active::after {
|
|
content: "]";
|
|
margin-left: 4px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
|
|
.main-content {
|
|
flex-grow: 1;
|
|
padding: var(--space-xl) var(--space-xxl);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xl);
|
|
min-width: 0;
|
|
}
|
|
|
|
.page-header {
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
|
|
.status-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: var(--space-lg);
|
|
}
|
|
|
|
.card {
|
|
border: 1px solid var(--border-color);
|
|
padding: var(--space-lg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-lg);
|
|
background: var(--bg-surface);
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.card:hover {
|
|
border-color: #555;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.card-data-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.tech-bar {
|
|
height: 2px;
|
|
width: 100%;
|
|
background-color: var(--border-color);
|
|
margin-top: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.tech-bar-fill {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
background-color: var(--text-primary);
|
|
}
|
|
|
|
|
|
.data-columns {
|
|
display: grid;
|
|
grid-template-columns: 1.5fr 1fr;
|
|
gap: var(--space-xxl);
|
|
align-items: start;
|
|
}
|
|
|
|
.section-title {
|
|
font-family: var(--font-sans);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding-bottom: var(--space-sm);
|
|
margin-bottom: var(--space-lg);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
|
|
.project-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.project-row {
|
|
display: grid;
|
|
grid-template-columns: 40px 1fr auto;
|
|
gap: var(--space-md);
|
|
padding: var(--space-md) 0;
|
|
border-bottom: 1px solid #222;
|
|
align-items: center;
|
|
}
|
|
|
|
.project-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background-color: #333;
|
|
overflow: hidden;
|
|
filter: grayscale(100%) contrast(120%);
|
|
}
|
|
|
|
.avatar img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.project-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.project-name {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.project-desc {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
|
|
.timeline {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
.timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 3px;
|
|
width: 1px;
|
|
background-color: var(--border-color);
|
|
}
|
|
|
|
.timeline-item {
|
|
position: relative;
|
|
padding-left: var(--space-lg);
|
|
padding-bottom: var(--space-lg);
|
|
}
|
|
|
|
.timeline-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 6px;
|
|
width: 7px;
|
|
height: 7px;
|
|
background-color: var(--bg-main);
|
|
border: 1px solid var(--text-primary);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.time-stamp {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--space-xs);
|
|
display: block;
|
|
}
|
|
|
|
.timeline-content {
|
|
font-size: 13px;
|
|
color: var(--text-primary);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.timeline-content strong {
|
|
font-weight: 600;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body vid="6">
|
|
|
|
<div class="app-container" vid="7">
|
|
|
|
<aside class="sidebar" vid="8">
|
|
<div class="logo-container" vid="9">
|
|
<div class="logo-circle-full" vid="10"></div>
|
|
<div class="logo-circle-half" vid="11"></div>
|
|
</div>
|
|
|
|
<nav vid="12">
|
|
<ul class="nav-menu" vid="13">
|
|
<li class="nav-item" vid="14"><a href="#" class="nav-link active" vid="15">대시</a></li>
|
|
<li class="nav-item" vid="16"><a href="#" class="nav-link" vid="17">프로</a></li>
|
|
<li class="nav-item" vid="18"><a href="#" class="nav-link" vid="19">자매</a></li>
|
|
<li class="nav-item" vid="20"><a href="#" class="nav-link" vid="21">조직</a></li>
|
|
<li class="nav-item" vid="22"><a href="#" class="nav-link" vid="23">설정</a></li>
|
|
<li class="nav-item" vid="24"><a href="#" class="nav-link" vid="25">관리</a></li>
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
|
|
|
|
<main class="main-content" vid="26">
|
|
<header class="page-header" vid="27">
|
|
<h1 class="page-title" vid="28">하나랑 대시보드</h1>
|
|
</header>
|
|
|
|
|
|
<section class="status-grid" vid="29">
|
|
<div class="card" vid="30">
|
|
<div class="card-header" vid="31">
|
|
<div class="label-meta" vid="32"><span vid="33">SYS:</span>하랑</div>
|
|
</div>
|
|
<div class="card-data-row" vid="34">
|
|
<div class="bracket-value" vid="35">[ON]</div>
|
|
<div class="label-meta" vid="36">Active Node</div>
|
|
</div>
|
|
<div class="tech-bar" vid="37"><div class="tech-bar-fill" style="width: 100%;" vid="38"></div></div>
|
|
</div>
|
|
|
|
<div class="card" vid="39">
|
|
<div class="card-header" vid="40">
|
|
<div class="label-meta" vid="41"><span vid="42">SYS:</span>나랑</div>
|
|
</div>
|
|
<div class="card-data-row" vid="43">
|
|
<div class="bracket-value" vid="44">[84]</div>
|
|
<div class="label-meta" vid="45">Capacity %</div>
|
|
</div>
|
|
<div class="tech-bar" vid="46"><div class="tech-bar-fill" style="width: 84%;" vid="47"></div></div>
|
|
</div>
|
|
|
|
<div class="card" vid="48">
|
|
<div class="card-header" vid="49">
|
|
<div class="label-meta" vid="50"><span vid="51">SYS:</span>다랑</div>
|
|
</div>
|
|
<div class="card-data-row" vid="52">
|
|
<div class="bracket-value" style="color: var(--text-secondary);" vid="53">[--]</div>
|
|
<div class="label-meta" vid="54">Standby</div>
|
|
</div>
|
|
<div class="tech-bar" vid="55"><div class="tech-bar-fill" style="width: 0%;" vid="56"></div></div>
|
|
</div>
|
|
|
|
<div class="card" vid="57">
|
|
<div class="card-header" vid="58">
|
|
<div class="label-meta" vid="59"><span vid="60">SYS:</span>이랑</div>
|
|
</div>
|
|
<div class="card-data-row" vid="61">
|
|
<div class="bracket-value" vid="62">[12]</div>
|
|
<div class="label-meta" vid="63">Sync Queue</div>
|
|
</div>
|
|
<div class="tech-bar" vid="64"><div class="tech-bar-fill" style="width: 12%;" vid="65"></div></div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<div class="data-columns" vid="66">
|
|
|
|
<section vid="67">
|
|
<div class="section-title" vid="68">
|
|
<span vid="69">ONGOING PROJECTS</span>
|
|
<span class="label-meta" vid="70">VOL: 04</span>
|
|
</div>
|
|
<div class="project-list" vid="71">
|
|
<div class="project-row" vid="72">
|
|
<div class="avatar" vid="73">
|
|
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23444'/%3E%3Ccircle cx='50' cy='40' r='20' fill='%23666'/%3E%3Cpath d='M20 90 Q50 60 80 90' stroke='%23666' stroke-width='10' fill='none'/%3E%3C/svg%3E" alt="avatar" vid="74">
|
|
</div>
|
|
<div class="project-details" vid="75">
|
|
<div class="project-name" vid="76">데이터 파이프라인 최적화</div>
|
|
<div class="project-desc" vid="77">하랑 및 나랑 시스템 간의 실시간 동기화 지연율 개선.</div>
|
|
</div>
|
|
<div class="label-meta" vid="78">PHASE 2</div>
|
|
</div>
|
|
<div class="project-row" vid="79">
|
|
<div class="avatar" vid="80">
|
|
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23555'/%3E%3Cpath d='M30 80 L50 30 L70 80' stroke='%23777' stroke-width='8' fill='none'/%3E%3C/svg%3E" alt="avatar" vid="81">
|
|
</div>
|
|
<div class="project-details" vid="82">
|
|
<div class="project-name" vid="83">새로운 자매 노드 배포 (아랑)</div>
|
|
<div class="project-desc" vid="84">인프라 구성 및 초기 보안 감사 진행 중.</div>
|
|
</div>
|
|
<div class="label-meta" vid="85">INIT</div>
|
|
</div>
|
|
<div class="project-row" vid="86">
|
|
<div class="avatar" vid="87">
|
|
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23333'/%3E%3Ccircle cx='50' cy='50' r='25' fill='none' stroke='%23888' stroke-width='6'/%3E%3C/svg%3E" alt="avatar" vid="88">
|
|
</div>
|
|
<div class="project-details" vid="89">
|
|
<div class="project-name" vid="90">관리자 권한 체계 개편</div>
|
|
<div class="project-desc" vid="91">조직별 접근 제어 정책 재수립 및 적용.</div>
|
|
</div>
|
|
<div class="label-meta" vid="92">REVIEW</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section vid="93">
|
|
<div class="section-title" vid="94">
|
|
<span vid="95">ACTIVITY FEED</span>
|
|
<span class="label-meta" vid="96">LIVE</span>
|
|
</div>
|
|
<div class="timeline" vid="97">
|
|
<div class="timeline-item" vid="98">
|
|
<span class="time-stamp" vid="99">14:02:45 GMT+9</span>
|
|
<div class="timeline-content" vid="100">
|
|
<strong vid="101">System (다랑)</strong> status updated to Standby mode by admin protocol.
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item" vid="102">
|
|
<span class="time-stamp" vid="103">11:30:12 GMT+9</span>
|
|
<div class="timeline-content" vid="104">
|
|
<strong vid="105">Security Audit</strong> completed for project [데이터 파이프라인 최적화]. No critical vulnerabilities found.
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item" vid="106">
|
|
<span class="time-stamp" vid="107">09:15:00 GMT+9</span>
|
|
<div class="timeline-content" vid="108">
|
|
New user batch imported to <strong vid="109">Organization [Beta]</strong> structure.
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item" vid="110">
|
|
<span class="time-stamp" vid="111">08:00:05 GMT+9</span>
|
|
<div class="timeline-content" vid="112">
|
|
Daily automated backup initiated across all active nodes.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
|
|
</body></html>
|
|
```
|