gitmote

gitmote / internal / webui / templates / layout.html  ·  history  ·  branches

2718 bytes · raw

{{define "top"}}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>gitmote</title>
<style>
  :root { color-scheme: light dark; }
  body { font-family: system-ui, sans-serif; margin: 2rem auto; padding: 0 1rem; line-height: 1.5; }
  nav { display: flex; gap: 1rem; align-items: baseline; border-bottom: 1px solid #8884; padding-bottom: .5rem; margin-bottom: 1.5rem; }
  nav .spacer { flex: 1; }
  nav a { text-decoration: none; }
  h1 { font-size: 1.4rem; }
  table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
  th, td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid #8883; }
  form.inline { display: inline; }
  fieldset { border: 1px solid #8884; border-radius: 6px; margin: 1rem 0; }
  label { display: inline-block; margin-right: 1rem; }
  input, select { padding: .3rem; }
  .flash { padding: .5rem .75rem; border-radius: 6px; margin: 1rem 0; }
  .flash.ok { background: #1a7f371a; }
  .flash.err { background: #cc00001a; }
  code { word-break: break-all; }
  pre { overflow-x: auto; padding: .75rem; background: #8881; border-radius: 6px; }
  .chroma { padding: .75rem; border-radius: 6px; overflow-x: auto; }
  .markdown-body { border-top: 1px solid #8884; margin-top: 1.5rem; padding-top: 1rem; }
  .diff { overflow-x: auto; border: 1px solid #8884; border-radius: 6px; margin: 1rem 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
  .diff .dl { white-space: pre; padding: 0 .6rem; min-height: 1.3em; }
  .diff .dl-file { background: #8883; font-weight: 600; }
  .diff .dl-hunk { background: #8882; color: #6b8cae; }
  .diff .dl-add { background: #2ea04326; }
  .diff .dl-del { background: #f8514926; }
  {{highlightCSS}}
</style>
</head>
<body>
{{template "nav" .}}
{{template "flash" .}}
{{end}}

{{define "nav"}}
<nav>
  <strong><a href="/">gitmote</a></strong>
  {{if .IsAdmin}}
  <a href="/users">Users</a>
  <a href="/tokens">Tokens</a>
  {{end}}
  <span class="spacer"></span>
  {{if .Me}}
  <span>{{.Me}}</span>
  <form class="inline" method="post" action="/logout"><button type="submit">Log out</button></form>
  {{else}}
  <a href="/login">Sign in</a>
  {{end}}
</nav>
{{end}}

{{define "flash"}}
{{if .Flash}}<div class="flash ok">{{.Flash}}</div>{{end}}
{{if .Err}}<div class="flash err">{{.Err}}</div>{{end}}
{{end}}

{{define "bottom"}}
{{if .Mermaid}}
<script src="/static/mermaid.min.js"></script>
<script>
  var dark = matchMedia('(prefers-color-scheme: dark)').matches;
  mermaid.initialize({ startOnLoad: false, securityLevel: 'strict', theme: dark ? 'dark' : 'default' });
  mermaid.run();
</script>
{{end}}
</body>
</html>
{{end}}