h-lab/src/main/resources/templates/layout/base.html

61 lines
2.4 KiB
HTML

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>h-lab - Dashboard</title>
<!-- Theme init (before paint, no flash) -->
<script>
(function () {
try { document.documentElement.setAttribute('data-theme', localStorage.getItem('theme') || 'light'); }
catch (e) { document.documentElement.setAttribute('data-theme', 'light'); }
})();
</script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Editorial identity (dashboard) -->
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<!-- CSS (v= 캐시 버스팅 — CSS 바뀌면 숫자 올리기) -->
<link rel="stylesheet" th:href="@{/css/variables.css(v=20260617b)}">
<link rel="stylesheet" th:href="@{/css/style.css(v=20260617b)}">
<th:block layout:fragment="styles"></th:block>
<!-- Lucide Icons (CDN for simplicity in SSR) -->
<script src="https://unpkg.com/lucide@latest"></script>
</head>
<body>
<div style="display: flex; min-height: 100vh;">
<!-- Sidebar Fragment -->
<div th:replace="~{layout/sidebar :: sidebar}"></div>
<!-- Main Content -->
<main id="mainContent" style="flex: 1; padding: 2.5rem; position: relative; z-index: 1;">
<!-- Mobile Menu Toggle (Visible only on mobile) -->
<button id="mobileSidebarToggle" class="mobile-menu-btn">
<i data-lucide="menu" style="width: 24px; height: 24px;"></i>
</button>
<div class="container" layout:fragment="content">
<!-- Content goes here -->
</div>
</main>
</div>
<!-- JS -->
<script th:src="@{/js/common.js(v=20260617b)}"></script>
<script>
lucide.createIcons();
</script>
<th:block layout:fragment="script"></th:block>
<th:block layout:fragment="scripts"></th:block>
</body>
</html>