Doriane
5 months ago
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 45 KiB |
|
After Width: | Height: | Size: 380 KiB |
|
After Width: | Height: | Size: 349 KiB |
|
After Width: | Height: | Size: 354 KiB |
|
After Width: | Height: | Size: 276 KiB |
|
After Width: | Height: | Size: 363 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
@ -0,0 +1,105 @@ |
|||||
|
{% extends "base.html" %} |
||||
|
|
||||
|
{% block body_class %}catalogue{% endblock %} |
||||
|
|
||||
|
{% block body %} |
||||
|
|
||||
|
<header class="controls"> |
||||
|
<label>text</label> |
||||
|
<input class="get-input" type="text" value="{{params['text']}}" data-name="t"/> |
||||
|
<button onClick="window.location.reload();">generate</button> |
||||
|
|
||||
|
<hr> |
||||
|
|
||||
|
<label>weight</label> |
||||
|
<input class="get-input" type="range" min="1" max="8" value="{{params['weight']}}" data-name="w"/> |
||||
|
|
||||
|
<label class="fix-label" for="fix-checkbox" |
||||
|
title="custom regex to try to map unrecognized character to ones that are processed by svgbob"> |
||||
|
autofix</label> |
||||
|
<input id="fix-checkbox" type="checkbox" |
||||
|
class="body-class-check" value="check-fix" checked/> |
||||
|
|
||||
|
<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); |
||||
|
}); |
||||
|
} |
||||
|
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="box"> |
||||
|
{% for catalogue, legend in databases.items() %} |
||||
|
<div class="legend {{catalogue}}"><strong>{{catalogue}}</strong> {{legend}}</div> |
||||
|
{% endfor %} |
||||
|
</div> |
||||
|
|
||||
|
{% for type, type_data in output.items()%} |
||||
|
<details> |
||||
|
<summary>{{type}} {{type_data['ascii']}}</summary> |
||||
|
|
||||
|
{% for catalogue in databases.keys() %} |
||||
|
{% set fonts = type_data['fonts']|selectattr('catalogue', 'equalto', catalogue) %} |
||||
|
{% for f in fonts %} |
||||
|
<div class="font {{f['catalogue']}}"> |
||||
|
|
||||
|
<h2>{{f['name']}} ({{f['catalogue']}})</h2> |
||||
|
|
||||
|
<div class="f-ascii"><pre>{{f['ascii']|safe|escape}}</pre></div> |
||||
|
<div class="f-svg">{{f['svg']|safe|escape}}</div> |
||||
|
|
||||
|
{% if f['autofix'] %} |
||||
|
<div class="f-ascii fix"><pre>{{f['ascii_fix_indication']|safe|escape}}</pre></div> |
||||
|
<div class="f-svg fix">{{f['svg_fix']|safe|escape}}</div> |
||||
|
{% endif %} |
||||
|
|
||||
|
<aside class="left"> |
||||
|
<!-- title="display the font metadata, embedded inside of the figlet file" --> |
||||
|
<button>INFO ?</button> |
||||
|
</aside> |
||||
|
|
||||
|
<aside class="right"> |
||||
|
<button>> SVG</button> |
||||
|
<button>> HPGL</button> |
||||
|
</aside> |
||||
|
|
||||
|
</div> |
||||
|
{% endfor %} |
||||
|
<hr> |
||||
|
{% endfor %} |
||||
|
|
||||
|
</details> |
||||
|
{% endfor %} |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
{% endblock %} |
||||
|
|
||||
@ -0,0 +1,37 @@ |
|||||
|
{% extends "base.html" %} |
||||
|
|
||||
|
{% block body_class %}image{% endblock %} |
||||
|
|
||||
|
{% block body %} |
||||
|
|
||||
|
<header class="controls"> |
||||
|
<button id="button-image">import image</button> |
||||
|
|
||||
|
<hr> |
||||
|
|
||||
|
<button id="button-svg">generate</button> |
||||
|
|
||||
|
<input class="get-input" id="text-input" type="text" value=" ()/\|'-._=+" data-name="t" data-frame="svg-iframe"/> |
||||
|
|
||||
|
<label>weight</label> |
||||
|
<input class="get-input" type="range" min="1" max="8" value="{{params['weight']}}" data-name="w" data-frame="svg-iframe"/> |
||||
|
|
||||
|
<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="get-input" |
||||
|
class="body-class-check" value="check-text" data-name="t" data-frame="svg-iframe" checked/> |
||||
|
|
||||
|
</header> |
||||
|
|
||||
|
<div class="font"> |
||||
|
<iframe class="f-ascii" id="pad-iframe" src="{{params['pad-full']}}"> |
||||
|
</iframe> |
||||
|
<div class="f-svg"> |
||||
|
<iframe id="svg-iframe" src="/drawing/{{params['pad']}}"> |
||||
|
</iframe> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{% endblock %} |
||||
|
|
||||