1package main
  2
  3// html templates are here instead of an .html file to avoid depending on external files
  4// in this way, everything is inside the binary
  5
  6const dirTemplate = `
  7<!DOCTYPE html>
  8<html>
  9<title>{{.Title}}</title>
 10<style>
 11body {
 12    font-family: Arial, Helvetica, sans-serif;
 13}
 14.dark {
 15    background:#000000;
 16    color:#cccccc;
 17}
 18</style>
 19<body class="dark">
 20    <input onclick="switchThemeClick()" type="checkbox" id="themeSwitcher" style="float:right;">
 21
 22{{.Content}}
 23
 24<script>
 25  let theme = localStorage.getItem("theme");
 26  if (theme === "light") {
 27    document.getElementById("themeSwitcher").checked = false;
 28    document.body.className = theme;
 29  }
 30
 31  function switchThemeClick() {
 32    theme = localStorage.getItem("theme");
 33    if (theme === "light") {
 34      document.getElementById("themeSwitcher").checked = true;
 35      theme = "dark";
 36      localStorage.setItem("theme", theme);
 37    } else {
 38      document.getElementById("themeSwitcher").checked = false;
 39      theme = "light";
 40      localStorage.setItem("theme", theme);
 41    }
 42    document.body.className = theme;
 43  }
 44</script>
 45
 46</body>
 47</html>
 48`
 49
 50const htmlTemplate = `
 51<!DOCTYPE html>
 52<html>
 53<title>{{.Title}}</title>
 54<style>
 55body {
 56    font-family: Arial, Helvetica, sans-serif;
 57}
 58.dark {
 59    background:#000000;
 60    color:#cccccc;
 61}
 62pre, code{
 63    padding-left: 3px;
 64    padding-right: 3px;
 65    border-radius: 3px;
 66    background: #cccccc;
 67}
 68.dark pre, .dark code{
 69    padding-left: 3px;
 70    padding-right: 3px;
 71    border-radius: 3px;
 72    background: #333333;
 73}
 74pre{
 75    padding: 5px;
 76}
 77pre>code {
 78    color: #000000;
 79}
 80.dark pre>code {
 81    color: #c0fffa;
 82}
 83h1:after{
 84    content:' ';
 85    display:block;
 86    border:1px solid #cccccc;
 87}
 88h2:after{
 89    content:' ';
 90    display:block;
 91    border:0.7px solid #cccccc;
 92}
 93.dark th{
 94    padding: 3px;
 95    border: 1px solid #234b4f;
 96    background-color: #143134;
 97}
 98td{
 99    padding: 3px;
100    border: 1px solid #234b4f;
101}
102.container {
103  width: 100%;
104  padding-right: 1rem;
105  padding-left: 1rem;
106  margin-right: auto;
107  margin-left: auto;
108}
109
110@media (min-width: 576px) {
111  .container {
112    max-width: 540px;
113  }
114}
115
116@media (min-width: 768px) {
117  .container {
118    max-width: 720px;
119  }
120}
121
122@media (min-width: 992px) {
123  .container {
124    max-width: 900px;
125  }
126}
127
128@media (min-width: 1200px) {
129  .container {
130    max-width: 900px;
131  }
132}
133
134@media (min-width: 1400px) {
135  .container {
136    max-width: 900px;
137  }
138}
139</style>
140<body class="dark">
141<input onclick="switchThemeClick()" type="checkbox" id="themeSwitcher" style="float:right;">
142<a href="/" title="go to root">root</a>
143<div id="content" class="container">
144{{.Content}}
145</div>
146
147<script>
148(function() {
149	var conn = new WebSocket("ws://127.0.0.1:8080/ws/{{.Title}}");
150	conn.onclose = function(evt) {
151	    console.log('Connection closed');
152	    alert('Connection closed');
153	}
154	conn.onmessage = function(evt) {
155	    console.log('file updated');
156	    // location.reload();
157	    // console.log("evt", evt);
158	    document.getElementById("content").innerHTML = evt.data;
159	}
160})();
161
162
163  let theme = localStorage.getItem("theme");
164  if (theme === "light") {
165    document.getElementById("themeSwitcher").checked = false;
166    document.body.className = theme;
167  }
168
169  function switchThemeClick() {
170    theme = localStorage.getItem("theme");
171    if (theme === "light") {
172      document.getElementById("themeSwitcher").checked = true;
173      theme = "dark";
174      localStorage.setItem("theme", theme);
175    } else {
176      document.getElementById("themeSwitcher").checked = false;
177      theme = "light";
178      localStorage.setItem("theme", theme);
179    }
180    document.body.className = theme;
181  }
182
183</script>
184</body>
185</html>
186`
187
188const errTemplate = `
189<!DOCTYPE html>
190<html>
191<title>{{.Title}}</title>
192<style>
193body {
194    font-family: Arial, Helvetica, sans-serif;
195    background:#000000;
196    color:#cccccc;
197}
198</style>
199<body>
200    <a href="/" title="go to root">root</a>
201
202<h3>File doesn't exist</h3>
203<br><br>
204<a href="/">Back to dir menu</a>
205
206</body>
207</html>
208`