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 %} |
|||
|
|||