openOutpaint/pages/configuration.html

91 lines
2.2 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>openOutpaint 🐠</title>
<!-- CSS Variables -->
<link href="../css/colors.css?v=3f81e80" rel="stylesheet" />
<link href="../css/icons.css?v=a25504c" rel="stylesheet" />
2022-12-30 05:27:08 -06:00
<link href="../css/index.css?v=69d3b9e" rel="stylesheet" />
<link href="../css/layers.css?v=b4fbf61" rel="stylesheet" />
<link href="../css/ui/generic.css?v=79bee9b" rel="stylesheet" />
<link href="../css/ui/history.css?v=0b03861" rel="stylesheet" />
<link href="../css/ui/layers.css?v=4fd95fe" rel="stylesheet" />
<link href="../css/ui/toolbar.css?v=109c78f" rel="stylesheet" />
<!-- Tool Specific CSS -->
<link href="../css/ui/tool/dream.css?v=2d8a8ac" rel="stylesheet" />
<link href="../css/ui/tool/stamp.css?v=6f5ce15" rel="stylesheet" />
<link href="../css/ui/tool/colorbrush.css?v=57c8be5" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<style>
body {
color: var(--c-text);
margin: 0;
padding: 15px;
}
label {
display: flex;
}
input.canvas-size-input {
-webkit-appearance: textfield;
-moz-appearance: textfield;
width: 50px;
}
</style>
</head>
<body>
<label style="display: flex">
Canvas Size:
<input
id="canvas-width"
class="canvas-size-input"
type="number"
step="1" />
x
<input
id="canvas-height"
class="canvas-size-input"
type="number"
step="1" />
</label>
<script>
const canvasWidth = document.getElementById("canvas-width");
const canvasHeight = document.getElementById("canvas-height");
function writeToLocalStorage() {
localStorage.setItem(
"openoutpaint/settings.canvas-width",
canvasWidth.value
);
localStorage.setItem(
"openoutpaint/settings.canvas-height",
canvasHeight.value
);
}
// Loads values from local storage
canvasWidth.value =
localStorage.getItem("openoutpaint/settings.canvas-width") || 2048;
canvasHeight.value =
localStorage.getItem("openoutpaint/settings.canvas-height") || 2048;
writeToLocalStorage();
canvasWidth.onchange = writeToLocalStorage;
canvasHeight.onchange = writeToLocalStorage;
</script>
</body>
</html>