Tr_Code/templates/index.html

78 lines
2.6 KiB
HTML

<!doctype html>
<html lang="ko" data-theme="auto">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>{{ app_name }}</title>
<link rel="icon" href="data:,">
<link rel="manifest" href="/static/manifest.webmanifest">
<meta name="theme-color" content="#0f172a">
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@2.0.6/css/pico.min.css">
<link rel="stylesheet" href="/static/styles.css">
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
<script defer src="/static/app.js"></script>
</head>
<body>
<header class="container">
<nav>
<ul>
<li><strong>{{ app_name }}</strong></li>
</ul>
<ul>
{% if user %}
<li>
<small style="margin-right: 1rem;">
<strong>{{ user.name }}</strong> ({{ user.employee_id }})
</small>
</li>
<li>
<a href="/auth/logout" class="contrast outline" role="button">로그아웃</a>
</li>
{% endif %}
<li>
<button class="contrast" id="themeToggle" aria-label="테마 전환">🌙</button>
</li>
</ul>
</nav>
</header>
<main class="container">
<div class="tabs seg" id="topSections" role="tablist">
<button class="tab-button" aria-selected="true"
hx-get="/sb?section=fault"
hx-target="#tabPanel" hx-swap="innerHTML">고장코드</button>
<button class="tab-button" aria-selected="false"
hx-get="/sb?section=tcms"
hx-target="#tabPanel" hx-swap="innerHTML">TCMS 코드</button>
<button class="tab-button" aria-selected="false"
hx-get="/sb?section=mmicode"
hx-target="#tabPanel" hx-swap="innerHTML">MMI 코드</button>
<button class="tab-button" aria-selected="false"
hx-get="/sb?section=emergency"
hx-target="#tabPanel" hx-swap="innerHTML">응급조치요령</button>
</div>
<section id="tabPanel" hx-get="/sb" hx-trigger="load" hx-swap="innerHTML">
<!-- 제조사 탭 컨텐츠 로드 -->
</section>
</main>
<dialog id="modal"></dialog>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/static/sw.js').then(registration => {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, err => {
console.log('ServiceWorker registration failed: ', err);
});
});
}
</script>
</body>
</html>