harang-ai
5e6c7085d3
- DESIGN-SYSTEM.md: 색상/타이포/컴포넌트/반응형 규칙 - 6개 페이지 디자인 문서 재작성 (대시/프로젝트/자매/설정/활동로그/조직도) - 관리자 페이지 디자인 가이드 - 원본 HTML 참조 파일 6개 - glassmorphism → 미니멀 터미널 UI - 모바일 breakpoint: 768px/767px
409 lines
15 KiB
HTML
409 lines
15 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">하나랑 대시보드 - ACTIVITY LOG</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;
|
|
}
|
|
|
|
.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-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-lg);
|
|
min-width: 0;
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding-bottom: var(--space-md);
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.header-meta {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
|
|
.log-controls {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: var(--space-lg);
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
|
|
.filter-group {
|
|
display: flex;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.filter-btn {
|
|
background: transparent;
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
padding: 6px 12px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.filter-btn:hover {
|
|
border-color: #555;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.filter-btn.active {
|
|
background: var(--text-primary);
|
|
color: var(--bg-main);
|
|
border-color: var(--text-primary);
|
|
}
|
|
|
|
.search-box {
|
|
position: relative;
|
|
flex-grow: 1;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.search-input {
|
|
width: 100%;
|
|
background: #1a1a1a;
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
padding: 8px 12px;
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
outline: none;
|
|
}
|
|
|
|
.search-input:focus {
|
|
border-color: #555;
|
|
}
|
|
|
|
|
|
.log-container {
|
|
border: 1px solid var(--border-color);
|
|
background: #0d0d0d;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.log-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.log-table th {
|
|
text-align: left;
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
padding: var(--space-md);
|
|
border-bottom: 1px solid var(--border-color);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.log-table td {
|
|
padding: 12px 16px;
|
|
font-size: 12px;
|
|
border-bottom: 1px solid #1a1a1a;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.log-row:hover {
|
|
background-color: #1a1a1a;
|
|
}
|
|
|
|
.col-time { width: 180px; color: var(--text-secondary); }
|
|
.col-type { width: 100px; font-weight: bold; }
|
|
.col-event { color: var(--text-primary); }
|
|
.col-status { width: 100px; text-align: right; }
|
|
|
|
.tag {
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
border: 1px solid currentColor;
|
|
}
|
|
|
|
.tag-sys { color: #888; }
|
|
.tag-sec { color: #ff5f5f; }
|
|
.tag-org { color: #5fafff; }
|
|
.tag-bak { color: #5fff8a; }
|
|
|
|
|
|
.pagination {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: var(--space-md);
|
|
margin-top: var(--space-md);
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.page-nav {
|
|
cursor: pointer;
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.page-nav:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.bracket-label {
|
|
font-weight: bold;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
</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" vid="15">대시</a></li>
|
|
<li class="nav-item" vid="16"><a href="#" class="nav-link active" 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>
|
|
<li class="nav-item" vid="26"><a href="#" class="nav-link" vid="27">관리</a></li>
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
|
|
<main class="main-content" vid="28">
|
|
<header class="page-header" vid="29">
|
|
<h1 class="page-title" vid="30">활동 로그 <span style="color:var(--text-secondary); font-size: 18px;" vid="31">/ ACTIVITY LOG</span></h1>
|
|
<div class="header-meta" vid="32">SYS_LOG_V.4.2 // RUNTIME: 428:12:05</div>
|
|
</header>
|
|
|
|
<section class="log-controls" vid="33">
|
|
<div class="filter-group" vid="34">
|
|
<button class="filter-btn active" vid="35">ALL</button>
|
|
<button class="filter-btn" vid="36">SYSTEM</button>
|
|
<button class="filter-btn" vid="37">SECURITY</button>
|
|
<button class="filter-btn" vid="38">ORG</button>
|
|
<button class="filter-btn" vid="39">BACKUP</button>
|
|
</div>
|
|
<div class="search-box" vid="40">
|
|
<input type="text" class="search-input" placeholder="SEARCH LOGS..." vid="41">
|
|
</div>
|
|
</section>
|
|
|
|
<div class="log-container" vid="42">
|
|
<table class="log-table" vid="43">
|
|
<thead vid="44">
|
|
<tr vid="45">
|
|
<th vid="46">TIMESTAMP</th>
|
|
<th vid="47">TYPE</th>
|
|
<th vid="48">EVENT DESCRIPTION</th>
|
|
<th style="text-align: right;" vid="49">CODE</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody vid="50">
|
|
<tr class="log-row" vid="51">
|
|
<td class="col-time" vid="52">2023-10-27 14:02:45</td>
|
|
<td class="col-type" vid="53"><span class="tag tag-sys" vid="54">SYSTEM</span></td>
|
|
<td class="col-event" vid="55">Node <span class="bracket-label" vid="56">[다랑]</span> transitioned to status: <span class="bracket-label" vid="57">STANDBY</span>. Protocol initiated by admin_auth_01.</td>
|
|
<td class="col-status" vid="58">0x402</td>
|
|
</tr>
|
|
<tr class="log-row" vid="59">
|
|
<td class="col-time" vid="60">2023-10-27 13:45:12</td>
|
|
<td class="col-type" vid="61"><span class="tag tag-org" vid="62">ORG</span></td>
|
|
<td class="col-event" vid="63">New sub-directory created under <span class="bracket-label" vid="64">[Organization Beta]</span>. Path mapping complete.</td>
|
|
<td class="col-status" vid="65">0x112</td>
|
|
</tr>
|
|
<tr class="log-row" vid="66">
|
|
<td class="col-time" vid="67">2023-10-27 11:30:12</td>
|
|
<td class="col-type" vid="68"><span class="tag tag-sec" vid="69">SECURITY</span></td>
|
|
<td class="col-event" vid="70">Full security sweep completed for project <span class="bracket-label" vid="71">[DATA_PIPE_OPT]</span>. Zero vulnerabilities identified.</td>
|
|
<td class="col-status" vid="72">0x000</td>
|
|
</tr>
|
|
<tr class="log-row" vid="73">
|
|
<td class="col-time" vid="74">2023-10-27 10:15:33</td>
|
|
<td class="col-type" vid="75"><span class="tag tag-sys" vid="76">SYSTEM</span></td>
|
|
<td class="col-event" vid="77">Memory allocation threshold reached on <span class="bracket-label" vid="78">[나랑]</span>. Auto-scaling provisioned +4GB swap.</td>
|
|
<td class="col-status" vid="79">0x284</td>
|
|
</tr>
|
|
<tr class="log-row" vid="80">
|
|
<td class="col-time" vid="81">2023-10-27 09:15:00</td>
|
|
<td class="col-type" vid="82"><span class="tag tag-org" vid="83">ORG</span></td>
|
|
<td class="col-event" vid="84">Batch import: 42 new identities integrated into <span class="bracket-label" vid="85">[Beta]</span> structure. </td>
|
|
<td class="col-status" vid="86">0x105</td>
|
|
</tr>
|
|
<tr class="log-row" vid="87">
|
|
<td class="col-time" vid="88">2023-10-27 08:00:05</td>
|
|
<td class="col-type" vid="89"><span class="tag tag-bak" vid="90">BACKUP</span></td>
|
|
<td class="col-event" vid="91">Scheduled snapshot <span class="bracket-label" vid="92">[DAILY_BKP_2710]</span> finalized. Target: S3_COLD_STORAGE.</td>
|
|
<td class="col-status" vid="93">0x900</td>
|
|
</tr>
|
|
<tr class="log-row" vid="94">
|
|
<td class="col-time" vid="95">2023-10-27 07:42:11</td>
|
|
<td class="col-type" vid="96"><span class="tag tag-sec" vid="97">SECURITY</span></td>
|
|
<td class="col-event" vid="98">SSH login attempt blocked. IP: 192.168.1.104. Failed attempts: 3. Protocol: BAN_IP.</td>
|
|
<td class="col-status" vid="99">0x666</td>
|
|
</tr>
|
|
<tr class="log-row" vid="100">
|
|
<td class="col-time" vid="101">2023-10-27 04:20:00</td>
|
|
<td class="col-type" vid="102"><span class="tag tag-sys" vid="103">SYSTEM</span></td>
|
|
<td class="col-event" vid="104">Garbage collection cycle completed on all active nodes. Freed 1.2GB.</td>
|
|
<td class="col-status" vid="105">0x401</td>
|
|
</tr>
|
|
<tr class="log-row" vid="106">
|
|
<td class="col-time" vid="107">2023-10-27 01:12:45</td>
|
|
<td class="col-type" vid="108"><span class="tag tag-sys" vid="109">SYSTEM</span></td>
|
|
<td class="col-event" vid="110">Kernel patch 1.2.4 deployed to <span class="bracket-label" vid="111">[하랑]</span>. Restart bypassed via hotpatching.</td>
|
|
<td class="col-status" vid="112">0x400</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<footer class="pagination" vid="113">
|
|
<span class="page-info" vid="114">SHOWING 1-9 OF 2,410 ENTRIES</span>
|
|
<div style="display: flex; gap: var(--space-md);" vid="115">
|
|
<span class="page-nav" vid="116">[PREV]</span>
|
|
<span style="color: var(--text-primary);" vid="117">PAGE 01</span>
|
|
<span class="page-nav" vid="118">[NEXT]</span>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
</div>
|
|
|
|
</body></html>
|
|
```
|