You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
2.0 KiB
68 lines
2.0 KiB
9 months ago
|
{% extends "base.html" %}
|
||
|
|
|
||
|
|
{% block body_class %}draw{% endblock %}
|
||
|
|
|
||
|
|
{% block body %}
|
||
|
|
|
||
|
|
<header class="controls">
|
||
|
|
<label>etherpad</label>
|
||
|
|
<input class="get-input" type="text" value="{{params['pad']}}" data-name="p"/>
|
||
|
|
<button>go</button>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<button onClick="window.location.reload();">generate</button>
|
||
|
|
|
||
|
|
<label>weight</label>
|
||
|
|
<input class="get-input" type="range" min="1" max="8" value="{{params['weight']}}" data-name="w"/>
|
||
|
|
|
||
|
|
<label class="text-label" for="text-checkbox"
|
||
|
|
title="display the remaining text in the svg output in red">
|
||
|
|
output text</label>
|
||
|
|
<input id="text-checkbox" type="checkbox"
|
||
|
|
class="body-class-check" value="check-text" checked/>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
let inputs = document.getElementsByClassName('get-input');
|
||
|
|
for(let input of inputs){
|
||
|
|
input.addEventListener('input', function(){
|
||
|
|
const url = new URL(window.location.href);
|
||
|
|
url.searchParams.set(input.dataset.name, input.value);
|
||
|
|
window.history.replaceState(null, null, url);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function toggle_class(classname, val){
|
||
|
|
if(val){
|
||
|
|
document.body.classList.add(classname);
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
document.body.classList.remove(classname);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
let body_class_checkboxes = document.getElementsByClassName("body-class-check");
|
||
|
|
for(let checkbox of body_class_checkboxes){
|
||
|
|
let classname = checkbox.value;
|
||
|
|
checkbox.addEventListener('input', function(){
|
||
|
|
toggle_class(classname, checkbox.checked);
|
||
|
|
});
|
||
|
|
toggle_class(classname, checkbox.checked);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="font">
|
||
|
|
<iframe class="f-ascii" src="{{params['pad-full']}}">
|
||
|
|
</iframe>
|
||
|
|
<div class="f-svg"></div>
|
||
|
|
<aside class="right">
|
||
|
|
<button>> SVG</button>
|
||
|
|
<button>> HPGL</button>
|
||
|
|
</aside>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{% endblock %}
|
||
|
|
|