{% extends "base.html" %}
{% block title %}DECTalk — 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);">DECTalk</h1>
</div>

<div class="card">
  <h2>About</h2>
  <div style="font-size:0.85rem;color:#b0c8e0;margin-bottom:0.5rem;">Classic 1980s robotic speech synthesizer. Voices are controlled inline using commands embedded in your text.</div>
  <div class="muted">Server URL: <code>{{ gcfg.get('dectalk_api_url', 'http://127.0.0.1:3001') }}</code></div>
</div>

<div class="card">
  <h2>Voice Commands</h2>
  <div class="muted" style="margin-bottom:0.9rem;">Embed these in your TTS text to switch voices mid-sentence.</div>
  <table>
    <thead><tr><th>Command</th><th>Voice</th><th>Description</th></tr></thead>
    <tbody>
      {% for cmd, name, desc in [
        ("[:np]","Paul","Perfect Paul — default male"),
        ("[:nb]","Betty","Beautiful Betty — female"),
        ("[:nh]","Harry","Huge Harry — deep male"),
        ("[:nf]","Frank","Frail Frank — male"),
        ("[:nd]","Dennis","Doctor Dennis — male"),
        ("[:nk]","Kit","Kit the Kid — child"),
        ("[:nu]","Ursula","Uppity Ursula — female"),
        ("[:nr]","Rita","Rough Rita — female"),
        ("[:nw]","Wendy","Whispering Wendy — female"),
      ] %}
      <tr>
        <td><code>{{ cmd }}</code></td>
        <td style="color:#c8daf0;font-weight:300;">{{ name }}</td>
        <td>{{ desc }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div class="card">
  <h2>Example</h2>
  <code style="display:block;padding:0.75rem;font-size:0.85rem;line-height:1.5;">
    [:np]Hello, I am Paul. [:nb]And I am Betty. [:nh]I am Harry, the big one.
  </code>
  <div class="muted" style="margin-top:0.75rem;">
    See the <a href="https://theflameofhope.co/DECTALK.pdf" target="_blank">DECTalk manual</a> for advanced rate, pitch, and phoneme control.
  </div>
</div>
{% endblock %}