tools.cobbled-paths/templates/writing.html
2024-03-29 10:16:46 +01:00

88 lines
2.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/static/js/FileSaver.js"></script>
<style>
#save-svg{
position: fixed;
top: 0.5em;
right: 0.5em;
}
.svgbob text {
font-family: monospace !important;
font-weight: bold !important;
fill: red !important;
}
.svgbob text{
visibility: hidden;
}
body.check-text .svgbob text{
visibility: visible;
}
.double-font{
height: 100vh;
display: grid;
grid-template-rows: 1fr 1fr;
gap: 1rem;
margin: 0;
}
.double-font div{
background-color: white;
border: 1px solid black;
overflow: auto;
padding: 1rem;
font-family: monospace;
font-size: 1rem;
}
.f-ascii{
font-family: monospace;
font-size: 1rem;
}
</style>
</head>
<body class="double-font">
<div class="f-svg">
{{ svg|safe }}
</div>
<div class="f-ascii"><pre>{{ ascii|safe }}</pre></div>
<button id="save-svg">> SVG</button>
<script>
function get2bodyclass(){
const url = new URL(window.location.href);
let checked = url.searchParams.get("c");
if(checked == "false"){
document.body.classList.remove("check-text");
}
else{
document.body.classList.add("check-text");
}
}
get2bodyclass();
</script>
<script>
let save_button = document.getElementById('save-svg');
save_button.addEventListener('click', function(){
//get svg element.
let svg = document.getElementsByTagName("svg")[0];
//get svg source.
let serializer = new XMLSerializer();
let source = serializer.serializeToString(svg);
let blob = new Blob([source], {type: "text/plain;charset=utf-8"});
saveAs(blob, 'cobbled-paths.svg');
});
</script>
</body>
</html>