arche / internal/ui/templates/base.html

commit 154431fd
  1<!DOCTYPE html>
  2<html lang="en">
  3    <head>
  4        <meta charset="utf-8" />
  5        <meta name="viewport" content="width=device-width, initial-scale=1" />
  6        <title>{{ block "title" . }}Arche{{ end }}</title>
  7        <style>
  8      * {
  9        box-sizing: border-box;
 10        margin: 0;
 11        padding: 0;
 12      }
 13      body {
 14        font-family: ui-monospace, monospace;
 15        font-size: 14px;
 16        background: #0d0d0d;
 17        color: #d4d4d4;
 18        min-height: 100vh;
 19      }
 20      a {
 21        color: #7cb8ff;
 22        text-decoration: none;
 23      }
 24      a:hover {
 25        text-decoration: underline;
 26      }
 27      nav {
 28        background: #1a1a1a;
 29        border-bottom: 1px solid #333;
 30        padding: 8px 16px;
 31        display: flex;
 32        gap: 16px;
 33        align-items: center;
 34      }
 35      nav .brand {
 36        color: #e8c56d;
 37        font-weight: bold;
 38        font-size: 15px;
 39        margin-right: 8px;
 40      }
 41      nav a {
 42        color: #aaa;
 43        font-size: 13px;
 44      }
 45      nav a:hover {
 46        color: #d4d4d4;
 47      }
 48      main {
 49        padding: 20px 24px;
 50        max-width: 1100px;
 51      }
 52      h2 {
 53        font-size: 15px;
 54        color: #e8c56d;
 55        margin-bottom: 12px;
 56        font-weight: normal;
 57        border-bottom: 1px solid #2a2a2a;
 58        padding-bottom: 6px;
 59      }
 60      table {
 61        border-collapse: collapse;
 62        width: 100%;
 63      }
 64      th {
 65        text-align: left;
 66        padding: 6px 10px;
 67        border-bottom: 1px solid #2a2a2a;
 68        color: #888;
 69        font-weight: normal;
 70        font-size: 12px;
 71      }
 72      td {
 73        padding: 5px 10px;
 74        border-bottom: 1px solid #1e1e1e;
 75        vertical-align: top;
 76      }
 77      tr:hover td {
 78        background: #141414;
 79      }
 80      .hash {
 81        color: #888;
 82        font-size: 12px;
 83      }
 84      .phase-draft {
 85        color: #7cb8ff;
 86      }
 87      .phase-public {
 88        color: #7ae07a;
 89      }
 90      .phase-secret {
 91        color: #e07a7a;
 92      }
 93      .added {
 94        color: #7ae07a;
 95      }
 96      .deleted {
 97        color: #e07a7a;
 98      }
 99      .modified {
100        color: #e8c56d;
101      }
102      pre {
103        background: #111;
104        border: 1px solid #252525;
105        padding: 12px;
106        overflow-x: auto;
107        line-height: 1.5;
108        font-size: 13px;
109      }
110      .diff-add {
111        color: #7ae07a;
112      }
113      .diff-del {
114        color: #e07a7a;
115      }
116      .diff-hdr {
117        color: #888;
118      }
119      .badge {
120        display: inline-block;
121        padding: 1px 6px;
122        border-radius: 3px;
123        font-size: 11px;
124        background: #222;
125        color: #aaa;
126      }
127      .info-row {
128        display: flex;
129        flex-wrap: wrap;
130        gap: 16px;
131        margin-bottom: 14px;
132        font-size: 13px;
133        color: #888;
134      }
135      .info-row span {
136        color: #d4d4d4;
137      }
138      .tree-entry {
139        padding: 4px 10px;
140        border-bottom: 1px solid #1a1a1a;
141        display: flex;
142        gap: 10px;
143      }
144      .tree-entry:hover {
145        background: #141414;
146      }
147      .tree-dir {
148        color: #7cb8ff;
149      }
150      .tree-dir .folder-icon-open { display: none; }
151      .tree-dir:hover .folder-icon { display: none; }
152      .tree-dir:hover .folder-icon-open { display: inline; }
153      .tree-file {
154        color: #d4d4d4;
155      }
156      .status-A {
157        color: #7ae07a;
158      }
159      .status-M {
160        color: #e8c56d;
161      }
162      .status-D {
163        color: #e07a7a;
164      }
165      .empty {
166        color: #555;
167        padding: 20px 0;
168        font-style: italic;
169      }
170      .status-open {
171        color: #7ae07a;
172      }
173      .status-closed {
174        color: #888;
175      }
176      .status-wontfix {
177        color: #e07a7a;
178      }
179      .issue-body {
180        white-space: pre-wrap;
181        background: #111;
182        border: 1px solid #252525;
183        padding: 12px;
184        margin-bottom: 16px;
185        font-size: 13px;
186        line-height: 1.6;
187      }
188      .comment-block {
189        border-left: 3px solid #333;
190        padding: 8px 12px;
191        margin-bottom: 10px;
192      }
193      .comment-meta {
194        font-size: 11px;
195        color: #666;
196        margin-bottom: 4px;
197      }
198      .conflict-box {
199        background: #1a0000;
200        border: 1px solid #e07a7a;
201        padding: 12px;
202        margin-bottom: 16px;
203      }
204      .wiki-content {
205        white-space: pre-wrap;
206        line-height: 1.7;
207        font-size: 13px;
208      }
209        </style>
210    </head>
211    <body>
212        <nav>
213            <span class="brand">
214                <svg width="16"
215                     height="16"
216                     viewBox="0 0 128 128"
217                     xmlns="http://www.w3.org/2000/svg"
218                     style="vertical-align: middle;
219                            margin-right: 5px">
220                    <circle cx="64" cy="64" r="48" stroke="#e8c56d" stroke-width="8" fill="none" />
221                    <circle cx="64" cy="64" r="10" fill="#e8c56d" />
222                </svg>
223                arche
224            </span>
225            <a href="/log">log</a>
226            <a href="/tree">tree</a>
227            <a href="/status">status</a>
228            <a href="/bookmarks">bookmarks</a>
229            <a href="/issues">issues</a>
230            <a href="/wiki">wiki</a>
231        </nav>
232        <main>
233            {{ block "content" . }}{{ end }}
234        </main>
235    </body>
236</html>