36 lines
1.6 KiB
HTML
36 lines
1.6 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}VOX — TtsToy{% endblock %}
|
|
{% block content %}
|
|
<div style="margin-bottom:1.25rem;">
|
|
<h1 style="font-size:1rem;font-weight:300;color:#e0ecff;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 16px rgba(80,150,255,0.2);">VOX Announcer</h1>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>About</h2>
|
|
<div style="font-size:0.85rem;color:#b0c8e0;margin-bottom:0.5rem;">Black Mesa / Half-Life VOX announcer. Only words in the dictionary are spoken — unknown words are silently skipped.</div>
|
|
<div class="muted">Current pack: <code>{{ current_pack }}</code> | Available: {{ packs | join(', ') }}</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Available Words ({{ words | length }})</h2>
|
|
<div class="form-group" style="margin-bottom:0.9rem;">
|
|
<input type="text" id="word-filter" placeholder="Filter words..." oninput="filterWords()">
|
|
</div>
|
|
<div id="word-grid" style="display:flex;flex-wrap:wrap;gap:0.35rem;max-height:380px;overflow-y:auto;padding-right:4px;">
|
|
{% for w in words %}
|
|
<span style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);border-radius:3px;padding:0.15rem 0.45rem;font-size:0.78rem;color:rgba(140,200,255,0.8);" data-word="{{ w }}">{{ w }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
{% block scripts %}
|
|
<script>
|
|
function filterWords() {
|
|
const q = document.getElementById('word-filter').value.toLowerCase();
|
|
document.querySelectorAll('#word-grid [data-word]').forEach(el => {
|
|
el.style.display = el.dataset.word.includes(q) ? '' : 'none';
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %}
|