homemaker/templates/template.html
2025-06-27 21:53:50 -04:00

149 lines
2.9 KiB
HTML

<head>
<title>{{title}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<style>
body {
background-image: url("bg/{{bg_img}}");
background-size: cover;
background-position: center;
font-family: {{font}};
font-size: {{font_size}}px;
color: {{font_color}};
}
table, th, td {
border: 1px solid black;
}
.settings {
position: absolute;
top: 10px;
right: 20px;
font-size: 14px;
}
option, select {
width: 70px;
font-family: {{font}};
background: grey;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.link-container {
width: 300px;
background: rgba(255, 255, 50, 0.11);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.26);
padding: 20px;
}
.link {
color: {{link_color}};
text-decoration: none;
}
.link:hover {
color: {{link_hover_color}};
text-decoration: none;
}
</style>
<div class='settings'>
<select name="dropdown" id="dropdown">
<option value="">set bg</option>
{{bg_options}}
</select>
</div>
<div class="container">
<div class="link-container">
{{links}}
<br>
<span style="font-size:14px">
{{section_links}}
</span><br>
</div>
</div>
<script>
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
var bg = getCookie("bg")
console.log(bg)
if (bg != "" && bg != 'undefined') {
changeWallpaper(bg)
}
function changeWallpaper(bg) {
document.cookie = "bg=" + bg;
var bg_map = {{bg_map}}
document.body.style.backgroundImage = "url('bg/"+ bg_map[bg] +"')";
}
document.getElementById("dropdown").addEventListener("change", function () {
if (this.value != "") {
changeWallpaper(this.value);
}
});
var key_map = {{key_map}}
function toggleSection(section) {
var sections = {{section_array}}
for (let i = 0; i < sections.length; i++) {
if (section == sections[i]) {
document.getElementById(sections[i]).style.display = 'block';
} else {
document.getElementById(sections[i]).style.display = 'none';
}
}
}
document.onkeypress = function (e) {
var section_map = {{section_map}}
if (e.key in section_map) {
toggleSection(section_map[e.key])
} else {
if (e.key in key_map) {
window.location.href = key_map[e.key];
}
}
};
</script>
</body>