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.
105 lines
3.7 KiB
105 lines
3.7 KiB
{% 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 %}
|
|
|
|
|