Files
elmer/web/templates/index.html
T
2026-06-05 18:03:33 +04:00

115 lines
4.7 KiB
HTML

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>elmAI — Диагностика авто</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<div class="container">
<img src="/static/logo.png" alt="elmAI" style="width:96px;height:96px;border-radius:20px;margin-bottom:10px;">
<h1>elmAI</h1>
<p class="subtitle">Диагностика авто через ELM327 + ИИ</p>
<p class="subtitle" style="font-size:12px;opacity:0.7;">v0.38.0-dev — 5 июня 2026</p>
<div class="card" style="text-align:center;margin-bottom:20px;">
<p style="margin:0 0 10px 0;">📱 Скачай приложение на телефон:</p>
<a href="/static/app-debug.apk" style="color:#ff6b35;font-size:18px;font-weight:bold;text-decoration:none;">
⬇️ Скачать elmAI APK
</a>
<p style="font-size:11px;opacity:0.6;margin:4px 0 0 0;">v0.38.0-dev • нажмите чтобы скачать</p>
</div>
<!-- Кнопка десктоп-диагностики скрыта — только для разработчика с прямым ELM327 -->
<div id="status"></div>
<div id="result" style="display:none;">
<div class="card" id="vin-card">
<h2>📋 VIN</h2>
<code id="vin-value"></code>
</div>
<div class="card" id="dtc-card">
<h2>⚠️ Коды ошибок</h2>
<div id="dtc-list"></div>
</div>
<div class="card" id="params-card">
<h2>📊 Параметры</h2>
<div id="params-list"></div>
</div>
<div class="card diagnosis-card">
<h2>🧠 Диагноз</h2>
<div id="diagnosis-text"></div>
</div>
</div>
</div>
<script>
async function runDiagnose() {
const btn = document.getElementById('btn-diagnose');
const status = document.getElementById('status');
const result = document.getElementById('result');
btn.disabled = true;
btn.textContent = '⏳ Читаю данные с ЭБУ...';
status.innerHTML = '<div class="spinner"></div> Идёт диагностика...';
try {
const resp = await fetch('/api/diagnose', { method: 'POST' });
const data = await resp.json();
if (!resp.ok) {
status.innerHTML = `<div class="error">❌ ${data.error}</div>`;
btn.disabled = false;
btn.textContent = '🔄 Попробовать снова';
return;
}
// VIN
document.getElementById('vin-value').textContent = data.vin;
// DTC
const dtcList = document.getElementById('dtc-list');
if (data.dtc_codes.length === 0) {
dtcList.innerHTML = '<p class="ok">✅ Ошибок нет</p>';
} else {
dtcList.innerHTML = data.dtc_codes
.map(d => `<span class="dtc-badge ${d.status}">${d.code} [${d.status}]</span>`)
.join('');
}
// Parameters
const paramsList = document.getElementById('params-list');
paramsList.innerHTML = data.parameters
.map(p => `<div class="param-row"><span>${p.name}</span><strong>${p.value} ${p.unit}</strong></div>`)
.join('');
// Diagnosis — markdown to html (simple)
document.getElementById('diagnosis-text').innerHTML =
data.diagnosis
.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
.replace(/^### (.+)$/gm, '<h3>$1</h3>')
.replace(/^## (.+)$/gm, '<h2>$1</h2>')
.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
.replace(/\n/g, '<br>');
result.style.display = 'block';
status.innerHTML = '<div class="ok">✅ Диагностика завершена. Сохранено в базу.</div>';
btn.textContent = '🔄 Диагностировать заново';
} catch (err) {
status.innerHTML = `<div class="error">❌ Ошибка: ${err.message}</div>`;
}
btn.disabled = false;
}
</script>
</body>
</html>