52 lines
1.4 KiB
HTML
52 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="theme-color" content="#2e3440">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<title>{title} - TextProxy</title>
|
|
<link href="/site.css" rel="stylesheet">
|
|
<link rel="icon" type="image/png" href="/favicon.png" size="64x64">
|
|
<link rel="icon" type="image/png" href="/favicon@2x.png" size="128x128">
|
|
<link rel="icon" type="image/png" href="/favicon@3x.png" size="192x192">
|
|
</head>
|
|
<body>
|
|
<h1>{title}</h1>
|
|
<div class="theme">
|
|
<select aria-label="Theme" onchange="setTheme(event)">
|
|
<option value="darker">Light-on-Black</option>
|
|
<option value="dark">Light-on-Dark</option>
|
|
<option value="light">Dark-on-White</option>
|
|
</select>
|
|
</div>
|
|
<div class="main">
|
|
<div class="text">
|
|
{body}
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
function setTheme(e) {{
|
|
const theme = e.currentTarget.value;
|
|
|
|
document.body.className = theme;
|
|
|
|
let color;
|
|
switch (theme) {{
|
|
case "dark":
|
|
color = "#2e3440";
|
|
break;
|
|
case "light":
|
|
color = "#ffffff";
|
|
break;
|
|
case "darker":
|
|
default:
|
|
color = "#000000";
|
|
break;
|
|
}}
|
|
|
|
document.getElementsByName("theme-color")[0].content = color;
|
|
}}
|
|
</script>
|
|
</body>
|
|
</html>
|