136 lines
5.4 KiB
HTML
136 lines
5.4 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Compliance TV | Корпоративный телеканал</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<div class="header-content">
|
||
<div class="logo">
|
||
<span class="logo-icon">📺</span>
|
||
<div class="logo-text">
|
||
<h1>Compliance TV</h1>
|
||
<p>Корпоративный телеканал по комплаенс</p>
|
||
</div>
|
||
</div>
|
||
<nav>
|
||
<a href="#videos" class="nav-link active">Видео</a>
|
||
<a href="#news" class="nav-link">Новости</a>
|
||
<a href="#faq" class="nav-link">FAQ</a>
|
||
<a href="#test" class="nav-link">Тестирование</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<section id="videos" class="section">
|
||
<div class="section-header">
|
||
<h2>🎬 Обучающие видео</h2>
|
||
<p class="section-desc">Краткие уроки по комплаенс (2-5 минут)</p>
|
||
</div>
|
||
<div class="video-grid" id="video-grid"></div>
|
||
</section>
|
||
|
||
<section id="news" class="section">
|
||
<div class="section-header">
|
||
<h2>📰 Новости комплаенс</h2>
|
||
<p class="section-desc">Последние изменения и важные объявления</p>
|
||
</div>
|
||
<div class="news-list" id="news-list"></div>
|
||
</section>
|
||
|
||
<section id="faq" class="section">
|
||
<div class="section-header">
|
||
<h2>❓ Часто задаваемые вопросы</h2>
|
||
<p class="section-desc">Ответы на типичные вопросы сотрудников</p>
|
||
</div>
|
||
<div class="faq-list" id="faq-list"></div>
|
||
</section>
|
||
|
||
<section id="test" class="section">
|
||
<div class="section-header">
|
||
<h2>🧠 Проверка знаний</h2>
|
||
<p class="section-desc">Пройдите тестирование по материалам канала</p>
|
||
</div>
|
||
<div class="test-container">
|
||
<div class="test-start" id="test-start">
|
||
<p>Вам будет предложено 10 вопросов по темам:</p>
|
||
<ul class="test-topics">
|
||
<li>• Этика и конфликт интересов</li>
|
||
<li>• Антикоррупционная политика</li>
|
||
<li>• Работа с конфиденциальной информацией</li>
|
||
<li>• Подарки и вознаграждения</li>
|
||
</ul>
|
||
<button class="btn-primary" id="start-test-btn">Начать тестирование</button>
|
||
</div>
|
||
<div class="test-quiz" id="test-quiz" style="display: none;">
|
||
<div class="test-progress">
|
||
<span>Вопрос <span id="q-current">1</span> из <span id="q-total">10</span></span>
|
||
</div>
|
||
<p class="question-text" id="question-text"></p>
|
||
<div class="test-options" id="test-options"></div>
|
||
<p class="test-feedback" id="test-feedback"></p>
|
||
</div>
|
||
<div class="test-result" id="test-result" style="display: none;">
|
||
<div class="result-icon">🏆</div>
|
||
<h3>Тестирование завершено!</h3>
|
||
<div class="result-stats">
|
||
<div class="result-stat">
|
||
<span class="result-value" id="result-score">0</span>
|
||
<span class="result-label">Правильных ответов</span>
|
||
</div>
|
||
<div class="result-stat">
|
||
<span class="result-value" id="result-percent">0%</span>
|
||
<span class="result-label">Результат</span>
|
||
</div>
|
||
</div>
|
||
<p class="result-message" id="result-message"></p>
|
||
<button class="btn-primary" id="restart-test-btn">Пройти заново</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section dashboard">
|
||
<div class="section-header">
|
||
<h2>📊 Моя статистика</h2>
|
||
</div>
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<span class="stat-icon">📚</span>
|
||
<span class="stat-value" id="stat-lessons">0</span>
|
||
<span class="stat-label">Просмотрено уроков</span>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="stat-icon">✅</span>
|
||
<span class="stat-value" id="stat-tests">0</span>
|
||
<span class="stat-label">Пройдено тестов</span>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="stat-icon">🎯</span>
|
||
<span class="stat-value" id="stat-average">0%</span>
|
||
<span class="stat-label">Средний балл</span>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="stat-icon">📅</span>
|
||
<span class="stat-value" id="stat-last">—</span>
|
||
<span class="stat-label">Последняя активность</span>
|
||
</div>
|
||
</div>
|
||
<button class="btn-secondary" id="reset-stats-btn">Сбросить статистику</button>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<div class="footer-content">
|
||
<p>© 2026 Compliance TV | АО «Казахтелеком»</p>
|
||
<p class="footer-note">Внутренний портал для сотрудников</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|