1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
{{define "base"}}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{template "title" .}}</title>
<style>
  :root {
    --bg:       #ffffff;
    --bg2:      #f4f4f4;
    --fg:       #222222;
    --fg2:      #555555;
    --accent:   #1d6fa5;
    --accent-h: #155a87;
    --border:   #dddddd;
    --border2:  #eeeeee;
    --warn-bg:  #fff4e0;
    --warn-bdr: #f0c060;
    --warn-fg:  #b05000;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg:       #1a1a1a;
      --bg2:      #2a2a2a;
      --fg:       #e8e8e8;
      --fg2:      #aaaaaa;
      --accent:   #4da3d8;
      --accent-h: #6db8e8;
      --border:   #444444;
      --border2:  #333333;
      --warn-bg:  #3a2800;
      --warn-bdr: #7a5a00;
      --warn-fg:  #f0b040;
    }
  }
  *, *::before, *::after { box-sizing: border-box; }
  body {
    font-family: system-ui, sans-serif;
    background: var(--bg);
    color: var(--fg);
    margin: 0;
    padding: 0 1.5rem;
  }
  a { color: var(--accent); }
  a:hover { color: var(--accent-h); }
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.1rem; border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; }
  .meta { color: var(--fg2); font-size: 0.9rem; margin-bottom: 2rem; }
  input[type=text], input[type=file] {
    font-size: 1rem;
    padding: 0.4em 0.6em;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg2);
    color: var(--fg);
    width: 100%;
  }
  input[type=text]:focus { outline: 2px solid var(--accent); }
  label { display: block; margin-bottom: 0.4rem; font-weight: 500; }
  button, a.bot {
    font-size: 0.95rem;
    padding: 0.45em 1.1em;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
  }
  button:hover, a.bot:hover { background: var(--accent-h); }
  .page { max-width: 860px; margin: 2rem auto; }
  .page.narrow { max-width: 480px; margin: 4rem auto; }
  .step { margin: 1.5rem 0; }
  .pin {
    font-size: 2.5rem;
    font-weight: bold;
    letter-spacing: 0.3em;
    font-family: monospace;
    background: var(--bg2);
    padding: 0.4em 0.8em;
    border-radius: 6px;
    display: inline-block;
  }
  .msg {
    color: var(--warn-fg);
    background: var(--warn-bg);
    border: 1px solid var(--warn-bdr);
    border-radius: 4px;
    padding: 0.6em 1em;
    margin-bottom: 1rem;
  }
  .boost-form { display: flex; gap: 0.5rem; margin-bottom: 2rem; }
  .boost-form input { flex: 1; width: auto; }
  table { width: 100%; border-collapse: collapse; }
  th { text-align: left; border-bottom: 2px solid var(--border); padding: 0.4rem 0.5rem; }
  td { border-bottom: 1px solid var(--border2); padding: 0.5rem; word-break: break-all; vertical-align: middle; }
  td.ts { white-space: nowrap; color: var(--fg2); font-size: 0.85rem; width: 14em; }
  td.open { white-space: nowrap; font-size: 0.85rem; width: 12em; }
  td:last-child { width: 8em; }
  ul.bots { list-style: none; padding: 0; }
  ul.bots li { margin: 0.75rem 0; }
  code { background: var(--bg2); padding: 0.1em 0.4em; border-radius: 3px; }
  small.snippet { color: var(--fg2); font-size: 0.82rem; }
  .curators { font-size: 0.9rem; color: var(--fg2); margin-bottom: 1.5rem; }
  .curators ul { display: inline; margin: 0; padding: 0; list-style: none; }
  .curators li { display: inline; }
  .curators li + li::before { content: ", "; }
  textarea {
    font-size: 0.9rem;
    padding: 0.4em 0.6em;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg2);
    color: var(--fg);
    width: 100%;
    margin-bottom: 1rem;
  }
  .field { margin-bottom: 1rem; }
</style>
</head>
<body>
<div class="page {{template "pageClass" .}}">
{{template "content" .}}
</div>
</body>
</html>{{end}}

{{/* Default pageClass — pages can override */}}
{{define "pageClass"}}{{end}}