<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ .Translate "Customize Homepage" }}</title>
<link rel="stylesheet" type="text/css" href="/static/style.css" />
<script src="/static/customize.js"></script>
<style>
:root {
--bookmark-border-radius: {{ .Settings.BorderRadius }};
--bookmark-width: {{ .Settings.BookmarkSize }};
--bookmark-height: {{ .Settings.BookmarkSize }};
}
body {
background-color: {{ .Settings.Background }};
color: {{ .Settings.Foreground }};
}
</style>
</head>
<body>
<datalist id="image-sizes">
<option value="cover">cover</option>
<option value="contain">contain</option>
<option value="100%">100%</option>
<option value="0px">0px</option>
</datalist>
<datalist id="bookmark-sizes">
<option value="200px">200px</option>
<option value="10em">10em</option>
<option value="5cm">5cm</option>
<option value="50mm">50mm</option>
<option value="2in">2in</option>
</datalist>
<datalist id="image-paddings">
<option value="10%">10%</option>
<option value="0px">0px</option>
<option value="10px">10px</option>
<option value="1em">1em</option>
</datalist>
<datalist id="search-strings">
<option value="https://www.google.de/search?q=%s">Google</option>
<option value="https://duckduckgo.com/?q=%s">DuckDuckGo</option>
<option value="https://www.startpage.com/do/search?query=%s">Startpage</option>
<option value="https://www.bing.com/search?q=%s">Bing</option>
<option value="https://de.search.yahoo.com/search?p=%s">Yahoo</option>
<option value="https://www.ecosia.org/search?method=index&q=%s">Ecosia</option>
</datalist>
<main>
<a id="button" class="fixed" href="#">
<span class="material-icons">save</span>
</a>
<div id="top-panel">
<h1>{{ .Translate "Settings" }}</h1>
<form>
<label for="search-string">{{ .Translate "Search engine" }}</label>
<input list="search-strings" id="search-string" name="search-string" value="{{ .Settings.Search }}" />
<label for="bg-color">{{ .Translate "Background color" }}</label>
<input type="color" id="bg-color" name="bg-color" value="{{ .Settings.Background }}" />
<label for="fg-color">{{ .Translate "Foreground color" }}</label>
<input type="color" id="fg-color" name="fg-color" value="{{ .Settings.Foreground }}" />
<label for="bookmark-size">{{ .Translate "Bookmark size" }}</label>
<input list="bookmark-sizes" id="bookmark-size" name="bookmark-size" value="{{ .Settings.BookmarkSize }}" />
<label for="border-radius">{{ .Translate "Border radius" }}</label>
<input type="text" id="border-radius" name="border-radius" value="{{ .Settings.BorderRadius }}" />
</form>
</div>
<section id="customize-container">
{{ range .Bookmarks }}
{{ template "customize-bookmark.html" . }}
{{ end }}
<a id="add-bookmark"><span class="material-icons">add</span></a>
</section>
</main>
</body>
</html>