forked from alterminal/alterminal
105 lines
6.6 KiB
HTML
105 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-Hant">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="referrer" content="no-referrer">
|
||
<title>{{block "title" .}}alterminal{{end}}</title>
|
||
<link rel="stylesheet" href="/static/css/main.css">
|
||
</head>
|
||
{{/*
|
||
側邊導覽欄版面（app shell）：桌面版（md+）側欄固定展開，主內容以
|
||
md:pl-72 偏移；手機版側欄預設移出畫面外，以隱藏 checkbox（peer）搭配
|
||
peer-checked: 變體開合——CSP 停用 JavaScript，故開合必須是純 CSS。
|
||
頁面模板需定義 "content"，可另定義 "title"、"navitems"、"sidebarfooter"
|
||
（後三者未定義時使用此處的預設）。
|
||
*/}}
|
||
<body class="min-h-screen bg-neutral-100 font-sans text-neutral-900 antialiased dark:bg-neutral-900 dark:text-neutral-100">
|
||
<div class="min-h-screen">
|
||
<input type="checkbox" id="sidebar-toggle" class="peer sr-only" aria-label="切換側邊導覽列">
|
||
<label for="sidebar-toggle" title="開啟導覽列"
|
||
class="fixed left-4 top-4 z-50 flex size-11 cursor-pointer items-center justify-center rounded-lg border border-neutral-300 bg-white text-neutral-600 shadow-sm md:hidden peer-checked:hidden peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-brand dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-300">
|
||
<svg class="size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/>
|
||
</svg>
|
||
</label>
|
||
<label for="sidebar-toggle" aria-hidden="true"
|
||
class="fixed inset-0 z-30 hidden cursor-pointer bg-neutral-900/40 peer-checked:block md:hidden!"></label>
|
||
<aside aria-label="側邊導覽列"
|
||
class="fixed inset-y-0 left-0 z-40 flex w-72 -translate-x-full flex-col border-r border-neutral-200 bg-white transition-transform duration-200 ease-in-out peer-checked:translate-x-0 md:translate-x-0 dark:border-neutral-700 dark:bg-neutral-800">
|
||
<div class="flex items-center gap-3 border-b border-neutral-200 px-6 py-5 dark:border-neutral-700">
|
||
<span class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-brand text-white">
|
||
<svg class="size-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"/>
|
||
</svg>
|
||
</span>
|
||
<span class="min-w-0">
|
||
<span class="block text-base font-semibold leading-tight">alterminal</span>
|
||
<span class="block text-xs text-neutral-500 dark:text-neutral-400">單一登入服務</span>
|
||
</span>
|
||
</div>
|
||
<nav aria-label="主要導覽" class="flex-1 overflow-y-auto px-3 py-4">
|
||
<ul class="space-y-1">
|
||
{{block "navitems" .}}
|
||
<li>
|
||
<a href="/" aria-current="page"
|
||
class="flex items-center gap-3 rounded-lg bg-brand/10 px-3 py-2 text-sm font-medium text-brand dark:bg-brand/25 dark:text-blue-200">
|
||
<svg class="size-5 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/>
|
||
</svg>
|
||
帳號資訊
|
||
</a>
|
||
</li>
|
||
{{if .IsAdmin}}
|
||
<li>
|
||
<a href="/admin/keys"
|
||
class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-neutral-600 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-700/60">
|
||
<svg class="size-5 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z"/>
|
||
</svg>
|
||
金鑰管理
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="/admin/applications"
|
||
class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-neutral-600 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-700/60">
|
||
<svg class="size-5 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"/>
|
||
</svg>
|
||
應用程式管理
|
||
</a>
|
||
</li>
|
||
{{end}}
|
||
{{end}}
|
||
</ul>
|
||
</nav>
|
||
<div class="border-t border-neutral-200 px-4 py-4 dark:border-neutral-700">
|
||
{{/* 預設頁尾：使用者資訊與登出表單（頁面資料需含 Username／Email／CSRF），
|
||
未登入脈絡的頁面不應使用本版面。 */}}
|
||
{{block "sidebarfooter" .}}
|
||
<div class="min-w-0">
|
||
<p class="truncate text-sm font-medium">{{.Username}}</p>
|
||
<p class="truncate text-xs text-neutral-500 dark:text-neutral-400">{{.Email}}</p>
|
||
</div>
|
||
<form method="post" action="/logout" class="mt-3">
|
||
<input type="hidden" name="csrf_token" value="{{.CSRF}}">
|
||
<button type="submit"
|
||
class="flex w-full items-center justify-center gap-2 rounded-lg border border-neutral-300 py-2 text-sm font-semibold hover:bg-neutral-100 dark:border-neutral-600 dark:hover:bg-neutral-700">
|
||
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0L18 12m0 0 2.25-2.25M18 12H9"/>
|
||
</svg>
|
||
登出
|
||
</button>
|
||
</form>
|
||
{{end}}
|
||
</div>
|
||
</aside>
|
||
<div class="flex min-h-screen flex-col md:pl-72">
|
||
<main class="mx-auto w-full max-w-3xl flex-1 p-4 md:p-10">
|
||
{{template "content" .}}
|
||
</main>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|