diff options
author | Laria Carolin Chabowski <laria@laria.me> | 2021-10-15 17:21:35 +0200 |
---|---|---|
committer | Laria Carolin Chabowski <laria@laria.me> | 2021-10-15 17:21:35 +0200 |
commit | c1d54197d0bd3962b095dea1553a12ada4ad17dd (patch) | |
tree | 3545e00e94677a0b44d04e068d28c33a59810017 /templates/template.html | |
parent | 8e496d82f6790f7cb8d5c9cb79ef537ccab600e6 (diff) | |
download | startpage-c1d54197d0bd3962b095dea1553a12ada4ad17dd.tar.gz startpage-c1d54197d0bd3962b095dea1553a12ada4ad17dd.tar.bz2 startpage-c1d54197d0bd3962b095dea1553a12ada4ad17dd.zip |
Move template into own directory
Diffstat (limited to 'templates/template.html')
-rw-r--r-- | templates/template.html | 152 |
1 files changed, 152 insertions, 0 deletions
diff --git a/templates/template.html b/templates/template.html new file mode 100644 index 0000000..4b20536 --- /dev/null +++ b/templates/template.html @@ -0,0 +1,152 @@ +<!DOCTYPE html> +<html> + <head> + <title>Startpage</title> + <style type="text/css"> + body { + background-color: grey; + background-image: none; + background-repeat: no-repeat; + background-position: center center; + background-attachment: fixed; + + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + transition: background-color 0.5s, background-image 0.5s; + } + a { + color: #eee; + text-decoration: none; + } + a:hover { + color: white; + text-decoration: underline; + } + * { + font-family: "DejaVu Sans Light", sans-serif; + color: white; + } + footer { + font-size: 8pt; + } + #yr_no_credit { + position: fixed; + display: inline-block; + bottom: 2mm; + left: 10mm; + background: black; + } + #imageinfo { + position: fixed; + bottom: 2mm; + right: 10mm; + background: black; + } + #weather { + position: fixed; + top: 10mm; + left: 10mm; + } + #temp { + position: absolute; + top: 30px; + left: 60px; + font-size:70px; + text-shadow: black 2px 2px; + color: white; + } + #links { + position: absolute; + top: 40%; + left: 20%; + columns: 2; + -moz-columns: 2; + padding: 5mm; + background: rgba(0,0,0,0.6); + } + #links ul { + padding: 0px; + margin: 0px; + list-style: none; + } + #links ul li { + padding: 0px; + margin: 0px; + font-size: 10pt; + } + </style> + </head> + <body {{ if .BgImage }} style="background-color: black; background-image: url(/bgimg);"{{ end }}> + {{ if .Weather }} + <div id="weather"> + <a href="{{ .Weather.URL }}"><img src="{{ .Weather.Icon }}" alt="" /></a> + <span id="temp">{{ .Weather.Temp.Value }}°</span> + </div> + {{ end }} + {{ if .Links }} + <div id="links"> + <ul> + {{ range .Links }} + <li><a href="{{ .URL }}">{{ .Title }}</a></li> + {{ end }} + </ul> + </div> + {{ end }} + + + <footer> + {{ if .Weather }} + <div id="yr_no_credit">Weather forecast from Yr, delivered by the Norwegian Meteorological Institute and NRK</div> + {{ end }} + + <span id="imageinfo"></span> + </footer> + + <script type="text/javascript"> + var CanSaveBg = {{ .CanSaveBg }}; + + function link(href, text) { + var a = document.createElement("a"); + a.href = href; + a.innerText = text; + return a; + } + + function updateImageInfo(image) { + var imageinfo = document.getElementById("imageinfo"); + imageinfo.innerHTML = ""; + imageinfo.appendChild(link("http://reddit.com" + image.Permalink, image.Title)); + if (CanSaveBg) { + imageinfo.appendChild(document.createTextNode(" | ")); + if (image.Saved) { + imageinfo.appendChild(document.createTextNode("saved")); + } else { + imageinfo.appendChild(link("/savebg", "save")); + } + } + } + + {{ if .BgImage }} + updateImageInfo({{ .BgImage }}); + {{ end }} + + var xhr = new XMLHttpRequest(); + xhr.addEventListener("load", function () { + if (!xhr.response.Updated) { + return; + } + + var bodyStyle = document.body.style; + bodyStyle.setProperty("background-image", "url(/bgimg?rand=" + Math.random() + ")"); + bodyStyle.setProperty("background-color", "black"); + + updateImageInfo(xhr.response.Image); + }); + + xhr.open("GET", "/update-bgimg"); + xhr.responseType = "json"; + xhr.send(); + </script> + </body> +</html> |