287 lines
12 KiB
HTML
287 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Помощник по договорам</title>
|
||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📄</text></svg>">
|
||
<style>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
.chat-container { max-width: 720px; margin: 0 auto; }
|
||
.chat-messages { min-height: 280px; max-height: 420px; overflow-y: auto; padding: var(--kt-ai-space-6); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-xl); background: var(--kt-ai-bg-soft); margin-bottom: var(--kt-ai-space-6); }
|
||
.chat-message { margin-bottom: var(--kt-ai-space-4); padding: var(--kt-ai-space-4); border-radius: var(--kt-ai-radius-lg); }
|
||
.chat-message.user { background: var(--kt-ai-primary); color: var(--kt-ai-fg); margin-left: 20%; }
|
||
.chat-message.bot { background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-border); margin-right: 20%; }
|
||
.chat-message .link { color: var(--kt-ai-link); text-decoration: underline; }
|
||
.faq-item { cursor: pointer; transition: all 0.2s; }
|
||
.faq-item:hover { background: var(--kt-ai-bg-soft); }
|
||
.faq-answer { display: none; padding: var(--kt-ai-space-4); background: var(--kt-ai-bg-soft); border-radius: var(--kt-ai-radius-lg); margin-top: var(--kt-ai-space-2); }
|
||
.faq-item.active .faq-answer { display: block; }
|
||
.faq-item.active .faq-question { color: var(--kt-ai-primary); }
|
||
.empty-state { text-align: center; padding: var(--kt-ai-space-10); color: var(--kt-ai-fg-muted); }
|
||
</style>
|
||
</head>
|
||
<body class="kt-ai-app" data-kt-data-mode="demo">
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<div style="display:flex;align-items:center;gap:var(--kt-ai-space-3)">
|
||
<img src="https://code.vibe42.kz/tore/aitu/kt-logo.svg" alt="Казахтелеком" height="28">
|
||
<strong>Помощник по договорам</strong>
|
||
</div>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span class="kt-ai-chip" data-tone="orange">Демо-данные</span>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="kt-ai-hero" data-align="center">
|
||
<div class="kt-ai-wrap">
|
||
<h1>Помощь по договорному порталу</h1>
|
||
<p class="kt-ai-hero-sub">Задайте вопрос о создании договора, маршруте согласования или получите ссылку на инструкцию</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Чат с помощником</h2>
|
||
<p>Введите вопрос — получите короткий ответ со ссылкой на инструкцию</p>
|
||
</div>
|
||
|
||
<div class="chat-container">
|
||
<div class="chat-messages" id="chatMessages">
|
||
<div class="empty-state" id="emptyState">
|
||
<p>Здесь появятся ваши вопросы и ответы</p>
|
||
</div>
|
||
</div>
|
||
|
||
<form id="chatForm" style="display:flex;gap:var(--kt-ai-space-3);align-items:flex-end">
|
||
<div class="kt-ai-field" style="flex:1;margin:0">
|
||
<label for="questionInput">Ваш вопрос</label>
|
||
<input type="text" id="questionInput" class="kt-ai-input" placeholder="Как создать договор? Где маршрут согласования?" required>
|
||
</div>
|
||
<button type="submit" class="kt-ai-btn" data-variant="primary" data-size="lg">Получить ответ</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Популярные вопросы</h2>
|
||
<p>Нажмите на вопрос, чтобы увидеть ответ</p>
|
||
</div>
|
||
|
||
<div id="faqList" style="max-width:720px;margin:0 auto">
|
||
<!-- FAQ items rendered by JS -->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>О системе</h2>
|
||
<p>Помощник работает по инструкциям договорного портала</p>
|
||
</div>
|
||
|
||
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9)">
|
||
<article class="kt-ai-tile">
|
||
<div class="kt-ai-tile-icon">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
||
<polyline points="14 2 14 8 20 8"></polyline>
|
||
</svg>
|
||
</div>
|
||
<h3>Создание договора</h3>
|
||
<p>Пошаговые инструкции по созданию всех типов договоров в системе</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<div class="kt-ai-tile-icon">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
|
||
</svg>
|
||
</div>
|
||
<h3>Маршруты согласования</h3>
|
||
<p>Информация о том, кто и в каком порядке согласует договоры</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<div class="kt-ai-tile-icon">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||
</svg>
|
||
</svg>
|
||
</div>
|
||
<h3>Правила и требования</h3>
|
||
<p>Ответы только по инструкциям — никаких домыслов</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 Казахтелеком</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>Помощник по договорам</span>
|
||
</footer>
|
||
|
||
<script>
|
||
// Демо-данные: популярные вопросы и ответы
|
||
const FAQ_DATA = [
|
||
{
|
||
id: 1,
|
||
question: "Как создать договор?",
|
||
answer: "Инструкция ещё не загружена. Обратитесь к руководителю подразделения или дождитесь обновления раздела."
|
||
},
|
||
{
|
||
id: 2,
|
||
question: "Где посмотреть маршрут согласования?",
|
||
answer: "Инструкция ещё не загружена. Обратитесь к руководителю подразделения или дождитесь обновления раздела."
|
||
},
|
||
{
|
||
id: 3,
|
||
question: "Кто согласует договор?",
|
||
answer: "Инструкция ещё не загружена. Обратитесь к руководителю подразделения или дождитесь обновления раздела."
|
||
},
|
||
{
|
||
id: 4,
|
||
question: "Как изменить статус договора?",
|
||
answer: "Инструкция ещё не загружена. Обратитесь к руководителю подразделения или дождитесь обновления раздела."
|
||
},
|
||
{
|
||
id: 5,
|
||
question: "Где найти шаблон договора?",
|
||
answer: "Инструкция ещё не загружена. Обратитесь к руководителю подразделения или дождитесь обновления раздела."
|
||
},
|
||
{
|
||
id: 6,
|
||
question: "Как отозвать договор на согласовании?",
|
||
answer: "Инструкция ещё не загружена. Обратитесь к руководителю подразделения или дождитесь обновления раздела."
|
||
}
|
||
];
|
||
|
||
// История чата в localStorage
|
||
let chatHistory = JSON.parse(localStorage.getItem('chatHistory') || '[]');
|
||
|
||
// Инициализация
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
renderFAQ();
|
||
renderChatHistory();
|
||
|
||
// Обработчик формы чата
|
||
document.getElementById('chatForm').addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
const input = document.getElementById('questionInput');
|
||
const question = input.value.trim();
|
||
|
||
if (question) {
|
||
addMessage(question, 'user');
|
||
const answer = findAnswer(question);
|
||
setTimeout(() => {
|
||
addMessage(answer, 'bot');
|
||
}, 400);
|
||
input.value = '';
|
||
}
|
||
});
|
||
});
|
||
|
||
// Рендер FAQ
|
||
function renderFAQ() {
|
||
const container = document.getElementById('faqList');
|
||
container.innerHTML = FAQ_DATA.map(function(item) {
|
||
return '<div class="kt-ai-card faq-item" data-id="' + item.id + '">' +
|
||
'<div class="faq-question" style="padding:var(--kt-ai-space-4);font-weight:var(--kt-ai-weight-medium)">' +
|
||
item.question +
|
||
'</div>' +
|
||
'<div class="faq-answer">' + item.answer + '</div>' +
|
||
'</div>';
|
||
}).join('');
|
||
|
||
// Клик по вопросам
|
||
container.querySelectorAll('.faq-item').forEach(function(el) {
|
||
el.addEventListener('click', function() {
|
||
this.classList.toggle('active');
|
||
});
|
||
});
|
||
}
|
||
|
||
// Поиск ответа по ключевым словам
|
||
function findAnswer(question) {
|
||
const q = question.toLowerCase();
|
||
|
||
if (q.includes('создать') || q.includes('новый договор')) {
|
||
return FAQ_DATA[0].answer;
|
||
}
|
||
if (q.includes('маршрут') || q.includes('согласование')) {
|
||
return FAQ_DATA[1].answer;
|
||
}
|
||
if (q.includes('кто соглас') || q.includes('согласующ')) {
|
||
return FAQ_DATA[2].answer;
|
||
}
|
||
if (q.includes('статус') || q.includes('изменить')) {
|
||
return FAQ_DATA[3].answer;
|
||
}
|
||
if (q.includes('шаблон') || q.includes('форма')) {
|
||
return FAQ_DATA[4].answer;
|
||
}
|
||
if (q.includes('отозвать') || q.includes('вернуть')) {
|
||
return FAQ_DATA[5].answer;
|
||
}
|
||
|
||
return "Я не нашёл точного ответа на ваш вопрос. Попробуйте переформулировать или выберите вопрос из списка популярных. Инструкции ещё не загружены.";
|
||
}
|
||
|
||
// Добавление сообщения в чат
|
||
function addMessage(text, type) {
|
||
const container = document.getElementById('chatMessages');
|
||
const emptyState = document.getElementById('emptyState');
|
||
|
||
if (emptyState) {
|
||
emptyState.style.display = 'none';
|
||
}
|
||
|
||
const messageDiv = document.createElement('div');
|
||
messageDiv.className = 'chat-message ' + type;
|
||
messageDiv.innerHTML = text;
|
||
container.appendChild(messageDiv);
|
||
container.scrollTop = container.scrollHeight;
|
||
|
||
// Сохранение в localStorage
|
||
if (type === 'user') {
|
||
chatHistory.push({ text: text, type: type, timestamp: Date.now() });
|
||
} else {
|
||
chatHistory.push({ text: text, type: type, timestamp: Date.now() });
|
||
}
|
||
localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
|
||
}
|
||
|
||
// Рендер истории чата
|
||
function renderChatHistory() {
|
||
if (chatHistory.length === 0) return;
|
||
|
||
const container = document.getElementById('chatMessages');
|
||
const emptyState = document.getElementById('emptyState');
|
||
|
||
if (emptyState) {
|
||
emptyState.style.display = 'none';
|
||
}
|
||
|
||
chatHistory.forEach(function(msg) {
|
||
const messageDiv = document.createElement('div');
|
||
messageDiv.className = 'chat-message ' + msg.type;
|
||
messageDiv.innerHTML = msg.text;
|
||
container.appendChild(messageDiv);
|
||
});
|
||
container.scrollTop = container.scrollHeight;
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|