356 lines
16 KiB
HTML
356 lines
16 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Помощник по скидкам</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<div class="app">
|
||
<!-- Sidebar -->
|
||
<aside class="sidebar" id="sidebar">
|
||
<div class="sidebar-header">
|
||
<div class="logo">
|
||
<span class="logo-icon">🎯</span>
|
||
<span class="logo-text">Помощник по скидкам</span>
|
||
</div>
|
||
<button class="btn-icon close-sidebar" id="closeSidebar">×</button>
|
||
</div>
|
||
|
||
<nav class="nav">
|
||
<a href="#" class="nav-item active" data-page="home">
|
||
<span class="nav-icon">🏠</span>
|
||
<span class="nav-text">Главная</span>
|
||
</a>
|
||
<a href="#" class="nav-item" data-page="search">
|
||
<span class="nav-icon">🔎</span>
|
||
<span class="nav-text">Найти ответ</span>
|
||
</a>
|
||
<a href="#" class="nav-item" data-page="learning">
|
||
<span class="nav-icon">📚</span>
|
||
<span class="nav-text">Обучение</span>
|
||
</a>
|
||
<a href="#" class="nav-item" data-page="errors">
|
||
<span class="nav-icon">⚠️</span>
|
||
<span class="nav-text">Ошибки</span>
|
||
</a>
|
||
<a href="#" class="nav-item" data-page="calculator">
|
||
<span class="nav-icon">🧮</span>
|
||
<span class="nav-text">Расчет скидки</span>
|
||
</a>
|
||
<a href="#" class="nav-item" data-page="instructions">
|
||
<span class="nav-icon">📖</span>
|
||
<span class="nav-text">Инструкции</span>
|
||
</a>
|
||
<a href="#" class="nav-item" data-page="assistant">
|
||
<span class="nav-icon">🤖</span>
|
||
<span class="nav-text">Помощник</span>
|
||
</a>
|
||
<a href="#" class="nav-item" data-page="faq">
|
||
<span class="nav-icon">❓</span>
|
||
<span class="nav-text">FAQ</span>
|
||
</a>
|
||
<a href="#" class="nav-item" data-page="tests">
|
||
<span class="nav-icon">📝</span>
|
||
<span class="nav-text">Тесты</span>
|
||
</a>
|
||
</nav>
|
||
|
||
<div class="sidebar-footer">
|
||
<a href="#" class="nav-item" data-page="admin">
|
||
<span class="nav-icon">⚙️</span>
|
||
<span class="nav-text">Админ-панель</span>
|
||
</a>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Main Content -->
|
||
<main class="main-content">
|
||
<!-- Mobile Header -->
|
||
<header class="mobile-header">
|
||
<button class="btn-icon" id="openSidebar">☰</button>
|
||
<span class="mobile-title">Помощник по скидкам</span>
|
||
</header>
|
||
|
||
<!-- Page: Home -->
|
||
<section class="page active" id="page-home">
|
||
<div class="hero">
|
||
<h1 class="hero-title">Чем могу помочь?</h1>
|
||
<div class="search-box">
|
||
<input type="text" class="search-input" id="homeSearchInput" placeholder="Введите вопрос… Например: Как создать скидку на тариф?">
|
||
<button class="btn btn-primary" id="homeSearchBtn">Найти ответ</button>
|
||
</div>
|
||
<div class="quick-questions">
|
||
<span class="qq-label">Популярные вопросы:</span>
|
||
<button class="qq-btn" data-q="Как создать скидку?">Как создать скидку?</button>
|
||
<button class="qq-btn" data-q="Почему не проходит скидка?">Почему не проходит скидка?</button>
|
||
<button class="qq-btn" data-q="Что означает ошибка?">Что означает ошибка?</button>
|
||
<button class="qq-btn" data-q="Какие условия заполнить?">Какие условия заполнить?</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="upload-section">
|
||
<div class="upload-card" id="uploadDropzone">
|
||
<div class="upload-icon">📎</div>
|
||
<h3>Загрузить скриншот ошибки</h3>
|
||
<p>Перетащите изображение сюда или нажмите для загрузки</p>
|
||
<input type="file" id="uploadInput" accept="image/*" style="display: none;">
|
||
<button class="btn btn-secondary" id="uploadBtn">Загрузить изображение</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="quick-solutions">
|
||
<h2 class="section-title">Быстрые решения</h2>
|
||
<div class="solutions-grid">
|
||
<div class="solution-card solution-red" data-solution="not-created">
|
||
<div class="solution-icon">🔴</div>
|
||
<h3>Не создается скидка</h3>
|
||
</div>
|
||
<div class="solution-card solution-orange" data-solution="error">
|
||
<div class="solution-icon">🟠</div>
|
||
<h3>Появилась ошибка</h3>
|
||
</div>
|
||
<div class="solution-card solution-yellow" data-solution="no-tariff">
|
||
<div class="solution-icon">🟡</div>
|
||
<h3>Не вижу тариф</h3>
|
||
</div>
|
||
<div class="solution-card solution-blue" data-solution="cant-change">
|
||
<div class="solution-icon">🔵</div>
|
||
<h3>Не могу изменить</h3>
|
||
</div>
|
||
<div class="solution-card solution-purple" data-solution="which-choose">
|
||
<div class="solution-icon">🟣</div>
|
||
<h3>Какую скидку выбрать</h3>
|
||
</div>
|
||
<div class="solution-card solution-green" data-solution="check-conditions">
|
||
<div class="solution-icon">🟢</div>
|
||
<h3>Проверить условия</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="features-grid">
|
||
<div class="feature-card" data-page="learning">
|
||
<div class="feature-icon">📚</div>
|
||
<h3>Обучение</h3>
|
||
<p>Пошаговые уроки по работе со скидками</p>
|
||
</div>
|
||
<div class="feature-card" data-page="errors">
|
||
<div class="feature-icon">⚠️</div>
|
||
<h3>Ошибки</h3>
|
||
<p>Справочник ошибок и решений</p>
|
||
</div>
|
||
<div class="feature-card" data-page="instructions">
|
||
<div class="feature-icon">📖</div>
|
||
<h3>Инструкции</h3>
|
||
<p>Пошаговые руководства</p>
|
||
</div>
|
||
<div class="feature-card" data-page="assistant">
|
||
<div class="feature-icon">🤖</div>
|
||
<h3>AI-помощник</h3>
|
||
<p>Ответы на любые вопросы</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Page: Search -->
|
||
<section class="page" id="page-search">
|
||
<h1 class="page-title">Поиск по базе знаний</h1>
|
||
<div class="search-section">
|
||
<input type="text" class="search-input large" id="searchInput" placeholder="Введите запрос… Например: скидка не создается">
|
||
<button class="btn btn-primary btn-large" id="searchBtn">Найти</button>
|
||
</div>
|
||
<div class="search-results" id="searchResults"></div>
|
||
</section>
|
||
|
||
<!-- Page: Learning -->
|
||
<section class="page" id="page-learning">
|
||
<h1 class="page-title">Обучение</h1>
|
||
<div class="lessons-list" id="lessonsList"></div>
|
||
</section>
|
||
|
||
<!-- Page: Errors -->
|
||
<section class="page" id="page-errors">
|
||
<h1 class="page-title">Справочник ошибок</h1>
|
||
<div class="search-section">
|
||
<input type="text" class="search-input" id="errorSearchInput" placeholder="Введите код или текст ошибки…">
|
||
</div>
|
||
<div class="errors-grid" id="errorsGrid"></div>
|
||
</section>
|
||
|
||
<!-- Page: Calculator -->
|
||
<section class="page" id="page-calculator">
|
||
<h1 class="page-title">Расчет скидки</h1>
|
||
<div class="calculator-card">
|
||
<div class="form-group">
|
||
<label>Тариф</label>
|
||
<select class="input-select" id="calcTariff"></select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Тип скидки</label>
|
||
<select class="input-select" id="calcType">
|
||
<option value="percent">Процентная</option>
|
||
<option value="fixed">Фиксированная</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Размер скидки</label>
|
||
<input type="number" class="input" id="calcAmount" placeholder="30" min="0" max="100">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Срок действия</label>
|
||
<select class="input-select" id="calcPeriod">
|
||
<option value="3">3 месяца</option>
|
||
<option value="6">6 месяцев</option>
|
||
<option value="12" selected>12 месяцев</option>
|
||
<option value="24">24 месяца</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Основание</label>
|
||
<select class="input-select" id="calcReason">
|
||
<option value="">Выберите основание</option>
|
||
<option value="loyalty">Лояльность клиента</option>
|
||
<option value="promotion">Акция</option>
|
||
<option value="complaint">Жалоба клиента</option>
|
||
<option value="retention">Удержание клиента</option>
|
||
</select>
|
||
</div>
|
||
<button class="btn btn-primary btn-large" id="calcBtn">Рассчитать</button>
|
||
<div class="calc-result" id="calcResult" style="display: none;"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Page: Instructions -->
|
||
<section class="page" id="page-instructions">
|
||
<h1 class="page-title">Инструкции</h1>
|
||
<div class="instructions-list" id="instructionsList"></div>
|
||
</section>
|
||
|
||
<!-- Page: Assistant -->
|
||
<section class="page" id="page-assistant">
|
||
<h1 class="page-title">🤖 Помощник по скидкам</h1>
|
||
<div class="assistant-container">
|
||
<div class="chat-messages" id="chatMessages">
|
||
<div class="message bot">
|
||
<div class="message-content">
|
||
<p>Здравствуйте! Я ваш помощник по скидкам.</p>
|
||
<p>Задайте мне любой вопрос, например:</p>
|
||
<ul>
|
||
<li>Как создать скидку на тариф?</li>
|
||
<li>Почему не проходит скидка 30%?</li>
|
||
<li>Что означает ошибка 403?</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="chat-input">
|
||
<input type="text" class="search-input" id="chatInput" placeholder="Введите ваш вопрос…">
|
||
<button class="btn btn-primary" id="chatSendBtn">➤</button>
|
||
</div>
|
||
<div class="feedback-block" id="feedbackBlock" style="display: none;">
|
||
<span>Ответ помог?</span>
|
||
<button class="btn-icon feedback-btn" id="feedbackYes">👍</button>
|
||
<button class="btn-icon feedback-btn" id="feedbackNo">👎</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Page: FAQ -->
|
||
<section class="page" id="page-faq">
|
||
<h1 class="page-title">Частые вопросы</h1>
|
||
<div class="faq-list" id="faqList"></div>
|
||
</section>
|
||
|
||
<!-- Page: Tests -->
|
||
<section class="page" id="page-tests">
|
||
<h1 class="page-title">Проверка знаний</h1>
|
||
<div class="tests-intro" id="testsIntro">
|
||
<p>Пройдите тест, чтобы проверить свои знания по работе со скидками.</p>
|
||
<button class="btn btn-primary btn-large" id="startTestBtn">Начать тест</button>
|
||
</div>
|
||
<div class="test-container" id="testContainer" style="display: none;">
|
||
<div class="test-progress">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" id="testProgress"></div>
|
||
</div>
|
||
<span class="test-counter" id="testCounter">1/10</span>
|
||
</div>
|
||
<div class="test-question" id="testQuestion"></div>
|
||
<div class="test-answers" id="testAnswers"></div>
|
||
<div class="test-feedback" id="testFeedback"></div>
|
||
<button class="btn btn-primary" id="nextQuestionBtn" style="display: none;">Следующий вопрос</button>
|
||
</div>
|
||
<div class="test-result" id="testResult" style="display: none;">
|
||
<h2>Результат</h2>
|
||
<div class="result-score" id="resultScore"></div>
|
||
<p class="result-message" id="resultMessage"></p>
|
||
<button class="btn btn-primary" id="restartTestBtn">Пройти заново</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Page: Admin -->
|
||
<section class="page" id="page-admin">
|
||
<h1 class="page-title">Админ-панель</h1>
|
||
<div class="admin-tabs">
|
||
<button class="admin-tab active" data-tab="errors">Ошибки</button>
|
||
<button class="admin-tab" data-tab="faq">FAQ</button>
|
||
<button class="admin-tab" data-tab="lessons">Уроки</button>
|
||
<button class="admin-tab" data-tab="instructions">Инструкции</button>
|
||
<button class="admin-tab" data-tab="tests">Тесты</button>
|
||
</div>
|
||
<div class="admin-content">
|
||
<div class="admin-panel active" id="admin-errors"></div>
|
||
<div class="admin-panel" id="admin-faq"></div>
|
||
<div class="admin-panel" id="admin-lessons"></div>
|
||
<div class="admin-panel" id="admin-instructions"></div>
|
||
<div class="admin-panel" id="admin-tests"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Modal: Error Details -->
|
||
<div class="modal-overlay" id="errorModal" style="display: none;">
|
||
<div class="modal modal-large">
|
||
<div class="modal-header">
|
||
<h2 id="errorModalTitle">Ошибка</h2>
|
||
<button class="btn-close" id="closeErrorModal">×</button>
|
||
</div>
|
||
<div class="modal-body" id="errorModalBody"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal: Upload Result -->
|
||
<div class="modal-overlay" id="uploadModal" style="display: none;">
|
||
<div class="modal modal-large">
|
||
<div class="modal-header">
|
||
<h2>Результат анализа</h2>
|
||
<button class="btn-close" id="closeUploadModal">×</button>
|
||
</div>
|
||
<div class="modal-body" id="uploadModalBody">
|
||
<div class="upload-loading">
|
||
<div class="spinner"></div>
|
||
<p>Анализирую изображение…</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal: Lesson -->
|
||
<div class="modal-overlay" id="lessonModal" style="display: none;">
|
||
<div class="modal modal-xlarge">
|
||
<div class="modal-header">
|
||
<h2 id="lessonModalTitle">Урок</h2>
|
||
<button class="btn-close" id="closeLessonModal">×</button>
|
||
</div>
|
||
<div class="modal-body" id="lessonModalBody"></div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<script src="data.js"></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|