96 lines
2.6 KiB
HTML
96 lines
2.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
|
||
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
||
|
|
<link rel="stylesheet"
|
||
|
|
href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.0.0-alpha/dist/css/materialize.min.css" />
|
||
|
|
<script
|
||
|
|
src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.0.0-alpha/dist/js/materialize.min.js"></script>
|
||
|
|
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
|
||
|
|
<script>
|
||
|
|
const theme = localStorage.getItem('theme');
|
||
|
|
if (theme) document.documentElement.setAttribute('theme', theme);
|
||
|
|
|
||
|
|
$(document).ready(function () {
|
||
|
|
M.AutoInit();
|
||
|
|
|
||
|
|
const currentTheme = localStorage.getItem('theme');
|
||
|
|
const switchElem = document.querySelector('#theme-switch');
|
||
|
|
|
||
|
|
const setTheme = (isDark) => {
|
||
|
|
if (isDark) {
|
||
|
|
switchElem.classList.add('is-dark');
|
||
|
|
switchElem.querySelector('i').innerText = 'light_mode';
|
||
|
|
switchElem.title = 'Switch to light mode';
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
switchElem.classList.remove('is-dark');
|
||
|
|
switchElem.querySelector('i').innerText = 'dark_mode';
|
||
|
|
switchElem.title = 'Switch to dark mode';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (switchElem) {
|
||
|
|
// Load
|
||
|
|
if (currentTheme) setTheme(true);
|
||
|
|
// Change
|
||
|
|
switchElem.addEventListener('click', e => {
|
||
|
|
e.preventDefault();
|
||
|
|
if (!switchElem.classList.contains('is-dark')) {
|
||
|
|
// Dark Theme
|
||
|
|
document.documentElement.setAttribute('theme', 'dark');
|
||
|
|
localStorage.setItem('theme', 'dark');
|
||
|
|
setTheme(true);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// Light Theme
|
||
|
|
document.documentElement.removeAttribute('theme');
|
||
|
|
localStorage.removeItem('theme');
|
||
|
|
setTheme(false);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
nav.top-nav {
|
||
|
|
height: 110px;
|
||
|
|
box-shadow: none;
|
||
|
|
border-bottom: 1px solid var(--separator-color);
|
||
|
|
background-color: rgba(0, 0, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
header,
|
||
|
|
main,
|
||
|
|
footer {
|
||
|
|
padding-left: 300px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (max-width : 992px) {
|
||
|
|
|
||
|
|
header,
|
||
|
|
main,
|
||
|
|
footer {
|
||
|
|
padding-left: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="main"></div>
|
||
|
|
|
||
|
|
<script type="module">
|
||
|
|
import init from "/./static/dioxus/kttd-ui.js";
|
||
|
|
init("/./static/dioxus/kttd-ui_bg.wasm").then(wasm => {
|
||
|
|
if (wasm.__wbindgen_start == undefined) {
|
||
|
|
wasm.main();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|