]> code.octet-stream.net Git - broadcaster/blob - server/templates/header.html
More UI improvements
[broadcaster] / server / templates / header.html
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.0">
6 <title>Broadcaster</title>
7 <style type="text/css">
8 table.radio-status, td.outer {
9 border: 1px solid;
10 }
11 table.listing td, table.listing th {
12 padding: 0.35em;
13 }
14 td.enabled {
15 text-align: center;
16 }
17 td.token {
18 font-family: monospace;
19 font-size: 80%;
20 }
21 table.inner {
22 border-collapse: collapse;
23 }
24 td.channel-state {
25 text-align: center;
26 width: 5em;
27 height: 5em;
28 }
29 td.clear {
30 background-color: #eeeeee;
31 }
32 td.cos {
33 background-color: #aaeeaa;
34 }
35 td.ptt {
36 background-color: #eeaaaa;
37 }
38 th {
39 text-align: left;
40 }
41 input.seconds {
42 width: 3em;
43 }
44 .time-table {
45 font-size: 90%;
46 }
47 .playlist-field {
48 text-align: right;
49 padding-right: 1em;
50 width: 5em;
51 }
52 .playlist-table {
53 font-size: 90%;
54 }
55 .stop {
56 text-align: center;
57 }
58 .head {
59 text-align: center;
60 }
61 body {
62 background-color: #447744;
63 font-family: "sans-serif";
64 }
65 main {
66 background-color: #dddddd;
67 max-width: 80em;
68 margin-left: auto;
69 margin-right: auto;
70 display: flex;
71 flex-wrap: wrap;
72 flex-direction: row;
73 border: 2px solid black;
74 }
75 .menu {
76 min-width: 12em;
77 display: flex;
78 flex-grow: 1;
79 flex-direction: column;
80 text-align: center;
81 }
82 .menu-item {
83 height: 2em;
84 text-align: center;
85 line-height: 2em;
86 background-color: #aaaaaa;
87 border: black solid;
88 border-width: 1px 1px 0px 0px;
89 }
90 .menu-item a {
91 text-decoration: none;
92 color: black;
93 }
94 .menu-item.logout {
95 border-width: 1px 1px 1px 0px;
96 }
97 .menu-item:first-of-type {
98 border-width: 0px 1px 0px 0px;
99 }
100 .menu-item.selected {
101 background-color: #aaccaa;
102 }
103 .logged-in {
104 padding-top: 2em;
105 padding-bottom: 2em;
106 text-align: center;
107 border: black solid;
108 border-width: 0px 1px 0px 0px;
109 }
110 .menu-tail {
111 flex-grow: 1;
112 height: 2em;
113 line-height: 2em;
114 border: black solid;
115 border-width: 0px 1px 0px 0px;
116 }
117 .content {
118 flex-grow: 30;
119 padding: 5em;
120 padding-top: 1em;
121 overflow-wrap: break-word;
122 max-width: 50em;
123 }
124 </style>
125 </head>
126 <body>
127 <main>
128 {{if .SelectedMenu}}
129 <div class="menu">
130 <div class="menu-item {{if eq .SelectedMenu "status"}}selected{{end}}"><a href="/">Status</a></div>
131 <div class="menu-item {{if eq .SelectedMenu "files"}}selected{{end}}"><a href="/files/">Files</a></div>
132 <div class="menu-item {{if eq .SelectedMenu "playlists"}}selected{{end}}"><a href="/playlists/">Playlists</a></div>
133 <div class="menu-item {{if eq .SelectedMenu "radios"}}selected{{end}}"><a href="/radios/">Radios</a></div>
134 {{if .User.IsAdmin}}
135 <div class="menu-item {{if eq .SelectedMenu "users"}}selected{{end}}"><a href="/users/">Users</a></div>
136 {{end}}
137 <div class="menu-item {{if eq .SelectedMenu "change-password"}}selected{{end}}"><a href="/change-password">Change Password</a></div>
138 <div class="menu-item logout"><a href="/logout">Log Out</a></div>
139 {{if .User.Username}}
140 <div class="logged-in">Logged in as:<br><i>{{.User.Username}}</i></div>
141 {{end}}
142 <div class="menu-tail"><small><i>broadcaster-server {{.Version}}</i></small></div>
143 </div>
144 {{end}}
145 <div class="content">