97 lines
4.2 KiB
HTML
97 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>ButtonTask Demo</title>
|
|
<link rel="stylesheet" href="/static/style.css" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>ButtonTask Demo</h1>
|
|
<p class="sub">Голос · обычные нажатия · отмены{% if mock_ai %} · <span class="badge">MOCK AI</span>{% endif %}</p>
|
|
</header>
|
|
|
|
<section class="panel">
|
|
<h2>Активные голосовые вызовы</h2>
|
|
<div id="active">
|
|
{% if active %}
|
|
{% for c in active %}
|
|
<div class="card active">
|
|
<div class="row"><span class="label">Категория</span><strong>{{ c.category }}</strong></div>
|
|
<div class="row"><span class="label">Речь</span><span>{{ c.request_text }}</span></div>
|
|
{% if c.audio_url %}
|
|
<div class="card-voice">
|
|
<div class="voice-bubble" data-src="{{ c.audio_url }}" data-id="{{ c.request_id }}">
|
|
<button type="button" class="voice-play" aria-label="Воспроизвести">
|
|
<svg class="icon-play" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
|
|
<svg class="icon-pause" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 5h4v14H6zm8 0h4v14h-4z"/></svg>
|
|
</button>
|
|
<div class="voice-wave" aria-hidden="true"></div>
|
|
<span class="voice-time">0:00</span>
|
|
<audio preload="metadata" src="{{ c.audio_url }}"></audio>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<span class="meta">{{ c.source_id }} · {{ c.request_id[:8] }}…</span>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p class="muted">Нет активных вызовов</p>
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<h2>Категории</h2>
|
|
<p class="hint">Тишина или фраза вне списка — кнопка покажет предупреждение без ожидания сброса.</p>
|
|
<ul id="cat-list" class="cat-list" aria-label="Список категорий"></ul>
|
|
<div class="cat-add">
|
|
<input type="text" id="cat-new" placeholder="Новая категория" maxlength="80" autocomplete="off" />
|
|
<button type="button" id="cat-add-btn" class="primary">Добавить</button>
|
|
</div>
|
|
<div class="actions">
|
|
<button type="button" id="save-cats" class="primary">Сохранить</button>
|
|
<span id="cats-status" class="muted"></span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<h2>Лента событий</h2>
|
|
<div id="feed">
|
|
{% for e in events %}
|
|
<div class="card kind-{{ e.kind }}">
|
|
<div class="card-main">
|
|
<span class="kind">{{ e.kind }}</span>
|
|
<span class="ts">{{ e.ts }}</span>
|
|
{% if e.category %}<strong class="cat">{{ e.category }}</strong>{% endif %}
|
|
{% if e.request_text %}<span class="speech">«{{ e.request_text }}»</span>{% endif %}
|
|
{% if e.bid %}<span>bid={{ e.bid }} ({{ e.action }})</span>{% endif %}
|
|
{% if e.path %}<span>{{ e.method }} {{ e.path }}{% if e.query %}?{{ e.query }}{% endif %}</span>{% endif %}
|
|
{% if e.source_id %}<span class="meta">{{ e.source_id }}</span>{% endif %}
|
|
</div>
|
|
{% if e.audio_url %}
|
|
<div class="card-voice">
|
|
<div class="voice-bubble" data-src="{{ e.audio_url }}" data-id="{{ e.id }}">
|
|
<button type="button" class="voice-play" aria-label="Воспроизвести">
|
|
<svg class="icon-play" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
|
|
<svg class="icon-pause" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 5h4v14H6zm8 0h4v14h-4z"/></svg>
|
|
</button>
|
|
<div class="voice-wave" aria-hidden="true"></div>
|
|
<span class="voice-time">0:00</span>
|
|
<audio preload="metadata" src="{{ e.audio_url }}"></audio>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
window.__INITIAL_CATEGORIES__ = {{ categories | tojson }};
|
|
</script>
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|