hehihoho3@gmail.com
adb51943a3
Phase A+dashboard of the UI redesign: - variables.css: light-default tokens + [data-theme=dark] overrides; old var names aliased to theme tokens so existing markup adapts to both themes - style.css: refined components (card/btn/nav/badge/bar/table/forms), tokenized the dark-assuming rgba colors - theme toggle: pre-paint init in base.html <head> + toggleTheme() in common.js, persisted to localStorage; toggle button in sidebar - sidebar.html: labeled nav with sections (분석/파이프라인/제작), active state, account; Korean labels - dashboard.html: tokenized inline colors; verified light & dark with real data Spec: docs/superpowers/specs/2026-06-12-ui-redesign-design.md Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
69 lines
3.9 KiB
HTML
69 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
|
|
<body th:fragment="sidebar">
|
|
<aside id="sidebar" class="sidebar">
|
|
<!-- Brand -->
|
|
<div class="flex items-center justify-between" style="padding: 1.1rem 1rem 0.5rem;">
|
|
<div class="flex items-center gap-3">
|
|
<div style="width:30px;height:30px;background:var(--primary-gradient);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
|
|
<span style="font-weight:800;color:#fff;font-size:15px;">H</span>
|
|
</div>
|
|
<div class="brand-text" style="white-space:nowrap;">
|
|
<div style="font-size:15px;font-weight:700;letter-spacing:-0.2px;color:var(--text);line-height:1.1;">h-lab</div>
|
|
<div style="font-size:11px;color:var(--text-3);font-weight:500;">yanalyst</div>
|
|
</div>
|
|
</div>
|
|
<button id="sidebarToggle" class="sidebar-toggle-btn">
|
|
<i data-lucide="chevron-left" style="width:18px;height:18px;"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<nav style="flex:1;padding:0.5rem 0.75rem;overflow-y:auto;">
|
|
<div class="nav-section">분석</div>
|
|
<a th:href="@{/}" class="nav-item" th:classappend="${currentPage == 'dashboard'} ? 'active'">
|
|
<i data-lucide="layout-dashboard" class="nav-icon"></i><span class="nav-text">대시보드</span>
|
|
</a>
|
|
<a th:href="@{/discover}" class="nav-item" th:classappend="${currentPage == 'discover'} ? 'active'">
|
|
<i data-lucide="radar" class="nav-icon"></i><span class="nav-text">발굴</span>
|
|
</a>
|
|
<a th:href="@{/channels}" class="nav-item" th:classappend="${currentPage == 'channels'} ? 'active'">
|
|
<i data-lucide="users" class="nav-icon"></i><span class="nav-text">채널</span>
|
|
</a>
|
|
|
|
<div class="nav-section">파이프라인</div>
|
|
<a th:href="@{/collection}" class="nav-item" th:classappend="${currentPage == 'collection'} ? 'active'">
|
|
<i data-lucide="library" class="nav-icon"></i><span class="nav-text">수집함</span>
|
|
</a>
|
|
<a th:href="@{/board}" class="nav-item" th:classappend="${currentPage == 'board'} ? 'active'">
|
|
<i data-lucide="kanban-square" class="nav-icon"></i><span class="nav-text">칸반 보드</span>
|
|
</a>
|
|
<a th:href="@{/publish}" class="nav-item" th:classappend="${currentPage == 'publish'} ? 'active'">
|
|
<i data-lucide="send" class="nav-icon"></i><span class="nav-text">발행 큐</span>
|
|
</a>
|
|
|
|
<div class="nav-section">제작</div>
|
|
<a th:href="@{/production}" class="nav-item" th:classappend="${currentPage == 'production'} ? 'active'">
|
|
<i data-lucide="clapperboard" class="nav-icon"></i><span class="nav-text">프로덕션</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="user-profile-container">
|
|
<button class="theme-toggle" onclick="toggleTheme()" type="button" title="테마 전환">
|
|
<span class="moon"><i data-lucide="moon" style="width:15px;height:15px;"></i></span>
|
|
<span class="sun"><i data-lucide="sun" style="width:15px;height:15px;"></i></span>
|
|
<span class="nav-text">테마 전환</span>
|
|
</button>
|
|
<div class="user-profile-content">
|
|
<div style="width:30px;height:30px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);flex-shrink:0;"></div>
|
|
<div class="user-info" style="white-space:nowrap;">
|
|
<div style="font-size:12.5px;font-weight:600;color:var(--text);">hehiho</div>
|
|
<div style="font-size:11px;color:var(--text-3);">개인 작업공간</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</body>
|
|
|
|
</html>
|