191 lines
8.4 KiB
HTML
191 lines
8.4 KiB
HTML
<!doctype html>
|
||
<html lang="kk">
|
||
<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="#laws" class="nav-link">⚖️ Заңдар</a>
|
||
<a href="#structure" class="nav-link">🏢 Құрылым</a>
|
||
<a href="#videos" class="nav-link">🎬 Видео</a>
|
||
<a href="#complaints" class="nav-link">📮 Шағымдар</a>
|
||
<a href="#test" class="nav-link">📝 Тест</a>
|
||
<a href="#dashboard" class="nav-link">📊 Дашборд</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="hero">
|
||
<div class="hero-content">
|
||
<h1>Комплаенс — бұл бәріміздің мәселеміз</h1>
|
||
<p>Телеканалдың комплаенс-порталы: заңдар, оқыту материалдары, видео сабақтар, шағым ящигі және тест нәтижелерінің статистикасы.</p>
|
||
<div class="hero-btns">
|
||
<a class="btn-primary" href="#laws">Заңдарды оқу</a>
|
||
<a class="btn-ghost" href="#test">Тест тапсыру</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<main>
|
||
<section id="laws" class="section">
|
||
<div class="section-header">
|
||
<h2>⚖️ Заңдар мен материалдар</h2>
|
||
<p class="section-desc">Комплаенс бойынша оқыту заңдары мен регламенттер</p>
|
||
</div>
|
||
<div class="toolbar">
|
||
<input type="search" id="law-search" class="search-input" placeholder="Заңды іздеу...">
|
||
<div class="chips" id="law-chips"></div>
|
||
</div>
|
||
<div class="law-list" id="law-list"></div>
|
||
</section>
|
||
|
||
<section id="structure" class="section">
|
||
<div class="section-header">
|
||
<h2>🏢 Басшылық құрылымы</h2>
|
||
<p class="section-desc">Телеканалдың басшылығы және комплаенс бағыты</p>
|
||
</div>
|
||
<div class="structure-grid" id="structure-grid"></div>
|
||
</section>
|
||
|
||
<section id="videos" class="section">
|
||
<div class="section-header">
|
||
<h2>🎬 Видео сабақтар</h2>
|
||
<p class="section-desc">Комплаенс бойынша қысқа видео сабақтар</p>
|
||
</div>
|
||
<div class="video-grid" id="video-grid"></div>
|
||
<details class="upload-box" id="upload-box">
|
||
<summary>📤 Жаңа видео сабақ қосу (офицер)</summary>
|
||
<form id="video-form" class="upload-form">
|
||
<input type="text" name="title" placeholder="Сабақ тақырыбы" required>
|
||
<input type="file" name="file" accept="video/*" required>
|
||
<button type="submit" class="btn-primary">Жүктеу</button>
|
||
</form>
|
||
</details>
|
||
</section>
|
||
|
||
<section id="complaints" class="section">
|
||
<div class="section-header">
|
||
<h2>📮 Шағым ящигі</h2>
|
||
<p class="section-desc">Құпия шағым немесе өтініш қалдыру (анонимді түрде)</p>
|
||
</div>
|
||
<div class="complaint-layout">
|
||
<form id="complaint-form" class="complaint-form">
|
||
<label>Қандай тақырып?</label>
|
||
<select name="category" required>
|
||
<option value="">Таңдаңыз...</option>
|
||
<option>Сыбайлас жемқорлық</option>
|
||
<option>Мүдделер қақтығысы</option>
|
||
<option>Жеке деректерді қорғау</option>
|
||
<option>Сыйлықтар мен төлемдер</option>
|
||
<option>Басқа</option>
|
||
</select>
|
||
<label>Сипаттама</label>
|
||
<textarea name="text" rows="5" placeholder="Мәселені еркін түрде сипаттаңыз..." required></textarea>
|
||
<button type="submit" class="btn-primary">Жіберу</button>
|
||
<p class="form-note">Жіберу толық анонимді. Қаласаңыз, байланыс деректеріңізді қосыңыз.</p>
|
||
</form>
|
||
<div class="complaint-info">
|
||
<h3>Сенім телефоны</h3>
|
||
<p class="phone">☎️ 8 800 000-00-00</p>
|
||
<p>📧 compliance@tv.kz</p>
|
||
<p class="muted">Барлық өтініштер құпия қарастырылады.</p>
|
||
</div>
|
||
</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>Тестке кірмес бұрын атыңызды және бөлімді көрсетіңіз:</p>
|
||
<div class="test-name-row">
|
||
<input type="text" id="test-name" placeholder="Аты-жөні" required>
|
||
<input type="text" id="test-dept" placeholder="Бөлім" required>
|
||
</div>
|
||
<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 id="dashboard" class="section">
|
||
<div class="section-header">
|
||
<h2>📊 Дашборд: тест нәтижелері</h2>
|
||
<p class="section-desc">Қызметкерлердің тест нәтижелерінің статистикасы</p>
|
||
</div>
|
||
<div class="stats-grid" id="stats-grid"></div>
|
||
<div class="toolbar">
|
||
<input type="search" id="dash-search" class="search-input" placeholder="Қызметкерді іздеу...">
|
||
<button class="btn-secondary" id="export-btn">📥 Excel-ге шығару</button>
|
||
</div>
|
||
<div class="table-wrap">
|
||
<table class="data-table" id="results-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Қызметкер</th>
|
||
<th>Бөлім</th>
|
||
<th>Нәтиже</th>
|
||
<th>Дата</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
</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>
|