80 lines
4 KiB
Twig
80 lines
4 KiB
Twig
{% extends 'tools/ascii/master.twig' %}
|
|
|
|
{% set header_title = 'ascii table' %}
|
|
{% set master_breadcrumbs = [{ url: '/tools', text: 'tools' }, { url: '/tools/ascii', text: 'ascii' }] %}
|
|
|
|
{% block column_left %}
|
|
<div class="sidelist">
|
|
<div class="sidelist-title">About</div>
|
|
<div class="sidelist-body">
|
|
<p>This page provides a filterable ASCII table allowing for quick lookup, in case you need a Delta Line Escape character for some reason.</p>
|
|
<p>I've heard the Linux manual pages also have an equivalent but sometimes you don't readily have access to a Linux terminal ok...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sidelist">
|
|
<div class="sidelist-title">Filters</div>
|
|
<div class="sidelist-body">
|
|
<a class="sidelist-item sidelist-item-link js-ascii-quick-filter" href="#" data-filter="">
|
|
<div class="sidelist-item-icon">A</div>
|
|
<div class="sidelist-item-label">All characters</div>
|
|
</a>
|
|
<a class="sidelist-item sidelist-item-link js-ascii-quick-filter" href="#control" data-filter="control">
|
|
<div class="sidelist-item-icon">C</div>
|
|
<div class="sidelist-item-label">Control characters</div>
|
|
</a>
|
|
<a class="sidelist-item sidelist-item-link js-ascii-quick-filter" href="#printable" data-filter="printable">
|
|
<div class="sidelist-item-icon">P</div>
|
|
<div class="sidelist-item-label">Printable characters</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block column_centre %}
|
|
<div class="ascii-search">
|
|
<div class="ascii-search-box">
|
|
<input type="search" class="js-ascii-search" placeholder="Filter..." autocomplete="off">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ascii-hint">
|
|
<div class="ascii-hint-body">
|
|
Type <em><code>printable</code></em> for all printable characters, or <em><code>control</code></em> for all control characters.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ascii-chars">
|
|
{% for info in chars %}
|
|
{% set print = info.string %}
|
|
|
|
<div class="ascii-char {{ info.isPrintable ? 'ascii-char-printable' : 'ascii-char-control' }} js-ascii-char" data-key-code="{{ info.decimal }}" data-key-desc="{{ info.name }}" data-key-print="{{ info.string }}" data-copy="{{ info.string }}" {% if info.hasHtml %}data-key-html="{{ info.html }}"{% endif %}>
|
|
<div class="ascii-char-main">
|
|
<div class="ascii-char-print">{{ info.string }}</div>
|
|
<div class="ascii-char-desc">{{ info.name }}</div>
|
|
</div>
|
|
<div class="ascii-char-misc">
|
|
<div class="ascii-char-misc-item" data-copy="{{ info.decimal }}">
|
|
<div class="ascii-char-misc-item-head">Dec</div>
|
|
<div class="ascii-char-misc-item-value">{{ info.decimal }}</div>
|
|
</div>
|
|
<div class="ascii-char-misc-item" data-copy="{{ info.octal }}">
|
|
<div class="ascii-char-misc-item-head">Oct</div>
|
|
<div class="ascii-char-misc-item-value">{{ info.octal }}</div>
|
|
</div>
|
|
<div class="ascii-char-misc-item" data-copy="{{ info.hex }}">
|
|
<div class="ascii-char-misc-item-head">Hex</div>
|
|
<div class="ascii-char-misc-item-value">{{ info.hex }}</div>
|
|
</div>
|
|
{% if info.hasHtml %}
|
|
<div class="ascii-char-misc-item" data-copy="&{{ info.html }};">
|
|
<div class="ascii-char-misc-item-head">HTML</div>
|
|
<div class="ascii-char-misc-item-value">&{{ info.html }};</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<script type="application/json" class="js-ascii-table">{{ chars|json_encode|raw }}</script>
|
|
{% endblock %}
|