85 lines
3.6 KiB
HTML
85 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Поиск кода ОКТРУ</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
|
||
.card { background: #1e293b; border-radius: 16px; padding: 40px; width: 100%; max-width: 520px; box-shadow: 0 25px 50px rgba(0,0,0,.4); }
|
||
h1 { font-size: 22px; margin-bottom: 8px; color: #f8fafc; }
|
||
.subtitle { font-size: 14px; color: #94a3b8; margin-bottom: 28px; }
|
||
label { display: block; font-size: 14px; color: #cbd5e1; margin-bottom: 8px; }
|
||
input[type="text"] { width: 100%; padding: 14px 16px; border-radius: 10px; border: 2px solid #334155; background: #0f172a; color: #f1f5f9; font-size: 15px; outline: none; transition: border-color .2s; }
|
||
input[type="text"]:focus { border-color: #3b82f6; }
|
||
button { width: 100%; padding: 14px; border: none; border-radius: 10px; background: #2563eb; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 16px; transition: background .2s; }
|
||
button:hover { background: #1d4ed8; }
|
||
button:disabled { background: #475569; cursor: not-allowed; }
|
||
.result { margin-top: 20px; padding: 18px; border-radius: 10px; display: none; line-height: 1.6; font-size: 14px; white-space: pre-wrap; }
|
||
.result.ok { display: block; background: #064e3b; border: 1px solid #059669; color: #d1fae5; }
|
||
.result.err { display: block; background: #450a0a; border: 1px solid #dc2626; color: #fecaca; }
|
||
.loading { text-align: center; margin-top: 16px; color: #94a3b8; font-size: 13px; display: none; }
|
||
.loading.show { display: block; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="card">
|
||
<h1>🔍 Поиск кода ОКТРУ</h1>
|
||
<p class="subtitle">Введите название товара — агент найдёт подходящий код</p>
|
||
|
||
<label for="q">Название товара</label>
|
||
<input type="text" id="q" placeholder='Например: ноутбук Dell' autocomplete="off">
|
||
|
||
<button id="btn" onclick="check()">Проверить</button>
|
||
|
||
<div id="loading" class="loading">⏱ Агент думает…</div>
|
||
<div id="res" class="result"></div>
|
||
</div>
|
||
|
||
<script>
|
||
function check() {
|
||
const q = document.getElementById('q').value.trim();
|
||
if (!q) return;
|
||
|
||
const btn = document.getElementById('btn');
|
||
const res = document.getElementById('res');
|
||
const loading = document.getElementById('loading');
|
||
|
||
btn.disabled = true;
|
||
loading.className = 'loading show';
|
||
res.className = 'result';
|
||
res.textContent = '';
|
||
|
||
const xhr = new XMLHttpRequest();
|
||
xhr.open('GET', '/api/check?q=' + encodeURIComponent(q), true);
|
||
xhr.onload = function() {
|
||
btn.disabled = false;
|
||
loading.className = 'loading';
|
||
try {
|
||
const data = JSON.parse(xhr.responseText);
|
||
if (data.ok) {
|
||
res.className = 'result ok';
|
||
res.textContent = data.answer;
|
||
} else {
|
||
res.className = 'result err';
|
||
res.textContent = data.error || 'Ошибка';
|
||
}
|
||
} catch {
|
||
res.className = 'result err';
|
||
res.textContent = 'Ошибка ответа сервера';
|
||
}
|
||
};
|
||
xhr.onerror = function() {
|
||
btn.disabled = false;
|
||
loading.className = 'loading';
|
||
res.className = 'result err';
|
||
res.textContent = 'Сетевая ошибка — попробуйте ещё раз';
|
||
};
|
||
xhr.send();
|
||
|
||
document.getElementById('q').addEventListener('keydown', e => { if (e.key === 'Enter') check(); });
|
||
</script>
|
||
</body>
|
||
</html>
|